/* Dynamic Fee hero stage: a 1600x900 composition scaled to the hero's width.
   On wide screens the hero's box and headline are laid out from the first paint, so the page
   never jumps when the scene arrives: the scene and its controls fade in once WebGL has drawn
   its first frame. Narrow screens, or a failed start (body.df-plain), keep the plain page. */
@font-face{font-family:'Archivo Stage';src:url('/assets/fonts/archivo-latin-v25.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
.df-hero{display:none;position:relative;width:min(100%,1600px);aspect-ratio:16/9;margin:0 auto;overflow:hidden;background:#050405;container-type:inline-size}
.df-hero::after{content:'';position:absolute;inset:auto 0 0;height:32px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
/* scale = hero width / 1600 as a plain number; stage.mjs sets the same value inline */
.df-wrap{position:absolute;left:0;top:0;width:1600px;height:900px;overflow:hidden;transform-origin:0 0;transform:scale(tan(atan2(100cqw,1600px)))}
.df-wrap canvas,.df-beat,.df-pager,.df-tag,.df-read,.df-tip{transition:opacity .7s ease}
.df-hero.is-pending :is(canvas,.df-beat,.df-pager,.df-tag,.df-read,.df-tip){opacity:0;visibility:hidden}
.df-wrap canvas{display:block;width:1600px;height:900px;touch-action:pan-y}
.df-ui{position:absolute;inset:0;pointer-events:none;color:#f2eee9;font-family:'Martian Mono',monospace;line-height:normal;-webkit-font-smoothing:antialiased}
.df-mono{font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.df-muted{color:rgba(242,238,233,.58)}
.df-pink{color:#ff2e8c}
.df-rec{position:absolute;right:64px;top:60px;font-size:11px}
.df-shade{position:absolute;left:-300px;top:140px;width:940px;height:720px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgb(5 3 5 / .86),rgb(5 3 5 / .55) 48%,transparent 82%)}
.df-head{position:absolute;left:64px;top:228px;width:560px}
.df-title{margin:18px 0 0;font-family:'Archivo Stage',Archivo,sans-serif;font-weight:850;font-stretch:78%;font-size:86px;line-height:.9;letter-spacing:-.01em}
.df-title span{display:block;white-space:nowrap}
.df-title .df-pink{text-shadow:0 0 36px rgba(255,46,140,.4)}
.df-beat{position:absolute;left:64px;top:560px;width:370px}
.df-beat.out{transition-duration:.2s}
.df-beat.out{opacity:0}
.df-beat .n{font-family:Archivo,sans-serif;font-weight:800;font-size:44px;line-height:1;color:#ff2e8c}
.df-beat .n small{font-size:18px;color:rgba(242,238,233,.4);margin-left:6px}
.df-beat .t{margin-top:14px;font-family:Archivo,sans-serif;font-weight:700;font-size:27px;line-height:1.15}
.df-beat .s{margin-top:12px;font-size:12px;line-height:1.8;white-space:normal}
.df-pager{position:absolute;left:64px;top:792px;display:flex;align-items:center;gap:8px;pointer-events:auto}
.df-pager button{appearance:none;cursor:pointer;min-width:44px;height:32px;padding:0 10px;border:1px solid rgba(242,238,233,.22);border-radius:99px;background:rgb(8 5 8 / .6);color:rgba(242,238,233,.7);font:500 11px 'Martian Mono',monospace;letter-spacing:.08em;transition:border-color .2s,color .2s,box-shadow .2s}
.df-pager button:hover{border-color:rgba(242,238,233,.5);color:#f2eee9}
.df-pager button[aria-current="step"]{border-color:rgba(255,46,140,.75);color:#ff4b9f;box-shadow:0 0 18px rgba(255,46,140,.25)}
.df-pager button:focus-visible,.df-pill:focus-visible{outline:2px solid #ff4b9f;outline-offset:3px}
.df-honest{margin-left:14px;font-size:10px}
.df-tag{position:absolute;left:0;top:0;white-space:nowrap}
#df-tLever{pointer-events:auto}
.df-pill{appearance:none;cursor:pointer;display:inline-block;padding:7px 12px;border:1px solid rgba(242,238,233,.28);border-radius:99px;background:rgb(8 5 8 / .72);color:#f2eee9;font:500 12px 'Martian Mono',monospace;letter-spacing:.08em;transition:border-color .2s,color .2s,box-shadow .2s}
.df-pill.on{border-color:rgba(255,46,140,.7);color:#ff4b9f;box-shadow:0 0 22px rgba(255,46,140,.28)}
.df-idx{text-align:center;font-size:12px;letter-spacing:.06em}
.df-idx b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:19px;letter-spacing:0;transition:color .3s}
.df-idx b.pink{color:#ff2e8c}
.df-idx i{font-style:normal;display:block;margin-top:3px;font-size:10px}
.df-idx i.muted{color:rgba(242,238,233,.58)}
.df-idx i.pink{color:#ff2e8c}
.df-ghost{font-size:10px}
.df-gas{font-family:'Archivo Stage',Archivo,sans-serif;font-weight:850;font-stretch:80%;font-size:46px;line-height:1;color:#ff2e8c;text-shadow:0 0 26px rgba(255,46,140,.45);text-align:right}
.df-gas small{display:block;margin-top:8px;font-family:'Martian Mono',monospace;font-weight:400;font-stretch:100%;font-size:11px;letter-spacing:.06em;color:rgba(242,238,233,.7);text-shadow:none}
.df-gas small.g{margin-top:5px;font-size:10px;text-transform:uppercase;color:rgba(242,238,233,.5)}
.df-read{position:absolute;right:64px;bottom:54px;display:flex;gap:44px}
.df-read div{font-size:11px}
.df-read b{display:block;margin-bottom:6px;font-family:Archivo,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.01em;text-transform:none;color:#f2eee9}
.df-read b.pink{color:#ff2e8c}
.df-hint{font-size:11px;animation:df-hint 1.8s ease-in-out infinite}
@keyframes df-hint{50%{opacity:.45}}
.df-tip{position:absolute;left:0;top:0;padding:10px 13px;border:1px solid rgba(242,238,233,.16);border-radius:10px;background:rgb(10 6 10 / .84);font-size:11px;line-height:1.75;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .14s}
.df-tip.show{opacity:1}
.df-tip b{display:block;margin-bottom:3px;font-family:Archivo,sans-serif;font-weight:800;font-size:15px;letter-spacing:0;text-transform:none}
.df-tip span{display:block;color:rgba(242,238,233,.66)}
.df-tip em{font-style:normal;color:#ff2e8c}
.df-vignette,.df-grain{position:absolute;inset:0;pointer-events:none}
.df-vignette{background:radial-gradient(ellipse 110% 100% at 50% 48%,transparent 62%,rgb(4 4 6 / .16))}
/* film grain between the first pass (.16) and the near-clean .05: visible texture, not dirt */
.df-grain{background:url('/assets/film/grain-v2.png') repeat;background-size:512px 512px;opacity:.09}
/* while the stage owns the hero, the page's own headline stays for assistive tech only */
@media (min-width:900px){
  body:not(.df-plain) .df-hero{display:block}
  body:not(.df-plain) .recording{display:none}
  body:not(.df-plain) .intro .case-label,body:not(.df-plain) .intro h1{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  body:not(.df-plain) .intro{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){.df-hint{animation:none}.df-wrap canvas,.df-beat,.df-pager,.df-tag,.df-read,.df-tip{transition:none}}