@font-face{font-family:Manrope;src:url('./vendor/manrope.ttf') format('truetype');font-weight:600;font-display:swap}
:root{font-family:Manrope,sans-serif;color-scheme:dark;--ink:#f3f4f4;--muted:#b4c8c5;--accent:#abff02;--line:#72928b4d;color:var(--ink);background:#052424;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid currentColor;outline-offset:7px}
button[hidden]{display:none!important}
#experience,.stage{width:100%;height:100vh;height:100svh}
.stage{position:relative;overflow:clip;isolation:isolate;background:#052424}
.backdrop,.light-field,.final-field{position:absolute;inset:0;pointer-events:none}
.backdrop{background:radial-gradient(ellipse at 70% 22%,#17443f 0%,#082e2c 35%,#052424 68%)}
.light-field{background:radial-gradient(ellipse at 77% 110%,#628849aa,transparent 49%);opacity:.55}
.final-field{background:#abff02;opacity:0}
#scene{position:absolute;inset:0;z-index:2}
canvas{display:block;width:100%;height:100%}
.fallback{position:absolute;right:6%;top:20%;width:45%;max-height:60%;object-fit:contain}
.webgl-ready .fallback{display:none}
.ghost-type{position:absolute;z-index:1;bottom:-.18em;left:-.025em;font-size:23vw;line-height:1;font-weight:600;letter-spacing:-.04em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #aacdb11c;user-select:none;pointer-events:none}
.copy{position:absolute;left:7%;top:28%;z-index:3;max-width:46%;opacity:0;visibility:hidden;transform:translateY(20px);filter:blur(5px);transition:opacity .36s,transform .6s cubic-bezier(.16,1,.3,1),filter .4s,visibility .4s;pointer-events:none}
.copy.active{visibility:visible;opacity:1;transform:none;filter:none}
.copy h1,.copy h2{font-weight:600;font-size:clamp(50px,6.25vw,96px);line-height:1.03;letter-spacing:-.04em;margin:0;text-wrap:balance}
.copy em{font-style:normal;color:var(--accent)}
.copy p{font-size:clamp(12px,1.08vw,16px);line-height:1.75;color:var(--muted);margin:26px 0 0}
.copy[data-chapter="1"]{left:61%;top:31%;max-width:35%}
.copy[data-chapter="1"] h2{font-size:clamp(46px,4.9vw,75px)}
.copy[data-chapter="2"]{top:31%}
.copy[data-chapter="3"]{top:35%;max-width:50%}
.copy[data-chapter="3"] h2{font-size:clamp(60px,6.7vw,96px)}
.copy[data-chapter="3"] em{color:var(--ink)}
.annotation{position:absolute;right:12%;top:21%;z-index:3;display:flex;align-items:center;gap:13px;font-size:10px;color:var(--accent);opacity:0;transition:opacity .4s;pointer-events:none}
.annotation .line{width:74px;height:1px;background:currentColor}
.detail-view .annotation{opacity:1}
.film-control{position:absolute;bottom:30px;right:4.5%;z-index:6;display:flex;gap:12px;align-items:center;padding:12px 16px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:11px;opacity:0;transition:opacity .2s}
.film-control svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.stage:hover .film-control,.film-control:focus-visible,#experience[data-playback="paused"] .film-control,#experience[data-playback="ended"] .film-control{opacity:1}
#status{position:absolute;left:7%;bottom:35px;z-index:5;font-size:12px}
.no-webgl .copy{max-width:43%}.no-webgl .annotation{display:none}
@media(max-width:700px){
 .copy,.copy[data-chapter="1"],.copy[data-chapter="2"],.copy[data-chapter="3"]{left:7%;top:auto;bottom:16%;max-width:88%;width:88%;filter:none}
 .copy h1,.copy h2,.copy[data-chapter="1"] h2,.copy[data-chapter="3"] h2{font-size:clamp(35px,10vw,46px);line-height:1.08}
 .copy p{font-size:11px;line-height:1.6;margin-top:15px}.copy p br{display:none}
 .copy[data-chapter="0"] p{max-width:245px}.copy[data-chapter="3"] p{max-width:230px}
 .annotation{right:8%;top:13%;font-size:8px}.annotation .line{width:30px}
 .ghost-type{bottom:36%;font-size:30vw}.fallback{top:9%;width:76%;right:12%;max-height:40%}
 .no-webgl .copy{max-width:88%}
 .film-control{bottom:24px;right:7%;font-size:10px}#status{bottom:80px;font-size:10px}
}
@media(pointer:coarse){.film-control{opacity:.75}}
@media(max-height:680px) and (min-width:701px){.copy{top:23%}.copy h1,.copy h2{font-size:58px}.copy p{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.copy,.annotation,.film-control{transition:none}.copy{filter:none}}
/* Logo intro v7 (replaces the original opening styles). The start pose below is the
   first painted frame; logo-intro.js animates from it. data-intro on <html> is set by
   the gate script before first paint: play | skip | done. */
.fallback{display:none}
.no-webgl .fallback{display:block}
html[data-intro="play"],html[data-intro="play"] body{background:#ededed}
html:not([data-intro="play"]) #brand-intro{display:none}
.intro-active{overflow:hidden}
#brand-intro{position:fixed;inset:0;z-index:100;isolation:isolate;color:#052424;contain:strict}
#brand-intro[hidden]{display:none}
.intro-shade{position:absolute;inset:0;background:#ededed}
.intro-panel{position:absolute;inset:0;background:#ededed;overflow:clip}
/* The top half reaches 1px past the seam so antialiased edges never show a hairline. */
.intro-panel-top{clip-path:polygon(0 0,100% 0,100% calc(50% + 1px),56% calc(50% + 1px),53% calc(46% + 1px),47% calc(46% + 1px),44% calc(50% + 1px),0 calc(50% + 1px))}
.intro-panel-bottom{clip-path:polygon(0 50%,44% 50%,47% 46%,53% 46%,56% 50%,100% 50%,100% 100%,0 100%)}
.intro-center{position:absolute;inset:0;display:grid;place-items:center}
.intro-logo{position:relative;width:min(670px,78vw);aspect-ratio:1000/240}
.intro-logo svg{position:absolute;inset:0;display:block;width:100%;height:100%;fill:currentColor;shape-rendering:geometricPrecision}
.intro-symbol{position:absolute;left:2.4%;top:10%;width:16.5%;height:77.5%;z-index:1;transform:translateX(239.393939%)}
.intro-core,.intro-shell{position:absolute;inset:0}
.intro-core{transform:scale(.06);transform-origin:50% 48%;opacity:0}
.intro-shell{clip-path:inset(0 0 100% 100%)}
.intro-text{position:absolute;inset:0;transform:translateX(-5.5%)}
.intro-mask{position:absolute;top:10.416667%;height:77.5%;overflow:hidden}
.intro-letter{transform:translateY(100%);opacity:0}
.intro-lines{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.3) rotate(9deg);transform-origin:center}
.intro-playing .intro-panel,.intro-playing .intro-symbol,.intro-playing .intro-core,.intro-playing .intro-text,.intro-playing .intro-letter,.intro-playing .intro-lines{will-change:transform,opacity}
.intro-skip{position:absolute;bottom:34px;right:4.5%;display:flex;gap:25px;align-items:center;color:#052424;background:none;border:0;border-bottom:1px solid #05242445;padding:10px 0;font-size:11px}
.intro-skip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}
@media(max-width:700px){.intro-logo{width:86vw}.intro-skip{bottom:26px;right:7%;font-size:10px}.intro-panel-top{clip-path:polygon(0 0,100% 0,100% calc(50% + 1px),67% calc(50% + 1px),59% calc(47% + 1px),41% calc(47% + 1px),33% calc(50% + 1px),0 calc(50% + 1px))}.intro-panel-bottom{clip-path:polygon(0 50%,33% 50%,41% 47%,59% 47%,67% 50%,100% 50%,100% 100%,0 100%)}}