:root{color-scheme:dark;--bg:#080d15;--surface:#101824;--line:#26313e;--muted:#80919e;--bright:#e5f5f6;--glow:#52d9e2;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:#dfe9ed}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #33424e;border-radius:7px;background:#18222f;color:#c8dce2;transition:background .18s,border-color .18s}button:hover{background:#243544;border-color:#59717d}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--glow);outline-offset:3px}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 35px;border-bottom:1px solid #1c2933;background:linear-gradient(90deg,#0a121c,#101722);z-index:1}.logo{display:flex;gap:15px;align-items:center}.logo-icon{width:35px;height:35px;border:2px solid #55e0e2;border-radius:50%;position:relative;display:grid;place-items:center;transform:rotate(25deg)}.logo-icon span{position:absolute;width:20px;height:8px;border:1px solid #5ee3e4;border-radius:80%;transform:rotate(0deg)}.logo-icon span:nth-child(2){transform:rotate(60deg)}.logo-icon span:nth-child(3){transform:rotate(120deg)}.logo-text{font-size:21px;font-weight:750;letter-spacing:.19em;line-height:1.18}.logo-text small{display:block;margin-top:5px;color:#77919d;font-size:8px;letter-spacing:.26em;font-weight:600}.header-meta{display:flex;align-items:center;font-size:10px;letter-spacing:.19em;color:#7f919a}.status-led{width:7px;height:7px;border-radius:50%;background:#60ddce;box-shadow:0 0 13px #36b8c0;margin-right:10px}.separator{height:18px;width:1px;background:#30404d;margin:0 20px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 355px;flex:1;min-height:600px}.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#192a37 0,#0b1521 46%,#080d15 79%);min-height:600px}.viewport{position:absolute;inset:0}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.stage:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(0deg,#070e17c7,transparent 23%,transparent 85%,#080e187a)}.stage-overlay{pointer-events:none;position:absolute;z-index:2;left:47px;top:43px}.eyebrow{color:#61d8dc;font-weight:700;font-size:10px;letter-spacing:.24em}.stage-overlay h1{font-size:clamp(27px,3.0vw,46px);line-height:1.1;letter-spacing:.01em;font-weight:620;margin:17px 0 13px}.stage-overlay h1 em{font-weight:290;font-style:normal;color:#7aa2a8}.stage-overlay p{font-size:9px;color:#8598a6;letter-spacing:.23em}.stage-marker{position:absolute;z-index:2;color:#718894;font-size:9px;letter-spacing:.2em;pointer-events:none}.stage-marker span{color:#5ed8e0}.marker-left{left:5%;top:57%}.marker-right{right:5%;top:37%}.stage-bottom{pointer-events:none;position:absolute;z-index:2;bottom:28px;left:44px;right:44px;display:flex;gap:36px;align-items:flex-end}.mini-stat{display:flex;flex-direction:column;gap:7px}.mini-stat span{font-size:9px;letter-spacing:.18em;color:#778c9a}.mini-stat strong{font-size:20px;color:#cce8ec;font-weight:500;letter-spacing:.05em;font-variant-numeric:tabular-nums}.hint{margin-left:auto;color:#6b8796;font-size:9px;letter-spacing:.16em;white-space:nowrap}.hint span{color:#5cd9df;margin:0 8px}.inspector{background:#0f1721;border-left:1px solid #24313d;display:flex;flex-direction:column;min-width:0}.inspector-head{padding:35px 27px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26323e}.inspector h2{font-weight:450;margin:9px 0 0;font-size:25px;letter-spacing:-.035em;color:#e5eff2}.chip{border:1px solid #24515a;color:#76d9df;padding:6px 11px;border-radius:4px;font-size:9px;letter-spacing:.15em}.controls{overflow:auto;padding:6px 27px 25px}.control-section{padding:24px 0 23px;border-bottom:1px solid #26333e}.section-title{font-size:10px;letter-spacing:.2em;color:#c4d6da;margin-bottom:20px;font-weight:700}.section-title span{color:#63cdd5;margin-right:15px}.button-row{display:flex;gap:8px;margin-bottom:11px}.button-row button{height:39px;flex:1;font-size:11px;letter-spacing:.04em}.button-row .primary{background:#285962;border-color:#47858e;color:#d2f6f4}.button-row.trio button{height:34px;background:#121e2a}.control{margin-top:19px;min-width:0}.control label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#99aeb8;letter-spacing:.16em;font-weight:650;margin-bottom:12px}.control output{color:#86e1e3;font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums}.control input[type=range]{width:100%;accent-color:#59cbd3;height:4px;margin:5px 0}.control select{width:100%;height:40px;background:#161f2a;color:#d4e5e9;padding:0 12px;border:1px solid #31414e;border-radius:5px;font-size:12px}.input-row{display:flex;gap:13px}.input-row>.control{flex:1}.color-field{height:40px;border:1px solid #31414e;border-radius:5px;display:flex;align-items:center;padding:4px 8px;gap:11px;color:#9fb1bb;font-size:11px}.color-field input{padding:0;border:0;background:transparent;width:35px;height:26px;cursor:pointer}.switch-row{display:flex;justify-content:space-between;align-items:center;margin-top:21px;color:#b9cbd1;font-size:12px;cursor:pointer}.switch-row input{position:absolute;opacity:0}.switch-row i{width:34px;height:18px;border-radius:12px;background:#32424f;position:relative;transition:.15s}.switch-row i:before{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;background:#8e9da7;border-radius:50%;transition:.15s}.switch-row input:checked+i{background:#27636e}.switch-row input:checked+i:before{background:#78e1e5;transform:translateX(16px)}.switch-row input:focus-visible+i{outline:2px solid #85e7e9}.audio-button{width:100%;height:43px;background:#172a34;color:#8cdee2;border-color:#2d6972;font-size:12px}.helper{font-size:10px;color:#718692;line-height:1.65;margin:12px 0 0}.footer-block{padding-top:24px;display:flex;flex-direction:column;gap:9px}.footer-block>span{font-size:9px;letter-spacing:.2em;color:#8299a7}.footer-block code{font-size:10px;color:#8bd5d5;background:#152530;padding:12px 8px;border:1px solid #253942;white-space:nowrap;overflow:auto}.footer-block p{font-size:10px;color:#6f8792;line-height:1.5;margin:0}.foot{height:34px;background:#090f17;border-top:1px solid #1a2934;display:flex;justify-content:space-between;align-items:center;padding:0 27px;font-size:9px;letter-spacing:.13em;color:#536c7b}@media(max-width:930px){.workspace{grid-template-columns:1fr}.stage{height:68vh;min-height:530px}.inspector{border-left:0;border-top:1px solid #26323e}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 35px;padding:0 27px 25px}.inspector-head{padding:23px 27px}.footer-block{grid-column:1/-1}}@media(max-width:610px){.topbar{padding:0 18px;height:65px}.header-meta{display:none}.stage{min-height:440px;height:60vh}.stage-overlay{left:23px;top:25px}.stage-overlay h1{font-size:27px}.stage-overlay p{font-size:8px;max-width:230px;line-height:1.5}.stage-marker,.hint{display:none}.stage-bottom{left:23px;right:23px;gap:21px;bottom:20px}.mini-stat span{font-size:8px}.mini-stat strong{font-size:16px}.controls{display:block}.foot{padding:0 12px;font-size:7px}}