@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#090e14;--panel:#10171e;--line:#263039;--muted:#8d9aa5;--text:#eef3f7;--mint:#8cf0d0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;color:var(--text);border:1px solid var(--line);background:#172029;border-radius:6px;padding:10px 13px;transition:background .2s,border-color .2s}button:hover{background:#25343d;border-color:#6b7c88}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button[aria-pressed=true],button.active{border-color:var(--mint);color:var(--mint)}.topbar{height:76px;padding:0 34px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;letter-spacing:1.5px;font-size:11px}.brand{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700}.brand span{font-size:10px;color:var(--muted);font-weight:400;margin-left:12px}.top-title{letter-spacing:4px}.top-title b{font-weight:400;color:var(--muted);margin-left:10px}.source{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:calc(100dvh - 76px)}.stage{position:relative;min-height:850px;height:calc(100dvh - 76px);overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1b2833 0,transparent 65%)}#viewport{position:absolute;inset:0 0 185px;touch-action:none;outline-offset:-4px}canvas{display:block;width:100%;height:100%}.hero{position:absolute;top:37px;left:42px;pointer-events:none}.eyebrow{font-size:9px;font-weight:600;letter-spacing:1.8px;color:var(--mint)}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:7px;box-shadow:0 0 10px #8cf0d050}h1{font-family:'Space Grotesk',sans-serif;font-size:82px;letter-spacing:-6px;line-height:1;margin:19px 0 15px;font-weight:500}h1 em{font-style:normal;color:#9eafbc}.subtitle{font-size:14px;line-height:1.6;color:var(--muted)}.scene-badge{position:absolute;top:42px;right:30px;font-size:9px;letter-spacing:1.5px;color:var(--muted)}.view-toolbar{position:absolute;bottom:252px;left:32px;display:flex;gap:4px;padding:4px;background:#0d141bbf;border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(12px)}.view-toolbar button{border:0;background:transparent;padding:8px 12px;color:var(--muted);font-size:11px}.view-toolbar button.active{background:#263831;color:var(--mint)}.gesture-hint{position:absolute;bottom:213px;left:34px;font-size:8px;letter-spacing:1.5px;color:#9aaaae;pointer-events:none}.gesture-hint span{margin:0 8px;color:#52616c}.transport{position:absolute;bottom:0;left:0;right:0;padding:24px 34px 22px;border-top:1px solid var(--line);background:#0b1119ee}.transport-head{display:flex;align-items:center;justify-content:space-between}.transport h2{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:400;letter-spacing:-.5px;margin:8px 0 13px}output{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:400;font-variant-numeric:tabular-nums}output span{font-size:13px;color:var(--muted);margin-left:4px}input[type=range]{width:100%;height:3px;display:block;accent-color:var(--mint);cursor:ew-resize;margin:7px 0 18px}.range-labels{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:var(--muted)}.playback{display:flex;align-items:center;gap:8px;margin-top:19px}.playback button{font-size:11px}.primary{background:var(--mint);color:#0d2620;border-color:var(--mint);font-weight:700;min-width:151px}.primary:hover{background:#a5ffe0}.primary span{font-size:15px;margin-right:8px}.key-hint{margin-left:auto;color:var(--muted);font-size:9px}.key-hint span{margin:0 8px}.inspector{background:linear-gradient(155deg,#131c24,#0e141b);border-left:1px solid var(--line);padding:29px 25px}.panel-heading{display:flex;align-items:center;justify-content:space-between}.small-pill{border:1px solid var(--line);padding:5px 7px;border-radius:4px;font-size:8px;letter-spacing:1px;color:var(--muted)}.inspector h2{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:400;letter-spacing:-.6px;margin:24px 0 10px}.intro-copy{line-height:1.7;color:var(--muted);font-size:12px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:26px;padding-bottom:23px;gap:15px;border-bottom:1px solid var(--line)}.stat-grid div{display:flex;flex-direction:column;gap:6px}.stat-grid strong{font-family:'Space Grotesk',sans-serif;font-size:29px;font-weight:400}.stat-grid span{font-size:8px;color:var(--muted);letter-spacing:1px}.control-section{padding:21px 0;border-bottom:1px solid var(--line)}h3{font-size:9px;font-weight:500;color:#607582;margin:0 0 19px}h3 span{font-size:12px;color:var(--text);margin-left:11px}.swatches{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.swatch{width:25px;height:25px;min-width:25px;border-radius:50%;background:var(--swatch);padding:0;border:3px solid #151e26;outline:1px solid #3c4854}.swatch:hover{background:var(--swatch)}.swatch.active{outline:1px solid var(--mint);border-color:#141d24}.swatches span{font-size:10px;color:var(--muted);margin-left:auto}label{font-size:10px;color:var(--muted);display:block;margin-bottom:7px}select,input[type=search]{width:100%;border:1px solid #33404a;border-radius:5px;padding:10px 11px;background:#0d141b;color:var(--text);font-size:11px}input[type=search]{margin-bottom:8px}.toggle-row{display:flex;gap:6px;margin-top:9px}.toggle-row button{font-size:10px;padding:9px 10px;flex:1}.part-detail{margin-top:18px;min-height:118px}.part-detail .eyebrow{font-size:8px}.part-detail h4{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:400;margin:10px 0}.part-detail p{color:var(--muted);line-height:1.6;font-size:11px;margin:0}.part-detail #part-meta{font-size:9px;color:#73958d;display:block;margin-top:9px}.selection-actions{display:flex;gap:8px}.selection-actions button{font-size:10px;padding:9px 12px}.panel-footer{display:flex;align-items:center;justify-content:space-between;margin:20px 0;font-size:10px;color:var(--muted)}.panel-footer button{font-size:11px}.credits{font-size:10px;line-height:1.65;color:var(--muted)}.credits summary{cursor:pointer}.credits a{color:var(--mint);text-decoration:underline}.loading{position:absolute;inset:0 0 220px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#090e14d9;z-index:5}.loading span:last-child{color:var(--muted);font-size:11px}.spinner{width:28px;height:28px;border:2px solid #34443e;border-top-color:var(--mint);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}.error{position:absolute;z-index:6;top:30%;left:10%;right:10%;padding:30px;background:#17222e;border:1px solid #456170;border-radius:8px;line-height:1.5}.labels{position:absolute;inset:0 0 185px;pointer-events:none;overflow:hidden}.landmark{position:absolute;white-space:nowrap;font-size:9px;letter-spacing:1px;color:var(--mint);padding:5px 8px;border:1px solid #8cf0d05a;background:#0a151ddb;border-radius:3px;transform:translate(-50%,-100%)}.tooltip{position:absolute;z-index:5;pointer-events:none;font-size:10px;background:#101f27eb;border:1px solid var(--mint);padding:9px 12px;border-radius:5px;max-width:230px}.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}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 355px}.inspector{padding:34px}.hero{top:47px;left:50px}h1{font-size:100px}}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 300px}.inspector{padding:25px 20px}.hero{left:28px}h1{font-size:66px}.scene-badge{top:23px;right:20px;font-size:8px}.eyebrow{font-size:8px}.key-hint{display:none}.swatches span{width:100%;margin:4px 0 0}.transport{padding:22px}.range-labels{font-size:7px;letter-spacing:.5px}}@media(max-width:760px){.topbar{height:60px;padding:0 19px}.brand{font-size:15px}.brand span{display:none}.top-title{font-size:9px;letter-spacing:2px}.source{font-size:9px;letter-spacing:0}.workspace{display:block}.stage{height:760px;min-height:0}#viewport{bottom:210px}.hero{top:24px;left:22px}h1{font-size:58px;letter-spacing:-4px;margin:12px 0}.subtitle{font-size:11px}.hero .eyebrow{font-size:7px;letter-spacing:1px}.scene-badge{top:165px;left:24px}.transport{padding:22px 20px}.transport h2{font-size:19px}.view-toolbar{left:19px;bottom:259px}.gesture-hint{left:22px;bottom:228px;font-size:7px;letter-spacing:.7px}.playback{gap:6px}.playback button{font-size:10px;padding:10px}.primary{min-width:130px}.range-labels span:nth-child(2){display:none}.inspector{border-left:0;border-top:1px solid var(--line);padding:26px 24px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.panel-heading,.inspector>h2,.intro-copy,.stat-grid,.selection,.panel-footer,.credits{grid-column:1/-1}.inspector h2{margin:15px 0 0}.stat-grid{margin-top:15px}.control-section{padding:20px 0}.toggle-row{flex-wrap:wrap}.swatches span{width:100%}.labels{bottom:210px}.part-detail{min-height:90px}.loading{bottom:210px}.selection-actions button{min-height:39px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}