:root{color-scheme:light;--paper:#e7e9ec;--surface:#e6e7e8;--ink:#252a32;--muted:#646b75;--line:#bdc1c8;--orange:#e37b43;--green:#55753b;--display:'DM Sans',sans-serif;--body:'DM Sans',sans-serif;--mono:'IBM Plex Mono',monospace;--fader-color:#67778b;--fill:0%}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#fafafa,var(--paper) 80%);color:var(--ink);font:14px var(--body);min-height:100dvh}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.4}button,a,input,select,summary{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #df753f}a{color:inherit;text-decoration:none}[hidden]{display:none!important}button{transition:filter .15s,box-shadow .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.06)}button:active:not(:disabled){transform:translateY(2px)}button kbd{margin-left:7px}kbd{font:9px var(--mono);border:1px solid var(--line);padding:2px 3px;border-radius:3px}.topbar,main{width:calc(100% - clamp(28px,4vw,96px));max-width:2100px;margin:auto}.topbar{height:72px;display:flex;align-items:center;gap:24px}.brand{font:700 25px/1 var(--display);letter-spacing:-1.4px}.brand-period{font:11px var(--body);vertical-align:top;margin-left:3px;letter-spacing:0}.edition{font:8px var(--mono);letter-spacing:1.8px;color:var(--muted);padding-left:24px;border-left:1px solid var(--line)}.topbar nav{display:flex;gap:24px;margin-left:auto}.nav-button{background:none;border:0;padding:10px 0;font-size:11px;color:var(--muted)}.nav-button:hover{text-decoration:underline;text-underline-offset:4px}main{padding:10px 0 28px}
.studio{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,27vw,430px);grid-template-rows:1fr auto;min-height:calc(100dvh - 120px);padding:12px;border:1px solid #b6bbc2;border-radius:30px;background:linear-gradient(135deg,#fafafa 0,#c7ccd3 45%,#edf0f2 100%);box-shadow:inset 0 2px 1px #fff,inset 0 -3px 3px #a0a7b0,0 3px 1px #9ba2ac,0 20px 45px -22px #23324770,0 50px 90px -65px #26344a70;gap:0 12px;isolation:isolate}.studio.swapped{grid-template-columns:clamp(330px,27vw,430px) minmax(0,1fr)}.deck{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;padding:24px clamp(20px,2vw,34px) 20px;background:url(grain.svg),linear-gradient(140deg,#69768c,#4a566d 55%,#3e4b60);border:1px solid #485267;border-radius:20px;box-shadow:inset 1px 2px 2px #a7b2c980,inset -2px -2px 3px #25334690,0 3px 6px #37425450;position:relative;color:#eef1f5}.studio.swapped .deck{grid-column:2}.console{grid-column:2;grid-row:1;min-width:0;padding:24px 24px 15px;display:flex;flex-direction:column;color:var(--ink);border-radius:17px;background:linear-gradient(130deg,#f4f4f4,#d9dde1);border:1px solid #c7cbd0;box-shadow:inset 0 1px 1px #fff,inset -1px -1px 1px #b9bec7}.studio.swapped .console{grid-column:1}.deck:before,.deck:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;bottom:8px;background:linear-gradient(130deg,#69768b 40%,#27354a 42%,#27354a 54%,#8993a3 56%);border:1px solid #354357;box-shadow:0 1px 0 #97a2b570}.deck:before{left:10px}.deck:after{right:10px}.deck-heading,.console-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.deck-title{display:flex;gap:11px;align-items:center}.deck-title h2{font:700 24px/1 var(--display);letter-spacing:-1.1px;margin:0}.deck-dot{color:#f49c62}.deck-model{font:8px var(--mono);letter-spacing:1.4px;color:#c0c8d5;margin-left:12px}.hardware-light{width:6px;height:6px;background:#263849;border:1px solid #253044;border-radius:50%;box-shadow:0 1px 1px #bbc5d455}body[data-playing=true] .hardware-light{background:#b2e57a;box-shadow:0 0 7px #a0ff6f90}.console h2{font:600 17px var(--display);letter-spacing:-.4px;margin:0}.move-panel{border:1px solid #98a2b030;border-radius:6px;background:#ffffff08;color:#d2d9e4;width:29px;height:27px;font-size:16px;cursor:grab;touch-action:none;user-select:none;line-height:1}.console .move-panel{color:#697384;border-color:#abb2bc}.panel-dragging{z-index:10;opacity:.9;box-shadow:0 15px 40px #0005;pointer-events:none}.panel-dragging .move-panel{pointer-events:auto;cursor:grabbing}
.url-field{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;background:#283449;border:1px solid #29354a;border-radius:8px;box-shadow:inset 0 2px 5px #10172590,0 1px 0 #a6b3c450}.url-field:focus-within{outline:1px solid #b4c0d2}.url-field input{width:100%;min-width:0;border:0;background:transparent;color:#ecf0f6;font-size:12px;outline:none;height:33px}.url-field input::placeholder{color:#bbc6d5}.url-field button{background:linear-gradient(#edf0f2,#bfc7d2);border:1px solid #aab5c3;border-radius:5px;box-shadow:inset 0 1px 0 #fff,0 2px 1px #152237;color:#253348;font-size:11px;font-weight:600;padding:9px 15px;white-space:nowrap}.url-field button span{margin-left:12px}.message{font-size:11px;line-height:1.5;color:var(--muted);margin:7px 0 0}.message:empty{display:none}.deck .message{color:#d2dce8}.message.error{color:#a13d22}.deck .message.error{color:#ffbb9b}.video-stage{position:relative;flex:1;min-height:300px;margin-top:20px;border:8px solid #1b2330;border-radius:14px;background:#111721;box-shadow:0 0 0 1px #18202c,inset 0 2px 6px #000,0 2px 0 #b5c0ce50,0 7px 14px #18223555;overflow:hidden}.video-stage iframe,#player{position:absolute;inset:0;width:100%;height:100%;border:0}.empty-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(ellipse at 50% 20%,#424c5a,#202832 70%);overflow:hidden}.empty-stage:after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(130deg,#ffffff0d,transparent 35%,#ffffff03 60%,transparent 61%);box-shadow:inset 0 4px 14px #0008}.empty-prompt{font:10px var(--mono);color:#adb8c6;letter-spacing:.2px;text-align:center;margin:0 18px;z-index:1}
.standby-tape{position:relative;width:min(72%,490px);aspect-ratio:1.6;border:3px solid #20232b;border-radius:15px;background:repeating-linear-gradient(0deg,#ffffff03 0px,#ffffff03 1px,transparent 1px,transparent 3px),linear-gradient(135deg,#42474f,#171d27 60%,#353d47);box-shadow:inset 0 2px 1px #8c949e,inset 0 -2px 2px #000,0 20px 24px #0007,0 2px 2px #000;transform:rotate(-4deg);flex-shrink:0}.tape-topline{position:absolute;top:7%;left:8%;right:8%;display:flex;justify-content:space-between;color:#abb3be;font:8px var(--mono);letter-spacing:1px}.tape-label{position:absolute;top:17%;left:7%;width:86%;height:55%;border-radius:6px;background:linear-gradient(135deg,#f1ecdf,#ddd8cb);border:1px solid #bcb6aa;box-shadow:0 1px 3px #0005;padding:10px 15px;display:flex;justify-content:space-between;color:#30363f;overflow:hidden}.tape-label:after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;background:repeating-linear-gradient(0deg,#ca633b 0,#ca633b 5px,#e5dfd1 5px,#e5dfd1 7px)}.tape-label strong{font:600 clamp(20px,2.5vw,35px)/.98 var(--display);letter-spacing:-1.4px}.tape-label>span{font:500 25px var(--mono);text-align:right;line-height:1}.tape-label small{font-size:13px}.tape-window{position:absolute;left:13%;right:13%;top:44%;height:31%;display:flex;align-items:center;justify-content:space-between;padding:3px 7px;background:linear-gradient(#10151d,#28303b);border:3px solid #59606a;border-radius:50px;box-shadow:inset 0 2px 3px #000,0 2px 0 #c8c4bb}.tape-reel{height:100%;aspect-ratio:1;border-radius:50%;position:relative;background:repeating-radial-gradient(circle,#332822 0,#332822 2px,#493b30 3px,#30271f 4px);box-shadow:0 0 0 1px #0d1118,inset 0 0 3px #000;display:grid;place-items:center}.tape-reel i{width:55%;height:55%;border-radius:50%;background:repeating-conic-gradient(#e1e1da 0deg 36deg,#6b727b 36deg 60deg);border:4px solid #b8bdc1;box-shadow:0 0 0 1px #242a32;position:relative}.tape-reel i:after{content:'';position:absolute;inset:32%;background:#18202b;border-radius:50%}.tape-bridge{width:28%;height:45%;border:2px solid #79818a;background:linear-gradient(#181d25 0 46%,#8c7661 46% 51%,#222a35 51%);border-radius:4px;box-shadow:inset 0 2px 5px #000}.tape-baseline{position:absolute;top:79%;left:9%;right:9%;font:6px var(--mono);color:#adb5bf;display:flex;justify-content:space-between;letter-spacing:1px}.tape-foot{position:absolute;bottom:0;left:23%;width:54%;height:13%;border:1px solid #57606c;border-bottom:0;background:linear-gradient(#262e39,#3e4651);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);display:flex;align-items:center;justify-content:space-evenly}.tape-foot i{width:6px;height:6px;background:#0d131d;border-radius:50%;box-shadow:0 1px 0 #78818e}.tape-foot b{width:12px;height:6px;background:#171e28;border-radius:3px}.tape-screw{position:absolute;width:7px;height:7px;border-radius:50%;border:1px solid #111824;background:linear-gradient(130deg,#9ea7af 42%,#333b45 43% 58%,#6b7581 59%)}.screw-tl{top:3%;left:2%}.screw-tr{top:3%;right:2%}.screw-bl{bottom:4%;left:2%}.screw-br{bottom:4%;right:2%}
.now-playing{display:flex;align-items:center;gap:16px;padding:22px 0 16px}.track-info{flex:1;min-width:0}.section-number{display:block;font:8px var(--mono);letter-spacing:.7px;color:#b9c6d9;text-transform:uppercase}.track-info h3{font:500 15px/1.3 var(--display);letter-spacing:-.25px;margin:6px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cassette-mini{width:100px;height:58px;flex-shrink:0;padding:7px 7px 6px;border:1px solid #202a3b;background:linear-gradient(145deg,#253146,#101a2a);border-radius:6px;box-shadow:inset 0 1px 2px #101825,0 1px 0 #afbdd140}.cassette-mark{display:block;font:5px var(--mono);letter-spacing:1.5px;color:#a6b5ca;margin-bottom:5px}.cassette-window{display:flex;align-items:center;justify-content:space-between;height:30px;border:1px solid #6d7b90;background:#131c28;padding:1px 3px;border-radius:16px;box-shadow:inset 0 2px 5px #000}.vinyl-jog,.passive-reel{width:25px;height:25px;flex-shrink:0;border-radius:50%}.vinyl-jog{cursor:grab;touch-action:none;user-select:none}.vinyl-jog[aria-disabled=true]{cursor:default}.vinyl-jog.dragging{cursor:grabbing;box-shadow:0 0 0 2px var(--orange)}.jog-disc,.passive-reel{background:repeating-conic-gradient(#d6dce0 0deg 35deg,#5f6c7c 35deg 60deg);border:4px solid #8794a6;position:relative;border-radius:50%}.jog-disc{width:100%;height:100%;will-change:transform}.jog-disc:after,.passive-reel:after{content:'';position:absolute;inset:32%;border-radius:50%;background:#172233}.cassette-tape{width:16px;height:7px;background:#695b50;border:1px solid #8491a3}.passive-reel{animation:spin 6s linear infinite;animation-play-state:paused}body[data-playing=true] .passive-reel{animation-play-state:running}@keyframes spin{to{transform:rotate(360deg)}}.playback-buttons{display:flex;align-items:stretch;gap:5px;padding:5px;border:1px solid #253249;background:#344158;border-radius:9px;box-shadow:inset 0 1px 4px #172238,0 1px 0 #97a9c450;flex-shrink:0}.play-control,.loop-button{height:43px;border-radius:5px;border:1px solid #b1bbc8;background:linear-gradient(#eef1f5,#b9c4d2);color:#334157;box-shadow:inset 0 1px 1px #fff,0 3px 0 #8b99ac,0 4px 4px #101f3470}.play-control{width:55px;display:grid;place-items:center;font-size:15px}.loop-button{font-size:10px;padding:0 12px}.loop-button>span{font-size:17px;vertical-align:-1px;margin-right:3px}.loop-button.active{background:linear-gradient(#f3b482,#d88751);border-color:#d08b5b;box-shadow:inset 0 2px 4px #87502e70,0 1px 0 #d9a17a;color:#432b20;transform:translateY(2px)}.seek-row{display:flex;align-items:center;gap:14px;font:9px var(--mono);color:#c1cddd;min-height:30px}.seek-row time{min-width:34px}.seek-row time:last-child{text-align:right}.timeline-main{flex:1;min-width:0;position:relative}.timeline-main input{--fader-color:#e9b28b;--line:#28384f;--fill:var(--progress,0%)}.timeline-main.selecting-loop{padding-top:26px}.ab-overlay{position:absolute;inset:0;pointer-events:none}.loop-handle{position:absolute;top:0;width:24px;height:26px;transform:translateX(-100%);border:0;border-radius:4px 4px 0 0;background:#efb184;color:#35271e;font:500 10px var(--mono);cursor:ew-resize;pointer-events:auto;touch-action:none;z-index:2}.loop-handle:active{transform:translateX(-100%)!important}#loop-end,#loop-end:active{transform:none!important}.loop-handle:after{content:'';position:absolute;top:26px;left:22px;width:2px;height:20px;background:#efb184}#loop-end:after{left:0}#loop-selection{position:absolute;top:26px;height:23px;background:#efb18430}.loop-tools{display:flex;align-items:center;gap:12px;min-height:34px;margin-top:5px;color:#dfc2a6}.loop-tools>span{font:9px var(--mono);margin-right:auto}.loop-tools button{background:none;border:0;padding:8px 0;color:#d0dae7;font-size:10px;text-decoration:underline;text-underline-offset:3px}
.meter-panel{border:2px solid #979e9f;border-radius:8px;background:linear-gradient(130deg,#bac2b4,#d3d9c9);box-shadow:inset 1px 3px 6px #505b4c50,0 1px 0 #fff;padding:13px 15px 10px;color:#475344;position:relative}.level-heading{display:flex;align-items:center;justify-content:space-between;font:8px var(--mono);letter-spacing:1px;margin-bottom:10px}.badge{font:7px var(--mono);letter-spacing:.4px}.badge.live{color:#344b29}.badge.live:before{content:'●';margin-right:4px;color:#3d592c}.meter{height:19px;background:repeating-linear-gradient(to right,#73806a25 0,#73806a25 4px,transparent 4px,transparent 7px);overflow:hidden}.meter>div{width:0;height:100%;background:repeating-linear-gradient(to right,#45523e 0,#45523e 4px,transparent 4px,transparent 7px);transition:width 70ms linear}.meter-ticks{display:flex;justify-content:space-between;font:6px var(--mono);margin-top:5px;opacity:.8}#level-label{display:block;font:8px var(--mono);margin-top:10px;min-height:10px}.mix-section{margin-top:23px}.preset-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.preset-heading h3{font-size:12px;font-weight:600;margin:0}.preset-heading>span{font:8px var(--mono);color:var(--muted)}.presets{display:grid;grid-template-columns:.75fr 1fr 1.2fr 1.1fr;gap:4px;padding:4px;background:#c3c8cf;border:1px solid #adb4bd;border-radius:7px;box-shadow:inset 0 2px 4px #67738330,0 1px 0 #fff9}.presets button{color:#34425a;padding:11px 2px;font-size:11px;white-space:nowrap;border:1px solid #bbc1c9;border-radius:4px;background:linear-gradient(#f4f5f6,#d5d9df);box-shadow:inset 0 1px 0 #fff,0 2px 2px #84909f50;position:relative}.presets button[aria-pressed=true]{background:linear-gradient(#526178,#435067);color:#fff;border-color:#3d4c62;box-shadow:inset 0 2px 4px #24334d80,0 1px 0 #fff7}.presets button[aria-pressed=true]:after{content:'';width:3px;height:3px;border-radius:50%;background:#f5b187;position:absolute;bottom:4px;left:calc(50% - 1.5px);box-shadow:0 0 4px #f5b18770}.preset-description{font-size:10px;color:var(--muted);min-height:27px;line-height:1.5;margin:10px 0 0}.volume-dials{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:8px 0 19px}.volume-dial{min-width:0}.dial-label{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}.dial-label label{font-size:12px;font-weight:500}.dial-label output{font:10px var(--mono);color:var(--muted)}.dial-label output span{font-size:8px;margin-left:2px}.rotary{position:relative;aspect-ratio:1;width:min(100%,140px);margin:auto;isolation:isolate}.dial-ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -135deg,#6d7788 0 1deg,transparent 1deg 13.5deg);mask:radial-gradient(circle,transparent 65%,#000 66%);-webkit-mask:radial-gradient(circle,transparent 65%,#000 66%)}.dial-ticks:after{content:'';position:absolute;inset:0;background:#e1e4e7;clip-path:polygon(50% 50%,100% 100%,0 100%)}.dial-cap{position:absolute;inset:12%;border-radius:50%;background:conic-gradient(from 20deg,#b4becb,#f6f7f9 12%,#a5afbe 24%,#d8dee7 43%,#b7c0ce 63%,#f8f9fa 77%,#a8b3c3 91%,#b4becb);border:1px solid #9aa6b7;box-shadow:inset 0 0 0 3px #cad2de,inset 0 0 0 4px #a0acbe,inset 0 0 4px 5px #f8faff70,0 6px 9px #42546b50,0 2px 1px #64758c;transform:rotate(var(--angle,-135deg));transition:transform .08s}.dial-cap:before{content:'';position:absolute;inset:10px;border:1px solid #ffffff55;border-radius:50%;background:radial-gradient(ellipse at center,#e3e7ee55,transparent 70%)}.dial-cap i{position:absolute;top:9%;left:calc(50% - 2px);width:4px;height:15%;border-radius:2px;background:#40526f;box-shadow:1px 0 0 #ffffffb0}.rotary input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ns-resize;touch-action:none;z-index:3}.rotary:has(input:focus-visible){outline:2px solid #da7843;border-radius:50%;outline-offset:3px}.rotary.turning input{cursor:grabbing}.rotary.turning .dial-cap{transition:none}.dial-scale{display:flex;justify-content:space-between;max-width:120px;margin:0 auto;font:7px var(--mono);color:var(--muted);padding:0 13px}
.voice-effects,.device-section{border-top:1px solid #bbc2cc;box-shadow:0 -1px 0 #ffffff80}.voice-effects summary,.device-section summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:14px 0;font-size:11px;font-weight:500}.voice-effects summary::-webkit-details-marker,.device-section summary::-webkit-details-marker{display:none}.voice-effects summary:after,.device-section summary:after{content:'+';font:15px var(--mono);color:#737e8f;width:9px}.voice-effects[open] summary:after,.device-section[open] summary:after{content:'−'}.voice-effects summary>span:last-child,.device-section summary>span:last-child{margin-left:auto;font-size:9px;font-weight:400;color:var(--muted)}.effect-sliders{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:0 2px}.label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.label-row label{font-size:11px}.label-row output{font:10px var(--mono);color:var(--muted)}input[type=range]{appearance:none;width:100%;height:25px;background:transparent;cursor:pointer;display:block;margin:0}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--fader-color) 0 var(--fill),var(--line) var(--fill) 100%);box-shadow:inset 0 1px 2px #34465c50,0 1px 0 #ffffff30}input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:2px}input[type=range]::-moz-range-progress{height:4px;background:var(--fader-color)}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:19px;margin-top:-7.5px;border:1px solid #9aa6b4;border-radius:3px;background:linear-gradient(#f6f7f8,#b0bbc9);box-shadow:inset 0 1px 0 #fff,0 2px 2px #20345160}input[type=range]::-moz-range-thumb{width:13px;height:19px;border:1px solid #9aa6b4;border-radius:3px;background:#d4dbe4}.timeline-main input::-webkit-slider-thumb{width:11px;height:11px;margin-top:-3.5px;border-radius:50%;background:#f0bd96;border:1px solid #eab28a}.effects-foot{display:flex;justify-content:space-between;align-items:center;padding:7px 2px 14px;font-size:9px;color:var(--muted)}.effects-foot button,.text-button{border:0;background:none;font-size:9px;padding:5px 0;text-decoration:underline;text-underline-offset:3px}.device-field{margin-bottom:12px}.device-field label{display:block;font-size:10px;margin-bottom:6px;color:var(--muted)}select{width:100%;min-width:0;height:37px;border:1px solid #aeb7c2;background:#e3e7ec;color:#303b4e;border-radius:5px;padding:0 9px;font-size:11px;box-shadow:inset 0 1px 2px #6b7d9620}.device-access{display:flex;align-items:center;gap:12px;margin:9px 0}.device-access p{flex:1;font-size:9px;line-height:1.5;color:var(--muted);margin:0}.connect-button{font-size:10px;border-radius:4px;background:linear-gradient(#63718a,#465670);border:1px solid #41516a;color:#f0f3f8;padding:9px 10px;box-shadow:inset 0 1px 0 #aebad470,0 2px 0 #25365040}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 18px}.toggle-row label{font-size:10px;cursor:pointer}.toggle-row input{appearance:none;width:31px;height:18px;border-radius:12px;background:#a1a9b6;border:1px solid #8791a2;position:relative;cursor:pointer;flex-shrink:0;box-shadow:inset 0 2px 3px #53617950;margin:0}.toggle-row input:before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:linear-gradient(#fff,#bcc5d2);box-shadow:0 1px 2px #44536a80;top:2px;left:2px;transition:transform .15s}.toggle-row input:checked{background:#617452}.toggle-row input:checked:before{transform:translateX(13px)}.speaker-grille{min-height:42px;flex:1;margin:17px 3px 0;border-radius:5px;background:radial-gradient(circle,#677285 1px,#f5f7fa 1.6px,transparent 2px) 0 0/5px 5px;opacity:.8;mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.hardware-footer{display:flex;justify-content:space-between;font:6px var(--mono);letter-spacing:1.3px;color:#778193;margin-top:13px}
.transport{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 15px 5px}.session-pill{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500}.session-pill i{width:7px;height:7px;background:#859182;border:1px solid #6a7767;border-radius:50%;box-shadow:0 1px 0 #fff}.session-pill.live i{background:#98bf68;box-shadow:0 0 7px #72c14270;border-color:#648646}.session-info .message{font-size:10px;margin-top:4px}.transport-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}.start-button,.record-button,.mute-button{min-height:43px;border:1px solid #a8b1bf;border-radius:6px;background:linear-gradient(#f3f5f7,#c4ccd8);color:#34425a;padding:11px 17px;font-size:11px;box-shadow:inset 0 1px 0 #fff,0 3px 0 #97a3b4,0 4px 4px #263a5620}.start-button{font-weight:600;background:linear-gradient(#65758f,#42536e);border-color:#3e4f69;color:#f5f7fb;box-shadow:inset 0 1px 0 #b4c1d570,0 3px 0 #293c59,0 4px 4px #263a5640}.record-button{display:inline-flex;align-items:center;justify-content:center;gap:7px}.record-dot{width:8px;height:8px;background:#c6573e;border-radius:50%;box-shadow:inset 0 1px 1px #6e3127}.record-button.recording{background:linear-gradient(#f2c4b1,#dca28d);border-color:#c18d77}.record-button.recording .record-dot{border-radius:1px}.record-button time{font:9px var(--mono)}.mute-button[aria-pressed=true]{background:linear-gradient(#aab5c5,#c1cad7);box-shadow:inset 0 2px 4px #63748b60,0 1px 0 #fff;transform:translateY(2px)}.end-button{font-size:10px;background:none;border:0;text-decoration:underline;text-underline-offset:4px;padding:12px}.record-message{margin:12px 15px 0}.recordings{margin-top:24px;padding:23px;border:1px solid #bcc4ce;border-radius:14px;background:#f0f2f5}.recordings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:20px}.recordings-heading h2{font:600 18px var(--display);margin:0}.recordings-heading>span{font-size:10px;color:var(--muted)}.take{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:16px 0}.take>div{min-width:130px}.take strong{font-size:12px;display:block}.take>div>span{display:block;font:9px var(--mono);color:var(--muted);margin-top:5px}.take audio{flex:1;min-width:0;height:35px}.download-take{font-size:11px;padding:9px 12px;border:1px solid var(--line);border-radius:5px}
dialog{border:1px solid #aab5c5;background:#e9edf2;color:#303b4d;border-radius:16px;padding:30px;max-width:540px;width:calc(100% - 32px);max-height:90dvh;box-shadow:inset 0 1px 0 #fff,0 20px 80px #111b3260}dialog::backdrop{background:#101c31a0;backdrop-filter:blur(7px)}.close-dialog{display:block;margin:0 0 20px auto;background:none;border:0;font-size:11px}dialog h2{font:600 26px var(--display);letter-spacing:-.8px;margin:0 0 20px}dialog ol{padding-left:20px}dialog li{padding-left:8px;margin:18px 0}dialog li::marker{font:10px var(--mono);color:#7c8ba0}dialog li strong{font-size:13px}dialog li p{font-size:12px;line-height:1.7;color:#616d80;margin:6px 0}.guide-note{border-top:1px solid #bac5d3;padding-top:15px;font-size:11px;line-height:1.7;color:#616d80}.record-modes{padding:0;border:0;margin:24px 0;display:grid;gap:10px}.record-modes>label{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid #bcc5d1;border-radius:7px;cursor:pointer}.record-modes input{accent-color:#526781}.record-modes strong{font-size:13px;display:block}.record-modes small{font-size:11px;display:block;color:#616d80;margin-top:5px}#record-help{font-size:12px;line-height:1.7;color:#616d80}#record-dialog .start-button{width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:absolute;top:-100px;left:20px;padding:10px;background:#263a56;color:white;z-index:20}.skip-link:focus{top:10px}
body[data-theme=night]{--paper:#171b23;--ink:#e0e5ed;--muted:#9da9ba;--line:#48556b;background:radial-gradient(ellipse at 50% 0,#303846,#171b23 85%);color:#e0e5ed}body[data-theme=night] .studio{background:linear-gradient(130deg,#3d485b,#263146);border-color:#58647a;box-shadow:inset 0 1px 1px #76849b,0 3px 0 #101b2c,0 25px 55px #0006}body[data-theme=night] .console{background:linear-gradient(130deg,#414d61,#303b4f);border-color:#4d5c73;box-shadow:inset 0 1px 1px #718098,inset 0 -1px 0 #26334a}body[data-theme=night] .voice-effects,body[data-theme=night] .device-section{border-color:#253247;box-shadow:0 -1px 0 #58667c}body[data-theme=night] .dial-ticks:after{background:#39465a}body[data-theme=night] .recordings{background:#303c50;border-color:#48566d}body[data-theme=night] .speaker-grille{background:radial-gradient(circle,#131c2b 1px,#617088 1.6px,transparent 2px) 0 0/5px 5px}body[data-theme=night] .voice-effects summary:after,body[data-theme=night] .device-section summary:after{color:#a3b2c7}body[data-theme=night] .console .move-panel{color:#c4ccda;border-color:#64738a}body[data-theme=night] .hardware-footer{color:#a1b0c5}
@media(min-width:1800px){.deck{padding:30px 38px 24px}.console{padding:30px}.console h2{font-size:20px}.mix-section{margin-top:30px}.volume-dials{margin-top:20px}.presets button{font-size:11px;padding:13px 2px}.preset-description{font-size:11px}.volume-dials{gap:34px}.rotary{width:150px}.dial-label label{font-size:13px}.voice-effects summary,.device-section summary{padding:18px 0}.speaker-grille{margin-top:25px}.empty-prompt{font-size:11px}.standby-tape{width:min(68%,560px)}.tape-label strong{font-size:40px}}
@media(min-width:851px) and (max-height:950px){.topbar{height:57px}main{padding-top:4px;padding-bottom:20px}.studio{min-height:calc(100dvh - 85px)}.deck,.console{padding-top:19px}.deck-heading,.console-heading{margin-bottom:16px}.video-stage{min-height:240px;margin-top:16px}.mix-section{margin-top:18px}.volume-dials{margin-top:4px;margin-bottom:13px}.rotary{width:110px}.dial-label{margin-bottom:7px}.preset-description{min-height:22px;margin-top:8px}.meter-panel{padding:10px 13px 8px}.meter{height:13px}#level-label{margin-top:7px}.voice-effects summary,.device-section summary{padding:12px 0}.speaker-grille{min-height:25px;margin-top:12px}.now-playing{padding-top:18px;padding-bottom:12px}.transport{padding-top:15px}}
@media(max-width:1150px){.studio,.studio.swapped{grid-template-columns:minmax(0,1fr) 315px;gap:0 9px;padding:10px}.studio.swapped{grid-template-columns:315px minmax(0,1fr)}.deck{padding-left:19px;padding-right:19px}.console{padding-left:19px;padding-right:19px}.deck-model{display:none}.cassette-mini{width:78px;padding:6px 5px}.cassette-tape{width:6px}.vinyl-jog,.passive-reel{width:23px;height:23px}.now-playing{gap:10px;flex-wrap:wrap}.track-info{flex-basis:calc(100% - 90px)}.playback-buttons{margin-left:88px;margin-top:-3px}.volume-dials{gap:19px}.transport{padding-left:10px;padding-right:10px;gap:12px}.transport-actions{gap:7px}.transport-actions kbd{display:none}.start-button,.record-button,.mute-button{padding:11px 13px}.loop-tools{flex-wrap:wrap;gap:11px}.loop-tools>span{flex-basis:100%}.standby-tape{width:83%}.tape-label strong{font-size:27px}}
@media(max-width:850px){.topbar{height:65px}.edition{display:none}.studio,.studio.swapped{grid-template-columns:1fr;min-height:0;gap:12px;padding:10px}.deck,.studio.swapped .deck{grid-row:1;grid-column:1;padding:23px}.console,.studio.swapped .console{grid-row:2;grid-column:1;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}.studio.swapped .deck{grid-row:2}.studio.swapped .console{grid-row:1}.console>.console-heading{grid-column:1}.console>.meter-panel{grid-column:1;grid-row:2}.console>.mix-section{grid-column:2;grid-row:1/5;margin-top:0}.console>.device-section{grid-column:1;grid-row:3;margin-top:20px}.console>.speaker-grille,.console>.hardware-footer{display:none}.transport{grid-row:3;padding:6px 10px 10px;flex-wrap:wrap}.session-info{flex-basis:100%}.transport-actions{width:100%}.transport-actions .start-button{flex:1}.video-stage{min-height:270px;aspect-ratio:16/10;flex:none}.standby-tape{width:58%;max-width:420px}.tape-label strong{font-size:30px}.track-info{flex-basis:0}.playback-buttons{margin:0}.cassette-mini{width:94px}.cassette-tape{width:15px}.now-playing{flex-wrap:nowrap}.loop-tools{flex-wrap:nowrap}.loop-tools>span{flex-basis:auto}.take{flex-wrap:wrap}.take audio{min-width:180px}.volume-dials{gap:18px;margin-bottom:12px}.rotary{width:120px}.speaker-grille{min-height:30px}.deck-title h2{font-size:23px}.edition{display:none}}
@media(max-width:560px){.topbar,main{width:calc(100% - 24px)}.topbar{height:60px}.brand{font-size:23px}.topbar nav{gap:16px}.nav-button{font-size:10px}main{padding-top:4px;padding-bottom:20px}.studio,.studio.swapped{padding:7px;border-radius:21px;gap:9px}.deck{padding:19px 14px 17px;border-radius:15px}.deck-heading{margin-bottom:16px}.deck-title h2{font-size:23px}.url-field{padding-left:10px;gap:5px}.url-field input{font-size:11px}.url-field button{padding:9px 12px}.url-field button span{margin-left:5px}.video-stage{min-height:230px;aspect-ratio:4/3;border-width:5px;margin-top:16px;border-radius:10px}.standby-tape{width:85%;max-width:310px;border-width:2px;border-radius:10px}.tape-label{padding:5px 9px}.tape-label strong{font-size:clamp(14px,4.5vw,19px);letter-spacing:-.6px}.tape-topline{font-size:5px;letter-spacing:.7px}.tape-label>span{font-size:18px}.tape-label small{font-size:10px}.tape-baseline{font-size:4px;letter-spacing:.7px}.tape-window{border-width:2px;padding:2px 4px}.tape-reel i{border-width:2px}.tape-screw{width:5px;height:5px}.tape-foot i{width:4px;height:4px}.tape-foot b{width:8px;height:4px}.empty-stage{gap:20px}.empty-prompt{font-size:8px;line-height:1.6;max-width:210px}.now-playing{display:grid;grid-template-columns:78px minmax(0,1fr);gap:13px;padding-top:18px;padding-bottom:13px}.cassette-mini{width:78px}.cassette-tape{width:6px}.track-info h3{font-size:13px}.section-number{font-size:7px}.playback-buttons{grid-column:1/-1;justify-content:stretch;margin:3px 0 0}.playback-buttons>button{flex:1}.play-control,.loop-button{height:42px}.loop-button{font-size:11px}.seek-row{gap:7px;font-size:8px}.seek-row time{min-width:29px}.loop-tools{flex-wrap:wrap;gap:13px}.loop-tools>span{flex-basis:100%}.loop-tools button{font-size:10px}.loop-tools button:last-child{margin-left:auto}.console,.studio.swapped .console{display:flex;align-items:stretch;padding:22px 18px 18px;border-radius:12px}.console-heading{margin-bottom:18px}.console h2{font-size:18px}.console>.mix-section{margin-top:22px}.console>.device-section{margin-top:0}.console>.speaker-grille{display:block;flex:none;height:30px;margin-top:15px}.console>.hardware-footer{display:flex}.presets button{font-size:11px;padding:13px 2px}.preset-description{font-size:10px;min-height:25px}.volume-dials{gap:32px;margin:10px 0 20px}.rotary{width:128px;max-width:100%}.dial-label{margin-bottom:10px}.dial-label label{font-size:13px}.dial-label output{font-size:12px}.voice-effects summary,.device-section summary{padding:17px 0;font-size:12px}.meter{height:16px}.voice-effects summary>span:last-child,.device-section summary>span:last-child{font-size:10px}.transport{padding:10px 9px 13px;gap:16px}.transport-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.start-button{grid-column:1;grid-row:1}.record-button{grid-column:2;grid-row:1}.mute-button{grid-column:1;grid-row:2}.end-button{grid-column:2;grid-row:2}.transport-actions>button{min-height:44px;font-size:11px}.recordings{padding:17px}.recordings-heading>span{font-size:9px}.take{gap:12px}.take>div{flex:1}.take audio{width:100%;flex-basis:100%;order:3}.record-message{font-size:10px}.device-field label{font-size:11px}select{height:42px}.device-access p{font-size:10px}.toggle-row label{font-size:11px}dialog{padding:24px}.effects-foot{font-size:10px}}
.standby-tape{container-type:inline-size}.tape-label strong{font-size:7cqw}

/* Phone controls stay reachable, including on devices with a home indicator. */
@media(max-width:560px), (max-width:950px) and (max-height:500px){
 body{padding-bottom:0}.topbar{padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top))}main{padding-bottom:calc(var(--dock-height,110px) + 24px)}.studio,.studio.swapped{padding-bottom:7px}
 .transport{position:fixed;z-index:15;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:0;display:block;padding:12px 12px calc(12px + env(safe-area-inset-bottom));border:1px solid #aab5c5;border-bottom:0;border-radius:17px 17px 0 0;background:linear-gradient(#edf0f4,#d8dfe8);box-shadow:0 -6px 24px #20314925,inset 0 1px 0 #fff}
 .session-info{padding:0 80px 10px 2px;min-height:25px}.session-pill{font-size:11px}.session-info .message{font-size:11px;line-height:1.4;max-height:64px;overflow:auto}.transport-actions{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:8px}.transport-actions .start-button{grid-column:1;grid-row:1}.transport-actions .record-button{grid-column:2;grid-row:1;padding:9px 5px;gap:5px;flex-wrap:wrap}.transport-actions .mute-button{grid-column:3;grid-row:1;padding:9px 5px}.transport-actions>button{font-size:12px;min-height:46px}.transport-actions .end-button{position:absolute;right:12px;top:0;min-height:40px;font-size:10px;padding:10px 0}.record-button time{font-size:8px}.mute-button kbd{display:none}
 .url-field input{font-size:16px;height:38px}.url-field button{min-height:44px;font-size:12px;padding:10px}.url-field{padding-left:10px}.video-stage{min-height:0;aspect-ratio:4/3}.empty-prompt{font-size:9px;max-width:230px}.empty-stage{gap:15px}.standby-tape{width:83%}
 select{font-size:16px;min-height:46px}.presets button{min-height:44px;font-size:11px}.voice-effects summary,.device-section summary{min-height:48px;font-size:13px}.voice-effects summary>span:last-child,.device-section summary>span:last-child{font-size:11px}.label-row label{font-size:12px}.effect-sliders input{height:44px}.effects-foot{padding-top:0;padding-bottom:8px}.effects-foot button{min-height:44px;font-size:11px}.connect-button{min-height:44px;font-size:12px}.device-access .text-button{min-height:44px;font-size:10px}.toggle-row{min-height:44px;margin:5px 0 8px}.toggle-row label{font-size:12px;flex:1}.toggle-row input{width:40px;height:24px}.toggle-row input:before{width:18px;height:18px}.toggle-row input:checked:before{transform:translateX(16px)}
 .now-playing{padding-top:14px;gap:10px}.cassette-mini{height:54px}.play-control,.loop-button{min-height:46px}.seek-row{min-height:44px}.timeline-main input{height:44px}.loop-tools button{min-height:44px;padding:10px 0;font-size:12px}.loop-handle{width:32px;height:32px;font-size:12px}.timeline-main.selecting-loop{padding-top:32px}.loop-handle:after{top:32px;left:30px;height:31px}#loop-selection{top:32px;height:44px}#loop-end:after{left:0}
 .move-panel{width:40px;height:40px}.console-heading{margin-bottom:14px}.console>.speaker-grille{height:20px}.volume-dials{margin-bottom:13px}.recordings{scroll-margin-bottom:140px}.download-take{display:inline-flex;align-items:center;min-height:44px}.take audio{height:44px}.close-dialog{min-height:44px;margin-bottom:10px}.record-modes>label{min-height:64px}.record-modes>label:has(input:disabled){opacity:.55}dialog{max-height:85dvh}
 body[data-theme=night] .transport{background:linear-gradient(#414d61,#303b4f);border-color:#65748b;box-shadow:0 -6px 24px #0005,inset 0 1px 0 #78869c}
}
@media(max-width:380px){.presets{grid-template-columns:1fr 1fr}.presets button{font-size:12px}.volume-dials{gap:23px}.empty-prompt{font-size:8px}.deck{padding:15px 12px}.deck-heading{margin-bottom:12px}.topbar nav{gap:12px}.tape-label strong{font-size:7cqw}.url-field button span{display:none}}
@media(min-width:561px) and (max-height:500px){.topbar{height:48px}.video-stage{min-height:200px;aspect-ratio:16/9}.studio,.studio.swapped{min-height:0}.deck{padding-top:16px}.standby-tape{width:45%;max-width:300px}.empty-stage{gap:12px}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}