/* The approved panel is the visible surface. Native controls occupy its exact
   illustrated positions; labels remain accessible and live parts stay live. */
.machine>.machine-controls{padding:0;margin:0;border:0;outline:0;border-radius:0;background:transparent;box-shadow:none;align-items:center}
#tape-panel{position:relative;flex:none;width:100%;aspect-ratio:474/1024;container-type:normal;--panel-unit:3.6px;background:url('/tapeepat/collage-slotted.png') right top/324.050633% auto no-repeat}
html:not(.native-skin) #tape-panel .panel-accessible,
html:not(.native-skin) #tape-panel .art-control>span:not(.radio-state),
html:not(.native-skin) #tape-panel .art-control>svg{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#tape-panel.panel-artwork button.art-control,
#tape-panel.panel-artwork button.art-control:is(:hover,:active,.active,.pressed-flash,[aria-pressed=true],:disabled){
  position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;
  padding:0;margin:0;border:0;border-radius:0;color:transparent;background:transparent;
  box-shadow:none;text-shadow:none;transform:none;filter:none;opacity:1;font-size:0;line-height:0;
}
#tape-panel.panel-artwork button.art-control:focus-visible{outline:2px solid #355e77;outline-offset:1px}
#tape-panel.panel-artwork button.art-control:is(.transport-key,.export-button):disabled{background:#decfaf44}
#tape-panel.panel-artwork button.art-control:is(.transport-key,.export-button,.destroy-button):not(:disabled):hover{box-shadow:inset 0 0 0 1px #483c3155}
#tape-panel.panel-artwork button.art-control:is(.transport-key,.export-button,.destroy-button):not(:disabled):active,
#tape-panel.panel-artwork button.art-control.transport-key:is(.active,.pressed-flash,[aria-pressed=true]){box-shadow:inset 0 0 0 2px #463b2d; background:#342a2318}
#tape-panel #record.active{box-shadow:inset 0 0 0 2px #8a2e26;background:#892b251c}
#tape-panel.panel-artwork button.art-control.source-key[aria-pressed=true]{box-shadow:inset 0 0 0 2px #f0dfb9}

#tape-panel .meter-panel{position:absolute;left:7.59494%;top:15.625%;width:83.12236%;height:11.62109%;padding:0;border:0;background:transparent}
#tape-panel .meter-bank{display:grid;grid-template-columns:1fr 1fr;gap:7.1%;width:100%;height:100%;max-width:none}
#tape-panel .vu-wrap{min-width:0;min-height:0;background:transparent;border:0;border-radius:0;box-shadow:none}
#tape-panel .vu-wrap canvas{display:block;width:100%;height:100%;aspect-ratio:auto}
#tape-panel .counter{position:absolute;top:calc(100% + calc(var(--panel-unit) * 1.5));left:0;right:0;display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:3px;padding:0;background:transparent;border:0}
#tape-panel .counter #timer{font-size:calc(var(--panel-unit) * 3.5);line-height:1;font-family:'Courier New',monospace}
#tape-panel #mode-label,#tape-panel #duration-label{font-size:calc(var(--panel-unit) * 2.2);line-height:1;letter-spacing:0;color:#403a30}
#tape-panel .tape-progress{position:absolute;left:5%;right:7.5%;top:30.45%;height:1px;margin:0;background:transparent}
#tape-panel .tape-progress span{background:#823c30}

#tape-panel .transport{position:absolute;left:4.64135%;top:31.64063%;width:87.34177%;height:11.71875%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.44928%}
#tape-panel .input-buttons{position:absolute;left:4.64135%;top:45.41016%;width:87.34177%;height:4.6875%;display:block;margin:0;padding:0}
#tape-panel #add-own:focus-visible{outline-offset:-2px}
#tape-panel .cutup-controls{position:absolute;left:4.43038%;top:50.97656%;width:86.91983%;height:6.73828%;display:grid;grid-template-columns:128fr 270fr;gap:0;margin:0;column-gap:3.39806%}
#tape-panel .source-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5.18519%;min-width:0}
#tape-panel .art-control>.radio-state{position:absolute;left:0;right:0;bottom:-18%;display:block;color:#403a30;font-size:calc(var(--panel-unit) * 2.5);line-height:1;letter-spacing:.02em;font-family:TapePaper,Georgia,serif;font-weight:400;text-transform:uppercase}
#tape-panel #cutup.working{box-shadow:inset 0 0 0 2px #f0dfb9}

#tape-panel .playback-options{position:absolute;left:4.21941%;top:59.17969%;width:87.97468%;height:5.76172%;display:grid;grid-template-columns:166fr 251fr;gap:0;padding:0;border:0}
#tape-panel .loop-button::after{content:'';position:absolute;top:28.81%;width:15.66%;height:45.76%;border:0;background:transparent;box-shadow:none}
#tape-panel #loop::after{left:40.96%}
#tape-panel #random-speed::after{left:82.47%;width:10.36%}
#tape-panel .loop-button[aria-pressed=true]::after{background:#302d25;box-shadow:inset 0 0 0 3px #d8c8aa}

#tape-panel .speed-control{position:absolute;left:17.51055%;top:65.42969%;width:61.18143%;height:8.00781%;padding:0;border:0}
#tape-panel #speed{position:absolute;left:0;top:12.2%;width:100%;height:60.97561%;margin:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none}
#tape-panel #speed::-webkit-slider-runnable-track{height:2px;border:0;background:transparent}
#tape-panel #speed::-moz-range-track{height:2px;border:0;background:transparent}
#tape-panel #speed::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:calc(var(--panel-unit) * 6.11814);height:calc(var(--panel-unit) * 10.33755);margin-top:calc(1px - calc(var(--panel-unit) * 5.168775));border:0;border-radius:0;background:url('/tapeepat/collage-approved.png') 84.00796% 69.74359%/5296.55172% auto no-repeat;box-shadow:none}
#tape-panel #speed::-moz-range-thumb{width:calc(var(--panel-unit) * 6.11814);height:calc(var(--panel-unit) * 10.33755);border:0;border-radius:0;background:url('/tapeepat/collage-approved.png') 84.00796% 69.74359%/5296.55172% auto no-repeat;box-shadow:none}
#tape-panel .speed-heading{position:absolute;left:0;right:0;bottom:0;display:block;text-align:center;line-height:1}
#tape-panel #speed-value{font-size:calc(var(--panel-unit) * 2.7);font-weight:400;color:#4c4133}

#tape-panel .input-routing{position:absolute;left:25.52743%;top:75.58594%;width:65.82278%;height:4.39453%;display:block;border:0;margin:0;padding:0}
#tape-panel #input-route{display:block;width:100%;height:100%;min-width:0;min-height:0;padding:0 15% 0 3.8%;margin:0;border:0;border-radius:0;background:transparent;color:#2e2b26;box-shadow:none;font-family:TapePaper,Georgia,serif;font-size:calc(var(--panel-unit) * 5.3);line-height:1;appearance:none;-webkit-appearance:none}
#tape-panel #input-route option{background:#e4d5b9;color:#2e2b26}
#tape-panel .export-controls{position:absolute;left:4.64135%;top:83.20313%;width:87.34177%;height:8.00781%;display:grid;grid-template-columns:102fr 130fr 182fr;gap:0;margin:0;padding:0;border:0}

.machine>.machine-controls>.panel-details{flex:none;width:calc(100% - 28px);margin:-7px auto 12px;padding:10px 12px;border:1px solid #9d8b6c;background:#dfd2b8 url('/tapeepat/paper.webp');background-blend-mode:soft-light;background-size:620px auto;box-shadow:0 2px 4px #0005}
.panel-details .panel-options{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.panel-details #input-message{margin:0;font-size:13px;line-height:1.3}.panel-details #input-message:empty{display:none}
.panel-details .import-count{color:#605a4e}.panel-details #own-count{font-size:12px}
.panel-details .status{font-size:14px;line-height:1.3}
.panel-details .export-note{font-size:12px}


/* Explicit dimensions avoid size-containment differences in older browsers. */
.machine>.deck-panel,.machine>.machine-controls,#tape-panel{container-type:normal;contain:none}
.deck{width:var(--fitted-deck-width,100%);height:var(--fitted-deck-height,auto);flex:none}
#tape-panel{width:var(--fitted-panel-width,100%);height:var(--fitted-panel-height,auto)}
@media(min-width:900px),(min-width:700px) and (pointer:fine),(orientation:landscape) and (min-width:560px){
  .deck{width:var(--fitted-deck-width,min(100%,calc((100vh - var(--top-margin-size) - var(--bottom-margin-size) - 8px)*1.037109375)))}
  #tape-panel{width:var(--fitted-panel-width,min(100%,calc((100vh - var(--top-margin-size) - var(--bottom-margin-size) - 8px)*.462890625)))}
}

.panel-upper,.panel-lower{display:contents}
/* Phone landscape: first panel half, complete deck, second panel half. */
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
  .app{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .machine{grid-template-columns:minmax(0,948fr) minmax(0,1062fr) minmax(0,948fr)}
  .machine>.deck-panel{grid-column:2;grid-row:1}
  .machine>.machine-controls,#tape-panel{display:contents}
  #tape-panel .panel-upper,#tape-panel .panel-lower{display:block;position:relative;grid-row:1;align-self:start;justify-self:center;min-width:0;width:var(--fitted-panel-width,100%);height:var(--fitted-panel-height,auto);aspect-ratio:474/512;background-image:url('/tapeepat/collage-slotted.png');background-repeat:no-repeat;background-size:324.050633% auto}
  #tape-panel .panel-upper{grid-column:1;background-position:right top}
  #tape-panel .panel-lower{grid-column:3;background-position:right bottom}
  #tape-panel .meter-panel{top:31.25%;height:23.24218%}
  #tape-panel .tape-progress{top:60.9%}
  #tape-panel .transport{top:63.28126%;height:23.4375%}
  #tape-panel .input-buttons{top:90.82032%;height:9.375%}
  #tape-panel .cutup-controls{top:1.95312%;height:13.47656%}
  #tape-panel .playback-options{top:18.35938%;height:11.52344%}
  #tape-panel .speed-control{top:30.85938%;height:16.01562%}
  #tape-panel .input-routing{top:51.17188%;height:8.78906%}
  #tape-panel .export-controls{top:66.40626%;height:16.01562%}
}

/* Full-width instrument: top-aligned artwork, with all supporting information
   in normal flow beneath the deck. No fixed sidebars or blank top margin. */
:root{--top-margin-size:0px;--bottom-margin-size:0px}
.app{width:100%;max-width:none;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.machine>.deck-panel{flex-direction:column;align-items:center;justify-content:flex-start}
.machine>.machine-controls{justify-content:flex-start;align-items:center;overflow:visible}
.deck-support{flex:none;width:100%;min-width:0;padding:12px 18px 16px;color:#dfd2b8;font-size:1rem;line-height:1.4}
.margin-status,.margin-tools{position:static;width:100%;max-width:none;margin:0;padding:0;background:transparent;color:inherit}
.margin-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin-bottom:12px}
.margin-status :is(#status,#input-message,#export-note){min-height:0;margin:0;color:inherit;font-size:1rem;line-height:1.4;text-align:left;overflow-wrap:anywhere}
.margin-status #status{flex:1 1 280px}
.margin-status #status.error{color:#f1b39d}
.margin-status #export-note{font-size:.875rem}
.margin-status p:empty{display:none}
.margin-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 24px}
.margin-recordings{flex:1 1 300px;min-width:0}
.margin-tools .import-count,.margin-tools #own-count{font-size:.875rem;color:inherit}
.margin-tools #own-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px 18px;margin:6px 0 0;padding:0;list-style:none}
.margin-tools #own-list:empty{display:none}
.margin-tools #own-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0;font-size:.875rem;line-height:1.4}
.margin-tools #own-list li>span{flex:1 1 140px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.margin-tools #own-list button{flex:none;min-height:36px;padding:4px 8px;font-size:.875rem;background:transparent;box-shadow:none;color:inherit;border:1px solid #746b59}
.skin-picker{position:static;order:2;display:flex;flex-direction:column;gap:4px;width:auto;color:inherit;font-family:inherit;font-size:.875rem;line-height:1.4}
.margin-output{order:3;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.margin-tools .save-direction{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:.875rem}
.skin-picker select,.margin-tools .save-direction select{width:auto;min-width:112px;min-height:36px;padding:4px 8px;border:1px solid #b9aa8b;border-radius:0;background:#dfd2b8;color:#292923;font:inherit}
.margin-tools #info{flex:none;align-self:flex-end;width:36px;height:36px;min-height:36px;color:inherit;border-color:#b9aa8b;background:transparent;font-size:22px}
.notice{bottom:12px}
@media(min-width:900px),(min-width:700px) and (pointer:fine),(orientation:landscape) and (min-width:560px){
  .app{height:100vh;height:100svh;min-height:0}
  .machine{grid-template-columns:minmax(0,1fr) var(--console-width,32%);gap:8px;align-items:start}
  .machine>.deck-panel,.machine>.machine-controls{height:100%;margin:0;padding:0;container-type:normal;contain:none}
}
@media(max-width:699px){
  .deck-support{padding:12px}
  .margin-status{gap:6px;margin-bottom:10px}
  .margin-tools{gap:12px 18px}
  .margin-recordings{flex-basis:100%}
  .margin-tools #own-list{grid-template-columns:1fr}
}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
  .machine{grid-template-columns:minmax(0,1fr) var(--split-deck-column,36%) minmax(0,1fr);grid-template-rows:var(--machine-row-height,auto) auto;align-content:start;gap:6px}
  .machine>.deck-panel{display:contents}
  .machine .deck{grid-column:2;grid-row:1;align-self:start;justify-self:center}
  .deck-support{grid-column:1/-1;grid-row:2;padding:6px 12px 10px}
  #tape-panel .panel-upper,#tape-panel .panel-lower{align-self:start}
  .margin-status{margin-bottom:6px}
  .margin-tools{gap:8px 18px}
  .margin-recordings{flex-basis:260px}
}

.deck-support .notice{position:static;left:auto;right:auto;bottom:auto;width:auto;max-width:none;margin:10px 0 0;transform:none}
.margin-tools .save-length{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:.875rem}
.margin-tools .save-length select{width:auto;min-width:132px;min-height:36px;padding:4px 8px;border:1px solid #b9aa8b;border-radius:0;background:#dfd2b8;color:#292923;font:inherit}
#save-random-option{display:flex;align-items:center;gap:6px;font-size:.875rem}
#save-random{width:18px;height:18px;accent-color:var(--skin-accent,#b99b66)}
.video-save-button{align-self:flex-end;min-height:36px;padding:6px 12px;border:1px solid var(--skin-accent,#b99b66);border-radius:0;background:var(--skin-key,#dfd2b8);color:var(--skin-key-ink,#292923);font:inherit;font-size:.875rem;cursor:pointer}
.video-save-button:disabled{opacity:.45;cursor:default}
#cancel-render{min-height:36px;padding:4px 8px;border:1px solid currentColor;background:transparent;color:inherit;font-size:.875rem}
.margin-output{flex:1 1 270px}
html.native-skin .save-length select{background:var(--skin-key);color:var(--skin-key-ink);border-color:var(--line)}