/* Appearance only: every skin uses the same controls and measured layout. */
@font-face{font-family:TapePixel;src:url('/tapeepat/silkscreen-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root[data-skin=seventies]{--bg:#242422;--paper:#c9c6bc;--ink:#202321;--text:#202321;--muted:#595c56;--line:#767870;--skin-text:#eee4c8;--skin-accent:#d4a74c;--skin-key:#e4dcc7;--skin-key-ink:#262721;--skin-edge:#787a70;--skin-shadow:0 3px 0 #141714,inset 0 1px 0 #fff8;--deck-art:url('/tapeepat/deck.png');font-family:Equipment,Arial,sans-serif}
:root[data-skin=eightbit]{--bg:#151c35;--paper:#222d49;--ink:#f7dda0;--text:#f7dda0;--muted:#c0c8d4;--line:#61708e;--skin-text:#f7dda0;--skin-accent:#63e6be;--skin-key:#f7dda0;--skin-key-ink:#151c35;--skin-edge:#151c35;--skin-shadow:3px 3px 0 #0a1022;--deck-art:url('/tapeepat/deck-8bit.png');font-family:TapePixel,'Courier New',monospace}
:root[data-skin=modern]{--bg:#101313;--paper:#e9eeeb;--ink:#17201d;--text:#17201d;--muted:#53625b;--line:#a4b0a9;--skin-text:#dce6df;--skin-accent:#d7f56b;--skin-key:#d4dcd6;--skin-key-ink:#17201d;--skin-edge:#a6b5ac;--skin-shadow:none;--deck-art:url('/tapeepat/deck-modern-neon.png');font-family:Arial,Helvetica,sans-serif}
html.native-skin body{background:var(--bg);background-image:none}
html.native-skin .deck{aspect-ratio:1536/1024}
html.native-skin .deck>img{width:100%;height:100%;object-fit:contain}
html.native-skin .reel{width:44%;top:1%;background-image:var(--deck-art);background-size:227.272727% auto}
html.native-skin .reel-left{left:3%;background-position:5.357143% 2.939942%}
html.native-skin .reel-right{left:53%;background-position:94.642857% 2.939942%}
/* Each generated drawing is sampled around its measured hub, not stretched. */
html[data-skin=eightbit] .reel{width:43.229167%;top:1.660156%;background-size:231.325301% auto;image-rendering:pixelated}
html[data-skin=eightbit] .reel-left{left:3.971354%;background-position:6.995413% 4.722222%}
html[data-skin=eightbit] .reel-right{left:52.799479%;background-position:93.004587% 4.722222%}
/* Four existing guide faces rotate independently; the rim, tape path, axle
   caps and cast shadows remain part of the stationary illustration. */
.tape-guide{display:none}
html[data-skin=eightbit] .tape-guide{display:block;position:absolute;aspect-ratio:1;border-radius:50%;background-image:var(--deck-art);background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
html[data-skin=eightbit] .guide-small{width:3.38541667%;background-size:2953.846154% auto;--guide-angle:var(--guide-small-angle,0deg)}
html[data-skin=eightbit] .guide-small-left{left:11.36067708%;top:70.3125%;background-position:11.75876011% 74.07407407%}
html[data-skin=eightbit] .guide-small-right{left:84.89583333%;top:70.36132813%;background-position:87.87061995% 74.12551440%}
html[data-skin=eightbit] .guide-large{top:74.75585938%;width:7.8125%;background-size:1280% auto;--guide-angle:var(--guide-large-angle,0deg)}
html[data-skin=eightbit] .guide-large-left{left:19.40104167%;background-position:21.04519774% 84.67920354%}
html[data-skin=eightbit] .guide-large-right{left:72.39583333%;background-position:78.53107345% 84.67920354%}
html[data-skin=eightbit] .tape-guide::before,html[data-skin=eightbit] .tape-guide::after{content:'';position:absolute;inset:0;border-radius:inherit;background:inherit}
html[data-skin=eightbit] .tape-guide::before{transform:rotate(var(--guide-angle));will-change:transform}
html[data-skin=eightbit] .tape-guide::after{clip-path:circle(19% at 50% 50%)}
html[data-skin=eightbit] .guide-small::after{clip-path:circle(28% at 50% 50%)}
@media(prefers-reduced-motion:reduce){html[data-skin=eightbit] .tape-guide::before{transform:none;will-change:auto}}
html[data-skin=modern] .reel{width:43.489583%;top:1.367188%;background-size:229.94012% auto}
html[data-skin=modern] .reel-left{left:3.190104%;background-position:5.645161% 3.932584%}
html[data-skin=modern] .reel-right{left:52.994792%;background-position:93.778802% 3.932584%}
html.native-skin #tape-panel.panel-artwork{background:var(--paper);border:1px solid var(--skin-edge);box-shadow:var(--skin-shadow)}
html.native-skin #tape-panel h1{position:absolute;left:4.65%;right:8%;top:4.8%;height:7%;margin:0;display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:inherit;font-weight:700;font-size:calc(var(--panel-unit)*9.3);line-height:1;letter-spacing:.035em}
html.native-skin #tape-panel .vu-wrap{background:#eee2b2;border:calc(var(--panel-unit)*.7) solid #292d29}
html.native-skin #tape-panel :is(.counter,#timer,#mode-label,#duration-label,#speed-value){color:var(--ink);font-family:inherit}
html.native-skin #tape-panel .counter #timer{font-family:TapePixel,'Courier New',monospace;font-weight:700}
html.native-skin #tape-panel .tape-progress{background:var(--line);height:2px}
html.native-skin #tape-panel .tape-progress span{background:var(--skin-accent)}
html.native-skin #tape-panel.panel-artwork button.art-control,
html.native-skin #tape-panel.panel-artwork button.art-control:is(:hover,:active,.active,.pressed-flash,[aria-pressed=true],:disabled){display:flex;align-items:center;justify-content:center;flex-direction:column;gap:calc(var(--panel-unit)*2);padding:calc(var(--panel-unit)*1.2);border:1px solid var(--skin-edge);border-radius:1px;background:var(--skin-key);color:var(--skin-key-ink);font-family:inherit;font-size:calc(var(--panel-unit)*3.2);font-weight:700;line-height:1.15;box-shadow:var(--skin-shadow);text-transform:uppercase;letter-spacing:0}
html.native-skin #tape-panel.panel-artwork button.art-control:disabled{opacity:.48;box-shadow:none}
html.native-skin #tape-panel.panel-artwork button.art-control:not(:disabled):hover{filter:brightness(1.08)}
html.native-skin #tape-panel.panel-artwork button.art-control:is(.active,.pressed-flash,[aria-pressed=true],:active:not(:disabled)){box-shadow:inset 0 0 0 2px currentColor;background:var(--skin-accent);color:#17251d;transform:none;opacity:1}
html.native-skin #tape-panel.panel-artwork button.art-control:focus-visible{outline:2px solid var(--skin-text);outline-offset:3px;box-shadow:0 0 0 3px var(--bg)}
html.native-skin #tape-panel .art-control>span:not(.radio-state){display:block;order:1}
html.native-skin #tape-panel .art-control>svg{display:block;flex:none;order:2;width:calc(var(--panel-unit)*5.7);height:calc(var(--panel-unit)*5.7)}
html.native-skin #tape-panel.panel-artwork #record{background:#ac3f31;color:#fff0d6}
html.native-skin #tape-panel.panel-artwork #stop{background:#7298a9;color:#152c38}
html.native-skin #tape-panel.panel-artwork :is(#play,#forward){background:#a9b687;color:#243222}
html.native-skin #tape-panel .record-key svg{color:inherit}
html.native-skin #tape-panel.panel-artwork #add-own{border:0;background:transparent;box-shadow:none;color:var(--ink);text-transform:none;font-size:calc(var(--panel-unit)*4);font-weight:400;line-height:1}
html.native-skin #tape-panel.panel-artwork #add-own:hover{text-decoration:underline;text-underline-offset:3px}
html.native-skin #tape-panel .cutup-controls .art-control>svg{display:none}
html.native-skin #tape-panel.panel-artwork .cutup-controls button.art-control{font-size:calc(var(--panel-unit)*3.6);gap:0;padding:calc(var(--panel-unit)*.6)}
html.native-skin #tape-panel .art-control>.radio-state{bottom:-23%;color:var(--ink);font-family:inherit;font-size:calc(var(--panel-unit)*2.5);font-weight:400}
html.native-skin #tape-panel.panel-artwork button.loop-button{flex-direction:row;font-size:calc(var(--panel-unit)*3.25);font-weight:400;gap:calc(var(--panel-unit)*1.5);border:0;background:transparent;color:var(--ink);box-shadow:none;text-transform:none}
html.native-skin #tape-panel .loop-button>svg{display:none}
html.native-skin #tape-panel .loop-button::after{position:static;display:block;flex:none;width:calc(var(--panel-unit)*3.5)!important;height:calc(var(--panel-unit)*3.5);border:1px solid var(--line);background:transparent;box-shadow:none}
html.native-skin #tape-panel .loop-button[aria-pressed=true]::after{background:var(--skin-accent);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--paper)}
html.native-skin #tape-panel .speed-control{left:8%;width:82%}
html.native-skin #tape-panel .speed-heading{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:calc(var(--panel-unit)*3.4)}
html.native-skin #tape-panel #speed-value{font-size:inherit;font-variant-numeric:tabular-nums}
html.native-skin #tape-panel #speed::-webkit-slider-runnable-track{height:3px;background:var(--ink)}
html.native-skin #tape-panel #speed::-moz-range-track{height:3px;background:var(--ink)}
html.native-skin #tape-panel #speed::-webkit-slider-thumb{width:calc(var(--panel-unit)*5.8);height:calc(var(--panel-unit)*9);margin-top:calc(1.5px - var(--panel-unit)*4.5);border:2px solid var(--ink);background:var(--skin-accent);box-shadow:var(--skin-shadow)}
html.native-skin #tape-panel #speed::-moz-range-thumb{width:calc(var(--panel-unit)*5.8);height:calc(var(--panel-unit)*9);border:2px solid var(--ink);background:var(--skin-accent);box-shadow:var(--skin-shadow)}
html.native-skin #tape-panel .input-routing label{position:absolute;right:calc(100% + var(--panel-unit)*3);top:0;height:100%;display:flex;align-items:center;font-size:calc(var(--panel-unit)*4)}
html.native-skin #tape-panel #input-route{padding:0 calc(var(--panel-unit)*2);border:1px solid var(--line);background:var(--skin-key);color:var(--skin-key-ink);font-family:inherit;font-weight:400;font-size:calc(var(--panel-unit)*3.8);line-height:1;appearance:auto;-webkit-appearance:auto}
html.native-skin #tape-panel #input-route option{background:var(--skin-key);color:var(--skin-key-ink)}
html.native-skin #tape-panel.panel-artwork .export-controls button.art-control{flex-direction:row;font-size:calc(var(--panel-unit)*3.8);font-weight:400;text-transform:none;background:transparent;color:var(--ink);border:0;box-shadow:none;gap:calc(var(--panel-unit)*1.5)}
html.native-skin #tape-panel.panel-artwork .export-controls #destroy-tape{font-size:calc(var(--panel-unit)*3.5)}
html.native-skin #tape-panel .export-controls .art-control>svg{order:0;width:calc(var(--panel-unit)*5);height:calc(var(--panel-unit)*6)}
html.native-skin :is(.margin-status,.margin-tools){background:var(--bg)}
html.native-skin :is(.skin-picker,.margin-recordings,.margin-output,.margin-tools .import-count,.margin-tools #own-count,.margin-tools #own-list button,.margin-tools #info,.margin-recordings #status,.margin-output #input-message,.margin-output #export-note,.margin-status #status,.margin-status #input-message,.margin-status #export-note){color:var(--skin-text);font-family:inherit}
html.native-skin :is(.skin-picker select,.margin-tools .save-direction select){background:var(--skin-key);color:var(--skin-key-ink);border-color:var(--line)}
html.native-skin :is(.notice,dialog){background:var(--paper);color:var(--ink);font-family:inherit;border-color:var(--line)}
html.native-skin dialog .action-button{background:var(--skin-key);color:var(--skin-key-ink);border-color:var(--line);font-family:inherit}
html.native-skin dialog a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
html.native-skin :is(button,input,select,a):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html.native-skin :is(.margin-tools,.skin-picker) :is(button,input,select,a):focus-visible{outline-color:var(--skin-text)}
html[data-skin=seventies] #tape-panel.panel-artwork{border-left:calc(var(--panel-unit)*1.6) solid #583e29;border-right:calc(var(--panel-unit)*1.6) solid #583e29}
html[data-skin=seventies] #tape-panel h1{font-family:Equipment,Arial,sans-serif;letter-spacing:.055em;border-bottom:1px solid var(--line);justify-content:flex-start;font-size:calc(var(--panel-unit)*8.9)}
html[data-skin=eightbit] .deck{image-rendering:pixelated}
html[data-skin=eightbit] #tape-panel.panel-artwork{border:3px solid #f7dda0}
html[data-skin=eightbit] #tape-panel h1{font-family:TapePixel,'Courier New',monospace;font-size:calc(var(--panel-unit)*8.6);letter-spacing:0;color:#63e6be;text-shadow:calc(var(--panel-unit)*.8) calc(var(--panel-unit)*.8) 0 #0a1022}
html[data-skin=eightbit] #tape-panel .vu-wrap{background:#151c35;border:2px solid #61708e}
html[data-skin=eightbit] #tape-panel.panel-artwork button.art-control{border-radius:0;border-width:2px}
html[data-skin=eightbit] #tape-panel.panel-artwork #record{background:#ff775f;color:#151c35}
html[data-skin=eightbit] #tape-panel.panel-artwork #stop{background:#f7dda0;color:#151c35}
html[data-skin=eightbit] #tape-panel.panel-artwork :is(#play,#forward){background:#63e6be;color:#151c35}
html[data-skin=eightbit] #tape-panel.panel-artwork button.art-control:is(.active,.pressed-flash,[aria-pressed=true]){box-shadow:inset 0 0 0 3px #151c35,3px 3px 0 #63e6be;outline:1px solid #63e6be}
html[data-skin=eightbit] #tape-panel :is(.counter,#speed-value){font-weight:700}
html[data-skin=modern] #tape-panel.panel-artwork{border:0;border-radius:5px;box-shadow:none}
html[data-skin=modern] #tape-panel h1{justify-content:flex-start;font-size:calc(var(--panel-unit)*8.4);font-weight:400;letter-spacing:-.04em}
html[data-skin=modern] #tape-panel .vu-wrap{background:#17201d;border:0;border-radius:2px}
html[data-skin=modern] #tape-panel.panel-artwork button.art-control{border:0;border-radius:3px;box-shadow:none;font-weight:400}
html[data-skin=modern] #tape-panel.panel-artwork :is(#record,#stop,#play,#forward){background:#d4dcd6;color:#17201d}
html[data-skin=modern] #tape-panel.panel-artwork #record svg{color:#a3332d}
html[data-skin=modern] #tape-panel.panel-artwork button.art-control:is(.active,.pressed-flash,[aria-pressed=true]){background:#d7f56b;color:#17201d;box-shadow:inset 0 0 0 1px #17201d}
html[data-skin=modern] #tape-panel.panel-artwork :is(#record,#stop,#play,#forward):is(.active,.pressed-flash,[aria-pressed=true]){background:#d7f56b;color:#17201d;box-shadow:inset 0 0 0 1px #17201d}
html[data-skin=modern] #tape-panel .counter{padding-top:calc(var(--panel-unit)*1)}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
  html.native-skin #tape-panel.panel-artwork{border:0;box-shadow:none}
  html.native-skin #tape-panel.panel-artwork :is(.panel-upper,.panel-lower){background:var(--paper);border:1px solid var(--skin-edge);box-shadow:var(--skin-shadow)}
  html.native-skin #tape-panel h1{top:9.6%;height:14%}
  html[data-skin=eightbit] #tape-panel.panel-artwork :is(.panel-upper,.panel-lower){border:2px solid #f7dda0}
  html[data-skin=modern] #tape-panel.panel-artwork :is(.panel-upper,.panel-lower){border:0;border-radius:5px}
}
/* The live tape packs are functional overlays on the original reel artwork.
   Reel frames retain their diameter; only the wound tape radius changes. */
.reel{z-index:3}
.reel-left{--pack-radius:var(--left-pack-radius,93%);transform:rotate(var(--left-reel-angle,0deg))}
.reel-right{--pack-radius:var(--right-pack-radius,31%);transform:rotate(var(--right-reel-angle,0deg))}
.reel::after{content:'';position:absolute;inset:0;border-radius:inherit;background-repeat:inherit;background-size:inherit;background-position:inherit;background-image:var(--empty-reel-art);-webkit-mask-image:radial-gradient(circle closest-side at center,transparent 0 var(--pack-radius),#000 calc(var(--pack-radius) + .2%) 100%);mask-image:radial-gradient(circle closest-side at center,transparent 0 var(--pack-radius),#000 calc(var(--pack-radius) + .2%) 100%)}
:root{--empty-reel-art:url('/tapeepat/collage-wide-empty.png')}
:root[data-skin=seventies]{--empty-reel-art:url('/tapeepat/deck-empty-reels.png')}
:root[data-skin=eightbit]{--empty-reel-art:url('/tapeepat/deck-8bit-empty-reels.png')}
:root[data-skin=modern]{--empty-reel-art:url('/tapeepat/deck-modern-empty-reels.png')}
.tape-loop{display:none;position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;overflow:visible;stroke-linecap:round;stroke-linejoin:round;fill:none}
.tape-is-looping .tape-loop{display:block}
.tape-loop .loop-shadow{stroke:#15100bb3;stroke-width:13;transform:translateY(3px)}
.tape-loop .loop-tape{stroke:#593c26;stroke-width:8}
html[data-skin=eightbit] .tape-loop{shape-rendering:crispEdges;stroke-linecap:square}
html[data-skin=eightbit] .tape-loop .loop-tape{stroke:#17233e;stroke-width:12}
html[data-skin=modern] .tape-loop .loop-tape{stroke:#bedb30;stroke-width:10}
@media(prefers-reduced-motion:reduce){.reel-left,.reel-right{transform:none;will-change:auto}}
/* Give the live meters more of the console, taking up the unused lower space. */
html.native-skin #tape-panel .meter-panel{left:4.5%;top:13.8%;width:91%;height:18%}
html.native-skin #tape-panel .meter-bank{gap:4%}
html.native-skin #tape-panel .tape-progress{top:35.5%}
html.native-skin #tape-panel .transport{top:36.8%}
html.native-skin #tape-panel .input-buttons{top:50.57%}
html.native-skin #tape-panel .cutup-controls{top:56.14%}
html.native-skin #tape-panel .playback-options{top:64.34%}
html.native-skin #tape-panel .speed-control{top:70.59%}
html.native-skin #tape-panel .input-routing{top:80.75%}
html.native-skin #tape-panel .export-controls{top:88.37%}
/* Enlarge the existing printed faces without repainting the paper console. */
html:not(.native-skin) #tape-panel .meter-panel{left:4.4%;top:13.7%;width:91%;height:14.5%}
html:not(.native-skin) #tape-panel .meter-bank{gap:3%}
html:not(.native-skin) #tape-panel .vu-wrap{position:relative;background:url('/tapeepat/collage-slotted.png') 81.5454% 16.5909% / 756.6502% 711.1111% no-repeat}
html:not(.native-skin) #tape-panel #vu-right-wrap{background-position:97.5994% 16.5909%}
html:not(.native-skin) #tape-panel .vu-wrap canvas{position:absolute;left:5.5%;top:9.7%;width:89%;height:82.6%}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
  html.native-skin #tape-panel .meter-panel{top:26%;height:31%}
  html.native-skin #tape-panel .tape-progress{top:63.5%}
  html.native-skin #tape-panel .transport{top:66.5%}
  html.native-skin #tape-panel .input-buttons{top:91.3%;height:8.7%}
  html.native-skin #tape-panel .cutup-controls{top:1.95312%}
  html.native-skin #tape-panel .playback-options{top:18.35938%}
  html.native-skin #tape-panel .speed-control{top:30.85938%}
  html.native-skin #tape-panel .input-routing{top:51.17188%}
  html.native-skin #tape-panel .export-controls{top:66.40626%}
  html:not(.native-skin) #tape-panel .meter-panel{top:27.4%;height:29%}
}
/* Import is an explicit action, with the same physical-key treatment. */
html.native-skin #tape-panel.panel-artwork #add-own{border:1px solid var(--skin-edge);background:var(--skin-key);box-shadow:var(--skin-shadow);color:var(--skin-key-ink);font-size:calc(var(--panel-unit)*3.8);font-weight:700;line-height:1.15;text-decoration:none}
html[data-skin=eightbit] #tape-panel.panel-artwork #add-own{background:#ff775f;color:#151c35;border-width:2px}
html:not(.native-skin) #tape-panel.panel-artwork #add-own{display:flex;align-items:center;justify-content:center;border:1px solid #604a36;background:#823c30 url('/tapeepat/paper.webp');background-blend-mode:multiply;background-size:420px auto;color:#f2e3c5;box-shadow:0 2px 1px #271c1955;font-family:TapePaper,Georgia,serif;font-size:calc(var(--panel-unit)*3.8);font-weight:700;line-height:1.15}
html:not(.native-skin) #tape-panel #add-own>span{position:static!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important}
#tape-panel.panel-artwork #add-own:not(:disabled):hover{filter:brightness(1.08)}

.tape-loop{stroke-linecap:butt}
.tape-loop .loop-shadow{stroke:#15100b45;stroke-width:8;transform:translateY(1px)}
.tape-loop .loop-tape{stroke:#402b1d;stroke-width:6}
/* Seat the 8-bit return one artwork pixel step into the tape pack. */
html[data-skin=eightbit] .tape-loop .loop-tape{transform:none}
html[data-skin=eightbit] .tape-loop .loop-shadow{transform:translateY(1px)}
/* Three latching keys, rather than checkbox-style transport options. */
#tape-panel .playback-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:3%;left:4.5%;width:91%}
html #tape-panel.panel-artwork .playback-options button.art-control.loop-button{display:flex;align-items:center;justify-content:center;flex-direction:row;padding:4px;border:1px solid var(--skin-edge,#665b46);border-radius:1px;background:var(--skin-key,#dbccb0);color:var(--skin-key-ink,#302b24);box-shadow:var(--skin-shadow,0 2px 2px #38271755);font-family:inherit;font-size:calc(var(--panel-unit)*2.85);font-weight:700;line-height:1.15;text-transform:uppercase;letter-spacing:0}
html #tape-panel .playback-options .loop-button::after{display:none}
html #tape-panel.panel-artwork .playback-options button.art-control.loop-button[aria-pressed=true]{background:var(--skin-accent,#823c30);color:#17251d;box-shadow:inset 0 2px 3px #0005}
html #tape-panel.panel-artwork .playback-options button.art-control.loop-button:disabled{opacity:.48}
html:not(.native-skin) #tape-panel .playback-options{background:#dacbb0 url('/tapeepat/paper.webp') center/420px auto}
html:not(.native-skin) #tape-panel.panel-artwork .playback-options button.art-control.loop-button[aria-pressed=true]{color:#fff0d5}
/* Brushed aluminium, walnut cheeks and moulded keys from the silver deck. */
html[data-skin=seventies] #tape-panel.panel-artwork{background:repeating-linear-gradient(0deg,#fff0 0 1px,#413d3210 1px 2px,#fff2 2px 3px),linear-gradient(105deg,#9d9d93 0%,#dfded3 14%,#c4c3b8 46%,#e4e1d6 77%,#9c9b90 100%);border-color:#413d32;box-shadow:inset 0 0 0 3px #deddd1,inset 0 0 12px #28231b88}
html[data-skin=seventies] #tape-panel::before,html[data-skin=seventies] #tape-panel::after{content:'';position:absolute;top:0;bottom:0;width:2.1%;background:#68432a url('/tapeepat/deck.png') left top/auto 100%;box-shadow:inset 1px 0 2px #f3c88b66,1px 0 3px #21170fcc;pointer-events:none}
html[data-skin=seventies] #tape-panel::before{left:0}
html[data-skin=seventies] #tape-panel::after{right:0;transform:scaleX(-1)}
html[data-skin=seventies] #tape-panel h1{letter-spacing:.12em;font-size:calc(var(--panel-unit)*8.4);text-shadow:0 1px 0 #fff9;color:#272820}
html[data-skin=seventies] #tape-panel .vu-wrap{border:calc(var(--panel-unit)*.85) solid #33322c;border-radius:5px;background:radial-gradient(ellipse at 50% 120%,#fff0b4,#e8c886 85%);box-shadow:0 2px 2px #fff6,inset 0 4px 7px #5c3c2155}
html[data-skin=seventies] #tape-panel .counter{border-bottom:1px solid #6d6a5e;padding-bottom:calc(var(--panel-unit)*1.4);text-shadow:0 1px #fff6}
html[data-skin=seventies] #tape-panel.panel-artwork button.art-control:is(.transport-key,.loop-button,.plain-option){--key-top:#e9e0ca;--key-bottom:#b4a990;border:1px solid #696354;border-radius:3px;background:linear-gradient(var(--key-top) 0 72%,var(--key-bottom) 73% 100%);color:#292a24;box-shadow:0 3px 3px #30291a88,inset 0 1px 1px #fff9,inset 1px 0 1px #fff5;text-shadow:0 1px #fff5}
html[data-skin=seventies] #tape-panel.panel-artwork #record{--key-top:#b5523e;--key-bottom:#833b2c;color:#fff0d2;text-shadow:0 1px #552a1b}
html[data-skin=seventies] #tape-panel.panel-artwork #stop{--key-top:#a5b5b6;--key-bottom:#728787}
html[data-skin=seventies] #tape-panel.panel-artwork :is(#play,#forward){--key-top:#b6bb98;--key-bottom:#8b9472}
html[data-skin=seventies] #tape-panel.panel-artwork .playback-options button.art-control.loop-button{background:linear-gradient(#e9e0ca 0 72%,#b4a990 73% 100%);box-shadow:0 3px 3px #30291a88,inset 0 1px 1px #fff9;font-size:calc(var(--panel-unit)*2.95)}
html[data-skin=seventies] #tape-panel.panel-artwork button.art-control:is(.transport-key,.loop-button,.plain-option)[aria-pressed=true],html[data-skin=seventies] #tape-panel.panel-artwork .playback-options button.art-control.loop-button[aria-pressed=true]{background:linear-gradient(#c7933e,#e6ba62);box-shadow:inset 0 2px 4px #64482388,0 1px 1px #fff6;color:#29271e}
html[data-skin=seventies] #tape-panel #speed::-webkit-slider-thumb{background:linear-gradient(90deg,#716d60,#d8d4c5 25%,#f1eddf 46%,#4c493e 47% 53%,#c8c3b3 54%,#8a8372);border:1px solid #514b3e;border-radius:3px;box-shadow:1px 3px 3px #28231c88}
html[data-skin=seventies] #tape-panel #speed::-moz-range-thumb{background:linear-gradient(90deg,#716d60,#d8d4c5 25%,#f1eddf 46%,#4c493e 47% 53%,#c8c3b3 54%,#8a8372);border:1px solid #514b3e;border-radius:3px;box-shadow:1px 3px 3px #28231c88}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){html[data-skin=seventies] #tape-panel::before,html[data-skin=seventies] #tape-panel::after{display:none}html[data-skin=seventies] #tape-panel.panel-artwork :is(.panel-upper,.panel-lower){background:repeating-linear-gradient(0deg,#fff0 0 1px,#413d3210 1px 2px),linear-gradient(105deg,#c4c3b8,#e4e1d6,#b4b3a8)}}
html.native-skin #tape-panel h1,html[data-skin=seventies] #tape-panel h1,html[data-skin=modern] #tape-panel h1{left:4.5%;right:4.5%;justify-content:center;text-align:center}

/* Both outputs live beneath the mechanism; the console retains only Destroy. */
.save-buttons{display:flex;flex-direction:column;align-self:flex-end;gap:8px}
.save-buttons .video-save-button{width:100%;text-transform:uppercase;font-weight:700;letter-spacing:.02em}
#tape-panel .export-controls{display:flex;justify-content:center}
#tape-panel.panel-artwork .export-controls #destroy-tape{width:42%;height:72%;align-self:center}
/* One strip colour follows each skin, from wound pack to heads and return. */
.tape-loop{display:block}
.tape-loop .loop-return{display:none}
.tape-is-looping .tape-loop .loop-return{display:block}
.tape-loop .thread-tape{stroke:#563621;stroke-width:8}
html[data-skin=modern] .tape-loop .thread-tape{stroke:#bedb30;stroke-width:10}
html[data-skin=eightbit] .tape-loop .thread-tape{stroke:#17233e;stroke-width:12}
/* Handmade paper: photographed cutouts, plain printed labels and live controls. */
:root[data-skin=collage]{--bg:#292928;--paper:#ece2cd;--ink:#292923;--text:#292923;--muted:#605a4e;--line:#928571;--skin-text:#e8dfcc;--skin-accent:#625849;--skin-key:#efe5d0;--skin-key-ink:#292923;--skin-edge:#a79a80;--skin-shadow:0 2px 3px #32241435;--deck-art:url('/tapeepat/collage-wide.png');font-family:TapePaper,Georgia,serif}
html[data-skin=collage] .deck{aspect-ratio:1536/1024}
html[data-skin=collage] .deck>img{width:100%;height:100%;object-fit:contain}
html[data-skin=collage] .reel{background-image:var(--deck-art)}
html[data-skin=collage] .reel-left{left:6.18489583%;top:4.49218750%;width:41.92708333%;background-size:238.50931677% auto;background-position:10.65022422% 12.10526316%}
html[data-skin=collage] .reel-right{left:52.40885417%;top:5.56640625%;width:42.31770833%;background-size:236.30769231% auto;background-position:90.85778781% 15.24064171%}
html[data-skin=collage] #tape-panel.panel-artwork{background:#ece2cd url('/tapeepat/collage-handmade.png') right top/324.050633% auto no-repeat;border:0;box-shadow:none}
html[data-skin=collage] #tape-panel h1{font-family:Equipment,Arial,sans-serif;top:4.5%;height:7.5%;font-size:calc(var(--panel-unit)*9);font-weight:700;letter-spacing:.06em;background:#f5efdf;box-shadow:1px 2px 3px #55432733;transform:rotate(-.6deg)}
html[data-skin=collage] #tape-panel .vu-wrap{border:1px solid #716958;background:#f5efdf;box-shadow:1px 2px 3px #55432740}
html[data-skin=collage] #tape-panel .vu-wrap:first-child{transform:rotate(-.5deg)}
html[data-skin=collage] #tape-panel .vu-wrap:last-child{transform:rotate(.4deg)}
html[data-skin=collage] #tape-panel.panel-artwork button.art-control{font-family:Equipment,Arial,sans-serif;font-weight:700;border:0;border-radius:0;background:#eee5d2 url('/tapeepat/paper.webp') center/420px auto;background-blend-mode:soft-light;box-shadow:1px 2px 3px #55432745;color:#292923}
html[data-skin=collage] #tape-panel.panel-artwork #record{background-color:#524b43;color:#fff5e4;transform:rotate(-.5deg)}
html[data-skin=collage] #tape-panel.panel-artwork #stop{background-color:#e9dfc8;color:#292923;transform:rotate(.6deg)}
html[data-skin=collage] #tape-panel.panel-artwork :is(#play,#forward){background-color:#625d52;color:#fff5e4}
html[data-skin=collage] #tape-panel.panel-artwork #add-own{background:#f5efdf;border:1px solid #a99a80;color:#292923;font-family:Equipment,Arial,sans-serif;font-weight:700}
html[data-skin=collage] #tape-panel.panel-artwork .playback-options button.art-control.loop-button{font-family:Equipment,Arial,sans-serif;background:#efe5d0;color:#292923}
html[data-skin=collage] #tape-panel.panel-artwork button.art-control:is([aria-pressed=true],.active),html[data-skin=collage] #tape-panel.panel-artwork .playback-options button.art-control.loop-button[aria-pressed=true]{background:#625849;color:#fff5e4;box-shadow:inset 0 1px 2px #2b160e55}
html[data-skin=collage] #tape-panel .speed-control{border:0}
html[data-skin=collage] #tape-panel #speed::-webkit-slider-thumb{background:#625849;border:1px solid #423b31}
html[data-skin=collage] #tape-panel #speed::-moz-range-thumb{background:#625849;border:1px solid #423b31}
html[data-skin=collage] #tape-panel #input-route{background:#f5efdf;border:1px solid #a99a80}
html[data-skin=collage] #tape-panel.panel-artwork .export-controls #destroy-tape{background:transparent;box-shadow:none;border:0;color:#62372d}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
 html[data-skin=collage] #tape-panel.panel-artwork{background:none}
 html[data-skin=collage] #tape-panel.panel-artwork :is(.panel-upper,.panel-lower){background:#ece2cd url('/tapeepat/collage-handmade.png') right top/324.050633% auto no-repeat;border:0;box-shadow:none}
 html[data-skin=collage] #tape-panel h1{top:9%;height:15%}
}

/* EJM 180, side B: the shell is fixed; only the visible toothed hubs turn. */
:root[data-skin=cassette]{--bg:#191b1b;--paper:#c9c7bc;--ink:#242726;--text:#242726;--muted:#575a56;--line:#82867d;--skin-text:#eee7d7;--skin-accent:#c24939;--skin-key:#dfded2;--skin-key-ink:#242726;--skin-edge:#5e625c;--skin-shadow:0 2px 3px #070a0960,inset 0 1px 0 #fff6;--deck-art:url('/tapeepat/cassette-ejm-180-b.png');--empty-reel-art:url('/tapeepat/cassette-ejm-180-b-empty.png');font-family:Equipment,Arial,sans-serif}
html[data-skin=cassette] .reel{transform:none;will-change:auto;background-image:var(--deck-art)}
html[data-skin=cassette] .reel-left{left:9.830729%;top:20.410156%;width:36.588542%;background-size:273.309609% auto;background-position:15.50308% 45.238095%;--hub-angle:var(--left-reel-angle,0deg)}
html[data-skin=cassette] .reel-right{left:53.971354%;top:20.898438%;width:35.9375%;background-size:278.26087% auto;background-position:84.247967% 45.338983%;--hub-angle:var(--right-reel-angle,0deg)}
html[data-skin=cassette] .reel::before{content:'';position:absolute;inset:0;background:inherit;clip-path:circle(15.65% at center);transform:rotate(var(--hub-angle));will-change:transform}
html[data-skin=cassette] .tape-loop{display:none}
html[data-skin=cassette] #tape-panel.panel-artwork{background:#c9c7bc;border:1px solid #555b57;border-radius:3px;box-shadow:inset 0 1px 2px #fff7}
html[data-skin=cassette] #tape-panel h1{font-family:Equipment,Arial,sans-serif;font-weight:700;letter-spacing:.025em;border-bottom:calc(var(--panel-unit)*.8) solid #b7372f;box-shadow:0 calc(var(--panel-unit)*1.4) 0 #2f586d}
html[data-skin=cassette] #tape-panel .vu-wrap{border:calc(var(--panel-unit)*.7) solid #252b29;background:#eee4c8;border-radius:2px}
html[data-skin=cassette] #tape-panel.panel-artwork button.art-control{border-radius:2px;font-family:Equipment,Arial,sans-serif}
html[data-skin=cassette] #tape-panel.panel-artwork :is(#stop,#play,#forward){background:#dadad0;color:#242726}
html[data-skin=cassette] #tape-panel.panel-artwork #record{background:#ab3d31;color:#fff4de}
html[data-skin=cassette] #tape-panel.panel-artwork .playback-options button.art-control[aria-pressed=true]{background:#a9362c;color:#fff4de}
@media(prefers-reduced-motion:reduce){html[data-skin=cassette] .reel::before{transform:none;will-change:auto}}

.skin-sound{display:block;font-size:13px;line-height:1.3;opacity:.85;margin-top:5px}

/* Lower contact dissolves inside the pack; no flat brown cap on its edge. */
.tape-loop #thread-left{stroke:url(#thread-contact-left)}
.tape-loop #thread-right{stroke:url(#thread-contact-right)}
.tape-loop .thread-contact stop{stop-color:#563621}
html[data-skin=modern] .tape-loop .thread-contact stop{stop-color:#bedb30}
html[data-skin=eightbit] .tape-loop .thread-contact stop{stop-color:#17233e}

/* Smooth photographed guide faces move with the tape, including reverse. */
html[data-skin=collage] .tape-guide{display:block;position:absolute;aspect-ratio:1;border-radius:50%;background-image:var(--deck-art);background-repeat:no-repeat;pointer-events:none}
html[data-skin=collage] .guide-small{--guide-angle:var(--guide-small-angle,0deg)}
html[data-skin=collage] .guide-large{--guide-angle:var(--guide-large-angle,0deg)}
html[data-skin=collage] .tape-guide::before{content:'';position:absolute;inset:0;border-radius:inherit;background:inherit;transform:rotate(var(--guide-angle));will-change:transform}
html[data-skin=collage] .tape-loop .thread-tape{stroke-width:12}
@media(prefers-reduced-motion:reduce){html[data-skin=collage] .tape-guide::before{transform:none;will-change:auto}}
html[data-skin=collage] .guide-small-left{left:10.54687500%;top:66.11328125%;width:4.55729167%;background-size:2194.28571429% auto;background-position:11.05047749% 70.96436059%}
html[data-skin=collage] .guide-small-right{left:84.83072917%;top:66.11328125%;width:4.55729167%;background-size:2194.28571429% auto;background-position:88.88130969% 70.96436059%}
html[data-skin=collage] .guide-large-left{left:19.01041667%;top:72.55859375%;width:8.07291667%;background-size:1238.70967742% auto;background-position:20.67988669% 82.55555556%}
html[data-skin=collage] .guide-large-right{left:72.07031250%;top:72.65625000%;width:8.07291667%;background-size:1238.70967742% auto;background-position:78.39943343% 82.66666667%}

/* Endless loop: one continuous strip runs directly around the bare hubs. */
.tape-is-looping .tape-loop .loop-tape{stroke:#563621;stroke-width:8}
html[data-skin=collage] .tape-is-looping .tape-loop .loop-tape{stroke-width:12}
html[data-skin=eightbit] .tape-is-looping .tape-loop .loop-tape{stroke:#17233e;stroke-width:12}
html[data-skin=modern] .tape-is-looping .tape-loop .loop-tape{stroke:#bedb30;stroke-width:10}

/* Real torn-paper swatches; the neutral deck keeps its coloured paper keys. */
html[data-skin=collage] #tape-panel.panel-artwork button.art-control:not(#destroy-tape){background:transparent url('/tapeepat/torn-paper-buttons.png') var(--paper-position,0% 0%)/200% 200% no-repeat;border:0;border-radius:0;box-shadow:none;color:var(--paper-ink,#fff5e4);filter:drop-shadow(1px 2px 1px #55432740);padding:6px 9px;text-shadow:none}
html[data-skin=collage] #tape-panel #record{--paper-position:0% 0%;transform:rotate(-1.1deg)}
html[data-skin=collage] #tape-panel #stop{--paper-position:100% 0%;transform:rotate(.7deg)}
html[data-skin=collage] #tape-panel #play{--paper-position:0% 100%;--paper-ink:#292923;transform:rotate(-.6deg)}
html[data-skin=collage] #tape-panel #forward{--paper-position:100% 100%;--paper-ink:#24291c;transform:rotate(.8deg)}
html[data-skin=collage] #tape-panel #add-own{--paper-position:0% 100%;--paper-ink:#292923;transform:rotate(-.25deg)}
html[data-skin=collage] #tape-panel #cutup{--paper-position:0% 0%;transform:rotate(-.6deg)}
html[data-skin=collage] #tape-panel #add-radio{--paper-position:100% 0%;transform:rotate(.6deg)}
html[data-skin=collage] #tape-panel #add-field{--paper-position:100% 100%;--paper-ink:#24291c;transform:rotate(-.5deg)}
html[data-skin=collage] #tape-panel #loop{--paper-position:0% 100%;--paper-ink:#292923;transform:rotate(.7deg)}
html[data-skin=collage] #tape-panel #chew{--paper-position:0% 0%;transform:rotate(-.8deg)}
html[data-skin=collage] #tape-panel #random-speed{--paper-position:100% 0%;transform:rotate(.6deg)}
html[data-skin=collage] #tape-panel.panel-artwork button.art-control:not(#destroy-tape):is([aria-pressed=true],.active){filter:brightness(.77) saturate(1.2) drop-shadow(0 1px 1px #32241455);text-decoration:underline;text-underline-offset:3px}
html[data-skin=collage] #tape-panel.panel-artwork button.art-control:not(#destroy-tape):not(:disabled):hover{filter:brightness(1.08) drop-shadow(1px 2px 1px #55432740)}

html[data-skin=collage] .save-buttons button,html[data-skin=collage] #tape-panel.panel-artwork .export-controls #destroy-tape{background:transparent url('/tapeepat/torn-paper-buttons.png') 100% 0%/200% 200% no-repeat;border:0;box-shadow:none;color:#fff5e4;filter:drop-shadow(1px 2px 1px #55432740);padding:10px 14px}
html[data-skin=collage] .save-buttons #save-video{background-position:0% 100%;color:#292923}

/* Cassette: photographed walnut, aluminium and plastic piano keys. */
html[data-skin=cassette] #tape-panel.panel-artwork{background:#c3c2b9 url('/tapeepat/cassette-console.png') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
html[data-skin=cassette] #tape-panel h1{left:10%;right:10%;top:4.4%;height:6.7%;background:linear-gradient(110deg,#d7d6ca,#eae6da,#bcbdb5);border:1px solid #3c3e37;border-radius:1px;box-shadow:0 2px 3px #08090799,inset 0 1px 0 #fff7;font-size:calc(var(--panel-unit)*7.7);letter-spacing:.07em;color:#232720}
html[data-skin=cassette] #tape-panel h1{left:8%;right:8%;top:2.8%;height:11%;color:transparent;text-shadow:none;border:0;border-radius:0;box-shadow:none;background:transparent url('/tapeepat/cassette-moulded-title.png') center/108% auto no-repeat}
html[data-skin=cassette] #tape-panel .meter-panel{top:18.5%;height:11%;left:5%;width:90%}
html[data-skin=cassette] #tape-panel .meter-bank{position:relative;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:0;background:#10160f;border:3px solid #20221d;border-radius:3px;box-shadow:0 1px 1px #eeeddf,inset 0 2px 4px #0008;overflow:hidden}
html[data-skin=cassette] #tape-panel .meter-bank::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#eff8b807,transparent 34%,#ffffee05 75%,transparent);pointer-events:none}
html[data-skin=cassette] #tape-panel .vu-wrap{background:transparent;border:0;border-radius:0;box-shadow:none;min-height:0}
html[data-skin=cassette] #tape-panel .vu-wrap canvas{width:100%;height:100%}
html[data-skin=cassette] #tape-panel .counter{color:#272b23;font-family:Equipment,Arial,sans-serif}
html[data-skin=cassette] #tape-panel .transport{gap:1.3%}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape){background:transparent var(--key-art) var(--key-base-position)/var(--key-base-size) no-repeat;border:0;border-radius:2px;box-shadow:0 2px 2px #11130c66;color:var(--key-ink,#292b24);padding:8px 9px;transform:none;filter:none;isolation:isolate;--key-travel:0px;--key-scale:1}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape)::before{content:'';position:absolute;left:var(--cap-left);top:var(--cap-top);width:var(--cap-width);height:var(--cap-height);background:transparent var(--key-art) var(--cap-position)/var(--cap-size) no-repeat;border-radius:4%;transform:translateY(var(--key-travel)) scaleY(var(--key-scale));transform-origin:center bottom;transition:transform 80ms ease-out,filter 80ms ease-out,box-shadow 80ms ease-out;pointer-events:none;z-index:-1}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel button.art-control:not(#destroy-tape)>:is(span:not(.radio-state),svg){transform:translateY(var(--key-travel));transition:transform 80ms ease-out}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel .playback-options .key-label{max-width:78%;white-space:normal;line-height:1.05}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape):not(:disabled):is(:active,.pressed-flash,.active,[aria-pressed=true]){--key-travel:3px;--key-scale:.965;box-shadow:0 1px 1px #11130c55}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape):not(:disabled):is(:active,.pressed-flash,.active,[aria-pressed=true])::before{filter:brightness(.89);box-shadow:0 -3px 2px #0b0c08cc,inset 0 2px 2px #0004}
/* Keep the photographic surface intact while recording locks the controls.
   Explicit layers avoid negative pseudo-elements behind a native button. */
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape){appearance:none;-webkit-appearance:none;z-index:0}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape)::before{z-index:0}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel button.art-control:not(#destroy-tape)>:is(span:not(.radio-state),svg){position:relative;z-index:2}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape):disabled{opacity:1;cursor:default}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork button.art-control:not(#destroy-tape):disabled:not(.active)>:is(span:not(.radio-state),svg){opacity:.55}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork #record.art-control.active{--key-travel:3px;--key-scale:.965;box-shadow:0 1px 1px #11130c55}
html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel.panel-artwork #record.art-control.active::before{filter:brightness(.89);box-shadow:0 -3px 2px #0b0c08cc,inset 0 2px 2px #0004}
html[data-skin=cassette] #tape-panel #speed::-webkit-slider-thumb{background:repeating-linear-gradient(0deg,#373932 0 2px,#6e7064 2px 3px);border:1px solid #191c17;border-radius:2px;box-shadow:1px 2px 2px #16191166}
html[data-skin=cassette] #tape-panel #speed::-moz-range-thumb{background:repeating-linear-gradient(0deg,#373932 0 2px,#6e7064 2px 3px);border:1px solid #191c17;border-radius:2px;box-shadow:1px 2px 2px #16191166}
@media(prefers-reduced-motion:reduce){html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel button.art-control::before,html:is([data-skin=cassette],[data-skin=seventies],[data-skin=modern]) #tape-panel button.art-control>:is(span,svg){transition:none}}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
 html[data-skin=cassette] #tape-panel.panel-artwork{background:none}
 html[data-skin=cassette] #tape-panel.panel-artwork .panel-upper{background:#c3c2b9 url('/tapeepat/cassette-console.png') center top/100% 200% no-repeat}
 html[data-skin=cassette] #tape-panel.panel-artwork .panel-lower{background:#c3c2b9 url('/tapeepat/cassette-console.png') center bottom/100% 200% no-repeat}
 html[data-skin=cassette] #tape-panel h1{top:5.6%;height:22%}
 html[data-skin=cassette] #tape-panel .meter-panel{top:37%;height:22%}
}
html[data-skin=cassette] #tape-panel button.art-control{--key-base-position:78.9122137% 3.8112523%;--key-base-size:314.7540984% 216.4904863%;--cap-left:7.99180%;--cap-top:8.66808%;--cap-width:82.78689%;--cap-height:83.29810%;--cap-position:76.5017668% 9.8412698%;--cap-size:380.1980198% 259.8984772%;--key-ink:#292b24}
html[data-skin=cassette] #tape-panel #record{--key-base-position:21.1079274% 3.8112523%;--key-base-size:314.1104294% 216.4904863%;--cap-left:8.58896%;--cap-top:8.66808%;--cap-width:82.41309%;--cap-height:83.29810%;--cap-position:23.2127096% 9.8412698%;--cap-size:381.1414392% 259.8984772%;--key-ink:#fff1d6}
html[data-skin=cassette] #tape-panel #add-own{--key-base-position:15.5005382% 94.4540728%;--key-base-size:253.0477759% 229.0827740%;--cap-left:6.42504%;--cap-top:8.27740%;--cap-width:86.82043%;--cap-height:83.22148%;--cap-position:18.1367691% 89.2638037%;--cap-size:291.4611006% 275.2688172%;--key-ink:#292b24}

:root[data-skin=cassette]{--key-art:url('/tapeepat/cassette-keys.png')}
/* 1970s: the lower TC-850 panel's charcoal, aluminium and lit keys. */
:root[data-skin=seventies]{--paper:#20221f;--ink:#e3e6db;--text:#e3e6db;--muted:#b2b6aa;--line:#777d72;--skin-edge:#7f8578;--key-art:url('/tapeepat/seventies-keys.png')}
html[data-skin=seventies] #tape-panel.panel-artwork{background:#1f2221 url('/tapeepat/seventies-console.png') center/100% 100% no-repeat;border:0;box-shadow:none}
html[data-skin=seventies] #tape-panel::before,html[data-skin=seventies] #tape-panel::after{display:none}
html[data-skin=seventies] #tape-panel h1{color:#e4e7df;text-shadow:none;font-weight:700;letter-spacing:.12em}
html[data-skin=seventies] #tape-panel .vu-wrap{position:relative;border:calc(var(--panel-unit)*.9) solid #b6bbb3;border-radius:1px;box-shadow:0 1px 2px #000,inset 0 0 0 2px #34392f}
html[data-skin=seventies] #tape-panel .vu-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#ffffee12,transparent 45%,#ffffee08 75%,transparent);pointer-events:none}
html[data-skin=seventies] #tape-panel .counter{color:#e4e7df;text-shadow:none;border-bottom:0}
html[data-skin=seventies] #tape-panel .speed-heading{color:#e4e7df}
html[data-skin=seventies] #tape-panel .input-routing{color:#e4e7df}
html[data-skin=seventies] #tape-panel #input-route{background:#151916;color:#e4e7df;border:1px solid #92998b;box-shadow:inset 0 1px 2px #0007}
html[data-skin=seventies] #tape-panel #speed::-webkit-slider-runnable-track{background:#070a08;box-shadow:0 1px #9b9f94}
html[data-skin=seventies] #tape-panel #speed::-moz-range-track{background:#070a08;box-shadow:0 1px #9b9f94}
html[data-skin=seventies] #tape-panel .art-control>.radio-state{color:#d2d8cc}
html[data-skin=seventies] #tape-panel.panel-artwork button.art-control:not(#destroy-tape)::after{content:'';display:block;position:absolute;left:var(--cap-left);top:var(--cap-top);width:var(--cap-width);height:var(--cap-height);border-radius:5%;background:radial-gradient(ellipse at 50% 65%,var(--key-light,#fff4b9),transparent 78%);opacity:0;mix-blend-mode:screen;transform:translateY(var(--key-travel)) scaleY(var(--key-scale));transition:opacity 80ms ease-out;pointer-events:none;z-index:-1}
html[data-skin=seventies] #tape-panel.panel-artwork button.art-control:not(#destroy-tape):not(:disabled):is(:active,.pressed-flash,.active,[aria-pressed=true])::before{filter:brightness(1.18) saturate(1.15);box-shadow:0 -3px 2px #050705dd,0 0 7px var(--key-glow,#f5d67555)}
html[data-skin=seventies] #tape-panel.panel-artwork button.art-control:not(#destroy-tape):not(:disabled):is(:active,.pressed-flash,.active,[aria-pressed=true])::after{opacity:.58}
html[data-skin=seventies] #tape-panel.panel-artwork button.art-control:not(#destroy-tape)::after{z-index:1}
html[data-skin=seventies] #tape-panel.panel-artwork #record.art-control.active::before{filter:brightness(1.18) saturate(1.15);box-shadow:0 -3px 2px #050705dd,0 0 7px var(--key-glow,#f5d67555)}
html[data-skin=seventies] #tape-panel.panel-artwork #record.art-control.active::after{opacity:.58}
html[data-skin=seventies] #tape-panel.panel-artwork .export-controls #destroy-tape{color:#e4e7df;background:transparent;border:1px solid #8f9687;box-shadow:none}
@media(prefers-reduced-motion:reduce){html[data-skin=seventies] #tape-panel button.art-control::after{transition:none}}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
 html[data-skin=seventies] #tape-panel.panel-artwork{background:none}
 html[data-skin=seventies] #tape-panel.panel-artwork .panel-upper{background:#1f2221 url('/tapeepat/seventies-console.png') center top/100% 200% no-repeat}
 html[data-skin=seventies] #tape-panel.panel-artwork .panel-lower{background:#1f2221 url('/tapeepat/seventies-console.png') center bottom/100% 200% no-repeat}
}
html[data-skin=seventies] #tape-panel button.art-control{--key-base-position:6.2785388% 88.1516588%;--key-base-size:232.7272727% 261.8925831%;--cap-left:11.06061%;--cap-top:16.36829%;--cap-width:77.72727%;--cap-height:68.28645%;--cap-position:12.5122190% 82.1664465%;--cap-size:299.4152047% 383.5205993%;--key-ink:#242b23;--key-light:#fff4b9;--key-glow:#f5d67555}
html[data-skin=seventies] #tape-panel #record{--key-base-position:6.2785388% 12.3222749%;--key-base-size:232.7272727% 261.8925831%;--cap-left:11.06061%;--cap-top:15.60102%;--cap-width:77.72727%;--cap-height:68.03069%;--cap-position:12.5122190% 18.3377309%;--cap-size:299.4152047% 384.9624060%;--key-ink:#fff3df;--key-light:#ff8c60;--key-glow:#ff342a77}
html[data-skin=seventies] #tape-panel #stop{--key-base-position:93.5926773% 12.3222749%;--key-base-size:232.0241692% 261.8925831%;--cap-left:11.02719%;--cap-top:15.85678%;--cap-width:77.79456%;--cap-height:67.77494%;--cap-position:87.2673849% 18.4453228%;--cap-size:298.2524272% 386.4150943%;--key-ink:#f0f1df;--key-light:#c3d5e1;--key-glow:#c0d8e566}
html[data-skin=seventies] #tape-panel #forward{--key-base-position:93.6000000% 88.1329114%;--key-base-size:232.3751891% 261.2244898%;--cap-left:11.04387%;--cap-top:16.32653%;--cap-width:77.76097%;--cap-height:68.11224%;--cap-position:87.2798434% 82.0343461%;--cap-size:298.8326848% 383.5205993%;--key-ink:#efffe8;--key-light:#b0ffae;--key-glow:#40ee8377}

/* Modern: two real audio traces over photographic circular CRT glass. */
#oscilloscope{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.scope-label,.scope-state{display:none}
html[data-skin=modern] .scope-label{display:block;position:absolute;top:70.5%;width:40%;text-align:center;color:#263a2d;font:700 clamp(14px,1.15vw,20px)/1.2 Equipment,Arial,sans-serif;pointer-events:none}
html[data-skin=modern] .scope-label-left{left:5.3%}
html[data-skin=modern] .scope-label-right{left:54.5%}
html[data-skin=modern] .scope-label small{display:block;font:400 12px/1.35 monospace;margin-top:4px;color:#3a5040}
html[data-skin=modern] .scope-state{display:block;position:absolute;top:90%;left:0;width:100%;text-align:center;color:#3a5040;font:12px/1.2 monospace}
html[data-skin=modern] :is(.scope-label,.scope-state){display:none}

/* 1970s: rounded, expressive display lettering across the instrument. */
html[data-skin=seventies] :is(#tape-panel h1,#tape-panel button.art-control,#tape-panel label,#tape-panel select,.deck-support label,.deck-support button,.skin-picker){font-family:'Bookman Old Style','URW Bookman',Georgia,serif;font-weight:700;letter-spacing:-.035em}
html[data-skin=seventies] #tape-panel h1{font-style:italic;letter-spacing:-.065em}

/* Montage: each label is a separate piece of printed paper, kept inside its key. */
html[data-skin=collage] #tape-panel.panel-artwork button.art-control:not(#destroy-tape){overflow:hidden}
html[data-skin=collage] #tape-panel button.art-control>span:not(.radio-state),
html[data-skin=collage] #tape-panel .playback-options .key-label{display:inline-block;max-width:100%;width:max-content;margin:auto;padding:.09em .23em;background:#f4e5bf;color:#24231f;font-family:Georgia,serif;font-size:clamp(10px,1.1vw,17px);font-weight:900;font-style:normal;letter-spacing:-.04em;line-height:1.12;white-space:normal;overflow-wrap:normal;transform:rotate(-2deg);box-shadow:1px 2px 1px #211b1840}
html[data-skin=collage] #tape-panel .radio-state{display:inline-block;max-width:90%;padding:0 .25em;background:#eee0c8;color:#33291f;font-family:'Courier New',monospace;line-height:1.15}
html[data-skin=collage] #tape-panel h1{width:max-content;max-width:92%;padding:0 .2em;background:#f0d98e;color:#2a211a;font-family:'Courier New',monospace;font-weight:900;letter-spacing:-.06em;transform:rotate(-1deg)}
html[data-skin=collage] #tape-panel h1{left:50%;right:auto;transform:translateX(-50%) rotate(-.6deg);background:transparent;box-shadow:none;white-space:nowrap;padding:0}
html[data-skin=collage] :is(#tape-panel h1,#tape-panel button.art-control>span,.deck-support label,.deck-support .save-buttons button):has(.ransom-letter){background:transparent;color:inherit;box-shadow:none;transform:none;letter-spacing:normal;text-shadow:none}
html[data-skin=collage] #tape-panel h1:has(.ransom-letter){transform:translateX(-50%)}
html[data-skin=collage] .ransom-letter{display:inline-block;vertical-align:middle;min-width:.48em;margin:0 .012em;padding:.03em .025em;background:#f3e5c8;color:#29221c;font-family:Georgia,serif;font-weight:900;font-style:normal;line-height:1.05;text-align:center;letter-spacing:-.055em;transform:rotate(-4deg);box-shadow:1px 1px 1px #201a164d}
html[data-skin=collage] .ransom-letter:nth-child(5n+2){background:#242622;color:#f3e8d5;font-family:Arial,sans-serif;font-weight:700;font-style:normal;transform:rotate(4deg) translateY(-.03em)}
html[data-skin=collage] .ransom-letter:nth-child(5n+3){background:#d1b15e;color:#38271b;font-family:'Courier New',monospace;font-weight:700;transform:rotate(-2deg) translateY(.04em)}
html[data-skin=collage] .ransom-letter:nth-child(5n+4){background:#ced9ce;color:#243028;font-family:Georgia,serif;font-style:italic;transform:rotate(5deg)}
html[data-skin=collage] .ransom-letter:nth-child(5n){background:#813f35;color:#fff2d4;font-family:Arial,sans-serif;font-weight:900;transform:rotate(-5deg) translateY(.03em)}
html[data-skin=collage] #tape-panel h1 .ransom-letter{font-size:.94em;margin:0 .015em;padding:.03em .04em}
html[data-skin=collage] #tape-panel button.art-control>span:has(.ransom-letter){display:block;max-width:100%;white-space:normal;line-height:1.16;text-align:center}
html[data-skin=collage] .deck-support .save-buttons button:has(.ransom-letter){border:1px solid #a99a80}
html[data-skin=collage] :is(#tape-panel label,#tape-panel output,#tape-panel select,.deck-support label,.deck-support button,.skin-picker,.margin-recordings,.margin-status){font-family:Georgia,'Times New Roman',serif}
html[data-skin=collage] .deck-support :is(.save-buttons button,.skin-picker label,.margin-tools .save-direction label,.margin-tools .save-length label){background:#ece2c7;color:#28231d;padding:.12em .32em;box-shadow:1px 2px 2px #0004}
html[data-skin=collage] .deck-support .save-buttons button:nth-child(2){background:#d9b76e;font-family:'Courier New',monospace;font-weight:700}
@media(orientation:portrait) and (max-width:699px){html[data-skin=collage] #tape-panel button.art-control>span:not(.radio-state){font-size:clamp(11px,3vw,15px)}html[data-skin=collage] #tape-panel .playback-options .key-label{font-size:clamp(10px,2.7vw,14px)}}
@media(orientation:portrait) and (max-width:699px){html[data-skin=collage] #tape-panel h1,html[data-skin=collage] #tape-panel h1:has(.ransom-letter){left:auto;right:auto;justify-self:center;margin:0;transform:none}html[data-skin=collage] #tape-panel button.art-control>span:has(.ransom-letter){font-size:clamp(10px,2.65vw,14px)}html[data-skin=collage] #tape-panel .ransom-letter{padding:.02em .01em;margin:0}}
html[data-skin=modern] #oscilloscope{display:block}
html[data-skin=modern] .deck :is(.reel,.tape-guide,.tape-loop){display:none}
:root[data-skin=modern]{--paper:#bcbfb3;--ink:#202c25;--text:#202c25;--muted:#47574c;--line:#6e7d70;--skin-accent:#a2c1a0;--skin-key:#d1d5c5;--skin-key-ink:#202c25;--deck-art:none;--key-art:url('/tapeepat/modern-keys.png')}
html[data-skin=modern] #tape-panel.panel-artwork{background:#bcbfb3 url('/tapeepat/military-console.png') center/100% 100% no-repeat;border:0;border-radius:0}
html[data-skin=modern] #tape-panel h1{font-family:Equipment,Arial,sans-serif;font-weight:700;letter-spacing:.08em;color:#202c25;border-bottom:1px solid #63736580;text-shadow:0 1px #e8ede06b}
html[data-skin=modern] #tape-panel .vu-wrap{background:#101c15;border:3px solid #343b34;border-radius:2px;box-shadow:inset 0 2px 5px #0007,0 1px #e4e8dc}
html[data-skin=modern] #tape-panel .counter{font-family:Equipment,Arial,sans-serif}
html[data-skin=modern] #tape-panel #record svg{color:inherit}
html[data-skin=modern] #tape-panel button.art-control{--key-base-position:7.291667% 13.622291%;--key-base-size:228.571429% 270.899471%;--cap-left:10.714286%;--cap-top:16.666667%;--cap-width:78.720238%;--cap-height:67.460317%;--cap-position:13.406157% 19.635891%;--cap-size:290.359168% 401.568627%;--key-ink:#202b24}
html[data-skin=modern] #tape-panel #record{--key-base-position:92.824074% 84.210526%;--key-base-size:228.571429% 270.899471%;--cap-left:10.863095%;--cap-top:16.666667%;--cap-width:78.720238%;--cap-height:67.195767%;--cap-position:86.891758% 78.831169%;--cap-size:290.359168% 403.149606%;--key-ink:#fff0dd}
html[data-skin=modern] #tape-panel #stop{--key-base-position:92.824074% 13.488372%;--key-base-size:228.571429% 270.184697%;--cap-left:10.863095%;--cap-top:16.886544%;--cap-width:78.720238%;--cap-height:67.282322%;--cap-position:86.891758% 19.635891%;--cap-size:290.359168% 401.568627%;--key-ink:#f0f1e4}
html[data-skin=modern] #tape-panel #forward{--key-base-position:7.291667% 84.210526%;--key-base-size:228.571429% 270.899471%;--cap-left:10.714286%;--cap-top:16.666667%;--cap-width:78.720238%;--cap-height:67.195767%;--cap-position:13.406157% 78.831169%;--cap-size:290.359168% 403.149606%;--key-ink:#202b24}
html[data-skin=modern] #tape-panel.panel-artwork button.art-control:not(#destroy-tape):not(:disabled):is(:active,.pressed-flash,.active,[aria-pressed=true])::before{filter:brightness(1.12);box-shadow:0 -3px 2px #0b0c08bb,0 0 4px #bcffa855}
html[data-skin=modern] #tape-panel #speed::-webkit-slider-thumb{background:linear-gradient(90deg,#424a40,#b9c4b1 40%,#e5eadf 49%,#3b453a 50% 56%,#aeb9a6 60%,#636d5f);border:1px solid #303c32;border-radius:2px;box-shadow:1px 2px 2px #13201666}
html[data-skin=modern] #tape-panel #speed::-moz-range-thumb{background:linear-gradient(90deg,#424a40,#b9c4b1 40%,#e5eadf 49%,#3b453a 50% 56%,#aeb9a6 60%,#636d5f);border:1px solid #303c32;border-radius:2px;box-shadow:1px 2px 2px #13201666}
@media(orientation:landscape) and (min-width:560px) and (max-width:1000px) and (max-height:540px){
 html[data-skin=modern] #tape-panel.panel-artwork{background:none}
 html[data-skin=modern] #tape-panel.panel-artwork .panel-upper{background:#bcbfb3 url('/tapeepat/military-console.png') center top/100% 200% no-repeat}
 html[data-skin=modern] #tape-panel.panel-artwork .panel-lower{background:#bcbfb3 url('/tapeepat/military-console.png') center bottom/100% 200% no-repeat}
}

/* Bitmap-style letterforms throughout the 8-bit player. */
html[data-skin=eightbit] :is(button,input,select,option,output){font-family:TapePixel,monospace}
html[data-skin=eightbit] #tape-panel.panel-artwork button.art-control{font-weight:400;line-height:1.25}
html[data-skin=eightbit] #tape-panel h1{font-weight:400;font-size:calc(var(--panel-unit)*8);letter-spacing:0}
html[data-skin=eightbit] #tape-panel.panel-artwork #add-own{font-size:calc(var(--panel-unit)*3.35);line-height:1.25}
html[data-skin=eightbit] #tape-panel.panel-artwork .cutup-controls button.art-control{font-size:calc(var(--panel-unit)*3.15)}
html[data-skin=eightbit] #tape-panel .counter,html[data-skin=eightbit] #tape-panel #speed-value{font-family:TapePixel,monospace;font-weight:400}