/* Bradfield music spaces. Deliberately scoped to preserve the home/PWA layout. */
#music-world{--ink:#0a0e14;--panel:#131a23;--line:#2a3543;--muted:#8b9daf;--teal:#21c7c0;--gold:#ffc344;position:fixed;inset:0;z-index:8;overflow:hidden;background:var(--ink);color:#edf4fc;font-family:Arial,Helvetica,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}
.browser-mode #music-world{left:var(--browser-left,0px);top:var(--browser-top,0px);width:var(--browser-width,100vw);height:var(--browser-height,100dvh);right:auto;bottom:auto}
#music-world button,#music-world input,#music-world select{font:inherit}#music-world button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 13px;border:1px solid #344153;border-radius:8px;background:linear-gradient(#242e3b,#1b2430);color:#e2edf8;font-size:12px;font-weight:700;white-space:nowrap;transition:background .16s,border-color .16s,box-shadow .16s;touch-action:manipulation}#music-world button:hover{background:#303e50;border-color:#60778f}#music-world button:focus-visible{outline:2px solid #fff;outline-offset:2px}#music-world button svg{width:17px;height:17px;flex-shrink:0}#music-world button:disabled{opacity:.34;cursor:default;filter:saturate(.2)}#music-world button.active,#music-world button[aria-pressed=true]{background:#143d42;border-color:#24b5b3;color:#81f4e9}#music-world .accent{background:var(--gold);border-color:#ffdb7b;color:#241a07;box-shadow:0 2px 10px #ffc34414}#music-world .accent:hover{background:#ffd677}#music-world .cyan{background:#22c5bc;border-color:#5ee7d9;color:#032c2d}#music-world .text-button{background:transparent;border-color:transparent;padding:5px 8px;color:#b9cbdc;min-height:28px}#music-world .text-button:hover{background:#ffffff0a;color:#fff}#music-world input,#music-world select{min-width:0;border:1px solid #3a4a5d;border-radius:6px;background:#0e151e;color:#d6e5f2;padding:5px 7px}#music-world input[type=range]{accent-color:var(--track,var(--teal));padding:0;border:0;background:transparent;height:16px}#music-world input[type=number]{font-variant-numeric:tabular-nums}#music-world .record-control{background:#361d29;border-color:#693144;color:#ffb7c7}#music-world .record-control:hover{background:#592839}.record-dot{display:inline-block;width:10px;height:10px;background:#ff526f;border-radius:50%;box-shadow:0 0 8px #ff526f44}#music-world button.recording{background:#9b2541;border-color:#ff6f8b;color:#fff;animation:recordPulse 1.2s infinite}.music-view{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;background:#0b1017}.music-bar{display:flex;align-items:center;gap:12px;min-height:65px;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));border-bottom:1px solid #2d3948;background:#101721;flex-shrink:0;position:relative;z-index:2}.music-bar:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#ff7a00,#ffc344 25%,#21c7c0 55%,#4c9cff)}.music-bar img{width:41px;height:41px;object-fit:contain;background:black;border-radius:50%;flex-shrink:0}.music-title{display:flex;flex-direction:column;gap:4px;min-width:0}.music-title strong{font-size:19px;letter-spacing:.075em;font-weight:800;white-space:nowrap}.music-title em{font-style:normal;color:#ffcf61}.music-title small{color:#8ea1b7;font-size:11px}.music-bar-right{margin-left:auto;display:flex;gap:16px;align-items:center}.studio-badge{font-size:9px;letter-spacing:.13em;color:#6c8b9f}.music-bar .help-control{border-color:#346869;background:#123135;color:#a2f4e9}.music-bar .back-control{padding:8px 10px;background:transparent;border-color:#334252;color:#b9c8d8}.transport-group{display:flex;align-items:center;gap:6px;min-width:0}.transport-group.right{margin-left:auto}.pro-transport{display:flex;align-items:center;gap:20px;min-height:67px;padding:10px 18px;background:#151e29;border-bottom:1px solid #304052;flex-shrink:0}.transport-display{display:flex;gap:16px;align-items:center;border:1px solid #2a3c4e;background:#080e15;border-radius:8px;padding:6px 15px;min-height:42px}.transport-display #clock{font:21px/1.1 ui-monospace,Menlo,monospace;color:#c2f2eb;min-width:94px;letter-spacing:.05em}.transport-display label{display:flex;align-items:center;gap:5px;border-left:1px solid #293748;padding-left:12px}.transport-display input{width:50px!important;border:0!important;background:transparent!important;padding:0!important;font-size:17px!important;text-align:right}.transport-display small{font-size:8px;letter-spacing:.1em;color:#7e98aa}.mini-meter{display:flex;gap:3px;align-items:flex-end;height:24px;width:29px}.mini-meter i{display:block;width:3px;height:5px;background:#28b8a1;border-radius:1px}.mini-meter i:nth-child(2){height:12px}.mini-meter i:nth-child(3){height:18px}.mini-meter i:nth-child(4){height:24px;background:#ffbf42}.mini-meter i:nth-child(5){height:10px}.is-playing .mini-meter i{animation:meterDance .5s infinite alternate}.is-playing .mini-meter i:nth-child(even){animation-delay:-.25s}.learn-strip{display:flex;align-items:center;gap:14px;min-height:48px;background:#0c151e;border-bottom:1px solid #223040;padding:6px 18px;flex-shrink:0}.learn-label{display:flex;align-items:center;gap:7px;color:#9cb6cb;font-size:11px;white-space:nowrap}.learn-label svg{width:15px;height:15px;color:#ffc344}#lesson-progress{display:flex;gap:6px;align-items:center;flex:1}#music-world .quest{min-height:28px;border:0;background:transparent;color:#8da5bb;font-size:10px;padding:3px 6px;gap:6px}#music-world .quest>span{display:grid;place-items:center;border:1px solid #3c5168;width:18px;height:18px;border-radius:50%;font-size:9px;color:#a7bdce}#music-world .quest.done{color:#6ee0c6}#music-world .quest.done>span{background:#123c34;border-color:#247e66;color:#84f4cc}#learning-toggle{margin-left:auto}
/* Track lanes and matching coloured channel strips. */
.pro-arrangement{display:grid;grid-template-columns:210px minmax(0,1fr);flex:1;min-height:120px;overflow:hidden;border-bottom:1px solid #344255}.track-bank{overflow:hidden;background:#151f2c;border-right:1px solid #3a4a5f}.track-bank-title{display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 12px;font-size:9px;font-weight:bold;letter-spacing:.1em;color:#a6b7cb;border-bottom:1px solid #2f4054;background:#1b2838;position:relative;z-index:2}.track-bank-title span{font-size:7px;color:#667f96}.track-header{height:100px;border-bottom:1px solid #2a3a4d;border-left:3px solid var(--track);padding:9px 10px 8px;background:linear-gradient(90deg,color-mix(in srgb,var(--track) 6%,#151f2c),#151f2c)}.track-header.selected{background:color-mix(in srgb,var(--track) 11%,#151f2c)}#music-world .track-name{background:transparent;border:0;box-shadow:none;justify-content:flex-start;text-align:left;width:100%;padding:0;gap:8px;min-height:35px}.track-symbol{width:29px;height:29px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--track) 40%,transparent);background:color-mix(in srgb,var(--track) 15%,transparent);border-radius:7px;color:var(--track)}.track-name strong{display:block;font-size:13px;color:#e3edf5}.track-name small{display:block;font-weight:400;font-size:9px;color:#869cb0;margin-top:3px}.track-mix{display:flex;align-items:center;gap:4px;margin-top:7px}#music-world .track-mix button{padding:0;min-height:23px;width:25px;border-radius:4px;background:#111b27;border-color:#34475b;font-size:10px;color:#89a1b6}#music-world .track-mix [data-arm][aria-pressed=true]{color:#ffa6b8;border-color:#a9435a;background:#4d2431}#music-world .track-mix button[aria-pressed=true]{background:#3e3a22;color:#ffe382;border-color:#c5a449}.track-mix input{width:70px;flex:1;min-width:25px}.timeline-scroll{position:relative;overflow:auto;background:#0c131c;touch-action:pan-x pan-y;scrollbar-color:#40556b #101a27;scrollbar-width:thin}.timeline{position:relative;min-width:100%;min-height:100%;background:repeating-linear-gradient(to right,transparent 0,transparent 69px,#bcd9ff09 69px,#bcd9ff09 70px)}.timeline-ruler{height:30px;position:sticky;top:0;z-index:4;border-bottom:1px solid #324357;background:#182434;cursor:crosshair}.timeline-ruler span{position:absolute;top:9px;color:#8198ae;font-size:9px;font-family:monospace;pointer-events:none}.track-row{height:100px;position:relative;border-bottom:1px solid #243346;background:linear-gradient(90deg,color-mix(in srgb,var(--track) 4%,transparent),transparent 60%)}.track-row.selected-track{background-color:#ffffff02}#music-world .audio-clip{position:absolute;top:13px;height:73px;min-height:0;border:1px solid color-mix(in srgb,var(--track) 65%,#24303b);border-top:4px solid var(--track);background:color-mix(in srgb,var(--track) 20%,#101b29);color:var(--track);border-radius:6px;padding:5px 8px;overflow:hidden;display:block;text-align:left;cursor:grab;touch-action:none;box-shadow:0 3px 8px #0002}#music-world .audio-clip.selected{outline:1px solid #e9f7ff;outline-offset:2px}#music-world .audio-clip:hover{background:color-mix(in srgb,var(--track) 30%,#101b29)}.audio-clip>span{position:relative;z-index:1;font-size:10px;display:block;text-overflow:ellipsis;overflow:hidden}.audio-clip canvas{position:absolute;left:0;right:0;bottom:1px;width:100%;height:40px;opacity:.65;pointer-events:none}#music-world .empty-track{position:absolute;left:22px;top:16px;display:grid;grid-template-columns:28px 1fr;gap:3px 8px;text-align:left;align-items:center;padding:9px 14px;background:transparent;border:1px dashed color-mix(in srgb,var(--track) 25%,transparent);color:color-mix(in srgb,var(--track) 65%,#8ca1b3);min-width:250px;font-size:11px;min-height:61px}#music-world .empty-track svg{grid-row:span 2;width:20px;height:20px}.empty-track small{font-size:9px;font-weight:400;color:#57718a}.playhead{position:absolute;top:0;bottom:0;width:1px;background:#ffde77;z-index:5;pointer-events:none;box-shadow:0 0 4px #ffd26444}.playhead:before{content:'';position:absolute;top:0;left:-4px;border:5px solid transparent;border-top:8px solid #ffce5a}.pro-editbar{display:flex;align-items:center;gap:12px;padding:7px 14px;background:#172231;border-bottom:1px solid #334459;flex-shrink:0;min-height:44px}.pro-editbar label{display:flex;align-items:center;gap:4px;font-size:10px;color:#90a8c0;white-space:nowrap}.pro-editbar input{width:55px}.edit-right{display:flex;align-items:center;gap:5px;margin-left:auto}.pro-editbar select{font-size:10px!important;max-width:100px}#music-world .pro-editbar button{min-height:29px;padding:5px 9px;font-size:10px}#music-world .pro-editbar button svg{width:13px;height:13px}
/* An always visible sound rack explains the selected track's effect. */
.effects-panel{background:linear-gradient(#131e2b,#0f1824);padding:12px 18px 10px;border-bottom:1px solid #2d3a4d;flex-shrink:0}.fx-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.section-kicker{font-size:8px;color:#7792a9;letter-spacing:.14em;font-weight:bold}.fx-heading h3{font-size:14px;font-weight:700;margin:4px 0 0;display:flex;align-items:center;gap:6px;color:var(--track)}.fx-heading h3 svg{width:15px;height:15px}.fx-heading h3>span{color:#9fb3c8;font-weight:400;font-size:12px}.fx-level{display:flex;gap:20px}.fx-level label{display:flex;align-items:center;gap:9px;color:#a3b7ca;font-size:9px}.fx-level input{width:100px}.fx-options{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}#music-world .fx-preset{display:flex;justify-content:flex-start;text-align:left;gap:9px;min-height:48px;padding:8px 11px;background:#1a2839;border-color:#304359;border-radius:7px}#music-world .fx-preset span{display:grid;place-items:center;width:27px;height:27px;background:#26394e;border-radius:6px;color:#8baac5}#music-world .fx-preset strong{font-size:11px}#music-world .fx-preset.active{background:color-mix(in srgb,var(--track) 13%,#172331);border-color:var(--track);color:var(--track)}#music-world .fx-preset.active span{background:color-mix(in srgb,var(--track) 20%,#182b38);color:var(--track)}.fx-explanation{display:flex;gap:20px;align-items:center;margin-top:9px;min-height:20px}.fx-explanation p{font-size:10px;color:#9eb5c8;line-height:1.4;margin:0;flex:1}.fx-explanation label{font-size:9px;color:#93aabf;display:flex;align-items:center;gap:8px;white-space:nowrap}.fx-explanation input{width:110px}.fx-explanation #clip-info{font-size:9px;color:#5f7a92;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-status{font-size:10px;color:#819bb1;padding:7px 18px;background:#0a1119;min-height:29px;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.audio-download{color:#7ee7d8;font-weight:bold}.beat-panel{background:#121e2b;padding:10px 18px;flex-shrink:0;max-height:45%;overflow:auto}.beat-tools{display:flex;gap:7px;align-items:center;margin-bottom:7px}.beat-tools strong{margin-right:auto;font-size:11px;color:#ffd477}.beat-row{display:grid;grid-template-columns:52px repeat(16,minmax(20px,1fr));gap:5px;margin-top:5px;align-items:center}.beat-row>span{font-size:10px;color:#8ba4bb}#music-world .beat-step{padding:0;min-height:26px;border-radius:4px;background:#24354a;border-color:#394b60}#music-world .beat-step.active{background:#21c0ba;border-color:#76f1d9;box-shadow:0 0 8px #1fc2b21a}#music-world .beat-step:nth-child(4n+2){border-left:2px solid #7c94ac}#music-world .beat-step.current{box-shadow:0 0 0 2px #ffdd85 inset}
/* Room artwork scales uniformly. Hotspots share its coordinate system. */
.room-canvas{position:absolute;inset:0;overflow:hidden;background:#15222c}.room-scene{position:absolute;isolation:isolate}.room-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.wall-logo{position:absolute;left:37.65%;top:11.7%;width:15.1%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;background:#080a0b;padding:2px;box-shadow:0 2px 12px #0006;pointer-events:none}.room-toolbar{position:absolute;top:0;left:0;right:0;z-index:4}.room-toolbar .music-bar{background:#0b141deb;backdrop-filter:blur(8px)}.room-player{position:absolute;height:67%;width:auto;left:12%;top:96%;transform:translate(-50%,-100%);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;cursor:grab;transition:left 1s,top 1s,height 1s;filter:none;z-index:4}.room-player.dragging{transition:none;cursor:grabbing}.room-scene img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.room-player.in-booth{left:82%;top:74%;height:52%;filter:none}#music-world .equipment-hit{position:absolute;display:block;background:transparent;border:2px solid transparent;padding:0;box-shadow:none;border-radius:14px;z-index:3;min-height:0}#music-world .equipment-hit:hover,#music-world .equipment-hit:focus-visible{background:#3be9df0c;border-color:#a0fff39c;box-shadow:0 0 24px #21c7c034}#music-world .equipment-hit.mac{left:21.1%;top:32.8%;width:16.7%;height:21.7%}#music-world .equipment-hit.keys{left:42.5%;top:48.7%;width:16%;height:12.5%}#music-world .equipment-hit.booth{left:70%;top:14%;width:25%;height:61%}.room-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;gap:9px;background:#0e1926ee;backdrop-filter:blur(16px);padding:10px;border:1px solid #55708177;border-radius:17px;box-shadow:0 14px 45px #0005;max-width:95%}.room-dock-intro{display:flex;align-items:center;gap:10px;min-width:230px;padding:0 14px}.room-dock-intro strong{display:block;font-size:13px;color:#dbeaf7}.room-dock-intro small{display:block;color:#819db1;font-size:10px;margin-top:5px}.live-dot{display:inline-block;width:7px;height:7px;flex-shrink:0;background:#35d6be;border-radius:50%;box-shadow:0 0 12px #35d6be66}#music-world .room-dock button{min-height:53px;border-radius:10px;justify-content:flex-start;gap:10px;min-width:150px;padding:10px 15px;background:#17283a;border-color:#35566c}#music-world .room-dock button svg{width:23px;height:23px}.room-dock button>span{display:block;text-align:left}.room-dock button strong{font-size:12px;display:block}.room-dock button small{display:block;font-size:9px;font-weight:400;color:#93adc3;margin-top:5px}.room-dock .station-daw{color:#78e3d6!important}.room-dock .station-keys{color:#ffd278!important}.room-dock .station-booth{color:#85baff!important}
/* Controller: touch targets are the pads and keys, with native range controls over real dials. */
.keys-transport{display:flex;gap:20px;align-items:center;padding:9px 18px;background:#151f2c;border-bottom:1px solid #2f4054;min-height:62px;flex-shrink:0}.keys-take-display{display:flex;flex-direction:column;gap:4px;border-left:1px solid #35475d;padding-left:20px}.keys-take-display strong{font:19px ui-monospace,Menlo,monospace;color:#7fddcf}.sound-selector{display:flex;align-items:center;gap:6px;font-size:10px;color:#8fa8bf;margin-right:8px}.sound-selector select{font-size:11px!important}.controller-wrap{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;padding:22px 30px;background:radial-gradient(ellipse at center,#253447 0,#0b121c 80%)}.controller{width:100%;max-width:1450px;display:grid;grid-template-columns:14% 86%;grid-template-rows:46% 54%;min-height:0;background:linear-gradient(115deg,#292c31,#191d23 40%,#24282d);border:1px solid #4c535e;border-top:2px solid #60646b;border-radius:13px;padding:20px 24px 16px;box-shadow:0 20px 40px #0009,inset 0 1px 0 #ffffff09;position:relative}.controller:after{content:'';position:absolute;left:15px;right:15px;bottom:-4px;height:4px;border-radius:0 0 8px 8px;background:#070a10;box-shadow:0 2px 0 #44515d;pointer-events:none}.controller-brand{grid-column:1;grid-row:1;padding:5px 22px 18px 0;display:flex;flex-direction:column;justify-content:space-between;min-height:0}.keyboard-screen{display:flex;flex-direction:column;gap:6px;background:#08151b;border:2px solid #071018;border-radius:5px;box-shadow:inset 0 0 14px #0e3b4470,0 0 0 1px #42505b;color:#82e2dd;padding:9px 10px;min-height:65px;font-family:monospace;font-size:13px;overflow:hidden}.keyboard-screen small{font-size:8px;letter-spacing:.12em;color:#477b8b}.keyboard-screen strong{font-size:15px}.keyboard-screen span{font-size:9px;color:#518d9b}.controller-wordmark{font-size:clamp(13px,1.8vw,23px);font-weight:bold;letter-spacing:.05em;color:#d4d9dd;white-space:nowrap}.controller-wordmark span{display:block;font-size:7px;letter-spacing:.12em;color:#727c87;font-weight:400;margin-top:7px}.keyboard-top{grid-column:2;grid-row:1;display:flex;gap:17px;padding-bottom:17px;min-height:0}.pads-section{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px}.knobs{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;gap:7px;height:41%;min-height:55px}.knob{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:0}.knob>label{text-transform:uppercase;font-size:8px;letter-spacing:.05em;color:#7e8997}.dial{position:relative;width:clamp(27px,3vw,45px);height:clamp(27px,3vw,45px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#4c525c,#191e25 70%);border:2px solid #060b11;box-shadow:0 3px 5px #0008,0 0 0 2px #46515d88}.dial>i{position:absolute;inset:3px;transform:rotate(var(--rotation));border-radius:50%;pointer-events:none}.dial>i:before{content:'';position:absolute;left:50%;top:1px;width:2px;height:8px;background:#66c3b6;box-shadow:0 0 4px #2dd4ba44;border-radius:1px;transform:translateX(-50%)}.dial input{position:absolute;inset:0;width:100%;height:100%!important;opacity:.01;cursor:ew-resize;touch-action:none}.dial:focus-within{outline:2px solid #a8f0df;outline-offset:4px}.pads{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,1fr);gap:7px;flex:1;min-height:0}#music-world .pad{position:relative;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:4px 3px;min-height:0;border-radius:5px;border:1px solid color-mix(in srgb,var(--pad) 58%,#31363e);background:linear-gradient(135deg,color-mix(in srgb,var(--pad) 50%,#26333c),color-mix(in srgb,var(--pad) 26%,#19252f));color:color-mix(in srgb,var(--pad) 65%,#fff);box-shadow:inset 0 1px 0 #ffffff21,0 2px 4px #0008,inset 0 0 11px color-mix(in srgb,var(--pad) 10%,transparent);touch-action:none;user-select:none;white-space:nowrap;overflow:hidden}#music-world .pad small{position:absolute;top:4px;left:5px;font-size:7px;opacity:.6}.pad>span{font-size:10px;font-weight:bold}#music-world .pad.lit{background:var(--pad);color:#0e2029;border-color:#fff;box-shadow:0 0 24px color-mix(in srgb,var(--pad) 65%,transparent),inset 0 0 8px #fff9;transform:translateY(1px)}.controller-side{width:15%;display:grid;grid-template-columns:1fr 1fr;gap:5px;align-content:end;flex-shrink:0}.hardware-section-label{grid-column:span 2;color:#707f90;font-size:7px;text-align:center;letter-spacing:.13em;margin-top:4px}#music-world .controller-side button{min-height:29px;font-size:9px;padding:4px;background:#171d25;border:1px solid #414a57;border-radius:4px;color:#a5b7c7}#music-world .controller-side button svg{width:14px;height:14px}#music-world .controller-side button.active{color:#63e7cf;border-color:#3cae9a;background:#143a33}.wheels{grid-column:1;grid-row:2;padding:10px 23px 0 4px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;min-height:0}.wheel-row{display:flex;width:100%;justify-content:space-evenly;height:78%}.wheel-row label{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:8px;text-transform:uppercase;color:#758698}.wheel-row input{writing-mode:vertical-lr;direction:rtl;width:22px!important;height:100%!important;accent-color:#677e90!important;min-height:0}.wheels>span{font:10px monospace;color:#8195a8;padding:4px 9px;border:1px solid #3b4c5b;border-radius:4px;background:#171e28}.piano{grid-column:2;grid-row:2;position:relative;display:flex;min-height:0;touch-action:none;user-select:none;border-top:5px solid #080d13;border-bottom:4px solid #0b1017;border-radius:0 0 5px 5px;box-shadow:0 -4px 6px #0008}.piano-key{position:relative;flex:1;min-width:0;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end!important;gap:2px!important;min-height:0!important;padding:0 0 14px!important;border-radius:0 0 5px 5px!important;touch-action:none!important;user-select:none;font-size:14px!important}.piano-key.white{background:linear-gradient(#bcc3cb 0,#f7f7f5 22%,#fff 70%,#e3e5e5)!important;border:1px solid #5d6168!important;color:#4c5965!important;box-shadow:inset 0 -7px 0 #c0c6cc,0 3px 0 #070c13}.piano-key.black{position:absolute;top:0;width:4.3%;height:62%;z-index:2;background:linear-gradient(90deg,#060b10,#2e3640 65%,#090f17)!important;color:#8c9cac!important;border:2px solid #03080d!important;border-top:0!important;box-shadow:inset 0 -9px #3a414a,0 6px 3px #0009;border-radius:0 0 4px 4px!important;font-size:10px!important;padding-bottom:15px!important}.piano-key>small{font:8px monospace;opacity:.5}.piano-key.white>span{font-size:14px}.piano-key.down{background:linear-gradient(#9cf2e0,#51d9c4)!important;box-shadow:inset 0 -5px #2aa697!important;color:#04372f!important}.piano-key.target-note:after{content:'';position:absolute;bottom:48px;width:10px;height:10px;border-radius:50%;background:#efb72d;box-shadow:0 0 10px #ffd25599;animation:lessonPulse 1s infinite}.keys-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px;border-top:1px solid #304358;background:#121e2b;flex-shrink:0;min-height:46px}.key-learning{display:flex;align-items:center;gap:10px;font-size:11px;color:#8eacbf}.key-learning>span:nth-child(2){min-width:110px}.keys-bottom .transport-group button{min-height:30px;padding:5px 10px;font-size:10px}.keys-bottom .transport-group button svg{width:14px;height:14px}.sr-only{position:absolute!important;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
/* Learning dialogs and sound sampler. */
.music-modal{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:#02070dd9;backdrop-filter:blur(9px);padding:18px}.music-modal-card{width:min(800px,96%);max-height:95%;overflow:auto;padding:25px 28px;background:linear-gradient(145deg,#1c2a3a,#111d2b);border:1px solid #46607a;border-top:3px solid #27c6ba;border-radius:16px;box-shadow:0 20px 100px #0008}.music-modal-card h2{font-size:23px;margin:0 0 16px;color:#ffcf66}.music-modal-card h3{font-size:14px;color:#6ddccf;margin:24px 0 7px}.music-modal-card p{color:#aebfd0;font-size:13px;line-height:1.65;margin:8px 0}.music-modal-card .modal-close{float:right}.music-modal-card label{font-size:12px;color:#a8c2d7}.guide-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #34465b;padding-bottom:12px}.music-modal-card #sample-status{padding:14px;background:#0c1a28;border:1px solid #324e62;border-radius:8px}.guide-tabs button{min-height:34px!important}.music-modal-card a{color:#71e3cf}@keyframes recordPulse{50%{box-shadow:0 0 0 3px #e6345b33}}@keyframes meterDance{to{height:3px;opacity:.5}}@keyframes lessonPulse{50%{box-shadow:0 0 0 5px #ffd25520}}
@media(max-width:1100px){.pro-transport{gap:10px;padding-left:12px;padding-right:12px}.transport-display{gap:8px;padding:6px 9px}.transport-display #clock{font-size:17px;min-width:74px}.mini-meter{display:none}.pro-arrangement{grid-template-columns:175px minmax(0,1fr)}.fx-preset>span{display:none!important}#music-world .fx-preset{justify-content:center}.studio-badge{display:none}.pro-editbar{gap:7px;padding-left:10px;padding-right:10px}.pro-editbar label{font-size:9px}.edit-right{gap:4px}.pro-editbar select{max-width:85px}.pro-editbar input{width:45px}.room-dock-intro{min-width:190px;padding:0 8px}.room-dock button{min-width:135px!important}.controller-wrap{padding:16px 20px}.controller{padding:15px 18px 12px}.controller-brand{padding-right:18px}.keyboard-top{gap:12px}.pads-section{gap:10px}.keyboard-screen{font-size:11px;padding:6px 7px;min-height:58px}.controller-wordmark{font-size:15px}.fx-explanation #clip-info{display:none}.keys-transport{gap:14px}.keys-take-display{padding-left:14px}.key-learning{gap:7px}.key-learning>span:nth-child(2){min-width:100px}.sound-selector{margin:0}.fx-level input{width:85px}}
@media(max-height:550px){#music-world{font-size:11px}#music-world button{min-height:30px;padding:6px 9px;font-size:10px;gap:5px}#music-world button svg{width:14px;height:14px}.music-bar{min-height:43px;padding:5px max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left));gap:9px}.music-bar img{width:29px;height:29px}.music-title strong{font-size:14px}.music-title small{display:none}.music-bar-right{gap:7px}.music-bar .help-control{min-height:28px;padding:5px 8px}.pro-transport{min-height:44px;padding:5px 10px;gap:10px}.transport-display{min-height:31px;padding:3px 9px}.transport-display #clock{font-size:16px;min-width:70px}.transport-display label{padding-left:6px}.transport-display input{font-size:12px!important;width:40px!important}.transport-display small{font-size:7px}.learn-strip{min-height:31px;padding:2px 12px;gap:9px}.learn-label{font-size:9px}.learn-label svg{width:12px;height:12px}#music-world .quest{font-size:9px;min-height:23px;padding:2px 5px;gap:5px}#music-world .quest>span{width:15px;height:15px;font-size:8px}#learning-toggle{font-size:8px}.pro-arrangement{min-height:90px;grid-template-columns:165px minmax(0,1fr)}.track-bank-title,.timeline-ruler{height:23px}.track-bank-title{font-size:8px}.timeline-ruler span{top:6px;font-size:8px}.track-header,.track-row{height:56px}.track-header{padding:3px 7px}.track-symbol{width:20px;height:20px;border-radius:4px}.track-symbol svg{width:12px!important;height:12px!important}.track-name{min-height:22px!important;gap:6px!important}.track-name strong{font-size:11px}.track-name small{display:none}.track-mix{margin-top:1px;gap:4px}.track-mix input{height:10px!important}.track-mix button{min-height:18px!important;width:22px!important;font-size:8px!important}.audio-clip{top:5px!important;height:44px!important;padding:3px 6px!important;border-top-width:3px!important}.audio-clip>span{font-size:9px}.audio-clip canvas{height:23px}.empty-track{top:6px!important;padding:5px 10px!important;min-height:40px!important;font-size:9px!important}.empty-track small{font-size:8px}.empty-track svg{width:15px!important;height:15px!important}.pro-editbar{min-height:33px;padding:3px 10px;gap:5px}.pro-editbar button{min-height:25px!important;font-size:9px!important;padding:4px 7px!important}.pro-editbar input{padding:3px;width:40px}.pro-editbar select{padding:4px;font-size:9px!important;max-width:80px}.pro-editbar label{font-size:8px}.effects-panel{padding:6px 12px}.fx-heading{margin-bottom:5px}.fx-heading h3{font-size:11px;margin-top:0}.fx-heading h3>span{font-size:10px}.fx-heading .section-kicker{display:none}.fx-heading h3 svg{width:12px;height:12px}.fx-level label{font-size:8px}.fx-level input{width:65px;height:10px!important}.fx-options{gap:5px}.fx-preset{min-height:31px!important;padding:5px 8px!important}.fx-preset strong{font-size:9px!important}.fx-preset>span{display:none!important}.fx-explanation{margin-top:5px;gap:12px;min-height:16px}.fx-explanation p{font-size:9px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.fx-explanation label{font-size:8px}.fx-explanation input{width:75px;height:10px!important}.fx-explanation #clip-info{display:none}.music-status{min-height:22px;padding:4px 12px;font-size:9px}.beat-panel{padding:6px 12px;max-height:45%}.beat-tools{margin-bottom:3px}.beat-tools strong{font-size:9px}.beat-row{margin-top:3px;gap:4px;grid-template-columns:42px repeat(16,minmax(16px,1fr))}.beat-step{min-height:17px!important}.beat-tools button{min-height:24px!important}.beat-row>span{font-size:8px}.room-dock{padding:6px;gap:6px;bottom:max(8px,env(safe-area-inset-bottom));border-radius:12px}.room-dock-intro{display:none}.room-dock button{min-height:42px!important;min-width:130px!important;padding:6px 11px!important;gap:9px!important}.room-dock button svg{width:20px!important;height:20px!important}.room-dock button strong{font-size:10px}.room-dock button small{font-size:8px;margin-top:3px}.keys-transport{min-height:43px;padding:5px 12px;gap:15px}.keys-take-display{gap:1px;padding-left:10px}.keys-take-display strong{font-size:14px}.keys-take-display .section-kicker{font-size:6px}.sound-selector{font-size:9px}.sound-selector select{font-size:10px!important;padding:4px}.controller-wrap{padding:9px 16px}.controller{padding:10px 14px 9px;grid-template-columns:14% 86%;grid-template-rows:48% 52%;border-radius:8px}.controller-brand{padding:1px 13px 8px 0}.keyboard-screen{min-height:43px;padding:5px 6px;gap:2px;font-size:10px}.keyboard-screen strong{font-size:11px}.keyboard-screen small{font-size:6px}.keyboard-screen span{font-size:7px}.controller-wordmark{font-size:12px;letter-spacing:.01em}.controller-wordmark span{font-size:5px;margin-top:4px}.keyboard-top{padding-bottom:9px;gap:10px}.pads-section{gap:6px}.knobs{min-height:33px;height:38%;gap:4px}.knob{gap:3px}.knob>label{font-size:6px}.dial{width:24px;height:24px;border-width:1px}.dial>i:before{height:6px;width:1px}.pads{gap:4px}.pad{border-radius:3px!important;gap:0!important;padding:1px!important}.pad small{font-size:5px!important;left:3px!important;top:2px!important}.pad span{font-size:8px}.controller-side{gap:3px}.hardware-section-label{font-size:5px;margin-top:2px;letter-spacing:.1em}.controller-side button{min-height:20px!important;padding:2px!important;font-size:8px!important}.controller-side button svg{width:10px!important;height:10px!important}.controller-side .record-dot{width:6px;height:6px}.wheels{padding:4px 15px 0 2px}.wheel-row{height:75%}.wheel-row label{font-size:6px;gap:4px}.wheel-row input{width:16px!important}.wheels>span{font-size:8px;padding:3px 7px}.piano{border-top-width:3px;border-bottom-width:2px}.piano-key{padding-bottom:7px!important;gap:0!important;font-size:10px!important}.piano-key.white>span{font-size:11px}.piano-key.black{font-size:8px!important;padding-bottom:10px!important}.piano-key>small{font-size:6px}.piano-key.target-note:after{bottom:31px;width:7px;height:7px}.keys-bottom{min-height:34px;padding:3px 12px;gap:6px}.keys-bottom button{min-height:26px!important;font-size:9px!important;padding:4px 7px!important}.key-learning{font-size:9px;gap:6px}.key-learning>span:nth-child(2){min-width:90px}.music-modal{padding:10px}.music-modal-card{padding:16px 20px;border-radius:12px}.music-modal-card h2{font-size:18px;margin-bottom:10px}.music-modal-card h3{font-size:13px;margin-top:18px}.music-modal-card p{font-size:12px}}
@media(max-width:800px){.pro-transport{gap:6px}.pro-transport .transport-group{gap:4px}.pro-transport .transport-group button{padding-left:7px!important;padding-right:7px!important}.transport-display{gap:4px;padding-left:6px;padding-right:6px}.transport-display #clock{min-width:65px}.transport-display label{gap:2px}.pro-editbar #clip-duplicate{display:none}.pro-editbar .transport-group{gap:4px}.edit-right{gap:4px}.learn-label{display:none}.fx-level{gap:10px}.fx-level input{width:60px}.keys-take-display{display:none}.key-learning>span:nth-child(2){display:none}.room-dock button{min-width:120px!important}.music-title strong{font-size:13px}.controller-wordmark{font-size:10px}.controller-wordmark span{font-size:4px}.fx-explanation label{gap:4px}.keys-transport{gap:8px}.keys-transport .transport-group{gap:4px}.sound-selector{gap:4px;margin-right:4px}.sound-selector select{max-width:105px}.fx-options{gap:4px}.music-bar .back-control{font-size:10px}}
@media(max-height:420px){.learn-strip{min-height:23px;padding-top:1px;padding-bottom:1px}.learn-strip .quest,.learn-strip .text-button{min-height:19px!important;padding-top:1px!important;padding-bottom:1px!important;font-size:8px!important}.learn-strip .quest>span{width:14px;height:14px}.pro-arrangement{min-height:155px}.track-header,.track-row{height:44px}.track-header{padding:2px 7px}.track-name{min-height:19px!important}.track-symbol{width:17px;height:17px}.track-mix{margin-top:1px}.track-mix button{min-height:16px!important;font-size:7px!important;width:20px!important;border-radius:3px!important}.track-mix input{height:9px!important}.audio-clip{top:4px!important;height:36px!important;border-top-width:2px!important}.audio-clip canvas{height:19px}.audio-clip>span{font-size:8px}.empty-track{top:5px!important;min-height:33px!important;padding:4px 9px!important;grid-template-columns:19px 1fr!important;gap:1px 6px!important}.empty-track small{font-size:7px}.effects-panel{padding:5px 12px}.fx-heading{height:13px;margin-bottom:4px}.fx-heading h3{font-size:10px}.fx-heading h3>span{font-size:9px}.fx-level label{font-size:7px}.fx-level input{width:60px}.fx-preset{min-height:26px!important;padding:4px 7px!important}.fx-preset strong{font-size:8px!important}.fx-explanation{min-height:13px;margin-top:4px}.fx-explanation p{font-size:8px}.fx-explanation label{font-size:7px}.fx-explanation input{width:60px}.music-status{min-height:19px;padding-top:3px;padding-bottom:3px;font-size:8px}.pro-editbar{min-height:30px}.pro-editbar button{min-height:24px!important}.keys-bottom .text-button{font-size:9px!important}.fx-options{gap:5px}}
@media(max-height:420px){.fx-preset strong{font-size:10px!important}}