/* Extracted from original inline style block: web-cinema-styles. Order is intentional. */
#projects[data-active-tab="websites"] .spotlight-heading,#projects[data-active-tab="websites"] .spotlight-stage,#projects[data-active-tab="websites"] .spotlight-footer,#projects[data-active-tab="websites"] .spotlight-instructions,#projects[data-active-tab="websites"] .spotlight-disclaimer{display:none!important}
#projects .web-cinematic[hidden]{display:none!important}
#projects .web-cinematic{width:100%;min-height:calc(100dvh - 175px);padding:15px clamp(10px,2vw,30px) 24px;background:#080b0f;color:#f5f4ec;display:flex;flex-direction:column;gap:14px;border-radius:22px;margin:14px 0 0;box-shadow:0 15px 48px #0002}
#projects .web-cinema-head{display:flex;justify-content:space-between;gap:10px;padding:8px 10px 0;font:700 10px/1.5 Arial,sans-serif;letter-spacing:.19em;color:#e4e4df}
#projects .web-cinema-head i{font-style:normal;color:#899195}
#projects .web-cinema-viewport{min-height:400px;height:clamp(410px,65dvh,730px);width:100%;overflow:hidden;outline:none;touch-action:pan-y}
#projects .web-cinema-strip{height:100%;display:flex;align-items:stretch;gap:10px;overflow:hidden;border-radius:18px}
#projects .web-cinema-card{position:relative;flex:1 1 0;min-width:0;height:100%;border-radius:16px;border:1px solid #ffffff20;overflow:hidden;background:#15212b;cursor:pointer;color:#fff;padding:0;text-align:left;isolation:isolate;transition:flex-grow .72s cubic-bezier(.22,1,.36,1),filter .55s ease,opacity .55s ease;filter:saturate(.7) brightness(.6)}
#projects .web-cinema-card.is-active{flex-grow:11;cursor:default;filter:none}
#projects .web-cinema-card:focus-visible{outline:2px solid #f9f9f0;outline-offset:-3px}
#projects .web-cinema-art{position:absolute;inset:0;min-width:280px;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,3vw,45px);background:var(--web-bg)}
#projects .web-cinema-card:not(.is-active) .web-cinema-art{padding:16px;align-items:center;justify-content:center}
#projects .web-cinema-art:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 75% 30%,#ffffff15,transparent 52%)}
#projects .web-cinema-mini{position:relative;font-size:10px;letter-spacing:.2em;font-weight:800;white-space:nowrap}
#projects .web-cinema-center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;flex:1;min-height:0}
#projects .web-cinema-mark{font:500 clamp(34px,5vw,88px)/.98 Georgia,serif;letter-spacing:.11em;white-space:pre-line;text-wrap:balance}
#projects .web-cinema-sub{font:500 11px/1.6 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#ffffffa6}
#projects .web-cinema-orbit{width:94px;height:94px;display:grid;place-items:center;border:1px solid #ffffff65;border-radius:50%;font:400 30px Georgia,serif;animation:webOrbit 12s linear infinite}
#projects .web-cinema-card:not(.is-active) .web-cinema-mini,#projects .web-cinema-card:not(.is-active) .web-cinema-sub,#projects .web-cinema-card:not(.is-active) .web-cinema-orbit,#projects .web-cinema-card:not(.is-active) .web-cinema-foot{opacity:0}
#projects .web-cinema-card:not(.is-active) .web-cinema-mark{font-size:30px;writing-mode:vertical-rl;letter-spacing:.07em;white-space:nowrap}
#projects .web-cinema-foot{position:relative;display:flex;justify-content:space-between;align-items:center;font:700 10px Arial,sans-serif;letter-spacing:.12em}
#projects .web-cinema-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:4px 11px}
#projects .web-cinema-bottom>div:first-child{display:flex;flex-direction:column;gap:5px}
#projects .web-cinema-bottom strong{font:500 clamp(25px,3vw,39px) Georgia,serif}
#projects .web-cinema-bottom span{font:600 10px Arial,sans-serif;color:#9ba4ad;letter-spacing:.1em}
#projects .web-cinema-actions{display:flex;gap:8px}
#projects .web-cinema-actions button{width:48px;height:48px;border:1px solid #ffffff4d;background:#1d2530;color:white;border-radius:50%;font-size:20px;cursor:pointer;transition:background .25s,transform .25s}
#projects .web-cinema-actions button:hover{background:#3e5669;transform:scale(1.07)}
#projects .web-cinema-hint{text-align:center;font:600 9px Arial,sans-serif;letter-spacing:.18em;color:#899198}
@keyframes webOrbit{to{transform:rotate(360deg)}}
@media(max-width:760px){#projects .web-cinematic{min-height:calc(100dvh - 180px);padding:10px 8px 15px;margin-top:10px;border-radius:13px;gap:12px}#projects .web-cinema-head i{display:none}#projects .web-cinema-viewport{height:clamp(350px,60dvh,570px);min-height:350px}#projects .web-cinema-strip{gap:5px;border-radius:10px}#projects .web-cinema-card{border-radius:9px}#projects .web-cinema-card.is-active{flex-grow:7}#projects .web-cinema-art{min-width:170px;padding:14px}#projects .web-cinema-mark{font-size:clamp(24px,7vw,45px)}#projects .web-cinema-orbit{width:63px;height:63px}#projects .web-cinema-card:not(.is-active) .web-cinema-mark{font-size:17px}#projects .web-cinema-bottom strong{font-size:23px}#projects .web-cinema-actions button{width:38px;height:38px}#projects .web-cinema-hint{font-size:8px}}
@media(prefers-reduced-motion:reduce){#projects .web-cinema-card{transition:none}#projects .web-cinema-orbit{animation:none}}
/* Reference-matched side-peek sliding carousel; theme surface rather than black box. */
#projects .web-cinematic{background:transparent!important;color:var(--ink)!important;box-shadow:none!important;border-radius:0!important;padding:8px 0 14px!important;overflow:hidden}
#projects .web-cinema-head{color:var(--ink)!important;padding:8px 14px 0}
#projects .web-cinema-head i,#projects .web-cinema-bottom span,#projects .web-cinema-hint{color:var(--muted)!important}
#projects .web-cinema-viewport{overflow:hidden!important;border-radius:14px;position:relative;isolation:isolate}
#projects .web-cinema-strip{position:relative!important;display:block!important;overflow:visible!important;border-radius:0!important}
#projects .web-cinema-card,#projects .web-cinema-card.is-active{position:absolute!important;left:50%;top:1%;width:66%!important;height:98%!important;min-width:0!important;flex:none!important;border-radius:15px!important;border:1px solid #75808a55!important;will-change:transform;transform:translate3d(calc(-50% + var(--web-shift,0px)),0,0) scale(var(--web-scale,1));transition:transform .95s cubic-bezier(.22,.76,.18,1),filter .95s ease,opacity .7s ease!important;box-shadow:0 15px 35px #15202b1c}
#projects .web-cinema-card{filter:saturate(.78) brightness(.85)!important}
#projects .web-cinema-card.is-active{filter:none!important}
#projects .web-cinema-card:not(.is-active) .web-cinema-art{padding:clamp(18px,3vw,45px)!important;align-items:stretch!important;justify-content:space-between!important}
#projects .web-cinema-card:not(.is-active) .web-cinema-mini,#projects .web-cinema-card:not(.is-active) .web-cinema-sub,#projects .web-cinema-card:not(.is-active) .web-cinema-orbit,#projects .web-cinema-card:not(.is-active) .web-cinema-foot{opacity:1!important}
#projects .web-cinema-card:not(.is-active) .web-cinema-mark{font:500 clamp(34px,5vw,88px)/.98 Georgia,serif!important;writing-mode:horizontal-tb!important;letter-spacing:.11em!important;white-space:pre-line!important}
body.dark #projects .web-cinematic{background:transparent!important;color:var(--ink)!important}
@media(max-width:760px){#projects .web-cinema-card,#projects .web-cinema-card.is-active{width:80%!important}#projects .web-cinema-viewport{height:clamp(350px,58dvh,610px)}#projects .web-cinema-card:not(.is-active) .web-cinema-mark{font-size:clamp(24px,7vw,45px)!important}}
@media(prefers-reduced-motion:reduce){#projects .web-cinema-card{transition:none!important}}
#projects .tincup-gallery-bottle{position:absolute;left:50%;top:49%;height:63%;max-width:78%;object-fit:contain;transform:translate(-50%,-50%);opacity:.86;pointer-events:none;filter:drop-shadow(0 22px 22px #0008)}
#projects .web-cinema-card:has(.tincup-gallery-bottle) .web-cinema-mark{position:relative;z-index:1;font-weight:800;text-shadow:0 4px 18px #0009}
#projects .web-cinema-card:has(.tincup-gallery-bottle) .web-cinema-sub{position:relative;z-index:1;color:#e9ded0}
#projects .web-cinema-open{align-self:flex-start;display:inline-block;margin-top:8px;padding:9px 14px;border:1px solid currentColor;border-radius:25px;font:700 11px Arial,sans-serif;letter-spacing:.08em;text-decoration:none;color:var(--ink)}
#projects .web-cinema-open[hidden]{display:none!important}
#projects .web-cinema-open:hover{background:var(--ink);color:var(--bg,#fff)}