.reel-shell{position:relative;isolation:isolate;margin:6px auto 0;max-width:1380px;overflow:hidden;border-block:1px solid var(--ink);background:radial-gradient(ellipse at 50% 44%,#fffdf4 0,#ece9dd 53%,#e1dfd3 100%)}
.reel-shell::before,.reel-shell::after{content:'';position:absolute;z-index:-1;pointer-events:none;border:1px solid #25271f17;border-radius:50%;width:min(74vw,900px);height:min(74vw,900px);left:50%;top:43%;transform:translate(-50%,-50%) rotate(-15deg)}
.reel-shell::after{width:min(54vw,680px);height:min(54vw,680px);transform:translate(-50%,-50%) rotate(32deg)}
.reel-stage{position:relative;height:clamp(350px,42vw,560px);overflow:hidden;perspective:1200px;perspective-origin:50% 48%;touch-action:pan-y;user-select:none}
.reel-card{width:min(43vw,470px);left:50%;top:48%;transform-style:preserve-3d;will-change:transform,opacity;transition:filter .3s}
.reel-card-button{position:relative;filter:drop-shadow(0 24px 24px #1e201c2b)}
.reel-card .project-info,.reel-card .project-number,.reel-card .play-round,.reel-card .reel-clip-count{transition:opacity .25s}
.reel-card[aria-hidden="true"] .project-info,.reel-card[aria-hidden="true"] .project-number,.reel-card[aria-hidden="true"] .play-round,.reel-card[aria-hidden="true"] .reel-clip-count{opacity:0}
.reel-visual{aspect-ratio:1.72;background:#25271f;border:1px solid var(--ink);overflow:hidden}
.reel-visual img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;transition:transform .75s cubic-bezier(.2,.75,.25,1)}
.reel-card-button:hover .reel-visual img{transform:scale(1.045)}
.reel-shade{position:absolute;inset:0;background:linear-gradient(180deg,#16191322 0%,transparent 36%,#131610a8 100%);pointer-events:none}
.reel-card .project-number{z-index:1;left:17px;top:17px;background:var(--paper);color:var(--ink);padding:7px 9px;font-size:8px}
.reel-card .play-round{z-index:1;right:17px;bottom:17px;background:var(--lime);border-color:var(--lime);color:var(--ink);font-size:17px;width:48px;height:48px;padding-left:3px}
.reel-clip-count{position:absolute;right:18px;top:19px;background:#f3f0e6e8;color:var(--ink);padding:7px 9px;font-size:8px;z-index:2}
.reel-card .project-info{padding:13px 3px 0}
.reel-card .project-info h3{font-family:var(--display);font-size:clamp(23px,3vw,34px);letter-spacing:0;text-transform:uppercase}
.reel-card .project-info p{font-family:var(--mono);font-size:8px;letter-spacing:.06em}
.reel-card .project-info>span{font-size:21px}
.reel-hud{position:absolute;z-index:3;bottom:83px;left:clamp(18px,4vw,52px);right:clamp(18px,4vw,52px);display:flex;justify-content:space-between;align-items:center;gap:15px;pointer-events:none}
.reel-hud .mono{font-size:8px}
.reel-hint{color:var(--muted);text-align:center}
.reel-current{max-width:28%;text-align:right}
.reel-controls{position:absolute;z-index:4;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:20px;white-space:nowrap}
.reel-arrow{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;background:transparent;font-size:20px;transition:background .2s,color .2s,transform .2s}
.reel-arrow:hover{background:var(--ink);color:var(--paper);transform:scale(1.06)}
.reel-dots{display:flex;align-items:center;gap:7px}
.reel-dot{width:7px;height:7px;border-radius:50%;padding:0;background:#25271f48;transition:width .25s,background .25s}
.reel-dot.active{width:22px;border-radius:5px;background:var(--coral)}
.reel-pause{background:none;padding:9px 0;font-size:8px}
.demo-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dialog-stage{display:grid;place-items:center;aspect-ratio:16/9;background:#11130f;overflow:hidden}
.dialog-stage video,.dialog-stage iframe{display:block;width:100%;height:100%;max-height:62dvh;object-fit:contain;border:0;background:#11130f}
.dialog-stage video{aspect-ratio:16/9}
.video-fallback{position:absolute;inset:auto 15px 15px;background:var(--paper);padding:13px;text-align:center;font-size:9px}
.clip-picker{display:flex;gap:8px;overflow:auto;padding:12px 18px;border-bottom:1px solid var(--line)}
.clip-option{flex:0 0 auto;background:transparent;border:1px solid var(--line);padding:9px 12px;font-size:8px;text-align:left}
.clip-option.active,.clip-option:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dialog-source{display:inline-block;margin-top:17px;font-size:8px;text-decoration:underline;text-underline-offset:4px}
.dialog-description{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.dialog-description h2{font-size:clamp(31px,4vw,43px);line-height:1.06}
.reel-stage:focus-visible{outline:3px solid var(--coral);outline-offset:-5px}
body.reduce-motion .reel-shell{overflow:visible}
body.reduce-motion .reel-stage{height:auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;padding:28px clamp(18px,4vw,52px) 100px;perspective:none;overflow:visible;touch-action:auto}
body.reduce-motion .reel-card{width:100%;left:auto;top:auto}
body.reduce-motion .reel-card[aria-hidden="true"]{display:block}
body.reduce-motion .reel-hud{bottom:24px}
@media(max-width:760px){
  .reel-shell{margin-inline:-24px}
  .reel-stage{height:390px;perspective:900px}
  .reel-card{width:min(76vw,365px);top:46%}
  .reel-visual{aspect-ratio:1.48}
  .reel-hud{bottom:77px;left:18px;right:18px}
  .reel-hud .mono{font-size:7px}
  .reel-hint{max-width:46%;line-height:1.5}
  .reel-current{max-width:30%}
  .reel-controls{bottom:20px;gap:14px}
  .reel-arrow{width:34px;height:34px}
  .reel-dots{gap:5px}
  .reel-dot{width:5px;height:5px}
  .reel-dot.active{width:17px}
  .reel-pause{font-size:7px}
  .dialog-stage{aspect-ratio:4/3}
  .dialog-stage video,.dialog-stage iframe{max-height:48dvh}
  .dialog-description{grid-template-columns:1fr;gap:13px}
  .dialog-description h2{font-size:35px}
}
@media(max-width:380px){.reel-controls{gap:10px}.reel-hint{display:none}.reel-hud{justify-content:space-between}.reel-card{width:79vw}}