:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202322; background: #f1f2ee; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; overflow-x: hidden; }
button, select, input { font: inherit; letter-spacing: 0; }
button, select { cursor: pointer; }
button, select, input[type="number"] { border: 1px solid #c1c9be; border-radius: 4px; background: #f7f8f4; color: #3d453e; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #66796b; outline-offset: 2px; }
[hidden] { display: none !important; }
.experiment-header { display: flex; align-items: center; justify-content: flex-end; height: 64px; padding: 18px 28px 12px; max-width: 1200px; margin: auto; }
.view-toolbar { display: flex; gap: 3px; }
.view-toolbar button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #687069; background: transparent; border: 0; }
.view-toolbar .compressor-toggle { width: auto; min-width: 34px; padding: 0 8px; font-size: 12px; }
.view-toolbar button:hover, .view-toolbar button[aria-pressed="true"], .view-toolbar button[aria-expanded="true"] { color: #25332b; background: #dde2da; }
.device-bar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 84px; width: min(100% - 56px,1144px); margin: 0 auto; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-size: 11px; line-height: 1; font-weight: 600; color: #707770; }
.device-bar select, .audio-actions button { width: 100%; min-width: 0; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 500; }
.audio-actions { align-self: end; }
.audio-actions button.running { background: #bdd5bf; }
.audio-actions button.starting { background: #e8d59f; }
.audio-actions button.error { background: #e5bbb1; }
.keeper-workspace { width: 100%; position: relative; }
#device-scene { width: 100%; height: calc(100svh - 113px); min-height: 440px; position: relative; }
#device-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -3px; }
#scene-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 1; font-size: 14px; color: #59635d; }
#scene-message { margin: 0; }
#reload3d { min-height: 36px; padding: 0 14px; }
.compressor-panel { position: absolute; z-index: 20; right: 26px; top: 18px; width: 310px; max-width: calc(100% - 28px); height: min(720px,calc(100svh - 160px)); min-height: 350px; padding: 16px; overflow: auto; background: #f8f9f5f5; border: 1px solid #cdd4c9; box-shadow: 0 12px 36px #20332218; backdrop-filter: blur(12px); }
.compressor-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.compressor-panel h2 { margin: 0; font-size: 19px; font-weight: 600; }
.compressor-panel button { min-height: 32px; padding: 0 12px; font-size: 12px; }
.compressor-settings { display: grid; gap: 10px; }
.compressor-setting-row { display: grid; grid-template-columns: minmax(0,1fr) 90px; align-items: center; gap: 12px; }
.compressor-setting-name { font-size: 12px; font-weight: 600; }
.compressor-setting-row input { min-width: 0; width: 100%; height: 32px; padding: 0 8px; font-size: 12px; }
#compressorApplyButton { width: 100%; margin-top: 16px; }
@media (max-width: 600px) {
  .experiment-header { height: 60px; padding: 14px 14px 12px; }
  .view-toolbar { gap: 0; }
  .view-toolbar button { width: 30px; }
  .device-bar { width: calc(100% - 28px); gap: 10px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  #device-scene { height: calc(100svh - 168px); min-height: 360px; }
  .compressor-panel { right: 14px; top: 12px; height: calc(100svh - 206px); }
}