/* A compact session tray; the hardware remains the visual focus. */
.deck-support{flex:none;padding:10px 16px 12px}
.deck-support .margin-status{display:block;margin:0 0 8px}
.deck-support .margin-status p{margin:0;font-size:14px;line-height:1.4;text-align:left}
.variation-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 12px}
#variation-label{font-size:13px;margin-right:auto;color:var(--skin-text);opacity:.8}
.session-button{min-height:36px;padding:7px 11px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--skin-text,var(--ink));font:inherit;font-size:13px;line-height:1.2;box-shadow:none}
.session-button:hover:not(:disabled){background:#80808020}
.session-button[aria-pressed=true]{background:#53241f;color:#fff0e3;border-color:#cf6e5c}
.session-button:focus-visible,summary:focus-visible{outline:3px solid #c57445;outline-offset:2px}
#keep-variation{border-color:var(--skin-text);font-weight:600}
#try-sample{margin-left:8px}
.tool-drawers{color:var(--skin-text,var(--text));width:100%}
.tool-drawer{border-top:1px solid var(--line)}
.tool-drawer:last-child{border-bottom:1px solid var(--line)}
.tool-drawer>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:44px;font-size:14px;font-weight:600;padding:8px 2px}
.tool-drawer>summary::-webkit-details-marker{display:none}
.tool-drawer>summary::before{content:'+';font-family:Arial,sans-serif;font-size:19px;font-weight:400;width:16px;text-align:center}
.tool-drawer[open]>summary::before{content:'−'}
.tool-drawer>summary small{margin-left:auto;font-size:12px;font-weight:400;opacity:.75}
.sound-content{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr);gap:12px 24px;padding:2px 0 12px}
.sound-content .skin-picker{display:grid;grid-template-columns:1fr;align-content:start;gap:5px;margin:0;font-size:13px}
.sound-content .skin-picker label{font-size:13px}
.sound-content .skin-picker select{width:100%;min-height:38px;font-size:14px}
.sound-content .skin-sound{display:block;margin:0;font-size:12px;line-height:1.4}
.sound-content .margin-recordings{min-width:0;margin:0;font-size:13px}
.sound-content #own-list{margin-top:6px}
.sound-content #own-list li{font-size:13px;line-height:1.4}
.sound-content .help-button{justify-self:start;font-size:12px;grid-column:1/-1;height:auto;width:auto;border-radius:3px;font-family:inherit;font-style:normal}
.tool-drawers .margin-output{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:2px 0 12px;width:100%;max-width:none;min-width:0;align-items:end}
.performance-tools{display:flex;align-items:center;gap:14px;grid-column:1/-1;margin-bottom:2px}
.performance-tools button{flex:none}
.performance-tools p{margin:0;max-width:40em;font-size:12px;line-height:1.4;text-align:left;opacity:.8}
.tool-drawers :is(.save-source,.save-direction,.save-length){display:flex;flex-direction:column;align-items:stretch;min-width:0;gap:5px;font-size:12px}
.tool-drawers :is(.save-source,.save-direction,.save-length) select{width:100%;min-width:0;min-height:38px;padding:6px;background:var(--skin-key,var(--paper));color:var(--skin-key-ink,var(--ink));border:1px solid var(--line);border-radius:2px;font-size:14px}
.tool-drawers .save-buttons{grid-column:1/-1;display:flex;flex-direction:row;gap:8px;align-self:auto;width:100%}
.tool-drawers .save-buttons .video-save-button{min-width:0;width:auto;flex:1;min-height:38px;padding:8px;font-size:13px;white-space:normal}
.tool-drawers #export-note{display:block;grid-column:1/-1;margin:0;text-align:left;font-size:12px;line-height:1.4;color:inherit;opacity:.8}
#cancel-render{grid-column:1/-1;justify-self:start;min-height:36px}
#save-random-option{min-height:32px;display:flex;align-items:center;gap:5px}
#variations-list{list-style:none;padding:0;margin:16px 0 0}
#variations-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
#variations-list li>span{flex:1;min-width:0;overflow-wrap:anywhere}
#variations-list button{min-height:44px}
.keep-row{display:flex;gap:8px;margin-top:6px}
#variation-name{min-width:0;flex:1;padding:10px;border:1px solid var(--line);background:#f1ead5;color:#252821;font:inherit}
#variations-dialog .session-button{color:inherit}
#variations-dialog label{font-weight:600}
/* Smaller companion keys, sharing the transport's plastic and mechanical depth. */
:root{--tray-cap:#ddd4b9;--tray-ink:#282b22}
:root[data-skin=seventies]{--tray-cap:#b8beac;--tray-ink:#1f291e}
:root[data-skin=modern]{--tray-cap:#bdc7b7;--tray-ink:#203326}
:root[data-skin=eightbit]{--tray-cap:#b5c6de;--tray-ink:#18223d}
.deck-support .session-button,.tool-drawers .save-buttons .video-save-button{
  background:linear-gradient(180deg,#ffffff70 0%,#ffffff12 35%,#00000017 100%),var(--tray-cap);
  color:var(--tray-ink);border:2px solid #33372e;border-bottom:4px solid #14180f;border-radius:4px;
  box-shadow:inset 0 1px 1px #fff9,inset 1px 0 2px #fff5,inset 0 -2px 3px #0002,0 2px 1px #0006;
  font-weight:600;text-shadow:0 1px #ffffff40;transition:transform 70ms ease,box-shadow 70ms ease;
}
.deck-support .session-button:hover:not(:disabled),.tool-drawers .save-buttons .video-save-button:hover:not(:disabled){filter:brightness(1.06)}
.deck-support .session-button:active:not(:disabled),.tool-drawers .save-buttons .video-save-button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 2px #fff6,inset 0 -1px 3px #0003,0 0 1px #0005}
.deck-support #keep-variation{border-color:#33372e;border-bottom-color:#14180f}
.deck-support #capture-performance[aria-pressed=true]{background:linear-gradient(#e69887,#ad5140);color:#291813;box-shadow:inset 0 2px 3px #0004,0 1px 1px #0005;transform:translateY(2px)}
dialog details{border-top:1px solid var(--line);padding:12px 0}
dialog summary{cursor:pointer;min-height:32px;font-weight:600;line-height:1.5}

/* The same moulded key surface and downward travel, with a black cap/red ink. */
html.native-skin[data-skin] #tape-panel.panel-artwork .export-controls #destroy-tape{
  position:relative;isolation:isolate;appearance:none;overflow:visible;
  color:#ff7470;background:linear-gradient(#343733,#11130f);border:1px solid #090b08;border-bottom:4px solid #080907;border-radius:3px;
  box-shadow:inset 0 1px 1px #85877a,0 2px 2px #0008;filter:none;text-shadow:0 1px #000;padding:8px 10px;
  --key-travel:0px;--key-scale:1;
}
html.native-skin[data-skin] #tape-panel.panel-artwork .export-controls #destroy-tape::before{
  content:'';position:absolute;left:var(--cap-left,8%);top:var(--cap-top,9%);width:var(--cap-width,83%);height:var(--cap-height,83%);
  background:var(--key-art,url('/tapeepat/cassette-keys.png')) var(--cap-position,76.5018% 9.8413%)/var(--cap-size,380.198% 259.899%) no-repeat;
  filter:grayscale(1) brightness(.20) contrast(1.3);border-radius:4%;pointer-events:none;z-index:0;
  transform:translateY(var(--key-travel)) scaleY(var(--key-scale));transform-origin:center bottom;transition:transform 80ms ease-out;
}
html.native-skin[data-skin] #tape-panel.panel-artwork .export-controls #destroy-tape>:is(span,svg){position:relative;z-index:1;transform:translateY(var(--key-travel));color:inherit}
html.native-skin[data-skin] #tape-panel.panel-artwork .export-controls #destroy-tape>span{font:inherit;line-height:1.2}
html.native-skin[data-skin] #tape-panel.panel-artwork .export-controls #destroy-tape .ransom-letter{font-size:inherit;line-height:inherit;color:inherit;background:none;box-shadow:none;transform:none;padding:0;margin:0}
html.native-skin[data-skin] #tape-panel.panel-artwork .export-controls #destroy-tape:not(:disabled):active{--key-travel:2px;--key-scale:.965;transform:translateY(1px);box-shadow:inset 0 1px #3b3f35,0 1px 1px #0008}

@media(orientation:portrait) and (max-width:699px){
 .machine .deck{order:0}
 .machine>.machine-controls{order:1}
 .machine .deck-support{order:2;padding:12px}
 .variation-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 12px}
 #variation-label{grid-column:1/-1;margin:0 0 2px}
 #keep-variation{grid-column:3/-1}
 #show-variations,#try-sample{grid-column:span 2;margin:0}
 .session-button{min-height:44px;font-size:14px}
 .tool-drawer>summary{font-size:15px;min-height:48px}
 .tool-drawer>summary small{font-size:12px}
 .sound-content{grid-template-columns:1fr;gap:12px}
 .tool-drawers :is(.skin-picker,.save-source,.save-direction,.save-length) select{font-size:16px;min-height:44px}
 .tool-drawers .margin-output{grid-template-columns:1fr 1fr;gap:10px}
 .save-source,.performance-tools{grid-column:1/-1}
 .performance-tools{flex-direction:column;align-items:stretch;gap:7px}
 .performance-tools p{font-size:13px}
 .tool-drawers .save-buttons{grid-column:1/-1;grid-row:auto}
 .tool-drawers .save-buttons .video-save-button{min-height:44px;font-size:13px}
 #tape-panel .margin-status{grid-column:1/-1;padding:7px;margin:0;background:var(--bg);color:var(--skin-text);line-height:1.35}
 #tape-panel .margin-status p{font-size:14px;margin:0;line-height:1.35;color:inherit}
}
@media(orientation:landscape) and (max-height:540px){
 .deck-support{max-height:45svh;overflow:auto}
 .variation-tools{margin:3px 0 5px}
 .tool-drawer>summary{min-height:44px}
}
@media(prefers-reduced-motion:reduce){html.native-skin[data-skin] #tape-panel.panel-artwork .export-controls #destroy-tape::before{transition:none}}

/* Modern: a hand-labelled military prototype, with the same clean signal path. */
:root[data-skin=modern]{--bg:#1b2018;--paper:#4e533c;--ink:#e7e5d4;--text:#e7e5d4;--muted:#c1c3af;--line:#7c806c;--skin-text:#e5e4d5;--skin-key:#292e24;--skin-key-ink:#edece0;--tray-cap:#444b39;--tray-ink:#eeecdf}
html[data-skin=modern] #tape-panel.panel-artwork{background-color:#4e533c}
html[data-skin=modern] #tape-panel :is(.counter,.speed-heading,.input-routing){color:#e7e5d4;text-shadow:0 1px #171a12}
html[data-skin=modern] #tape-panel h1{width:max-content;max-width:90%;left:50%;right:auto;transform:translateX(-50%) rotate(-.6deg);padding:.04em .24em;border:1px solid #585b50;background:linear-gradient(#262923,#141611);color:#edecdf;font-family:'Courier New',monospace;letter-spacing:.065em;box-shadow:1px 2px 2px #080a08;text-shadow:-1px -1px #fff4,1px 2px #000}
html[data-skin=modern] #tape-panel.panel-artwork button.art-control:not(#destroy-tape){--key-ink:#eeeadd;background-color:#292d23}
html[data-skin=modern] #tape-panel.panel-artwork button.art-control:not(#destroy-tape)::before{filter:saturate(.45) brightness(.75)}
html[data-skin=modern] #tape-panel.panel-artwork button.art-control:not(#destroy-tape):not(:disabled):is(:active,.active,.pressed-flash,[aria-pressed=true])::before{filter:saturate(.4) brightness(.6)}
html[data-skin=modern] #tape-panel button.art-control>span:not(.radio-state){display:block;max-width:100%;width:max-content;padding:.12em .22em;background:linear-gradient(#292b26,#11130f);color:#eeeadd;border-top:1px solid #62635a;box-shadow:1px 2px 1px #0007;font-family:'Courier New',monospace;font-size:.83em;letter-spacing:.04em;line-height:1.14;text-shadow:-.5px -.5px #fff4,1px 1px #000}
html[data-skin=modern] #tape-panel .playback-options .key-label{max-width:90%;font-size:.9em}
html[data-skin=modern] #tape-panel.panel-artwork .export-controls #destroy-tape>span{font-size:.83em;color:#ff7470}
html[data-skin=modern] #tape-panel :is(.speed-heading label,.input-routing label){padding:.1em .24em;background:#171914;color:#eeecdf;font-family:'Courier New',monospace;font-weight:700;letter-spacing:.02em;box-shadow:1px 1px 2px #080a08;text-shadow:0 1px #000}
html[data-skin=modern] #tape-panel #input-route{background:#252b22;color:#eeecdf;border-color:#858877}
html[data-skin=modern] .deck-support .session-button,html[data-skin=modern] .tool-drawers .save-buttons .video-save-button{background:linear-gradient(#4c5341,#363e2f);box-shadow:inset 0 1px #747b62,inset 0 -2px #20251b,0 2px 1px #0006;text-shadow:0 1px #000;font-family:'Courier New',monospace}
html[data-skin=modern] .tool-drawer>summary{font-family:'Courier New',monospace}
@media(orientation:portrait) and (max-width:699px){
 html[data-skin=modern] #tape-panel h1{left:auto;right:auto;justify-self:center;transform:rotate(-.6deg);height:auto;line-height:1.2}
 html[data-skin=modern] #tape-panel button.art-control>span:not(.radio-state){font-size:.82em;letter-spacing:0;padding:.1em .18em}
}