/* ArtistPro's original rack faceplates. All interactive parts use the real controls. */
body{background:#101211;background-image:radial-gradient(ellipse at 50% 0,#30352e 0,transparent 65%)}
.console{padding:17px 25px 20px;border:1px solid #38261d;border-radius:8px;background:repeating-linear-gradient(89deg,#291c16 0,#291c16 1px,#43291d 2px,#392318 4px,#593724 6px,#362319 8px,#442c1e 13px);box-shadow:inset 2px 1px 3px #be8c5c80,inset -3px 0 4px #0b0806,0 24px 50px #0009}
.rack{padding:10px 15px 8px;border:1px solid #090a09;background:repeating-linear-gradient(0deg,transparent 0,transparent 26px,#050605 27px,#151817 29px),linear-gradient(90deg,#242625,#0c0e0d 14px,#090b0a calc(100% - 14px),#292b29);box-shadow:inset 0 2px 8px #000,0 1px 1px #785b3d}
.panel{margin-bottom:12px;padding:25px 28px 21px;border-radius:4px;border:1px solid #505551;box-shadow:inset 0 1px 1px #c4c7b545,inset 0 -2px 1px #000b,0 4px 3px #000d;background:repeating-linear-gradient(0deg,#ffffff03 0,#ffffff03 1px,transparent 1px,transparent 3px),linear-gradient(112deg,#343a36,#252b27 55%,#303732);color:#e3dfcc}
.panel:before,.panel:after{content:'';position:absolute;top:36px;bottom:36px;width:4px;border:1px solid #000b;border-radius:4px;background:linear-gradient(90deg,#070807,#8b8f8670,#131613);box-shadow:1px 0 1px #ffffff0d;pointer-events:none}
.panel:before{left:7px}.panel:after{right:7px}
.screw{width:11px;height:11px;background:linear-gradient(138deg,transparent 41%,#0a0c0b 43%,#090b0a 51%,#a7aaa266 54%,transparent 57%),radial-gradient(circle at 35% 28%,#c0c2b4,#656b60 35%,#292d28 68%,#8b8e81 72%,#1c201c 80%);border:1px solid #141815;box-shadow:0 1px 2px #000,inset 0 1px 1px #d9ddd377}
.tr,.bl{transform:rotate(66deg)}.br{transform:rotate(-28deg)}
.panel-heading{border-bottom:1px solid #b9ba9b26;padding-bottom:15px;margin-bottom:21px;gap:15px;text-shadow:0 1px 1px #000}
.panel-heading h2{font-size:13px;letter-spacing:2.3px;line-height:1.6}.panel-heading h2>span{display:inline-block;padding-right:12px;border-right:1px solid #999b7855;margin-right:12px}
.model-id{display:block;font:9px var(--mono);letter-spacing:2px;color:#aaa991;margin-top:4px}.engraved{font-size:9px;letter-spacing:1.9px}
.source-panel{background:repeating-linear-gradient(0deg,#ffffff03 0,#ffffff03 1px,transparent 1px,transparent 3px),linear-gradient(110deg,#3e4038,#2b2e28 65%,#393c34)}
.source-drop strong{color:#ece5cf}.source-drop .tape-icon{display:flex;align-items:center;justify-content:center;min-width:68px}.tape-icon svg{width:68px;height:40px;filter:drop-shadow(0 2px 2px #000)}
.wave-wrap{border:4px solid #121913;border-radius:4px;box-shadow:0 1px 0 #7c806755,inset 0 2px 12px #000;background:linear-gradient(#101b15,#182a20)}
.transport-button{min-width:39px;min-height:36px;background:linear-gradient(#a7ad9c 0,#d1d2be 12%,#a5ac98 80%,#727965);border:1px solid #161c14;border-bottom:3px solid #4e5745;border-radius:3px;color:#142115;box-shadow:0 3px 4px #0009,inset 0 1px 1px #fff8}
.transport-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 2px #0009,inset 0 1px 2px #0005}.transport-button[aria-label=Pause]{background:linear-gradient(#c9d4a7,#899e66);box-shadow:0 0 12px #b9d88333,inset 0 1px 1px #fff8}
.eq-panel{border-color:#4d6055;background:repeating-linear-gradient(0deg,#eaffdf04 0,#eaffdf04 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at 15% 0,#48624f66,transparent 60%),linear-gradient(115deg,#233e32,#172d24 60%,#284336)}
.eq-controls{gap:6px}.knob-control{min-width:0}.knob-wrap{width:98px;height:98px;max-width:100%}.knob-scale{inset:3px;opacity:1;background:repeating-conic-gradient(from 225deg,#d2c9a0 0deg 1.2deg,transparent 1.2deg 22.5deg);mask:radial-gradient(circle,transparent 63%,#000 65%,#000 69%,transparent 71%);clip-path:polygon(0 0,100% 0,100% 100%,83% 100%,50% 65%,17% 100%,0 100%)}
.knob-wrap:before{content:'';position:absolute;inset:14px;border-radius:50%;background:linear-gradient(145deg,#a9ab94,#3b4337 40%,#0b100c 65%,#858c73);box-shadow:0 3px 6px #000c,0 0 0 1px #0c160e}
.knob{inset:18px;border:2px solid #0d120f;background:repeating-conic-gradient(#151c16 0deg 5deg,#343b2e 6deg 9deg,#141a14 10deg 14deg);box-shadow:0 3px 3px #000,inset 0 1px 1px #a4ae8966;isolation:isolate}
.knob:after{inset:4px;background:radial-gradient(ellipse at 32% 18%,#73785a 0,#3f4937 18%,#293424 55%,#131d15 95%);border:1px solid #a5ab8155;box-shadow:inset 0 2px 2px #dadbad33,inset 0 -2px 3px #070c09;z-index:-1}
.knob:before{height:20px;width:3px;top:5px;background:linear-gradient(#fff6d4,#d3c39b);box-shadow:0 1px 1px #000,0 0 3px #fff6ce44;border-radius:1px}
.knob-label{font-size:10px;letter-spacing:1.5px;margin-bottom:6px;text-shadow:0 1px 1px #000}.knob-value{display:table;min-width:65px;margin:5px auto 0;padding:4px 7px;border:1px solid #65705666;border-radius:2px;background:#0b160e80;box-shadow:inset 0 1px 3px #0007,0 1px 0 #ffffff0b;color:#f0d8a2;font-size:12px;font-variant-numeric:tabular-nums}.knob-freq{margin-top:8px;font-size:9px;letter-spacing:1px}
.knob[aria-disabled=true]{filter:saturate(.35);opacity:.5}.knob:focus-visible{outline:3px solid #f2c979;outline-offset:6px}
.match-section{border-left-color:#b6b09040}.curve-wrap{background:#0b1a12;padding:5px 8px 13px;height:69px;border:2px solid #121e15;box-shadow:inset 0 2px 5px #000,0 1px 0 #ffffff18}.curve-wrap>span{bottom:3px;left:7px}.curve-wrap>span:last-child{left:auto;right:7px}
.hardware-button{min-height:42px;border-radius:3px;border:1px solid #10180e;border-bottom:3px solid #121d12;box-shadow:0 3px 5px #0008,inset 0 1px 1px #ffffff40;transition:box-shadow .12s,transform .12s}.hardware-button.cream{background:linear-gradient(#dfd9be,#b9b69b 75%,#949981);color:#222c21}.hardware-button.red{background:linear-gradient(#b66644,#87412b 80%,#632e22);color:#ffecd0;border-bottom-color:#462417;box-shadow:0 3px 5px #0009,inset 0 1px 1px #f3c89a66}
.hardware-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 2px #0008,inset 0 2px 3px #0004}.hardware-button[aria-pressed=true]{background:linear-gradient(#ddc28b,#b2965c);color:#241e12;box-shadow:0 0 13px #eabd5633,inset 0 1px 2px #fff4}
.tape-strip{position:relative;grid-template-columns:105px minmax(140px,1fr) 188px 155px;gap:18px;margin:25px -8px 0;padding:23px 20px 18px;border:1px solid #685439;border-top:2px solid #8c7955;border-radius:4px;background:repeating-linear-gradient(0deg,#ffe8bd03 0,#ffe8bd03 1px,transparent 1px,transparent 3px),linear-gradient(112deg,#37372d,#25291f 65%,#3b3525);box-shadow:inset 0 1px 0 #e7d5a426,0 3px 6px #0009}
.tape-strip .eyebrow{color:#e0c694;font-size:10px}.tape-strip p{font:18px/1.3 Georgia,serif;margin:9px 0}.tape-strip small{color:#c7b99a;font-size:10px;line-height:1.6}.tape-strip>label{font:10px var(--mono);letter-spacing:1px}.tape-strip select{max-width:100%;width:100%;font-size:12px;padding:10px 7px;background:#1c2218;color:#ded0af;border-color:#776c4e}
.valve-module{text-align:center;--valve-glow:0;min-width:0}.valve-window{height:104px;display:flex;justify-content:center;gap:27px;align-items:flex-end;padding:8px 15px 12px;border:5px solid #11140e;border-bottom-width:7px;border-radius:8px 8px 3px 3px;background:radial-gradient(ellipse at 50% 110%,#60401555,transparent 65%),repeating-linear-gradient(90deg,#090e0999 0,#090e0999 2px,#151a1099 3px,#151a1099 5px);box-shadow:inset 0 3px 8px #000,0 1px 1px #bab08766;position:relative;overflow:hidden}
.valve-window:after{content:'';position:absolute;inset:0;background:linear-gradient(117deg,transparent 25%,#ffefc711 26%,#fff1d007 45%,transparent 46%);pointer-events:none}
.valve{position:relative;width:38px;height:75px;border:1px solid #aea98e55;border-radius:17px 17px 7px 7px;background:linear-gradient(90deg,#e2ebc70a,#d8e4c928 9%,transparent 21%,transparent 77%,#bec4ac22 86%,#e8eccb0b),linear-gradient(#e7e7cb0c,#05090622);box-shadow:inset 2px 0 2px #e5f2cd22,inset -2px 0 2px #d5e3c01c,0 2px 4px #000;isolation:isolate}
.valve:before{content:'';position:absolute;inset:0 -13px -7px;background:radial-gradient(ellipse at 50% 80%,#fff29a 0,#ffbc42 7%,#ff710eaa 25%,#ff710e00 65%);opacity:var(--valve-glow);filter:blur(3px);z-index:-1;transition:opacity .15s linear}
.valve:after{content:'';position:absolute;left:1px;right:1px;bottom:-5px;height:12px;border:1px solid #4b4a35;border-radius:2px;background:repeating-linear-gradient(90deg,#15190f 0,#15190f 4px,#373827 5px,#373827 6px);box-shadow:0 3px 2px #0009}
.valve-plate{position:absolute;top:15px;bottom:11px;left:7px;right:7px;border:1px solid #797b5c66;background:repeating-linear-gradient(0deg,#292e20 0,#292e20 5px,#56563b 6px,#151d15 7px);box-shadow:inset 2px 0 1px #92927344}
.valve-plate:after{content:'';position:absolute;left:8px;top:-5px;bottom:-6px;width:3px;background:#ffad3b;box-shadow:0 0 4px 2px #ff791d,0 0 11px 5px #ff610b80;opacity:var(--valve-glow);transition:opacity .15s linear}
.valve-module output{display:block;margin-top:8px;font:9px var(--mono);letter-spacing:1px;color:#cbb98e;min-height:12px}.valve-module[data-engaged=true] output{color:#f1c67b}
.stereo-panel{background:repeating-linear-gradient(0deg,#eaf0dc04 0,#eaf0dc04 1px,transparent 1px,transparent 3px),linear-gradient(110deg,#525c52,#38483d 65%,#4f5c4d);border-color:#818574}.stereo-panel .model-id{color:#d2d2b7}.stereo-layout{column-gap:18px}.stereo-layout>.hardware-button{max-width:200px}.width-description strong{font:20px Georgia,serif}.correlation{min-width:0}.correlation meter{filter:sepia(.25)}
.output-panel{background:repeating-linear-gradient(0deg,#ffffff03 0,#ffffff03 1px,transparent 1px,transparent 3px),linear-gradient(112deg,#292e2b,#191f1c 65%,#2b312b);border-color:#565a4f;margin-bottom:0}.output-panel .model-id{color:#b7b299}.output-panel .dynamics .knob-wrap{width:84px;height:84px}.dynamics .knob{inset:16px}.dynamics .knob-wrap:before{inset:12px}.dynamics .knob:after,.stereo-panel .knob:after{background:radial-gradient(ellipse at 30% 18%,#909b91,#55645b 22%,#32493e 57%,#1b2c23 95%)}
.meter-bank{padding:17px 17px 12px;border:1px solid #68634f;background:linear-gradient(100deg,#35372e,#1c211a);border-radius:4px;box-shadow:inset 0 1px 1px #b7b49d33,0 2px 3px #0006;min-width:0}.meters{gap:12px}.meter{position:relative;border:5px solid #151a13;border-top-color:#0c100b;border-bottom-color:#525341;border-radius:14px 14px 6px 6px;box-shadow:0 2px 3px #000,inset 0 2px 7px #000;overflow:hidden}.meter:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:9px 9px 1px 1px;box-shadow:inset 0 3px 9px #47341b99;background:linear-gradient(122deg,transparent 0,transparent 36%,#fffae72b 37%,#ffffff05 58%,transparent 59%)}
.meter canvas{height:116px;background:radial-gradient(ellipse at 50% 70%,#fff0b5 0,#dcc083 70%,#a78647);filter:none}.meter-labels{font:9px var(--mono);letter-spacing:1.8px;color:#d5c7a2;margin-top:9px}.readouts{gap:8px}.readouts strong{color:#f6d395;text-shadow:0 0 9px #ffd48a22;font-variant-numeric:tabular-nums}.readouts small{color:#c9c5ac;font-size:8px;letter-spacing:.6px}.readouts em{color:#ccc4a6}.target-result{border-top-color:#7c775544;color:#c9c5af}
.switch-label{min-height:38px;gap:9px}.toggle{width:32px;height:20px;border-radius:4px;border:1px solid #0b130b;background:linear-gradient(#0a140e,#333c2c);box-shadow:inset 0 2px 4px #000,0 1px 0 #cad4a32b;flex-shrink:0}.toggle:after{width:12px;height:16px;top:1px;left:1px;border-radius:2px;background:linear-gradient(90deg,#727b67,#d9dac4 35%,#737d68 55%,#303e2d);box-shadow:1px 1px 3px #0008;border:1px solid #aab196}.switch-label input:checked+.toggle{background:radial-gradient(circle at 20% 50%,#edbc59,#594728 25%,#171e12 60%);box-shadow:inset 0 1px 3px #000,0 0 8px #e9b65a22}.switch-label input:checked+.toggle:after{left:17px}
.audition-tabs{padding:4px;border:1px solid #5f6651;background:#101a12;box-shadow:inset 0 2px 4px #0008;gap:3px}.audition-tabs button{border-radius:2px;min-height:31px}.audition-tabs button.selected,#liveButton.selected{background:linear-gradient(#dbd1a1,#a9b17c);color:#1b2818;box-shadow:0 0 8px #bec78333,inset 0 1px 1px #ffefba88}
.console-bottom{border-top:1px solid #535b4222;margin-top:12px}.nameplate{display:inline-block;padding:8px 13px;border:1px solid #8e805d;border-radius:2px;background:linear-gradient(115deg,#8a7650,#d2bc82 44%,#a68d5a);box-shadow:0 2px 3px #0008,inset 0 1px 1px #ffefac77;color:#231f17;text-shadow:0 1px 0 #e5d79a80}.nameplate i{color:#292419}.nameplate small{color:#3c3627}.power-light,.pilot{background:radial-gradient(circle at 35% 28%,#fff8c0 0,#ecc670 28%,#b27d2a 60%,#634a1e 100%);box-shadow:0 0 0 3px #131b12,0 0 0 4px #687054,0 0 12px #e8ad3d55}
@media(min-width:1200px){.output-layout{grid-template-columns:270px minmax(0,1fr) 180px}.meter-bank{padding:18px 13px 12px}}
@media(max-width:1100px){.tape-strip{grid-template-columns:90px minmax(140px,1fr) 170px}.tape-strip>label{grid-column:2/4}.tape-strip>label select{max-width:240px}.knob-wrap{width:88px;height:88px}.knob-wrap:before{inset:12px}.knob{inset:16px}.panel-heading .engraved{max-width:180px;text-align:right;line-height:1.7}}
@media(max-width:960px){.eq-controls{gap:12px}.eq-layout{gap:22px}.output-layout{grid-template-columns:1fr 1.3fr}.meter-bank{padding:15px 12px}.meter canvas{height:110px}}
@media(max-width:650px){.console{padding:9px 8px 12px}.rack{padding:7px 5px}.panel{padding:22px 17px 18px}.panel:before,.panel:after{display:none}.panel-heading h2{font-size:11px;letter-spacing:1.1px}.panel-heading .engraved{display:none}.panel-heading h2>span{padding-right:8px;margin-right:8px}.model-id{font-size:8px;letter-spacing:1.5px}.knob-wrap{width:87px;height:87px}.knob-label{font-size:9px;letter-spacing:1px}.eq-controls{gap:13px 5px}.tape-strip{grid-template-columns:85px minmax(0,1fr);padding:18px 12px;gap:15px 10px;margin:22px -3px 0}.tape-strip>div:nth-child(2){min-width:0}.tape-strip>label{grid-column:1/-1}.tape-strip>label select{max-width:none}.valve-module{grid-column:1/-1}.valve-window{height:107px;gap:49px}.tape-strip p{font-size:16px}.tape-strip small{font-size:10px}.stereo-layout{gap:18px 12px}.width-description strong{font-size:17px}.output-layout{grid-template-columns:minmax(0,1fr)}.output-panel .dynamics .knob-wrap{width:85px;height:85px}.meter-bank{padding:17px 10px 12px}.meters{gap:8px}.meter canvas{height:109px}.meter-labels{font-size:8px;letter-spacing:1px}.source-drop .tape-icon{min-width:49px}.tape-icon svg{width:49px}.nameplate{padding:6px 9px}.switch-label{font-size:10px}}
.tape-strip{grid-template-columns:100px minmax(140px,1fr) 175px 140px}.tape-strip>label{grid-column:2/5}.tape-strip>label select{display:inline-block;width:auto;min-width:180px;margin:0 0 0 12px}
.tape-transport{position:relative;align-self:center;height:133px;border:1px solid #79755b;border-radius:4px;background:repeating-linear-gradient(0deg,#ffffff06 0,#ffffff06 1px,transparent 1px,transparent 3px),linear-gradient(125deg,#626755,#363e30);box-shadow:inset 0 1px 1px #e5dec24d,0 2px 3px #0008;overflow:hidden}
.deck-reels{display:flex;gap:9px;justify-content:center;position:absolute;left:0;right:0;top:13px;z-index:1}.deck-reel{position:relative;width:68px;height:68px;border-radius:50%;border:2px solid #171f17;background:radial-gradient(circle,transparent 59%,#e5dabe 60%,#6a7560 64%,#343c30 66%,#c6c3a3 69%,#777d68 75%),conic-gradient(#989f89,#dad7bc,#757f69,#c9c7ad,#758069,#989f89);box-shadow:0 3px 5px #000a,inset 0 1px 1px #fff9;animation:reel-turn var(--reel-period,6s) linear infinite;animation-play-state:paused}
.deck-reel:before{content:'';position:absolute;inset:11px;border-radius:50%;border:5px solid #382d1e;box-shadow:inset 0 0 0 1px #b0a17f,0 0 0 1px #151c12}.deck-reel i{position:absolute;left:23px;top:7px;width:18px;height:23px;border-radius:8px 8px 4px 4px;background:linear-gradient(#172117,#293021);transform-origin:9px 25px;box-shadow:inset 1px 1px 3px #000,inset -1px -1px 1px #e7e0b866}.deck-reel i:nth-child(2){transform:rotate(120deg)}.deck-reel i:nth-child(3){transform:rotate(240deg)}.deck-reel b{position:absolute;inset:24px;border-radius:50%;border:2px solid #2c3327;background:radial-gradient(circle at 33% 25%,#ded7bd,#535c4b 55%,#1a2219 65%);box-shadow:0 1px 2px #000}
.tape-transport[data-running=true] .deck-reel{animation-play-state:running}.tape-path{position:absolute;left:29px;right:29px;top:60px;height:44px;border:2px solid #241d14;border-top:0;transform:perspective(80px) rotateX(-25deg);box-shadow:0 1px 1px #c2ad7666}.head-block{position:absolute;bottom:11px;left:calc(50% - 39px);width:78px;padding:10px 3px 6px;border:1px solid #141c13;border-radius:3px;background:linear-gradient(#888d73,#4c5743 12%,#283523 15%,#35432d 82%,#151f14);box-shadow:0 3px 3px #0007;color:#c3c3a5;font:7px var(--mono);letter-spacing:1px;text-align:center}
@keyframes reel-turn{to{transform:rotate(360deg)}}
@media(max-width:1100px){.tape-strip{grid-template-columns:90px minmax(140px,1fr) 160px}.valve-module{grid-column:3;grid-row:1}.tape-transport{grid-column:1/3;grid-row:2;max-width:230px;width:100%;justify-self:center}.tape-strip>label{grid-column:3;grid-row:2}.tape-strip>label select{min-width:0;width:100%;margin:8px 0 0}}
@media(max-width:650px){.tape-strip{grid-template-columns:85px minmax(0,1fr)}.tape-transport{grid-column:1/-1;grid-row:2;max-width:240px}.valve-module{grid-column:1/-1;grid-row:3}.tape-strip>label{grid-column:1/-1;grid-row:4}.tape-strip>label select{width:100%;margin:8px 0 0}.valve-window{height:103px}}
@media(prefers-reduced-motion:reduce){.hardware-button,.valve:before,.valve-plate:after{transition:none}.deck-reel{animation:none}}

/* Compact trim controls: fixed-size fields, naturally sized action buttons. */
.trim-panel .trim-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 16px;margin:18px 0}
.trim-panel .trim-grid>label{flex:0 1 132px;min-width:0;max-width:100%;line-height:1.5;letter-spacing:.5px}
.trim-panel .trim-grid>label:last-child{flex-basis:180px}
.trim-panel .trim-grid input:not([type=range]),.trim-panel .trim-grid select{width:100%;min-height:40px;padding:8px 10px;margin-top:6px}
.trim-panel .trim-actions{display:flex;flex-wrap:wrap;gap:10px}
.trim-panel .trim-actions .hardware-button{flex:0 1 auto;width:auto;max-width:100%;min-height:42px;justify-content:center;padding:10px 14px}
@media(max-width:650px){
 .trim-panel .trim-grid{gap:12px}
 .trim-panel .trim-grid>label{flex-basis:calc((100% - 12px)/2);max-width:160px}
 .trim-panel .trim-grid>label:last-child{flex-basis:180px;max-width:100%}
 .trim-panel .trim-actions .hardware-button{padding:10px 12px}
}

/* T–64 revision: neutral metalwork, large tape transport, tactile black controls. */
body{background:#111315;background-image:radial-gradient(ellipse at 50% 0,#26292c 0,transparent 64%)}
.console{border-color:#201914;background:linear-gradient(90deg,#211a16,#4b3526 10px,#2c201a 19px,#221c18 calc(100% - 19px),#493226 calc(100% - 10px),#211a16);box-shadow:inset 1px 1px 1px #ad826057,0 24px 48px #0008}
.rack{background:#0c0e10;border-color:#020303}
.panel{border-color:#55585b;background:linear-gradient(110deg,#303337,#202326 70%,#2a2d30);color:#e3e0d9;box-shadow:inset 0 1px 0 #ffffff20,inset 0 -2px 1px #08090a,0 4px 5px #000b}
.source-panel{background:linear-gradient(110deg,#292d30,#1e2124 70%,#272b2e)}
.eq-panel{border-color:#696b6d;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(110deg,#454a4d,#303538 60%,#3b4043)}
.stereo-panel{background:linear-gradient(110deg,#303f49,#202d35 70%,#2d3c45);border-color:#566775}
.output-panel{background:linear-gradient(110deg,#27292b,#191b1d 70%,#282b2d);border-color:#555759}
.panel-heading{border-bottom-color:#a3a3a329}.panel-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:14px;letter-spacing:2.1px;color:#e8e4da}.panel-heading h2>span{color:#b5b2a9}.model-id{font:10px/1.5 Arial,Helvetica,sans-serif;letter-spacing:1.8px;color:#b0b2b3}.engraved{font:10px/1.5 Arial,Helvetica,sans-serif;color:#b8b9b6;letter-spacing:1px}
.knob-wrap:before{background:linear-gradient(140deg,#babec0,#565c60 35%,#121416 68%,#8f9497);box-shadow:0 4px 7px #000a,0 0 0 1px #111416}
.knob{background:repeating-conic-gradient(#0a0b0d 0deg 4deg,#36383a 5deg 7deg,#121315 8deg 12deg);border-color:#0b0d0e;box-shadow:0 4px 4px #000c,inset 0 1px 1px #ddd5}
.knob:after,.dynamics .knob:after,.stereo-panel .knob:after{background:radial-gradient(ellipse at 35% 18%,#6a6d6f,#333638 30%,#1c1e20 75%,#101214);border:1px solid #86898a75;box-shadow:inset 0 1px 2px #ffffff22,inset 0 -2px 3px #0008}
.knob:before{background:#f3e8ca;box-shadow:0 1px 1px #000;top:5px;height:18px;width:3px}
.knob-scale{background:repeating-conic-gradient(from 225deg,#cfccc2 0deg 1.2deg,transparent 1.2deg 22.5deg)}
.knob-label{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:1.1px;color:#e2dfd7}.knob-freq{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.5px;color:#c4c1b8}.knob-value{font:13px/1.2 var(--mono);color:#ecd6a5;background:#121518;border-color:#676a6d;box-shadow:inset 0 1px 3px #000b}
.hardware-button.cream,.transport-button{background:linear-gradient(#cacac5,#aaaead 70%,#7b8181);color:#20252a;border-color:#0c1013;border-bottom-color:#3c4246;box-shadow:0 3px 4px #0008,inset 0 1px 1px #fff8}
.transport-button[aria-label=Pause],.transport-button[aria-pressed=true]{background:linear-gradient(#e2cc95,#b59758);color:#272011;box-shadow:inset 0 1px 1px #fff7,0 0 9px #dfb95925}
.transport-hint{order:6;flex:0 0 100%;font:10px Arial,sans-serif;letter-spacing:.8px;color:#adb0ad}.transport-hint kbd{font:10px Arial,sans-serif;display:inline-block;border:1px solid #747a7d;border-radius:3px;padding:3px 7px;margin-right:5px;color:#d2d2ca}.transport{flex-wrap:wrap}
.source-drop .tape-icon{min-width:56px}.tape-icon img{display:block;width:56px;height:56px;object-fit:contain}
/* The transport is its own rack unit. The existing drive and speed inputs are moved intact. */
.tape-strip.tape-machine{display:block;margin:0 0 12px;padding:25px 28px 21px;background:linear-gradient(115deg,#313437,#212326 65%,#2e3033);border:1px solid #6c6c69;border-top:1px solid #8b8c87}
.tape-machine .panel-heading{margin:0 0 20px}.tape-machine-layout{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:26px;align-items:stretch}.tape-deck-column{min-width:0;align-self:center}
.tape-machine .tape-transport{position:relative;display:block;width:100%;max-width:none;height:auto;aspect-ratio:2/1;border:1px solid #0b0c0e;border-radius:4px;background:#181a1c;box-shadow:0 3px 8px #0008;overflow:hidden;grid-column:auto;grid-row:auto}
.deck-bed{display:block;width:100%;height:100%;object-fit:fill}
.tape-machine .deck-reel{position:absolute;top:2.7%;left:10.3%;width:30%;height:auto;aspect-ratio:1;border:0;border-radius:50%;box-shadow:0 3px 5px #0008;background:none;animation:reel-forward var(--reel-period,6s) linear infinite;animation-play-state:paused;transform-origin:50% 50%}
.tape-machine .deck-reel:before{display:none}.tape-machine .deck-reel img{display:block;width:100%;height:100%;object-fit:contain;clip-path:circle(47.3%);pointer-events:none}.tape-machine .reel-takeup{left:59.7%;animation-delay:-1.1s}
.tape-machine .tape-transport[data-running=true] .deck-reel{animation-play-state:running}
@keyframes reel-forward{to{transform:rotate(-360deg)}}
.deck-transport-bar{display:flex;align-items:center;gap:18px;padding:15px 17px;margin-top:3px;border:1px solid #515353;border-radius:3px;background:linear-gradient(#383b3d,#282b2d);box-shadow:inset 0 1px 1px #ffffff1a}.deck-keys{display:flex;gap:10px}.deck-keys .transport-button{min-width:52px;min-height:38px;font-size:17px}.deck-transport-bar output{font:22px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:2px;background:#101211;padding:8px 12px;border:1px solid #5f5e56;border-radius:2px;color:#e5c989;box-shadow:inset 0 2px 4px #0009}.tape-direction{margin-left:auto;font:10px Arial,sans-serif;letter-spacing:1.2px;color:#c5c1b4;white-space:nowrap}
.tape-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding-left:24px;border-left:1px solid #9b9b8c33;min-width:0}.tape-controls .knob-wrap{width:114px;height:114px}.tape-controls .knob{inset:21px}.tape-controls .knob-wrap:before{inset:17px}.tape-controls .knob:before{height:24px}.tape-controls .knob-value{min-width:78px;padding:6px}.tape-controls>label{display:block;font:11px/1.4 Arial,sans-serif;letter-spacing:1px;color:#d9d6cb;width:100%;text-align:center}.tape-controls select{display:block;width:100%;max-width:100%;min-width:0;margin:8px 0 0;padding:10px 8px;font:13px Arial,sans-serif;border:1px solid #81817a;border-radius:3px;background:#151a1d;color:#eeece2;min-height:40px}
.tape-controls .valve-module{width:100%;grid-column:auto;grid-row:auto}.tape-controls .valve-window{height:90px;padding:5px 15px 10px;gap:28px;background:#101211;border-color:#080a0b;border-radius:3px;box-shadow:inset 0 3px 7px #000,0 1px 0 #7e82754d}.tape-controls .valve{height:63px;width:32px}.tape-controls .valve-plate{left:6px;right:6px;top:12px}.tape-controls .valve-plate:after{left:6px}.tape-controls .valve-module output{font:10px/1.5 Arial,sans-serif;letter-spacing:.6px;color:#c8c4b9}.tape-controls .tape-note{font:11px/1.5 Arial,sans-serif;color:#aaa99f;text-align:center;margin:0}
.tape-signal{display:flex;gap:10px;align-items:center;font:11px var(--mono);letter-spacing:1px;color:#bebfb8}.tape-signal i{width:8px;height:8px;border-radius:50%;background:#493b21;box-shadow:0 0 0 2px #111,0 0 0 3px #77715e}.tape-machine[data-engaged=true] .tape-signal i{background:#edbf65;box-shadow:0 0 0 2px #111,0 0 0 3px #77715e,0 0 10px #e5a43770}
.meter-bank{background:linear-gradient(110deg,#303234,#171a1b);border-color:#63635b}.meter{border-color:#101214;border-bottom-color:#505352}.meter canvas{background:radial-gradient(ellipse at 50% 70%,#f9e8b9,#ceb78a 85%)}
@media(max-width:960px){.tape-machine-layout{grid-template-columns:minmax(0,1fr) 160px;gap:18px}.tape-controls{padding-left:17px;gap:14px}.tape-direction{display:none}.tape-controls .knob-wrap{width:96px;height:96px}.tape-controls .knob{inset:18px}.tape-controls .knob-wrap:before{inset:14px}}
@media(max-width:650px){.tape-strip.tape-machine{padding:22px 17px 18px}.tape-machine .panel-heading h2{font-size:12px;letter-spacing:1px}.tape-machine-layout{display:flex;flex-direction:column;gap:20px}.tape-deck-column{width:100%}.tape-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:18px 0 0;border:0;border-top:1px solid #a5a18e33}.tape-controls>#tapeControl{grid-column:1;grid-row:1/3}.tape-controls>label{grid-column:2;grid-row:1}.tape-controls .valve-module{grid-column:2;grid-row:2}.tape-controls .valve-window{height:68px;gap:16px;padding:0 8px 7px;border-width:3px}.tape-controls .valve{height:48px;width:26px}.tape-controls .valve-plate{left:4px;right:4px;top:9px}.tape-controls .valve-module output{font-size:9px}.tape-controls .tape-note{grid-column:1/-1;font-size:11px}.tape-controls .knob-wrap{width:110px;height:110px}.deck-transport-bar{gap:12px;padding:10px}.deck-transport-bar output{font-size:18px;margin-left:auto;padding:8px}.deck-keys .transport-button{min-width:43px;min-height:36px}.tape-signal{font-size:10px;gap:7px}.tape-machine .model-id{font-size:9px;letter-spacing:1px}.source-drop .tape-icon{min-width:43px}.tape-icon img{width:43px;height:43px}.panel-heading h2{font-size:12px}.knob-label{font-size:11px}.transport-hint{font-size:10px}}
@media(prefers-reduced-motion:reduce){.tape-machine .deck-reel{animation:none}}

/* Tape leads connect the rotating reel overlays to the guide rollers in the bed artwork. */
.deck-thread{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.panel select{background:#191e22;color:#e5e3db;border-color:#787b78;border-radius:3px;font-family:Arial,Helvetica,sans-serif}
.panel .preset-strip label,.panel .vinyl-strip label,.panel .delivery-strip label{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.8px;color:#cfcfc6}
.panel .preset-strip p,.panel .vinyl-strip p{color:#c6c8c5}

/* Transport bank: independent mechanical keys, shared audition state. */
.transport-hint{display:none}
.source-transport{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.source-transport #playButton,.source-transport #stopButton,.source-transport #clock{display:none}
.source-transport>.machine-transport{flex:0 0 100%}
.source-transport #seek{display:block;min-width:80px;flex:1;height:5px;margin:7px 0}
.source-transport>.text-button{margin:0 0 0 auto}
#deckTransportHost{margin-top:7px}
.machine-transport{padding:17px 20px 15px;border:1px solid #111518;border-top-color:#6f7373;border-bottom:3px solid #0c0e10;border-radius:4px;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px),linear-gradient(112deg,#40474b,#252c30 55%,#343b3f);box-shadow:inset 0 1px 1px #c0c4c33b,inset 0 -1px 0 #6c737244,0 4px 7px #0009;color:#d8d8cf;min-width:0}
.transport-display{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;margin-bottom:15px;border-bottom:1px solid #0b1115;box-shadow:0 1px 0 #8d969125}
.locate-keys{display:flex;gap:5px}.locate-keys button{display:grid;place-items:center;min-height:35px;width:37px;padding:7px;background:linear-gradient(#434a4d,#23292c);border:1px solid #0c1012;border-top-color:#6d7476;border-radius:3px;color:#c6cac7;box-shadow:0 2px 2px #0008,inset 0 1px 0 #aab2b233}
.locate-keys svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.position-display{display:flex;gap:12px;align-items:center}.position-display>span{font:9px Arial,sans-serif;letter-spacing:1.5px;color:#aeb6b5}.transport-counter{display:block;padding:8px 13px 7px;border:3px solid #0d1012;border-bottom-color:#66706b;border-radius:3px;background:linear-gradient(#090d0c,#141c17);color:#e6d2a1;font:23px/1.1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:3px;box-shadow:inset 0 2px 6px #000,0 1px 1px #88958944;white-space:nowrap}
.transport-mode{font:10px/1.4 Arial,sans-serif;letter-spacing:1.2px;color:#aaafa9;text-align:right;min-width:55px}.machine-transport[data-mode=play] .transport-mode{color:#b8db9b}.machine-transport[data-mode=pause] .transport-mode{color:#e2bf7d}
.machine-keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:540px;margin:0 auto}
.machine-key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:2px 0 0;border:0;border-radius:3px;background:none;color:#c6cbca;min-height:95px;min-width:0;touch-action:none;-webkit-user-select:none;user-select:none}
.key-lamp{display:block;width:16px;height:4px;border:1px solid #111518;border-radius:2px;background:#181e1d;box-shadow:0 1px 0 #a7b0a42b;flex-shrink:0}
.key-cap{display:grid;place-items:center;width:100%;height:55px;border:1px solid #171c1e;border-top-color:#ece9d77a;border-bottom:5px solid #575e5e;border-radius:3px;background:linear-gradient(180deg,#ecebdc 0%,#bdbfb7 8%,#b5b9b2 76%,#949c98 92%,#77817e 100%);box-shadow:0 3px 0 #080d10,0 5px 7px #000a,inset 1px 0 1px #eff2de80,inset -1px 0 1px #313f3966;transition:transform 80ms,box-shadow 80ms,border-width 80ms;color:#232b2e}
.key-cap svg{width:26px;height:26px;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 0 #ffffff55)}
.key-label{font:10px/1.2 Arial,Helvetica,sans-serif;font-weight:600;letter-spacing:1.4px;color:#c5c9c3;text-shadow:0 1px 1px #000}
.key-play .key-cap{background:linear-gradient(#d5dfbe,#a6b793 10%,#90a880 76%,#708767 94%);border-bottom-color:#455a43;color:#23351f}
.key-stop .key-cap{background:linear-gradient(#f0eee1,#cbcdc1 10%,#b5bcb2 76%,#8c968e 94%)}
.machine-key:active:not(:disabled) .key-cap,.machine-key.engaged .key-cap{transform:translateY(3px);box-shadow:0 1px 0 #080d10,0 2px 3px #0009,inset 0 1px 3px #0d1b1b44;border-bottom-width:2px}
.machine-key.engaged .key-lamp{background:#d1ac62;box-shadow:0 0 5px #e3a54555,0 0 0 1px #12191a}.key-play.engaged .key-lamp{background:#bfdb94;box-shadow:0 0 6px #98d56266,0 0 0 1px #12191a}.key-stop.engaged .key-lamp{background:#e1dcb8;box-shadow:0 0 4px #e1dcb830}
.machine-key:disabled{opacity:.55;cursor:not-allowed}.machine-key:focus-visible{outline:2px solid #e4c87e;outline-offset:5px}.locate-keys button:active:not(:disabled){transform:translateY(1px)}
.tape-machine .tape-transport[data-winding="-1"] .deck-reel{animation-direction:reverse}
@media(max-width:1100px){.position-display>span{display:none}.machine-transport{padding:14px 15px 13px}.machine-keys{gap:9px}.transport-display{gap:9px}.transport-counter{font-size:21px}.locate-keys button{width:31px;min-height:31px;padding:6px}}
@media(max-width:650px){.machine-transport{padding:13px 10px 12px}.machine-keys{gap:7px}.machine-key{min-height:87px;gap:8px}.key-cap{height:50px;border-bottom-width:4px}.key-cap svg{width:23px;height:23px}.key-label{font-size:9px;letter-spacing:.6px}.transport-display{padding-bottom:12px;margin-bottom:12px;gap:7px}.transport-counter{font-size:19px;letter-spacing:2px;padding:7px 9px}.transport-mode{font-size:9px;min-width:46px}.locate-keys{gap:4px}.locate-keys button{width:29px;min-height:31px;padding:6px}.locate-keys svg{width:17px;height:17px}.source-transport>.text-button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.key-cap{transition:none}}