:root{color-scheme:dark;--background:#060b13;--panel:#0b121e;--border:#253344;--muted:#8190a2;--ice:#9df2e9;--text:#e7effb;--dull:#455367}
*{box-sizing:border-box}
html,body{padding:0;margin:0;min-height:100%;background:var(--background);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:radial-gradient(ellipse at 95% 0%,#121b2a 0%,#05080f 67%)}
button,input,select{font:inherit}button,select{cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #b6faf1;outline-offset:3px}
.studio{width:min(1800px,100%);margin:0 auto;padding:0 35px}
.masthead{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:20px}
.mark{display:flex;gap:13px;align-items:center;letter-spacing:.24em;font-size:12px;font-weight:750}
.mark-symbol{display:grid;place-items:center;width:39px;height:39px;border:1px solid #77dbd3;color:#7cffee;font-size:27px;font-weight:400;box-shadow:inset 0 0 19px #4bbed02e}
.mark-copy{line-height:1.45}.mark-copy small{display:block;color:var(--muted);font-weight:500;letter-spacing:.14em;font-size:9px;margin-top:1px}
.mastmeta{color:#97a8b7;letter-spacing:.12em;font-size:10px;display:flex;align-items:center;gap:17px}.mastmeta .dot,.chip i{width:6px;height:6px;border-radius:50%;background:#8afbda;display:inline-block;box-shadow:0 0 14px #61d5b1}.sep{color:#4b6478}
.workspace{display:grid;grid-template-columns:minmax(275px,333px) minmax(0,1fr);grid-template-rows:minmax(680px,calc(100vh - 249px)) 98px;gap:0;border:1px solid var(--border);border-top:0;min-height:660px}
.controls{grid-column:1;grid-row:1 / 3;background:#0a111c;border-right:1px solid var(--border);padding:27px 25px 30px;overflow:auto;max-height:calc(100vh - 143px);scrollbar-width:thin;scrollbar-color:#385068 transparent}
.eyebrow,.section-title,.overline,.transport-lead small{font-size:10px;letter-spacing:.17em;color:#89b7b7;font-weight:650}
h1{font-size:clamp(45px,4.0vw,66px);letter-spacing:-.06em;line-height:.86;font-weight:750;margin:25px 0 18px}h1 em{font-style:normal;font-weight:350;color:#a7fff2}.star{font-size:26px;vertical-align:top;margin-left:7px;letter-spacing:0;color:#dbf9fe}
.subtitle{font-size:15px;font-weight:600;margin:0 0 10px}.intro{font-size:12px;line-height:1.8;color:#8090a2;margin:0 0 26px}
.rule{height:1px;background:var(--border);margin:16px 0}.rule.thin{margin:22px 0 19px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;color:#c5d7e5}.section-title span:last-child{color:#61768a;font-size:9px}
.control{margin:0 0 17px}.control label{font-size:11px;color:#b6c8d9;display:block}
.control.field label{color:#7c91a8;font-size:9px;letter-spacing:.12em;margin-bottom:8px;font-weight:700}
select{width:100%;height:37px;border:1px solid #324559;background:#101c2a;color:#dceaf4;border-radius:4px;padding:0 11px;outline:none;font-size:11px}
.range label{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.range output{color:#83e6e1;font-size:11px;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:14px;margin:0;accent-color:#79ded7;cursor:ew-resize}
.switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.switch{display:flex;align-items:center;gap:8px;border:1px solid #253746;padding:10px 7px;color:#d3e5f2;font-size:9px;letter-spacing:.095em;cursor:pointer}.switch:has(input:checked){background:#133035;border-color:#438d8b}.switch input{accent-color:#76e8d5;width:13px;height:13px;margin:0}
.swatches{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.swatch{height:24px;width:24px;border-radius:50%;background:var(--swatch);border:2px solid #51616d}.swatch.active{outline:1px solid #b8ffed;outline-offset:3px}.tint-pick{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:9px;color:#849aa9;letter-spacing:.06em}.tint-pick input{height:30px;width:32px;background:transparent;border:0;padding:0}
.viewport{min-width:0;min-height:440px;position:relative;isolation:isolate;overflow:hidden;background:#080f1c}
#canvas-wrap{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}.viewport-grain{position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:radial-gradient(#cbd8fa21 .75px, transparent .75px);background-size:5px 5px;mix-blend-mode:screen}
.overlay-top{position:absolute;top:24px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.chip{font-size:10px;letter-spacing:.13em;color:#b5f7e8;border:1px solid #43756f6b;padding:11px 12px;background:#0b2430a8;display:flex;align-items:center;gap:11px}
.orbit-hint{color:#9caab7;letter-spacing:.1em;font-size:10px}.left-mark{position:absolute;left:25px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;display:flex;gap:19px;color:#8da4ba;letter-spacing:.18em;font-size:9px;opacity:.66}
.overlay-bottom{position:absolute;bottom:24px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:end;gap:20px}
.overlay-bottom>div:first-child{display:flex;flex-direction:column;gap:7px}.overline{font-size:9px;color:#7f9fb1}.overlay-bottom b{font-size:12px;letter-spacing:.08em;font-weight:650}.telemetry{display:flex;gap:17px;color:#819aad;font-size:10px;letter-spacing:.07em}.telemetry b{color:#e0f4f7;font-size:10px;font-variant-numeric:tabular-nums;margin-left:4px}
.transport{grid-column:2;grid-row:2;display:flex;gap:15px;justify-content:space-between;align-items:center;padding:16px 23px;border-top:1px solid var(--border);background:#0a111b}.transport-lead{min-width:133px}.transport-lead small{display:block;font-size:9px;margin-bottom:7px}.transport-lead strong{font-size:15px;letter-spacing:-.03em}.transport-actions{display:flex;gap:7px;flex-wrap:wrap}.button{background:#111d2b;border:1px solid #344555;color:#c5d6e3;padding:11px 13px;font-size:10px;letter-spacing:.06em;min-height:38px;white-space:nowrap;transition:background .15s,border-color .15s}.button:hover{background:#1b3040;border-color:#8bdbd7}.button.primary{background:#abfff0;border-color:#abfff0;color:#032022;font-weight:800}.button.primary:hover{background:#d1fff7}.button.audio{border-color:#52827e;color:#9bf5e4}
.footer{height:57px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#678094;font-size:9px;letter-spacing:.12em}
@media (max-width:1150px){.studio{padding:0 20px}.workspace{grid-template-columns:285px minmax(0,1fr)}.transport{flex-wrap:wrap;gap:8px}.transport-lead{display:none}.controls{padding:24px 19px}.orbit-hint{display:none}}
@media (max-width:760px){.studio{padding:0 10px}.masthead{height:68px}.mastmeta{display:none}.workspace{display:flex;flex-direction:column}.viewport{order:0;height:510px;min-height:410px}.transport{order:1;justify-content:center}.controls{order:2;max-height:none;overflow:visible;border-right:0;border-top:1px solid var(--border);display:block}.controls h1{font-size:52px}.transport-lead{display:none}.control.range{max-width:560px}.footer{height:auto;padding:18px 0;flex-direction:column;align-items:start;line-height:1.6}}
@media (max-width:450px){.viewport{height:450px;min-height:400px}.transport{padding:11px}.transport-actions{justify-content:center}.button{padding:9px;font-size:9px}.overlay-top{left:15px;right:15px;top:13px}.overlay-bottom{left:15px;right:15px;bottom:13px}.telemetry{gap:5px}.chip{font-size:8px}.footer{font-size:8px}}