:root{font-family:system-ui,sans-serif;color:#dce4df;background:#080d0e;--lime:#c8f979;--border:#ffffff18}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden}button,select,input{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--border);background:#18211d;border-radius:5px;padding:6px 8px;font-size:10px}button:hover{color:var(--lime);border-color:#c8f97955}button.active{color:var(--lime);background:#33442a}header{position:fixed;z-index:5;right:10px;top:10px}.header-right{display:flex;gap:4px}#toggle-controls,#fullscreen{padding:5px 7px;font-size:10px}#fullscreen{font-size:12px;width:27px}main,.stage,#viewport{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}aside{position:fixed;z-index:4;top:43px;right:10px;bottom:10px;width:280px;padding:14px;overflow:auto;background:#101814;border:1px solid var(--border);border-radius:8px;scrollbar-width:thin;scrollbar-color:#53644d transparent}.controls-collapsed aside{visibility:hidden;pointer-events:none}.panel-heading{display:flex;justify-content:space-between;align-items:center}h2{font-size:13px;font-weight:500;margin:0}.control-section{padding:14px 0;border-bottom:1px solid var(--border)}.section-label{display:flex;gap:7px;align-items:center;font-size:8px;color:#88998f;letter-spacing:1px;margin-bottom:10px}.section-label button{margin-left:auto;border:0;padding:0;font-size:9px}.section-label span{color:#b6c4bc}.section-label>span:last-child{margin-left:auto}#presets{display:grid;grid-template-columns:1fr 1fr;gap:5px}.preset{text-align:left;font-size:9px;padding:8px 6px}.preset b{font-size:13px;font-weight:400;margin-right:5px}.source-buttons{display:flex;gap:4px}.source-buttons button{flex:1;padding:6px 3px;font-size:9px}.hint{font-size:9px;line-height:1.6;color:#8e9f94;margin:8px 0}#spectrum{display:flex;align-items:end;gap:2px;height:22px;margin-top:10px}#spectrum i{flex:1;background:var(--lime);border-radius:1px}.slider-row{margin-top:13px}.slider-head{display:flex;align-items:center;font-size:10px}.value{margin-left:auto;margin-right:8px;color:var(--lime);font-size:9px}.learn{font-size:8px;padding:2px 4px;color:#98a89c}.learning{color:#101413;background:var(--lime)}input[type=range]{appearance:none;width:100%;height:2px;background:#3a493e;margin:10px 0 3px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;background:var(--lime)}.audio-settings{display:grid;gap:5px;margin:12px 0}.audio-settings label{font-size:9px;display:grid;grid-template-columns:75px 1fr;align-items:center}.audio-settings input{margin:0}.audio-route{display:grid;grid-template-columns:65px 1fr;gap:6px;align-items:center;margin-top:10px;font-size:9px}.audio-route input{margin:3px 0}.audio-route output{text-align:right;color:var(--lime);font-size:8px}select{width:100%;min-width:0;border:1px solid var(--border);border-radius:4px;background:#1b241d;padding:5px;font-size:9px}.midi-connect{display:flex;gap:5px}#clear-mapping{font-size:8px;border:0;padding-left:0;color:#8e9f94}#midi-light{color:#657064}#player{width:100%;height:28px;margin-top:8px}#notice{display:none;position:fixed;bottom:12px;left:50%;transform:translate(-50%);background:#c8f979;color:#172015;border-radius:5px;padding:8px 12px;font-size:10px;z-index:10}@media(max-width:400px){aside{width:calc(100vw - 20px)}}#physics-controls details{padding:10px 0;border-bottom:1px solid var(--border)}#physics-controls summary{cursor:pointer;font-size:11px;color:var(--lime)}#visual-reset{margin-top:12px}#track-buttons{position:fixed;bottom:12px;left:12px;z-index:5;display:flex;gap:7px}#track-buttons button{font-size:11px;padding:8px 12px;background:#101814}body.controls-collapsed header,body.controls-collapsed #track-buttons{visibility:hidden;pointer-events:none}body.controls-collapsed.reveal-top header,body.controls-collapsed.reveal-tracks #track-buttons{visibility:visible;pointer-events:auto}body.controls-collapsed #notice{display:none!important}#camera-mode{margin:8px 0}#viewport{isolation:isolate}#viewport canvas{transform:translateZ(0);will-change:transform}header,aside,#track-buttons{isolation:isolate}header:hover button,header:focus-within button{opacity:1}#track-buttons{max-width:calc(100vw - 24px);flex-wrap:wrap}body.controls-collapsed header{visibility:visible;pointer-events:auto}body.controls-collapsed #fullscreen{visibility:hidden;pointer-events:none}body.controls-collapsed.reveal-top #fullscreen{visibility:visible;pointer-events:auto}#toggle-controls{opacity:1;background:#101814}
