/* The approved engraved-paper collage, with real meters and controls. */
@font-face{font-family:TapePaper;src:url('/tapeepat/paper-serif-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:TapePaper;src:url('/tapeepat/paper-serif-bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --bg:#292928;--paper:#dfd2b8;--ink:#292923;--text:#292923;
  --muted:#605a4e;--line:#8b806b;--red:#823c30;--blue:#496879;--green:#67715b;
  font-family:TapePaper,Georgia,serif;
}
body{background:var(--bg);background-image:url('/tapeepat/paper.webp');background-blend-mode:multiply}
.app{width:100%;max-width:1600px;height:auto;min-height:100vh;min-height:100svh;margin:auto;padding:8px}
.machine{display:flex;flex-direction:column;gap:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;min-height:0;height:auto}
.machine>.deck-panel{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;background:transparent;container-type:normal}
.deck{position:relative;width:100%;aspect-ratio:1062/1024;overflow:hidden;flex-shrink:0}
.deck>img{display:block;width:144.63277%;max-width:none;height:auto}
/* Sample only the reel interiors. The deck, tape and guides remain stationary. */
.reel{background-image:url('/tapeepat/collage-slotted.png');background-repeat:no-repeat;border-radius:50%;top:auto;aspect-ratio:1;transform:rotate(var(--reel-angle,0deg));will-change:transform}
.reel-left{left:3.95480%;top:14.55078%;width:44.25612%;background-size:326.80851% auto;background-position:3.93996% 26.89531%}
.reel-right{left:51.60075%;top:13.86719%;width:45.19774%;background-size:320% auto;background-position:51.89394% 26.10294%}
.deck-label,.deck-model{display:none}

.machine>.machine-controls{
  position:relative;display:flex;flex-direction:column;gap:0;min-width:0;min-height:0;
  margin:0 7px 12px;padding:9px 9px 8px;
  color:var(--ink);background-color:var(--paper);background-image:url('/tapeepat/paper.webp');
  background-size:620px auto;background-blend-mode:soft-light;
  border:1px solid #a2977e;border-radius:1px;outline:3px solid #c5b99f;outline-offset:2px;
  box-shadow:0 3px 7px #0007,inset 0 0 0 3px #e8dcc5;
  overflow:visible;scrollbar-width:thin;scrollbar-color:#8c816d #dfd2b8;
}
.collage-masthead{flex:none;padding:6px 9px;background-color:var(--red);background-image:url('/tapeepat/paper.webp');background-blend-mode:multiply;border:1px solid #5e4033;transform:rotate(-.35deg)}
.collage-masthead h1{
  margin:0;padding:6px 0 3px;text-align:center;font-family:'Courier New',Courier,monospace;font-size:clamp(28px,7.4vw,49px);
  font-weight:700;letter-spacing:.015em;line-height:1.1;color:#282a27;
  background-color:#eee1c9;background-image:url('/tapeepat/paper.webp');background-blend-mode:soft-light;
  clip-path:polygon(1% 2%,13% 1%,21% 3%,34% 0,45% 2%,57% 0,72% 3%,88% 0,99% 2%,100% 18%,99% 33%,100% 55%,99% 72%,100% 95%,86% 98%,74% 96%,61% 100%,46% 97%,32% 99%,19% 97%,2% 99%,0 85%,1% 66%,0 45%,1% 23%);
}
.meter-panel{flex:none;padding:12px 3px 6px;border:0;background:transparent}
.monitor{gap:6px}
.meter-bank,.meter-bank.stereo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;max-width:none}
.vu-wrap{background:#e2cf9f;border:3px double #413e32;border-radius:1px;box-shadow:0 2px 3px #362f2655,inset 0 0 9px #4d402d55}
.counter{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:5px;padding:4px 2px 0;border:0;border-radius:0;background:transparent;color:var(--ink)}
.counter #timer{font-family:'Courier New',monospace;font-size:22px;line-height:1.1}
#mode-label,#duration-label{font-size:10px;color:var(--muted);letter-spacing:.04em}
.tape-progress{height:2px;margin:6px 0 0;background:#706a5633}.tape-progress span{background:var(--red)}

.transport-panel{flex:none;padding:10px 3px 8px;border:0;border-bottom:1px solid var(--line)}
.transport-labels{display:none}
.transport{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.machine-controls :is(.transport-key,.action-button,.loop-button){
  position:relative;min-width:0;border:1px solid #9a8a6d;border-radius:1px;
  color:var(--ink);background:#e8dac0 url('/tapeepat/paper.webp');background-blend-mode:soft-light;background-size:420px auto;
  box-shadow:0 2px 2px #40332366;filter:none;text-shadow:none;
  font-family:TapePaper,Georgia,serif;font-weight:700;
  transition:transform 100ms ease,box-shadow 100ms ease;
}
.machine-controls .transport-key{min-height:88px;padding:9px 1px 8px;font-size:clamp(10px,2.6vw,15px);line-height:1.1;gap:10px;text-transform:uppercase}
.transport-key>svg{width:27px;height:27px;order:2}
.transport-key>span{order:1}
.machine-controls .record-key svg{color:var(--red)}
.machine-controls :is(.transport-key,.action-button,.loop-button):is(:active:not(:disabled),.active,.pressed-flash,[aria-pressed=true]){
  color:var(--ink);background:#d1c19e url('/tapeepat/paper.webp');background-blend-mode:soft-light;
  box-shadow:inset 0 0 0 2px #554b36,0 1px 1px #40332344;transform:translateY(1px);filter:none;
}
.machine-controls .record-key.active{color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.machine-controls :is(.transport-key,.action-button,.loop-button):disabled:not(.active):not([aria-pressed=true]){opacity:.55;filter:none}
.machine-controls :is(.transport-key,.action-button,.loop-button):is(.active,[aria-pressed=true]){opacity:1}
.transport-panel>.input-buttons{display:block;margin:4px 0 7px;padding:0}
.machine-controls #add-own{display:flex;width:100%;min-height:39px;justify-content:center;gap:8px;padding:6px 0;border:0;background:transparent;box-shadow:none;font-family:TapePaper,Georgia,serif;font-size:17px;font-weight:400;color:var(--ink)}
.machine-controls #add-own:is(:hover,:active){color:var(--ink);background:transparent;box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:3px}
#own-count{font-family:'Courier New',monospace;font-size:10px;color:var(--muted)}
.cutup-controls{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin:0}
.source-buttons{gap:8px}
.machine-controls .cutup-controls .cutup-key{--source-color:var(--red);display:flex;flex-direction:column;gap:2px;min-height:61px;padding:7px 2px;font-size:18px;border-color:#624e3e;background-color:var(--source-color);background-blend-mode:multiply;color:#f2e5cd;box-shadow:0 2px 2px #40332366}
.cutup-controls .cutup-key>svg{display:none}
.machine-controls .cutup-controls #add-radio{--source-color:var(--blue)}
.machine-controls .cutup-controls #add-field{--source-color:var(--green)}
.machine-controls .cutup-controls .cutup-key:is(:active:not(:disabled),.active,.pressed-flash,[aria-pressed=true]){background-color:var(--source-color);background-blend-mode:multiply;box-shadow:inset 0 0 0 2px #eee0bf,0 1px 2px #40332366;color:#fff2d7}
.source-key .radio-state,.source-key[aria-pressed=true] .radio-state{order:3;color:inherit;font-size:9px;font-weight:400;line-height:1.25}

.machine-controls>.playback-options{flex:none;display:grid;grid-template-columns:1fr 1.7fr;gap:0;padding:0 3px;align-items:stretch;border-bottom:1px solid var(--line)}
.machine-controls .loop-button{display:flex;flex-direction:row;justify-content:center;gap:8px;min-height:48px;padding:8px 3px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:16px;font-weight:400;transform:none}
.machine-controls #loop{border-right:1px solid var(--line)}
.loop-button>svg{display:none}
#loop-value{display:none}
.machine-controls .loop-button::after{content:'';flex:none;display:block;width:17px;height:19px;border:1px solid var(--ink);background:transparent;box-shadow:none}
.machine-controls .loop-button:is(:active:not(:disabled),.active,.pressed-flash,[aria-pressed=true]){background:transparent;box-shadow:none;transform:none}
.machine-controls .loop-button[aria-pressed=true]::after{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.speed-control{grid-column:1/-1;padding:8px 3px 5px;border-top:1px solid var(--line)}
.speed-heading{font-size:13px;line-height:1.2}.speed-heading output{font-family:'Courier New',monospace}
#speed{height:37px}
#speed::-webkit-slider-runnable-track{height:5px;background:#353630;border:1px solid #1d211c;border-radius:3px}
#speed::-moz-range-track{height:5px;background:#353630;border:1px solid #1d211c;border-radius:3px}
#speed::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:30px;margin-top:-14px;border:3px double #39392f;border-radius:0;background:#c1b69c;box-shadow:1px 2px 2px #38312866}
#speed::-moz-range-thumb{width:16px;height:30px;border:3px double #39392f;border-radius:0;background:#c1b69c;box-shadow:1px 2px 2px #38312866}
.speed-scale{font-size:14px;line-height:1}

.control-panel{flex:none;display:flex;flex-direction:column;gap:7px;padding:8px 3px 2px;border:0;background:transparent}
.status{min-height:0;margin:0;font-size:13px;line-height:1.25;color:var(--muted)}
.status.error{color:#823327}
.input-routing,.save-direction{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;align-items:center;font-size:16px}
.input-routing select,.save-direction select{width:100%;min-width:0;min-height:36px;padding:5px 7px;border:1px solid #776b55;border-radius:0;background:#eaddc055;color:var(--ink);font-family:inherit;font-size:16px}
.input-routing .plain-option{grid-column:2;justify-self:end;min-height:30px;padding:3px 0;border:0;background:transparent;font-size:12px;color:var(--muted)}
.input-routing p{font-size:12px;line-height:1.25}
.save-direction{font-size:13px}.save-direction select{font-size:13px;min-height:30px}
.export-controls{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:0;margin-top:2px;border-top:1px solid var(--line)}
.export-button,.destroy-button{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;min-height:46px;padding:6px 4px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);box-shadow:none;text-shadow:none;font-family:TapePaper,Georgia,serif;font-size:16px;font-weight:400;transform:none}
.export-button svg{display:none}
.destroy-button{align-self:stretch;border-right:0;font-size:15px}
.destroy-button svg{width:23px;height:31px;stroke-width:1.35}
.export-button:not(:disabled):is(:hover,:active),.destroy-button:not(:disabled):is(:hover,:active){background:#a5977622;box-shadow:none;transform:none}
.export-note{font-size:10px;line-height:1.25;color:var(--muted);margin:0;text-align:center}
.control-panel>.info-button{align-self:flex-end;flex:none;width:26px;height:26px;margin:0 2px;color:var(--muted);border:1px solid var(--line);background:transparent;font-size:17px}
#own-list{gap:5px}#own-list li{font-size:13px}#own-list button{background:transparent;box-shadow:none}
.notice{background:var(--paper);color:var(--ink)}
dialog{border:1px solid #8a7b60;border-radius:1px;background:var(--paper) url('/tapeepat/paper.webp');background-blend-mode:soft-light;color:var(--ink);font-family:TapePaper,Georgia,serif;box-shadow:0 7px 30px #0008}
dialog h2{font-family:inherit}dialog p,dialog li{font-size:16px;line-height:1.4}
dialog .action-button{background:#e8dac0;border:1px solid #8a7b60;box-shadow:0 2px 2px #40332344;border-radius:0;font-family:inherit;font-size:15px}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #476774;outline-offset:3px}

@media(min-width:900px),(min-width:700px) and (pointer:fine),(orientation:landscape) and (min-width:560px){
  .app{height:100vh;height:100svh;min-height:0;padding:12px 15px 12px 3px}
  .machine{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,30vw,460px);grid-template-rows:minmax(0,1fr);height:100%;gap:8px}
  .machine>.deck-panel{grid-column:1;grid-row:1;padding:0;container-type:size}
  .deck{width:min(100%,calc((100vh - 24px)*1.037109375));width:min(100%,calc((100svh - 24px)*1.037109375))}
  @supports(width:1cqw){.deck{width:min(100cqw,103.71094cqh)}}
  .machine>.machine-controls{grid-column:2;grid-row:1;display:flex;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:2px 0;padding:9px;border-left:1px solid #a2977e}
  .collage-masthead h1{font-size:clamp(32px,3.2vw,49px)}
  .machine-controls .transport-key{font-size:clamp(11px,.95vw,15px)}
}
@media(orientation:landscape) and (max-height:540px){
  .app{padding-top:8px;padding-bottom:8px}
  .machine{grid-template-columns:minmax(0,1fr) 300px}
  .machine-controls .transport-key{min-height:76px;font-size:11px}
  .collage-masthead h1{font-size:30px}
}
@media(max-width:359px){.app{padding:4px}.machine>.machine-controls{padding:7px}.transport{gap:4px}.machine-controls #add-own{font-size:15px}.machine-controls .loop-button{font-size:14px}.machine-controls .cutup-controls .cutup-key{font-size:16px}}
@media(prefers-reduced-motion:reduce){.reel{transform:none;will-change:auto}.machine-controls :is(.transport-key,.action-button,.loop-button){transition:none}}