/* SPDX-License-Identifier: GPL-3.0-or-later.
   Panel geometry adapted from Shunya Koide / op1kenobi (MIT; upstream notices). */
*{box-sizing:border-box}body{margin:0;color:#232421;background:#fff;font-family:Arial,Helvetica,sans-serif;min-height:100dvh;display:flex;flex-direction:column}button,input,select{font:11px var(--arcade-mono);color:inherit}button,select{background:white;border:1px solid #d9d9d2;cursor:pointer}button{min-height:34px;padding:7px 10px}button:hover{border-color:#232421}button[aria-pressed=true]{color:#c73136;border-color:#c73136}button:disabled{opacity:.4;cursor:default}a{color:inherit}main{width:min(1240px,100%);margin:auto;padding:40px 32px 24px}.intro{display:flex;justify-content:space-between;gap:16px;font:9px var(--arcade-mono);color:#777873;letter-spacing:1px;margin-bottom:24px}.instrument{width:100%;aspect-ratio:550/198;container-type:inline-size;position:relative;border:1px solid #9b9c97;border-radius:1.4cqw;background:#efefec;box-shadow:0 2px 0 #d4d5cf,0 15px 25px -23px #232421}.hardware-grid{position:absolute;left:1.8%;top:5.55%;width:91.82%;height:88.9%;display:grid;grid-template-columns:repeat(34,1fr);grid-template-rows:repeat(6,1fr);gap:1px;background:#969791;border:1px solid #888982;border-radius:1.1cqw;overflow:hidden}.hardware-grid>*,.hardware-grid .hardware-button{background:#f4f4f0}.hardware-button{display:grid;place-items:center;min-width:0;min-height:0;border:0;border-radius:.15cqw;padding:0;position:relative;font:1.65cqw Arial;color:#737670;outline-offset:-2px}.hardware-button>span{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:70%;height:70%;border:1px solid #d0d2ca;border-radius:50%;box-shadow:1px 1px 1px #d3d4ce,-1px -1px 1px white;background:#f7f7f3;line-height:1}.hardware-button small{font:0.48cqw Arial;margin-top:.2cqw}.hardware-button:hover>span{background:#fff}.hardware-button[aria-pressed=true]>span{border-color:#92968c;box-shadow:inset 1px 1px 2px #d3d4ce}.hardware-button:disabled{opacity:1;color:#a4a69e}.hardware-button:disabled>span{box-shadow:none}.speaker{grid-column:1/5;grid-row:1/3;position:relative;display:grid;place-items:center}.speaker i{width:85%;height:85%;border-radius:16%;background:radial-gradient(circle,#55574f .105cqw,transparent .14cqw) 0 0/.7cqw .7cqw}.volume-cell{grid-column:5/9;grid-row:1;position:relative}.volume-knob{position:absolute;width:36%;aspect-ratio:1;left:6%;top:12%;border-radius:50%;border:1px solid #777a70;box-shadow:2px 2px 2px #c4c5bf;background:#fff;touch-action:none;cursor:ns-resize}.volume-knob:after{content:'';position:absolute;top:15%;left:48%;width:2px;height:25%;background:#a0a398;transform-origin:1px 140%;transform:rotate(var(--volume-angle,40deg))}.hw-guide{grid-column:5/7;grid-row:2}.hw-metro{grid-column:7/9;grid-row:2}.screen{grid-column:9/17;grid-row:1/3;background:#232421!important;position:relative;border:1px solid #232421}.screen canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff08,transparent 40%)}#device-knobs,.modes,.tabs,#presets,#keyboard{display:contents}.device-knob-cell{grid-row:1/3;position:relative;display:grid;place-items:center}.knob{position:relative;width:60%;aspect-ratio:1;border:1px solid #92968c;border-radius:50%;box-shadow:1px 2px 2px #c6c8c0;touch-action:none;cursor:ns-resize;background:#f2f3ee;display:grid;place-items:center}.knob:before{content:'';width:65%;height:65%;border-radius:50%;background:var(--knob-color);border:1px solid #00000018}.knob:after{content:'';position:absolute;width:33%;height:10%;border-radius:30px;background:#ffffff66;box-shadow:inset 0 1px 2px #00000025;transform:rotate(var(--angle,-40deg))}.hw-mic{grid-column:33/35;grid-row:1}.hw-mic span{color:#cf743c}.hw-album{grid-column:33/35;grid-row:2}.hw-album span{font-size:1.2cqw}.modes button,.tabs button,#presets button,#device-sequence{grid-row:3;grid-column:var(--column)/span 2}.modes button:nth-child(1){--column:1;color:#4587b0}.modes button:nth-child(2){--column:3;color:#609763}.modes button:nth-child(3){--column:5;color:#cf743c}.modes button:nth-child(4){--column:7}.tabs button:nth-child(1){--column:9}.tabs button:nth-child(2){--column:11}.tabs button:nth-child(3){--column:13}.tabs button:nth-child(4){--column:15}.preset span{font-size:1.05cqw}.preset small{color:var(--preset-colour,#cf743c)}#device-sequence{--column:33;color:#4587b0}#lift{grid-column:1/3;grid-row:4;color:#cf743c}#drop{grid-column:3/5;grid-row:4;color:#cf743c}#split{grid-column:5/7;grid-row:4;color:#cf743c}#record{grid-column:1/3;grid-row:5}#play{grid-column:3/5;grid-row:5}#stop{grid-column:5/7;grid-row:5}#play span,#stop span{font-size:1.2cqw}#record .record-ring{border:.65cqw solid #d35435;background:transparent;width:58%;height:58%;box-shadow:none}#record[aria-pressed=true] .record-ring{background:#d35435}#octave-down{grid-column:1/3;grid-row:6}#octave-up{grid-column:3/5;grid-row:6}#device-shift{grid-column:5/7;grid-row:6}.hardware-button .shift-label{font-size:.9cqw}.key{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:.15cqw;background:#f4f4f0;touch-action:none;user-select:none;display:grid;place-items:center}.key.white{grid-column:var(--column)/span 2;grid-row:5/7}.key.white:before{content:'';width:72%;height:89%;border:1px solid #c4c7bc;border-radius:1.6cqw;background:#fafaf6;box-shadow:1px 1px 2px #c8cbc0,-1px -1px 1px #fff}.key.black{grid-column:var(--column)/span var(--span);grid-row:4}.key.black:before{content:'';position:absolute;width:3.2cqw;height:3.2cqw;left:var(--circle-x,50%);top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#272924;box-shadow:0 0 0 .1cqw #b4b8ab,1px 1px 1px #d4d6cc}.key.active.white:before{background:#e7e9e1;box-shadow:inset 1px 1px 3px #aaa;border-color:#777d6e}.key.active.black:before{background:#53584c;box-shadow:inset 1px 1px 3px #111}.mic-dots{position:absolute;right:2%;top:9%;font:1.5cqw monospace;color:#74776e}.battery-dots{position:absolute;right:2.3%;top:36%;writing-mode:vertical-lr;letter-spacing:.35cqw;font:bold 1.2cqw monospace;color:#74776e}
.companion{margin-top:28px;font:10px var(--arcade-mono);color:#777873}.readout{display:flex;gap:24px;flex-wrap:wrap;border-bottom:1px solid #deded8;padding:0 0 14px;font-size:9px;letter-spacing:.4px}.readout #screen-mode{color:#232421;margin-right:auto}.control-body{display:grid;grid-template-columns:1fr 390px;gap:32px;padding:18px 0}.context-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.context-row:empty{display:none}.context-row label,.utility-row label{display:flex;align-items:center;gap:8px}.context-row select{min-height:32px;padding:6px}.context-row input[type=number]{width:52px;border:0;border-bottom:1px solid #d9d9d2;background:transparent;padding:6px}.utility-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}.utility-row label{margin-right:10px}.utility-row input{width:90px}.utility-row button{font-size:9px}.knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.knob-control{min-width:0;font:9px var(--arcade-mono)}.knob-control label{color:var(--knob-colour-text,#777873);display:block;margin-bottom:8px}.knob-control label:before{content:'';display:inline-block;background:var(--knob-color);width:6px;height:6px;border:1px solid #00000018;border-radius:50%;margin-right:6px}.knob-control output{display:block;height:24px;color:#232421}.knob-control input{width:100%;margin:0}input[type=range]{accent-color:var(--knob-color,#777873);cursor:pointer}.tape-panel{margin-bottom:20px}.tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.track{border:1px solid #d9d9d2;padding:8px;background:white}.track.selected{border-color:#c73136}.track-top{display:flex;justify-content:space-between;gap:4px}.track-top button{font-size:9px;min-height:28px;padding:4px 8px}.track input{width:100%}.track-meter{height:3px;background:#eee;margin:8px 0}.track-meter i{height:100%;background:#c73136;display:block;width:0}.tape-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.tape-tools label{margin-left:auto}.file-label{padding-top:12px}.file-label input{max-width:200px;font-size:9px}#sample-name{font-size:9px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keyboard-guide{border-top:1px solid #deded8;padding-top:12px}.keyboard-guide summary{cursor:pointer;font-size:9px;list-style:none}.keyboard-guide summary:before{content:'＋';margin-right:8px}.keyboard-guide[open] summary:before{content:'−'}.keyboard-guide summary span{float:right}#key-map{display:flex;gap:4px;margin-top:14px}.map-key{flex:1;min-width:0;height:42px;padding:4px 0;font-size:9px;border-color:#deded8;display:grid;gap:4px;place-content:center}.map-key small{font-size:7px;color:#92948c}.map-key.sharp{background:#f0f1eb}.map-key.active{border-color:#c73136;color:#c73136}.below{display:flex;justify-content:space-between;gap:16px;font:9px/1.6 var(--arcade-mono);margin-top:16px;color:#92948c}.game-footer a{font:10px var(--arcade-mono);color:#777873;text-decoration:none}dialog{border:1px solid #232421;padding:30px;width:min(600px,90vw);color:#232421}dialog::backdrop{background:#ffffffbf;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center}dialog h2{font-weight:400;font-size:30px}dialog h3{font:12px var(--arcade-mono);margin-top:25px}dialog p{font-size:13px;line-height:1.7}[hidden]{display:none!important}
@media(max-width:850px){main{padding:30px 18px}.control-body{grid-template-columns:1fr;gap:20px}.knobs{max-width:500px}.readout{gap:14px}#key-map{display:grid;grid-template-columns:repeat(12,1fr)}.keyboard-guide summary span{float:none;display:block;margin:8px 0 0 17px}.below{flex-direction:column;gap:4px}}
@media(max-width:500px){main{padding:24px 12px}.intro{font-size:8px;letter-spacing:0;margin-bottom:18px}.companion{margin-top:24px}.readout{font-size:8px;gap:12px}.readout #screen-mode{width:100%;margin:0}.knobs{gap:12px}.knob-control{font-size:8px}.tracks{grid-template-columns:repeat(2,1fr)}#key-map{grid-template-columns:repeat(8,1fr)}.map-key{height:44px}.utility-row label{width:100%;margin-bottom:6px}.utility-row input{width:110px}.tape-tools button{font-size:9px}.context-row{gap:9px;font-size:9px}.hardware-grid{gap:.5px}.hardware-button>span,.key.white:before{border-width:.5px}.knob{border-width:.5px}.knob-control output{height:21px}.below{font-size:8px}}
@media(min-width:851px) and (max-height:800px){main{padding-top:15px;padding-bottom:15px}.intro{margin-bottom:18px}.companion{margin-top:22px}.game-footer{min-height:44px}}
.device-knob-cell{background:#f4f4f0}.device-knob-cell .knob{width:50%}
.hardware-button svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#sequence-panel{border-top:1px solid #deded8;padding:16px 0;margin:0 0 12px}.sequence-settings,.timeline-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sequence-settings label,.timeline-controls label{display:flex;align-items:center;gap:6px}.sequence-settings select{padding:7px}.sequence-settings button,.timeline-controls button{font-size:9px}#sequence-status,#step-notes{font:9px/1.7 var(--arcade-mono)}#sequence-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}.step-button{min-width:0;padding:6px 2px;font-size:9px;height:44px}.step-button.filled{background:#e8eee3}.step-button.cursor{border-color:#4587b0}.step-button.playing{background:#d2e5c7;border-color:#609763}.step-button small{display:block;font-size:7px;margin-top:5px}.timeline-controls{margin-bottom:12px}.timeline-controls input{width:70px;padding:6px;border:1px solid #deded8}#loop-status{margin-left:auto;font-size:9px}.track .take-summary{font-size:8px;height:20px;margin-top:5px;color:#777873}.hardware-button.armed .record-ring{background:#d3543540}#tape-panel .tape-tools{gap:6px}.timeline-controls select{padding:5px}
@media(max-width:650px){#sequence-steps{grid-template-columns:repeat(8,1fr)}.sequence-settings{gap:7px;font-size:9px}.sequence-settings select{font-size:9px}#loop-status{margin-left:0}.timeline-controls{font-size:9px}}

#module-panel{border-top:1px solid var(--line,#ddd);padding:16px 0}#module-panel div:not([hidden]){display:inline-flex;gap:18px;align-items:center;flex-wrap:wrap;margin:0 18px 12px 0}#module-panel label{display:inline-flex;gap:8px;align-items:center}#module-panel p{font-size:11px;color:#777;line-height:1.7}
/* Optional computer controls leave the instrument face quiet by default. */
.helper-toggles{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.helper-toggles button,#open-sequencer{font:10px var(--arcade-mono);padding:10px 14px}.helper-toggles [aria-pressed=true],.helper-toggles [aria-expanded=true]{background:#e9eee4;border-color:#9caa91}#open-sequencer{margin-bottom:15px}.companion{margin-top:18px}
[data-mapping]{position:relative}.show-mappings [data-mapping]:after{content:attr(data-mapping);position:absolute;z-index:8;left:50%;bottom:4%;transform:translateX(-50%);background:#252d25;color:#fff;border-radius:3px;padding:2px 4px;font:clamp(5px,.8vw,10px) var(--arcade-mono);pointer-events:none}.show-mappings .key.black:after{bottom:22%;left:var(--circle-x,50%)}
.knob-control{position:relative;text-align:center}.knob-control output{position:absolute;z-index:4;top:auto;bottom:26px;left:50%;transform:translate(-50%,50%);white-space:nowrap;background:transparent;color:#000;padding:0;border-radius:0;opacity:0;pointer-events:none;font:10px var(--arcade-mono)}.knob-control.adjusting output{opacity:1}.knob-control input{appearance:none;-webkit-appearance:none;width:52px;height:52px;border:1px solid #b7b9ae;border-radius:50%;background:var(--knob-color);cursor:ns-resize;opacity:.9}.knob-control input::-webkit-slider-thumb{appearance:none;width:1px;height:1px;background:transparent}.knob-control input::-moz-range-thumb{width:1px;height:1px;border:0;background:transparent}.knob-control:after{content:'';position:absolute;pointer-events:none;width:2px;height:17px;background:#41483c;left:calc(50% - 1px);top:40px;transform-origin:50% 9px;transform:rotate(var(--angle));}.knob.adjusting:after,.volume-knob.adjusting:after{content:attr(data-value);position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#000;white-space:nowrap;padding:0;border-radius:0;font:clamp(5px,.9cqw,11px) var(--arcade-mono);width:auto;height:auto;box-shadow:none;transform-origin:center;pointer-events:none}.key,.map-key,#piano-roll{touch-action:none}#display{cursor:pointer}.roll-tools{display:flex;align-items:center;gap:12px;margin-top:16px}.roll-tools input{width:48px;padding:5px}.roll-scroll{overflow:auto;max-width:100%;border:1px solid #cdd3c4;margin:12px 0}#piano-roll{display:block;max-width:none;outline-offset:-2px;cursor:crosshair}#roll-help{line-height:1.7;color:#777d70}#sequence-steps{overflow-x:auto;grid-template-columns:repeat(16,minmax(30px,1fr))}

#piano-roll{min-width:100%;height:458px}.knob-control input{touch-action:none}.knob-control output{height:auto}

.knob-control.adjusting:after{visibility:hidden}.knob-control input{display:block;margin:0 auto}.volume-knob.adjusting:after{font-size:clamp(5px,.8cqw,10px)}
.knob-control{display:grid;grid-template-columns:1fr;grid-template-rows:min-content 52px;align-content:start}.knob-control input{grid-area:2/1}.knob-control output{grid-area:2/1;position:static;transform:none;align-self:center;justify-self:center;line-height:1;margin:0}
/* Note editor uses the arcade's paper, fine rules and red selection accent. */
.roll-heading{display:flex;justify-content:space-between;gap:16px;margin-top:24px;padding-top:16px;border-top:1px solid #deded8;font:9px var(--arcade-mono);letter-spacing:1px;color:#777873}.roll-heading #roll-range{letter-spacing:0}.roll-tools{margin-top:12px}.roll-tools label{display:flex;align-items:center;gap:8px}.roll-tools input{background:white;border:1px solid #deded8;border-radius:0;font:10px var(--arcade-mono)}.roll-tools button{font:9px var(--arcade-mono)}.roll-scroll{border:1px solid #deded8;background:white}#roll-help{font:9px/1.8 var(--arcade-mono);max-width:760px;color:#777873}#sequence-steps{grid-template-columns:repeat(var(--step-count,16),minmax(30px,1fr));gap:4px}.step-button.filled{background:#fcf2f2;color:#c73136}.step-button.cursor{border-color:#232421}.step-button.playing{background:#c73136;color:white;border-color:#c73136}#sequence-status,#step-notes{color:#777873}#piano-roll:focus-visible{outline:1px solid #c73136;outline-offset:-1px}
.control-body.parameters-only{grid-template-columns:minmax(0,500px);justify-content:start}.footer-tools{display:flex;gap:8px}.footer-tools button{font:9px var(--arcade-mono)}#screen-choice-control{display:flex;gap:10px;align-items:center;margin-top:16px}#screen-choice{padding:8px;min-width:150px}.keyboard-guide{margin-top:20px;font:9px var(--arcade-mono)}dialog .module-studies{font:11px var(--arcade-mono);line-height:1.7}#module-panel>p{margin-bottom:0}

.project-tools{display:flex;align-items:center;gap:20px;margin:20px 0}.project-tools .file-label{padding:0}.performance-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.performance-heading h2{font:18px var(--arcade-mono);color:#232421;margin:0}#performance{border-top:1px solid #d9d9d2;padding-top:22px;margin-top:22px}#performance p{font-size:11px;line-height:1.8;max-width:880px}#performance-sections{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}#performance-sections [aria-current=true]{background:#232421;color:#fafaf6}#performance details{padding-top:10px}#performance summary{cursor:pointer;color:#232421;font-size:11px}#performance-patch{color:#a34927}.score-scroll{max-height:230px;overflow:auto;margin-top:16px;border-top:1px solid #d9d9d2}.score-scroll table{border-collapse:collapse;width:100%;font-size:10px;text-align:left}.score-scroll th,.score-scroll td{border-bottom:1px solid #e4e4dd;padding:8px 12px}.score-scroll th{position:sticky;top:0;background:#f8f8f3;color:#232421}.track-top .select-track{overflow:hidden;text-overflow:ellipsis}.project-tools input{max-width:230px}

@view-transition{navigation:auto}.instrument{view-transition-name:portable-studio}@media(prefers-reduced-motion:no-preference){::view-transition-group(portable-studio){animation-duration:.45s}}@media(prefers-reduced-motion:reduce){::view-transition-group(*){animation:none}}

.embedded-studio>.game-header,.embedded-studio>.game-footer{display:none}.embedded-studio main{margin:0 auto}