:root{color-scheme:light;--paper:#fbf7f0;--ink:#213d30;--muted:#536354}
body{background:var(--paper)}
.hero{display:flex;flex-direction:column;gap:0;padding:30px 0 28px;min-height:0}
.hero-copy{order:0;max-width:850px;padding:0 0 8px;text-align:center}
.hero-copy .eyebrow{margin-bottom:16px;font-size:10px}
.hero h1{font-size:clamp(38px,4vw,60px);line-height:1.04;letter-spacing:-.052em;margin-bottom:15px}
.hero-description{max-width:570px;font-size:14px;margin:auto;color:#536354}
.hero-ctas{justify-content:center;margin:18px 0 0;gap:12px}
.hero>.room-host{order:1;max-width:1100px}
.about-preview{grid-template-columns:1fr;gap:0;padding-block:76px}
.about-copy{width:100%;max-width:760px;margin-inline:auto}
.hero .scene-stage{height:430px;overflow:visible;margin:0;width:100%;touch-action:pan-y pinch-zoom}
.scene-stage canvas{width:100%;height:100%;image-rendering:pixelated;touch-action:pan-y pinch-zoom;opacity:0}
.scene-ready canvas{opacity:1}
.workspace-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.workspace-poster[hidden]{display:none}
.scene-loading{inset:auto;right:65px;top:12px;display:block;font-size:11px;background:#fbf7f0;padding:8px 12px;border-radius:30px;z-index:2}
.scene-unavailable .scene-stage{background:none}
.scene-unavailable .scene-loading{display:none}
.scene-unavailable canvas{display:none}
.graphics-retry{position:absolute;right:12px;top:12px;z-index:4;padding:12px 16px;min-height:44px;background:#f2e8d7;border:1px solid #bcc8af;border-radius:24px;font-size:12px}
.graphics-retry[hidden]{display:none}
.room-caption{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero>.room-host{margin-bottom:10px}
.workspace-diagnostics{position:absolute;top:65px;left:10px;padding:8px;background:#fbf7f0ed;color:#263b2a;font:11px/1.5 monospace;white-space:pre;z-index:9;pointer-events:none}
:focus-visible{outline:3px solid #416d39;outline-offset:3px}
@media(max-width:760px){
 .hero{padding-top:18px;padding-bottom:20px}
 .hero-copy{order:0;padding:0 0 15px}
 .hero-copy .eyebrow{font-size:8px;margin-bottom:12px;white-space:normal}
 .hero h1{font-size:clamp(32px,8.3vw,44px);margin-bottom:14px;line-height:1.06}
 .hero-description{font-size:12px;max-width:340px}
 .hero-ctas{gap:8px;margin:16px 0 0}
 .hero-ctas .button{padding:12px 16px;gap:12px;font-size:12px;min-height:44px}
 .hero .scene-stage{height:300px;width:100%;margin:0}
 .hero>.room-host{margin-bottom:10px}
 .scene-loading{top:8px;right:52px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.hero *,canvas{transition:none!important}}