html[data-theme=dark] body {
  background:radial-gradient(ellipse at 48% 0,#12233355,transparent 55%),var(--theme-bg);
  font-family:"Segoe UI","Yu Gothic UI","Meiryo",sans-serif;
}
body::before,body::after {
  content:""; position:fixed; inset:0 auto 0 4px; width:38px; pointer-events:none; z-index:-1; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='250' viewBox='0 0 38 250'%3E%3Cg fill='none' stroke='%23224b63' stroke-width='.8'%3E%3Cpath d='M19 9 35 18 35 37 19 46 3 37 3 18Z M19 169 35 178 35 197 19 206 3 197 3 178Z'/%3E%3Cpath d='M19 46v27l13 8v26M19 169v-22L7 140v-23'/%3E%3C/g%3E%3Cg fill='%2350e6ff'%3E%3Ccircle cx='19' cy='73' r='1.4'/%3E%3Ccircle cx='7' cy='117' r='1'/%3E%3Ccircle cx='30' cy='230' r='.8'/%3E%3C/g%3E%3C/svg%3E") repeat-y center top;
}
body::after { left:auto; right:4px; transform:scaleX(-1); }
html[data-theme=dark] .shell { width:min(1460px,calc(100% - 96px)); padding:8px 0 24px; }
html[data-theme=dark] .shell>header { display:flex; flex-wrap:wrap; gap:16px; padding:0 0 6px; min-height:84px; border-bottom:1px solid var(--theme-border); }
html[data-theme=dark] .shell>header .brand { flex:0 0 260px; margin:0; }
html[data-theme=dark] .brand .theme-logo { width:260px; height:74px; object-fit:cover; filter:brightness(1.2) drop-shadow(0 0 7px #3ce5ff88); }
html[data-theme=dark] .shell>header .main-nav { order:0; flex:1; gap:10px; margin:0; }
html[data-theme=dark] .main-nav a { padding:20px 10px; font-size:13px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; }
html[data-theme=dark] .main-nav a[aria-current=page] { color:var(--theme-accent); background:none; border-color:var(--theme-accent); text-shadow:0 0 12px #50e6ff44; }
html[data-theme=dark] .shell>header .global-state { margin:0; border:0; padding:0; max-width:250px; gap:8px 12px; font-size:10px; }
html[data-theme=dark] .global-state span { white-space:nowrap; }
html[data-theme=dark] #globalConnection { overflow:hidden; text-overflow:ellipsis; max-width:180px; }
html[data-theme=dark] #globalTuner { display:none; }
html[data-theme=dark] .global-state span+span { padding-left:12px; }
html[data-theme=dark] .shell>header .help-button { margin:0; border:0; padding:8px; background:none; white-space:nowrap; }
html[data-theme=dark] .page { padding-top:22px; }
html[data-theme=dark] button { border-radius:7px; font-family:inherit; transition:background .15s,border-color .15s,box-shadow .15s; }
html[data-theme=dark] :is(button,a,input,select,summary):focus-visible { outline:2px solid #b6f7ff; outline-offset:4px; }
html[data-theme=dark] button:disabled { opacity:.4; box-shadow:none!important; }
html[data-theme=dark] :is(.secondary-button,.help-button,.tool-action) { border:1px solid var(--theme-strong-line); background:linear-gradient(140deg,#16253888,#0c172388); color:var(--theme-ink); }
html[data-theme=dark] :is(#startButton,#metroButton,.primary-link,#practiceResume,#practicePage .practice-controls #practiceStart):not(:disabled) {
  background:#0a2432; border:1px solid var(--theme-accent); color:var(--theme-accent); box-shadow:inset 0 0 14px #50e6ff0b,0 0 13px #50e6ff18; filter:none;
}
html[data-theme=dark] :is(#startButton,#metroButton,.primary-link,#practiceResume,#practicePage .practice-controls #practiceStart):hover:not(:disabled) { background:#103545; color:#b3f9ff; box-shadow:0 0 18px #50e6ff33; }
html[data-theme=dark] :is(#recordButton,#stopRecordButton) { background:#261623; border:1px solid #ff578c; color:#ff75a4; box-shadow:inset 0 0 15px #ff578c0c,0 0 20px #ff578c24; }
html[data-theme=dark] :is(#recordButton,#stopRecordButton):hover:not(:disabled) { background:#382035; color:#ffa0c1; filter:none; }
html[data-theme=dark] :is(#recordButton,#stopRecordButton) span { color:inherit; }
html[data-theme=dark] :is(.home-practice-entry,.home-history .panel,.home-history .panel+.panel) { background:#101c29; border:1px solid var(--theme-border); border-radius:10px; padding:22px; }
html[data-theme=dark] #practicePage .practice-live { border-radius:9px; background:#0d1926; }
html[data-theme=dark] #practicePage .pitch-panel { background:#101d2c; }
html[data-theme=dark] #practicePage .compact-mixer { background:#101c29; border-color:var(--theme-border); border-radius:9px; }
html[data-theme=dark] #connectionPage .studio-top { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:stretch; }
html[data-theme=dark] #connectionPage :is(.studio-tuner,.studio-metro,.studio-transport,.studio-console,.studio-history) { border:1px solid var(--theme-border); border-radius:10px; background:linear-gradient(145deg,#12213077,#0b1521cc); padding:22px 24px; min-width:0; }
html[data-theme=dark] #connectionPage h2 { font-size:20px; font-weight:650; letter-spacing:.03em; margin:0; color:var(--theme-ink); }
html[data-theme=dark] #connectionPage .hero { display:block; padding:0; margin:0; }
html[data-theme=dark] #connectionPage .note-stage { display:grid; grid-template-columns:100px minmax(0,1fr); grid-template-rows:auto 27px 52px 30px; gap:4px 26px; width:100%; min-height:160px; aspect-ratio:auto; padding:0; border:0; background:none; border-radius:0; box-shadow:none; text-align:left; overflow:visible; }
html[data-theme=dark] #connectionPage .tuner-label { grid-column:1/-1; grid-row:1; align-self:start; }
html[data-theme=dark] #connectionPage .note { grid-column:1; grid-row:2/4; font:600 64px/1 "Segoe UI",sans-serif; letter-spacing:-.04em; margin:0; color:#dcecff; align-self:end; }
html[data-theme=dark] #connectionPage .frequency { grid-column:1; grid-row:4; margin:6px 0 0; font:13px/1.2 "Segoe UI",sans-serif; color:var(--theme-muted); }
html[data-theme=dark] #connectionPage .octave { grid-column:2; grid-row:2; font:500 16px/1.5 "Segoe UI",sans-serif; letter-spacing:0; color:var(--theme-muted); margin:0; text-align:center; align-self:end; }
html[data-theme=dark] #connectionPage .note-stage.detected .octave { color:var(--theme-accent); }
html[data-theme=dark] #connectionPage .cents-row { display:block; grid-column:2; grid-row:3/5; margin:10px 0 0; min-width:0; }
html[data-theme=dark] #connectionPage .tune { position:relative; height:34px; width:100%; background:repeating-linear-gradient(to right,#718ca3 0 1px,transparent 1px 2.5%) center/100% 12px no-repeat; overflow:visible; }
html[data-theme=dark] #connectionPage .tune::after { width:1px; height:24px; top:5px; background:#7893a8; }
html[data-theme=dark] #connectionPage .tune i { height:42px; width:3px; top:-4px; left:50%; border-radius:2px; background:#4b6e82; box-shadow:none; transform:translateX(-50%); transition:left .08s; z-index:1; }
html[data-theme=dark] #connectionPage .detected .tune i { background:var(--theme-accent); box-shadow:0 0 12px #50e6ff99; }
html[data-theme=dark] #connectionPage .tune-scale { display:flex; justify-content:space-between; margin:5px -8px 0; font-size:10px; color:var(--theme-muted); }
html[data-theme=dark] #connectionPage .control-panel { display:grid; grid-template-columns:minmax(0,1.15fr) auto minmax(100px,.8fr); align-items:end; gap:12px; margin-top:8px; padding:0; background:none; border:0; overflow:visible; }
html[data-theme=dark] #connectionPage .device-field { padding:0; margin:0; border:0; min-width:0; grid-column:auto; }
html[data-theme=dark] #connectionPage .device-field>span { font:11px/1.5 inherit; color:var(--theme-muted); display:block; margin-bottom:7px; }
html[data-theme=dark] #connectionPage :is(.device-field select,.metro-options select) { width:100%; max-width:100%; min-height:40px; margin:0; padding:8px 10px; color:var(--theme-ink); background:#101e2c; border:1px solid #38516b; border-radius:7px; font-size:12px; text-overflow:ellipsis; }
html[data-theme=dark] #connectionPage .control-panel #startButton { min-height:40px; padding:9px 12px; font-size:12px; white-space:nowrap; }
html[data-theme=dark] #connectionPage .level-box { padding:0 0 8px 12px; border-left:1px solid var(--theme-border); grid-column:auto; }
html[data-theme=dark] #connectionPage .level-box>div { display:flex; justify-content:space-between; gap:8px; font-size:10px; }
html[data-theme=dark] #connectionPage .level-box :is(span,b) { font-size:10px; }
html[data-theme=dark] #connectionPage .meter { height:10px; border:0; border-radius:1px; background:#223246; margin-top:8px; overflow:hidden; mask-image:repeating-linear-gradient(to right,#000 0 4px,transparent 4px 6px); }
html[data-theme=dark] #connectionPage .meter i { height:100%; background:linear-gradient(90deg,#118aac,#5cecff); box-shadow:0 0 9px #50e6ff44; }
html[data-theme=dark] #connectionPage .connection-details { margin-top:8px; padding:0; border:0; }
html[data-theme=dark] #connectionPage .connection-details summary { cursor:pointer; color:var(--theme-muted); font-size:10px; line-height:16px; width:fit-content; padding:0; }
html[data-theme=dark] #connectionPage .connection-options { margin-bottom:0; gap:12px; font-size:11px; }
html[data-theme=dark] #connectionPage .connection-options button { font-size:11px; padding:6px 8px; }
html[data-theme=dark] #connectionPage .studio-metro { display:grid; grid-template-columns:minmax(0,1fr) minmax(125px,.8fr); grid-template-rows:auto 1fr auto; align-items:center; gap:20px 24px; }
html[data-theme=dark] #connectionPage .studio-metro .tool-heading { display:contents; }
html[data-theme=dark] #connectionPage .studio-metro .tool-heading>div { grid-row:1; grid-column:1/-1; }
html[data-theme=dark] #connectionPage #metroButton { grid-row:3; grid-column:2; min-height:46px; font-size:15px; }
html[data-theme=dark] #connectionPage .bpm-control { grid-row:2; grid-column:1; display:grid; grid-template-columns:1fr 38px 38px; gap:8px; margin:0; }
html[data-theme=dark] #connectionPage .bpm-control label { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
html[data-theme=dark] #connectionPage .bpm-control input { width:104px; padding:0; text-align:left; font:600 64px/1.1 "Segoe UI",sans-serif; background:none; border:0; }
html[data-theme=dark] #connectionPage .bpm-control label span { font:13px/1.5 "Segoe UI",sans-serif; }
html[data-theme=dark] #connectionPage .bpm-control button { width:38px; min-height:42px; background:#142437; border:1px solid #38516b; font-size:22px; }
html[data-theme=dark] #connectionPage #bpmDown { grid-column:2; grid-row:1; }
html[data-theme=dark] #connectionPage #bpmUp { grid-column:3; grid-row:1; }
html[data-theme=dark] #connectionPage .metro-options { display:flex; flex-direction:column; grid-row:2; grid-column:2; margin:0; gap:10px; }
html[data-theme=dark] #connectionPage .metro-options :is(label,div) { display:flex; align-items:center; padding:0; border:0; gap:6px; }
html[data-theme=dark] #connectionPage .metro-options label { align-items:stretch; flex-direction:column; }
html[data-theme=dark] #connectionPage .metro-options span { font-size:11px; }
html[data-theme=dark] #connectionPage .metro-options>div { justify-content:space-between; }
html[data-theme=dark] #connectionPage .metro-options .switch-button { min-height:24px; padding:3px 9px; font-size:10px; }
html[data-theme=dark] #connectionPage .beat-dots { grid-row:3; grid-column:1; display:flex; justify-content:space-between; gap:15px; margin:0 10px 14px 0; counter-reset:beat; }
html[data-theme=dark] #connectionPage .beat-dots i { position:relative; display:block; width:22px; height:22px; flex:0 0 22px; border:1px solid #39506c; border-radius:50%; background:#101c2a; counter-increment:beat; }
html[data-theme=dark] #connectionPage .beat-dots i::after { content:counter(beat); position:absolute; top:28px; width:100%; color:var(--theme-muted); text-align:center; font:10px "Segoe UI",sans-serif; }
html[data-theme=dark] #connectionPage .beat-dots i.on { background:#b28aff; border-color:#c7aaff; box-shadow:0 0 16px #a477ff99; }
html[data-theme=dark] #connectionPage .studio-transport { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(220px,1fr) minmax(320px,1.45fr); align-items:center; gap:14px 24px; margin-top:16px; }
html[data-theme=dark] #connectionPage .studio-transport .tool-heading { display:block; }
html[data-theme=dark] #connectionPage .studio-transport h2 { font-size:17px; margin-bottom:20px; }
html[data-theme=dark] #connectionPage #recordTime { display:block; font:600 42px/1.1 "Segoe UI",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.025em; color:#d7e9ff; }
html[data-theme=dark] #connectionPage #recordTime.recording { color:#ff81aa; }
html[data-theme=dark] #connectionPage .source-statuses { display:flex; flex-wrap:wrap; align-content:center; gap:10px; margin:0; padding:0 0 0 20px; border:0; border-left:1px solid var(--theme-border); background:none; border-radius:0; }
html[data-theme=dark] #connectionPage .source-statuses>div { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:0; border:0; }
html[data-theme=dark] #connectionPage .source-statuses :is(span,strong) { font-size:11px; }
html[data-theme=dark] #connectionPage .source-statuses strong { display:flex; gap:6px; align-items:center; padding:6px 10px; border:1px solid #2b455c; border-radius:20px; font-weight:500; }
html[data-theme=dark] #connectionPage .source-statuses strong i { background:#60738b; }
html[data-theme=dark] #connectionPage .source-statuses strong.connected { color:#53e4ac; }
html[data-theme=dark] #connectionPage .source-statuses strong.connected i { background:#33d58c; box-shadow:0 0 8px #33d58c55; }
html[data-theme=dark] #connectionPage .source-statuses small { display:block; width:100%; font-size:9px; line-height:1.5; }
html[data-theme=dark] #connectionPage .capture-actions { display:flex; flex-wrap:wrap; gap:12px; margin:0; }
html[data-theme=dark] #connectionPage .capture-actions button { flex:1; min-height:54px; padding:12px; font-size:13px; }
html[data-theme=dark] #connectionPage #recordButton { order:-1; font-size:15px; }
html[data-theme=dark] #connectionPage .capture-actions #playButton { flex:.55; background:#122335; color:var(--theme-ink); border:1px solid #405d78; box-shadow:none; }
html[data-theme=dark] #connectionPage .tab-signal { grid-column:2/4; max-width:320px; width:100%; margin:0; }
html[data-theme=dark] #connectionPage .tab-signal .meter { height:6px; margin:0; }
html[data-theme=dark] #connectionPage .tab-signal :is(span,b) { font-size:9px; color:var(--theme-muted); }
html[data-theme=dark] #connectionPage .studio-bottom { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:16px; margin-top:16px; }
html[data-theme=dark] #connectionPage .mixer-title { padding:0; margin:0 0 22px; background:none; border:0; gap:12px; }
html[data-theme=dark] #connectionPage .mixer-title span { color:var(--theme-muted); font-size:9px; }
html[data-theme=dark] #connectionPage .mixer { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; margin:0; background:none; border:0; box-shadow:none; }
html[data-theme=dark] #connectionPage .mixer-channel { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; margin:0; padding:0 18px; border:0; border-right:1px solid #2b4055; border-radius:0; background:none; }
html[data-theme=dark] #connectionPage .mixer-channel:first-child { padding-left:0; }
html[data-theme=dark] #connectionPage .mixer-channel:last-child { padding-right:0; border-right:0; }
html[data-theme=dark] #connectionPage .strip-heading { display:none; }
html[data-theme=dark] #connectionPage .strip-name { color:var(--theme-muted); font:12px/1.5 "Segoe UI",sans-serif; text-align:center; }
html[data-theme=dark] #connectionPage .strip-name small { display:block; font:9px/1.5 "Segoe UI",sans-serif; color:var(--channel-accent); letter-spacing:.07em; }
html[data-theme=dark] #connectionPage .fader-readout { font:600 22px/1.2 "Segoe UI",sans-serif; margin:0 0 10px; padding:0; }
html[data-theme=dark] #connectionPage .mixer-channel .fader-well { display:grid; grid-template-columns:25px 36px 12px; justify-content:center; align-items:stretch; gap:12px; width:100%; height:170px; min-height:170px; padding:0; margin-bottom:24px; position:relative; }
html[data-theme=dark] #connectionPage .fader-well::before { display:none; }
html[data-theme=dark] #connectionPage .fader-scale { display:flex; flex-direction:column; justify-content:space-between; position:static; height:auto; width:auto; padding:8px 0; }
html[data-theme=dark] #connectionPage .fader-scale span { color:var(--theme-muted); font:10px "Segoe UI",sans-serif; }
html[data-theme=dark] #connectionPage .mixer-channel .fader-well input[type=range] { position:relative; appearance:none; -webkit-appearance:none; writing-mode:vertical-lr; direction:rtl; width:36px; max-width:none; height:170px; margin:0; padding:0; background:none; border:0; cursor:ns-resize; }
html[data-theme=dark] #connectionPage .mixer-channel input[type=range]::-webkit-slider-runnable-track { width:7px; height:100%; background:#0b1522; border:1px solid #44617b; border-radius:3px; box-shadow:inset 1px 0 3px #0008; }
html[data-theme=dark] #connectionPage .mixer-channel input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:30px; height:26px; margin-left:-12px; border:1px solid #4b789a; border-radius:4px; background:linear-gradient(#1b3449 0 40%,var(--channel-accent) 43% 56%,#182d42 59%); box-shadow:0 0 9px color-mix(in srgb,var(--channel-accent) 24%,transparent); }
html[data-theme=dark] #connectionPage .mixer-channel input[type=range]::-moz-range-track { width:7px; height:100%; background:#0b1522; border:1px solid #44617b; border-radius:3px; }
html[data-theme=dark] #connectionPage .mixer-channel input[type=range]::-moz-range-thumb { width:30px; height:26px; border:1px solid #4b789a; border-radius:4px; background:linear-gradient(#1b3449 0 40%,var(--channel-accent) 43% 56%,#182d42 59%); }
html[data-theme=dark] #connectionPage .signal-meter { display:block; position:relative; width:12px; height:100%; border:0; background:#223146; mask-image:repeating-linear-gradient(to top,#000 0 5px,transparent 5px 8px); }
html[data-theme=dark] #connectionPage .signal-meter-fill { display:block; position:absolute; bottom:0; width:100%; height:0; background:var(--channel-accent); box-shadow:0 0 8px var(--channel-accent); }
html[data-theme=dark] #connectionPage .signal-meter.is-clipping .signal-meter-fill { background:#ff578c; }
html[data-theme=dark] #connectionPage .signal-readout { position:absolute; right:0; bottom:-21px; font:9px "Segoe UI",sans-serif; white-space:nowrap; color:var(--theme-muted); }
html[data-theme=dark] #connectionPage .mixer-channel .mute-button { min-height:30px; width:min(100%,90px); padding:5px 12px; font-size:10px; color:var(--theme-ink); background:#112030; border:1px solid #3d5873; box-shadow:none; }
html[data-theme=dark] #connectionPage .mixer-channel .mute-button.active { color:#ff9bbb; border-color:#e26d96; background:#362035; }
html[data-theme=dark] #connectionPage .meter-legend { color:var(--theme-muted)!important; font-size:9px; margin:18px 0 0; line-height:1.6; }
html[data-theme=dark] #connectionPage .monitor-setting { padding:10px 0 0; margin-top:10px; border:0; border-top:1px solid #26394e; font-size:11px; }
html[data-theme=dark] #connectionPage .monitor-setting .switch-button { min-height:25px; font-size:10px; }
html[data-theme=dark] #connectionPage .take-panel { padding:0; margin:0; border:0; }
html[data-theme=dark] #connectionPage .take-heading { align-items:center; gap:12px; margin:0 0 16px; }
html[data-theme=dark] #connectionPage #takeCount { font:10px "Segoe UI",sans-serif; color:var(--theme-muted); text-align:right; }
html[data-theme=dark] #connectionPage #takeList { min-height:138px; max-height:230px; overflow:auto; }
html[data-theme=dark] #connectionPage #takeList>p { margin:0; min-height:130px; display:flex; align-items:center; justify-content:center; font-size:13px; }
html[data-theme=dark] #connectionPage .take-panel>.text-button { display:block; margin:4px auto 16px; color:#90d4ff; font-size:11px; }
html[data-theme=dark] #connectionPage .take-actions { padding-top:10px; border-top:1px solid var(--theme-border); }
html[data-theme=dark] #connectionPage .take-actions button { font-size:10px; padding:6px 8px; }
html[data-theme=dark] #connectionPage .playback-mode { gap:10px; margin-top:12px; border:0; }
html[data-theme=dark] #connectionPage .playback-mode button { font-size:10px; padding:7px 9px; border:1px solid #314a63; border-radius:5px; }
html[data-theme=dark] #connectionPage .playback-mode button[aria-pressed=true] { color:#98edff; background:#153042; border-color:#43728a; }
html[data-theme=dark] #connectionPage .playback-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
html[data-theme=dark] #connectionPage .playback-actions button { min-height:34px; padding:7px 10px; font-size:11px; }
html[data-theme=dark] #connectionPage .play-button:not(:disabled) { color:var(--theme-ink); background:#193346; border:1px solid #5b8ca8; }
html[data-theme=dark] #connectionPage :is(#recordStatus,#playbackStatus) { font-size:12px; line-height:1.6; }
html[data-theme=dark] #connectionPage #recordStatus:not(:empty) { padding:12px 16px; border:1px solid #5b526b; border-radius:7px; background:#201e2d; }
html[data-theme=dark] #connectionPage .status-grid { border:0; margin-top:12px; background:none; }
html[data-theme=dark] #connectionPage .status-grid article { padding:6px 0; gap:8px 14px; }
html[data-theme=dark] #connectionPage .status-grid :is(span,strong,small) { font-size:10px; color:var(--theme-muted); }
html[data-theme=dark] footer { border-color:#23374b; color:#879db8; font-size:10px; }
@media(max-width:1350px) {
  html[data-theme=dark] .shell>header .global-state { order:3; max-width:none; flex-basis:100%; padding:0 0 8px; }
  html[data-theme=dark] .shell>header .main-nav { justify-content:flex-end; }
  html[data-theme=dark] #connectionPage .studio-metro { gap:20px 14px; }
  html[data-theme=dark] #connectionPage .bpm-control { grid-template-columns:1fr 32px 32px; gap:5px; }
  html[data-theme=dark] #connectionPage .bpm-control input { width:90px; font-size:56px; }
  html[data-theme=dark] #connectionPage .bpm-control button { width:32px; }
}
@media(max-width:1100px) {
  html[data-theme=dark] .shell { width:calc(100% - 48px); }
  html[data-theme=dark] .shell>header .main-nav { order:2; flex-basis:100%; justify-content:flex-start; overflow-x:auto; }
  html[data-theme=dark] .shell>header .brand { margin-right:auto; }
  html[data-theme=dark] .main-nav a { padding:10px; }
  html[data-theme=dark] #connectionPage .studio-top { grid-template-columns:1fr; }
  html[data-theme=dark] #connectionPage .studio-metro { grid-template-columns:1fr 1fr; }
  html[data-theme=dark] #connectionPage .studio-transport { grid-template-columns:180px 1fr; }
  html[data-theme=dark] #connectionPage .capture-actions { grid-column:1/-1; }
  html[data-theme=dark] #connectionPage .tab-signal { grid-column:1/-1; }
  html[data-theme=dark] #connectionPage .studio-bottom { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  body::before,body::after { display:none; }
  html[data-theme=dark] .shell { width:calc(100% - 28px); }
  html[data-theme=dark] .shell>header { gap:8px; }
  html[data-theme=dark] .shell>header .brand { flex-basis:200px; }
  html[data-theme=dark] .brand .theme-logo { width:200px; height:60px; }
  html[data-theme=dark] .main-nav a { padding:10px 7px; font-size:11px; }
  html[data-theme=dark] #connectionPage :is(.studio-tuner,.studio-metro,.studio-transport,.studio-console,.studio-history) { padding:18px 14px; }
  html[data-theme=dark] #connectionPage .note-stage { grid-template-columns:70px minmax(0,1fr); column-gap:16px; }
  html[data-theme=dark] #connectionPage .note { font-size:48px; }
  html[data-theme=dark] #connectionPage .octave { font-size:13px; }
  html[data-theme=dark] #connectionPage .tune-scale { font-size:8px; }
  html[data-theme=dark] #connectionPage .control-panel { grid-template-columns:minmax(0,1fr) auto; }
  html[data-theme=dark] #connectionPage .level-box { grid-column:1/-1; padding:6px 0 0; border:0; }
  html[data-theme=dark] #connectionPage .studio-metro { gap:24px 12px; }
  html[data-theme=dark] #connectionPage .studio-transport { grid-template-columns:1fr; }
  html[data-theme=dark] #connectionPage .source-statuses { padding:0; border:0; }
  html[data-theme=dark] #connectionPage .mixer-channel { padding:0 7px; }
  html[data-theme=dark] #connectionPage .mixer-channel .fader-well { grid-template-columns:20px 25px 9px; gap:5px; }
  html[data-theme=dark] #connectionPage .mixer-channel .fader-well input[type=range] { width:25px; }
  html[data-theme=dark] #connectionPage .signal-meter { width:9px; }
  html[data-theme=dark] #connectionPage .strip-name { font-size:9px; }
  html[data-theme=dark] #connectionPage .strip-name small { font-size:7px; }
  html[data-theme=dark] #connectionPage .fader-readout { font-size:19px; }
  html[data-theme=dark] #connectionPage .mixer-title { align-items:flex-start; }
  html[data-theme=dark] #connectionPage .mixer-title span { max-width:115px; text-align:right; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-theme=dark] *,html[data-theme=dark] *::before,html[data-theme=dark] *::after { animation:none!important; transition:none!important; }
}