:root{color-scheme:dark;--bg:#101112;--text:#eeeee8;--muted:#949793;--line:#2b2d2b;--accent:#ef553d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}header,main,footer{width:min(1200px,calc(100% - 96px));margin:auto}header{height:68px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;font-size:12px;font-weight:700;letter-spacing:2px}.prompt{font:26px monospace;letter-spacing:-5px;padding-right:6px}.prompt b{font-weight:400}.prompt i{font-style:normal;color:var(--accent)}.nav{font-size:12px;color:#c6c8c2}.nav span{margin-left:18px;color:var(--accent);font-size:19px}.hero{padding-top:18px}.eyebrow,.stage-label,.stage-bottom,.under-stage,.section-heading>span,.project-number,.project-tag,footer{font:10px/1.5 'Courier New',monospace;letter-spacing:1.3px}.eyebrow{display:flex;align-items:center;gap:10px;color:#b7bab4}.status{width:5px;height:5px;background:var(--accent);box-shadow:0 0 10px #ef553d55}h1{font-size:clamp(32px,3.5vw,46px);line-height:1.08;letter-spacing:-1.8px;font-weight:400;margin:8px 0 6px}h1>span{color:var(--accent)}.intro{color:var(--muted);font-size:14px;line-height:1.6;margin:0}.stage{height:clamp(240px,36vh,340px);position:relative;margin-top:14px;background:radial-gradient(ellipse at 50% 48%,#1c2020 0%,#141617 47%,#101112 74%);overflow:hidden}.stage:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#6d777525 .7px,transparent .7px);background-size:22px 22px;mask-image:radial-gradient(ellipse,#000,transparent 74%)}#cloud{width:100%;height:100%;position:absolute;inset:0;opacity:0;transition:opacity .5s}.ready #cloud{opacity:1}.fallback{position:absolute;width:76%;height:90%;top:4%;left:12%;object-fit:contain;filter:invert(1) hue-rotate(180deg);opacity:.9}.ready .fallback{visibility:hidden}.stage-label{position:absolute;z-index:2;top:20px;left:24px;color:#7e8580;font-size:9px}.reticle{position:absolute;width:10px;height:10px;border:solid #626961;z-index:2}.tl{top:0;left:0;border-width:1px 0 0 1px}.tr{top:0;right:0;border-width:1px 1px 0 0}.bl{bottom:0;left:0;border-width:0 0 1px 1px}.br{bottom:0;right:0;border-width:0 1px 1px 0}.stage-bottom{position:absolute;bottom:18px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;color:#8e9590;font-size:9px;z-index:2}#motion{border:0;background:transparent;color:#adb2ab;cursor:pointer;font-size:10px;padding:9px 0 9px 12px}#motion span{margin-left:12px;color:var(--accent)}.under-stage{display:flex;justify-content:space-between;margin-top:8px;color:#7e8580;font-size:9px}.cross{color:var(--accent);margin-right:8px}.interact span{margin-left:12px}.projects{padding:20px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}.section-heading h2{font-size:17px;letter-spacing:-.4px;font-weight:400;margin:0}.section-heading>span{color:#7e8580;font-size:9px}.project{display:flex;align-items:center;gap:28px;padding:15px 8px;border-top:1px solid #3a3d38;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}.project:hover{background:#ffffff04;padding-left:18px;padding-right:18px}.project-number{color:#727b71}.project-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid #383f37;background:#1b201b}.project-icon svg{width:27px;stroke:#b4c1ad;stroke-width:1.2}.project-copy{display:flex;flex-direction:column;gap:8px}.project-name{font-size:22px;letter-spacing:-.6px}.project-description{font-size:12px;color:var(--muted)}.project-tag{margin-left:auto;color:#8f998a;font-size:9px;border:1px solid #333a30;padding:5px 8px}.project-arrow{font-size:28px;color:var(--accent);margin-left:30px;transition:transform .25s}.project:hover .project-arrow{transform:translate(3px,-3px)}footer{border-top:1px solid var(--line);padding:14px 0 18px;display:flex;justify-content:space-between;color:#7e8580;font-size:9px;letter-spacing:.5px}.footer-dot{color:var(--accent);font-size:18px;margin-left:3px}@media(min-width:1500px){.hero{padding-top:18px}.stage{height:340px}}@media(max-width:650px){header,main,footer{width:calc(100% - 40px)}header{height:64px}.brand{font-size:10px;letter-spacing:1.4px}.nav{font-size:11px}.nav span{margin-left:7px}.hero{padding-top:14px}h1{letter-spacing:-1.7px;font-size:34px}.intro{font-size:13px;max-width:290px}.stage{margin-top:12px;height:260px}.stage-label{left:12px;font-size:8px}.stage-bottom{left:12px;right:12px;font-size:8px}.under-stage{font-size:8px}.projects{padding:18px 0}.project{gap:15px;padding:14px 0}.project-number{display:none}.project-name{font-size:20px}.project-description{font-size:11px}.project-tag{display:none}.project-arrow{margin-left:auto}.project-icon{width:40px;height:44px;flex-shrink:0}footer{flex-wrap:wrap;gap:18px}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{transition:none!important}}

#cloud{touch-action:pan-y;cursor:crosshair}#cloud:active{cursor:grabbing}#cloud:focus-visible{outline:1px solid var(--accent);outline-offset:-3px}.stage-label{pointer-events:none}

.brand img{display:block;width:84px;height:52px;object-fit:contain}@media(max-width:650px){.brand img{width:76px;height:47px}}

/* Compact identity and intro: one narrow band above the visualization. */
header{height:54px}.brand img{width:66px;height:41px}.hero{padding-top:10px}
.intro-row{display:flex;align-items:baseline;gap:20px;justify-content:space-between}
h1{font-size:28px;letter-spacing:-1.1px;line-height:1.15;margin:0}.intro{font-size:12px;line-height:1.4;max-width:none}
.stage{margin-top:10px}.project{position:relative;gap:20px}.project-thumb{width:112px;height:70px;object-fit:cover;display:block;border:1px solid #3c4043;border-radius:4px;flex-shrink:0}
.project-preview{position:absolute;bottom:calc(100% + 10px);right:0;width:min(480px,calc(100vw - 40px));background:#191b1c;border:1px solid #41464a;border-radius:7px;padding:6px;box-shadow:0 16px 60px #0009;z-index:10;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s}
.project-preview:after{content:'';position:absolute;left:0;right:0;top:100%;height:12px}
.project-preview>img{display:block;width:100%;height:auto;border-radius:3px}.project-preview>span{display:flex;justify-content:space-between;padding:8px 5px 3px;font-size:11px;color:#c9ceca}.project-preview>span>span{color:var(--accent)}
.project:not(.preview-dismissed):focus-visible .project-preview{visibility:visible;opacity:1;transform:none}
@media(hover:hover){.project:not(.preview-dismissed):hover .project-preview{visibility:visible;opacity:1;transform:none}}
@media(max-width:650px){header{height:50px}.brand img{width:60px;height:37px}.hero{padding-top:8px}.intro-row{gap:8px;align-items:center}h1{font-size:22px;letter-spacing:-.7px;white-space:nowrap}.intro{font-size:10px;max-width:110px;line-height:1.3}.stage{margin-top:8px}.project{gap:12px}.project-thumb{width:88px;height:55px}.project-name{font-size:18px}.project-description{font-size:10px}.project-arrow{font-size:24px}.project-copy{gap:5px}}
@media(max-width:360px){.intro{display:none}.project-thumb{width:72px;height:45px}.project-name{font-size:16px}}