/* Approved F1 composition. All glyph boxes exist in HTML before the first paint. */
.hero{--hero-air:110px;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding:calc(var(--header) + var(--hero-air)) 0 var(--hero-air);background:transparent;text-align:center}
/* Same fixed, viewport-sized layer as the original page wake. No scroll fade. */
body.has-page-wake{isolation:isolate}
body.has-page-wake>.field-fallback,body.has-page-wake>.number-field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
body.has-page-wake>.field-fallback{background:url('../assets/ascii-still.svg') center top/1120px 840px repeat;filter:brightness(1.6)}
body.has-page-wake.has-canvas>.field-fallback{display:none}
body.has-page-wake>.number-field{display:block;color:#8b5cf6}
/* Opaque panels keep their existing fills. Only the black comparison band opens up. */
body.has-page-wake #work{background:transparent}
/* Adapt the old black text scrim to the current section heads and body copy.
   These paint behind text without changing spacing or fading the exposed field. */
body.has-page-wake :is(.hero .hero-label,.hero .hero-sub,.cmp-header,.cmp-toolbar,.vs,#example .head,.cmp-close,.wf-caption,.component-footer .footer-row){background:#000;box-shadow:0 0 24px 16px #000}
body.has-page-wake .close-head{background:#000;box-shadow:0 0 24px 16px #000}
.hero::before,.hero::after{display:none}
.hero .hero-c{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.hero .hero-label{margin:0 0 32px;font:400 14px/1 var(--pixel);letter-spacing:.01em;color:var(--violet-bright);white-space:nowrap}
.hero [data-animate]{position:relative;font-kerning:none;font-variant-ligatures:none}
.hero .hero-title{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.17em;row-gap:.02em;font-size:clamp(58px,7.8vw,116px);line-height:.98;letter-spacing:-.035em;font-weight:480}
.hero .hero-title h1,.hero .hero-title .l2{display:contents}
.hero .hero-title h1{font:inherit;letter-spacing:inherit}
.hero .hero-title .l1{display:flex;justify-content:center;align-items:center;flex:0 0 100%;order:1}
.hero .hero-title .same{order:2}
.hero .hero-title .mint{order:3}
.hero .hero-title .team-lock{order:4;display:inline-flex;align-items:baseline;white-space:nowrap;flex:none}
.hero .team-lock .word{order:0;position:relative;display:inline-block;font-family:var(--pixel);font-weight:400;letter-spacing:-.045em;color:var(--violet)}
.team-cursor{display:inline-block;flex:none;width:.09em;height:.72em;margin-left:.05em;background:var(--violet);opacity:1;animation:pixel-block-blink 1s step-end infinite}
.hero .mint{font:inherit;flex:none;width:1.02em;height:1.02em;flex-basis:auto;margin-inline:-.05em}
.hero .mint:focus-visible{outline:2px solid var(--violet-bright);outline-offset:3px;border-radius:4px}
.hero .hero-sub{max-width:33em;margin:40px 0 0;font-size:clamp(17px,1.45vw,20px);line-height:1.45;letter-spacing:-.012em;color:#c7cad1;text-wrap:balance}
.hero .btns{justify-content:center;margin-top:48px;max-width:100%}
.hero .cta{font-size:15px;max-width:100%;overflow:hidden}
.hero .typing-source{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero .typing-word{display:inline-block;white-space:nowrap}
.hero .typing-char{position:relative}
.hero-typing .hero .typing-char:not(.typed){visibility:hidden}
.hero-typing .hero .typing-caret::after{content:'';position:absolute;left:100%;bottom:.05em;width:.12em;min-width:3px;height:.86em;background:var(--violet-bright)}
.hero .hero-label .typing-caret::after,.hero .hero-sub .typing-caret::after,.hero .cta .typing-caret::after{width:.45em;min-width:5px}
.hero-typing .team-cursor.cursor-waiting{visibility:hidden}
.hero-typing .hero .cta.typing-waiting{visibility:hidden;pointer-events:none}
.hero-typing .hero .mint{opacity:0}
@media(max-width:700px){
 .hero{--hero-air:48px}
 .hero .hero-title{font-size:clamp(36px,11.8vw,86px);margin-inline:0}
 .hero .hero-label{margin-bottom:24px;font-size:14px}
 .hero .hero-sub{margin-top:28px;font-size:17px}
 .hero .btns{margin-top:36px}
 .hero .cta{font-size:13px;padding-inline:18px}
}
@media(max-width:359px){.hero .hero-label{font-size:13px}.hero .cta{font-size:12px;padding-inline:16px}}
@media(prefers-reduced-motion:reduce){
 .hero .typing-char,.hero .team-cursor{visibility:visible!important;opacity:1;animation:none}
 .hero .typing-caret::after{display:none}
 .hero .cta.typing-waiting{visibility:visible;pointer-events:auto}
 .hero .mint{opacity:1!important}
}