:root{color-scheme:dark;--ink:#c9c2ae;--muted:#8f8d7f;--green:#9bce71;--red:#f23528;--metal:#222320;--line:#45453d}*{box-sizing:border-box}body{margin:0;background:#111210;color:var(--ink);font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-size:12px;padding:24px}button,input,select{font:inherit}button{color:var(--ink);background:linear-gradient(#30312b,#20211e);border:1px solid #55564b;border-radius:3px;padding:9px 12px;cursor:pointer;box-shadow:0 2px 3px #0008,inset 0 1px #ffffff0d}button:hover{filter:brightness(1.25);border-color:#918975}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d4bb81;outline-offset:3px}input,select{color:inherit;background:#171914;border:1px solid #53554b;border-radius:2px}input[type=range]{accent-color:#bcb39a;cursor:pointer}input[type=number]{width:78px;padding:6px}input[type=range]:focus-visible{outline-offset:6px}.machine{max-width:1440px;margin:auto;border:2px solid #55574d;border-radius:15px;padding:24px 20px 14px;background:repeating-linear-gradient(28deg,#ffffff02 0 1px,transparent 1px 3px),radial-gradient(ellipse at top,#30312b,#1e1f1c 70%);box-shadow:0 0 0 5px #0c0d0b,0 15px 60px #000,inset 0 1px 3px #9d9b8166;position:relative}.machine:before,.machine:after{content:'⊖';position:absolute;top:10px;font:20px monospace;color:#141612;text-shadow:0 1px #777}.machine:before{left:7px}.machine:after{right:7px}header{display:flex;justify-content:space-between;align-items:center;padding:0 22px 23px;gap:20px}h1{margin:0;font-size:36px;font-stretch:condensed;letter-spacing:1px;font-weight:900;text-shadow:0 2px #000}header p{font-size:10px;letter-spacing:4px;margin:7px 0 0}h2{font-size:12px;letter-spacing:2px;margin:0}.session-tools{text-align:right}.online{display:block;font-size:9px;letter-spacing:2px;color:#adbb99;margin-bottom:12px}.session-tools button{font-size:11px}.console{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(270px,1fr);padding:7px;background:#11130f;border:2px solid #080907;box-shadow:0 0 0 2px #505047,inset 0 0 6px #000;border-radius:9px;gap:8px}.channels{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}.channel{background:repeating-linear-gradient(92deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(100deg,#2d2e28,#20211d);border:1px solid #4b4d43;border-radius:3px;box-shadow:inset 2px 0 2px #0007,2px 0 2px #000;padding:12px 7px 13px;text-align:center;min-width:0}.channel.selected-track{border-top-color:#d1bd8c}.track-number{font-size:24px;font-weight:700;border:1px solid #545449;box-shadow:inset 0 0 0 3px #191a17;padding:4px 0;background:#1c1e19}.track-name{width:100%;background:transparent;border:0;text-align:center;font-size:10px;letter-spacing:.4px;margin:9px 0;color:#bebba9}.arm{padding:0;border:0;box-shadow:none;background:none;display:block;margin:0 auto;color:#bdb8a8;font-size:10px;letter-spacing:1px}.arm:before{content:'';display:block;width:19px;height:19px;border-radius:50%;margin:3px auto 6px;background:radial-gradient(circle at 40% 35%,#913830,#400b08 65%);box-shadow:0 0 0 3px #10120e,0 0 0 4px #4a4b41,inset 0 2px 3px #000}.arm[aria-pressed=true]:before{background:radial-gradient(circle at 40% 35%,#ff9c6d,#ff3727 65%);box-shadow:0 0 9px #ff352b,0 0 0 3px #151611}.pan-wrap{margin:16px 0 8px;position:relative}.knob{margin:auto;width:42px;height:42px;background:radial-gradient(circle at 40% 25%,#45463d,#191a16 70%);border:2px solid #0e100d;border-radius:50%;box-shadow:0 3px 4px #000,0 0 0 1px #656354;pointer-events:none;position:relative}.knob:before{content:'';position:absolute;width:2px;height:16px;background:#ddd8c7;left:18px;top:1px}.pan-wrap input{position:absolute;inset:0;width:100%;height:44px;opacity:0}.pan-wrap:focus-within{outline:1px solid #d4bb81}.pan-label{display:flex;justify-content:space-between;font-size:9px;margin:9px 9px 0;color:#aaa795}.fader-wrap{height:188px;position:relative;margin:16px auto 6px;width:68px;max-width:100%;background:repeating-linear-gradient(to top,transparent 0 22px,#a4a08a 22px 23px,transparent 23px 24px) 7px 0/30px 100% no-repeat}.fader-wrap:after{content:'+6\a\a 0\a\a−12\a\a−∞';white-space:pre;position:absolute;right:0;top:0;font:10px/20px monospace;color:#aba897;pointer-events:none}.fader{appearance:none;writing-mode:vertical-lr;direction:rtl;width:30px;height:188px;margin:0;position:absolute;left:7px;top:0;background:transparent!important;border:0;z-index:1}.fader::-webkit-slider-runnable-track{background:#080a07;width:7px;border:1px solid #515244;border-radius:3px;height:100%}.fader::-webkit-slider-thumb{appearance:none;width:31px;height:42px;background:linear-gradient(#b5b19e,#36382f 14%,#8a8777 20%,#c8c3b0 48%,#292b24 50%,#b4b09b 54%,#757567 85%,#b8b4a1);margin-left:-13px;border:1px solid #161911;border-radius:2px;box-shadow:0 3px 4px #000}.fader::-moz-range-track{background:#080a07;width:7px}.fader::-moz-range-thumb{width:29px;height:40px;background:linear-gradient(#bbb7a4,#5f6053,#c5c1ad,#494b3e);border-radius:2px}.gain-value{font:10px monospace;display:block;height:18px}.meter{height:72px;width:28px;position:relative;margin:7px auto 12px;background:#080b06;border:1px solid #4d5041;padding:4px;overflow:hidden}.meter i{position:absolute;left:5px;bottom:4px;width:8px;height:62px;background:repeating-linear-gradient(to top,transparent 0 5px,#11170d 5px 7px),linear-gradient(to top,#6cf02e 0 60%,#eadb2c 60% 80%,#ff5a16 80%);clip-path:inset(100% 0 0);filter:drop-shadow(0 0 2px #8de738)}.ms{display:flex;gap:4px;justify-content:center}.ms button{padding:5px 0;width:29px;font-size:10px}.mute[aria-pressed=true]{color:#ffc17a;background:#62401e}.solo[aria-pressed=true]{color:#e0f0ba;background:#46572d}.import{padding:7px 0;width:100%;font-size:8px;letter-spacing:.5px;margin-top:8px}.panel{border:1px solid #55574a;background:linear-gradient(110deg,#2d2e28,#1f211c);border-radius:5px;box-shadow:inset 0 0 0 3px #12140f,0 2px 3px #000}.deck{padding:25px 14px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}.cassette-housing{padding:27px 17px 10px;background:linear-gradient(115deg,#171a14,#34362b,#171913);border:3px solid #090c07;border-radius:8px;box-shadow:0 0 0 1px #72715d,inset 0 0 0 4px #383a2f;position:relative}.screw{position:absolute;top:6px;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#090b06 46%,#777360 48% 54%,#0c0f07 56%);box-shadow:0 0 0 2px #434535}.tl{left:7px}.tr{right:7px}.cassette{border:7px solid #10140e;border-radius:9px;background:linear-gradient(115deg,#34372b,#161b12);box-shadow:0 0 0 1px #4c4d3d,0 6px 13px #000;padding:12px 9px 0;position:relative}.tape-label{background:linear-gradient(110deg,#b9b09a,#e0d3b3,#b9b098);padding:10px 5px 7px;color:#34382b;border-radius:4px 4px 0 0;border-bottom:7px solid #171c11}.tape-label input{font:italic 17px Georgia,serif;width:100%;border:0;border-radius:0;border-bottom:1px solid #7b7966;background:none;color:#333729;padding:0 3px 8px}.tape-label small{font-size:6px;letter-spacing:1px;display:block;margin-top:6px}.tape-window{height:71px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;border:1px solid #53543e;border-radius:30px;background:#12170e;margin:0 6px}.tape-window>b{position:absolute;left:-14px;font-size:14px;color:#c0b69b}.reel{height:45px;width:45px;flex-shrink:0;border-radius:50%;background:repeating-conic-gradient(#817e68 0 13deg,#131a0e 13deg 60deg);border:7px solid #292e20;box-shadow:0 0 0 2px #77745c,inset 0 0 0 7px #10170c;animation:spin 3s linear infinite;animation-play-state:paused}.running .reel{animation-play-state:running}.tape-spool{height:34px;flex:1;max-width:60px;background:repeating-linear-gradient(90deg,#38281a 0 2px,#4a3120 2px 3px);border-radius:4px;box-shadow:inset -12px 0 15px #b26d2e88}.tape-stripe{height:33px;margin:7px -9px 0;padding:0 10px;background:linear-gradient(#963f2a 0 40%,#b9ab89 40%);display:flex;align-items:end;justify-content:space-between;color:#393c2e;font-size:8px}.tape-stripe strong{font-size:32px;line-height:32px;text-shadow:1px 1px #d6c8a7}.tape-base{text-align:center;margin:12px 15px 0;padding:9px 0;color:#070c04;background:linear-gradient(100deg,#3b4030,#191e13);border:1px solid #4b503c;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);font-size:20px;letter-spacing:8px}.cassette-housing>p{text-align:center;letter-spacing:3px;font-size:8px;margin:20px 0 7px}.counter-box{padding:15px;background:#171a13;border:2px solid #070b04;box-shadow:0 0 0 1px #52553f}.counter-box label{display:flex;justify-content:space-between;letter-spacing:2px;font-size:10px}.counter-box label span{font-size:8px;color:#9cac80;letter-spacing:1px}.counter-box>div{display:flex;gap:12px;margin-top:10px;align-items:center}.counter-box output{background:#050a03;color:#ff3e36;font:italic clamp(20px,2.8vw,37px) monospace;padding:10px;letter-spacing:2px;text-shadow:0 0 9px #f21b2377;flex:1;border:1px solid #404631;border-radius:2px}.counter-box button{font-size:9px;padding:12px 7px}.master{padding:0 5px}.master label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px}.master input{width:100%;height:18px;margin:8px 0}.master-meter{height:5px;background:#10150b;overflow:hidden}.master-meter i{display:block;height:100%;width:0;background:#a0c975}.master small{display:block;text-align:right;font:8px monospace;margin-top:7px;color:#979e85}.transport{margin-top:13px;padding:16px 24px 12px}.section-label{font-size:10px;letter-spacing:2px;display:flex;justify-content:space-between;margin-bottom:12px}.section-label span{font-size:8px;color:#8e957d}.transport-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;background:#12150e;padding:8px;border:1px solid #4b4f3d}.transport-buttons button{padding:0;background:none;border:0;box-shadow:none}.transport-buttons b{display:flex;align-items:center;justify-content:center;height:66px;background:repeating-linear-gradient(45deg,#ffffff04 0 1px,transparent 1px 3px),linear-gradient(120deg,#b4ae99,#878472 65%,#a5a18d);color:#10160b;font-size:34px;text-shadow:0 1px #e1dbc2;border:3px solid #403f32;outline:1px solid #96917b;box-shadow:0 5px 5px #000,inset 0 0 0 1px #cdc5a9;border-radius:4px}.transport-buttons span{display:block;padding-top:10px;font-size:11px;letter-spacing:1px}.transport-buttons #play b{color:#286315}.transport-buttons #record b{color:#a82217}.transport-buttons #play.active b{color:#72f43b;text-shadow:0 0 15px #63e91d}.transport-buttons #record.active b{color:#ff5138;text-shadow:0 0 15px #ff331d}.editor{margin-top:16px;overflow:hidden}.editor-toolbar{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}.editor-toolbar h2{margin-bottom:5px}.editor-toolbar span{color:#8c9580;font-size:10px}.edit-tools{display:flex;align-items:center;gap:6px}.edit-tools button{font-size:10px;padding:7px}.edit-tools label{font-size:9px;display:flex;align-items:center;gap:5px;margin:0 6px}.edit-tools input{width:60px}#loop[aria-pressed=true]{background:#485b30}#timeline-scroll{overflow:auto;max-height:380px;background:#11170e;border-top:1px solid #464e38;border-bottom:1px solid #464e38}#timeline{position:relative;min-width:100%}#ruler{height:28px;position:relative;background:#252e1d;cursor:crosshair;overflow:hidden}#ruler span{position:absolute;font:9px monospace;color:#98a486;height:100%;padding:8px 4px;border-left:1px solid #626f4e}.lane{height:39px;border-bottom:1px solid #343f2a;position:relative;background:repeating-linear-gradient(to right,transparent 0 127px,#b6d88c08 127px 128px)}.lane-label{position:sticky;left:0;top:0;display:inline-flex;align-items:center;height:38px;width:28px;padding-left:8px;background:#222c1ce6;color:#8b9a76;z-index:3;font:10px monospace;pointer-events:none}.clip{position:absolute;top:3px;height:33px;background:#607e46;border:1px solid #8eaf6a;border-radius:3px;overflow:hidden;cursor:grab;touch-action:none;padding:0;min-width:3px;box-shadow:none;color:#e8efdb}.clip.selected{outline:2px solid #e1d0a3;outline-offset:0}.clip canvas{width:100%;height:100%;position:absolute;left:0;top:0;opacity:.7;pointer-events:none}.clip span{position:absolute;left:5px;top:2px;font:8px monospace;text-shadow:0 1px 2px #000;white-space:nowrap;pointer-events:none}.lane:nth-child(2n) .clip{background:#6e7751;border-color:#9aab6f}.lane:nth-child(3n) .clip{background:#7a6951;border-color:#b79a70}#playhead{position:absolute;left:28px;top:0;bottom:0;width:1px;background:#f57e4c;pointer-events:none;z-index:4}#playhead:before{content:'';position:absolute;left:-4px;top:0;border-top:7px solid #f57e4c;border-left:4px solid transparent;border-right:4px solid transparent}.clip-settings{display:flex;align-items:center;gap:16px;padding:12px 16px;font-size:9px}.clip-settings label{white-space:nowrap}.clip-settings span{color:#8b947d;margin-left:auto}footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 6px 0;font-size:10px;color:#9ea68c}footer>div{display:flex;align-items:center;gap:7px}footer button{font-size:9px;padding:6px 9px}.status-dot{width:5px;height:5px;background:#a4c281;border-radius:50%;flex-shrink:0}dialog{max-width:540px;color:#c9c7b1;background:#252b20;border:1px solid #777d62;padding:28px;box-shadow:0 20px 80px #000;line-height:1.7}dialog::backdrop{background:#000a}dialog h2{font-size:17px}dialog label{display:block;margin:20px 0;font-size:10px;letter-spacing:1px}dialog select{display:block;width:100%;padding:10px;margin-top:7px}dialog button{margin-top:8px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1050px){body{padding:12px}.machine{padding:20px 12px 12px}header{padding:0 10px 20px}h1{font-size:29px}.console{grid-template-columns:minmax(0,2.4fr) minmax(230px,1fr)}.channel{padding:10px 4px}.deck{padding:20px 10px 12px}.cassette-housing{padding:23px 9px 8px}.cassette{padding:9px 4px 0}.tape-window{gap:7px}.reel{width:36px;height:36px}.tape-stripe{margin-left:-4px;margin-right:-4px}.cassette-housing>p{letter-spacing:1px}.counter-box{padding:10px}.counter-box output{font-size:23px}.editor-toolbar{align-items:start}.edit-tools{flex-wrap:wrap;justify-content:flex-end}.clip-settings{flex-wrap:wrap}.clip-settings span{margin:0}.fader-wrap{width:50px}.fader-wrap:after{font-size:8px}.fader{left:1px}}@media(max-width:760px){body{padding:8px}.machine{padding:19px 8px 10px}header{display:block}header p{letter-spacing:2px;font-size:8px}.session-tools{text-align:left;margin-top:18px}.online{font-size:8px}.console{display:flex;flex-direction:column;overflow:hidden}.channels{overflow-x:auto;grid-template-columns:repeat(8,minmax(68px,1fr));padding-bottom:5px}.deck{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}.cassette-housing{grid-row:span 2}.counter-box>div{flex-wrap:wrap}.counter-box output{font-size:22px;padding:6px}.counter-box label{font-size:8px;letter-spacing:1px;gap:6px}.counter-box button{padding:7px}.cassette-housing{padding:19px 7px 6px}.tape-label input{font-size:13px}.tape-label small{font-size:5px}.reel{width:29px;height:29px;border-width:5px}.tape-window{height:52px;gap:5px;margin:0 3px}.tape-base{font-size:12px;letter-spacing:4px}.cassette-housing>p{font-size:6px}.transport{padding:13px 10px 10px}.transport-buttons{gap:6px;padding:6px}.transport-buttons b{height:46px;font-size:24px}.transport-buttons span{font-size:8px;letter-spacing:.4px}.section-label span{font-size:6px;letter-spacing:1px}.editor-toolbar{display:block}.edit-tools{justify-content:start;margin-top:12px}.clip-settings{gap:8px;font-size:8px}.clip-settings input{width:65px}footer{align-items:start;flex-direction:column}.master label{font-size:8px}h1{font-size:28px}}


/* Keep animated positions off layout and reuse meter layers on mobile. */
#playhead{left:28px;will-change:transform}.meter i{clip-path:none;transform:scaleY(0);transform-origin:bottom;filter:none;will-change:transform}.master-meter i{width:100%;transform:scaleX(0);transform-origin:left;will-change:transform}
/* Mixer-first studio: details stay at the channel, secondary work stays in drawers. */
#editor[hidden]{display:none!important}.session-tools{display:flex;align-items:center;gap:7px}.session-tools button{min-height:38px}.input-route{width:100%;font:8px monospace;padding:7px 2px;margin:0 0 12px;border-color:#484c3f;background:#171c13;color:#aaa990;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-route:hover{color:#e3d4b2}.channel{padding-top:10px}.track-name{margin:8px 0}.fader-wrap,.fader{height:160px}.fader-wrap:after{line-height:17px}.meter{height:58px}.meter i{height:48px}.deck{gap:14px;padding-top:18px}.cassette-housing{padding-top:23px}.transport{margin-top:12px}.transport-buttons b{height:58px}.section-label #audio-info{color:#9ca48a}.editor-toolbar{border-bottom:1px solid #161c12}footer{justify-content:flex-start;padding-top:12px;min-height:28px;line-height:1.5}footer .status-dot{margin-right:2px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:15px}.dialog-heading h2{font-size:15px}.dialog-close{margin:0;min-width:40px;min-height:40px;font-size:22px;padding:0}.dialog-done{min-width:100px}.tape-actions{display:grid;gap:8px;min-width:230px}.tape-actions button{text-align:left;min-height:44px;margin:0}.input-note{font-size:11px;color:#a9af9a}#input-dialog{width:min(410px,calc(100vw - 24px))}#input-dialog p{font-size:12px}#input-dialog select{font-size:14px}#input-dialog label{margin:14px 0}#tape-dialog{border-radius:6px}.online{display:none}
@media(max-width:760px){.machine{padding-top:18px}header{display:flex;align-items:center;gap:6px;padding:0 6px 15px}h1{font-size:21px;letter-spacing:.2px}header p{font-size:6px;letter-spacing:1.3px;margin-top:5px}.session-tools{margin:0;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:148px}.session-tools button{font-size:9px;padding:6px;min-height:34px}.session-tools #save{display:none}.channels{grid-template-columns:repeat(8,minmax(65px,1fr))}.channel{padding:8px 4px}.track-number{font-size:20px}.track-name{font-size:9px}.input-route{font-size:7px;padding:9px 0;margin-bottom:10px}.arm:before{width:17px;height:17px}.pan-wrap{margin:12px 0 4px}.knob{width:34px;height:34px}.knob:before{left:14px;height:12px}.pan-wrap input{height:38px}.pan-label{margin-top:5px}.fader-wrap,.fader{height:120px}.fader-wrap{margin-top:12px}.fader-wrap:after{line-height:12px}.fader::-webkit-slider-thumb{height:32px}.gain-value{font-size:8px;height:14px}.meter{height:38px;margin:4px auto 8px}.meter i{height:28px}.ms button{padding:7px 0}.import{padding:8px 0;font-size:7px}.deck{grid-template-columns:1fr 1.1fr;padding:10px;gap:10px}.cassette-housing{padding:16px 7px 4px}.cassette{padding-top:6px}.tape-label{padding:5px}.tape-label input{padding-bottom:4px}.tape-label small{display:none}.tape-window{height:39px}.tape-stripe{height:20px;margin-top:4px}.tape-stripe strong{font-size:23px;line-height:24px}.tape-base{margin-top:5px;padding:4px 0;font-size:10px}.cassette-housing>p{margin:11px 0 4px;font-size:5px}.counter-box{padding:8px}.counter-box>div{gap:6px;flex-wrap:nowrap}.counter-box output{font-size:19px;letter-spacing:0;padding:5px}.counter-box button{font-size:7px;padding:8px 4px}.counter-box label{font-size:7px}.counter-box label span{font-size:6px}.master{align-self:end}.master input{margin:5px 0}.transport{position:sticky;bottom:8px;z-index:8;background:#282c21;padding:10px 8px 8px;box-shadow:0 0 0 3px #11160e,0 5px 16px #0009}.transport-buttons b{height:42px;font-size:22px}.transport-buttons span{font-size:7px;padding-top:7px}.transport .section-label{margin-bottom:8px;font-size:8px}.editor{margin-top:14px}.clip-settings{gap:10px}#input-dialog select{font-size:16px}.session-tools #save{display:inline-block}}
@media(max-width:480px){footer{flex-direction:row;align-items:center;gap:7px;font-size:9px}.deck{gap:8px}.cassette-housing{padding:12px 6px 4px}.cassette{border-width:4px;padding:4px 4px 0}.tape-label{padding:4px}.tape-window{height:30px}.reel{width:23px;height:23px;border-width:4px}.tape-spool{height:21px}.tape-base,.cassette-housing>p{display:none}.tape-stripe{height:15px;margin-bottom:6px}.tape-stripe strong{font-size:20px;line-height:20px}.counter-box{align-self:start}.counter-box output{font-size:18px}.master small{font-size:7px}}

/* Hardware finish — static materials only; no extra audio or animation work. */
:root{--ink:#c5bfb0;--muted:#8e897e;--green:#c6bcae;--metal:#242424;--line:#494744;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.65'/%3E%3C/svg%3E")}
body{background:radial-gradient(ellipse at 50% 12%,#302b26 0,#141413 48%,#0a0a09 100%);padding:28px 22px;color:var(--ink)}
.machine{border:2px solid #69645a;border-radius:17px;background-image:var(--grain),linear-gradient(110deg,#292929 0,#202121 46%,#272727 100%);background-size:128px 128px,100% 100%;padding:27px 22px 15px;box-shadow:0 0 0 2px #151514,0 0 0 5px #343230,0 0 0 7px #0e0e0d,0 16px 0 -7px #131212,0 28px 45px #000c,inset 0 2px 2px #b5ac9f66,inset 0 -4px 6px #000}
.machine:before,.machine:after{content:'';width:16px;height:16px;top:13px;border-radius:50%;background:linear-gradient(134deg,transparent 43%,#090908 44% 52%,#7d776e 53% 57%,transparent 58%),radial-gradient(circle at 40% 30%,#8d867c,#353331 45%,#0b0b0a 70%);box-shadow:0 0 0 2px #121111,0 1px 0 3px #77716955,inset 0 1px 2px #000;z-index:2}.machine:before{left:12px}.machine:after{right:12px}
header{padding:0 24px 23px}h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:35px;letter-spacing:1.2px;color:#d1c9b7;text-shadow:0 1px 0 #e9e0cd55,0 -1px #000,1px 2px 1px #0008}header p{color:#b2ac9e;font-size:9px;letter-spacing:4px}
button{background:var(--grain),linear-gradient(#373635,#232220 48%,#1a1918);border:1px solid #55524f;box-shadow:inset 0 1px #bcb3a533,inset 0 -2px 1px #000,0 2px 3px #000a;color:#c8c1b2}button:hover{filter:brightness(1.12)}
.session-tools button{background:linear-gradient(#343230,#232220);border:1px solid #121111;outline:1px solid #575450;border-radius:2px;font-size:10px;letter-spacing:.5px;box-shadow:inset 0 1px #918a8066,inset 0 -2px #0a0a09,0 3px 4px #0009}.session-tools{gap:10px}
.console{position:relative;border:3px solid #0a0a09;padding:8px;gap:8px;background:#141312;box-shadow:0 0 0 1px #706d68,0 0 0 4px #0d0d0c,inset 0 0 0 1px #464441,inset 0 5px 8px #000;border-radius:8px}
.channels{gap:3px}.channel{position:relative;background-image:var(--grain),linear-gradient(90deg,#1f1e1d,#2e2d2b 4%,#272624 40%,#252422 94%,#141312);background-size:128px 128px,100% 100%;border:1px solid #4b4945;border-radius:2px;box-shadow:inset 1px 0 #7e786f40,inset -1px 0 #000,0 1px 2px #000}.channel.selected-track{border-top-color:#8c8270}
.track-number{border:1px solid #0b0b0a;outline:1px solid #5a5753;border-radius:2px;margin:1px 3px 0;background:var(--grain),linear-gradient(#252422,#1d1c1b);box-shadow:inset 0 1px 4px #000,inset 0 -1px #8c857b44;font-family:Impact,'Arial Narrow',sans-serif;font-size:25px;font-weight:400;color:#ccc3b1;text-shadow:0 1px 1px #000;padding:3px}
.track-name{font-family:'Courier New',monospace;font-size:9px;color:#d0c6af;text-shadow:0 1px #000}.input-route{font-family:'Courier New',monospace;font-size:8px;background:linear-gradient(#151413,#2b2a28);color:#9f978c;border:1px solid #111010;outline:1px solid #4c4a46;box-shadow:inset 0 2px 3px #000;border-radius:2px;margin-top:1px}
.arm{background:none!important;border:0;box-shadow:none;font-size:9px;color:#bfb7a4;text-shadow:0 1px #000}.arm:before{background:radial-gradient(circle at 35% 28%,#c06b4b 0,#74241c 22%,#400907 58%,#190604 80%);box-shadow:inset 0 -2px 3px #000,0 0 0 2px #131212,0 0 0 4px #504e4a,0 2px 3px 4px #0008}.arm[aria-pressed=true]:before{background:radial-gradient(circle at 38% 32%,#ffd3a1,#ff5b30 35%,#d72817 72%,#760d08);box-shadow:inset 0 -2px 2px #7a0709,0 0 0 2px #171615,0 0 0 4px #5f5743,0 0 14px #e9432555}
.pan-wrap{background:repeating-conic-gradient(from 225deg at 50% 23px,#a9a195 0deg 1.5deg,transparent 1.5deg 30deg) center top/55px 47px no-repeat}.knob{width:43px;height:43px;border:2px solid #0b0b0a;background:radial-gradient(ellipse at 40% 20%,#42403d,#282725 52%,#1a1918 73%);box-shadow:0 0 0 1px #726f69,0 4px 4px #000,inset 0 1px 1px #d8cebe48,inset 0 -4px 4px #0e0e0d}.knob:before{left:19px;top:1px;height:17px;background:#e2d7bf;box-shadow:1px 0 #121111}.pan-label{background:linear-gradient(transparent,#272624 40%);color:#b6ada0}
.fader-wrap{background:repeating-linear-gradient(to top,transparent 0 18px,#999287 18px 19px,transparent 19px 20px) 3px 0/38px 100% no-repeat}.fader::-webkit-slider-runnable-track{width:8px;border:1px solid #686560;box-shadow:inset 2px 0 3px #000,0 0 0 1px #10100f;background:#060606}.fader::-webkit-slider-thumb{width:33px;height:44px;margin-left:-13px;border:1px solid #0d0d0c;border-radius:2px;background:linear-gradient(to bottom,#ded3c3 0 3%,#7a746b 4% 9%,#393735 10% 13%,#9e968b 14% 23%,#c9bfb1 24% 27%,#777169 28% 46%,#1d1c1b 47% 51%,#e1d6c6 52% 56%,#7c766d 57% 74%,#c2b9ab 75% 78%,#807a71 79% 89%,#42403d 90% 93%,#c5bcad 94%);box-shadow:0 5px 5px #000c,0 1px 0 1px #000,inset 1px 0 #e8ddcc80,inset -1px 0 #232220}
.meter{background:linear-gradient(100deg,#070706,#111010 70%,#050505);border:1px solid #0a0a09;outline:1px solid #565350;border-radius:2px;box-shadow:inset 0 2px 4px #000}.meter:after{content:'';position:absolute;inset:3px;pointer-events:none;background:linear-gradient(115deg,#e0d5c515,transparent 40%)}.meter i{width:8px;background:repeating-linear-gradient(to top,transparent 0 4px,#10100f 4px 6px),linear-gradient(to top,#70ee33 0 60%,#e0da29 60% 80%,#f85b1a 80%)}
.ms button{border-radius:2px;background:linear-gradient(#4a4844,#282725);border:1px solid #171615;outline:1px solid #63605c;box-shadow:inset 0 1px #b8afa266,0 2px 2px #000;font-size:9px}.import{background:linear-gradient(#2e2d2b,#232220);border-color:#1a1918;box-shadow:inset 0 1px #7e786f44,0 1px #78726a33;color:#999287;font-size:7px;letter-spacing:1px}
.deck{background-image:var(--grain),linear-gradient(115deg,#2a2927,#21201f);border:1px solid #4e4c48;border-radius:2px;box-shadow:inset 0 0 0 3px #181716,inset 0 5px 9px #000}
.cassette-housing{position:relative;isolation:isolate;border:3px solid #0e0e0d;box-shadow:0 0 0 1px #8e877d,0 0 0 4px #191817,inset 0 0 0 3px #4b4945,inset 0 6px 12px #000,0 4px 6px #000;background:var(--grain),linear-gradient(125deg,#1d1c1b,#3c3a38 45%,#1e1d1c);padding-top:27px;border-radius:7px}.cassette-housing:after{content:'';position:absolute;inset:17px 10px 41px;border-radius:6px;background:linear-gradient(125deg,#f3ead313 0,transparent 26% 63%,#f5e9d808 64%,transparent 66%);box-shadow:inset 0 0 14px #0009,inset 0 1px #d5cbbb2b;pointer-events:none;z-index:3}
.screw{width:12px;height:12px;background:linear-gradient(135deg,transparent 43%,#0b0b0a 44% 53%,#a9a195 54% 58%,transparent 59%),radial-gradient(circle at 35% 30%,#938c81,#2b2a28 65%,#0a0a09);box-shadow:0 0 0 2px #151413,0 0 0 3px #64615c55}.screw.tl{left:7px}.screw.tr{right:7px}
.cassette{padding:11px 8px 0;border:7px solid #171615;border-radius:9px;background:var(--grain),linear-gradient(130deg,#42403d,#272624 50%,#33312f);box-shadow:0 0 0 1px #736d65,0 9px 12px #000,inset 0 0 0 2px #55524f,inset 0 2px 4px #bab1a433}
.tape-label{background:var(--grain),linear-gradient(110deg,#b9ac8e,#dbceb1 45%,#b4ab9e);border-radius:3px 3px 0 0;border-bottom:8px solid #21201f;box-shadow:inset 0 1px #eee3d1,0 1px 2px #000;padding:12px 6px 8px}.tape-label input{font-family:'Bradley Hand','Segoe Print',Georgia,serif;font-size:20px;color:#3a3836;border-bottom:1px solid #7a746b;text-shadow:0 1px #ede2d177}.tape-label small{color:#605d59;font-size:6px;letter-spacing:1.5px}
.tape-window{height:76px;background:radial-gradient(ellipse at 50% 48%,#93552b55,transparent 45%),linear-gradient(100deg,#181716,#2c2b29 45%,#1d1c1b);border:3px solid #363432;outline:1px solid #8b847a;border-radius:35px;gap:13px;box-shadow:inset 0 0 0 2px #10100f,inset 0 7px 10px #000;margin:0 6px}.tape-window>b{left:-18px;font-family:Impact,sans-serif;font-size:24px;font-weight:400;color:#b7aea1}.reel{width:48px;height:48px;border:6px solid #2d2c2a;background:radial-gradient(circle,#0f0f0e 0 17%,transparent 18% 32%,#9d958a 33% 37%,transparent 38%),repeating-conic-gradient(#aaa296 0deg 12deg,#282725 12deg 60deg);box-shadow:0 0 0 2px #7c766d,0 0 0 4px #181716,inset 0 0 0 4px #272624,0 3px 4px #000}.tape-spool{height:39px;max-width:66px;background:repeating-linear-gradient(90deg,#46331e 0 1px,#271f13 1px 2px,#725134 2px 3px);box-shadow:inset 8px 0 10px #0d0d0c,inset -12px 0 10px #d4803966;border:1px solid #6b5834}
.tape-stripe{background:linear-gradient(#803c2e 0 38%,#bdb4a6 39%);height:37px;color:#464441;margin-top:9px}.tape-stripe strong{font:38px/37px Impact,sans-serif;color:#c7bdaf;-webkit-text-stroke:1px #42403d;text-shadow:2px 2px #232220}.tape-base{background:var(--grain),linear-gradient(100deg,#4c4a46,#393735);border:2px solid #64615c;box-shadow:inset 0 3px 5px #000;letter-spacing:10px;padding:10px 0;margin-top:15px;color:#0d0d0c}.cassette-housing>p{font-size:8px;color:#c2b9ab;letter-spacing:2.5px}
.counter-box{background:var(--grain),linear-gradient(125deg,#2d2c2a,#1f1e1d);border:2px solid #0e0e0d;box-shadow:0 0 0 1px #6b6863,inset 0 2px 4px #000}.counter-box output{background:radial-gradient(ellipse,#23080755,#060606 75%);border:1px solid #070706;outline:1px solid #5b5854;border-radius:3px;color:#ff3c33;letter-spacing:3px;font-weight:400;text-shadow:0 0 2px #ff6a4b,0 0 9px #ff1b2a70;box-shadow:inset 0 5px 12px #000}.counter-box label{color:#c2b9ab}.counter-box button{border-color:#191817;outline:1px solid #5d5a56;color:#c9bfb1}.master{padding:0 6px}.master input{accent-color:#b3aa9e}.master label{color:#beb5a7}.master small{color:#9c9589}
.transport{position:relative;background:var(--grain),linear-gradient(125deg,#343230,#282725);border:2px solid #121111;outline:1px solid #78726a;box-shadow:inset 0 0 0 3px #454340,inset 0 3px 6px #000,0 3px 5px #000;border-radius:5px;padding:18px 25px 14px}.transport:before,.transport:after{content:'';position:absolute;top:10px;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,transparent 43%,#090908 44% 53%,#a8a094 54% 58%,transparent 59%),radial-gradient(circle at 35% 30%,#958e83,#292826 65%,#080807);box-shadow:0 0 0 2px #171615,0 0 0 3px #68656055;pointer-events:none}.transport:before{left:9px}.transport:after{right:9px}.section-label{padding-left:10px;color:#cbc1b3;letter-spacing:2px}.transport-buttons{background:#0f0f0e;border:2px solid #0b0b0a;outline:1px solid #585551;border-radius:3px;padding:8px;gap:10px;box-shadow:inset 0 3px 8px #000}
.transport-buttons b{height:70px;border:3px solid #3d3b38;outline:1px solid #938c81;background:var(--grain),linear-gradient(125deg,#c3baac 0,#9a9388 38%,#ada598 70%,#bcb3a5 100%);box-shadow:inset 0 2px 1px #eee3d1,inset 2px 0 1px #e3d8c85e,inset 0 -5px 1px #736d65,inset -2px 0 2px #5e5b57,0 4px 0 #0f0f0e,0 6px 7px #000;border-radius:4px;color:#21201f;text-shadow:0 1px #e3d8c8;font-size:35px}.transport-buttons button:active{transform:translateY(2px)}.transport-buttons button:active b{box-shadow:inset 0 1px 3px #494744,inset 0 -1px #a0988d,0 2px 2px #000}.transport-buttons span{color:#c3baac;font-size:10px;letter-spacing:1.5px;padding-top:12px}.transport-buttons #record b{color:#ac2c20;text-shadow:0 1px #edb184}.transport-buttons #play b{color:#5e5b57}.transport-buttons #play.active b{color:#74df3c;text-shadow:0 0 10px #6acb29}.transport-buttons #record.active b{color:#f83d24;text-shadow:0 0 10px #f43f22}
.editor{background:var(--grain),linear-gradient(#2e2d2b,#242321);border-color:#64615c}.editor-toolbar{background:#292826}footer{color:#9d958a}.status-dot{background:#aca497}
/* Neutralize the old olive cast: hardware is charcoal, metal is warm silver. */
.channel,.deck,.cassette-housing,.transport{background-image:var(--grain),linear-gradient(110deg,#2d2c2b,#222120 75%,#2a2927)}.deck{border-color:#4b4945}.cassette-housing{border-color:#0b0b0a;box-shadow:0 0 0 1px #77726a,0 0 0 4px #131212,inset 0 0 0 3px #413f3c,inset 0 6px 12px #000,0 4px 6px #000}.transport{outline-color:#696661}.transport-buttons b{background:var(--grain),linear-gradient(125deg,#c1b8a2,#968f84 38%,#aaa18d 70%,#b7ae97)}
@media(max-width:1050px){.tape-window{gap:8px}.reel{width:38px;height:38px}.tape-label input{font-size:17px}.counter-box output{letter-spacing:1px}.transport-buttons b{height:60px}}
@media(max-width:760px){body{padding:10px 9px}.machine{padding:20px 8px 11px;border-radius:13px}.machine:before,.machine:after{width:10px;height:10px;top:9px}.machine:before{left:9px}.machine:after{right:9px}header{padding:0 7px 16px;gap:6px}h1{font-size:21px;letter-spacing:.2px}header p{font-size:6px;letter-spacing:1.2px}.session-tools{gap:5px}.session-tools button{font-size:8px;min-height:30px;padding:5px}.console{padding:6px;gap:8px}.track-number{font-size:22px}.input-route{font-size:7px;padding:8px 0}.track-name{font-size:8px}.pan-wrap{background-size:45px 40px;background-position:center top}.knob{width:34px;height:34px}.knob:before{left:14px;height:13px}.fader::-webkit-slider-thumb{height:34px;width:31px;margin-left:-12px}.transport{position:sticky;bottom:8px;padding:10px 8px 8px;z-index:8}.transport:before,.transport:after{width:8px;height:8px;top:7px}.transport:before{left:6px}.transport:after{right:6px}.transport .section-label{padding-left:11px;font-size:7px;margin-bottom:9px}.transport-buttons{gap:6px;padding:6px}.transport-buttons b{height:43px;font-size:24px;border-width:2px}.transport-buttons span{font-size:7px;letter-spacing:.4px;padding-top:9px}.cassette-housing{padding:17px 7px 6px}.cassette{padding:6px 5px 0;border-width:5px}.tape-label{padding:6px 4px;border-bottom-width:5px}.tape-label input{font-size:14px}.tape-window{height:43px;border-width:2px;gap:6px;margin:0 4px}.tape-window>b{font-size:14px;left:-11px}.reel{width:27px;height:27px;border-width:4px;box-shadow:0 0 0 1px #888178,0 0 0 3px #191817,inset 0 0 0 3px #2b2a28}.tape-spool{height:24px}.tape-stripe{height:22px;margin-top:6px}.tape-stripe strong{font-size:25px;line-height:24px}.counter-box output{font-size:20px;letter-spacing:0}.counter-box label{font-size:7px}.counter-box button{font-size:7px;padding:7px 4px}.master label{font-size:8px}.cassette-housing:after{inset:12px 7px 8px}.tape-base{padding:4px 0;margin-top:6px;font-size:10px}.cassette-housing>p{font-size:5px;letter-spacing:1px}}
@media(max-width:480px){.deck{padding:10px;gap:8px}.cassette-housing{padding:12px 5px 5px}.cassette{padding:4px 4px 0;border-width:4px}.tape-label{padding:4px;border-bottom-width:4px}.tape-label input{font-size:13px}.tape-window{height:31px;gap:5px}.reel{width:23px;height:23px;border-width:3px}.tape-spool{height:20px}.tape-stripe{height:17px;margin-top:4px;margin-bottom:5px}.tape-stripe strong{font-size:22px;line-height:21px}.tape-base,.cassette-housing>p{display:none}.counter-box output{font-size:18px}.counter-box{padding:8px}.input-route{font-size:6.5px}.ms button{font-size:8px}.transport-buttons b{height:41px;font-size:22px}}
.master input[type=range]{appearance:none;background:transparent;border:0;height:20px;padding:0}.master input[type=range]::-webkit-slider-runnable-track{height:7px;background:#080a07;border:1px solid #666356;border-radius:2px;box-shadow:inset 0 2px 3px #000}.master input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:17px;margin-top:-6px;border:1px solid #11120e;border-radius:2px;background:linear-gradient(90deg,#b7b29f,#717363 24%,#bfb9a1 46%,#24291c 48% 54%,#c6bfa5 56%,#7a7c69 80%,#b8b29b);box-shadow:0 2px 3px #000}.master input[type=range]::-moz-range-track{height:6px;background:#080a07;border:1px solid #666356}.master input[type=range]::-moz-range-thumb{width:24px;height:16px;background:linear-gradient(90deg,#b7b29f,#717363,#bfb9a1,#24291c,#c6bfa5);border:1px solid #11120e;border-radius:2px}

/* Header utilities live behind one hardware-style menu button. */
#studio-menu{position:relative;z-index:20}#studio-menu>#studio-menu-toggle{display:flex;align-items:center;justify-content:center;list-style:none;width:44px;height:40px;cursor:pointer;color:#c9c1ae;background:linear-gradient(#363632,#20201d);border:1px solid #10110e;outline:1px solid #5d5b51;border-radius:2px;box-shadow:inset 0 1px #918e7766,inset 0 -2px #080a06,0 3px 4px #0009;font:23px/1 Arial,sans-serif;user-select:none}#studio-menu>#studio-menu-toggle::-webkit-details-marker{display:none}#studio-menu>#studio-menu-toggle:focus-visible{outline:2px solid #d4bb81;outline-offset:3px}#studio-menu:has([aria-expanded=true])>#studio-menu-toggle{background:#171815}.studio-menu-items{position:absolute;right:0;top:calc(100% + 10px);width:180px;padding:8px;display:grid;gap:6px;background:var(--grain),linear-gradient(#2e2e2a,#1c1d19);border:1px solid #777162;border-radius:4px;box-shadow:0 8px 20px #000b}.session-tools .studio-menu-items button{width:100%;min-height:42px;text-align:left;font-size:12px;padding:10px 12px;outline:none;margin:0}.session-tools #studio-menu .studio-menu-items[hidden]{display:none}@media(max-width:760px){.session-tools{max-width:none}#studio-menu>#studio-menu-toggle{width:42px;height:36px}.session-tools .studio-menu-items button{font-size:12px;min-height:44px}.studio-menu-items{width:180px}}

/* Built-in rack: one small switch per strip, controls revealed only on demand. */
.fx-route{width:100%;min-height:28px;margin:4px 0 2px;font-size:10px;letter-spacing:2px;color:#a5a49d;background:linear-gradient(#2d2e2c,#181917);border:1px solid #090a09;box-shadow:inset 0 1px #ffffff13;}
.fx-route::before{content:'';display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#383a31;box-shadow:inset 0 1px 2px #000;}
.fx-route.enabled::before{background:#b9c77f;box-shadow:0 0 5px #b9c77f88;}
.fx-route[aria-expanded="true"]{border-color:#9c9b84;color:#e0dbcb;}
.fx-panel{margin-top:14px;padding:18px;background:linear-gradient(130deg,#292a27,#161715);border:1px solid #090a09;box-shadow:inset 0 1px #ffffff17,0 3px 8px #0008;}
.fx-panel[hidden]{display:none;}.fx-heading{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.fx-heading h2{margin:0 auto 0 0;font-size:12px;letter-spacing:2px;color:#dad5c4}.fx-heading label{font-size:12px;color:#b8b4a7;display:flex;align-items:center;gap:6px}.fx-heading button{min-height:40px}.fx-note{font-size:11px;color:#9c998e;margin:8px 0 16px}#fx-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.fx-module{padding:12px;border:1px solid #090a09;background:#1a1b18;box-shadow:inset 0 2px 6px #0009;border-radius:3px}.fx-switch{display:flex;align-items:center;gap:8px;min-height:36px;font-size:10px;letter-spacing:1px;color:#d8d1bc}.fx-panel input[type=checkbox]{accent-color:#bac887;width:17px;height:17px;flex-shrink:0}.fx-module fieldset{border:0;padding:8px 0 0;margin:0;min-width:0}.fx-module fieldset:disabled{opacity:.38}.fx-module fieldset label{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:11px;color:#bbb6a6;margin:8px 0}.fx-module output{font-variant-numeric:tabular-nums;color:#ddd7c3}.fx-module input[type=range]{grid-column:1/-1;width:100%;min-width:0;min-height:32px;accent-color:#b9b29b;margin:0;cursor:pointer}
@media(max-width:900px){#fx-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-module:first-child{grid-column:1/-1}}
@media(max-width:480px){.fx-panel{padding:12px}#fx-controls{gap:8px}.fx-module{padding:8px}.fx-heading{gap:10px}.fx-heading h2{width:100%}.fx-heading button{margin-left:auto}}

.track-number{width:calc(100% - 6px);cursor:pointer}.channel-details{display:none}.mini-track-name{display:none}#fx-tabs{display:none}
/* Pocket deck: the viewport is the enclosure, not a vertically stacked page. */
@media(max-width:600px),(max-width:1000px) and (max-height:500px),(max-width:1400px) and (any-pointer:coarse){
  html{height:100%;overflow:hidden}body{height:100vh;height:100dvh;overflow:hidden;padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))}
  .machine{width:100%;height:100%;min-height:0;padding:10px 5px 5px;display:grid;grid-template-rows:40px minmax(0,1fr) 73px 18px;gap:7px;border-radius:12px;box-shadow:inset 0 2px 2px #b5ac9f66,inset 0 -4px 6px #000,0 0 0 2px #0c0c0b}
  .machine:before,.machine:after{width:7px;height:7px;top:5px}.machine:before{left:5px}.machine:after{right:5px}
  header{padding:0 7px;min-width:0;gap:8px}h1{font-size:22px}header p{font-size:6px;margin:3px 0 0;letter-spacing:1.5px}#studio-menu>#studio-menu-toggle{width:40px;height:34px}.session-tools{align-self:center}
  .console{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 91px;gap:6px;padding:4px;overflow:visible;min-height:0;box-shadow:0 0 0 1px #706d68,inset 0 0 6px #000}
  .channels{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;min-height:0;overflow:visible;padding:0}
  .channel{padding:4px 2px;min-height:0;display:grid;grid-template-rows:31px 10px 28px 36px minmax(35px,1fr) 12px 17px 48px;gap:3px;align-items:center}
  .track-number{width:100%;margin:0;padding:0;font-size:22px;height:29px;min-width:0;outline-offset:0}
  .channel .track-name,.channel .input-route,.channel .pan-wrap,.channel .import{display:none}
  .channel .fx-route{padding:0;margin:0;min-height:28px;font-size:8px;letter-spacing:.5px}.fx-route::before{width:4px;height:4px;margin-right:3px}
  .arm{width:100%;height:36px;font-size:7px;letter-spacing:0}.arm:before{height:13px;width:13px;margin:3px auto 5px}
  .fader-wrap{height:100%;min-height:0;width:100%;margin:0;background:repeating-linear-gradient(to top,transparent 0 19px,#8d877a 19px 20px) center/24px 100% no-repeat}.fader-wrap:after{display:none}
  .fader{width:100%;height:100%;left:0;top:0;touch-action:none}.fader::-webkit-slider-thumb{width:27px;height:28px;margin-left:-10px}.fader::-moz-range-thumb{width:25px;height:26px}
  .gain-value{font-size:7px;height:12px;line-height:12px;white-space:nowrap;letter-spacing:-.3px}
  .meter{height:15px;width:100%;margin:0;padding:1px;outline:none}.meter i{height:11px;width:calc(100% - 4px);left:2px;bottom:2px;background:linear-gradient(to top,#70ee33,#e0da29 75%,#f85b1a)}
  .ms{display:grid;grid-template-columns:1fr;gap:3px}.ms button{width:100%;height:22px;min-height:0;padding:0;font-size:8px;outline:none}
  .deck{min-width:0;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:38px 1fr;padding:5px;gap:4px 8px}
  .cassette-housing{min-width:0;grid-row:1/3;padding:6px 4px 3px;border-width:2px;border-radius:4px;box-shadow:0 0 0 1px #77726a,inset 0 0 0 2px #413f3c}.cassette-housing .screw{width:5px;height:5px;top:3px}.cassette{height:100%;padding:3px;border-width:2px;border-radius:4px}.tape-label{padding:1px 3px;border-bottom-width:2px}.tape-label input{font-size:16px;line-height:18px;padding:0;min-width:0;max-width:100%}.tape-window{height:22px;margin:3px 5px 0;gap:8px;border-width:1px}.tape-window>b{font-size:10px;left:-9px}.reel{height:15px;width:15px;border-width:2px}.tape-spool{height:15px}.tape-stripe,.tape-base,.cassette-housing>p,.tape-label small{display:none}.cassette-housing:after{inset:4px;pointer-events:none}
  .counter-box{height:38px;padding:3px 5px;align-self:stretch}.counter-box label{font-size:5px;letter-spacing:.6px}.counter-box label span{font-size:5px}.counter-box>div{margin-top:2px;gap:4px}.counter-box output{font-size:17px;line-height:19px;padding:0 3px;min-width:0}.counter-box button{padding:0 3px;font-size:6px;height:21px}
  .master{padding:0;align-self:center}.master label{font-size:6px;letter-spacing:1px}.master input[type=range]{height:15px;margin:2px 0}.master small{display:none}.master-meter{height:3px}
  .transport{position:relative;bottom:auto;margin:0;padding:5px 7px;min-height:0;z-index:8}.transport .section-label{font-size:6px;margin:0 0 4px;line-height:7px}.transport .section-label span{font-size:5px}.transport-buttons{padding:3px 4px;gap:7px}.transport-buttons b{height:31px;font-size:20px}.transport-buttons span{padding-top:4px;font-size:6px;line-height:8px}.transport:before,.transport:after{top:5px;width:6px;height:6px}
  footer{min-height:0;padding:0 3px;gap:5px;align-items:center;font-size:8px;line-height:14px;overflow:hidden}#status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-dot{width:4px;height:4px}
  .channel-details{display:grid;grid-template-columns:1fr 1fr;gap:8px}.channel-details label{margin:0!important}.channel-details input{display:block;width:100%;font-size:16px;min-width:0;padding:5px}.channel-details input[type=range]{height:32px;padding:0}.channel-details button{grid-column:1/-1;min-height:36px;margin:0!important}.channel-details output{font-size:10px;letter-spacing:0}
  dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:16px;overflow:auto;border-radius:6px}.dialog-heading{gap:10px;margin-bottom:10px}.dialog-heading h2{font-size:13px}#input-dialog label{margin:8px 0}#input-dialog select{padding:7px;margin-top:3px}#input-dialog p{font-size:10px;line-height:1.35;margin:8px 0}.input-note{display:none}#input-dialog .dialog-done{margin-top:4px}#input-dialog button{min-height:36px}
  .fx-panel{position:fixed;z-index:15;inset:calc(61px + env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) calc(111px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));margin:0;padding:12px;box-shadow:0 0 0 3px #111,0 10px 30px #000c;overflow:auto}
  .fx-heading{gap:8px;flex-wrap:nowrap}.fx-heading h2{width:auto;font-size:10px;letter-spacing:1px}.fx-heading label{font-size:10px;white-space:nowrap;gap:3px}.fx-heading button{font-size:11px;min-height:34px;padding:4px 8px}.fx-note{margin:6px 0 10px;font-size:9px}
  #fx-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:10px}#fx-tabs button{padding:7px 1px;font-size:11px;min-height:34px}#fx-tabs button[aria-pressed=true]{color:#e2d9bf;border-color:#bbb18d;background:#474337}
  #fx-controls{display:block}.fx-module{padding:8px 10px}.fx-module:not(.current){display:none}.fx-module fieldset{padding:0}.fx-module fieldset label{margin:5px 0;gap:2px}.fx-module input[type=range]{min-height:28px}.fx-switch{min-height:28px}
  #editor{position:fixed;z-index:14;inset:calc(61px + env(safe-area-inset-top)) 9px calc(111px + env(safe-area-inset-bottom));margin:0;overflow:auto;box-shadow:0 0 0 3px #111}.editor-toolbar{padding:8px}.edit-tools{margin-top:6px;gap:4px}.edit-tools button{padding:6px;font-size:9px}.clip-settings{padding:8px}.clip-settings span{display:none}#timeline-scroll{max-height:calc(100dvh - 340px)}.lane{height:25px}.lane-label{height:24px}.clip{height:20px}.clip-settings input{font-size:16px;width:64px}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .machine{grid-template-rows:30px minmax(0,1fr) 62px 12px;gap:5px;padding-top:6px}header h1{font-size:19px}header p{display:none}#studio-menu>#studio-menu-toggle{height:27px}.console{grid-template-columns:minmax(0,3fr) minmax(150px,1fr);grid-template-rows:minmax(0,1fr)}.deck{display:flex;flex-direction:column;justify-content:center;gap:8px}.cassette-housing{width:100%;height:72px;flex-shrink:0}.counter-box{width:100%}.master{width:100%}.channel{grid-template-rows:24px 9px 23px 28px minmax(20px,1fr) 10px 10px 23px;gap:3px}.track-number{height:23px;font-size:17px}.channel .fx-route{min-height:23px}.arm{height:28px}.arm:before{height:10px;width:10px;margin:2px auto 3px}.ms{grid-template-columns:1fr 1fr}.meter{height:9px}.meter i{height:6px;bottom:1px}.fader::-webkit-slider-thumb{height:22px}.transport{padding:3px 9px}.transport .section-label{display:none}.transport-buttons b{height:30px}.transport-buttons span{padding-top:4px}.fx-panel{inset:44px max(9px,env(safe-area-inset-right)) 88px max(9px,env(safe-area-inset-left));padding:7px 10px;display:grid;grid-template-columns:130px minmax(0,1fr);gap:5px 12px}.fx-panel[hidden]{display:none}.fx-heading{grid-column:1/-1}.fx-note{display:none}#fx-tabs{grid-template-columns:1fr 1fr;align-content:start;margin:0}#fx-tabs button{min-height:30px;padding:4px}#fx-controls{min-width:0}.fx-module fieldset{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}.fx-module fieldset label{margin:0}.fx-switch{min-height:23px}.fx-module{padding:4px 8px}#editor{top:44px;bottom:88px}
}

@media(max-width:600px),(max-width:1000px) and (max-height:500px),(max-width:1400px) and (any-pointer:coarse){.mini-track-name{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:7px/10px 'Courier New',monospace;color:#c7bead}}

/* T8 / revision II — ivory instrument panels and color-coded channel modules. */
:root{--ink:#d3d0c8;--t8-silver:linear-gradient(120deg,#f0ede6 0%,#d6d2ca 40%,#e9e5dd 68%,#bbb8b0 100%)}
body{background:#161717}.machine{max-width:960px;padding:16px 16px 12px;border:1px solid #555653;border-radius:20px;background-image:var(--grain),linear-gradient(100deg,#323331,#202221 50%,#30312f);box-shadow:inset 0 1px 5px #b8bbb377,0 16px 60px #000a}.machine:before,.machine:after{display:none}
header{min-height:105px;padding:18px 25px;margin:0 0 17px;border:1px solid #aaa9a1;border-radius:13px;color:#202220;background:var(--grain),var(--t8-silver);box-shadow:inset 0 2px 2px #fff,0 4px 5px #000b;gap:16px}.brand{display:flex;align-items:center;gap:22px;min-width:0}.brand-mark{font:58px/1 'Helvetica Neue',Arial,sans-serif;letter-spacing:1px;border-right:1px solid #444642;padding-right:21px;color:#1e211f}.brand h1{font:22px/1.3 'Helvetica Neue',Arial,sans-serif;letter-spacing:7px;color:#242623;text-shadow:none;white-space:nowrap}.brand p{font-size:8px;letter-spacing:4px;color:#545752;margin-top:6px}#studio-menu>#studio-menu-toggle{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#363836,#121413 80%);border:2px solid #090b0a;outline:2px solid #777a73;box-shadow:0 4px 5px #0006,inset 0 0 0 3px #434642;font-size:30px;color:#eeebe1}.studio-menu-items{color:#d3d0c8}
.console{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:20px;border:0;box-shadow:none;padding:0;background:none;overflow:visible}.channels{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;overflow:visible;padding:0}.channel{--accent:#fb6954;display:grid;grid-template-rows:37px 22px 48px 81px minmax(180px,1fr) 15px 21px 83px;gap:8px;padding:25px 10px 12px;height:720px;position:relative;min-height:0;border:1px solid #565656;border-radius:9px;background:var(--grain),linear-gradient(95deg,#343434,#272727 65%,#303030);box-shadow:inset 0 0 0 4px #1d1d1d,inset 0 2px 4px #a5aaa05c,0 0 0 2px #161616,0 4px 4px #0009}
.channel:nth-child(2){--accent:#f4c861}.channel:nth-child(3){--accent:#8bd889}.channel:nth-child(4){--accent:#6ed8d4}.channel:nth-child(5){--accent:#6bc8f1}.channel:nth-child(6){--accent:#ab8beb}.channel:nth-child(7){--accent:#ed77b5}.channel:nth-child(8){--accent:#e6d5b8}
.channel:before{content:'';position:absolute;top:7px;left:8px;right:8px;height:4px;background:var(--accent);border-radius:3px;box-shadow:0 0 6px color-mix(in srgb,var(--accent) 30%,transparent),0 1px #fff6}.track-number{width:100%;height:36px;margin:0;padding:0;border:0;outline:0;background:none;box-shadow:none;font:27px/1 Impact,'Arial Narrow',sans-serif;color:#d1d3cb;text-shadow:none}.track-name{margin:0;font:12px/20px Arial,sans-serif;letter-spacing:0;min-width:0}.channel .input-route,.channel .pan-wrap,.channel .import{display:none}.channel-details{display:grid;grid-template-columns:1fr 1fr;gap:10px}.channel-details label{margin:0!important}.channel-details input{display:block;width:100%;min-width:0;font-size:16px;padding:6px}.channel-details button{grid-column:1/-1}.channel-details input[type=range]{padding:0;height:32px}.channel-details output{font-size:10px}
.channel .fx-route{margin:0;min-height:44px;padding:0;font:14px Arial,sans-serif;letter-spacing:0;border:2px solid #0e0e0e;border-radius:5px;background:linear-gradient(#393939,#242424);box-shadow:inset 0 1px #a8a8a477,0 2px 3px #0008;color:#dddcd5}.fx-route::before{display:none}.fx-route.enabled{color:var(--accent);box-shadow:inset 0 1px #a8a8a477,0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)}
.arm{height:76px;width:100%;position:relative;padding-top:17px!important;font-size:10px;letter-spacing:.5px}.arm:after{content:'';position:absolute;top:2px;left:calc(50% - 4px);height:7px;width:7px;border-radius:50%;background:#6a2925;border:1px solid #0e1510;box-shadow:0 0 0 1px #62665f}.arm[aria-pressed=true]:after{background:#fa7c60;box-shadow:0 0 5px #f95e46}.arm:before{width:27px;height:27px;border:7px solid #252825;margin:0 auto 9px;background:radial-gradient(circle at 35% 28%,#ff5145,#bc1d16 70%);box-shadow:0 0 0 2px #0b0e0c,0 0 0 4px #6d746b,0 4px 5px 4px #0008}.arm[aria-pressed=true]:before{box-shadow:0 0 0 2px #0b0e0c,0 0 0 4px #959e90,0 0 12px #df493655;background:radial-gradient(circle at 35% 28%,#ff6758,#d8251c 70%)}
.fader-wrap{width:100%;height:100%;margin:0;min-height:0;background:repeating-linear-gradient(to top,transparent 0 49px,#90958b 49px 50px) center/100% 100% no-repeat}.fader-wrap:after{content:'+6\a\a 0\a\a−6\a\a−12\a\a−24\a\a−∞';left:0;right:auto;top:8px;font:9px/18px Arial,sans-serif;color:#bbc0b5}.fader{width:100%;height:100%;left:0;top:0}.fader::-webkit-slider-runnable-track{width:12px;border:1px solid #454545;border-radius:9px;background:linear-gradient(90deg,#080808,#171717,#080808);box-shadow:inset 0 3px 4px #000,0 1px #979e8f}.fader-wrap:before{content:'';position:absolute;width:3px;left:calc(50% - 1.5px);top:20%;bottom:5%;border-radius:3px;background:var(--accent);opacity:.55;z-index:1;pointer-events:none}.fader{z-index:2}.fader::-webkit-slider-thumb{width:37px;height:64px;margin-left:-13px;border:1px solid #666b60;border-radius:5px;background:linear-gradient(90deg,transparent 47%,#30352d 48% 52%,transparent 53%) center/100% 63% no-repeat,linear-gradient(105deg,#f6f4ed,#c8c6bf 22%,#edeae3 50%,#dbd8d0 78%,#aaa79f);box-shadow:inset 0 2px 3px #fff,inset 0 -4px 3px #87847c,0 5px 5px #000a}.fader::-moz-range-thumb{width:35px;height:62px;border-radius:5px;background:var(--t8-silver)}.gain-value{font:9px monospace;color:#a3aa9d}.meter{height:16px;width:100%;margin:0;border:0;outline:none;background:#0f0f0f;border-radius:3px}.meter i{width:calc(100% - 4px);height:12px;left:2px;bottom:2px;background:var(--accent)}
.ms{display:grid;grid-template-columns:1fr;gap:6px}.ms button{height:37px;width:100%;padding:0;font-size:12px;outline:0;border:2px solid #141414;background:linear-gradient(#3b3b3b,#252525);box-shadow:inset 0 1px #adb6a077,0 3px 3px #0006;border-radius:4px}.ms button:before{content:'';display:inline-block;width:5px;height:10px;margin-right:10px;vertical-align:middle;border-radius:3px;background:#7b8174;border:1px solid #080f07;box-shadow:0 0 0 1px #7e8778}.ms button[aria-pressed=true]:before{background:var(--accent);box-shadow:0 0 5px var(--accent)}
.deck{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr;gap:10px;padding:0;height:255px;background:none;border:0;box-shadow:none}.cassette-housing,.control-plate{border:1px solid #a2a89c;border-radius:11px;background:var(--grain),var(--t8-silver);box-shadow:inset 0 2px #fff,0 4px 5px #000b;color:#282e26;min-width:0}.cassette-housing{grid-row:auto;padding:48px 24px 18px 65px;position:relative}.cassette-housing:before{content:'TAPE —';position:absolute;top:17px;left:20px;font:12px Arial,sans-serif;letter-spacing:3px}.cassette-housing:after{inset:46px 23px 17px 64px}.cassette-housing>.screw{display:none}.cassette-housing>p{display:none}.cassette{height:100%;padding:6px 9px;border:5px solid #181818;border-radius:8px;background:linear-gradient(#343434,#191919);box-shadow:0 0 0 2px #65665f,inset 0 3px 6px #000}.tape-label{padding:4px 6px;border-bottom:4px solid #20261c;background:linear-gradient(#deddd0,#babbae)}.tape-label input{font-size:20px;line-height:26px;padding:0;color:#2c3427}.tape-label small{display:none}.tape-window{height:65px;border:0;outline:0;border-radius:0;background:linear-gradient(#0e0e0e,#282828,#0e0e0e);justify-content:space-around;gap:25px;margin:4px 0 0;box-shadow:none}.reel{width:44px;height:44px;border:5px solid #a5aa99;background:radial-gradient(circle,#030701 0 28%,transparent 29%),repeating-conic-gradient(#d0d1be 0 19deg,#262e1f 19deg 60deg);box-shadow:0 0 0 3px #4c5541,inset 0 0 0 2px #858d76}.tape-spool{background:#231f15;height:42px;max-width:50px;border:0;box-shadow:none}.tape-window>b,.tape-stripe,.tape-base{display:none}.control-plate{padding:17px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}.counter-box{padding:0;background:none;border:0;box-shadow:none}.counter-box label{color:#30312d;font-size:11px;letter-spacing:2px}.counter-box label span{color:#4f5948;font-size:7px}.counter-box>div{margin-top:16px;gap:15px}.counter-box output{color:#a4a99b;font:30px/1.3 monospace;letter-spacing:3px;text-shadow:0 1px #fff3;background:linear-gradient(135deg,#272727,#0c0c0c);padding:8px 12px;border:2px solid #1c1c1c;outline:1px solid #737c67;box-shadow:inset 0 3px 6px #000}.counter-box button{color:#31392c;background:var(--t8-silver);padding:12px 10px;border-color:#959f87;outline:0;box-shadow:inset 0 1px #fff,0 3px 3px #0005}.master{padding:0}.master label{color:#30312c;font-size:11px;letter-spacing:2px}.master input[type=range]{height:28px;margin:13px 0}.master input[type=range]::-webkit-slider-thumb{height:37px;width:37px;margin-top:-16px;border-radius:50%;border:1px solid #949d87;background:linear-gradient(90deg,transparent 47%,#323c28 48% 52%,transparent 53%) center/100% 65% no-repeat,var(--t8-silver);box-shadow:inset 0 2px 2px #fff,0 3px 4px #0005}.master small{color:#5e6954}.master-meter{background:#a4ad9b;height:3px}
.transport{padding:15px 20px;margin-top:20px;border:1px solid #60605d;border-radius:10px;background:var(--grain),linear-gradient(120deg,#373737,#262626);outline:2px solid #181818;box-shadow:inset 0 0 0 4px #222222,0 4px 6px #0009}.transport:before,.transport:after{display:none}.transport .section-label{padding:0;font-size:11px;letter-spacing:2px;margin-bottom:14px}.transport-buttons{gap:22px;padding:10px;background:linear-gradient(#212121,#292929);outline:none;border:2px solid #111111;border-radius:8px}.transport-buttons b{height:65px;color:#292929;background:var(--t8-silver);border:1px solid #a19c92;outline:none;box-shadow:inset 0 2px 2px #fff,inset 0 -3px 3px #827e76,0 4px 6px #0009;border-radius:8px;font-size:30px;text-shadow:none}.transport-buttons #play b{color:#292929}.transport-buttons span{font-size:9px;letter-spacing:1px;padding-top:9px}footer{padding:18px 15px 0;font-size:8px;letter-spacing:2px}.status-dot{border-radius:0;width:18px;height:1px;background:#c9c6be}
@media(max-width:600px),(max-width:1000px) and (max-height:500px),(max-width:1400px) and (any-pointer:coarse){
 .machine{max-width:none;padding:7px 6px 5px;border-radius:13px;grid-template-rows:48px minmax(0,1fr) 73px 18px;gap:7px}
 header{min-height:0;margin:0;padding:6px 12px;border-radius:7px;gap:8px}.brand{gap:10px}.brand-mark{font-size:32px;padding-right:10px}.brand h1{font-size:12px;letter-spacing:2.5px}.brand p{font-size:5px;letter-spacing:1.5px;margin-top:3px}#studio-menu>#studio-menu-toggle{width:32px;height:32px;font-size:20px;border-width:1px;outline-width:1px;box-shadow:inset 0 0 0 2px #434642,0 2px 3px #0006}
 .console{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 91px;gap:8px;padding:0;border:0;box-shadow:none}.channels{gap:4px}.channel{height:auto;min-height:0;padding:12px 3px 5px;border-radius:5px;grid-template-rows:24px 10px 27px 43px minmax(30px,1fr) 10px 8px 47px;gap:3px;box-shadow:inset 0 0 0 2px #1d1d1d,0 0 0 1px #151a12}.channel:before{top:4px;left:4px;right:4px;height:2px}.channel .track-number{height:24px;font-size:19px;outline:0;border:0}.channel .track-name{display:none}.mini-track-name{font-size:6.5px}.channel .fx-route{min-height:25px;font-size:9px;border-width:1px;border-radius:3px}.arm{height:43px;padding-top:10px!important;font-size:6px;letter-spacing:0}.arm:after{width:3px;height:3px;left:calc(50% - 1.5px);top:1px}.arm:before{height:17px;width:17px;border:4px solid #252825;margin:0 auto 5px;box-shadow:0 0 0 1px #0c0c0c,0 0 0 2px #777871,0 2px 3px #000a}.arm[aria-pressed=true]:before{box-shadow:0 0 0 1px #0c0c0c,0 0 0 2px #a6b297,0 0 6px #c9503980}
 .fader-wrap{height:100%;min-height:0;background:repeating-linear-gradient(to top,transparent 0 30px,#87917d 30px 31px) center/100% 100% no-repeat}.fader-wrap:after{display:none}.fader-wrap:before{width:2px;left:calc(50% - 1px)}.fader{height:100%;width:100%;left:0}.fader::-webkit-slider-runnable-track{width:8px}.fader::-webkit-slider-thumb{width:22px;height:36px;margin-left:-8px;border-radius:3px}.fader::-moz-range-thumb{width:20px;height:34px}.gain-value{font-size:6px;height:10px;line-height:10px}.meter{height:6px;border-radius:2px}.meter i{height:4px;bottom:1px;left:1px;width:calc(100% - 2px)}.ms{gap:3px}.ms button{height:22px;font-size:8px;border-width:1px;border-radius:3px}.ms button:before{width:3px;height:6px;margin-right:4px;box-shadow:none}
 .deck{height:91px;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr;padding:0;gap:6px}.cassette-housing,.control-plate{border-radius:5px;box-shadow:inset 0 1px #fff,0 2px 2px #0008}.cassette-housing{grid-row:auto;padding:19px 8px 7px}.cassette-housing:before{font-size:6px;letter-spacing:1.4px;left:9px;top:6px}.cassette-housing:after{inset:18px 7px 6px}.cassette{padding:2px 5px;border-width:3px;border-radius:4px}.tape-label{padding:1px 3px;border-bottom:2px solid #20261c}.tape-label input{font-size:16px;line-height:18px;padding:0}.tape-window{height:22px;margin:2px 0 0;gap:12px}.reel{height:17px;width:17px;border-width:3px;box-shadow:0 0 0 1px #69775b}.tape-spool{height:17px}.control-plate{padding:6px 8px;gap:5px}.counter-box{height:auto;padding:0;min-height:0}.counter-box label{font-size:5px;letter-spacing:1px}.counter-box label span{font-size:4px;letter-spacing:0}.counter-box>div{margin-top:4px;gap:5px}.counter-box output{font-size:15px;line-height:18px;letter-spacing:1px;padding:1px 3px;border-width:1px;min-width:0}.counter-box button{font-size:5px;height:21px;padding:2px 3px}.master{padding:0;width:100%}.master label{font-size:5px;letter-spacing:.5px}.master input[type=range]{height:14px;margin:2px 0}.master input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}.master-meter{height:2px}.master small{display:none}
 .transport{height:auto;position:relative;bottom:auto;margin:0;padding:5px 7px;border-radius:6px;outline:1px solid #11180c}.transport .section-label{font-size:6px;margin:0 0 4px;line-height:7px}.transport-buttons{gap:8px;padding:4px;border-width:1px;border-radius:4px}.transport-buttons b{height:31px;font-size:19px;border-radius:4px}.transport-buttons span{font-size:5.5px;line-height:7px;padding-top:4px;letter-spacing:.2px}footer{padding:0 4px;font-size:6px;letter-spacing:.5px;min-height:0}.status-dot{width:9px;height:1px}
 .fx-panel{top:calc(67px + env(safe-area-inset-top))}#editor{top:calc(67px + env(safe-area-inset-top))}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .machine{grid-template-rows:34px minmax(0,1fr) 62px 12px;gap:5px;padding:5px 6px}.brand-mark{font-size:25px}.brand h1{font-size:11px;letter-spacing:3px}.brand p{display:none}header{padding:3px 14px}#studio-menu>#studio-menu-toggle{height:25px;width:25px;font-size:17px}
 .console{grid-template-columns:minmax(0,3fr) minmax(150px,1fr);grid-template-rows:minmax(0,1fr);gap:8px}.channel{grid-template-rows:19px 9px 21px 33px minmax(17px,1fr) 9px 6px 22px;gap:2px;padding-top:9px}.channel .track-number{height:19px;font-size:17px}.channel .fx-route{min-height:21px;font-size:9px}.arm{height:33px;padding-top:7px!important}.arm:before{height:14px;width:14px;border-width:3px;margin-bottom:4px}.fader::-webkit-slider-thumb{height:25px}.ms{grid-template-columns:1fr 1fr}.ms button{height:22px}.deck{height:100%;display:flex;flex-direction:column;gap:7px}.cassette-housing{height:84px;width:100%;flex-shrink:0}.control-plate{width:100%;flex:1;justify-content:center;gap:10px}.transport{padding:4px 9px}.transport .section-label{display:none}.transport-buttons b{height:30px}.fx-panel,#editor{top:calc(46px + env(safe-area-inset-top))}
}

/* Colored signal rails sit inside the slot, beneath the silver fader cap. */
.channel .fader-wrap:before{display:none}.channel .fader::-webkit-slider-runnable-track{background:linear-gradient(var(--accent),var(--accent)) center 80%/3px 82% no-repeat,linear-gradient(90deg,#060606,#171717,#060606)}
@media(min-width:601px) and (min-height:501px){.tape-window{height:88px}.reel{width:57px;height:57px;border-width:7px}.tape-base{display:block;height:25px;margin:5px 18px 0;padding:0;font-size:16px;line-height:22px;background:linear-gradient(#363735,#242523);border:1px solid #51524e;letter-spacing:14px;box-shadow:inset 0 2px 4px #000}.cassette{overflow:hidden}}
/* Explicit menu state avoids native-details toggle inconsistencies on touch. */
#studio-menu .studio-menu-items[hidden]{display:none!important}#studio-menu-toggle{padding:0!important;min-height:0!important}.studio-menu-items{width:225px;z-index:30}
#editor{position:fixed;inset:8vh max(16px,calc((100vw - 1100px)/2));z-index:18;margin:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--grain),linear-gradient(#303130,#202120);border:1px solid #8b8d85;box-shadow:0 0 0 4px #121312,0 15px 80px #000d}
.editor-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #565952;flex-shrink:0}.editor-title h2{font-size:12px;letter-spacing:1.3px}.editor-title button{min-height:36px;flex-shrink:0}.editor-toolbar{flex-shrink:0}.editor-toolbar>div:first-child h2{display:none}#timeline-scroll{flex:1;min-height:80px;max-height:none;overflow:auto}.clip-settings{flex-shrink:0;flex-wrap:wrap}.clip-settings select{max-width:130px;min-height:30px;padding:4px;font-size:12px}
@media(max-width:600px),(max-width:1000px) and (max-height:500px),(max-width:1400px) and (any-pointer:coarse){
 #editor{inset:calc(67px + env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) calc(105px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))}.editor-title{padding:6px 8px}.editor-title h2{font-size:9px;letter-spacing:.5px}.editor-title button{min-height:30px;font-size:10px;padding:4px 8px}.editor-toolbar{padding:5px 8px}.edit-tools{gap:4px;margin-top:4px}.edit-tools button{font-size:9px;padding:5px}.edit-tools label{margin:0}.clip-settings{padding:6px 8px;gap:6px;font-size:7px}.clip-settings input{font-size:16px;width:65px;padding:3px}.clip-settings select{font-size:16px;max-width:105px}.lane{height:35px}.lane-label{height:34px}.clip{height:28px}.clip span{font-size:9px}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){#editor{top:calc(46px + env(safe-area-inset-top));bottom:83px}.editor-title{padding:3px 8px}.editor-toolbar{padding:3px 8px}.editor-toolbar>div:first-child{display:none}.edit-tools{margin:0}.clip-settings{padding:3px 8px}#timeline-scroll{min-height:35px}}
/* T8 outboard rack — real parameter readouts, mechanical power and rotary faces. */
#fx-panel{background:var(--grain),linear-gradient(100deg,#181b1d,#292c2e 50%,#131719);border:2px solid #565b5e;box-shadow:inset 0 0 0 4px #101315,0 10px 30px #000b}
#fx-heading{color:#d6d4ca}.fx-note{color:#aaa99e}#fx-controls{display:grid;grid-template-columns:1fr;gap:12px}
.fx-module{--rack-face:#354955;--rack-ink:#deded5;--rack-accent:#add5df;position:relative;padding:16px 24px 14px 172px;min-height:137px;border:2px solid #101315;border-radius:4px;color:var(--rack-ink);background:var(--grain),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),linear-gradient(110deg,var(--rack-face),#161d2288);box-shadow:inset 0 2px #ffffff40,inset 0 -3px #0008,0 4px 6px #000a}
.fx-module:before,.fx-module:after{content:'';position:absolute;top:10px;bottom:10px;width:8px;border-top:8px solid #131719;border-bottom:8px solid #131719;filter:drop-shadow(0 1px 0 #ffffff55);pointer-events:none}.fx-module:before{left:7px}.fx-module:after{right:7px}
.fx-module[data-effect=compressor]{--rack-face:#d3c7aa;--rack-ink:#292a24;--rack-accent:#765a2d;background:var(--grain),linear-gradient(110deg,#e0d8c0,#b4a88b);border-color:#282820}
.fx-module[data-effect=drive]{--rack-face:#744932;--rack-ink:#f0d5ae;--rack-accent:#ffc77b}
.fx-module[data-effect=reverb]{--rack-face:#b3c2c8;--rack-ink:#21343e;--rack-accent:#36576b;background:var(--grain),linear-gradient(110deg,#dae2e2,#99aeb7);border-color:#26343a}
.fx-module[data-effect=echo]{--rack-face:#293a30;--rack-ink:#d9ddbd;--rack-accent:#a7cd7e}
.rack-model{position:absolute;top:24px;left:26px;font:11px/1.5 'Courier New',monospace;letter-spacing:2px;color:var(--rack-ink);opacity:.8}
.fx-module .fx-switch{position:absolute;left:26px;top:52px;width:135px;display:flex;align-items:center;gap:9px;font-size:9px;line-height:1.4;letter-spacing:1px;color:var(--rack-ink)}
.fx-module .fx-switch:after{content:'BYPASS';position:absolute;left:0;top:45px;font:7px monospace;letter-spacing:2px;opacity:.7}.fx-module[data-engaged=true] .fx-switch:after{content:'ENGAGED';color:var(--rack-accent);opacity:1}
.fx-module .fx-switch input{appearance:none;width:18px;height:28px;flex-shrink:0;border:2px solid #111;border-radius:3px;background:linear-gradient(#565753,#222420 45%,#4a4d44 55%,#777b6c);box-shadow:0 0 0 1px #898d80,inset 0 1px #fff6;cursor:pointer;position:relative;margin:0}
.fx-module .fx-switch input:before{content:'';position:absolute;width:5px;height:5px;left:4.5px;top:5px;border-radius:50%;background:#272c21;box-shadow:inset 0 1px 2px #000}.fx-module .fx-switch input:checked{background:linear-gradient(#272e23,#555e49 45%,#353c2e 55%,#1e251a)}.fx-module[data-engaged=true] .fx-switch input:before{background:#d9ed96;box-shadow:0 0 5px #d4ef8f}
.fx-module fieldset{display:flex;justify-content:space-around;align-items:start;gap:12px;padding:0;margin:0;min-width:0}.fx-module fieldset:disabled{opacity:.5}.fx-module fieldset .rack-control{display:flex;flex:1;flex-direction:column;align-items:center;gap:6px;margin:0;min-width:0;color:var(--rack-ink);font-size:10px}.rack-caption{text-transform:uppercase;letter-spacing:1px;font-size:8px;text-align:center}
.rack-dial{--angle:0deg;display:block;position:relative;flex-shrink:0;width:57px;height:57px;border-radius:50%;background:repeating-conic-gradient(from 225deg,#ffffff55 0deg 1deg,transparent 1deg 30deg);isolation:isolate}
.rack-dial:before{content:'';position:absolute;inset:5px;border:2px solid #111718;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#e8e6dd,#adada3 35%,#777e7c 65%,#353c3b);box-shadow:0 3px 5px #0009,inset 0 1px 2px #fff,0 0 0 1px #c5cbc777}
.rack-pointer{position:absolute;inset:8px;transform:rotate(var(--angle));pointer-events:none;z-index:1}.rack-pointer:before{content:'';position:absolute;width:3px;height:14px;background:#202828;top:0;left:calc(50% - 1.5px);border-radius:2px;box-shadow:1px 0 #fff5}
.fx-module[data-effect=compressor] .rack-dial:before,.fx-module[data-effect=echo] .rack-dial:before{background:radial-gradient(ellipse at 35% 20%,#50564e,#222922 65%,#141b15);box-shadow:0 3px 5px #0009,inset 0 1px 2px #b8beac,0 0 0 1px #828e77}.fx-module[data-effect=compressor] .rack-pointer:before,.fx-module[data-effect=echo] .rack-pointer:before{background:#eee6c9;box-shadow:none}
.fx-module input[type=range]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;z-index:3;cursor:ew-resize;touch-action:none}.rack-dial:focus-within{outline:2px solid var(--rack-accent);outline-offset:3px}
.fx-module .rack-control output{display:block;min-width:58px;max-width:100%;padding:3px 5px;border:1px solid #080f10;border-radius:2px;background:#10191c;color:#b9d7c4;box-shadow:inset 0 2px 3px #000;font:10px/1.3 monospace;text-align:center;white-space:nowrap;letter-spacing:0}
#fx-tabs button{border-radius:2px;background:linear-gradient(#41484a,#242b2d);border-color:#101719;box-shadow:inset 0 1px #c0c5bd44,0 2px 2px #0008;text-transform:uppercase;font-size:10px;letter-spacing:.6px}#fx-tabs button[aria-pressed=true]{background:var(--t8-silver);color:#202827;border-color:#aaa99e}
@media(max-width:600px),(max-width:1000px) and (max-height:500px),(max-width:1400px) and (any-pointer:coarse){
 #fx-controls{display:block}.fx-module{padding:57px 18px 12px;min-height:0}.fx-module:not(.current){display:none}.rack-model{left:20px;top:12px;font-size:9px;letter-spacing:1px}.fx-module .fx-switch{left:auto;right:20px;top:10px;width:auto;max-width:60%;font-size:8px;gap:7px;min-height:26px}.fx-module .fx-switch:after{top:29px;font-size:6px;left:auto;right:0}.fx-module .fx-switch input{width:16px;height:24px}.fx-module .fx-switch input:before{left:3.5px;top:4px}
 .fx-module fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}.fx-module fieldset .rack-control{gap:4px}.rack-dial{width:53px;height:53px}.rack-caption{font-size:8px}.fx-module .rack-control output{font-size:10px;padding:2px 4px;min-width:58px}.fx-module[data-effect=drive] fieldset,.fx-module[data-effect=reverb] fieldset{grid-template-columns:1fr}.fx-module[data-effect=drive] .rack-dial,.fx-module[data-effect=reverb] .rack-dial{width:74px;height:74px}.fx-module[data-effect=drive] .rack-pointer:before,.fx-module[data-effect=reverb] .rack-pointer:before{height:19px}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .fx-module{padding:34px 15px 6px}.rack-model{top:7px;left:17px;font-size:8px}.fx-module .fx-switch{top:3px;right:16px;font-size:7px}.fx-module .fx-switch:after{display:none}.fx-module fieldset{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.fx-module fieldset .rack-control{gap:3px}.rack-dial,.fx-module[data-effect=drive] .rack-dial,.fx-module[data-effect=reverb] .rack-dial{width:43px;height:43px}.rack-caption{font-size:7px}.fx-module .rack-control output{font-size:8px;min-width:44px}.rack-pointer:before{height:10px}
}
@media(max-width:600px) and (max-height:700px) and (orientation:portrait){
 .fx-module{padding:44px 16px 8px}.rack-model{top:9px;left:18px}.fx-module .fx-switch{top:5px;right:18px}.fx-module .fx-switch:after{top:27px}.fx-module fieldset{gap:8px 14px}.fx-module fieldset .rack-control{gap:3px}.rack-dial{width:45px;height:45px}.fx-module[data-effect=drive] .rack-dial,.fx-module[data-effect=reverb] .rack-dial{width:63px;height:63px}.rack-pointer:before{height:11px}
}

#save-state{white-space:nowrap;color:#b9c6a8;flex-shrink:0;font-size:8px;letter-spacing:0}#library-dialog{width:min(560px,calc(100vw - 24px));max-height:85dvh;overflow:auto}#library-dialog p{font-size:11px}.library-row{display:grid;grid-template-columns:1fr auto auto;gap:6px 10px;padding:12px 0;border-top:1px solid #555}.library-row strong{grid-column:1;word-break:break-word}.library-row small{grid-column:1;color:#b1b8a9}.library-row button{grid-row:1/3;margin:0;min-height:40px}.library-row button:nth-of-type(1){grid-column:2}.library-row button:nth-of-type(2){grid-column:3}@media(max-width:600px){#save-state{font-size:6px}.library-row{gap:5px}.library-row button{font-size:10px;padding:6px}}

.trim-handle{display:none;position:absolute;top:0;bottom:0;width:11px;background:#e5d1a080;cursor:ew-resize;touch-action:none;z-index:7}.clip.selected .trim-handle{display:block}.trim-handle.left{left:0;border-right:1px solid #fff8}.trim-handle.right{right:0;border-left:1px solid #fff8}.clip:before,.clip:after{content:'';position:absolute;top:0;bottom:0;pointer-events:none;background:#141c1377;z-index:2}.clip:before{left:0;width:var(--fade-in,0);clip-path:polygon(0 0,100% 0,0 100%)}.clip:after{right:0;width:var(--fade-out,0);clip-path:polygon(0 0,100% 0,100% 100%)}#snap-grid{padding:3px;font-size:12px}.edit-tools{flex-wrap:wrap}#record-dialog p,#stems-dialog p{font-size:11px;line-height:1.5}#record-dialog{width:min(480px,calc(100vw - 24px));max-height:90dvh;overflow:auto}@media(max-width:600px){#tempo,#delay-ms,#snap-grid{font-size:16px}.clip-settings{gap:4px}.clip-settings label{font-size:7px}.clip-settings input{width:59px}.editor-title h2{font-size:8px}}

#app-update-notice{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:100;background:#eee9d9;color:#202220;padding:10px;border:2px solid #555;border-radius:6px;width:max-content;max-width:calc(100vw - 16px);font-size:12px}#app-update-notice[hidden]{display:none}#storage-error-dialog{max-width:min(460px,calc(100vw - 24px))}#storage-error-dialog p{font-size:13px;line-height:1.5}

/* Small maker credit, including compact landscape headers. */
.brand .brand-credit{display:block;font-size:11px;line-height:1.2;letter-spacing:.4px;text-transform:none;margin-top:4px;color:#545752}
@media(max-width:1000px){.brand .brand-credit{font-size:9px;margin-top:2px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.brand .brand-credit{font-size:8px;margin-top:0}}

/* T8PE wordmark retains room for the title and maker credit on phones. */
.brand-mark{font-size:48px;letter-spacing:-2px;padding-right:16px}
@media(max-width:1000px){.brand{gap:8px}.brand-mark{font-size:26px;letter-spacing:-1.5px;padding-right:8px}.brand h1{letter-spacing:1.6px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.brand-mark{font-size:23px}}

/* iPad: fill Safari's available viewport; use the extra space for touch controls. */
@media(min-width:601px) and (max-width:1400px) and (min-height:501px) and (any-pointer:coarse){
 body{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
 .machine{max-width:none;grid-template-rows:64px minmax(0,1fr) 96px 18px;gap:10px;padding:10px}
 header{padding:8px 18px}.brand{gap:14px}.brand-mark{font-size:38px;letter-spacing:-2px;padding-right:14px}.brand h1{font-size:17px;letter-spacing:3px}.brand .brand-credit{font-size:11px;margin-top:3px}
 #studio-menu>#studio-menu-toggle{width:44px;height:44px;font-size:26px}
 .console{grid-template-rows:minmax(0,1fr) 140px;gap:10px;padding:6px}
 .channels{gap:6px}.channel{padding:8px 5px;grid-template-rows:40px 16px 40px 48px minmax(45px,1fr) 16px 10px 40px;gap:5px}
 .track-number{height:40px;font-size:27px}.mini-track-name{font-size:10px;line-height:16px}.channel .fx-route{min-height:40px;font-size:11px}
 .arm{height:48px;font-size:9px;padding-top:8px!important}.arm:before{width:23px;height:23px;margin-bottom:5px}.gain-value{font-size:10px;line-height:16px;height:16px}
 .fader::-webkit-slider-thumb{width:38px;height:45px;margin-left:-16px}.fader::-moz-range-thumb{width:36px;height:43px}
 .meter{height:10px}.meter i{height:7px}.ms{grid-template-columns:1fr 1fr;gap:4px}.ms button{height:40px;font-size:11px}.ms button:before{margin-right:3px}
 .deck{height:140px;gap:10px}.cassette-housing{padding:26px 18px 10px}.cassette-housing:before{font-size:10px;top:9px;left:18px}.cassette-housing:after{inset:25px 17px 9px}.cassette{padding:5px 10px}.tape-label input{font-size:19px;line-height:24px}.tape-window{height:41px;margin-top:5px;gap:24px}.reel{width:32px;height:32px;border-width:5px}.tape-spool{height:32px}.tape-base{display:none}
 .control-plate{padding:12px 15px;gap:10px}.counter-box label,.master label{font-size:9px}.counter-box label span{font-size:8px}.counter-box output{font-size:23px;line-height:28px}.counter-box button{font-size:9px;min-height:32px;padding:5px}.master input[type=range]{height:24px;margin:4px 0}.master-meter{height:4px}
 .transport{padding:7px 12px}.transport .section-label{font-size:9px;line-height:10px}.transport-buttons{padding:5px;gap:12px}.transport-buttons b{height:44px;font-size:26px}.transport-buttons span{font-size:9px;line-height:11px;padding-top:5px}
 footer{font-size:10px;line-height:18px}#save-state{font-size:9px}
 .fx-panel,#editor{top:calc(98px + env(safe-area-inset-top));bottom:calc(140px + env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
 .fx-heading h2{font-size:14px}.fx-heading label{font-size:12px}.fx-heading button,#fx-tabs button{min-height:44px;font-size:13px}.fx-module fieldset{grid-template-columns:repeat(4,minmax(0,1fr))}.rack-dial{width:70px;height:70px}.rack-caption{font-size:10px}.editor-title h2{font-size:13px}.editor-title button,.edit-tools button{min-height:40px;font-size:12px}
}
@media(min-width:601px) and (max-width:1400px) and (min-height:501px) and (any-pointer:coarse) and (orientation:landscape){
 .console{grid-template-columns:minmax(0,3fr) minmax(220px,1fr);grid-template-rows:minmax(0,1fr)}
 .deck{height:100%;display:flex;flex-direction:column;gap:10px}.cassette-housing{height:150px;width:100%;flex-shrink:0;padding:26px 12px 12px}.cassette-housing:after{inset:25px 11px 11px}.control-plate{flex:1;justify-content:center;gap:20px}.counter-box output{font-size:20px;letter-spacing:0}.channel{gap:4px}.ms button{font-size:10px}
}

/* One cross-browser vertical fader: native accessible input, shared visual geometry. */
.channel .fader-wrap{--fader-cap-width:37px;--fader-cap-height:64px;--fader-top:.090909;--fader-fill:90.909%;isolation:isolate}
.channel .fader-wrap:before,.channel .fader-wrap:after{display:none}
.fader-rail{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--fader-cap-height)/2);bottom:calc(var(--fader-cap-height)/2);width:8px;border:1px solid #454545;border-radius:5px;background:#090909;box-shadow:inset 0 2px 3px #000,0 1px #979e8f;overflow:hidden;pointer-events:none}
.fader-rail i{position:absolute;bottom:0;left:2px;right:2px;height:var(--fader-fill);background:var(--accent);opacity:.8}
.fader-cap{position:absolute;left:50%;transform:translateX(-50%);top:calc((100% - var(--fader-cap-height))*var(--fader-top));width:var(--fader-cap-width);height:var(--fader-cap-height);border:1px solid #666b60;border-radius:4px;pointer-events:none;background:linear-gradient(90deg,transparent 47%,#30352d 48% 52%,transparent 53%) center/100% 63% no-repeat,linear-gradient(105deg,#f6f4ed,#c8c6bf 22%,#edeae3 50%,#dbd8d0 78%,#aaa79f);box-shadow:inset 0 2px 3px #fff,inset 0 -4px 3px #87847c,0 4px 5px #000a;z-index:2}
.channel .fader{opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:ns-resize;touch-action:none;z-index:3}
.fader-wrap:focus-within .fader-cap{outline:2px solid #d4bb81;outline-offset:2px}
@media(max-width:600px),(max-width:1000px) and (max-height:500px){.channel .fader-wrap{--fader-cap-width:22px;--fader-cap-height:36px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.channel .fader-wrap{--fader-cap-height:25px}}
@media(min-width:601px) and (max-width:1400px) and (min-height:501px) and (any-pointer:coarse){.channel .fader-wrap{--fader-cap-width:38px;--fader-cap-height:45px}}

/* The interaction surface is a custom vertical slider, never a native horizontal range. */
.channel .fader{appearance:none;-webkit-appearance:none;writing-mode:horizontal-tb;direction:ltr;position:absolute;display:block;box-sizing:border-box;padding:0;border:0;transform:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Studio channel modules: legible hierarchy, calibrated fader scales, live meter towers. */
.channel{border-color:#4b5054;border-radius:6px;background:linear-gradient(90deg,#ffffff05,transparent 22%,#00000018 85%,#ffffff04),linear-gradient(#33383d,#25292d 35%,#292e32);box-shadow:inset 1px 0 #ffffff0b,inset -1px 0 #0008,inset 0 0 0 3px #191d20,0 3px 6px #0008}
.channel:before{height:3px;box-shadow:0 1px #ffffff35;border-radius:1px}
.channel .track-number{font-family:Arial,sans-serif;font-weight:600;font-size:20px;color:#e1e6e8;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:6px}
.channel .track-number:before{content:'CH';font:7px/1 Arial,sans-serif;color:#8b989f;letter-spacing:1px}
.channel .mini-track-name,.channel .track-name{border-radius:2px;border:1px solid #10161a;background:linear-gradient(#131b20,#1e282e);color:#dbe3e8;box-shadow:inset 0 1px 3px #0008;font-family:Arial,sans-serif;text-align:center;font-weight:500;padding:0 2px;letter-spacing:.1px}
.channel .fx-route{border:1px solid #101519;border-radius:3px;background:linear-gradient(#3c454b,#293138);box-shadow:inset 0 1px #8a969b55,0 2px 3px #0007;color:#b7c4ca;letter-spacing:1.2px;font-weight:600}
.channel .fx-route.enabled{color:#dfedda;background:linear-gradient(#3b4b43,#26352e);box-shadow:inset 0 1px #a0c4a566,0 1px 4px #0008}
.channel .arm{background:none;border:0;outline:0;color:#87949b;text-shadow:none;font-family:Arial,sans-serif;letter-spacing:1px;box-shadow:none}
.channel .arm:before{background:radial-gradient(circle at 40% 25%,#a3544c,#682d2b 55%,#3b1b1b);border-color:#252c30;box-shadow:0 0 0 1px #080c0f,0 0 0 2px #56616a,inset 0 1px #e4b0a755,0 3px 3px #0008}
.channel .arm[aria-pressed=true]{color:#eeb6aa}.channel .arm[aria-pressed=true]:before{background:radial-gradient(circle at 40% 25%,#ffc3a7,#e05c48 45%,#9c302b);box-shadow:0 0 0 1px #080c0f,0 0 0 2px #716b65,inset 0 1px #ffebe8,0 0 9px #df5a4144}
.channel .fader-wrap{background:linear-gradient(90deg,#0d13192e,#1a22281a 50%,#080d1255);border-radius:3px;box-shadow:inset 0 1px 2px #0005,inset 0 -1px #ffffff08}
.fader-rail{width:7px;border-color:#070c0f;background:linear-gradient(90deg,#030608,#141b20,#020405);box-shadow:1px 0 #7a899043,-1px 0 #000,0 0 3px #0008}
.fader-rail i{opacity:.7;left:2px;right:2px}
.fader-cap{border-color:#10181e;border-radius:3px;background:linear-gradient(to bottom,transparent 45%,#101b24 46% 49%,#e3edf1 50% 52%,transparent 53%),repeating-linear-gradient(to bottom,transparent 0 4px,#ffffff20 4px 5px,#0000000a 5px 6px),linear-gradient(100deg,#f4f5f3 0%,#8d999f 7%,#d6dfe1 18%,#f4f5f0 46%,#b7c3c8 78%,#6a7982 95%,#d2dcdf);box-shadow:inset 0 2px 1px #fff,inset 0 -3px 2px #4b5a63,inset 1px 0 #fff9,inset -1px 0 #0008,0 5px 6px #000b,0 1px 0 1px #070d11}
.fader-cap:before,.fader-cap:after{content:'';position:absolute;left:18%;right:18%;height:1px;background:#5e6a734d;box-shadow:0 1px #ffffff9c;pointer-events:none}.fader-cap:before{top:23%}.fader-cap:after{bottom:23%}
.fader-scale{position:absolute;top:calc(var(--fader-cap-height)/2);bottom:calc(var(--fader-cap-height)/2);left:3px;width:calc(50% - var(--fader-cap-width)/2 - 5px);pointer-events:none;color:#89979f;font:8px/1 Arial,sans-serif;z-index:1}
.fader-scale>span{position:absolute;left:0;right:0;transform:translateY(-50%);white-space:nowrap}.fader-scale>span:after{content:'';position:absolute;right:-4px;top:50%;width:3px;height:1px;background:#78868e}
.fader-scale>span[data-db="0"]{color:#e0e6df;font-weight:700}.fader-scale>span[data-db="0"]:after{background:#d8dfd8;width:5px}
.channel .fader-wrap .meter{position:absolute;top:calc(var(--fader-cap-height)/2);bottom:calc(var(--fader-cap-height)/2);right:3px;left:auto;width:7px;height:auto;min-height:0;margin:0;padding:0;border:1px solid #080d10;border-radius:2px;background:repeating-linear-gradient(to top,#20312d 0 3px,#0b1418 3px 5px);box-shadow:inset 0 1px 3px #000,1px 0 #71818a33;outline:none;pointer-events:none}
.channel .fader-wrap .meter i{position:absolute;inset:1px;bottom:1px;width:auto;height:auto;transform-origin:bottom;background:linear-gradient(to top,#579d79 0 70%,#c3bd67 70% 90%,#d7745e 90%);mask-image:repeating-linear-gradient(to top,#000 0 3px,transparent 3px 5px);-webkit-mask-image:repeating-linear-gradient(to top,#000 0 3px,transparent 3px 5px);box-shadow:none}
.strip-caption{font:6px/1 Arial,sans-serif;color:#71838e;letter-spacing:1.4px;text-align:center;pointer-events:none}
.channel .gain-value{color:#d3ddd5;background:#111b20;border:1px solid #0a1115;border-radius:2px;box-shadow:inset 0 1px 2px #000;font-family:monospace;font-variant-numeric:tabular-nums}
.channel .ms button{border:1px solid #10171c;border-radius:3px;background:linear-gradient(#414b52,#2c353c);box-shadow:inset 0 1px #a3afb64d,0 2px 3px #0008;color:#b5c4cb;font-weight:600}
.channel .ms .mute[aria-pressed=true]{background:linear-gradient(#c28b4c,#8d5a2d);color:#fff0d5}.channel .ms .solo[aria-pressed=true]{background:linear-gradient(#cad083,#8f984b);color:#172013}
@media(max-width:600px),(max-width:1000px) and (max-height:500px){
 .channel .track-number{font-size:19px;gap:2px;letter-spacing:0}.channel .track-number:before{display:none}.channel .mini-track-name{font-size:6px}.channel .fx-route{letter-spacing:.4px}.channel .arm{letter-spacing:.2px}.fader-scale{left:1px;width:3px;font-size:0}.fader-scale>span:after{right:0;width:3px}.channel .fader-wrap .meter{right:0;width:3px;border-width:0}.channel .fader-wrap .meter i{inset:0}.strip-caption{font-size:4px;letter-spacing:.4px}.channel .gain-value{font-size:6px}
}
@media(min-width:601px) and (max-width:1400px) and (min-height:501px) and (any-pointer:coarse){
 .channel .track-number{font-size:22px}.channel .mini-track-name{font-size:10px}.strip-caption{font-size:7px}.channel .gain-value{font-size:10px}.fader-scale{font-size:8px}.fader-scale>span[data-db="-6"]{visibility:hidden}
}

/* Landscape tablet meter bridge: use the panel for a readable counter and master section. */
@media(min-width:601px) and (max-width:1400px) and (min-height:501px) and (any-pointer:coarse) and (orientation:landscape){
 .control-plate{padding:18px 15px;justify-content:space-between;gap:16px}
 .counter-box{padding:0;flex-shrink:0}
 .counter-box label{font-size:10px;letter-spacing:1.2px;line-height:14px}.counter-box label span{font-size:8px;letter-spacing:.4px}
 .counter-box>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:10px;align-items:center}
 .counter-box output{font-size:clamp(24px,2.7vw,38px);line-height:1.3;letter-spacing:-1px;padding:9px 5px;text-align:center;box-shadow:inset 0 3px 7px #0008}
 .counter-box button{min-height:44px;padding:6px;font-size:8px}
 .master{width:100%;padding-top:15px;border-top:1px solid #9b9f9555;box-shadow:0 -1px #ffffff60}
 .master label{font-size:11px;line-height:16px;letter-spacing:1px}.master label output{font-family:monospace;letter-spacing:0}
 .master input[type=range]{height:40px;margin:10px 0 7px}.master input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-13px}
 .master-meter{height:7px;border-radius:2px;margin-top:2px}.master small{display:block;margin-top:8px;font:9px/12px monospace;color:#555e52;letter-spacing:.5px}
}
@media(min-width:601px) and (max-width:1400px) and (min-height:501px) and (any-pointer:coarse) and (orientation:landscape){
 .control-plate .counter-box{flex:1;display:flex;flex-direction:column;min-height:0}
 .control-plate .counter-box>div{flex:1;min-height:44px}
 .control-plate .counter-box output{align-self:stretch;display:flex;align-items:center;justify-content:center}
 .control-plate .master{flex-shrink:0}
}

/* Musical position and edit grid share the project's tempo. 4/4 is the current meter. */
.counter-info #panel-tempo,.counter-info #panel-meter{color:inherit;font:inherit;letter-spacing:inherit;white-space:nowrap}
.counter-info #panel-meter{padding:0 5px;border-left:1px solid #858d7d66;border-right:1px solid #858d7d66}
#grid-view[aria-pressed=true]{background:#45534c;color:#edf2e8;border-color:#849a85}
#timeline .lane{background:#161e21}
#timeline.beat-grid .lane:after{content:'';position:absolute;left:28px;right:0;top:0;bottom:0;pointer-events:none;z-index:2;background-image:linear-gradient(to right,#d5ddbf66 1px,transparent 1px),linear-gradient(to right,#b3c6cc33 1px,transparent 1px),linear-gradient(to right,#9bb5c315 1px,transparent 1px);background-size:var(--bar-px) 100%,var(--beat-px) 100%,var(--subbeat-px) 100%;background-position:left top;background-repeat:repeat}
#timeline.beat-grid #ruler{background:#263137}#ruler span{font-variant-numeric:tabular-nums}