:root{color-scheme:dark;--bg-1: #0b0f14;--bg-2: #121823;--bg-3: #0f141d;--panel: rgba(14, 20, 30, .82);--panel-border: rgba(120, 140, 170, .18);--text: #e9eef6;--muted: #a3b1c2;--accent: #ff8a3d;--accent-2: #35d0c2;--danger: #ff5c5c}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Space Mono,JetBrains Mono,Fira Code,Consolas,monospace;background:radial-gradient(circle at 15% 20%,rgba(53,208,194,.22),transparent 40%),radial-gradient(circle at 85% 10%,rgba(255,138,61,.2),transparent 45%),radial-gradient(circle at 20% 85%,rgba(90,120,255,.2),transparent 45%),linear-gradient(140deg,var(--bg-1),var(--bg-2) 55%,var(--bg-3));color:var(--text);overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:110px 110px,45px 45px;background-position:0 0,20px 30px;pointer-events:none;opacity:.4;z-index:0}#app{height:100%;position:relative;z-index:1}.app-shell{height:100%}button{font-family:inherit;border:none;cursor:pointer;color:var(--text)}button.ghost{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);padding:10px 16px;border-radius:999px;transition:.2s ease}button.ghost:hover{border-color:#ffffff4d;background:#ffffff1f}button.accent{background:linear-gradient(140deg,var(--accent),#ff6f2f);color:#090b10;font-weight:600;padding:10px 18px;border-radius:999px;box-shadow:0 6px 18px #ff783c66}button.small{padding:6px 12px;font-size:12px}.layout{position:relative;height:100%;min-height:0}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:18px;position:absolute;left:16px;top:16px;bottom:16px;width:320px;display:flex;flex-direction:column;gap:20px;overflow:auto;box-shadow:0 20px 60px #00000059;transition:.2s ease;z-index:2}.panel-section{display:flex;flex-direction:column;gap:12px}.panel-section.small{font-size:12px;color:var(--muted)}.section-title{text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--muted)}.panel-actions{display:flex;gap:8px;flex-wrap:wrap}.scene-select{width:100%;padding:12px 14px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);font-size:13px;font-family:inherit;color:var(--text);cursor:pointer;transition:.2s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a3b1c2' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.scene-select:hover{border-color:#ffffff3d}.scene-select:focus{outline:none;border-color:#35d0c280;box-shadow:0 0 0 2px #35d0c226}.scene-select option{background:var(--bg-2);color:var(--text);padding:8px}.control-list{display:flex;flex-direction:column;gap:12px}.control{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#0a0e14a6}.control-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.key-cap{padding:2px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.2);font-size:10px;color:var(--text)}.control-inputs{display:grid;grid-template-columns:1fr 70px;gap:10px;align-items:center}input[type=range]{width:100%;accent-color:var(--accent-2)}input[type=number]{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:6px 8px;border-radius:8px}.key-help{display:flex;flex-direction:column;gap:6px}.key-row{font-size:11px;color:var(--muted)}.stage{position:relative;border-radius:0;overflow:hidden;border:none;box-shadow:none;background:#000;position:absolute;top:0;right:0;bottom:0;left:0}#gl-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.sidebar-toggle{position:absolute;top:20px;left:16px;padding:8px 14px;border-radius:999px;background:#0c1016b3;border:1px solid rgba(255,255,255,.18);color:var(--text);font-size:12px;z-index:3;transition:.2s ease}.sidebar-toggle.hidden{opacity:0;pointer-events:none}.hud{position:absolute;left:20px;bottom:20px;padding:10px 14px;border-radius:12px;background:#0c101699;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:1;transition:opacity .3s ease}.hud.hidden{opacity:0;pointer-events:none}.hud-title{font-size:14px;font-weight:600}.hud-desc{font-size:11px;color:var(--muted)}.fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;padding:24px;color:var(--muted)}body.sidebar-collapsed .panel{transform:translate(calc(-100% - 24px));opacity:0;pointer-events:none}.rec-row{display:flex;align-items:center;gap:10px}#rec-btn.recording{background:#ff3c3c40;border-color:var(--danger);color:var(--danger)}.rec-badge{font-size:12px;color:var(--danger);animation:rec-pulse 1s ease-in-out infinite}.rec-badge.hidden{display:none}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.4}}.offline-controls{display:flex;flex-direction:column;gap:10px}.offline-row{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.offline-row input[type=number],.offline-row select{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:6px 8px;border-radius:8px;font-family:inherit;font-size:12px}.offline-row select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23a3b1c2' d='M2 3l3 4 3-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:22px}.offline-row select option{background:var(--bg-2);color:var(--text)}.offline-unit{font-size:11px;color:var(--muted)}.offline-progress{height:6px;border-radius:999px;background:#ffffff14;overflow:hidden}.offline-progress.hidden{display:none}.offline-progress-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .15s ease}.offline-status{font-size:11px;color:var(--muted)}.offline-status.hidden{display:none}#offline-btn:disabled{opacity:.4;cursor:not-allowed}body:not(.sidebar-collapsed) .sidebar-toggle{left:348px}@media (max-width: 1024px){.panel{width:min(85vw,360px);top:12px;bottom:12px;left:12px}body:not(.sidebar-collapsed) .sidebar-toggle{left:calc(24px + min(85vw,360px))}.hud{left:16px;bottom:16px}}@media (max-width: 640px){.control-inputs{grid-template-columns:1fr}}