@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#292a25;--cream:#e8e1d0;--muted:#757467;--orange:#bc4e32;--line:#bcb6a4;--green:#3c6459}*{box-sizing:border-box}body{margin:0;background:#e7e3d9;color:var(--ink);font:16px 'DM Sans',Arial,sans-serif;background-image:radial-gradient(#aaa7a019 .7px,transparent .7px);background-size:4px 4px}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.5}button:focus-visible,input:focus-visible{outline:3px solid #1d777b;outline-offset:4px}button{transition:background .15s,box-shadow .15s}button:active{transform:translateY(1px)}.studio{max-width:1250px;margin:0 auto;padding:32px 38px 24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.brand{display:flex;align-items:center;gap:15px}.brand-mark{font:italic bold 48px Georgia;letter-spacing:-7px;background:var(--orange);color:#f5e9ce;border-radius:50%;width:66px;height:66px;padding-left:10px;line-height:58px}.brand-mark span{font-size:26px;letter-spacing:-3px}h1{font:700 33px 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px;margin:0}.brand p{font-size:11px;letter-spacing:3.3px;margin:3px 0 0;font-weight:bold}.session{font:600 12px 'DM Sans',sans-serif;letter-spacing:1.2px;display:flex;align-items:center;gap:9px}.session-note{color:#827c70}.lamp{width:7px;height:7px;background:#698064;border-radius:50%;box-shadow:0 0 0 3px #69806418}.console{padding:15px 23px;background:repeating-linear-gradient(3deg,#5d3625 0,#6a402c 3px,#5a3424 5px,#704731 9px);border-radius:14px;box-shadow:0 20px 36px #31271926,0 2px 4px #31271955,inset 0 0 0 2px #442718}.faceplate{padding:26px 30px 0;background:linear-gradient(105deg,#e9e3d3,#d8d1bf);border-radius:5px;border:1px solid #afa28b;box-shadow:0 2px 4px #0007;position:relative}.faceplate:before,.faceplate:after{content:'⊖';position:absolute;top:7px;color:#716e60;font:14px Georgia;text-shadow:0 1px #fff}.faceplate:before{left:8px}.faceplate:after{right:8px}.deck-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px;gap:20px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#706d60}h2{font:600 31px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.25px;margin:7px 0 4px}.deck-top p{font-size:14px;margin:0;color:#676559}.deck-top p span{padding:0 9px;color:#9a917e}.vu{background:#ead8a8;border:6px solid #343630;border-radius:5px;padding:5px 12px 3px;width:222px;box-shadow:inset 0 0 16px #bb8b5266,0 2px 3px #0003;text-align:center;flex-shrink:0}.vu>span{font:700 10px 'DM Sans';letter-spacing:2px}.vu-scale{font:11px monospace;margin:7px 0 4px}.vu-scale b{color:#ab4934}.vu-bars{display:flex;gap:3px;height:15px}.vu-bars i{flex:1;background:#57624533;border:1px solid #64724233;border-radius:1px}.vu-bars i.lit{background:#727f44;box-shadow:0 0 5px #7d853866}.vu-bars i:nth-last-child(-n+3).lit{background:#b44a30}.vu small{font:9px monospace;letter-spacing:2px}.tape{background:#292e29;color:#d9d7bc;border:5px solid #3d4037;border-radius:6px;padding:12px 17px 8px;box-shadow:inset 0 2px 9px #0006}.timeline-top{display:flex;justify-content:space-between;align-items:center;font:12px monospace;letter-spacing:1px}.subtle{color:#959b84}.timeline-top output{font-size:19px;letter-spacing:1px;color:#e9b66f}.timeline-top output span{color:#929682;font-size:13px}.wave-wrap{height:82px;position:relative;margin:10px 0 0}canvas{width:100%;height:100%;display:block}#seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:crosshair}#seek:focus-visible{opacity:.25}#playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:#efbd78;pointer-events:none;box-shadow:0 0 6px #efbd7877}#playhead:before{content:'';position:absolute;left:-4px;top:-3px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #efbd78}#loopShade{position:absolute;inset:0;background:#c7d39716;border-inline:1px solid #b7c88766;pointer-events:none;display:none}.loop-handle{position:absolute;top:28px;height:28px;width:20px;background:#d4b679;color:#292e29;border:0;border-radius:3px;z-index:2;touch-action:none;display:none}.loop-handle.start{left:0;transform:translateX(-50%)}.loop-handle.end{left:100%;transform:translateX(-50%)}.timeline-ticks{display:flex;justify-content:space-between;font:10px monospace;color:#9aa18c;padding-top:5px}.transport{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.play-controls{display:flex;gap:8px}.play-controls button{border:1px solid #aaa28f;border-radius:4px;height:43px;box-shadow:0 3px 0 #aaa28f, inset 0 1px #fff8}.square{background:#eae6db;padding:0 15px;font-size:16px}.play{background:#b74d32;color:#fff1da;min-width:122px;border-color:#943c28!important;box-shadow:0 3px 0 #833621,inset 0 1px #fff4!important;font-weight:600}.play span{margin-left:8px}.loop-button{font-size:24px}.loop-button span{font-size:13px;margin-left:5px}.loop-button[aria-pressed=true]{background:#426557;color:#fff}.loop-fields{display:flex;gap:8px;font:10px monospace;color:#787365}.loop-fields label{display:flex;flex-direction:column;gap:3px}.loop-fields input{width:49px;padding:2px 3px;background:#eae5d8;border:1px solid #b6ae9a;border-radius:3px;font:12px monospace;color:#484b3e}.speed{margin:0 0 0 auto;padding:0;border:0;display:flex;gap:4px}.speed legend{font-size:10px;letter-spacing:1px;font-weight:700;margin-bottom:7px}.speed legend span{font-weight:400;color:#777164;font-size:9px}.speed button{border:1px solid #aaa28d;background:#ded8c9;padding:5px 12px;font:12px monospace;border-radius:3px}.speed button.selected{background:#343b32;color:#eee5cd;border-color:#343b32}.practice{display:flex;align-items:center;gap:16px;padding:17px 0}.practice .eyebrow{font-size:10px;letter-spacing:1px;white-space:nowrap}.presets{display:flex;gap:5px}.presets button{background:transparent;border:1px solid #b6ae9c;border-radius:20px;padding:7px 13px;font-size:12px;font-weight:600;white-space:nowrap}.presets button.active{background:var(--ink);color:#f0e8d5;border-color:var(--ink)}.practice-note{font-size:11px;color:#7a7467;margin-left:auto}.mixer{display:grid;grid-template-columns:repeat(4,1fr) 1.05fr;border:1px solid #b5ad99;border-radius:5px;overflow:hidden;background:#e8e2d2}.channel{border-right:1px solid #b5ad99;position:relative;text-align:center;min-width:0;padding:16px 15px 14px;background:linear-gradient(90deg,#fff1,transparent)}.channel:last-child{border-right:0;background:#c8cebd}.channel-no{font:10px monospace;color:#8b8476;margin:0 0 8px;letter-spacing:2px}.channel-name{font:600 21px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.5px;margin:0}.channel-name:after{content:'';display:block;height:4px;background:var(--ch);margin:10px auto 0;width:35px;border-radius:2px}.channel-desc{font-size:11px;margin:8px 0 0;color:#777467;min-height:15px}.fader-area{height:160px;position:relative;display:flex;justify-content:center;align-items:center;margin:8px auto 5px}.fader-area:before{content:'';height:128px;width:8px;border-radius:5px;background:#33352d;box-shadow:inset 0 1px 3px #000;position:absolute}.fader-area:after{content:'+6\A 0\A −6\A −12\A −∞';white-space:pre;font:10px/29px monospace;color:#8a8474;position:absolute;left:calc(50% + 24px);top:8px;pointer-events:none}.fader{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:44px;height:134px;background:transparent;z-index:1;cursor:ns-resize;margin:0}.fader::-webkit-slider-runnable-track{width:8px;background:transparent}.fader::-webkit-slider-thumb{-webkit-appearance:none;width:42px;height:25px;margin-left:-17px;border:1px solid #494b40;border-radius:3px;background:linear-gradient(#686d61,#444b40 43%,#e7e4ca 44%,#e7e4ca 50%,#2f352d 52%,#444b40);box-shadow:0 3px 4px #0005}.fader::-moz-range-thumb{width:40px;height:24px;border:1px solid #494b40;border-radius:3px;background:linear-gradient(#686d61,#444b40 43%,#e7e4ca 44%,#e7e4ca 50%,#2f352d 52%,#444b40)}.db{font:12px monospace;display:block;margin-bottom:12px;color:#5e6051}.channel-buttons{display:flex;justify-content:center;gap:7px}.channel-buttons button{font:700 11px 'DM Sans';letter-spacing:1px;padding:7px 11px;border-radius:3px;border:1px solid #aba58f;background:#ede8db;box-shadow:0 2px 0 #b4ac98}.channel-buttons button[aria-pressed=true]{background:var(--ch);color:#fff;border-color:var(--ch)}.channel.unavailable{background:repeating-linear-gradient(135deg,transparent,transparent 6px,#77777706 6px,#77777706 7px);color:#7e7b6f}.unavailable .fader-area{opacity:.28}.unavailable .channel-name:after{background:#a9a48f}.unavailable .channel-desc{font-size:10px}.review-note{font-size:10px;color:#857052;border:1px solid #bdb094;border-radius:3px;padding:6px 0}.master .channel-buttons{font-size:10px;color:#5e6e54;letter-spacing:1.3px;margin-top:19px}.console-bottom{padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.console-bottom>span{font-size:11px;color:#736e60}.console-bottom button{border:0;background:transparent;font-size:13px;font-weight:700;padding:8px 0}.console-bottom button span{font:10px monospace;border:1px solid #aaa38c;border-radius:3px;padding:3px 4px;margin-left:8px;color:#777360}footer{display:flex;justify-content:space-between;gap:25px;padding:23px 2px 0;color:#888173;font-size:10px;line-height:1.9}footer b{font-size:10px;letter-spacing:1px;font-weight:500}.footer-note{text-align:right} @media(min-width:1400px){.studio{padding-top:42px}.fader-area{height:180px}.fader-area:after{top:18px}}@media(max-width:900px){.studio{padding:20px 18px}.console{padding:12px}.faceplate{padding:23px 20px 0}.practice-note{display:none}.transport{gap:12px}.loop-fields{display:none}.channel{padding-inline:8px}.vu{width:190px}.session-note{display:none}}@media(max-width:620px){.studio{padding:16px 10px}header{margin-bottom:17px}.brand-mark{width:49px;height:49px;font-size:35px;line-height:43px;padding-left:8px}.brand-mark span{font-size:21px}h1{font-size:26px}.brand p{font-size:8px;letter-spacing:2px}.session{font-size:9px;letter-spacing:0}.console{padding:9px}.faceplate{padding:21px 12px 0}.deck-top{align-items:flex-start}.vu{width:116px;padding:3px 4px;border-width:4px}.vu-scale{font-size:8px;letter-spacing:-1px}.vu>span{font-size:8px;letter-spacing:.5px}.vu small{font-size:7px}.vu-bars{gap:2px;height:11px}h2{font-size:23px;max-width:220px}.deck-top p{font-size:11px}.eyebrow{font-size:9px}.transport{justify-content:space-between}.speed{margin-left:0}.speed legend{font-size:9px}.speed legend span{display:none}.speed button{padding:5px 8px}.play-controls{gap:5px}.square{padding:0 8px}.play{min-width:86px;font-size:13px}.play-controls button{height:37px}.loop-button span{display:none}.practice{display:block;padding:13px 0}.practice .eyebrow{display:block;margin-bottom:8px}.presets{gap:4px}.presets button{font-size:11px;padding:6px 10px}.mixer{grid-template-columns:repeat(4,1fr)}.channel{padding:13px 3px}.channel.master{grid-column:1/-1;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #b5ad99;padding:12px}.master .channel-no,.master .channel-desc,.master .channel-buttons,.master .channel-name:after{display:none}.master .fader-area{height:auto;width:48%;margin:0}.master .fader-area:before,.master .fader-area:after{display:none}.master .fader{writing-mode:horizontal-tb;direction:ltr;width:100%;height:20px;background:#33352d;border-radius:5px;max-height:6px}.master .fader::-webkit-slider-thumb{margin-left:0;width:22px;height:28px}.master .db{margin:0}.channel-name{font-size:17px}.channel-desc{font-size:9px;min-height:23px}.unavailable .channel-desc{font-size:9px}.channel-buttons{gap:3px}.channel-buttons button{font-size:9px;padding:6px 5px;letter-spacing:0}.review-note{font-size:9px}.fader-area:after{left:calc(50% + 17px);font-size:8px}.fader::-webkit-slider-thumb{width:30px;margin-left:-11px}.console-bottom{align-items:flex-start}.console-bottom>span{max-width:46%;line-height:1.5;font-size:10px}.console-bottom button{font-size:11px}.console-bottom button span{display:none}footer{font-size:9px;gap:12px}.footer-note{max-width:45%}footer b{font-size:9px}.timeline-top{font-size:9px}.timeline-top output{font-size:16px}.timeline-ticks{font-size:8px}.tape{padding:10px 12px 8px}}

.presets{flex-wrap:wrap}.practice{flex-wrap:wrap}.practice-note{max-width:230px}.channel-desc{line-height:1.4}

/* Cassette transport: reel diameters represent elapsed tape. */
.cassette{padding:20px 35px 16px;overflow:hidden}.reels{display:flex;align-items:center;justify-content:center;gap:clamp(15px,5vw,80px)}.reel{width:148px;height:148px;position:relative;display:grid;place-items:center;border:1px solid #9b9b7855;border-radius:50%;background:#111712;box-shadow:inset 0 0 16px #0008;flex-shrink:0}.tape-pack{position:absolute;width:92%;height:92%;border-radius:50%;background:repeating-radial-gradient(circle,#4d3b2a 0 2px,#322d22 3px 4px);border:1px solid #7f6d4a;transform:scale(var(--pack,1));will-change:transform}.reel-hub{width:58px;height:58px;position:relative;border-radius:50%;border:7px solid #cbc5a8;background:#20251e;box-shadow:0 2px 5px #000b;transform:rotate(var(--angle,0deg));will-change:transform}.reel-hub:after{content:'';position:absolute;inset:13px;background:#d2c9a9;border-radius:50%;border:2px solid #8c896f}.reel-hub i{position:absolute;left:18px;top:-2px;width:8px;height:22px;background:#cbc5a8;transform-origin:4px 24px}.reel-hub i:nth-child(2){transform:rotate(120deg)}.reel-hub i:nth-child(3){transform:rotate(240deg)}.tape-counter{text-align:center;min-width:145px}.tape-counter>span{font:11px monospace;letter-spacing:2px;color:#a5ab92}.tape-counter output{display:block;font:38px monospace;letter-spacing:3px;color:#edbd7b;margin:10px 0;text-shadow:0 0 10px #efbd7833}.tape-counter small{font:12px monospace;color:#a0a68b}.cassette #seek{position:static;opacity:1;height:18px;width:100%;margin:16px 0 0;accent-color:#d5b77a;cursor:pointer}.transport{margin-bottom:20px}.console-bottom{justify-content:flex-end}#notice{margin-right:auto}#processing{padding:14px 16px;margin-bottom:16px;background:#d3c9b5;border:1px solid #aa9f89;border-radius:4px;font-size:14px}#processing>div{display:flex;justify-content:space-between;gap:15px;align-items:center}#processing progress{width:100%;height:7px;accent-color:#50644c;margin-top:12px}#cancelProcessing{font-size:13px;border:1px solid #aaa18b;background:#eee4d0;border-radius:3px;padding:5px 10px}#error{font-size:14px;line-height:1.5;color:#8a3122;background:#f5e4d5;border:1px solid #c19a88;padding:12px;border-radius:4px}.channel-desc{min-height:31px}#upload{font-size:14px}[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.reel-hub{transform:none!important}}
@media(max-width:620px){.cassette{padding:14px 10px 10px}.reels{gap:10px}.reel{width:83px;height:83px}.reel-hub{width:44px;height:44px;border-width:5px}.reel-hub i{left:13px;width:8px;height:17px;transform-origin:4px 19px}.reel-hub:after{inset:10px}.tape-counter{min-width:90px}.tape-counter output{font-size:25px;letter-spacing:1px}.tape-counter>span{font-size:8px;letter-spacing:1px}.tape-counter small{font-size:9px}.transport{gap:16px}#upload{font-size:12px}.channel-desc{min-height:31px}}
/* Raised mechanical keys inspired by 1980s tape transports. */
.play-controls{gap:10px;padding:8px;background:#343933;border:2px solid #22271f;border-radius:4px;box-shadow:inset 0 2px 5px #0007,0 1px #fff8}.play-controls button{height:58px;min-width:60px;border:1px solid #8b8d80;border-top:2px solid #f9f7e8;border-radius:3px;background:linear-gradient(#f0eee3 0%,#d7d8c9 58%,#c5c7b9 59%,#d6d7c9 92%,#9b9e8e 93%);box-shadow:0 6px 0 #747b6b,0 7px 5px #0009,inset 2px 0 #fff5;font-size:18px;font-weight:700;letter-spacing:.3px;transform:translateY(-3px)}.play-controls button:active{transform:translateY(2px);box-shadow:0 1px 0 #737b68,inset 0 2px 4px #0003}.play-controls .play{min-width:150px;background:linear-gradient(#d86b4f,#c55339 58%,#a83e2a 59%,#b24931 92%,#782b1e 93%);border-top-color:#fba58b!important;box-shadow:0 6px 0 #792d20,0 7px 5px #0009,inset 2px 0 #ffa88b66!important}.play-controls .play:active{box-shadow:0 1px 0 #792d20,inset 0 2px 4px #0003!important}.speed button{height:35px;min-width:56px;border-top:2px solid #fff9;box-shadow:0 4px 0 #8b9080,0 5px 3px #0003;background:linear-gradient(#e6e5d8,#c5c9b9);font-weight:700}.speed button.selected{background:linear-gradient(#4a5346,#333d32);box-shadow:0 1px 0 #777d6b,inset 0 2px 4px #0007;transform:translateY(3px);border-top-color:#263024;color:#f2dfb2}.channel-buttons button{padding:10px 13px;border-radius:2px;border-top:2px solid #faf8e9;box-shadow:0 4px 0 #969986,0 5px 3px #0003;background:linear-gradient(#f1ede0,#d1d4c1)}.channel-buttons button[aria-pressed=true]{box-shadow:0 1px 0 #686e5e,inset 0 2px 3px #0004;transform:translateY(3px);border-top-color:#0004}.transport{align-items:center;padding-bottom:25px}.console-bottom button{border:1px solid #a1a692;border-top:2px solid #fff9;background:linear-gradient(#ede9dc,#cdd2be);border-radius:3px;padding:12px 15px;box-shadow:0 4px 0 #8f9681,0 5px 3px #0003}
@media(max-width:620px){.play-controls{gap:6px;padding:7px;width:100%}.play-controls button{height:52px;min-width:44px}.play-controls .play{min-width:110px;flex:1;font-size:14px}#upload{font-size:12px;flex:1}.channel-buttons button{padding:8px 5px}.speed{margin:0 0 3px auto}.console-bottom button{font-size:12px}}

/* Preserve the original circular mark with Studio M initials. */
.brand-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 6px 3px 0;font-size:43px;line-height:1;letter-spacing:-7px}.brand-mark span{font-size:30px;letter-spacing:-3px;transform:translateY(5px)}
@media(max-width:620px){.brand-mark{font-size:33px;padding:0 5px 2px 0;letter-spacing:-6px}.brand-mark span{font-size:23px;letter-spacing:-2px;transform:translateY(4px)}}

.brand p{font-size:14px;letter-spacing:.5px;margin-top:4px;font-weight:500}
@media(max-width:620px){.brand{gap:10px}.brand p{font-size:12px;letter-spacing:0}}

header{flex-wrap:wrap;column-gap:16px;row-gap:16px}.header-instructions{flex-basis:100%;margin:0;font-size:16px;line-height:1.6;color:#595a50}
@media(max-width:620px){header{row-gap:12px}.header-instructions{font-size:16px;line-height:1.5}}