:root{color-scheme:dark;--ink: #090b12;--booth: #111522;--booth-raised: #171d2d;--paper: #f4e6c1;--smoke: #aaa894;--cyan: #61e7df;--coral: #ff6b5f;--marigold: #ffc857;--safe: #75dc8c;--danger: #ff8b83;--display: "Arial Narrow", "Aptos Narrow", Impact, sans-serif;--body: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;font-family:var(--body);color:var(--paper);background:var(--ink);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;min-width:320px;font-size:16px;line-height:1.55;background:var(--ink)}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:4px}a:hover{color:var(--paper)}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}img{max-width:100%;height:auto}.skip-link{position:fixed;z-index:100;top:8px;left:8px;padding:12px 16px;color:var(--ink);background:var(--cyan);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.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}.site-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:12px max(20px,calc((100vw - 1180px)/2));border-bottom:1px solid #343747;background:#090b12f0}.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--paper);font-family:var(--display);font-size:1.05rem;font-weight:800;letter-spacing:.075em;text-decoration:none;text-transform:uppercase}.wordmark-mark{width:25px;height:25px;border:2px solid var(--cyan);box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 6px var(--coral);transform:rotate(45deg)}.site-nav{display:flex;align-items:center;gap:8px 20px}.site-nav a{min-height:44px;display:inline-flex;align-items:center;color:var(--smoke);font-size:.86rem;text-decoration:none}.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--paper);text-decoration:underline;text-decoration-color:var(--coral)}.demo-banner{position:sticky;z-index:4;top:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;min-height:52px;padding:8px 20px;color:var(--ink);background:var(--marigold);font-size:.84rem;font-weight:700}.demo-banner button,.demo-banner a{min-height:36px;padding:6px 10px;color:var(--ink);border:2px solid var(--ink);background:transparent;cursor:pointer;text-decoration:none}main{display:block}.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}.narrow{width:min(760px,calc(100% - 40px));margin-inline:auto}.hero{position:relative;min-height:650px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);align-items:center;gap:clamp(32px,6vw,88px);padding-block:clamp(64px,10vw,128px);overflow:hidden}.eyebrow{margin:0 0 16px;color:var(--marigold);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1,h2,h3{font-family:var(--display);text-wrap:balance}h1{max-width:680px;margin:0;font-size:clamp(3.1rem,8vw,6.5rem);font-weight:900;letter-spacing:-.025em;line-height:.87;text-transform:uppercase}h1[tabindex="-1"]:focus{outline:none}h2{margin:0 0 20px;font-size:clamp(2rem,5vw,3.8rem);line-height:.95;text-transform:uppercase}h3{margin:0 0 8px;font-size:1.22rem;letter-spacing:.03em;text-transform:uppercase}.lede{max-width:56ch;margin:28px 0 24px;color:var(--paper);font-size:clamp(1.05rem,2vw,1.25rem)}.hero-action{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}.action-note{max-width:28ch;color:var(--smoke);font-size:.84rem}.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:11px 18px;border:2px solid var(--cyan);color:var(--ink);background:var(--cyan);font-weight:800;text-decoration:none;cursor:pointer;box-shadow:5px 5px #235a5d;transition:transform .18s ease,box-shadow .18s ease}.button:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:7px 7px #235a5d}.button.secondary{color:var(--paper);background:transparent;border-color:#686b74;box-shadow:none}.button.coral{border-color:var(--coral);background:var(--coral);box-shadow:5px 5px #692f33}.facts{display:flex;flex-wrap:wrap;gap:10px 20px;margin:28px 0 0;padding:0;color:var(--smoke);font-size:.8rem;list-style:none}.facts li:before{content:"◆";margin-right:7px;color:var(--marigold)}.hero-art{position:relative;min-height:500px;isolation:isolate}.hero-art:before{content:"";position:absolute;inset:20px 0 0 24px;border:1px solid var(--cyan);clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,4% 100%,0 92%)}.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;filter:saturate(.9) contrast(1.08);clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,4% 100%,0 92%)}.art-ticket{position:absolute;z-index:2;right:-8px;bottom:26px;max-width:220px;padding:12px 14px;color:var(--ink);background:var(--paper);box-shadow:7px 7px 0 var(--coral);transform:rotate(-2deg);font-size:.75rem;font-weight:800;text-transform:uppercase}.section{padding-block:clamp(72px,10vw,128px);border-top:1px solid #292d3a}.section-kicker{color:var(--coral);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}.section-intro{max-width:62ch;color:var(--smoke)}.playground-shell{position:relative;margin-top:40px;padding:clamp(16px,3vw,32px);border:1px solid #3a3e4e;background:var(--booth);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}.playground-shell:before,.playground-shell:after{content:"";position:absolute;width:7px;height:7px;border:1px solid #747681;border-radius:50%;background:var(--ink)}.playground-shell:before{top:10px;left:10px}.playground-shell:after{right:10px;bottom:10px}.scene-stage{position:relative;aspect-ratio:16 / 8.5;min-height:270px;border:2px solid #626574;background:var(--ink);box-shadow:inset 0 0 0 6px #07080d,0 16px 40px #0000004d;overflow:hidden}.scene-stage audio-reactive-scene{width:100%;height:100%;min-height:270px}.scene-label{position:absolute;z-index:2;left:14px;top:14px;padding:5px 8px;color:var(--ink);background:var(--paper);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.42fr);gap:24px;margin-top:24px}.control-group{min-width:0}.control-label{display:block;margin-bottom:8px;color:var(--smoke);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.motion-heading{margin-top:18px}.tab-list,.source-list,.motion-list{display:flex;flex-wrap:wrap;gap:8px}.tab,.source,.motion-button{min-height:44px;padding:8px 13px;border:1px solid #5a5d6a;color:var(--paper);background:#0d1019;cursor:pointer}.tab[aria-selected=true],.motion-button[aria-pressed=true]{border-color:var(--marigold);color:var(--ink);background:var(--marigold)}.source[data-active=true]{border-color:var(--coral);box-shadow:inset 0 -3px var(--coral)}.slider-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:22px}input[type=range]{width:100%;min-height:44px;accent-color:var(--cyan)}.meter-value{min-width:4ch;color:var(--cyan);font-variant-numeric:tabular-nums}.status-line{display:flex;align-items:flex-start;gap:9px;min-height:48px;margin:18px 0 0;padding:11px 12px;border-left:3px solid var(--safe);color:var(--smoke);background:#0c0f18;font-size:.82rem}.status-line.error{border-color:var(--danger);color:var(--danger)}.status-dot{flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--safe);box-shadow:0 0 10px var(--safe)}.status-line.error .status-dot{background:var(--danger);box-shadow:none}.file-input{position:absolute;opacity:0;pointer-events:none}.code-panel{margin-top:32px;display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px;padding:18px;border:1px dashed #5c6070;background:#080a10}.code-panel pre{margin:0;overflow-x:auto;color:#d7d2b8;font:.8rem/1.55 var(--body);white-space:pre}.copy-result{min-height:24px;margin:8px 0 0;color:var(--safe);font-size:.78rem}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px;counter-reset:steps}.step{position:relative;padding-top:28px;border-top:4px solid var(--coral);counter-increment:steps}.step:before{content:"0" counter(steps);position:absolute;right:0;top:16px;color:#343845;font:800 3.5rem/1 var(--display)}.step p{max-width:30ch;color:var(--smoke)}.boundary{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}.not-list{margin:0;padding:0;list-style:none}.not-list li{padding:16px 0 16px 28px;border-bottom:1px solid #2b2f3b;position:relative}.not-list li:before{content:"×";position:absolute;left:0;color:var(--coral);font-size:1.3rem}.install-command{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;background:var(--paper);color:var(--ink);font-weight:800}.install-command .button.secondary{color:var(--ink);border-color:#5a5d6a}.legal{padding-block:72px 120px}.legal h1,.error-page h1{font-size:clamp(2.7rem,7vw,5rem)}.legal h2{margin-top:48px;font-size:1.6rem}.legal p,.legal li{max-width:70ch;color:#cfccb9}.error-page{min-height:68vh;display:grid;place-items:center;text-align:center}.error-code{color:var(--coral);font:900 clamp(6rem,24vw,14rem)/.7 var(--display);opacity:.3}.site-footer{padding:40px max(20px,calc((100vw - 1180px)/2));border-top:1px solid #343747;color:var(--smoke);font-size:.8rem}.footer-grid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}.footer-links{display:flex;flex-wrap:wrap;gap:18px}.offline-note{display:none;position:fixed;z-index:20;right:16px;bottom:16px;max-width:310px;padding:12px 14px;color:var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--coral);font-size:.78rem;font-weight:700}.offline .offline-note{display:block}@media(max-width:800px){.site-header{align-items:flex-start}.site-nav a[href="/#how"],.site-nav a[href="/#install"]{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:56px}.hero-art{min-height:min(440px,95vw)}.controls,.boundary,.steps{grid-template-columns:1fr}}@media(max-width:480px){.wrap,.narrow{width:min(100% - 28px,1180px)}.wordmark span:last-child{max-width:130px;line-height:1.1}.site-nav{gap:8px}.site-nav a{font-size:.75rem}h1{font-size:clamp(3rem,16vw,4.3rem)}.hero-action,.button{width:100%}.facts{display:grid}.scene-stage{min-height:225px;aspect-ratio:4 / 3}.scene-stage audio-reactive-scene{min-height:225px}.tab-list,.source-list,.motion-list{display:grid;grid-template-columns:1fr 1fr}.tab,.source,.motion-button{width:100%}.code-panel{grid-template-columns:1fr}.code-panel .button{width:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}