/* generated by web/build.py from leadsheet/design.py: do not edit */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/LibreBaskerville-Regular.ttf") format("truetype"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/LibreBaskerville-Bold.ttf") format("truetype"); }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/PTSerif-Regular.ttf") format("truetype"); unicode-range: U+0400-052F, U+1C80-1C88, U+2DE0-2DFF, U+A640-A69F; size-adjust: 106%; }
@font-face { font-family: "Leadsheet Accidentals"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/LeadsheetAccidentals-Regular.ttf") format("truetype"); unicode-range: U+2669, U+266D-266F; }
:root {
  color-scheme: light dark;
  --bg: #EEF3F2;
  --raised: #FFFFFF;
  --surface: #FFFFFF;
  --tint: #E8F0F0;
  --highlight: #B2E4EC;
  --hover: #E9F3F4;
  --text: #14253A;
  --text2: #3C4E62;
  --accent: #007980;
  --accent2: #4F9BA9;
  --on-accent: #FFFFFF;
  --hairline: #DEE4E6;
  --error: #B3261E;
  --shadow: rgba(20, 37, 58, 0.10);
  --paper: #FFFFFF;
  --paper-ink: #000000;
  --serif: "Libre Baskerville", "PT Serif", "Leadsheet Accidentals", "Georgia", "Times New Roman", "Segoe UI Symbol", serif;
  --sans: system-ui, "Segoe UI", -apple-system, "Roboto", "Helvetica Neue", "Arial", "Segoe UI Symbol", sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
  --fs-small: 12px;
  --fs-body: 14px;
  --fs-section: 13px;
  --fs-row-title: 15px;
  --fs-chord: 19px;
  --fs-key: 26px;
  --fs-title: 24px;
  --fs-app-name: 21px;
  --fs-drop: 20px;
  --r-card: 20px;
  --r-box: 20px;
  --r-button: 24px;
  --r-pill: 14px;
  --r-field: 12px;
  --r-small: 10px;
  --sp-xs: 4px;
  --sp-s: 8px;
  --sp-m: 16px;
  --sp-l: 24px;
  --sp-xl: 32px;
  --target: 48px;
}
@media (prefers-color-scheme: dark) {
:root {
  --bg: #0F1C2C;
  --raised: #14253A;
  --surface: #182A40;
  --tint: #1D3249;
  --highlight: #235763;
  --hover: #1F3550;
  --text: #E8EEF2;
  --text2: #A9B9C8;
  --accent: #5BC2C7;
  --accent2: #74B9C6;
  --on-accent: #0F1C2C;
  --hairline: #2B4058;
  --error: #F2B8B5;
  --shadow: rgba(0, 0, 0, 0.35);
  --paper: #182A40;
  --paper-ink: #E8EEF2;
}
}
:root[data-theme="light"] {
  --bg: #EEF3F2;
  --raised: #FFFFFF;
  --surface: #FFFFFF;
  --tint: #E8F0F0;
  --highlight: #B2E4EC;
  --hover: #E9F3F4;
  --text: #14253A;
  --text2: #3C4E62;
  --accent: #007980;
  --accent2: #4F9BA9;
  --on-accent: #FFFFFF;
  --hairline: #DEE4E6;
  --error: #B3261E;
  --shadow: rgba(20, 37, 58, 0.10);
  --paper: #FFFFFF;
  --paper-ink: #000000;
}
:root[data-theme="dark"] {
  --bg: #0F1C2C;
  --raised: #14253A;
  --surface: #182A40;
  --tint: #1D3249;
  --highlight: #235763;
  --hover: #1F3550;
  --text: #E8EEF2;
  --text2: #A9B9C8;
  --accent: #5BC2C7;
  --accent2: #74B9C6;
  --on-accent: #0F1C2C;
  --hairline: #2B4058;
  --error: #F2B8B5;
  --shadow: rgba(0, 0, 0, 0.35);
  --paper: #182A40;
  --paper-ink: #E8EEF2;
}
:root { --progress-line: 3px; }