:root {
  color-scheme:dark;
  --theme-bg:#080f18;
  --theme-surface:#101b28;
  --theme-subtle:#162436;
  --theme-input:#0b1420;
  --theme-ink:#deebff;
  --theme-muted:#a7b9d1;
  --theme-border:#293d54;
  --theme-strong-line:#52718f;
  --theme-action:#50e6ff;
  --theme-on-action:#081824;
  --theme-hover:#1b3043;
  --theme-accent:#50e6ff;
  --theme-selected:#122d3b;
  --theme-selected-ink:#e4ffff;
  --theme-danger:#ff578c;
  --theme-danger-ink:#ff94b6;
  --theme-danger-surface:#342035;
  --theme-meter-track:#233346;
  --theme-meter-fill:#50e6ff;
  --theme-board:#0d1c29;
  --theme-board-line:#57718a;
  --theme-dot:#3d566b;
  --theme-next:#cccccc;
  --theme-current:#63e6ee;
  --theme-current-ink:#10292c;
  --theme-guitar:#6be4eb;
  --theme-tab:#b99aff;
  --theme-metro:#75adff;
  --theme-master:#50e6ff;
  --ink:var(--theme-ink);
  --muted:var(--theme-muted);
  --bg:var(--theme-bg);
  --panel:var(--theme-surface);
  --line:var(--theme-border);
  --lime:var(--theme-action);
  --orange:var(--theme-action);
}
:root[data-theme=light] {
  color-scheme:light;
  --theme-bg:#f4f3ef;
  --theme-surface:#ffffff;
  --theme-subtle:#ebece7;
  --theme-input:#ffffff;
  --theme-ink:#25282a;
  --theme-muted:#565c5c;
  --theme-border:#b9bcb7;
  --theme-strong-line:#7c8784;
  --theme-action:#32383a;
  --theme-on-action:#ffffff;
  --theme-hover:#dde1dc;
  --theme-accent:#126571;
  --theme-selected:#dfedea;
  --theme-selected-ink:#144e56;
  --theme-danger:#a43029;
  --theme-danger-ink:#802822;
  --theme-danger-surface:#fbe4df;
  --theme-meter-track:#d3d7d0;
  --theme-meter-fill:#197481;
  --theme-board:#e4e5dd;
  --theme-board-line:#7a837c;
  --theme-dot:#a1aca3;
  --theme-next:#555f59;
  --theme-current:#176b74;
  --theme-current-ink:#ffffff;
  --theme-guitar:#146d79;
  --theme-tab:#485992;
  --theme-metro:#79569b;
  --theme-master:#23694d;
}
.shell>.brand { color:var(--theme-ink); }
.shell>header .brand { flex:0 0 210px; display:block; margin:0; }
.brand .theme-logo { display:block; width:210px; height:58px; object-fit:cover; }
.brand .theme-logo-light { display:none; }
html[data-theme=light] .brand .theme-logo-dark { display:none; }
html[data-theme=light] .brand .theme-logo-light { display:block; }
.shell>header { gap:16px; }
.shell>header .main-nav { margin-left:0; gap:2px; }
.shell>header .main-nav a { padding-inline:10px; white-space:nowrap; }
.theme-picker { display:flex; flex:none; gap:2px; padding:3px; border:1px solid var(--theme-border); border-radius:5px; }
.theme-picker button { min-height:34px; padding:6px 10px; font-size:12px; border:0; border-radius:3px; background:transparent; color:var(--theme-muted); }
.theme-picker button[aria-pressed=true] { background:var(--theme-action); color:var(--theme-on-action); }
html[data-theme] body { background:var(--theme-bg); color:var(--theme-ink); }
html[data-theme] a { color:var(--theme-ink); text-decoration-color:var(--theme-strong-line); }
html[data-theme] :is(button,input,select) { color:var(--theme-ink); }
html[data-theme] :is(button,a,input,select):focus-visible { outline:2px solid var(--theme-accent); outline-offset:3px; }
html[data-theme] .page p,html[data-theme] .subtle { color:var(--theme-muted)!important; }
html[data-theme] :is(header,.global-state,footer,.home-history .panel,.panel,.history-row,th,td) { border-color:var(--theme-border); }
html[data-theme] :is(.global-state,.global-state span,footer,footer a,.badges span,.home-history .badges span) { color:var(--theme-muted); border-color:var(--theme-border); }
html[data-theme] .main-nav a { color:var(--theme-muted); }
html[data-theme] .main-nav a[aria-current=page] { background:var(--theme-subtle); color:var(--theme-ink); border-color:var(--theme-ink); }
html[data-theme] :is(.home-practice-entry,.control-panel,.notice) { background:var(--theme-surface); color:var(--theme-ink); border-color:var(--theme-border); }
html[data-theme] :is(.panel,.home-history .panel,.home-history .panel+.panel,.tool-card) { background:transparent; color:var(--theme-ink); }
html[data-theme] :is(.help-button,.secondary-button,.text-button,.tool-action,.equipment-grid button,.history-row button,.take-actions button,.playback-mode button) { color:var(--theme-ink); background:transparent; border-color:var(--theme-border); }
html[data-theme] button:hover:not(:disabled) { background:var(--theme-hover); color:var(--theme-ink); }
html[data-theme] :is(.primary-link,#startButton,#practiceResume,.play-button:not(:disabled),.switch-button.active,.playback-mode button[aria-pressed=true]) { background:var(--theme-action); color:var(--theme-on-action); border-color:var(--theme-action); }
html[data-theme] .primary-link:hover,html[data-theme] #startButton:hover:not(:disabled) { background:var(--theme-action); color:var(--theme-on-action); filter:brightness(.93); }
html[data-theme] .theme-picker button { color:var(--theme-muted); }
html[data-theme] .theme-picker button[aria-pressed=true] { background:var(--theme-action); color:var(--theme-on-action); }
html[data-theme] #globalDisconnect { color:var(--theme-ink); }
html[data-theme] select { background:transparent; color:var(--theme-ink); }
html[data-theme] select option { background:var(--theme-input); color:var(--theme-ink); }
html[data-theme] :is(.device-field,.note-stage,.status-grid,.monitor-setting,.take-panel,.source-statuses,.source-statuses>div,.metro-options label,.metro-options>div,.playback-mode) { border-color:var(--theme-border); }
html[data-theme] :is(.note-stage,.status-grid) { background:transparent; color:var(--theme-ink); }
html[data-theme] :is(.tuner-label,.frequency,.octave,.cents-row,.level-box span,.source-statuses span,.source-statuses small,.monitor-setting span,.tab-signal>span,.tool-heading>div>span,.metro-options span,.master-label) { color:var(--theme-muted); }
html[data-theme] :is(.note,.source-statuses strong,.level-box b,.tab-signal b,.tool-heading strong,.bpm-control input) { color:var(--theme-ink); }
html[data-theme] .source-statuses strong.connected { color:var(--theme-accent); }
html[data-theme] .control-panel .monitor-button { background:transparent; color:var(--theme-ink); }
html[data-theme] .bpm-control button,html[data-theme] .switch-button { background:var(--theme-subtle); color:var(--theme-ink); border-color:var(--theme-border); }
html[data-theme] .switch-button.active { background:var(--theme-action); color:var(--theme-on-action); }
html[data-theme] :is(.meter,.tune,.beat-dots i) { background:var(--theme-meter-track); }
html[data-theme] :is(.meter i,.tune i,.beat-dots i.on) { background:var(--theme-meter-fill); box-shadow:none; }
html[data-theme] .tune:after { background:var(--theme-ink); }
html[data-theme] :is(#recordButton,#stopRecordButton) { background:var(--theme-danger); border-color:var(--theme-danger); color:#fff; }
html[data-theme] :is(#recordButton,#stopRecordButton):hover:not(:disabled) { background:var(--theme-danger); color:#fff; filter:brightness(1.08); }
html[data-theme] :is(#recordTime.recording,#recordTime.recording i),html[data-theme] body:has(#recordTime.recording) #globalRecording { color:var(--theme-danger-ink); }
html[data-theme] .take-row button { background:transparent; color:var(--theme-ink); border-color:var(--theme-border); }
html[data-theme] .take-row.selected button:first-child { background:var(--theme-subtle); border-color:var(--theme-strong-line); }
html[data-theme] .danger-button:not(:disabled) { color:var(--theme-danger-ink); }
html[data-theme] :is(.mixer,.mixer-title) { background:var(--theme-input); border-color:var(--theme-border); box-shadow:none; }
html[data-theme] :is(.mixer-title strong,.mixer-title span,.strip-name) { color:var(--theme-ink); }
html[data-theme] .mixer-channel { --channel-accent:var(--theme-guitar)!important; border-color:var(--theme-border); }
html[data-theme] .mixer-channel[data-channel=tab] { --channel-accent:var(--theme-tab)!important; }
html[data-theme] .mixer-channel[data-channel=metro] { --channel-accent:var(--theme-metro)!important; }
html[data-theme] .mixer-channel.master-channel { --channel-accent:var(--theme-master)!important; background:var(--theme-subtle); }
html[data-theme] .mixer-channel :is(.channel-number,.fader-scale span,.master-label) { color:var(--theme-muted); }
html[data-theme] .mixer-channel .fader-readout { color:var(--channel-accent); background:transparent; text-shadow:none; }
html[data-theme] .mixer-channel .fader-well::before { background:repeating-linear-gradient(to top,transparent 0,transparent calc(12.5% - 1px),var(--theme-border) calc(12.5% - 1px),var(--theme-border) 12.5%); }
html[data-theme] .mixer-channel input[type=range]::-webkit-slider-runnable-track { background:var(--theme-meter-track); border-color:var(--theme-border); box-shadow:none; }
html[data-theme] .mixer-channel input[type=range]::-webkit-slider-thumb { background:linear-gradient(var(--theme-action) 0%,var(--theme-action) 43%,var(--channel-accent) 45%,var(--channel-accent) 55%,var(--theme-action) 57%); border-color:var(--theme-strong-line); box-shadow:0 1px 3px #0003; }
html[data-theme] .mixer-channel input[type=range]::-moz-range-track { background:var(--theme-meter-track); border-color:var(--theme-border); box-shadow:none; }
html[data-theme] .mixer-channel input[type=range]::-moz-range-thumb { background:var(--theme-action); border-color:var(--theme-strong-line); box-shadow:none; }
html[data-theme] :is(.mixer-channel .mute-button,.compact-channel button) { background:var(--theme-subtle); color:var(--theme-ink); border-color:var(--theme-border); }
html[data-theme] :is(.mixer-channel .mute-button.active,.compact-channel button[aria-pressed=true]) { background:var(--theme-danger-surface); color:var(--theme-danger-ink); border-color:var(--theme-danger-ink); box-shadow:none; }
html[data-theme] .mixer-channel.is-muted .fader-readout { color:var(--theme-muted); }
html[data-theme] #practicePage :is(.practice-cards,.practice-live,.pitch-panel,.practice-controls .secondary-button,.compact-mixer,.compact-channel) { border-color:var(--theme-border); }
html[data-theme] #practicePage :is(.practice-card,.practice-header>span,.phase-line strong,.phase-line span,.position-label span,.pitch-panel>span,.pitch-panel p,.pitch-panel>strong,.practice-header h2,.practice-header h2::before) { color:var(--theme-ink); }
html[data-theme] #practicePage .practice-card.selected,html[data-theme] #practicePage .practice-card.selected:first-child { background:var(--theme-selected); color:var(--theme-selected-ink); border-bottom-color:var(--theme-accent); }
html[data-theme] #practicePage .practice-settings :is(input[type=number],select) { color:var(--theme-ink); background:var(--theme-input); border-color:var(--theme-strong-line); }
html[data-theme] input[type=checkbox] { accent-color:var(--theme-accent); }
html[data-theme] #practicePage :is(.practice-live,.pitch-panel) { background:var(--theme-surface); }
html[data-theme] #practicePage .position-label strong,html[data-theme] #practicePage:has([data-kind=bend][aria-pressed=true]) #targetNote { color:var(--theme-accent); }
html[data-theme] #practicePage #currentNote,html[data-theme] #practicePage #targetNote { color:var(--theme-ink); }
html[data-theme] #practicePage .practice-controls #practiceStart { color:var(--theme-on-action); background:var(--theme-action); border-color:var(--theme-action); }
html[data-theme] #practicePage .practice-controls #practiceStart:disabled { color:var(--theme-muted); background:var(--theme-subtle); border-color:var(--theme-border); }
html[data-theme] #practicePage #practiceProgress::-webkit-progress-bar { background:var(--theme-meter-track); }
html[data-theme] #practicePage #practiceProgress::-webkit-progress-value { background:var(--theme-accent); }
html[data-theme] #practicePage #practiceProgress { accent-color:var(--theme-accent); }
html[data-theme] #practicePage .compact-channel label { color:var(--theme-muted); }
html[data-theme] #practicePage .compact-channel output { color:var(--theme-guitar); }
html[data-theme] #practicePage .compact-channel:nth-child(2) output { color:var(--theme-tab); }
html[data-theme] #practicePage .compact-channel:nth-child(3) output { color:var(--theme-metro); }
html[data-theme] #practicePage .compact-channel:nth-child(4) output { color:var(--theme-master); }
html[data-theme] #practicePage .compact-channel input::-webkit-slider-runnable-track { background:var(--theme-meter-track); }
html[data-theme] #practicePage .compact-channel input::-webkit-slider-thumb { background:var(--theme-action); border-color:var(--theme-strong-line); }
html[data-theme] #practicePage .compact-channel input::-moz-range-track { background:var(--theme-meter-track); }
html[data-theme] #practicePage .compact-channel input::-moz-range-thumb { background:var(--theme-action); border-color:var(--theme-strong-line); }
html[data-theme] #practicePage:has([data-kind=bend][aria-pressed=true]) #bendMeter { background:var(--theme-meter-track); border-color:var(--theme-accent); }
html[data-theme] #practicePage:has([data-kind=bend][aria-pressed=true]) #bendFill { background:var(--theme-accent); opacity:.45; }
html[data-theme] #bendTarget { color:var(--theme-ink); }
html[data-theme] #bendNeedle { border-color:var(--theme-ink); }
html[data-theme] #practicePage #fretboard svg>rect { fill:var(--theme-board); }
html[data-theme] #practicePage #fretboard svg>text { fill:var(--theme-muted); }
html[data-theme] #practicePage #fretboard svg>path { stroke:var(--theme-board-line); }
html[data-theme] #practicePage #fretboard svg>circle { fill:var(--theme-dot); }
html[data-theme] #practicePage #fretboard svg>circle[stroke-dasharray] { fill:var(--theme-board); stroke:var(--theme-next); }
html[data-theme] #practicePage #fretboard .current-fret circle { fill:var(--theme-current); }
html[data-theme] #practicePage #fretboard .current-fret text { fill:var(--theme-current-ink); }
html[data-theme] :is(.result-panel,.result-metrics>div,.restart-dialog) { background:var(--theme-surface); color:var(--theme-ink); border-color:var(--theme-border); }
html[data-theme] .result-metrics :is(strong,span) { color:var(--theme-ink); }
html[data-theme] .restart-dialog button { background:var(--theme-action); color:var(--theme-on-action); }
html[data-theme] .restart-dialog::backdrop { background:#0008; }
html[data-theme] .lm-guide { color:var(--theme-ink); }
html[data-theme] .lm-guide__panel { background:var(--theme-surface); border-color:var(--theme-border); }
html[data-theme] :is(.lm-guide__header,.lm-guide__nav) { background:var(--theme-bg); border-color:var(--theme-border); }
html[data-theme] :is(.lm-guide__kicker,.lm-guide__eyebrow) { color:var(--theme-muted); }
html[data-theme] :is(.lm-guide__content h2,.lm-guide__text,.lm-guide__header strong) { color:var(--theme-ink); }
html[data-theme] .lm-guide__close { background:var(--theme-subtle)!important; border-color:var(--theme-border)!important; color:var(--theme-ink); }
html[data-theme] .lm-guide__nav button { color:var(--theme-muted); }
html[data-theme] .lm-guide__nav button:hover { color:var(--theme-ink); background:var(--theme-hover); }
html[data-theme] .lm-guide__nav button.is-active { color:var(--theme-selected-ink); background:var(--theme-selected); }
html[data-theme] .lm-guide__figure { background:#f0f1ed; border-color:var(--theme-border); }
html[data-theme] .lm-guide__tip { color:var(--theme-muted); background:var(--theme-subtle); border-color:var(--theme-accent); }
html[data-theme] .lm-guide__tip strong { color:var(--theme-accent); }
html[data-theme] :is(.lm-guide__choices button,.lm-guide__controls button) { color:var(--theme-ink); background:var(--theme-subtle); border-color:var(--theme-border); }
html[data-theme] .lm-guide__controls .lm-guide__next { color:var(--theme-on-action); background:var(--theme-action); border-color:var(--theme-action); }
html[data-theme] .lm-guide__count { color:var(--theme-muted); }
html[data-theme] .lm-guide__controls { border-color:var(--theme-border); }
html[data-theme] .lm-guide__progress { background:var(--theme-meter-track); }
html[data-theme] .lm-guide__progress i { background:var(--theme-accent); }
@media(max-width:1000px) {
  .shell>header .brand { margin-right:auto; }
  .shell>header .theme-picker { margin-left:auto; }
  .shell>header .help-button { margin-left:0; }
  .shell>header .main-nav { order:3; flex-basis:100%; }
}
@media(max-width:600px) {
  .shell>header { gap:8px; }
  .shell>header .brand { flex-basis:160px; }
  .brand .theme-logo { width:160px; height:48px; }
  .theme-picker button { padding:6px 8px; }
  .shell>header .help-button { padding-inline:8px; }
}