/* System fallbacks keep the local workspace usable without external font requests. */
:root{--ink:#f1f1f1;--muted:#aaa;--bg:#202020;--panel:#292929;--line:#414141;--lime:#e2e2e2;--orange:#c8c8c8}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP",sans-serif;min-height:100vh}.shell{width:min(1120px,calc(100% - 40px));margin:auto;padding:24px 0 30px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}.brand{display:flex;gap:12px;align-items:center;font:600 14px "DM Mono";letter-spacing:.14em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--lime);color:#202020;font-weight:800}.prototype,.eyebrow,.control-panel label>span,.level-box span,.status-grid article>span{font:500 10px "DM Mono";letter-spacing:.17em;color:var(--muted)}.hero{display:grid;grid-template-columns:1fr 420px;gap:54px;align-items:center;padding:58px 4% 54px}.eyebrow{color:var(--lime);margin:0 0 20px}.hero h1{font-size:clamp(40px,5vw,68px);line-height:1.16;letter-spacing:-.055em;margin:0;font-weight:800}.hero h1 em{color:var(--lime);font-style:normal}.intro{max-width:510px;line-height:1.9;color:#bbb;font-size:14px;margin-top:25px}.note-stage{position:relative;aspect-ratio:1;display:grid;place-content:center;text-align:center;border:1px solid var(--line);border-radius:50%;transition:.15s ease;overflow:hidden}.note-stage.detected{border-color:var(--lime);box-shadow:0 0 60px rgba(184,243,74,.12)}.rings i{position:absolute;border:1px solid var(--line);border-radius:50%;inset:12%}.rings i:nth-child(2){inset:23%}.rings i:nth-child(3){inset:34%;background:#262626}.note,.octave,.frequency,.cents-row{position:relative;z-index:1}.note{font:500 100px/1 "DM Mono";letter-spacing:-.1em;margin-right:.1em}.octave{font:500 12px "DM Mono";color:var(--lime);letter-spacing:.15em;margin-top:10px}.frequency{font:400 12px "DM Mono";color:var(--muted);margin-top:13px}.cents-row{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font:10px "DM Mono";margin-top:25px}.tune{width:110px;height:3px;background:#555;position:relative}.tune:after{content:"";position:absolute;left:50%;top:-4px;width:1px;height:11px;background:var(--lime)}.tune i{position:absolute;left:50%;top:-3px;width:7px;height:9px;background:var(--orange);transform:translateX(-50%);transition:left .1s}.control-panel{display:grid;grid-template-columns:1.3fr auto 1fr;border:1px solid var(--line);background:var(--panel)}.device-field,.level-box{padding:20px 24px}.device-field{border-right:1px solid var(--line)}select{display:block;width:100%;margin-top:10px;background:transparent;border:0;color:var(--ink);font:600 13px "Noto Sans JP";outline:0}select option{background:var(--panel)}button{border:0;background:var(--lime);color:#202020;padding:0 32px;font:800 14px "Noto Sans JP";cursor:pointer;min-height:76px;transition:.15s}button:hover{filter:brightness(1.08)}button.active{background:var(--orange)}#buttonIcon{font-size:9px;margin-right:9px}.level-box>div:first-child{display:flex;justify-content:space-between}.level-box b{font:500 11px "DM Mono"}.meter{height:7px;background:#454545;margin-top:13px}.meter i{display:block;width:0;height:100%;background:var(--lime);transition:width .08s}.status-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border:1px solid var(--line)}.status-grid article{padding:23px 25px}.status-grid article+article{border-left:1px solid var(--line)}.status-grid strong{display:block;margin-top:11px;font-size:15px}.status-grid small{display:block;margin-top:7px;color:var(--muted);font-size:11px}footer{display:flex;justify-content:space-between;color:var(--muted);font:10px "DM Mono";letter-spacing:.08em;margin-top:20px}@media(max-width:800px){.shell{width:min(100% - 24px,600px)}.hero{grid-template-columns:1fr;padding:42px 0}.note-stage{width:min(100%,380px);margin:auto}.control-panel{grid-template-columns:1fr}.device-field{border-right:0;border-bottom:1px solid var(--line)}button{min-height:64px}.status-grid{grid-template-columns:1fr}.status-grid article+article{border-left:0;border-top:1px solid var(--line)}footer{gap:20px;line-height:1.5}.note{font-size:82px}}
.control-panel{grid-template-columns:1.3fr auto auto 1fr}.monitor-button{background:#333;color:var(--ink);border-left:1px solid var(--line);padding:0 22px;font:500 11px "DM Mono";letter-spacing:.08em}.monitor-button span:first-child{color:var(--muted);margin-right:8px}.monitor-button.monitoring{background:#555;color:var(--lime)}.monitor-button:disabled{opacity:.42;cursor:not-allowed}@media(max-width:800px){.control-panel{grid-template-columns:1fr}.monitor-button{border-left:0;border-top:1px solid var(--line)}}
.practice-tools{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.tool-card{border:1px solid var(--line);background:#262626;padding:24px}.tool-heading{display:flex;justify-content:space-between;align-items:center}.tool-heading>div>span{font:500 10px "DM Mono";letter-spacing:.17em;color:var(--muted)}.tool-heading h2{font-size:18px;margin:7px 0 0}.tool-heading strong{font:500 22px "DM Mono";color:var(--lime)}.tool-action{min-height:auto;padding:11px 16px;background:#373737;color:var(--ink);font:500 11px "DM Mono"}.tool-action.active{background:var(--orange);color:#202020}.bpm-control{display:flex;align-items:center;justify-content:center;gap:24px;margin:25px 0 18px}.bpm-control button{min-height:42px;width:42px;padding:0;background:#373737;color:var(--ink);font-size:19px}.bpm-control label{display:flex;align-items:baseline;gap:8px}.bpm-control input{width:92px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:500 38px "DM Mono";text-align:center;outline:0}.bpm-control label span{font:500 10px "DM Mono";color:var(--muted)}.beat-dots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.beat-dots i{height:4px;background:#454545;transition:.05s}.beat-dots i.on{background:var(--lime);box-shadow:0 0 10px rgba(184,243,74,.45)}.record-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px}.record-actions button{min-height:50px;background:#373737;color:var(--ink);font-size:12px}.record-actions button:disabled{opacity:.35;cursor:not-allowed}.record-button span{color:var(--orange)}.record-button.recording{background:var(--orange);color:#202020}.record-button.recording span{color:#202020}.play-button:not(:disabled){background:var(--lime);color:#202020}.tool-card p{margin:14px 0 0;color:var(--muted);font-size:11px}#recordedAudio{display:none}@media(max-width:800px){.practice-tools{grid-template-columns:1fr}.tool-card{padding:20px}}
.bpm-control input::-webkit-inner-spin-button,.bpm-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-control input{-moz-appearance:textfield}
.metro-options{display:grid;grid-template-columns:1fr auto;gap:12px;margin:18px 0}.metro-options label,.metro-options>div{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);padding:10px 12px}.metro-options span,.source-statuses span,.mixer-channel span,.monitor-setting span,.tab-signal>span,.playback-selector>span{font:500 9px "DM Mono";letter-spacing:.14em;color:var(--muted)}.metro-options select{margin:0;width:auto;font:500 11px "Noto Sans JP"}.switch-button{min-height:30px;padding:0 12px;background:#393939;color:var(--muted);font:500 10px "DM Mono"}.switch-button.active{background:var(--lime);color:#202020}.recorder-card{min-width:0}.source-statuses{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:21px}.source-statuses>div{padding:12px 14px}.source-statuses>div+div{border-left:1px solid var(--line)}.source-statuses strong{display:block;margin-top:5px;font:500 11px "DM Mono"}.source-statuses small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.45}.source-statuses strong i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--muted)}.source-statuses strong.connected{color:var(--lime)}.source-statuses strong.connected i{background:var(--lime);box-shadow:0 0 8px rgba(184,243,74,.5)}#recordTime{color:var(--muted);font-size:14px}#recordTime i{font-style:normal;color:var(--muted)}#recordTime.recording{color:var(--orange)}#recordTime.recording i{color:var(--orange);animation:recPulse 1s infinite}.capture-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-top:12px}.capture-actions button,.playback-actions button{min-height:44px;padding:0 12px;font-size:11px}.secondary-button{background:#373737;color:var(--ink)}.capture-actions button:disabled,.playback-actions button:disabled{opacity:.35;cursor:not-allowed}.record-button{background:var(--orange);color:#202020}.record-button.recording{background:var(--orange)}.tab-signal{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:10px}.tab-signal .meter{margin:0}.tab-signal b{min-width:30px;text-align:right;font:500 9px "DM Mono"}.mixer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.mixer-channel{display:grid;grid-template-columns:1fr auto;gap:8px 10px;border:1px solid var(--line);padding:11px 12px}.mixer-channel>div{grid-column:1/-1;display:flex;justify-content:space-between}.mixer-channel b{font:500 10px "DM Mono"}.mixer-channel input{width:100%;accent-color:var(--lime)}.mute-button{min-height:28px;padding:0 9px;background:#363636;color:var(--muted);font:500 9px "DM Mono"}.mute-button.active{background:var(--orange);color:#202020}.master-channel{border-color:#555}.master-label{align-self:center;font-size:8px!important}.monitor-setting{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:10px 12px;margin-top:8px}.monitor-setting small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.playback-selector{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:9px 12px;margin-top:8px}.playback-selector select{width:auto;max-width:68%;margin:0;font-size:10px}.playback-selector select:disabled{opacity:.45}.playback-actions{grid-template-columns:repeat(5,1fr);margin-top:12px}.danger-button:not(:disabled){color:#ddd}.recorder-card #recordStatus{min-height:16px}.recorder-card #recordedAudio{display:none}@keyframes recPulse{50%{opacity:.25}}@media(max-width:900px){.practice-tools{grid-template-columns:1fr}.capture-actions{grid-template-columns:1fr}.playback-actions{grid-template-columns:1fr 1fr}.playback-actions button:last-child{grid-column:1/-1}.mixer{grid-template-columns:1fr}}@media(max-width:520px){.source-statuses{grid-template-columns:1fr}.source-statuses>div+div{border-left:0;border-top:1px solid var(--line)}}
/* Compact practice workspace. Gold is reserved for the amplifier-style mixer. */
body { background:#202020; color:#f1f1f1; }
.shell { width:min(1160px,calc(100% - 64px)); padding:20px 0 28px; }
header { gap:20px; padding-bottom:14px; }
.brand-mark { background:#ddd; color:#202020; border-radius:4px; }
.help-button { min-height:36px; padding:0 12px; border:1px solid #5a5a5a; border-radius:5px; color:#eee; background:#303030; }
.help-button span { margin-left:5px; font-size:12px; }
.hero { grid-template-columns:1fr 310px; gap:20px; padding:22px 0 16px; }
.hero h1 { font-size:21px; letter-spacing:0; font-weight:600; line-height:1.5; }
.hero .intro { font-size:12px; margin:8px 0 0; color:#b7b7b7; }
.note-stage { width:100%; min-height:96px; aspect-ratio:auto; border-radius:6px; background:#292929; display:grid; grid-template-columns:70px 1fr; gap:4px 14px; padding:12px 16px; place-content:center; }
.note-stage.detected { border-color:#ccc; box-shadow:none; }
.tuner-label { grid-column:1/-1; font-size:10px; text-align:left; color:#aaa; }
.note { grid-row:2/5; grid-column:1; align-self:center; font-size:40px; margin:0; letter-spacing:-.05em; }
.octave { grid-column:2; font-size:10px; margin:0; letter-spacing:0; }
.cents-row { grid-column:2; margin:5px 0; }
.frequency { grid-column:2; font-size:10px; margin:0; }
.control-panel { grid-template-columns:minmax(180px,1fr) auto auto minmax(120px,.6fr); border-radius:6px; overflow:hidden; }
.control-panel button { min-height:64px; padding:0 18px; font-size:13px; }
.device-field,.level-box { padding:14px 16px; }
.monitor-button { color:#eee; }
.control-panel label>span,.level-box span { font-family:inherit; letter-spacing:0; }
button { border-radius:4px; }
button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #fff; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.4; }
.practice-tools { grid-template-columns:minmax(250px,.75fr) minmax(460px,1.5fr); gap:16px; align-items:start; margin-top:16px; }
.tool-card { border-radius:6px; padding:20px; }
.tool-heading h2 { font-size:17px; }
.tool-heading>div>span { font-family:inherit; letter-spacing:.04em; }
.tool-action { min-height:36px; padding:0 14px; }
.metro-options { grid-template-columns:1fr; }
.metro-options span { font-family:inherit; letter-spacing:0; font-size:11px; }
.metro-options label,.metro-options>div { padding:10px; border-radius:4px; }
.bpm-control { gap:12px; }
.source-statuses { margin-top:16px; }
.source-statuses span { font-family:inherit; letter-spacing:0; }
.source-statuses strong { font-family:inherit; font-size:12px; }
.source-statuses strong.connected { color:#eee; }
.source-statuses strong.connected i { background:#eee; box-shadow:none; }
.capture-actions { grid-template-columns:1fr 1fr; }
.capture-actions button { padding:10px; font-size:12px; min-height:46px; }
.record-button { background:#ddd; color:#181818; }
.record-button span { color:inherit; }
#stopRecordButton { background:#eee; color:#111; border:2px solid #999; font-weight:800; }
#recordTime { white-space:nowrap; font-size:13px; }
#recordTime.recording,#recordTime.recording i { color:#fff; }
.tab-signal { margin-top:12px; }
.tab-signal>span { font-family:inherit; letter-spacing:0; }
.mixer-title { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding:12px 14px; background:#151515; color:#e0c584; border:1px solid #8a713f; border-bottom:0; border-radius:6px 6px 0 0; }
.mixer-title strong { font-size:13px; }
.mixer-title span { color:#b6a079; font-size:10px; }
.mixer { margin:0; gap:0; padding:5px; border:1px solid #9d8149; background:linear-gradient(105deg,#b69a5e,#d9bf7c 47%,#b29454); border-radius:0 0 6px 6px; }
.mixer-channel { margin:5px; border:1px solid #8c733e; border-radius:3px; background:rgba(29,24,15,.07); padding:12px 10px; }
.mixer-channel span,.mixer-channel b { color:#211c13; font-family:inherit; letter-spacing:.02em; font-size:11px; }
.mixer-channel input { accent-color:#25221c; }
.mixer-channel input:focus-visible { outline-color:#26221b; }
.mute-button { background:#29251f; border:1px solid #75613b; box-shadow:0 2px 0 #6b572f; color:#f0dca9; min-height:30px; min-width:46px; padding:0 7px; font:600 10px inherit; }
.mute-button.active { color:#222; background:#f6e4b1; border-color:#3d3525; }
.monitor-setting span { font-family:inherit; letter-spacing:0; font-size:11px; }
.take-panel { margin-top:20px; border-top:1px solid #484848; padding-top:14px; }
.take-heading { display:flex; justify-content:space-between; font-size:12px; margin-bottom:8px; }
.take-heading span { color:#999; font:11px monospace; margin-left:6px; }
.take-row { display:flex; gap:5px; margin:5px 0; }
.take-row button { text-align:left; min-height:36px; padding:8px 12px; background:#333; color:#ddd; font-size:11px; font-weight:400; border:1px solid #4b4b4b; flex:1; }
.take-row.selected button:first-child { border-color:#ddd; background:#484848; }
.take-row.deleted button:first-child { text-decoration:line-through; }
.take-row button+button { flex:0 0 auto; text-align:center; background:#ddd; color:#222; }
.storage-note { font-size:10px!important; line-height:1.6; color:#aaa; }
#playbackStatus { line-height:1.7; }
.playback-actions { grid-template-columns:repeat(3,1fr); margin-top:10px; }
.playback-actions button { padding:9px 10px; font-size:11px; }
.playback-actions #saveRecordButton { grid-column:span 2; }
.play-button:not(:disabled) { background:#ededed; color:#191919; }
.status-grid { grid-template-columns:1fr; margin-top:14px; border-radius:5px; }
.status-grid article { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px; }
.status-grid strong,.status-grid small { margin:0; font-size:11px; }
.status-grid article>span { letter-spacing:0; font-family:inherit; }
footer { font:10px/1.7 inherit; color:#999; }
body .side-nav { box-shadow:none; }
.side-nav button { background:#333; color:#ccc; }
.side-nav button.active { background:#ddd; color:#222; }
.game-view { filter:grayscale(1); }
.game-head h1 { font-size:30px; }
@media(max-width:1000px) {
 .practice-tools { grid-template-columns:1fr; }
 .practice-tools>article:first-child { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; align-items:center; }
 .practice-tools>article:first-child .metro-options { margin:0; }
 .practice-tools>article:first-child .beat-dots { grid-column:1/-1; }
 .capture-actions { grid-template-columns:1fr 1fr; }
 .mixer { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
 .shell { width:calc(100% - 28px); padding-bottom:70px; }
 .hero { grid-template-columns:1fr; padding:18px 0 12px; gap:12px; }
 .hero h1 { font-size:19px; }
 .note-stage { width:100%; margin:0; min-height:84px; }
 .control-panel { grid-template-columns:1fr 1fr; }
 .device-field { grid-column:1/-1; }
 .control-panel .level-box { grid-column:1/-1; }
 .practice-tools>article:first-child { display:block; }
 .practice-tools>article:first-child .metro-options { margin:14px 0; }
 .tool-card { padding:16px; }
 .tool-heading { gap:10px; }
 .tool-heading h2 { font-size:16px; }
 .source-statuses { grid-template-columns:1fr; }
 .source-statuses>div+div { border-left:0; border-top:1px solid #444; }
 .mixer { grid-template-columns:1fr; }
 .playback-actions { grid-template-columns:repeat(2,1fr); }
 .playback-actions #saveRecordButton { grid-column:1/-1; }
 body .side-nav { top:auto; bottom:0; right:0; left:0; transform:none; flex-direction:row; justify-content:center; background:#242424; padding:6px; }
 body .side-nav button { width:auto; writing-mode:horizontal-tb; min-height:36px; padding:0 28px; }
}
/* Electric console: four independently controlled vertical channel strips. */
.shell { width:min(1160px,calc(100% - 32px)); }
.mixer-title { border-color:#344b56; background:#10151a; color:#e9fbff; padding:14px 16px; }
.mixer-title strong::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#62e9ff; box-shadow:0 0 10px #39bfd9; margin-right:9px; }
.mixer-title span { color:#9faebb; }
.mixer { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:10px; background:linear-gradient(140deg,#181d24,#0b0e13); border:1px solid #344b56; border-top:0; box-shadow:inset 0 1px #ffffff0a,0 12px 30px #0003; border-radius:0 0 8px 8px; }
.mixer-channel { --channel-accent:#65e9ff; display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:0; margin:0; padding:12px 12px 14px; border:0; border-right:1px solid #343e4b; border-radius:0; background:transparent; }
.mixer-channel[data-channel="tab"] { --channel-accent:#a8baff; }
.mixer-channel[data-channel="metro"] { --channel-accent:#c397ff; }
.mixer-channel.master-channel { --channel-accent:#76f3cd; border-right:0; margin-left:4px; background:#1b252b77; border-radius:4px; }
.mixer-channel>.strip-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mixer-channel .channel-number { color:#738392; font:10px monospace; letter-spacing:.12em; }
.mixer-channel .channel-led { display:block; width:5px; height:5px; background:var(--channel-accent); border-radius:50%; box-shadow:0 0 9px var(--channel-accent); }
.strip-name { color:#eff6fc; font-size:12px; font-weight:600; text-align:center; white-space:nowrap; }
.strip-name small { display:block; color:#8595a5; font:9px monospace; letter-spacing:.12em; margin-top:5px; }
.mixer-channel .fader-readout { display:block; padding:7px 3px; background:#070b10; border:1px solid #293743; border-radius:3px; text-align:center; color:var(--channel-accent); font:500 17px "DM Mono",monospace; text-shadow:0 0 10px color-mix(in srgb,var(--channel-accent) 40%,transparent); }
.mixer-channel>.fader-well { position:relative; display:flex; justify-content:flex-end; height:186px; min-height:186px; gap:0; padding:0 5px 0 25px; }
.fader-well::before { content:""; position:absolute; left:27px; right:6px; top:12px; bottom:12px; background:repeating-linear-gradient(to top,transparent 0,transparent calc(12.5% - 1px),#53637688 calc(12.5% - 1px),#53637688 12.5%); pointer-events:none; }
.mixer-channel .fader-scale { position:absolute; left:0; top:9px; bottom:9px; width:22px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.mixer-channel .fader-scale span { color:#8999aa; font:9px monospace; letter-spacing:0; line-height:1; }
.mixer-channel .fader-well input[type="range"] { appearance:none; -webkit-appearance:none; writing-mode:vertical-lr; direction:rtl; position:relative; width:46px; max-width:100%; height:186px; margin:0; background:transparent; cursor:ns-resize; touch-action:none; accent-color:var(--channel-accent); }
.mixer-channel .fader-well input[type="range"]::-webkit-slider-runnable-track { width:6px; height:100%; border-radius:4px; border:1px solid #05080a; background:linear-gradient(to top,var(--channel-accent) 0%,var(--channel-accent) var(--fader-value),#060a10 var(--fader-value),#060a10 100%); box-shadow:0 0 0 2px #242d38; }
.mixer-channel .fader-well input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:38px; height:22px; margin-left:-17px; border:1px solid #778393; border-radius:3px; background:linear-gradient(to bottom,#677482 0%,#364350 40%,#0b121b 43%,var(--channel-accent) 48%,var(--channel-accent) 54%,#101a25 59%,#26333f 100%); box-shadow:0 3px 5px #000c,0 0 9px #0008; }
.mixer-channel .fader-well input[type="range"]::-moz-range-track { width:6px; height:100%; border-radius:4px; background:linear-gradient(to top,var(--channel-accent) 0%,var(--channel-accent) var(--fader-value),#060a10 var(--fader-value),#060a10 100%); border:1px solid #05080a; box-shadow:0 0 0 2px #242d38; }
.mixer-channel .fader-well input[type="range"]::-moz-range-thumb { width:38px; height:22px; border:1px solid #778393; border-radius:3px; background:linear-gradient(to bottom,#677482,#26333f 43%,var(--channel-accent) 48%,var(--channel-accent) 54%,#182430 59%,#26333f); box-shadow:0 3px 5px #000c; }
.mixer-channel input:focus-visible { outline:2px solid var(--channel-accent); outline-offset:2px; border-radius:4px; }
.mixer-channel .mute-button { width:100%; min-width:0; min-height:34px; padding:0 4px; background:#17212b; color:#bed0df; font:600 11px "Noto Sans JP",sans-serif; border:1px solid #3b4b5a; border-radius:4px; box-shadow:0 2px 0 #03060a; }
.mixer-channel .mute-button:hover { border-color:var(--channel-accent); color:var(--channel-accent); }
.mixer-channel .mute-button.active { color:#ffb1c3; border-color:#ed608d; background:#3d1725; box-shadow:0 0 9px #ed608d33,inset 0 1px #ffafc233; }
.mixer-channel.is-muted .channel-led { background:#505661; box-shadow:none; }
.mixer-channel.is-muted .fader-readout { color:#8291a0; text-shadow:none; }
.mixer-channel .master-label { display:grid; place-items:center; min-height:34px; color:#8ec4b4; font:10px "Noto Sans JP",sans-serif!important; letter-spacing:0; }
.recorder-card .fader-hint { font-size:10px; color:#9aabb7; margin:8px 0 12px; }
@media(max-width:640px) {
 .shell { padding-bottom:24px; }
 .mixer { grid-template-columns:repeat(4,minmax(0,1fr)); padding:5px; }
 .mixer-channel { padding:9px 5px 10px; gap:10px; }
 .mixer-channel.master-channel { margin-left:2px; }
 .strip-name { font-size:10px; letter-spacing:-.05em; }
 .strip-name small { font-size:8px; letter-spacing:.04em; }
 .mixer-channel .fader-readout { font-size:14px; }
 .mixer-channel>.fader-well { height:162px; min-height:162px; padding:0 0 0 18px; }
 .mixer-channel .fader-well input[type="range"] { width:32px; height:162px; }
 .mixer-channel .fader-scale { width:15px; }
 .mixer-channel .fader-scale span { font-size:7px; }
 .fader-well::before { left:18px; right:0; }
 .mixer-channel .fader-well input[type="range"]::-webkit-slider-thumb { width:28px; margin-left:-12px; }
 .mixer-channel .fader-well input[type="range"]::-moz-range-thumb { width:28px; }
 .mixer-channel .mute-button { font-size:10px; }
 .mixer-title { padding:12px; }
 .mixer-title span { font-size:9px; }
}