/* Canonical screen tokens: approved Claude design, integrated with existing local fonts. */
@media screen{
/* app/tokens.css: the only file allowed raw colours (scripts/check.mjs). Generated from the Phrase style guide. */
:root {
  --font-sans:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; --font-mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px;
  --radius-sm:6px; --radius-lg:12px; --radius-pill:999px;
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms; --ease-out:cubic-bezier(.2,0,0,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ring-width:2px; --ring-offset:2px; --frame-width:2px; --nowline-width:2px;
}
/* Studio Night is the default dark family (owner, 24 Oct 2026). It also serves System on a dark device and first paint. */
:root, :root[data-palette=studio-night] { color-scheme:dark;
  --bg:#0d1013; --canvas:#0d1013; --panel:#171a1e; --surface:#212429; --hover:#2a2e34; --border:#32363c; --line:#5f646c; --edge:#6e737c; --control-border:transparent; --ink:#e9ebef; --muted:#999fa8; --on-ink:#0d1013; --focus:#e9ebef; --nav:#e9ebef; --selection:#fbc044; --selection-fill:#fbc044; --selection-ink:#261a00; --selection-bg:#3a2b0d; --play:#56dc85; --play-ink:#062012; --play-wash:#17301f; --play-glow:rgba(86, 220, 133, 0.5); --danger:#ff8a80; --on-danger:#2a0805; --warn:#ffa36c; --scrim:rgba(4, 6, 8, 0.72); --elev-1:0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 14px rgba(0, 0, 0, 0.36); --elev-2:0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 48px rgba(0, 0, 0, 0.55);
}
:root[data-palette=midnight-ink] { color-scheme:dark;
  --bg:#0b0f1a; --canvas:#0b0f1a; --panel:#131a2a; --surface:#1c2438; --hover:#252e45; --border:#2a3450; --line:#58648a; --edge:#6a779c; --control-border:transparent; --ink:#e8ecf5; --muted:#9ba5bd; --on-ink:#0b0f1a; --focus:#8da2ff; --nav:#8da2ff; --selection:#fbc044; --selection-fill:#fbc044; --selection-ink:#261a00; --selection-bg:#372a10; --play:#56dc85; --play-ink:#062012; --play-wash:#132f25; --play-glow:rgba(86, 220, 133, 0.5); --danger:#ff8a80; --on-danger:#2a0805; --warn:#ffa36c; --scrim:rgba(3, 5, 12, 0.72); --elev-1:0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 14px rgba(0, 0, 0, 0.36); --elev-2:0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 48px rgba(0, 0, 0, 0.55);
}
:root[data-palette=warm-studio] { color-scheme:dark;
  --bg:#16120e; --canvas:#16120e; --panel:#201b16; --surface:#2b251f; --hover:#352e27; --border:#3b342c; --line:#6a6156; --edge:#7c7266; --control-border:transparent; --ink:#efe8dc; --muted:#aba193; --on-ink:#16120e; --focus:#efe8dc; --nav:#efe8dc; --selection:#fbc044; --selection-fill:#fbc044; --selection-ink:#261a00; --selection-bg:#3d2d0e; --play:#56dc85; --play-ink:#062012; --play-wash:#1b3321; --play-glow:rgba(86, 220, 133, 0.45); --danger:#ff8f7f; --on-danger:#2a0805; --warn:#ffa66c; --scrim:rgba(10, 7, 4, 0.72); --elev-1:0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 14px rgba(0, 0, 0, 0.36); --elev-2:0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 48px rgba(0, 0, 0, 0.55);
}
:root[data-palette=paper] { color-scheme:light;
  --bg:#f4f0e7; --canvas:#fdfaf4; --panel:#fdfaf4; --surface:#ebe5d9; --hover:#e2dbcc; --border:#d9d1c3; --line:#8f877a; --edge:#857c6f; --control-border:transparent; --ink:#25211b; --muted:#655e55; --on-ink:#fdfaf4; --focus:#303e72; --nav:#303e72; --selection:#9a6a00; --selection-fill:#f5cb70; --selection-ink:#2e2000; --selection-bg:#fdf3dc; --play:#187c49; --play-ink:#ffffff; --play-wash:#e9f6ec; --play-glow:rgba(24, 124, 73, 0.28); --danger:#b3261e; --on-danger:#ffffff; --warn:#a3470f; --scrim:rgba(37, 33, 27, 0.45); --elev-1:0 1px 2px rgba(37, 33, 27, 0.08), 0 4px 14px rgba(37, 33, 27, 0.07); --elev-2:0 2px 6px rgba(37, 33, 27, 0.08), 0 18px 44px rgba(37, 33, 27, 0.16);
}
@media (prefers-color-scheme: light) {
  :root:not([data-palette]), :root[data-palette=system] { color-scheme:light;
  --bg:#f4f0e7; --canvas:#fdfaf4; --panel:#fdfaf4; --surface:#ebe5d9; --hover:#e2dbcc; --border:#d9d1c3; --line:#8f877a; --edge:#857c6f; --control-border:transparent; --ink:#25211b; --muted:#655e55; --on-ink:#fdfaf4; --focus:#303e72; --nav:#303e72; --selection:#9a6a00; --selection-fill:#f5cb70; --selection-ink:#2e2000; --selection-bg:#fdf3dc; --play:#187c49; --play-ink:#ffffff; --play-wash:#e9f6ec; --play-glow:rgba(24, 124, 73, 0.28); --danger:#b3261e; --on-danger:#ffffff; --warn:#a3470f; --scrim:rgba(37, 33, 27, 0.45); --elev-1:0 1px 2px rgba(37, 33, 27, 0.08), 0 4px 14px rgba(37, 33, 27, 0.07); --elev-2:0 2px 6px rgba(37, 33, 27, 0.08), 0 18px 44px rgba(37, 33, 27, 0.16);
}
}
:root[data-palette=high-contrast] { color-scheme:dark;
  --bg:#000000; --canvas:#000000; --panel:#000000; --surface:#141414; --hover:#262626; --border:#8a8a8a; --line:#a6a6a6; --edge:#d0d0d0; --control-border:#d0d0d0; --ink:#ffffff; --muted:#d4d4d4; --on-ink:#000000; --focus:#ffffff; --nav:#ffffff; --selection:#ffd447; --selection-fill:#ffd447; --selection-ink:#000000; --selection-bg:#2b2000; --play:#5cf08f; --play-ink:#000000; --play-wash:#06240f; --play-glow:rgba(92, 240, 143, 0.6); --danger:#ff9c94; --on-danger:#000000; --warn:#ffb47f; --scrim:rgba(0, 0, 0, 0.85); --elev-1:none; --elev-2:none;
}
@media (prefers-contrast: more) {
  :root:not([data-palette]), :root[data-palette=system] { color-scheme:dark;
  --bg:#000000; --canvas:#000000; --panel:#000000; --surface:#141414; --hover:#262626; --border:#8a8a8a; --line:#a6a6a6; --edge:#d0d0d0; --control-border:#d0d0d0; --ink:#ffffff; --muted:#d4d4d4; --on-ink:#000000; --focus:#ffffff; --nav:#ffffff; --selection:#ffd447; --selection-fill:#ffd447; --selection-ink:#000000; --selection-bg:#2b2000; --play:#5cf08f; --play-ink:#000000; --play-wash:#06240f; --play-glow:rgba(92, 240, 143, 0.6); --danger:#ff9c94; --on-danger:#000000; --warn:#ffb47f; --scrim:rgba(0, 0, 0, 0.85); --elev-1:none; --elev-2:none;
}
}

/* Pitch sets: Soft (default) and Colour-blind safe (option), values per ground. */
:root {
  --pitch-soft-0:#f6a3af; --pitch-soft-1:#eaa4d2; --pitch-soft-2:#d2acee; --pitch-soft-3:#b1b7fd; --pitch-soft-4:#8cc3fc; --pitch-soft-5:#6ccdea; --pitch-soft-6:#67d2cc; --pitch-soft-7:#9dcab1; --pitch-soft-8:#b1c69e; --pitch-soft-9:#c6bf93; --pitch-soft-10:#d7b894; --pitch-soft-11:#f6a88d;
  --pitch-cvd-0:#fec7a2; --pitch-cvd-1:#a5ddfe; --pitch-cvd-2:#ff9592; --pitch-cvd-3:#c4a4fe; --pitch-cvd-4:#dc813b; --pitch-cvd-5:#1da8e5; --pitch-cvd-6:#fec3c0; --pitch-cvd-7:#dbcafe; --pitch-cvd-8:#f7a062; --pitch-cvd-9:#55c4fe; --pitch-cvd-10:#e57573; --pitch-cvd-11:#a986e5;
}
:root[data-palette=paper] {
  --pitch-soft-0:#a14759; --pitch-soft-1:#954a7e; --pitch-soft-2:#7e539c; --pitch-soft-3:#5c5fac; --pitch-soft-4:#286cab; --pitch-soft-5:#007798; --pitch-soft-6:#007670; --pitch-soft-7:#3b7759; --pitch-soft-8:#5a7240; --pitch-soft-9:#746a2f; --pitch-soft-10:#866032; --pitch-soft-11:#a14d2f;
  --pitch-cvd-0:#5f2e01; --pitch-cvd-1:#01435f; --pitch-cvd-2:#92292e; --pitch-cvd-3:#613c94; --pitch-cvd-4:#9f5102; --pitch-cvd-5:#01729f; --pitch-cvd-6:#6f181e; --pitch-cvd-7:#482971; --pitch-cvd-8:#814000; --pitch-cvd-9:#015b80; --pitch-cvd-10:#ab4043; --pitch-cvd-11:#7652ac;
}
@media (prefers-color-scheme: light) { :root:not([data-palette]), :root[data-palette=system] {
  --pitch-soft-0:#a14759; --pitch-soft-1:#954a7e; --pitch-soft-2:#7e539c; --pitch-soft-3:#5c5fac; --pitch-soft-4:#286cab; --pitch-soft-5:#007798; --pitch-soft-6:#007670; --pitch-soft-7:#3b7759; --pitch-soft-8:#5a7240; --pitch-soft-9:#746a2f; --pitch-soft-10:#866032; --pitch-soft-11:#a14d2f;
  --pitch-cvd-0:#5f2e01; --pitch-cvd-1:#01435f; --pitch-cvd-2:#92292e; --pitch-cvd-3:#613c94; --pitch-cvd-4:#9f5102; --pitch-cvd-5:#01729f; --pitch-cvd-6:#6f181e; --pitch-cvd-7:#482971; --pitch-cvd-8:#814000; --pitch-cvd-9:#015b80; --pitch-cvd-10:#ab4043; --pitch-cvd-11:#7652ac;
} }
:root[data-palette=high-contrast] {
  --pitch-soft-0:#f6a3af; --pitch-soft-1:#eaa4d2; --pitch-soft-2:#d2acee; --pitch-soft-3:#b1b7fd; --pitch-soft-4:#8cc3fc; --pitch-soft-5:#6ccdea; --pitch-soft-6:#67d2cc; --pitch-soft-7:#9dcab1; --pitch-soft-8:#b1c69e; --pitch-soft-9:#c6bf93; --pitch-soft-10:#d7b894; --pitch-soft-11:#f6a88d;
  --pitch-cvd-0:#fee2cf; --pitch-cvd-1:#d0edfe; --pitch-cvd-2:#febab6; --pitch-cvd-3:#d6c2fe; --pitch-cvd-4:#f39d5e; --pitch-cvd-5:#52c1fb; --pitch-cvd-6:#fee0de; --pitch-cvd-7:#ebe3fe; --pitch-cvd-8:#febe92; --pitch-cvd-9:#95d7fe; --pitch-cvd-10:#fc918e; --pitch-cvd-11:#c1a0fb;
}
@media (prefers-contrast: more) { :root:not([data-palette]), :root[data-palette=system] {
  --pitch-soft-0:#f6a3af; --pitch-soft-1:#eaa4d2; --pitch-soft-2:#d2acee; --pitch-soft-3:#b1b7fd; --pitch-soft-4:#8cc3fc; --pitch-soft-5:#6ccdea; --pitch-soft-6:#67d2cc; --pitch-soft-7:#9dcab1; --pitch-soft-8:#b1c69e; --pitch-soft-9:#c6bf93; --pitch-soft-10:#d7b894; --pitch-soft-11:#f6a88d;
  --pitch-cvd-0:#fee2cf; --pitch-cvd-1:#d0edfe; --pitch-cvd-2:#febab6; --pitch-cvd-3:#d6c2fe; --pitch-cvd-4:#f39d5e; --pitch-cvd-5:#52c1fb; --pitch-cvd-6:#fee0de; --pitch-cvd-7:#ebe3fe; --pitch-cvd-8:#febe92; --pitch-cvd-9:#95d7fe; --pitch-cvd-10:#fc918e; --pitch-cvd-11:#c1a0fb;
} }
:root { --pitch-0:var(--pitch-soft-0); --pitch-1:var(--pitch-soft-1); --pitch-2:var(--pitch-soft-2); --pitch-3:var(--pitch-soft-3); --pitch-4:var(--pitch-soft-4); --pitch-5:var(--pitch-soft-5); --pitch-6:var(--pitch-soft-6); --pitch-7:var(--pitch-soft-7); --pitch-8:var(--pitch-soft-8); --pitch-9:var(--pitch-soft-9); --pitch-10:var(--pitch-soft-10); --pitch-11:var(--pitch-soft-11); }
:root[data-pitch-set=cvd] { --pitch-0:var(--pitch-cvd-0); --pitch-1:var(--pitch-cvd-1); --pitch-2:var(--pitch-cvd-2); --pitch-3:var(--pitch-cvd-3); --pitch-4:var(--pitch-cvd-4); --pitch-5:var(--pitch-cvd-5); --pitch-6:var(--pitch-cvd-6); --pitch-7:var(--pitch-cvd-7); --pitch-8:var(--pitch-cvd-8); --pitch-9:var(--pitch-cvd-9); --pitch-10:var(--pitch-cvd-10); --pitch-11:var(--pitch-cvd-11); }

/* Legacy names, removed slice by slice (STYLE-GUIDE.md, Migration). */
:root {
  --chrome:var(--panel); --accent:var(--focus); --accent-ink:var(--on-ink); --shadow:var(--elev-1); --radius:16px;
  --sans:var(--font-sans); --mono:var(--font-mono);
  --guitar:var(--ink); --guitar-bg:var(--surface); --bass:var(--ink); --bass-bg:var(--surface); --drums:var(--ink); --drums-bg:var(--surface); --piano:var(--ink); --piano-bg:var(--surface);
  --playing-clash:var(--danger); --playing-caution:var(--warn); --mix-muted:var(--muted);
}

.appearance-choice[data-appearance=studio-night]{--scheme-ground:#0d1013;--scheme-surface:#212429;--scheme-accent:#8cc3fc}

.appearance-choice[data-appearance=midnight-ink]{--scheme-ground:#0b0f1a;--scheme-surface:#1c2438;--scheme-accent:#8da2ff}

.appearance-choice[data-appearance=warm-studio]{--scheme-ground:#16120e;--scheme-surface:#2b251f;--scheme-accent:#f6a88d}

.appearance-choice[data-appearance=paper]{--scheme-ground:#f4f0e7;--scheme-surface:#ebe5d9;--scheme-accent:#286cab}

.appearance-choice[data-appearance=high-contrast]{--scheme-ground:#000000;--scheme-surface:#141414;--scheme-accent:#ffffff}

.appearance-choice[data-appearance=system]{--scheme-ground:#0d1013;--scheme-surface:#212429;--scheme-accent:#8cc3fc}
@media(prefers-color-scheme:light){.appearance-choice[data-appearance=system]{--scheme-ground:#f4f0e7;--scheme-surface:#ebe5d9;--scheme-accent:#286cab}}
@media(prefers-contrast:more){.appearance-choice[data-appearance=system]{--scheme-ground:#000000;--scheme-surface:#141414;--scheme-accent:#ffffff}}

/* Control edges use their own token, leaving decorative dividers quiet. */
input:not([type=range]):not([type=checkbox]),select,textarea{--border:var(--edge)}

}
/* Preserve the previous print variables until the separate print-style migration. */
@media print{
:root{color-scheme:light dark;--bg:#edf0f6;--panel:#fbfcff;--surface:#e5eaf3;--hover:#dce5f5;--ink:#24334a;--muted:#586982;--border:#cbd5e4;--line:#95a7bd;--accent:#4e62b5;--accent-ink:#f7f9ff;--selection:#91600c;--selection-bg:#fff0c4;--selection-fill:#f3ce76;--selection-ink:#49320b;--play:#18774e;--play-ink:#f4fff8;--guitar:var(--ink);--guitar-bg:var(--surface);--bass:var(--ink);--bass-bg:var(--surface);--drums:var(--ink);--drums-bg:var(--surface);--canvas:#f5f8ff;--chrome:#e5eaf3;--shadow:0 10px 30px #253c4c0a;--radius:16px;--sans:Segoe UI Variable,Segoe UI,system-ui,sans-serif;--mono:Cascadia Code,SFMono-Regular,Consolas,monospace}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#171d28;--panel:#212a39;--surface:#2a374a;--hover:#364762;--ink:#e8eefb;--muted:#aabbd1;--border:#3b4c64;--line:#6c85a2;--accent:#a6b7ff;--accent-ink:#1e2947;--selection:#f3c76c;--selection-bg:#504129;--selection-fill:#f3c76c;--selection-ink:#30240e;--play:#77ddb1;--play-ink:#16372a;--guitar:var(--ink);--guitar-bg:var(--surface);--bass:var(--ink);--bass-bg:var(--surface);--drums:var(--ink);--drums-bg:var(--surface);--canvas:#1c283a;--chrome:#1b2331;--shadow:0 14px 36px #0b111529}}
:root[data-theme=dark]{--bg:#171d28;--panel:#212a39;--surface:#2a374a;--hover:#364762;--ink:#e8eefb;--muted:#aabbd1;--border:#3b4c64;--line:#6c85a2;--accent:#a6b7ff;--accent-ink:#1e2947;--selection:#f3c76c;--selection-bg:#504129;--selection-fill:#f3c76c;--selection-ink:#30240e;--play:#77ddb1;--play-ink:#16372a;--guitar:var(--ink);--guitar-bg:var(--surface);--bass:var(--ink);--bass-bg:var(--surface);--drums:var(--ink);--drums-bg:var(--surface);--canvas:#1c283a;--chrome:#1b2331;--shadow:0 14px 36px #0b111529}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark}}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light}}
/* Chromatic colour belongs to the pitch class, unchanged by octave or part. */
:root { --pitch-0:#a33842; --pitch-1:#a2336a; --pitch-2:#7146a3; --pitch-3:#5353a0; --pitch-4:#2f5d96; --pitch-5:#10677b; --pitch-6:#126a62; --pitch-7:#216844; --pitch-8:#56651a; --pitch-9:#7d5a09; --pitch-10:#8d4f18; --pitch-11:#9f4129; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme=light]) { --pitch-0:#ff98a1; --pitch-1:#fca0cf; --pitch-2:#ccb0ff; --pitch-3:#b6b6ff; --pitch-4:#94c6ff; --pitch-5:#78d4e7; --pitch-6:#79dbc6; --pitch-7:#88d9a4; --pitch-8:#bad777; --pitch-9:#e7cd7d; --pitch-10:#f2bb80; --pitch-11:#ffa68a; }
}
:root[data-theme=dark] { --pitch-0:#ff98a1; --pitch-1:#fca0cf; --pitch-2:#ccb0ff; --pitch-3:#b6b6ff; --pitch-4:#94c6ff; --pitch-5:#78d4e7; --pitch-6:#79dbc6; --pitch-7:#88d9a4; --pitch-8:#bad777; --pitch-9:#e7cd7d; --pitch-10:#f2bb80; --pitch-11:#ffa68a; }

:root { --piano:var(--ink); --piano-bg:var(--surface); }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) { --piano:var(--ink); --piano-bg:var(--surface); } }
:root[data-theme=dark] { --piano:var(--ink); --piano-bg:var(--surface); }
:root { --mix-muted:#ed939b; }
:root[data-palette=light],:root[data-palette=sand] { --mix-muted:#a43f4d; }
:root{--playing-clash:#e79a9f;--playing-caution:#dfbd7b}
:root[data-theme=light]{--playing-clash:#a33749;--playing-caution:#865c18}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--playing-clash:#a33749;--playing-caution:#865c18}}

}