:root{--bg:#0e1116;--panel:#161b22;--text:#e6edf3;--muted:#8b949e;--accent:#58a6ff;--border:#30363d}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{grid-template-columns:1fr 320px;height:100dvh;display:grid}.drawer-tab{display:none}#canvas-container{position:relative;overflow:hidden}#canvas-container canvas{width:100%;height:100%;display:block}#controls{background:var(--panel);border-left:1px solid var(--border);padding:16px;overflow-y:auto}.control-group{margin-bottom:20px}.control-group h3{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:13px;display:flex}.control-group h3:after{content:"▾";flex-shrink:0;font-size:11px;transition:transform .15s}.control-group.collapsed h3:after{transform:rotate(-90deg)}.control-group.collapsed>:not(h3){display:none}.control-group.collapsed{margin-bottom:8px}.control-group.collapsed h3{margin-bottom:0}.slider-row{grid-template-columns:90px 1fr 50px;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;display:grid}.slider-row label{color:var(--text)}.slider-row input[type=range]{width:100%;accent-color:var(--accent)}.slider-row .value{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.camera-buttons{gap:6px;display:flex}.camera-buttons button{color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;flex:1;padding:6px}.camera-buttons button.active{background:var(--accent);color:#0e1116;border-color:var(--accent)}.toggle-row{grid-template-columns:90px 1fr;align-items:center;gap:8px;margin-bottom:6px;display:grid}.toggle-label{color:var(--text);font-size:13px}.toggle-buttons{gap:4px;display:flex}.toggle-buttons button{color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;flex:1;padding:5px 4px;font-size:12px}.toggle-buttons button.active{background:var(--accent);color:#0e1116;border-color:var(--accent)}.slider-hud{display:none}.canvas-overlay{pointer-events:none;flex-direction:column;gap:8px;display:flex;position:absolute;bottom:12px;left:12px}.canvas-overlay .camera-buttons{pointer-events:auto;border:1px solid var(--border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0e1116bf;border-radius:6px;padding:6px}.stats-overlay{border:1px solid var(--border);color:var(--muted);font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0e1116bf;border-radius:6px;padding:8px 12px;font-size:12px;line-height:1.6}.saved-panel .save-row{grid-template-columns:1fr auto;gap:6px;margin-bottom:8px;display:grid}.saved-panel input.preset-name{color:var(--text);border:1px solid var(--border);background:0 0;border-radius:4px;min-width:0;padding:6px 8px;font-family:inherit;font-size:13px}.saved-panel input.preset-name:focus{border-color:var(--accent);outline:none}.saved-panel .save-btn{background:var(--accent);color:#0e1116;border:1px solid var(--accent);cursor:pointer;border-radius:4px;padding:6px 12px;font-size:13px;font-weight:500}.saved-panel .save-btn:disabled{color:var(--muted);border-color:var(--border);cursor:not-allowed;background:0 0}.saved-panel .preset-list{margin:0;padding:0;list-style:none}.saved-panel .preset-item{grid-template-columns:1fr auto;gap:4px;margin-bottom:4px;display:grid}.saved-panel .preset-load{color:var(--text);border:1px solid var(--border);cursor:pointer;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:0 0;border-radius:4px;min-width:0;padding:6px 8px;font-family:inherit;font-size:13px;overflow:hidden}.saved-panel .preset-load:hover{border-color:var(--accent)}.saved-panel .preset-delete{color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;padding:6px 10px;font-size:14px;line-height:1}.saved-panel .preset-delete:hover{color:var(--text);border-color:var(--text)}.saved-panel .preset-empty{color:var(--muted);margin:0;font-size:12px;font-style:italic}.saved-panel .preset-empty.hidden{display:none}input[type=range]::-webkit-slider-thumb{width:20px;height:20px}input[type=range]::-moz-range-thumb{width:20px;height:20px}@media (width<=768px){.slider-hud{border:1px solid var(--border);font-variant-numeric:tabular-nums;color:var(--text);pointer-events:none;z-index:30;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;background:#0e1116e0;border-radius:8px;align-items:baseline;gap:14px;padding:10px 20px;font-size:17px;position:fixed;top:16px;left:50%;transform:translate(-50%)}.slider-hud.active{display:flex}.slider-hud-label{color:var(--muted);font-size:13px}.slider-hud-value{color:var(--accent);font-size:20px;font-weight:600}#app{grid-template-rows:1fr;grid-template-columns:1fr}#controls{border-left:none;border-top:1px solid var(--border);z-index:10;border-radius:12px 12px 0 0;flex-direction:column;height:65dvh;padding:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .15s;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden;transform:translateY(calc(100% - 44px))}#controls.drawer-open{transform:translateY(0)}#controls.slider-dragging{opacity:0;pointer-events:none}.controls-scroll{flex:1;padding:12px;overflow-y:auto}.drawer-tab{border-bottom:1px solid var(--border);cursor:pointer;flex-shrink:0;justify-content:flex-end;align-items:center;height:44px;padding:0 14px;display:flex}.drawer-tab-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:6px;padding:4px 8px;font-family:inherit;font-size:13px;display:flex}.canvas-overlay{bottom:52px}.slider-row{min-height:40px}.camera-buttons button,.toggle-buttons button,.saved-panel .save-btn,.saved-panel .preset-load,.saved-panel .preset-delete{min-height:44px;padding:12px}.saved-panel input.preset-name{min-height:44px;padding:10px 12px;font-size:16px}input[type=range]::-webkit-slider-thumb{width:28px;height:28px}input[type=range]::-moz-range-thumb{width:28px;height:28px}}