/* One physical console, divided by printed rules rather than floating cards. */
:root{--bg:#e5e3e8;--ink:#4c4558;--muted:#7a7287;--line:#bfb8c8;--surface:#d9d4e1;--screen:#464254;--screen-text:#e7d9f1}
body{background:radial-gradient(ellipse at 50% 0,#f6f0fa,var(--bg) 70%);min-height:100vh;padding:0 18px 24px}header{max-width:1520px;padding:17px 4px;border:0}.brand{font-size:24px}.brand span{display:inline;margin-left:16px;letter-spacing:.7px;font-size:9px;text-transform:uppercase}.top-actions button{border-radius:7px;padding:8px 12px;min-height:36px}.console{max-width:1520px;margin:0 auto;padding:16px 24px 0;border:1px solid #b5adbf;border-radius:24px;background:linear-gradient(145deg,#ece7ef,var(--surface));box-shadow:inset 0 2px 1px #fff,inset 0 -6px 2px #c1bacb,0 12px 0 #b2a9be,0 24px 38px #51465f28;position:relative}.console:before,.console:after{content:'−';position:absolute;top:15px;width:11px;height:11px;font:10px monospace;text-align:center;line-height:9px;color:#82758b;border:1px solid #a99daf;border-radius:50%;box-shadow:inset 0 1px 2px #8b7b9455,0 1px 0 white}.console:before{left:10px}.console:after{right:10px}.console-top{display:flex;justify-content:space-between;padding:0 3px 13px;border-bottom:1px solid var(--line)}.hardware-label{font:9px monospace;letter-spacing:1.2px;color:#8b8195}.deck-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}.intent{padding:0;display:block;flex-shrink:0}.intent .eyebrow,.intent p,.intent button span{display:none}.intent-buttons{margin:0;gap:4px}.intent button{font-size:12px;min-height:38px;padding:9px 15px;border-radius:6px;background:#dad3e2;border:1px solid #b6aebe;box-shadow:inset 0 1px #fff8,0 2px 0 #b4a7bc}.intent button[aria-pressed=true]{background:#c9aed7;border-color:#a58fb7;box-shadow:inset 0 2px 4px #74657d33}.toolbar{margin:0;display:flex;flex:1;gap:12px;flex-wrap:wrap}.presets{padding:3px;background:#c6bfce;border-radius:7px}.presets button{font-size:10px;border-radius:5px;padding:7px 11px;min-height:30px}.presets .selected{background:#ede4f2}.start{margin-left:auto;min-height:36px;font-size:11px}#status{font:10px monospace;background:var(--screen);color:var(--screen-text);padding:10px 12px;border-radius:5px;margin:0;min-width:220px;max-width:330px;flex:1;box-shadow:inset 0 2px 6px #201b3280;line-height:1.3;min-height:36px}.mixer{padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:20px}.mixer-title{margin-right:10px;font-size:11px;text-transform:uppercase;letter-spacing:1px}.mixer-title .asterisk,.mixer-title small{display:none}.mixer label{width:145px;flex:1;max-width:210px;font-size:10px}.mixer input{height:18px}.record{border-radius:6px;min-height:36px;background:#eacbd6;border:1px solid #bfa2b1;box-shadow:inset 0 1px #fff8,0 2px #b49baa;font-size:11px;margin-left:auto}.record.recording{background:#bd667f;color:white}.studio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;margin:0}.board{grid-column:1/6;grid-row:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-right:1px solid var(--line);padding:12px 18px 10px 0}.module{min-height:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;padding:8px 0;align-items:stretch;justify-content:center}.module-heading{padding:0 12px;font:9px monospace;letter-spacing:.8px}.module-heading span:last-child{font-size:15px}.module-foot{padding:5px 12px 8px;margin-top:0}.module-foot h2{font:10px monospace;letter-spacing:1.5px;margin:0 0 5px}.module-foot>span{font-size:9px;line-height:1.4;display:block}.bubble-grid{width:100%;max-width:182px;gap:12px;padding:20px 12px;align-self:center}.bubble{min-height:0;min-width:0}.ring-area{padding:20px 4px}.ring{width:148px;height:148px}.ring-hole{width:86px;height:86px}.ring-hole span{font-size:10px}.ring-mark{top:10px;transform-origin:4px 64px}.silk{height:146px;width:calc(100% - 28px);max-width:164px;align-self:center;margin:20px 14px;border-radius:46px 46px 18px 18px}.silk>span{font-size:9px;bottom:15px}.cloud-area{height:186px}.cloud-object{width:146px;height:122px}.cloud-object span{font-size:11px}.halo{width:164px;height:164px}.module:nth-child(-n+2){border-bottom:1px solid var(--line)}.module:nth-child(odd){border-right:1px solid var(--line)}.instrument{border:0;border-radius:0;box-shadow:none;background:none;padding:16px 0 14px 22px;min-width:0}.synth-panel{grid-column:6/13;grid-row:1}.rhythm-panel{grid-column:6/13;grid-row:2;border-top:1px solid var(--line)}.vocal-panel{grid-column:1/8;border-top:1px solid var(--line);border-right:1px solid var(--line);padding:16px 22px 16px 0}.fx-panel{grid-column:8/13;border-top:1px solid var(--line)}.instrument-top{font:9px monospace;letter-spacing:1.5px;color:#81768e}.instrument-top span:last-child{font-size:14px}.instrument h2,.instrument>p:not(.hint){display:none}.instrument .controls{margin-top:12px;gap:16px}.controls label{font-size:10px;min-width:85px}.instrument select{min-height:32px;padding:7px 8px;font-size:11px;border-radius:5px;background:#eee8f3;border:1px solid #b7abbf}.instrument button:not(.synth-pad):not(.step){min-height:34px;border-radius:5px;padding:8px 10px;font-size:10px;background:#e7dfea;border:1px solid #beb1c6;box-shadow:inset 0 1px #fffb,0 2px 0 #b5a9c1}.instrument button[aria-pressed=true]:not(.step){background:#b8cdd1;border-color:#91abb5}.instrument input[type=range],.mixer input[type=range]{accent-color:#8b719e;margin-top:7px}.keyboard-scroll{padding:12px 2px 7px}.synth-pads{height:137px;min-width:440px}.synth-pad{height:130px;border-radius:3px 3px 7px 7px;background:linear-gradient(#fefbff,#e1d7e9)}.synth-pad.black{height:82px;border-radius:2px 2px 5px 5px}.synth-pad.playing{background:#bfa4d1}.synth-pad.black.playing{background:#a081b9}.transport,.file-row,.loop-controls,.fx-presets{gap:7px;margin:10px 0}.compact-level{font-size:10px}.sequence-scroll{padding-bottom:4px}.sequencer{grid-template-columns:48px repeat(16,minmax(16px,1fr));gap:4px;min-width:390px}.step{height:24px;min-height:24px;border-radius:3px;background:#c5bcd1;border:1px solid #afa3bb;box-shadow:inset 0 1px #f8f0ff80}.step[aria-pressed=true]{background:#b8d9d8;border-color:#8bb5b8;box-shadow:inset 0 1px #edffff,0 0 6px #a0d6d377}.step.current{outline:2px solid #84629b}.file-button{padding:8px 10px;font-size:10px;border-radius:5px;min-height:34px}.instrument .hint{font-size:9px;line-height:1.5;margin:7px 0 0;color:#7a6b85}.loop-controls label{font-size:10px}.fx-panel .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.fx-panel .controls label{min-width:0;display:flex;align-items:center;flex-direction:column;gap:15px;font-size:10px;text-align:center}.fx-panel input[type=range]{writing-mode:vertical-lr;direction:rtl;width:36px;height:116px;margin:0;cursor:ns-resize}.fx-presets button{flex:1}.layer{font-size:10px}.console footer{padding:12px 0 18px;border-top:1px solid var(--line);font:9px monospace;gap:15px}.console footer button{font-size:10px}.console footer>span:nth-child(2){font-size:8px}.dark{--surface:#393443;--line:#585063;--screen:#201d2c;--screen-text:#dac9eb}.dark .console{background:linear-gradient(145deg,#494151,#35313e);border-color:#5c5269;box-shadow:inset 0 1px #786b87,inset 0 -6px #292530,0 12px #24202b,0 24px 38px #100a1c55}.dark .module,.dark .instrument{filter:none}.dark .module-heading,.dark .module-foot,.dark .module-foot span,.dark .instrument-top,.dark .instrument,.dark .instrument .hint{color:#c6b6d1}.dark .intent button{background:#51465e}.dark .presets{background:#50445e}.dark .presets .selected{background:#766583}.dark .instrument .controls label{color:#d4c7dd}
@media(max-width:1100px){.deck-top{flex-wrap:wrap;gap:10px}.toolbar{min-width:440px}.board{grid-column:1/6}.synth-panel,.rhythm-panel{grid-column:6/13}.instrument{padding-left:16px}.board{padding-right:12px}.bubble-grid{gap:9px;max-width:168px}.vocal-panel{padding-left:0}.mixer{flex-wrap:wrap}.mixer-title{width:auto}}
@media(max-width:800px){body{padding:0 10px 22px}.brand span{display:none}.console{padding:14px 16px 0}.studio{grid-template-columns:repeat(2,minmax(0,1fr))}.board{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 0;border-right:0;border-bottom:1px solid var(--line)}.module:nth-child(-n+2){border-bottom:0}.module:not(:last-child){border-right:1px solid var(--line)}.module-heading{font-size:8px;padding:0 8px}.module-foot{padding:5px 8px}.bubble-grid{gap:8px;padding:22px 10px}.ring{width:116px;height:116px}.ring-hole{width:66px;height:66px}.ring-mark{top:8px;transform-origin:4px 46px}.ring-area{padding:22px 4px}.silk{height:116px;margin:22px 10px;width:calc(100% - 20px)}.cloud-area{height:160px}.cloud-object{width:114px;height:94px}.halo{width:126px;height:126px}.synth-panel,.rhythm-panel,.vocal-panel,.fx-panel{grid-column:1/-1;grid-row:auto;padding:16px 0;border-right:0;border-top:1px solid var(--line)}.synth-panel{border-top:0}.toolbar{min-width:0;flex-basis:100%}.intent{width:auto}.mixer label{max-width:none}.fx-panel .controls{max-width:400px;margin:20px auto}.hardware-label{font-size:8px}}
@media(max-width:520px){.console{border-radius:16px;padding:12px 14px 0}header{padding:14px 2px}.brand{font-size:22px}.console-top{padding-bottom:10px}.console-top span:last-child{display:none}.intent{width:100%}.intent-buttons{width:100%}.intent button{flex:1;font-size:11px;min-height:40px}.toolbar .presets{width:auto;display:flex}.presets button{padding:7px 10px;min-height:36px}.start{font-size:10px;margin-left:0}#status{max-width:none;min-width:0;width:100%;flex-basis:100%;min-height:34px}.mixer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.mixer-title{grid-column:auto;font-size:10px}.mixer label{grid-row:2;font-size:9px;min-width:0}.mixer output{font-size:8px}.mixer .record{grid-column:2/4;grid-row:1;min-height:40px;font-size:10px;width:auto;margin-left:0}.mixer input[type=range]{height:36px;margin-top:4px}#download:not([hidden]){grid-column:1/-1;min-height:40px}.board{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:8px}.module:nth-child(-n+2){border-bottom:1px solid var(--line)}.module:nth-child(even){border-right:0}.module{padding:12px 0 5px}.module-heading{font-size:9px}.bubble-grid{max-width:166px;gap:10px;padding:20px 12px}.bubble{min-height:32px}.ring{width:126px;height:126px}.ring-hole{width:72px;height:72px}.ring-mark{transform-origin:4px 51px}.ring-area{padding:24px 4px}.silk{height:128px;max-width:150px;margin:20px 12px}.cloud-area{height:168px}.cloud-object{width:124px;height:102px}.halo{width:138px;height:138px}.module-foot span{font-size:9px}.synth-pads{min-width:530px}.sequencer{grid-template-columns:46px repeat(16,30px);min-width:590px}.step{height:38px}.instrument .controls{gap:10px}.controls label{font-size:10px}.instrument button:not(.synth-pad):not(.step),.instrument select,.file-button{min-height:42px}.instrument input[type=range]{height:36px}.loop-controls label{width:100%}.fx-panel input[type=range]{height:116px}.loop-controls button{flex:1}.console footer>span:nth-child(2){display:none}.console footer{font-size:8px;flex-wrap:wrap}.console footer button{min-height:40px}.keyboard-scroll,.sequence-scroll{scrollbar-width:thin;scrollbar-color:#ab96bd transparent}}
/* Printed labels and tactile controls are the primary visual language. */
.module-foot{display:none}.module:nth-child(n){border:0}.board{row-gap:12px;align-content:center}.instrument .hint:not([id]){font-size:9px}.fx-panel>p.hint{display:none}.synth-panel .controls{align-items:center}.controls select{max-width:150px}.synth-panel .controls>label{flex:1;min-width:60px}.synth-panel .controls>.dial-label{flex:0 0 78px}.dial-native{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important}.instrument .controls .dial-label{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;font:10px monospace;text-align:center;justify-content:center}.instrument button.rotary:not(.step):not(.synth-pad){width:62px;height:62px;min-height:62px;flex-shrink:0;border:1px solid #b0a3bb;border-radius:50%;padding:0;position:relative;cursor:ns-resize;touch-action:none;user-select:none;background:repeating-conic-gradient(from 0deg,#b5a8c0 0deg 2deg,#d6cadd 2deg 8deg);box-shadow:0 5px 7px #62506d35,inset 0 2px 3px #fff9,inset 0 -3px 4px #82708e55}.rotary:before{content:'';position:absolute;inset:6px;border-radius:50%;background:linear-gradient(140deg,#f5effa,#c6b6d2);box-shadow:inset 0 1px 2px white,0 1px 3px #5f4d6e33}.rotary:after{content:'';position:absolute;left:calc(50% - 2px);top:10px;width:4px;height:13px;background:#7e638f;border-radius:2px;transform-origin:2px 21px;transform:rotate(var(--rotation,-135deg));box-shadow:0 1px 0 #fff6}.dial-label output{font:9px monospace;color:#887394;float:none;min-height:11px}.vocal-panel .controls{justify-content:space-between;align-items:center}.vocal-panel .controls>.dial-label{flex:0 0 86px}.vocal-panel .controls>label:last-child{max-width:180px}.fx-panel .controls{max-width:340px;margin:20px auto}.fx-panel .controls label{gap:10px}.fx-panel .rotary:after{background:#729ea2}.fx-panel .controls .dial-label:nth-child(2) .rotary:after{background:#b6859d}.console footer>span{font-size:8px}.dark .dial-label output{color:#cbb4db}
@media(max-width:520px){.module-heading{padding:0 10px}.board{row-gap:0;padding-bottom:16px}.synth-panel .controls{gap:10px}.synth-panel .controls>label{min-width:calc(50% - 12px);flex:1}.synth-panel .controls>.dial-label{min-width:0;flex:0 0 80px}.instrument button.rotary:not(.step):not(.synth-pad){width:62px;height:62px;min-height:62px}.vocal-panel .controls{gap:8px}.vocal-panel .controls>.dial-label{flex:0 0 70px}.vocal-panel .controls>label:last-child{min-width:70px;flex:1}.controls select{width:100%;max-width:none}}