#spectral-canvas{display:none}
/* OP–1 / OP–Z / EP–136 references: matte grey hardware, quiet legends and
   small functional colour accents. The stereo display remains the hero. */
:root[data-skin=spectral]{--bg:#111416;--paper:#c8cbc7;--ink:#24292a;--text:#24292a;--muted:#616a68;--line:#747e7b;--skin-text:#d9deda;--skin-accent:#98c9bc;--skin-key:#e2e4de;--skin-key-ink:#24292a;--skin-edge:#929a95;--skin-shadow:inset 0 1px #fff8,0 2px 2px #0004;--tray-cap:#d6d9d2;--tray-ink:#252a28;font-family:Arial,Helvetica,sans-serif}
html[data-skin=spectral] .deck :is(.reel,.tape-guide,.tape-loop){display:none}
html[data-skin=spectral] #spectral-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html[data-skin=spectral] #tape-panel.panel-artwork{background:#bfc5bf;border:1px solid #dde0d8;border-radius:7px;box-shadow:inset 0 1px #f2f3ea,inset 0 -2px #88918a}
html[data-skin=spectral] #tape-panel::before,html[data-skin=spectral] #tape-panel::after{display:none}
html[data-skin=spectral] #tape-panel h1{font:600 calc(var(--panel-unit)*7)/1.1 Arial,sans-serif;letter-spacing:.055em;color:#2c3430;text-shadow:none}
html[data-skin=spectral] #tape-panel .vu-wrap{background:#19221e;border:2px solid #828d83;border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 3px #0005}
html[data-skin=spectral] #tape-panel :is(.counter,.speed-heading,.input-routing){font-family:Arial,Helvetica,sans-serif;color:#303a34;text-shadow:none}
html[data-skin=spectral] #tape-panel .counter{font-family:ui-monospace,monospace}
html[data-skin=spectral] #tape-panel.panel-artwork button.art-control{
 --key-accent:#6e8175;background:#e0e3db;border:1px solid #a3aba1;border-bottom:3px solid #828e81;border-radius:5px;
 box-shadow:inset 0 1px #f7f8ef,0 2px 1px #56604e40;color:#293129;font-family:Arial,Helvetica,sans-serif;font-weight:500;letter-spacing:.005em;text-shadow:none;
}
html[data-skin=spectral] #tape-panel.panel-artwork button.art-control::before{display:none}
html[data-skin=spectral] #tape-panel.panel-artwork button.art-control:not(:disabled):is(:active,.active,.pressed-flash,[aria-pressed=true]){background:#d0d8cc;border-color:#778c76;border-bottom-color:#5e755c;color:#20291f;box-shadow:inset 0 2px 3px #48544335,0 1px 1px #56604e30;transform:translateY(1px)}
html[data-skin=spectral] #tape-panel.panel-artwork :is(#record,#stop,#play,#forward){background:#e0e3db;color:#293129}
html[data-skin=spectral] #tape-panel #record{--key-accent:#bc626c}
html[data-skin=spectral] #tape-panel #stop{--key-accent:#5d91b8}
html[data-skin=spectral] #tape-panel #play{--key-accent:#91a258}
html[data-skin=spectral] #tape-panel #forward{--key-accent:#659b91}
html[data-skin=spectral] #tape-panel .transport button.art-control svg{color:var(--key-accent);width:22px;height:22px}
html[data-skin=spectral] #tape-panel.panel-artwork #cutup{background:#adc9c0;border-color:#7c9892;border-bottom-color:#5a746b;color:#253b34;box-shadow:inset 0 1px #d6e4df,0 2px 1px #56604e40}
html[data-skin=spectral] #tape-panel.panel-artwork #chew{background:#414944;color:#b4dfca;border-color:#313a34;border-bottom-color:#202921;box-shadow:inset 0 1px #647064,0 2px 1px #56604e40}
html[data-skin=spectral] #tape-panel.panel-artwork #chew[aria-pressed=true]{background:#adc9c0;border-color:#74988b;color:#23382e;box-shadow:inset 0 2px 3px #314b3a39}
html[data-skin=spectral] #tape-panel .radio-state{color:#38443a}
html[data-skin=spectral] #tape-panel #input-route{background:#e0e3db;color:#2c352e;border:1px solid #858e83;border-radius:3px}
html[data-skin=spectral] #tape-panel #speed::-webkit-slider-runnable-track{background:#3c453f;box-shadow:0 1px #edf0e4}
html[data-skin=spectral] #tape-panel #speed::-moz-range-track{background:#3c453f}
html[data-skin=spectral] #tape-panel #speed::-webkit-slider-thumb{background:linear-gradient(90deg,#d6dbd0 42%,#404d3f 43%,#404d3f 55%,#d6dbd0 56%);border:1px solid #74816f;border-bottom:3px solid #606d59;border-radius:3px;box-shadow:inset 0 1px #fff9,0 1px 2px #0004}
html[data-skin=spectral] #tape-panel #speed::-moz-range-thumb{background:#d6dbd0;border:1px solid #74816f;border-radius:3px}
html[data-skin=spectral] .deck-support .session-button,html[data-skin=spectral] .tool-drawers .save-buttons .video-save-button{background:#d6dbd2;border:1px solid #9ba593;border-bottom:3px solid #778470;border-radius:4px;color:#283225;text-shadow:none;box-shadow:inset 0 1px #f4f7ed,0 2px 1px #0004;font-weight:500;font-family:Arial,Helvetica,sans-serif}
html[data-skin=spectral] .deck-support #keep-variation{background:#b8c9c0;border-color:#8a9a8e;border-bottom-color:#65796b;color:#26362b}
html[data-skin=spectral] #tape-panel .margin-status{background:#aab5a9;color:#293328;border-radius:3px}
html[data-skin=spectral] #tape-panel .margin-status p{color:#293328}
html[data-skin=spectral] #fullscreen-view{background:#c5cdc2;color:#29332b;border-color:#879180;box-shadow:inset 0 1px #eff3e6,0 1px 2px #0004}
@media(orientation:portrait) and (max-width:699px){
 html[data-skin=spectral] .machine .deck{margin-top:0;margin-bottom:0}
 html[data-skin=spectral] #tape-panel h1{font-size:28px}
}
@media(orientation:landscape) and (max-height:540px){
 html[data-skin=spectral] #tape-panel.panel-artwork{background:none;border:0}
 html[data-skin=spectral] #tape-panel :is(.panel-upper,.panel-lower){background:#bfc5bf;border:1px solid #dce0d6}
}
