@font-face{font-family:"Zen Kaku Gothic New";src:url('/lab/fonts/lp2-zen-japanese-500.woff2');font-weight:500;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url('/lab/fonts/lp2-zen-japanese-700.woff2');font-weight:700;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url('/lab/fonts/lp2-zen-japanese-900.woff2');font-weight:900;font-display:swap}
@font-face{font-family:Geist;src:url('/lab/fonts/lp2-geist.woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url('/lab/fonts/lp2-mono.woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New FV";src:url('/lab/fonts/lp2-fv-900.woff2');font-weight:900;font-display:swap}
.hero-copy h1{font-family:"Zen Kaku Gothic New FV",sans-serif}
*{box-sizing:border-box}html{background:#000;color:#fff;scrollbar-width:none}body{margin:0;font:500 16px/1.7 Geist,"Zen Kaku Gothic New",sans-serif;font-feature-settings:"palt";overflow-x:clip}html::-webkit-scrollbar{display:none}a{color:inherit}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:5px}
#stage{position:fixed;inset:0;z-index:0;touch-action:pan-y}#stage canvas{width:100%;height:100%;display:block}#grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.075;background-image:url('./grain.png');mix-blend-mode:soft-light}#flash{position:fixed;inset:0;z-index:8;background:white;opacity:0;pointer-events:none}#dot{position:fixed;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;z-index:12;display:none;pointer-events:none}body.silence nav,body.silence #grain,body.silence #cursor{visibility:hidden}#cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:30;pointer-events:none;transform:translate(-100px,-100px)}
nav{position:fixed;top:26px;left:30px;right:30px;z-index:20;display:flex;justify-content:space-between;align-items:center;pointer-events:none;opacity:0;color:#fff}nav a,nav button{pointer-events:auto}nav.light{color:#111}.brand{font:800 13px Geist,sans-serif;letter-spacing:.15em;text-decoration:none;white-space:nowrap}.brand span{display:inline-block}.nav-right{display:flex;align-items:center;gap:22px}#sound{font:400 9px "JetBrains Mono",monospace;letter-spacing:.1em;border:0;background:none;color:inherit;opacity:.55;padding:12px 0}.contact{font-size:13px;line-height:22px;padding:10px 20px;border:1px solid transparent;border-image:linear-gradient(120deg,#aaa,#eee,#555,#eee) 1;text-decoration:none}.roll{display:inline-grid;overflow:hidden}.roll span{grid-area:1/1;transition:transform .35s}.roll span+span{transform:translateY(180%)}.roll:hover span:first-child{transform:translateY(-180%)}.roll:hover span+span{transform:translateY(0)}
main{position:relative;z-index:2}.scroll-scene{height:100svh;pointer-events:none}.pin{height:100svh;position:relative;overflow:hidden}.hero-copy{position:absolute;left:4vw;bottom:8vh;opacity:0}h1,h2,p{margin:0}h1{font-weight:900;font-size:clamp(28px,4.2vw,72px);line-height:1.2;letter-spacing:-.045em}.mono{font:400 10px/1.5 "JetBrains Mono",monospace;letter-spacing:.14em;color:inherit;opacity:.55;display:block}.hint{position:fixed;right:30px;bottom:24px}.declaration{position:absolute;left:9vw;top:50%;transform:translateY(-50%);max-width:900px}.declaration .mono{margin-bottom:28px}.declaration h2{font-size:clamp(36px,4.9vw,70px);font-weight:500;line-height:1.6;letter-spacing:0}.phrase{display:block;overflow:hidden}.phrase>span{display:block;transform:translateY(110%)}.declaration p{margin-top:30px;max-width:650px;color:#ffffff8c;font-size:16px;line-height:2}.second{opacity:0}.strong-copy{position:absolute;left:6vw;bottom:9vh;max-width:840px;z-index:3}.strong-copy h2{font-weight:900;font-size:clamp(38px,4.5vw,68px);letter-spacing:-.045em;line-height:1.15;margin:20px 0}.strong-copy p{font-size:15px;line-height:1.9;max-width:650px;color:#ffffff8c}#scene3,#scene5{color:#111}#scene3 .strong-copy p,#scene5 .strong-copy p{color:#1111118c}#scene2 .strong-copy{opacity:0}#scene4 .strong-copy{bottom:8vh}#scene3 .strong-copy{bottom:7vh}#scene5 .strong-copy{bottom:7vh}.phone-only{display:none}
#ribbon-controls,#poster-controls{position:absolute;inset:0;pointer-events:none}#ribbon-controls :is(button,a.ribbon-link),#poster-controls button{position:absolute;background:transparent;border:0;color:#111;pointer-events:auto;padding:0}#ribbon-controls :is(button,a.ribbon-link) span{position:absolute;bottom:-24px;left:0;font:400 10px "JetBrains Mono";opacity:0;white-space:nowrap}#ribbon-controls :is(button,a.ribbon-link):hover span,#ribbon-controls :is(button,a.ribbon-link):focus-visible span{opacity:1}#poster-controls button{color:transparent}
#scene6{position:relative;background:#0B0E14;color:#111;padding:125px 8vw 35px;pointer-events:auto;min-height:100svh}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.contact-copy h2{font-size:clamp(36px,4.5vw,64px);font-weight:500;line-height:1.6;letter-spacing:0;margin:25px 0}.contact-copy p{color:#1111118c;max-width:400px;line-height:2;font-size:15px}.field{position:relative;margin-bottom:24px}.field:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .3s}.field:focus-within:after{transform:scaleX(1)}.field label{font-size:13px;display:block}.field small{font-size:10px;opacity:.55;margin-left:10px}.field input,.field textarea{display:block;width:100%;border:0;border-bottom:1px solid #1115;background:transparent;padding:8px 0;color:#111;font-size:16px;line-height:1.7;border-radius:0;resize:vertical}.field textarea{min-height:90px}.consent{display:flex;align-items:center;gap:12px;font-size:12px}.consent input{accent-color:#111;width:17px;height:17px}.error{font-size:12px;line-height:1.7;margin-top:5px}.error:empty{display:none}[aria-invalid=true]{border-bottom-width:2px!important}.honeypot{position:absolute;width:1px;height:1px;clip-path:inset(50%);opacity:0;pointer-events:none}#send{display:flex;justify-content:space-between;width:100%;padding:18px 20px;background:transparent;border:1px solid transparent;border-image:linear-gradient(120deg,#555,#bbb,#333,#aaa) 1;margin-top:32px;color:#111;font-weight:500}#send:disabled{opacity:.4}#form-status{font-size:13px;margin-top:12px}#done-title{font-size:22px;line-height:1.8;align-self:center}#contact-form[hidden]{display:none}.company-facts{margin-top:90px;border-top:1px solid #1113;padding-top:30px;display:grid;grid-template-columns:1fr 2fr;gap:30px;font-size:13px}.company-facts p{font-size:17px;margin-bottom:25px}dl{display:grid;grid-template-columns:95px 1fr;gap:10px;margin:0}dt{font-size:11px;font-family:"JetBrains Mono",monospace;color:#1111118c}dd{margin:0;line-height:1.9}footer{margin-top:70px;border-top:1px solid #1113;padding-top:25px;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:25px}footer div{display:flex;gap:20px}footer a{text-decoration:none}.restart{font-size:13px;padding:10px 0}.players{position:fixed;width:1px;height:1px;left:-2px;overflow:hidden}.players video{width:1px;height:1px}
dialog{background:#EEF0F3;color:#111;border:0;width:100vw;height:100svh;max-width:none;max-height:none;padding:60px 5vw 35px;overflow:hidden}dialog::backdrop{background:#000e}dialog canvas,dialog img{object-fit:contain;max-width:90vw;max-height:75svh;width:auto;height:auto;margin:auto;display:block}dialog [hidden]{display:none}#viewer-close{position:absolute;right:30px;top:20px;background:none;border:0;font-size:14px}#viewer-label{text-align:center;margin-top:20px}.fallback{position:fixed;z-index:25;top:90px;left:6vw;font-size:13px;background:#000;color:#fff;padding:20px}.fallback a{margin-left:15px}body.no-webgl .scroll-scene{height:auto!important;background:#000}body.no-webgl #scene3,body.no-webgl #scene5{background:#EEF0F3}body.no-webgl .pin{height:100svh}body.no-webgl .declaration,body.no-webgl .strong-copy,body.no-webgl .hero-copy{opacity:1!important}body.no-webgl .second{display:none}body.no-webgl .phrase>span{transform:none}body.no-webgl nav{opacity:1}
@media(max-width:767px){nav{left:20px;right:20px;top:20px}.brand{font-size:11px}.nav-right{gap:14px}#sound{font-size:8px}.contact{padding:8px 13px;font-size:12px}#cursor{display:none}.hero-copy{left:20px;bottom:10vh}h1{font-size:28px}.hint{right:20px;bottom:24px;font-size:8px}.declaration{left:25px;right:25px;top:48%;max-width:none}.declaration h2{font-size:31px;line-height:1.6}.declaration .mono{margin-bottom:24px}.declaration p{font-size:14px;line-height:2;margin-top:28px}.strong-copy{left:25px;right:25px;bottom:10vh}.strong-copy h2{font-size:33px;line-height:1.2}.strong-copy p{font-size:13px;line-height:1.9}.strong-copy .mono{font-size:9px}.phone-only{display:block}#scene4 h2{font-size:30px}#scene6{padding:100px 25px 25px}.contact-layout{display:block}.contact-copy h2{font-size:38px;line-height:1.6;margin:20px 0}.contact-copy h2 br{display:none}.contact-copy p{font-size:14px;margin-bottom:45px}.company-facts{margin-top:65px;display:block}.company-facts>.mono{margin-bottom:20px}dl{grid-template-columns:80px 1fr}.company-facts{font-size:12px}footer{flex-wrap:wrap;gap:20px;margin-top:50px}footer .restart{width:100%;margin-top:15px;font-size:16px}#done-title{margin:50px 0;font-size:20px}}
@media(prefers-reduced-motion:reduce){body:not(.force-motion) *{animation:none!important;transition:none!important}body:not(.force-motion) #cursor{display:none}}
@media(max-width:767px){#scene2 h2{font-size:28px}#scene5 h2{font-size:29px}#scene4 .strong-copy{max-width:300px;bottom:6vh}#scene6 .contact-copy h2{font-size:36px}#scene6 .contact-copy h2 br{display:block}}

/* v2: stamps retain full colour; only paper surface and motion affect the work. */
.fv-phrase{display:inline-block;transform-origin:50% 70%;white-space:nowrap;will-change:transform,opacity}.fv-char{display:inline-block;will-change:transform,opacity}.fv-period{position:relative}.fv-period.is-dot{color:transparent}.fv-period.is-dot:after{content:"";position:absolute;width:.22em;height:.22em;background:white;border-radius:50%;left:.15em;bottom:.10em}.brand span{width:.8em;text-align:center;font-family:"JetBrains Mono",monospace;font-weight:500}
#scene2 .strong-copy,#scene4 .strong-copy{text-shadow:0 2px 22px #000,0 1px 5px #0008}#scene2 .strong-copy p,#scene4 .strong-copy p{color:#fffc}#scene2 .strong-copy,#scene4 .strong-copy{pointer-events:none}#ribbon-controls :is(button,a.ribbon-link),#poster-controls button{cursor:grab}#ribbon-controls :is(button,a.ribbon-link):active,#poster-controls button:active{cursor:grabbing}

/* Visual correction 1: keep the pillar readable beside the stamp, and separate FV type from the moving mosaic. */
.hero-copy h1{text-shadow:0 2px 12px #0009}.fv-phrase{transform-origin:0 70%}#scene4 .strong-copy{max-width:520px}#scene4 h2{font-size:clamp(30px,3.4vw,48px)}#scene4 .phone-only{display:block}

/* Visual correction 2: mobile films keep the whole metal form above the copy. */
@media(max-width:767px){#scene4 .strong-copy{bottom:7vh}#scene4 .strong-copy p{max-width:280px}.hero-copy h1{line-height:1.24}.hero-copy{bottom:11vh}}
main{pointer-events:none}#scene6{pointer-events:auto}

@media(max-width:767px){#scene4 .strong-copy{max-width:none}#scene4 .strong-copy p{max-width:340px}}

/* SSR loader: same stamp, neutral paper-black, a single hairline. */
#loader{position:fixed;inset:0;z-index:18;pointer-events:auto;color:#eef0f3;--progress:0}
.loader-ground{position:absolute;inset:0;background:#050607;opacity:1}
.loader-meter{position:absolute;top:calc(50% + 64px);left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:17px}
.loader-counter{font:400 11px/1 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#eef0f3a6}
.loader-track{display:block;width:160px;height:1px;background:#eef0f31a;overflow:hidden}
.loader-track i{display:block;height:1px;width:100%;background:#eef0f3;transform:scaleX(var(--progress));transform-origin:left}
.loader-status{position:absolute;right:30px;bottom:30px;font:400 11px/1.6 "JetBrains Mono","Zen Kaku Gothic New",monospace;letter-spacing:.04em;color:#eef0f380}
.loader-corners{position:absolute;inset:18px}.loader-corners i{position:absolute;width:12px;height:12px;border:solid #eef0f344;border-width:1px 0 0 1px}.loader-corners i:nth-child(2){right:0;transform:rotate(90deg)}.loader-corners i:nth-child(3){right:0;bottom:0;transform:rotate(180deg)}.loader-corners i:nth-child(4){bottom:0;transform:rotate(270deg)}
body:has(#loader[data-loader="loading"]) #intro p{visibility:hidden}
body:has(#loader[data-loader="loading"]) :is(nav,#instrument,#cursor){visibility:hidden!important}
body:not([data-loader]) .loader-letter{display:inline-block;opacity:.16;animation:loader-stamp .18s both}
@keyframes loader-stamp{from{opacity:.06;transform:scale(1.22)}to{opacity:.38;transform:scale(1)}}
#loader.loader-release .loader-track{width:100vw;transition:width .18s cubic-bezier(.2,.7,.2,1)}
#loader.loader-release .loader-track i{animation:loader-flash .3s both}
@keyframes loader-flash{0%{opacity:1}40%{opacity:1;box-shadow:0 0 7px #fff}100%{opacity:0}}
#loader[data-loader="done"]{pointer-events:none;visibility:hidden;transition:visibility 0s .4s}
#loader[data-loader="done"] .loader-ground{opacity:0;transition:opacity .4s linear}
#loader[data-loader="done"] :is(.loader-meter,.loader-status,.loader-corners){opacity:0;transition:opacity .16s}
body.no-webgl #loader{display:none}
@media(max-width:767px){.loader-status{right:20px;bottom:24px;font-size:10px}.loader-meter{top:calc(50% + 52px)}.loader-corners{inset:10px}}
@media(prefers-reduced-motion:reduce){body:not(.force-motion) #loader .loader-meter{display:none}body:not(.force-motion) .loader-letter{animation:none;opacity:.6}body:not(.force-motion) #loader[data-loader="done"]{display:none}}

/* Visual pass 1: align the stamp's optical centre, leaving the meter below it. */
body:has(#loader[data-loader="loading"]) #intro p{display:none}
body:has(#loader[data-loader="loading"]) .intro-name{text-shadow:none;letter-spacing:.13em}
.loader-meter{top:calc(50% + 68px);gap:16px}
@media(max-width:767px){.loader-meter{top:calc(50% + 58px)}}

/* Visual pass 2: dissolve metadata before the logo hand-off; keep one logo. */
#loader.loader-release :is(.loader-counter,.loader-status,.loader-corners){opacity:0;transition:opacity .22s ease}
body:has(#loader[data-loader="done"]) #intro p{display:block}
body[data-loader-reason][data-loader="done"] #intro{visibility:hidden!important}
.loader-status{color:#eef0f370;letter-spacing:.025em}

html:has(#loader[data-loader="loading"]):not(:has(body.no-webgl)){overflow-y:hidden}