@font-face{font-family:Manrope;src:url('/assets/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{color-scheme:dark;--ink:#050605;--surface:#0b0d0b;--line:#252925;--muted:#8f968f;--paper:#f3f0e8;--gold:#d7a547;--green:#7dff9c;--ease:cubic-bezier(.22,.72,.18,1)}
*{box-sizing:border-box}
html{background:var(--ink);overscroll-behavior:none}
body{margin:0;min-width:320px;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
button,a{font:inherit}
button{color:inherit}
.shell{min-height:100svh;display:grid;grid-template-rows:auto minmax(560px,1fr) auto auto;padding:0 38px;background:radial-gradient(circle at 53% 38%,#121812 0,#090b09 28%,#050605 63%)}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:2}
.wordmark{display:flex;align-items:baseline;gap:10px;color:var(--paper);text-decoration:none;letter-spacing:-.04em}
.wordmark>span{font-size:24px;font-weight:800}.wordmark i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 18px #7dff9c99}.wordmark small{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em}
.privacy{margin:0;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.stage{position:relative;min-height:560px;display:grid;grid-template-columns:minmax(210px,1fr) minmax(420px,720px) minmax(190px,1fr);align-items:center;isolation:isolate}
.stage::before{content:"";position:absolute;left:50%;top:7%;bottom:7%;width:1px;background:linear-gradient(transparent,var(--line) 12%,var(--line) 88%,transparent);z-index:-1}
.stage-copy{align-self:start;margin-top:clamp(64px,9vh,118px);max-width:310px;z-index:3}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--muted);margin:0 0 22px}.eyebrow span{color:var(--green)}
h1{font-size:clamp(46px,6vw,92px);line-height:.88;letter-spacing:-.075em;margin:0 0 26px;font-weight:680;text-wrap:balance}
#model-description{margin:0;color:#acb1ac;font-size:14px;line-height:1.65;max-width:260px;text-wrap:pretty}
.viewport{position:relative;width:100%;height:min(69vh,720px);min-height:480px;touch-action:none;cursor:grab;overflow:hidden}
.viewport:active{cursor:grabbing}
#scene{display:block;width:100%;height:100%;outline:0}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:11px;letter-spacing:.15em;text-transform:uppercase;transition:opacity .5s;pointer-events:none}.loading.hidden{opacity:0}
.drag-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;color:#8f968f;font-size:10px;text-transform:uppercase;letter-spacing:.13em;pointer-events:none;white-space:nowrap}
.drag-hint span{width:26px;height:14px;border:1px solid #555d55;border-radius:9px;position:relative}.drag-hint span::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:var(--green);left:5px;top:4px;animation:drag 2.2s var(--ease) infinite}
@keyframes drag{50%{transform:translateX(10px)}}
.stage-meta{align-self:end;margin-bottom:clamp(58px,8vh,108px);display:grid;gap:24px;padding-left:clamp(18px,3vw,52px);z-index:3}
.stage-meta div{display:grid;gap:6px}.stage-meta span{color:var(--muted);text-transform:uppercase;font-size:9px;letter-spacing:.16em}.stage-meta strong{font-size:13px;font-weight:560;line-height:1.35}
.controls{position:absolute;right:0;top:22px;display:flex;gap:4px;z-index:5}
.controls button{height:36px;padding:0 12px;border:1px solid var(--line);background:#090b09cc;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.05em;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.controls button:hover,.controls button:focus-visible{border-color:#707970;background:#111511;outline:none}.controls button[aria-pressed=false]{color:var(--muted)}
.controls svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.controls #motion svg{fill:currentColor;stroke:none}
.model-nav{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(6,1fr)}
.model-nav button{appearance:none;border:0;border-right:1px solid var(--line);background:transparent;text-align:left;padding:24px 22px 26px;min-height:108px;cursor:pointer;display:grid;grid-template-columns:27px 1fr;grid-template-rows:auto auto;position:relative;transition:background .25s var(--ease)}
.model-nav button:last-child{border-right:0}.model-nav button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.model-nav button:hover{background:#0c0f0c}.model-nav button:focus-visible{outline:1px solid var(--green);outline-offset:-3px}.model-nav button.active{background:#101310}.model-nav button.active::before{transform:scaleX(1)}
.model-nav span{grid-row:1/3;color:#5f665f;font-size:10px;letter-spacing:.1em;padding-top:2px}.model-nav strong{font-size:13px;font-weight:620}.model-nav small{color:var(--muted);font-size:9px;margin-top:7px;letter-spacing:.03em}
footer{height:66px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}footer p{margin:0;color:#c3c7c3}
body.is-fullscreen .stage-copy,body.is-fullscreen .stage-meta,body.is-fullscreen .model-nav,body.is-fullscreen footer,body.is-fullscreen .topbar{display:none}body.is-fullscreen .shell{padding:0;display:block}body.is-fullscreen .stage{height:100svh;display:block}body.is-fullscreen .viewport{height:100svh;max-width:none}.is-fullscreen .controls{right:18px;top:18px}
@media(max-width:920px){.shell{padding:0 20px;grid-template-rows:auto auto auto auto}.stage{display:grid;grid-template-columns:1fr;min-height:0;padding-top:38px}.stage::before{left:50%;top:18%;bottom:22%}.stage-copy{margin:0;position:relative;z-index:3}.stage-copy h1{font-size:54px;margin-bottom:14px}.stage-copy p:last-child{font-size:12px;max-width:220px}.viewport{height:58svh;min-height:440px;margin-top:-74px}.stage-meta{position:absolute;right:0;top:80px;margin:0;padding:0;text-align:right}.controls{top:10px}.model-nav{grid-template-columns:repeat(3,1fr)}.model-nav button:nth-child(3){border-right:0}.model-nav button{padding:18px 12px;min-height:84px}footer{height:74px}.privacy{display:none}}
@media(max-width:560px){.shell{padding:0 14px}.topbar{height:62px}.wordmark>span{font-size:20px}.stage{padding-top:25px}.stage-copy h1{font-size:46px}.stage-meta{top:69px}.stage-meta div:first-child{display:none}.stage-meta strong{font-size:10px}.stage-meta span{font-size:8px}.viewport{height:57svh;min-height:400px;margin-top:-72px}.controls{top:auto;right:0;bottom:10px}.controls button{width:38px;padding:0;justify-content:center}.controls button svg{width:15px;height:15px}.controls button{font-size:0}.drag-hint{bottom:59px}.model-nav{grid-template-columns:repeat(2,1fr)}.model-nav button:nth-child(2n){border-right:0}.model-nav button:nth-child(3){border-right:1px solid var(--line)}footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:5px}footer span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.drag-hint span::after{animation:none}*{scroll-behavior:auto!important}.model-nav button::before{transition:none}}