@font-face{font-family:Equipment;src:url('/tapeepat/equipment-regular.woff') format('woff');font-weight:400 500;font-display:swap}
@font-face{font-family:Equipment;src:url('/tapeepat/equipment-bold.woff') format('woff');font-weight:600 800;font-display:swap}
:root{color-scheme:light;--bg:#272720;--metal:#c6c2b5;--paper:#e7debf;--ink:#272821;--muted:#5b594e;--line:#918c7b;--text:#272821;--orange:#9a572f;font-family:Equipment,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;overscroll-behavior-y:none}body{background:var(--bg);color:var(--text);font-size:16px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.48}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd602e;outline-offset:3px}button{color:inherit}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.app{max-width:560px;margin:auto;padding:calc(5px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom))}.app-header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:44px;margin-bottom:5px;color:#e4dfcd}.app-header h1{grid-column:2;text-align:center;margin:0;font-size:27px;line-height:1;letter-spacing:-.05em;font-weight:800}.title-dot{display:none}.info-button{grid-column:3;background:transparent;border:1px solid #a19d8d;color:#e4dfcd;border-radius:50%;width:30px;height:30px;justify-self:center;font-family:Georgia,serif;font-size:20px;font-style:italic;font-weight:bold}.info-button::after{content:'';position:absolute;inset:-7px}.info-button{position:relative}
.machine{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(106px,1fr);background:var(--metal);border:2px solid #777466;box-shadow:0 8px 22px #0005;border-radius:4px;overflow:hidden}.machine-controls{display:contents}.deck-panel{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;background:#b9b7a8;min-width:0}.deck{position:relative;width:100%;aspect-ratio:1536/1024;overflow:hidden}.deck>img{display:block;width:100%;height:auto}.reel{position:absolute;width:44%;aspect-ratio:1;top:1%;border-radius:50%;background-image:url('/tapeepat/deck.png');background-repeat:no-repeat;background-size:227.273% auto;transform:rotate(var(--reel-angle,0deg));will-change:transform}.reel-left{left:3%;background-position:5.357% 2.94%}.reel-right{left:53%;background-position:94.64% 2.94%}.deck-label,.deck-model{position:absolute;bottom:6.5%;font-size:clamp(8px,1.2vw,15px);font-weight:700;letter-spacing:.08em;color:#323530}.deck-label{left:7%}.deck-model{right:7%}
.meter-panel{grid-column:2;grid-row:1;padding:8px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;background:#bbb7a9}.monitor{display:flex;flex-direction:column;gap:6px}.meter-bank{display:grid;gap:6px}.vu-wrap{background:var(--paper);border:4px solid #30312a;border-radius:5px;box-shadow:0 1px #eee8d7,inset 0 1px 4px #0005;min-width:0}.vu-wrap canvas{width:100%;height:auto;display:block;aspect-ratio:440/192}.counter{display:flex;flex-direction:column;align-items:center;gap:1px;background:#252721;border:2px solid #797568;border-radius:2px;padding:4px;color:#e5dbc0}#mode-label,#duration-label{font-size:10px;letter-spacing:.04em}#timer{font-family:'Courier New',monospace;font-size:25px;line-height:1;font-variant-numeric:tabular-nums}#duration-label{color:#bcb5a2}.tape-progress{height:3px;background:#8b8779;margin-top:6px;overflow:hidden}.tape-progress span{display:block;height:100%;width:0;background:#454c39}
.transport-panel{grid-column:1/-1;padding:9px 12px 10px;border-top:1px solid #ede8d8;border-bottom:1px solid var(--line)}.transport-labels{display:flex;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.12em;margin-bottom:7px;color:#575648}.transport{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.transport-key{--lit:#c4d7b3;--glow:#9dc77750;min-width:0;min-height:56px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 3px;background:#30312b;color:#e5dfca;border:2px solid #767366;border-bottom:4px solid #171914;border-radius:3px;box-shadow:inset 0 1px #79796c,0 1px #ece5d0;font-size:12px;font-weight:600;transition:background .1s,transform .1s}.transport-key:not(:disabled):active,.transport-key.active,.transport-key.pressed-flash,.source-key[aria-pressed=true]{background:var(--lit);color:#242b20;box-shadow:inset 0 1px #ffffe8,0 0 10px var(--glow);transform:translateY(1px)}.record-key{--lit:#c9836a;--glow:#d36e4a50}.record-key svg{color:#d98264}.record-key.active svg{color:#5a251c}#stop{--lit:#aabdc9;--glow:#699db650}.cutup-key{--lit:#e9da9b;--glow:#f1d77850}.cutup-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.cutup-controls .cutup-key{min-height:48px;flex-direction:row;gap:7px}.source-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0}.cutup-controls .source-key{flex-direction:column;gap:1px;font-size:10px;padding:3px 1px;border-width:2px}.source-key svg{width:24px;height:18px}.radio-state{font-size:8px;text-transform:uppercase;line-height:1.1}.source-key[aria-pressed=true] .radio-state{color:#3a3b27}#add-field{--lit:#a9d19a;--glow:#88bd7050}
.control-panel{grid-column:1/-1;padding:10px 12px;display:flex;flex-direction:column;gap:8px}.input-buttons{display:grid;grid-template-columns:1fr 1.4fr;gap:7px}.action-button{display:flex;justify-content:center;align-items:center;gap:6px;min-height:44px;min-width:0;padding:7px 8px;background:#ddd8c8;color:#303129;border:1px solid #817d6d;border-bottom:3px solid #686554;border-radius:3px;box-shadow:inset 0 1px #f7f0db;font-size:12px;font-weight:600}.action-button:not(:disabled):active{transform:translateY(1px)}.action-button svg{width:18px;height:18px}#system-record.active{background:#c9836a}#own-count{white-space:nowrap;font-size:11px}#add-own{line-height:1.15}#own-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}#own-list:empty{display:none}#own-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}#own-list li>span{overflow-wrap:anywhere}#own-list button{flex-shrink:0;min-height:36px;border:1px solid #847e6b;background:#d9d2bf;border-radius:2px;padding:4px 8px;font-size:12px}.status{margin:0;min-height:30px;font-size:12px;line-height:1.3;color:#45483b}.status.error{color:#8b2e20}.playback-options{display:grid;grid-template-columns:54px 88px minmax(0,1fr);gap:8px;align-items:center}.loop-button{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;background:#36372f;color:#e5dfca;border:2px solid #777263;border-bottom:4px solid #202219;border-radius:3px;box-shadow:inset 0 1px #6f7163;font-size:12px;line-height:1.2}.loop-button[aria-pressed=true]{background:#e1d397;color:#303124;border-color:#777263;box-shadow:inset 0 1px #fff0bf}.speed-control{min-width:0}.speed-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 5px;font-size:12px}.speed-heading output{font-weight:700;font-variant-numeric:tabular-nums}#speed{appearance:none;-webkit-appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}#speed::-webkit-slider-runnable-track{height:4px;background:#535348;border-radius:1px}#speed::-moz-range-track{height:4px;background:#535348}#speed::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:27px;background:#2e3028;border:2px solid #737465;border-radius:2px;margin-top:-12px;box-shadow:inset 0 2px #999a86,0 2px 3px #0003}#speed::-moz-range-thumb{width:15px;height:25px;background:#2e3028;border:2px solid #737465;border-radius:2px}#speed:disabled{opacity:.45}.speed-scale{display:flex;justify-content:space-between;color:#5f5c4e;font-size:10px}.save-direction{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.save-direction select{min-height:38px;padding:5px 8px;border:1px solid #817d6d;background:#e2ddcd;color:#303129;border-radius:2px;font-size:13px}.export-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.export-note{font-size:10px;text-align:center;margin:0;color:#5b594e;line-height:1.25}
.notice{position:fixed;z-index:10;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 32px);max-width:520px;max-height:36vh;overflow:auto;margin:0;background:#e5dfcb;color:#292d23;border:1px solid #827962;border-radius:4px;padding:14px;font-size:14px;line-height:1.4;box-shadow:0 5px 24px #0006}dialog{max-width:520px;width:calc(100% - 32px);max-height:85vh;overflow:auto;padding:22px;background:#ded8c4;color:#303128;border:2px solid #77715f;border-radius:5px;box-shadow:0 12px 48px #0006}dialog::backdrop{background:#0009}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-heading h2{margin:0;font-size:23px}.icon-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:0;background:transparent}.icon-button svg{width:24px;height:24px}dialog p,dialog li{font-size:16px;line-height:1.5}dialog li+li{margin-top:8px}dialog a{color:#624722}.full-width{width:100%;margin-top:15px}noscript{padding:20px;display:block;color:#eee8d7}
/* Mac and phone landscape: the deck occupies the main screen, controls at right. */
@media(min-width:900px),(min-width:700px) and (pointer:fine),(orientation:landscape) and (min-width:560px){
 .app{max-width:none;width:100%;height:100vh;height:100svh;display:flex;flex-direction:column;padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
 .app-header{flex:none;min-height:36px;margin-bottom:6px}.app-header h1{font-size:28px}
 .machine{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,29vw,410px);align-items:stretch}
 .deck-panel{grid-column:1;grid-row:1;min-height:0;overflow:hidden;background:#34332c;padding:0}
 .deck{width:min(100%,calc((100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5));width:min(100%,calc((100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5))}
 .machine-controls{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--metal);border-left:3px solid #797463;scrollbar-width:thin;scrollbar-color:#797463 #c6c2b5}
 .meter-panel{padding:12px 14px 9px;border-left:0;flex:none}.meter-bank{grid-template-columns:1fr;max-width:250px;width:100%;align-self:center}.meter-bank.stereo{grid-template-columns:1fr 1fr;max-width:none}.monitor{gap:8px}.counter{flex-direction:row;justify-content:space-between;padding:5px 7px}.counter #timer{font-size:28px}.vu-wrap{border-width:5px}
 .transport-panel{padding:11px 14px 12px;flex:none}.control-panel{padding:12px 14px 14px;gap:10px;flex:none}.transport-key{min-height:64px;font-size:13px}.cutup-controls .cutup-key{min-height:56px}.source-key svg{height:22px}.source-key .radio-state{font-size:9px}.status{font-size:13px}.action-button{font-size:13px}
}
@media(orientation:landscape) and (max-height:540px){
 .app-header{min-height:30px;margin-bottom:4px}.app-header h1{font-size:23px}.info-button{width:27px;height:27px;font-size:18px}
 .machine{grid-template-columns:minmax(0,1fr) 300px}.meter-panel{padding:8px 10px}.meter-bank{max-width:160px}.meter-bank.stereo{max-width:250px}.counter #timer{font-size:22px}.monitor{gap:5px}.counter{padding:3px 5px}
 .transport-panel,.control-panel{padding:8px 10px}.transport-key{min-height:50px;font-size:11px}.cutup-controls .cutup-key{min-height:46px}.control-panel{gap:7px}.source-key svg{height:18px}
}
@media(max-width:360px){.app{padding-left:6px;padding-right:6px}.transport-panel,.control-panel{padding-left:8px;padding-right:8px}.playback-options{grid-template-columns:48px 78px minmax(0,1fr);gap:6px}.loop-button,.transport-key{font-size:11px}.input-buttons{grid-template-columns:1fr 1.35fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reel{transform:none;will-change:auto}}

#import-dialog input,#system-dialog select{display:block;width:100%;box-sizing:border-box;margin:10px 0;padding:10px;background:#e7debf;color:#222;border:1px solid #555;font:inherit}dialog .action-button{margin:8px 0}#import-link-form{margin-top:18px}

.input-buttons{position:relative;padding-right:35px}.input-buttons .info-button{position:absolute;right:0;top:4px;grid-column:auto;color:#303128;border-color:#77715f}


/* One unobstructed deck, with every control contained in its own panel. */
.machine{display:flex;flex-direction:column}
.machine-controls{display:flex;flex-direction:column;min-width:0}
.deck-panel{display:flex;align-items:center;justify-content:center;padding:8px;min-width:0;background:#34332c}
.deck{width:100%;aspect-ratio:1536/1024;overflow:visible;flex:none}
.deck>img{display:block;width:100%;height:auto;object-fit:contain}
.meter-panel{border-left:0}.meter-bank{max-width:240px;align-self:center;width:100%}.meter-bank.stereo{max-width:none;grid-template-columns:1fr 1fr}
.machine-controls>.playback-options{padding:8px 12px;grid-template-columns:54px 88px minmax(0,1fr)}
.transport-labels{display:none}.transport-key{min-height:44px;border-radius:1px}.cutup-controls .cutup-key{min-height:40px}
.input-buttons{position:relative;display:grid;grid-template-columns:1fr 1fr;padding-right:35px;min-height:0}.input-buttons .info-button{position:absolute;right:0;top:5px}
@media(min-width:900px),(min-width:700px) and (pointer:fine),(orientation:landscape) and (min-width:560px){
 .machine{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,29vw,410px);grid-template-rows:minmax(0,1fr)}
 .machine>.deck-panel{grid-column:1;grid-row:1;min-height:0;container-type:size;padding:10px}
 .machine>.machine-controls{grid-column:2;grid-row:1;display:flex;overflow-y:auto;min-height:0;border-left:3px solid #797463}
 .deck{width:min(100%,calc((100svh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5))}
 @supports(width:1cqw){.deck{width:min(100cqw,150cqh)}}
}

/* Translucent illuminated keys seated in dark mechanical bezels. */
.machine-controls :is(.transport-key,.action-button,.loop-button){
 --key-hue:43;--key-saturation:68%;
 position:relative;border:2px solid #34342e;border-bottom:5px solid #292a24;border-radius:3px;
 color:#211f16;background:linear-gradient(180deg,#ffffff60 0%,#ffffff08 36%,#00000016 100%),hsl(var(--key-hue) var(--key-saturation) 49%);
 box-shadow:inset 0 1px 1px #fff9,inset 1px 0 2px #fff5,inset 0 -3px 5px #0003,0 3px 0 #171913,0 4px 5px #0005;
 text-shadow:0 1px #ffffff40;transition:transform 65ms ease,box-shadow 65ms ease,background 90ms ease;
}
.machine-controls :is(.play-key,#add-field){--key-hue:118;--key-saturation:42%}
.machine-controls :is(.record-key,#system-record){--key-hue:5;--key-saturation:68%}
.machine-controls #stop{--key-hue:204;--key-saturation:62%}
.machine-controls .record-key svg{color:currentColor}
.machine-controls :is(.transport-key,.action-button,.loop-button):is(:active:not(:disabled),.active,.pressed-flash,[aria-pressed=true]){
 color:#201e14;transform:translateY(3px);
 background:radial-gradient(ellipse at 50% 45%,#ffffce85,transparent 75%),linear-gradient(180deg,#ffffff60,#ffffff08 45%,#00000008),hsl(var(--key-hue) var(--key-saturation) 63%);
 box-shadow:inset 0 1px 2px #fff9,inset 0 -2px 4px #0002,0 1px 0 #171913,0 0 12px hsl(var(--key-hue) 90% 60% / .48);
}
.machine-controls :is(.transport-key,.action-button,.loop-button):disabled:not(.active):not([aria-pressed=true]){opacity:.55;filter:saturate(.65)}
@media(prefers-reduced-motion:reduce){.machine-controls :is(.transport-key,.action-button,.loop-button){transition:none}}

.machine-controls :is(.transport-key,.action-button,.loop-button):is(.active,[aria-pressed=true]){opacity:1;filter:none}

/* File actions remain quiet, flat controls rather than illuminated hardware. */
.export-button{display:flex;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:8px;background:transparent;color:#303129;border:1px solid #817d6d;border-radius:2px;font-size:13px;box-shadow:none;text-shadow:none}
.export-button svg{width:18px;height:18px}.export-button:not(:disabled):hover,.export-button:not(:disabled):active{background:#ded9c9}
#add-own{flex-wrap:wrap;gap:3px 6px}#system-record{line-height:1.15}

.stop-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:9px}.transport #system-record{font-size:11px}.input-buttons{grid-template-columns:1fr}.transport-key{line-height:1.15}

.play-key .stop-icon{display:none}.play-key.is-stop .play-icon{display:none}.play-key.is-stop .stop-icon{display:block}.machine-controls .play-key.is-stop{--key-hue:204;--key-saturation:62%}

.destroy-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;background:#181914;color:#eee7d5;border:2px solid #0a0b09;border-bottom-width:4px;border-radius:3px;box-shadow:inset 0 1px #515248,0 2px 2px #0004;font-size:13px}.destroy-button span{font-family:Arial,sans-serif;font-size:25px;line-height:1}.destroy-button:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 2px 4px #000}

.transport-panel>.input-buttons{margin-top:10px}.machine-controls #add-own{--key-hue:5;--key-saturation:68%;min-height:44px}

.transport-panel>.input-buttons{grid-template-columns:minmax(55px,1fr) minmax(0,3fr);align-items:stretch}.input-buttons #stop{min-height:44px}

.transport-panel>.input-buttons{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:0}.control-panel>.info-button{align-self:flex-end;color:#303128;border-color:#77715f}

.output-routing{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;font-size:12px}.output-routing select{min-width:0;min-height:38px;background:#e2ddcd;border:1px solid #817d6d;color:#303129;padding:5px}.output-routing button,.output-routing p{grid-column:1/-1}.output-routing p{margin:0;font-size:11px;line-height:1.3}.output-routing p:empty{display:none}

/* One transport row; quiet input and import options. */
.machine-controls #add-own,.plain-option{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;min-height:36px;padding:3px 0;background:transparent;color:#303129;border:0;border-radius:0;box-shadow:none;text-shadow:none;font-size:12px;font-weight:500;transform:none}
.machine-controls #add-own:active,.machine-controls #add-own:hover{background:transparent;box-shadow:none;transform:none;color:#303129}
.transport-panel>.input-buttons{display:block;margin-top:5px}
.input-routing{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;font-size:12px}.input-routing select{min-width:0;min-height:38px;background:#e2ddcd;border:1px solid #817d6d;color:#303129;padding:5px}.input-routing button,.input-routing p{grid-column:1/-1}.input-routing p{margin:0;font-size:11px;line-height:1.3}.input-routing p:empty{display:none}
.destroy-button{align-self:flex-end;width:auto;min-height:36px;padding:4px 10px;font-size:11px;gap:6px}.destroy-button svg{width:19px;height:19px;stroke-width:1.5}