:root{--bg:#030609;--panel:#09141a;--border:#1d3843;--text:#eaf8fc;--muted:#8099a4;--cyan:#70e6ff;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{font-family:Inter,"Segoe UI",Arial,sans-serif;overflow:hidden}button,input{font:inherit}
.lab{height:100vh;display:grid;grid-template-rows:54px minmax(0,1fr);background:var(--bg)}
.topbar{display:flex;align-items:center;gap:22px;padding:0 17px;border-bottom:1px solid #17303a;background:#071015;min-width:0}.topbar h1{margin:0;font:600 16px/1 Georgia,serif;letter-spacing:.055em;white-space:nowrap}.toolbar{display:flex;align-items:center;gap:7px;min-width:0}button{border:1px solid #294955;border-radius:7px;padding:7px 10px;color:#dff8ff;background:#0c1b22;cursor:pointer}button:hover{border-color:#64c6e2;background:#10252e}button.danger{color:#ffb9b9}
.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 268px}.stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#03070a}.stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.hint{position:absolute;left:15px;bottom:11px;margin:0;color:#738c97;font-size:12px;pointer-events:none;text-shadow:0 1px 5px #000}
.sidebar{padding:14px;overflow-y:auto;border-left:1px solid #17303a;background:#071015}.panel{margin-bottom:10px;padding:12px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.panel h2{margin:0 0 10px;color:#86b2c2;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.spectrum-strip{height:8px;margin:2px 0 11px;border-radius:10px;background:linear-gradient(90deg,#713aff,#344cff 18%,#00b8ff 34%,#00d778 49%,#e4dc00 65%,#ff8a00 79%,#ef243d 100%);box-shadow:0 0 11px #6ccfff20}.control{display:block;margin-top:9px}.control>span{display:flex;justify-content:space-between;gap:10px;color:#b8cbd2;font-size:12px}.control output{color:var(--cyan);font-variant-numeric:tabular-nums;white-space:nowrap}.control input{width:100%;margin:5px 0 0;accent-color:#61dcfa}.control.disabled{opacity:.35}.selected-name{margin:0 0 6px;color:#dff7fc;font-size:13px}.note p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
@media(max-width:760px){body{overflow:auto}.lab{height:auto;min-height:100vh;grid-template-rows:auto auto}.topbar{min-height:54px;align-items:flex-start;padding:10px;flex-wrap:wrap;gap:9px 16px}.toolbar{flex-wrap:wrap}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(420px,64vh) auto}.sidebar{border-left:0;border-top:1px solid #17303a}}