@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#080c0e;--text:#e9eeef;--muted:#85949b;--line:#ffffff18;--accent:#b9f3ee;font-family:'DM Sans',sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{color:inherit}button{cursor:pointer}button{background:transparent;border:0}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}#studio{min-height:760px;height:100svh;position:relative;overflow:hidden}#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}header{position:absolute;top:0;left:0;right:0;height:110px;padding:0 48px;display:flex;align-items:center;gap:30px;pointer-events:none}header>*{pointer-events:auto}.wordmark{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:600;letter-spacing:2px}.mark{border:1px solid #a3d5d455;border-radius:50%;height:43px;width:43px;display:grid;place-items:center;font-size:11px;letter-spacing:-1px;color:var(--accent)}.edition{margin-left:auto;color:var(--muted);font-size:12px;letter-spacing:1.3px}.edition span{color:#d3dbdd;margin-left:16px}.icon-button{font-size:27px;margin-left:5px}.intro{position:absolute;left:48px;top:151px;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--accent)}.eyebrow span{color:#50676c;padding:0 8px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.1vw,50px);font-weight:400;line-height:1.13;letter-spacing:-2px;margin:20px 0 16px}.intro p{font-size:14px;color:var(--muted);margin:0}.view-label{position:absolute;left:48px;top:52%;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}.view-label #view-number{font-size:16px;color:#dae8e9}.view-label i{width:1px;height:42px;background:#7eaeb84d}.panel{position:absolute;right:48px;top:176px;width:252px;padding:22px;background:linear-gradient(145deg,#17212599,#0a111599);border:1px solid #a4d6e01c;border-radius:13px;backdrop-filter:blur(22px)}.panel-heading{font-size:11px;letter-spacing:1.3px;display:flex;justify-content:space-between;align-items:center;padding-bottom:21px;border-bottom:1px solid var(--line)}.panel-heading button{font-size:12px;letter-spacing:0;color:var(--muted);padding:0}fieldset{padding:0;margin:22px 0;border:0}legend{font-size:14px;margin-bottom:13px}.palettes{display:flex;gap:13px}.swatch{font-size:11px;color:var(--muted);padding:0;display:grid;gap:8px;justify-items:center;flex:1}.swatch i{height:22px;width:22px;border:4px solid #141e23;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #ffffff20}.swatch.active{color:var(--text)}.swatch.active i{box-shadow:0 0 0 1px var(--swatch)}.range-label{display:flex;justify-content:space-between;font-size:13px;margin:21px 0 10px}.range-label output{color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:14px;background:transparent;appearance:none;margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--accent) var(--fill,65%),#36454b var(--fill,65%));border-radius:4px}input[type=range]::-webkit-slider-thumb{appearance:none;height:9px;width:9px;border-radius:50%;background:var(--accent);margin-top:-3.5px}input[type=range]::-moz-range-track{height:2px;background:#36454b}input[type=range]::-moz-range-thumb{height:9px;width:9px;border:0;border-radius:50%;background:var(--accent)}.switch-row{font-size:13px;display:flex;align-items:center;justify-content:space-between;padding:21px 0;border-bottom:1px solid var(--line);margin-bottom:20px}#orbit{border-radius:20px;width:30px;height:17px;background:#426b6a;padding:3px}#orbit i{display:block;width:11px;height:11px;border-radius:50%;background:var(--accent);transform:translateX(13px);transition:transform .2s}#orbit[aria-checked=false]{background:#273338}#orbit[aria-checked=false] i{transform:none}.camera-views{display:grid;gap:3px;margin-bottom:16px}.camera-views button{font-size:13px;text-align:left;padding:8px 9px;border-radius:4px;color:var(--muted)}.camera-views button.active{color:var(--accent);background:#bcf3ed0b}.capture{border-top:1px solid var(--line);padding:18px 0 0;width:100%;font-size:13px;display:flex;justify-content:space-between}.capture span{color:var(--accent)}.stats{position:absolute;bottom:136px;left:48px;display:flex;gap:38px;align-items:center;pointer-events:none}.stats strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:400;letter-spacing:-.5px}.stats span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-top:5px}.drag-hint{border-left:1px solid var(--line);padding-left:28px;color:var(--muted);font-size:10px;line-height:1.8;letter-spacing:1px}footer{position:absolute;left:48px;right:48px;bottom:26px;height:68px;border-top:1px solid var(--line);display:flex;align-items:center;gap:24px}.play{width:36px;height:36px;border:1px solid #ffffff30;border-radius:50%;flex-shrink:0;font-size:15px}.transport{width:360px}.transport-title{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.2px;margin-bottom:6px}.transport-title #time{color:var(--muted);font-variant-numeric:tabular-nums}.transport input{display:block}.transport input::-webkit-slider-thumb{height:6px;width:6px;margin-top:-2px}.text-button{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}kbd{font:inherit;border:1px solid var(--line);padding:2px 5px;margin-left:8px;border-radius:3px;font-size:10px}.source{font-size:12px;margin-left:12px;color:var(--muted)}#loading{position:absolute;inset:0;background:var(--bg);display:grid;align-content:center;justify-content:center;text-align:center;transition:opacity .5s;z-index:10}.loading-mark{font-family:'Space Grotesk',sans-serif;color:var(--accent);font-size:40px}#loading p{color:var(--muted);font-size:14px}#loading.loaded{opacity:0;pointer-events:none}#notice{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);font-size:13px;background:#17252eee;padding:12px 20px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none}#notice.visible{opacity:1}#show-controls{position:absolute;bottom:28px;right:32px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:9px 13px}.cinema header,.cinema .intro,.cinema .panel,.cinema .stats,.cinema footer,.cinema .view-label{display:none}.cinema #show-controls{display:block}.render #show-controls{display:none}
@media(min-width:1600px){.intro{top:180px}.panel{top:210px}.stats{bottom:160px}}
@media(max-width:1100px){header{padding:0 28px}.intro{left:28px;top:130px}h1{font-size:33px}.panel{right:28px;width:225px;top:156px;padding:18px}.view-label{left:28px}.stats{left:28px;gap:24px}footer{left:28px;right:28px}.drag-hint{display:none}.edition{font-size:10px}.edition span{display:none}}
@media(max-width:700px){#studio{height:auto;min-height:100svh;overflow:hidden;padding-bottom:24px}#viewport{height:670px}header{height:80px;padding:0 22px}.edition{display:none}.wordmark{font-size:11px;letter-spacing:1.5px}.icon-button{margin-left:auto}.intro{top:100px;left:22px}.eyebrow{font-size:10px}h1{font-size:30px;letter-spacing:-1px;margin:14px 0 12px}.intro p{font-size:12px}.view-label{display:none}.panel{position:relative;right:auto;top:auto;width:calc(100% - 44px);margin:700px 22px 0;padding:22px}.panel-heading{font-size:12px}.palettes{gap:22px;justify-content:flex-start}.swatch{font-size:13px}.range-label,.camera-views button,.switch-row,.capture{font-size:14px}.camera-views{grid-template-columns:1fr 1fr}.stats{top:580px;bottom:auto;left:22px;gap:30px}.stats strong{font-size:22px}footer{top:641px;bottom:auto;left:22px;right:22px;height:45px;gap:16px}.transport{flex:1;max-width:340px}.text-button{font-size:0;padding:0}.text-button kbd{font-size:12px}.source{display:none}#loading{height:100svh}.cinema #viewport{height:100svh}.cinema#studio{height:100svh}.cinema .panel{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(min-width:701px){.view-label{top:auto;bottom:224px;writing-mode:horizontal-tb;transform:none}.view-label i{height:1px;width:40px}.view-label>span:last-child{display:none}.range-label,.switch-row,.camera-views button,.capture{font-size:14px}.panel{width:260px}}