:root{color-scheme:dark;--panel-bg: rgba(18, 22, 30, .78);--panel-line: rgba(255, 255, 255, .12);--text: #e8edf4;--muted: #97a3b4;--accent: #63c7ff}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font:13px/1.5 Segoe UI,system-ui,-apple-system,Noto Sans SC,sans-serif;color:var(--text);background:#0b0e13;overflow:hidden}.app-root{position:relative;width:100%;height:100%}.canvas-mount{position:absolute;inset:0;--sky-top: #3a3363;--sky-horizon: #f0895a;background:linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-horizon) 78%,var(--sky-horizon) 100%)}.canvas-mount canvas{display:block}.hint{position:absolute;left:16px;bottom:14px;color:#ffffff8c;font-size:11px;letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.6)}.panel{position:absolute;top:16px;right:16px;width:268px;max-height:calc(100% - 32px);display:flex;flex-direction:column;background:var(--panel-bg);border:1px solid var(--panel-line);border-radius:12px;backdrop-filter:blur(10px);box-shadow:0 12px 34px #0006;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:600;font-size:13px;letter-spacing:.02em;border-bottom:1px solid var(--panel-line)}.collapse{width:24px;height:24px;border:1px solid var(--panel-line);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;line-height:1}.collapse:hover{background:#ffffff14}.panel-body{padding:6px 14px 16px;overflow-y:auto}.panel-body.hidden{display:none}.section{border-top:1px solid var(--panel-line);padding:8px 0}.section:first-child{border-top:0}.section>summary{cursor:pointer;list-style:none;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 0}.section>summary::-webkit-details-marker{display:none}.section>summary:before{content:"▸ ";color:var(--muted)}.section[open]>summary:before{content:"▾ "}.section-body{display:flex;flex-direction:column;gap:10px;padding:8px 2px 2px}.ctl{display:flex;flex-direction:column;gap:5px}.ctl-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.ctl-label em{font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:#ffffff29;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #0b0e13}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #0b0e13}input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}select,.btn{width:100%;padding:7px 9px;border-radius:7px;border:1px solid var(--panel-line);background:#ffffff0f;color:var(--text);font:inherit;cursor:pointer}.btn:hover{background:#ffffff1f}.ctl-toggle{flex-direction:row;align-items:center;justify-content:space-between}.switch{width:40px;height:22px;border-radius:999px;border:1px solid var(--panel-line);background:#ffffff1a;position:relative;cursor:pointer;padding:0}.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s ease,background .15s ease}.switch.on{background:#63c7ff59;border-color:var(--accent)}.switch.on .knob{transform:translate(18px);background:var(--accent)}.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){.switch .knob{transition:none}}@media (max-width: 640px){.panel{width:210px;top:10px;right:10px;font-size:12px}}