:root {
      --bg: #f7f9f8;
      --panel: #ffffff;
      --ink: #1f2423;
      --muted: #6d7773;
      --line: #dce4e0;
      --board: #202423;
      --fret: rgba(217, 229, 224, .64);
      --string: rgba(74, 82, 78, .62);
      --board-ink: #1f2423;
      --board-muted: rgba(31, 36, 35, .62);
      --board-label-bg: rgba(31, 36, 35, .06);
      --accent: #00a99d;
      --accent-2: #ef476f;
      --accent-3: #ffd166;
      --shadow: 0 18px 48px rgba(21, 29, 27, .12);
      --display-scale: 1;
      --page-scale: 1;
      --dock-left: calc(18rem + 1rem);
      --dock-gap: clamp(.75rem, 2vw, 2rem);
      --status-width: clamp(54rem, 64vw, 72rem);
      --shortcut-width: clamp(9.5rem, 10vw, 12.5rem);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      padding-bottom: 6.2rem;
      color: var(--ink);
      font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
      background:
        linear-gradient(90deg, rgba(0, 169, 157, .08) 1px, transparent 1px),
        linear-gradient(rgba(0, 169, 157, .06) 1px, transparent 1px),
        radial-gradient(circle at 86% 8%, rgba(239, 71, 111, .16), transparent 24rem),
        var(--bg);
      background-size: 42px 42px, 42px 42px, auto, auto;
    }

    button,
    select,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    [hidden] {
      display: none !important;
    }

    .app {
      display: grid;
      grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
      min-height: 100vh;
      zoom: var(--page-scale);
    }

    .sidebar {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 1.4rem;
      position: sticky;
      top: 0;
      max-height: 100vh;
      padding: 1.2rem;
      color: #edf7f4;
      background: #171b1a;
      border-right: 1px solid rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .sidebar-toggle {
      position: absolute;
      z-index: 12;
      top: 1rem;
      right: .55rem;
      display: grid;
      place-items: center;
      width: 2.1rem;
      height: 3.25rem;
      padding: 0;
      color: #171b1a;
      border: 2px solid #171b1a;
      border-radius: 8px;
      background: #ffd166;
      box-shadow: 0 8px 18px rgba(21, 29, 27, .22);
      font-size: 1.65rem;
      font-weight: 900;
      line-height: 1;
    }

    .app.is-sidebar-collapsed {
      grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .app.is-sidebar-collapsed .sidebar {
      grid-template-rows: auto 1fr;
      gap: .8rem;
      padding: .75rem .45rem;
    }

    .app.is-sidebar-collapsed .brand {
      place-items: center;
      padding-bottom: .7rem;
    }

    .app.is-sidebar-collapsed .brand b {
      font-size: 0;
    }

    .app.is-sidebar-collapsed .brand b::after {
      content: "BJ";
      font-size: .72rem;
      letter-spacing: .04em;
    }

    .app.is-sidebar-collapsed .brand span,
    .app.is-sidebar-collapsed .sidebar nav,
    .app.is-sidebar-collapsed .sidebar-note {
      display: none;
    }

    .brand {
      display: grid;
      gap: .35rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .brand b {
      font-size: 1.05rem;
      letter-spacing: .02em;
    }

    .sidebar nav {
      min-height: 0;
      overflow: auto;
      padding-right: .1rem;
    }

    .brand span,
    .sidebar-note,
    .crumbs {
      color: rgba(237, 247, 244, .66);
      font-size: .84rem;
      line-height: 1.55;
    }

    .nav-group {
      display: grid;
      gap: .5rem;
    }

    .nav-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: .7rem 0 .15rem;
      color: rgba(237, 247, 244, .52);
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .nav-title span {
      color: rgba(255, 209, 102, .82);
      letter-spacing: 0;
    }

    .nav-subtitle {
      margin: .8rem 0 .2rem .65rem;
      color: rgba(237, 247, 244, .5);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .instrument-tabs {
      display: grid;
      gap: .45rem;
      margin: .25rem 0 .85rem;
    }

    .nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .7rem;
      min-height: 2.5rem;
      padding: .55rem .7rem;
      color: rgba(237, 247, 244, .82);
      text-decoration: none;
      border-radius: 8px;
      border: 1px solid transparent;
    }

    .nav-toggle {
      width: calc(100% - .65rem);
      font: inherit;
      text-align: left;
    }

    .instrument-tab {
      width: 100%;
      min-height: 3.15rem;
      padding: .64rem .72rem;
      border-color: rgba(237, 247, 244, .1);
      background: rgba(255, 255, 255, .045);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    }

    .instrument-tab:hover {
      color: #fff;
      border-color: rgba(0, 169, 157, .36);
      background: rgba(0, 169, 157, .1);
    }

    .instrument-tab.is-active {
      color: #171b1a;
      border-color: #ffd166;
      background: #ffd166;
      box-shadow: 0 12px 24px rgba(255, 209, 102, .16);
    }

    .instrument-name {
      min-width: 0;
      font-weight: 900;
      line-height: 1.2;
    }

    .instrument-code {
      display: inline-grid;
      place-items: center;
      min-width: 2.35rem;
      min-height: 1.55rem;
      padding: 0 .45rem;
      border-radius: 6px;
      color: rgba(237, 247, 244, .76);
      background: rgba(237, 247, 244, .08);
      font-size: .78rem;
      font-weight: 950;
      letter-spacing: .04em;
    }

    .instrument-tab.is-active .instrument-code {
      color: #171b1a;
      background: rgba(23, 27, 26, .1);
    }

    .nav-item.is-open {
      color: #fff;
      background: rgba(0, 169, 157, .16);
      border-color: rgba(0, 169, 157, .35);
    }

    .nav-item.is-child {
      margin-left: .65rem;
      min-height: 2.2rem;
      color: rgba(237, 247, 244, .72);
      font-size: .92rem;
    }

    .nav-item.is-active {
      color: #171b1a;
      background: var(--accent-3);
      border-color: var(--accent-3);
      font-weight: 800;
    }

    .nav-item.is-library-toggle {
      color: rgba(237, 247, 244, .76);
      border-color: rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .045);
      font-size: .86rem;
    }

    .map-library-branch {
      display: grid;
      gap: .15rem;
    }

    .nav-item.is-library-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .42rem .6rem;
    }

    .sidebar-entry {
      display: grid;
      gap: .04rem;
      min-width: 0;
      text-align: left;
    }

    .sidebar-entry b {
      color: rgba(237, 247, 244, .9);
      font-size: .75rem;
      letter-spacing: .035em;
    }

    .sidebar-entry small {
      color: rgba(237, 247, 244, .48);
      font-size: .56rem;
      font-weight: 800;
      letter-spacing: .05em;
    }

    .sidebar-fold-symbol {
      display: grid;
      place-items: center;
      width: 1.4rem;
      height: 1.35rem;
      color: #171b1a;
      border-radius: 5px;
      background: #ffd166;
      font-size: .75rem;
      font-style: normal;
      font-weight: 950;
      line-height: 1;
    }

    .quick-map {
      display: grid;
      gap: .2rem;
      margin: .05rem 0 .35rem .65rem;
    }

    .quick-map-section {
      display: grid;
      gap: .45rem;
      padding: .62rem;
      border: 1px solid rgba(237, 247, 244, .1);
      border-radius: 8px;
      background: rgba(255, 255, 255, .035);
    }

    .quick-map-group {
      display: grid;
      gap: .34rem;
      padding-top: .45rem;
      border-top: 1px solid rgba(237, 247, 244, .08);
    }

    .quick-map-group:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .quick-map-group > span {
      color: rgba(237, 247, 244, .64);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .quick-map-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: .3rem;
    }

    .quick-map .quick-map-list > :is(button, a) {
      appearance: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 1.85rem;
      padding: 0 .55rem;
      color: rgba(237, 247, 244, .74);
      border: 1px solid rgba(237, 247, 244, .14);
      border-radius: 6px;
      background: rgba(255, 255, 255, .045);
      font-size: .72rem;
      font-weight: 850;
      text-align: left;
      text-decoration: none;
    }

    .quick-map .quick-map-list > :is(button, a):hover {
      color: #fff;
      border-color: rgba(110, 147, 219, .58);
      background: rgba(110, 147, 219, .12);
    }

    .quick-map .quick-map-list > :is(button, a).is-active {
      color: #171b1a;
      border-color: #d8c85a;
      background: #d8c85a;
    }

    .theory-library-menu {
      display: grid;
      gap: .42rem;
      margin: .35rem 0 .6rem .65rem;
    }

    .theory-link {
      appearance: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      gap: .45rem;
      width: 100%;
      min-height: 2.2rem;
      padding: .42rem .6rem;
      color: rgba(237, 247, 244, .74);
      border: 1px solid rgba(237, 247, 244, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .045);
      font-size: .76rem;
      font-weight: 850;
      text-align: left;
      text-decoration: none;
    }

    .theory-link > span {
      color: inherit;
      font-size: .8rem;
      font-weight: 900;
      letter-spacing: .015em;
    }

    .theory-link > small {
      color: rgba(237, 247, 244, .45);
      font-size: .56rem;
      font-weight: 800;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .theory-link:hover {
      color: #fff;
      border-color: rgba(255, 209, 102, .42);
      background: rgba(255, 255, 255, .08);
    }

    .theory-link.is-active {
      color: #171b1a;
      border-color: #ffd166;
      background: #ffd166;
    }

    .theory-link.is-active > small { color: rgba(23, 27, 26, .58); }

    .main {
      display: grid;
      grid-template-rows: auto auto auto auto auto auto;
      align-content: start;
      gap: 1rem;
      min-width: 0;
      padding: clamp(1rem, 2.2vw, 1.7rem);
    }

    .main.is-theory-page {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .main.is-theory-page .workbench-panel {
      display: none;
    }

    .main.is-theory-page .status-dock {
      display: none;
    }

    body:has(.main.is-theory-page) .shortcut-help {
      display: none;
    }

    .main:not(.is-keyboard-page) .keyboard-only,
    .main.is-keyboard-page .fretboard-only {
      display: none;
    }

    .main.is-keyboard-page {
      grid-template-rows: auto auto auto auto auto auto;
      align-content: start;
    }

    .main.is-keyboard-page .toolbar {
      grid-template-columns: repeat(7, minmax(8.4rem, 1fr));
    }

    .main.is-keyboard-page .stage-layout {
      grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
      justify-content: stretch;
      justify-items: start;
      align-items: start;
      width: 100%;
      max-width: none;
      min-width: 0;
    }

    .main.is-keyboard-page .palette-legend {
      display: grid;
    }

    .main.is-keyboard-page .stage {
      align-self: start;
      justify-self: stretch;
      width: 100%;
      max-width: 100%;
      padding: 1rem;
      overflow-x: auto;
      overflow-y: visible;
    }

    .main.is-keyboard-page .canvas-work {
      display: grid;
      justify-items: center;
      gap: 1rem;
      width: 100%;
      max-width: 100%;
    }

    .main.is-keyboard-page .note-switchboard {
      margin-top: 0;
      max-width: 100%;
      overflow-x: auto;
      padding-bottom: .15rem;
    }

    .theory-page[hidden] {
      display: none;
    }

    .theory-page {
      display: grid;
      gap: 1rem;
      align-content: start;
    }

    .main.is-theory-page .theory-page {
      width: 100%;
      max-width: none;
      min-width: 0;
    }

    .theory-note-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .85rem;
      align-items: start;
      max-width: 48rem;
      padding: 1.1rem;
      border: 1px solid rgba(220, 228, 224, .8);
      border-radius: 10px;
      background: rgba(247, 249, 248, .9);
    }

    .theory-note-card b {
      color: #ffd166;
      font-size: 1.15rem;
      line-height: 1;
    }

    .theory-note-card p {
      margin: 0;
      color: #48534f;
      font-size: 1rem;
      line-height: 1.7;
    }

    .theory-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr);
      gap: 1rem;
      align-items: start;
    }

    .theory-section {
      display: grid;
      gap: .65rem;
      padding: .9rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .theory-section h2,
    .theory-section h3 {
      margin: 0;
      line-height: 1.2;
    }

    .theory-section h2 {
      font-size: 1.35rem;
    }

    .theory-section h3 {
      color: #55615d;
      font-size: .9rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .theory-section p {
      margin: 0;
      color: var(--muted);
      line-height: 1.75;
    }

    .theory-table {
      display: grid;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }

    .theory-row {
      display: grid;
      grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr) minmax(0, 1fr);
      min-height: 2.85rem;
      border-bottom: 1px solid var(--line);
    }

    .theory-row:last-child {
      border-bottom: 0;
    }

    .theory-cell {
      display: grid;
      align-content: center;
      padding: .6rem .7rem;
      border-right: 1px solid var(--line);
      color: #343b38;
      line-height: 1.45;
    }

    .theory-cell:last-child {
      border-right: 0;
    }

    .theory-cell strong {
      font-size: .92rem;
    }

    .theory-cell span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
    }

    .theory-pill-list {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
    }

    .theory-pill {
      padding: .4rem .55rem;
      color: #48534f;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f6faf8;
      font-size: .82rem;
      font-weight: 850;
    }

    .theory-placeholder {
      min-height: 9rem;
      padding: 1rem;
      border: 1px dashed rgba(110, 147, 219, .5);
      border-radius: 8px;
      background: rgba(110, 147, 219, .06);
      color: var(--muted);
      line-height: 1.7;
    }

    /* Theory chapter: Scale */
    .theory-tool-dock {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(28, 45, 41, .05);
    }

    .theory-tool-bar,
    .theory-tool-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: .85rem 1rem;
    }

    .theory-tool-bar > div:first-child,
    .theory-tool-panel-head > div {
      display: grid;
      gap: .2rem;
    }

    .theory-tool-bar strong,
    .theory-tool-panel-head b {
      color: #263531;
      font-size: .9rem;
    }

    .theory-tool-actions {
      display: flex;
      gap: .5rem;
    }

    .theory-tool-actions button,
    .theory-open-full {
      min-height: 2.45rem;
      padding: .5rem .72rem;
      color: #42504c;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbfa;
      font-size: .8rem;
      font-weight: 850;
    }

    .theory-tool-actions button span {
      display: inline-grid;
      place-items: center;
      min-width: 1.7rem;
      min-height: 1.45rem;
      margin-right: .35rem;
      color: #fff;
      border-radius: 5px;
      background: #263531;
      font-size: .66rem;
    }

    .theory-tool-actions button.is-active {
      color: #fff;
      border-color: var(--accent);
      background: var(--accent);
    }

    .theory-tool-panel {
      display: grid;
      gap: .8rem;
      padding: 0 1rem 1rem;
      border-top: 1px solid var(--line);
      background: #f8fbfa;
    }

    .theory-tool-panel-head {
      padding: .8rem 0 0;
    }

    .theory-tool-panel-head span {
      color: var(--muted);
      font-size: .72rem;
    }

    .theory-tool-panel-head > button {
      width: 2rem;
      height: 2rem;
      padding: 0;
      color: #5d6965;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: #fff;
      font-size: 1.15rem;
    }

    .theory-mini-map {
      overflow-x: auto;
      padding: .75rem;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .theory-fretboard-mini {
      display: grid;
      gap: .32rem;
      min-width: 34rem;
      padding: .7rem;
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(0, 169, 157, .045) 1px, transparent 1px), #fbfcfc;
      background-size: 5rem 100%, auto;
    }

    .theory-string {
      display: grid;
      grid-template-columns: repeat(3, 3.05rem);
      justify-content: space-around;
      position: relative;
      min-height: 3.05rem;
    }

    .theory-string > i {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      height: 1px;
      background: #aeb8b4;
    }

    .theory-note-dot,
    .theory-keyboard-mini span {
      display: grid;
      z-index: 1;
      place-items: center;
      width: 3.05rem;
      min-width: 3.05rem;
      aspect-ratio: 1;
      color: #fff;
      border: 0;
      border-radius: 999px;
      background: #00a99d;
      box-shadow: 0 12px 18px rgba(38, 44, 42, .16);
      font-size: 1.02rem;
      font-style: normal;
      font-weight: 900;
    }

    .theory-note-dot.note-c, .theory-keyboard-mini span:nth-child(1), .theory-keyboard-mini span:nth-child(8) { background: #d8c85a; }
    .theory-note-dot.note-d, .theory-keyboard-mini span:nth-child(2) { background: #c98c63; }
    .theory-note-dot.note-e, .theory-keyboard-mini span:nth-child(3) { background: #9a86bc; }
    .theory-note-dot.note-f, .theory-keyboard-mini span:nth-child(4) { background: #6e93db; }
    .theory-note-dot.note-g, .theory-keyboard-mini span:nth-child(5) { background: #7fb39a; }
    .theory-note-dot.note-a, .theory-keyboard-mini span:nth-child(6) { background: #d78479; }
    .theory-note-dot.note-b, .theory-keyboard-mini span:nth-child(7) { background: #5fa7b4; }

    .theory-keyboard-mini {
      display: grid;
      grid-template-columns: repeat(8, 3.05rem);
      gap: .65rem;
      justify-content: center;
      min-width: 31rem;
      padding: 1.1rem;
    }

    .theory-open-full {
      justify-self: end;
      color: #fff;
      border-color: #263531;
      background: #263531;
    }

    .scale-notion-header {
      display: grid;
      gap: 1.2rem;
      padding: clamp(1.5rem, 4vw, 3rem);
      border: 1px solid var(--line);
      border-radius: 16px;
      background: radial-gradient(circle at 88% 12%, rgba(239, 71, 111, .12), transparent 20rem), #fff;
      box-shadow: 0 14px 34px rgba(28, 45, 41, .07);
    }

    .scale-notion-title {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 1rem;
      align-items: start;
    }

    .scale-notion-title > span {
      display: grid;
      place-items: center;
      width: 3.05rem;
      height: 3.05rem;
      border: 1px solid rgba(216, 200, 90, .45);
      border-radius: 12px;
      background: rgba(216, 200, 90, .15);
      font-size: 1.4rem;
    }

    .scale-notion-title small {
      color: var(--accent);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .scale-notion-title h2 {
      margin: .25rem 0 .55rem;
      color: #1e2c29;
      font-size: clamp(2.35rem, 5vw, 4.6rem);
      line-height: 1;
      letter-spacing: -.06em;
    }

    .scale-notion-title p,
    .scale-section-intro {
      max-width: 48rem;
      margin: 0;
      color: #64716d;
      line-height: 1.8;
    }

    .scale-toc {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
    }

    .scale-toc a {
      padding: .45rem .65rem;
      color: #53615d;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fbfa;
      font-size: .75rem;
      font-weight: 850;
      text-decoration: none;
    }

    .scale-toc a:hover {
      color: #fff;
      border-color: var(--accent);
      background: var(--accent);
    }

    .scale-solfege-intro {
      gap: 1rem;
      padding: clamp(1.2rem, 3vw, 2rem);
    }

    .solfege-chromatic {
      display: grid;
      gap: .35rem;
      overflow-x: auto;
      padding: .8rem;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fbfcfc;
    }

    .solfege-chromatic > div {
      display: grid;
      grid-template-columns: 3.2rem repeat(13, minmax(2.6rem, 1fr));
      gap: .25rem;
      min-width: 42rem;
      align-items: center;
    }

    .solfege-chromatic b,
    .solfege-chromatic span {
      display: grid;
      place-items: center;
      min-height: 2.4rem;
      border-radius: 7px;
      font-size: .75rem;
      font-weight: 850;
    }

    .solfege-chromatic b {
      color: #fff;
      background: #273531;
    }

    .solfege-chromatic span {
      color: #52605c;
      border: 1px solid #e0e7e4;
      background: #fff;
    }

    .scale-notion-flow .scale-card-grid {
      grid-template-columns: 1fr;
    }

    .scale-lesson-block {
      scroll-margin-top: 1rem;
      padding: clamp(1rem, 2.5vw, 1.5rem);
    }

    .scale-callout {
      display: grid;
      grid-template-columns: minmax(8rem, .25fr) minmax(0, 1fr);
      gap: 1rem;
      align-items: start;
      padding: 1rem;
      border-left: 4px solid var(--accent);
      border-radius: 8px;
      background: #f5f7f6;
    }

    .scale-card--violet .scale-callout { border-left-color: #9a86bc; }
    .scale-card--coral .scale-callout { border-left-color: #d78479; }
    .scale-card--mint .scale-callout { border-left-color: #7fb39a; }

    .scale-callout > b {
      color: #2d3b37;
      font-size: .82rem;
    }

    .scale-callout p {
      margin: 0;
      color: #5d6a66;
      font-size: .84rem;
      line-height: 1.75;
    }

    .scale-callout em {
      color: #d05f69;
      font-style: normal;
      font-weight: 900;
    }

    .scale-practice-wide {
      padding: 1.4rem;
    }

    .scale-practice-wide ol {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scale-compact-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: .8rem 1rem;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .scale-compact-header > div {
      display: flex;
      align-items: center;
      gap: .7rem;
    }

    .scale-compact-header > div > span {
      font-size: 1.25rem;
    }

    .scale-compact-header h2,
    .scale-compact-header p {
      margin: 0;
    }

    .scale-compact-header h2 {
      color: #202b28;
      font-size: 1.6rem;
      line-height: 1.1;
    }

    .scale-compact-header p,
    .scale-compact-header small {
      color: var(--muted);
      font-size: .72rem;
    }

    .notion-note-chart {
      display: grid;
      gap: .2rem;
      overflow-x: auto;
      padding: .8rem 1rem;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .notion-note-row {
      display: grid;
      grid-template-columns: 3rem repeat(8, minmax(3.05rem, 1fr));
      gap: .25rem;
      min-width: 31rem;
      align-items: center;
      text-align: center;
    }

    .notion-note-row b {
      color: #7b8783;
      font-size: .68rem;
      text-align: left;
    }

    .notion-note-row span {
      display: grid;
      place-items: center;
      min-height: 1.8rem;
      color: #4d5955;
      font-size: .8rem;
      font-weight: 750;
    }

    .notion-note-row--name span {
      min-height: 3.05rem;
      color: #fff;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 6px 12px rgba(38, 44, 42, .12);
      font-size: .95rem;
      font-weight: 900;
    }

    .notion-note-row--name span:nth-of-type(1), .notion-note-row--name span:nth-of-type(8) { background: #d8c85a; }
    .notion-note-row--name span:nth-of-type(2) { background: #c98c63; }
    .notion-note-row--name span:nth-of-type(3) { background: #9a86bc; }
    .notion-note-row--name span:nth-of-type(4) { background: #6e93db; }
    .notion-note-row--name span:nth-of-type(5) { background: #7fb39a; }
    .notion-note-row--name span:nth-of-type(6) { background: #d78479; }
    .notion-note-row--name span:nth-of-type(7) { background: #5fa7b4; }

    .scale-compact-section {
      display: grid;
      gap: .65rem;
      padding: .8rem 1rem;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .scale-compact-section > h3,
    .scale-table-head h3 {
      margin: 0;
      color: #27332f;
      font-size: 1.05rem;
    }

    .scale-solfege-lines {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .35rem .8rem;
      padding: .65rem;
      border-radius: 8px;
      background: #f7f9f8;
    }

    .scale-solfege-lines p {
      margin: 0;
      color: #56635f;
      font-size: .75rem;
      line-height: 1.55;
    }

    .notion-callout {
      display: grid;
      grid-template-columns: 1.4rem minmax(0, 1fr);
      gap: .55rem;
      align-items: start;
      padding: .7rem .8rem;
      border-radius: 8px;
      background: #f5f4f2;
    }

    .notion-callout p {
      margin: 0;
      color: #4f5a56;
      font-size: .8rem;
      line-height: 1.65;
    }

    .notion-callout em {
      color: #68746f;
      font-style: normal;
    }

    .scale-table-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1rem;
      padding-top: .35rem;
    }

    .scale-table-head span {
      color: var(--muted);
      font-size: .68rem;
    }

    .scale-table-head code,
    .scale-family-compact code {
      color: #53615d;
      font-family: ui-monospace, monospace;
      font-size: .72rem;
    }

    .scale-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .scale-reference-table {
      width: 100%;
      min-width: 40rem;
      border-collapse: collapse;
      background: #fff;
      color: #46524e;
      font-size: .76rem;
      text-align: center;
    }

    .scale-reference-table th,
    .scale-reference-table td {
      min-width: 4.5rem;
      padding: .45rem .55rem;
      border-right: 1px solid #e7ecea;
      border-bottom: 1px solid #e7ecea;
    }

    .scale-reference-table tr:last-child th,
    .scale-reference-table tr:last-child td {
      border-bottom: 0;
    }

    .scale-reference-table th:last-child,
    .scale-reference-table td:last-child {
      border-right: 0;
    }

    .scale-reference-table thead th {
      color: #68746f;
      background: #f7f9f8;
      font-weight: 850;
    }

    .scale-reference-table tbody th {
      color: #283531;
      background: #fbfcfc;
      text-align: left;
    }

    .scale-reference-table .is-tonic {
      color: #d65762;
      font-weight: 950;
    }

    .scale-family-compact {
      display: grid;
      gap: .4rem;
    }

    .scale-family-compact details {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .scale-family-compact summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: .65rem .8rem;
      cursor: pointer;
      list-style: none;
    }

    .scale-family-compact details p {
      margin: 0;
      padding: 0 .8rem .7rem;
      color: var(--muted);
      font-size: .76rem;
    }

    .chromatic-track {
      display: grid;
      grid-template-columns: repeat(13, minmax(2.8rem, 1fr));
      gap: .25rem;
      overflow-x: auto;
      padding: .35rem 0 .55rem;
    }

    .chromatic-track > span,
    .flat-solfege-map > span {
      display: grid;
      place-items: center;
      min-height: 3.05rem;
      padding: .25rem;
      color: #fff;
      border-radius: 8px;
      background: #5fa7b4;
      box-shadow: 0 5px 10px rgba(38, 44, 42, .1);
    }

    .chromatic-track > span.is-altered {
      color: #5d6865;
      border: 1px dashed #cfd8d4;
      background: #f5f7f6;
      box-shadow: none;
    }

    .chromatic-track b,
    .flat-solfege-map b {
      font-size: .76rem;
    }

    .chromatic-track small,
    .flat-solfege-map small {
      font-size: .62rem;
      opacity: .78;
    }

    .flat-solfege-map {
      display: grid;
      grid-template-columns: repeat(5, 3.05rem) minmax(16rem, 1fr);
      gap: .35rem;
      align-items: center;
      overflow-x: auto;
    }

    .flat-solfege-map > span {
      color: #5d6865;
      border: 1px solid #e0d8e9;
      background: #f8f4fb;
      box-shadow: none;
    }

    .flat-solfege-map p {
      margin: 0;
      padding-left: .5rem;
      color: var(--muted);
      font-size: .72rem;
      white-space: nowrap;
    }

    .scale-structure-board {
      display: grid;
      gap: .4rem;
      padding: .65rem;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fbfcfc;
    }

    .scale-structure-row {
      display: grid;
      grid-template-columns: 8.5rem minmax(19rem, 1fr) minmax(19rem, 1fr);
      gap: .65rem;
      align-items: center;
      overflow-x: auto;
      padding: .45rem .5rem;
      border-radius: 7px;
      background: #fff;
    }

    .scale-structure-row header {
      display: grid;
      gap: .1rem;
    }

    .scale-structure-row header b {
      color: #2b3733;
      font-size: .8rem;
    }

    .scale-structure-row header small {
      color: var(--muted);
      font-size: .62rem;
    }

    .scale-formula-line,
    .scale-interval-line {
      display: grid;
      grid-template-columns: repeat(7, minmax(2.15rem, 1fr));
      gap: .22rem;
      min-width: 19rem;
    }

    .scale-formula-line span {
      display: grid;
      place-items: center;
      min-height: 2.15rem;
      color: #52605c;
      border: 1px solid #dfe7e4;
      border-radius: 999px;
      background: #fff;
      font-size: .72rem;
      font-weight: 900;
    }

    .scale-formula-line span:first-child {
      color: #fff;
      border-color: var(--accent);
      background: var(--accent);
    }

    .scale-formula-line .is-flat {
      color: #8a668d;
      border-color: #d9c9df;
      background: #f8f4fb;
    }

    .scale-formula-line .is-leading {
      color: #fff;
      border-color: #d78479;
      background: #d78479;
    }

    .scale-formula-line .is-raised {
      color: #426b5a;
      border-color: #bdd9cc;
      background: #edf7f2;
    }

    .scale-interval-line span {
      position: relative;
      padding-top: .42rem;
      color: #72807b;
      font-size: .62rem;
      font-weight: 850;
      text-align: center;
    }

    .scale-interval-line span::before {
      position: absolute;
      top: 0;
      right: .12rem;
      left: .12rem;
      height: 2px;
      border-radius: 2px;
      background: #8cd3ca;
      content: "";
    }

    .scale-interval-line span.is-half::before { background: #d78479; }
    .scale-interval-line span.is-wide::before { height: 3px; background: #9a86bc; }

    .scale-compact-notes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .5rem;
    }

    .scale-compact-notes p {
      margin: 0;
      padding: .65rem .75rem;
      color: #5e6b67;
      border-left: 3px solid #9a86bc;
      border-radius: 6px;
      background: #f8f6fa;
      font-size: .74rem;
      line-height: 1.6;
    }

    .scale-compact-notes p + p {
      border-left-color: #7fb39a;
      background: #f3f8f5;
    }

    .scale-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(19rem, .94fr);
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: center;
      padding: clamp(1.6rem, 4vw, 3.5rem);
      overflow: hidden;
      border: 1px solid rgba(0, 169, 157, .15);
      border-radius: 18px;
      background: radial-gradient(circle at 90% 8%, rgba(216, 200, 90, .27), transparent 15rem), linear-gradient(125deg, #fff 20%, #eefbf9 100%);
      box-shadow: 0 18px 42px rgba(25, 73, 67, .08);
    }

    .theory-eyebrow,
    .scale-section-head span {
      display: block;
      color: var(--accent);
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .scale-hero h2 {
      margin: .55rem 0 .8rem;
      color: #172b29;
      font-size: clamp(2rem, 4.4vw, 4rem);
      line-height: 1.02;
      letter-spacing: -.055em;
    }

    .scale-hero h2 em {
      color: var(--accent);
      font-style: normal;
    }

    .scale-hero p {
      max-width: 35rem;
      margin: 0;
      color: #5c6a66;
      font-size: 1rem;
      line-height: 1.8;
    }

    .scale-hero-map {
      display: grid;
      grid-template-columns: repeat(8, 3.05rem);
      gap: .25rem;
      position: relative;
      align-items: center;
      justify-content: center;
      min-height: 13rem;
      padding: 2.5rem 1rem 2.8rem;
      border: 1px solid rgba(24, 47, 43, .08);
      border-radius: 14px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 12px 26px rgba(35, 91, 83, .11);
    }

    .scale-hero-map::before {
      position: absolute;
      top: 50%;
      right: 1.1rem;
      left: 1.1rem;
      height: 2px;
      background: linear-gradient(90deg, #d8c85a, #7fb39a, #5fa7b4);
      content: "";
    }

    .scale-hero-map span {
      display: grid;
      z-index: 1;
      place-items: center;
      width: 3.05rem;
      min-width: 3.05rem;
      aspect-ratio: 1;
      color: #fff;
      border: 4px solid #fff;
      border-radius: 50%;
      background: #00a99d;
      box-shadow: 0 5px 12px rgba(0, 114, 104, .2);
      font-size: clamp(.72rem, 1.3vw, .95rem);
      font-weight: 900;
    }

    .scale-hero-map span:nth-of-type(1),
    .scale-hero-map span:nth-of-type(8) { background: #d8c85a; }
    .scale-hero-map span:nth-of-type(3) { background: #9a86bc; }
    .scale-hero-map span:nth-of-type(5) { background: #7fb39a; }
    .scale-hero-map b { position: absolute; right: 1.2rem; bottom: .8rem; color: #42635e; font-size: .8rem; letter-spacing: .08em; }

    .scale-section { display: grid; gap: 1rem; padding: .35rem 0; }
    .scale-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
    .scale-section-head h3 { margin: .25rem 0 0; color: #202d2a; font-size: 1.45rem; }
    .scale-section-head p { max-width: 20rem; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }

    .scale-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .scale-card { display: grid; gap: 1rem; padding: 1.15rem; border: 1px solid var(--line); border-top: 4px solid #d8c85a; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(28, 45, 41, .05); }
    .scale-card--violet { border-top-color: #9a86bc; } .scale-card--coral { border-top-color: #d78479; } .scale-card--mint { border-top-color: #7fb39a; }
    .scale-card-head { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
    .scale-card-head span { color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .scale-card-head h3 { margin: .22rem 0 0; color: #273431; font-size: 1.1rem; }
    .scale-card-head b { padding: .4rem .5rem; color: #52605c; border-radius: 6px; background: #f5f8f7; font-family: ui-monospace, monospace; font-size: .7rem; white-space: nowrap; }
    .scale-degrees { display: grid; grid-template-columns: repeat(7, 1fr); gap: .32rem; }
    .scale-degree { display: grid; place-items: center; aspect-ratio: 1; color: #64716d; border: 1px solid #dfe7e4; border-radius: 50%; background: #fff; font-size: .78rem; font-weight: 900; }
    .scale-degree.is-root { color: #fff; border-color: var(--accent); background: var(--accent); }
    .scale-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; color: #77837f; font-size: .67rem; font-weight: 850; text-align: center; }
    .scale-step { position: relative; padding-top: .5rem; } .scale-step::before { position: absolute; top: 0; right: -.1rem; left: -.1rem; height: 2px; background: #9ad8d1; content: ""; } .scale-step.is-half::before { background: #d78479; }
    .scale-card p { margin: 0; color: #65716e; font-size: .84rem; line-height: 1.7; }

    .notion-scale-browser { display: grid; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(28, 45, 41, .05); }
    .notion-scale-browser-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
    .notion-scale-browser-head > div { display: grid; gap: .25rem; }
    .notion-scale-browser-head span { color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
    .notion-scale-browser-head h3 { margin: 0; color: #202d2a; font-size: 1.35rem; }
    .notion-scale-browser-head p { max-width: 36rem; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
    .notion-scale-browser-head label { display: grid; gap: .35rem; min-width: 9rem; color: #64716d; font-size: .7rem; font-weight: 850; }
    .notion-scale-browser-head select { min-height: 2.4rem; padding: 0 .65rem; color: #1f302c; border: 1px solid #cfded9; border-radius: 7px; background: #f8fbfa; font: inherit; font-size: .82rem; }
    .notion-scale-browser-status { margin: 0; padding: .65rem .75rem; color: #2e6f67; border-left: 3px solid var(--accent); border-radius: 5px; background: #f2faf8; font-size: .78rem; font-weight: 800; }
    .notion-scale-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .notion-scale-table-card { display: grid; gap: .65rem; padding: .8rem; border: 1px solid #dfe8e4; border-radius: 10px; background: #fcfdfd; }
    .notion-scale-table-card header { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
    .notion-scale-table-card header div { display: grid; gap: .15rem; }
    .notion-scale-table-card header span { color: #76827e; font-size: .61rem; font-weight: 900; letter-spacing: .09em; }
    .notion-scale-table-card h3 { margin: 0; color: #2a3733; font-size: .96rem; }
    .notion-scale-table-card code { color: #687671; font-size: .64rem; white-space: nowrap; }
    .notion-scale-table-wrap { overflow-x: auto; border: 1px solid #e2e9e6; border-radius: 7px; }
    .notion-scale-table-wrap table { width: 100%; min-width: 25rem; border-collapse: collapse; color: #485651; font-size: .72rem; text-align: center; }
    .notion-scale-table-wrap th, .notion-scale-table-wrap td { min-width: 2.75rem; padding: .48rem .35rem; border-right: 1px solid #e2e9e6; border-bottom: 1px solid #e2e9e6; }
    .notion-scale-table-wrap tr:last-child th, .notion-scale-table-wrap tr:last-child td { border-bottom: 0; }
    .notion-scale-table-wrap th:last-child, .notion-scale-table-wrap td:last-child { border-right: 0; }
    .notion-scale-table-wrap thead th { color: #687671; background: #f4f8f6; font-weight: 900; }
    .notion-scale-table-wrap tbody th.is-root { color: #fff; background: #00a99d; font-weight: 900; }

    .scale-study-shell { display: grid; grid-template-columns: minmax(0, 52rem) minmax(22rem, 1fr); gap: clamp(1.25rem, 2vw, 2.4rem); align-items: start; width: 100%; padding: clamp(.75rem, 1.4vw, 1.15rem); border: 1px solid #dce7e2; border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 22px rgba(28, 45, 41, .05); }
    .scale-study-content { display: grid; gap: 1rem; min-width: 0; }
    .scale-study-header { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; padding: .4rem .3rem 1rem; border-bottom: 1px solid #e1ebe7; border-top: 4px solid #00a99d; }
    .scale-study-header > div { display: grid; gap: .3rem; }
    .scale-study-header > div > span { color: #00a99d; font-size: .68rem; font-weight: 950; letter-spacing: .12em; }
    .scale-study-header h2 { margin: 0; color: #1e2e2a; font-size: 1.55rem; }
    .scale-study-header p { max-width: 42rem; margin: 0; color: #65726d; font-size: .82rem; line-height: 1.65; }
    .scale-topic-lesson { display: grid; grid-template-columns: minmax(11rem, .9fr) minmax(0, 2.1fr); gap: 1rem; padding: 1rem; border: 1px solid #dce9e5; border-radius: 9px; background: linear-gradient(135deg, #f4fbf9, #fff); }
    .scale-topic-lesson > div { display: grid; align-content: start; gap: .35rem; }
    .scale-topic-lesson > div > span { color: #00a99d; font-size: .62rem; font-weight: 950; letter-spacing: .12em; }
    .scale-topic-lesson h3 { margin: 0; color: #283a34; font-size: 1.05rem; line-height: 1.35; }
    .scale-topic-lesson ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
    .scale-topic-lesson li { display: grid; gap: .25rem; padding-left: .65rem; border-left: 2px solid #8ed8cf; }
    .scale-topic-lesson li:nth-child(2) { border-left-color: #d8c85a; }.scale-topic-lesson li:nth-child(3) { border-left-color: #d78479; }
    .scale-topic-lesson b { color: #2e4c44; font-size: .72rem; }.scale-topic-lesson li span { color: #65756e; font-size: .69rem; line-height: 1.55; }
    .scale-curriculum-flow { display: grid; grid-template-columns: 1fr; gap: .8rem; }
    .scale-curriculum-unit { display: grid; gap: .85rem; padding: 1rem; border: 1px solid #dce7e2; border-radius: 9px; background: #fff; }
    .scale-curriculum-unit-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #e5ece9; }
    .scale-curriculum-unit-head > div { display: grid; gap: .13rem; }
    .scale-curriculum-unit-head span { color: #7c8b85; font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
    .scale-curriculum-unit-head h3 { margin: 0; color: #172a24; font-size: 1.28rem; font-weight: 950; line-height: 1.15; }
    .scale-curriculum-unit-head small { color: #6f7d77; font-size: .72rem; }
    .scale-curriculum-unit-head code { padding: .38rem .58rem; color: #3d554e; border: 1px solid #e2eae7; border-radius: 5px; background: #f2f6f4; font-size: .82rem; font-weight: 850; letter-spacing: .04em; white-space: nowrap; }
    .scale-unit-identity > div { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
    .scale-unit-controls { display: grid; justify-items: end; gap: .35rem; }
    .scale-unit-primary-actions, .scale-load-actions { display: flex; justify-content: end; align-items: end; gap: .35rem; }
    .scale-unit-controls label { display: grid; gap: .22rem; color: #6c7a74; font-size: .62rem; font-weight: 850; }
    .scale-unit-controls select, .scale-unit-controls button { min-height: 2rem; padding: 0 .55rem; border: 1px solid #ccdcd7; border-radius: 6px; background: #f8fbfa; color: #2d403a; font: inherit; font-size: .7rem; font-weight: 850; }
    .scale-unit-primary-actions > button { color: #fff; border-color: #273b36; background: #273b36; }
    .scale-load-actions button { min-height: 1.72rem; padding-inline: .48rem; color: #31564e; border-color: #bad5ce; background: #f3faf8; font-size: .62rem; }
    .scale-load-actions button::before { display: inline-block; margin-right: .28rem; font-size: .58rem; font-weight: 950; }.scale-load-actions button:first-child::before { content: "GT"; }.scale-load-actions button:last-child::before { content: "KB"; }
    .scale-unit-lesson { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; padding: .7rem .8rem; border-left: 3px solid #00a99d; border-radius: 0 7px 7px 0; background: #f3faf8; }
    .scale-unit-lesson b { color: #007f76; font-size: .67rem; font-weight: 950; letter-spacing: .06em; white-space: nowrap; }.scale-unit-lesson p { margin: 0; color: #53665f; font-size: .72rem; font-weight: 700; line-height: 1.65; }
    .scale-distance-readout { display: grid; gap: 0; overflow-x: auto; padding: .15rem 1.4rem .25rem; }
    .scale-distance-degrees, .scale-step-tape { display: grid; grid-template-columns: repeat(12, minmax(3.1rem, 1fr)); min-width: 37.2rem; }
    .scale-distance-degrees { padding-bottom: .62rem; }
    .scale-distance-degrees b { position: relative; z-index: 1; display: grid; grid-column: var(--slot); justify-self: start; place-items: center; gap: .13rem; min-width: 2.5rem; color: #334a43; font-size: .9rem; font-weight: 950; transform: translateX(-50%); }
    .scale-distance-degrees b::after { position: absolute; left: 50%; bottom: -.64rem; width: 2px; height: .64rem; background: #8dd4cc; content: ""; transform: translateX(-50%); }
    .scale-distance-degrees em { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border: 1px solid #cbdcd6; border-radius: 50%; background: #fff; font-style: normal; }
    .scale-distance-degrees b.is-characteristic em { color: #c45f57; font-weight: 950; }
    .scale-step-tape { align-items: end; }
    .scale-step-tape span { display: grid; grid-column: var(--slot) / span var(--step); gap: .18rem; min-width: 0; margin: 0; padding: .48rem .18rem .52rem; color: #526b63; border-left: 2px solid #8dd4cc; border-bottom: 3px solid #69c9be; background: #f0f8f6; text-align: center; }
    .scale-step-tape span.is-half { color: #526b63; border-left-color: #8dd4cc; border-bottom-color: #69c9be; background: rgba(223, 103, 94, .13); }
    .scale-step-tape b { font-size: .74rem; font-weight: 950; }
    .scale-key-application { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .75rem; border: 1px solid #edf2f0; border-radius: 7px; background: #fff; overflow-x: auto; }
    .scale-key-application strong { display: grid; gap: .2rem; color: #315049; font-size: .8rem; }.scale-key-application strong small { color: #81918a; font-size: .56rem; letter-spacing: .08em; }
    .scale-key-application > div { display: grid; grid-template-columns: repeat(12, minmax(3.25rem, 1fr)); align-items: center; min-width: 39rem; padding: .3rem 0; background: linear-gradient(transparent calc(50% - 1px), #aeb9b5 calc(50% - 1px), #aeb9b5 calc(50% + 1px), transparent calc(50% + 1px)); }
    .scale-key-application span { display: grid; grid-column: var(--slot); place-items: center; justify-self: center; gap: .15rem; width: 3.25rem; min-width: 3.25rem; color: #fff; background: transparent; font-size: .92rem; font-weight: 900; }.scale-key-application span i { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%; background: #7b8783; box-shadow: 0 5px 11px rgba(28, 45, 41, .15); font-style: normal; }
    .scale-key-application .note-c i { background: #d8c85a; }.scale-key-application .note-d i { background: #c98c63; }.scale-key-application .note-e i { background: #9a86bc; }.scale-key-application .note-f i { background: #6e93db; }.scale-key-application .note-g i { background: #7fb39a; }.scale-key-application .note-a i { background: #d78479; }.scale-key-application .note-b i { background: #5fa7b4; }
    .chord-tone-application { overflow: hidden; }
    .chord-tone-application > .chord-tone-axis { position: relative; display: block; min-width: 0; width: 100%; height: 5.6rem; padding: 0; background: none; }
    .chord-tone-axis-plot { position: absolute; top: 0; right: 1.75rem; bottom: 0; left: 1.75rem; }
    .chord-tone-axis-plot::before { position: absolute; top: 50%; right: 0; left: 0; z-index: 0; height: 2px; background: #aeb9b5; content: ""; transform: translateY(-50%); }
    .chord-tone-axis-ticks,
    .chord-tone-axis-markers { position: absolute; inset: 0; }
    .chord-tone-axis-ticks i { position: absolute; top: 50%; left: calc(var(--position) * 100% / 12); z-index: 1; display: block; width: 2px; height: .78rem; border-radius: 2px; background: #c5cecb; transform: translate(-50%, -50%); }
    .chord-tone-axis-ticks i.is-natural { width: 3px; height: 2.15rem; background: #96a5a0; }
    .chord-tone-axis-ticks i.is-root { width: 3px; height: 4.8rem; background: #51635d; }
    .chord-tone-axis-marker { position: absolute; top: 50%; left: calc(var(--position) * 100% / 12); z-index: 2; display: grid; grid-column: auto; place-items: center; justify-self: auto; width: 3.25rem; min-width: 3.25rem; color: #fff; background: transparent; transform: translate(-50%, -50%); }
    .chord-tone-axis-marker > i { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%; background: #7b8783; box-shadow: 0 5px 11px rgba(28, 45, 41, .15); font-style: normal; }
    .chord-tone-axis-marker.is-root > i { box-shadow: 0 5px 11px rgba(28, 45, 41, .15), 0 0 0 3px #fff, 0 0 0 4px rgba(81, 99, 93, .34); }
    .scale-complete-table-wrap { overflow-x: auto; border: 1px solid #e0e9e5; border-radius: 7px; }
    .scale-complete-table { width: 100%; min-width: 38rem; border-collapse: collapse; color: #4d5d57; font-size: .73rem; text-align: center; }
    .scale-complete-table th, .scale-complete-table td { min-width: 3.3rem; padding: .48rem .35rem; border-right: 1px solid #e0e9e5; border-bottom: 1px solid #e0e9e5; }
    .scale-complete-table thead th { color: #67766f; background: #f3f7f5; font-weight: 900; }.scale-complete-table tbody th { color: #263a34; background: #fafcfb; text-align: left; }.scale-complete-table tr:last-child th, .scale-complete-table tr:last-child td { border-bottom: 0; }.scale-complete-table th:last-child, .scale-complete-table td:last-child { border-right: 0; }

    .scale-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr); gap: 1rem; }
    .solfege-card, .scale-practice-card { display: grid; gap: .8rem; padding: 1.25rem; border-radius: 14px; }
    .solfege-card { border: 1px solid var(--line); background: #fff; } .solfege-card h3, .scale-practice-card h3 { margin: 0; font-size: 1.15rem; }
    .solfege-row { display: grid; grid-template-columns: 2.3rem 1fr; gap: .65rem; align-items: center; padding: .7rem; border-radius: 8px; background: #f6faf8; }
    .solfege-row b { display: grid; place-items: center; width: 2rem; height: 2rem; color: #fff; border-radius: 50%; background: #5fa7b4; } .solfege-row + .solfege-row b { background: #9a86bc; }
    .solfege-row p { margin: 0; color: #586662; font-size: .78rem; font-weight: 750; line-height: 1.6; }
    .scale-practice-card { color: #edf7f4; background: #1d2e2b; box-shadow: 0 12px 28px rgba(19, 40, 36, .2); } .scale-practice-card > span { color: #7fe0d6; font-size: .72rem; font-weight: 900; letter-spacing: .1em; } .scale-practice-card h3 { color: #fff; font-size: 1.45rem; } .scale-practice-card ol { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; color: #cce2de; font-size: .82rem; line-height: 1.55; }
    .scale-source-note { margin: 0; color: #7a8782; font-size: .72rem; text-align: right; }
    .scale-source-note a { color: #397c74; font-weight: 800; }

    .scale-instrument-window { position: sticky; top: 1rem; display: grid; gap: 1rem; min-width: 0; }
    .scale-instrument-window:empty { display: none; }
    .scale-workspace-slot { display: grid; min-width: 0; overflow: hidden; border: 1px solid #dce6e2; border-radius: 9px; background: #fff; }
    .scale-workspace-slot > header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2.1rem; padding: .38rem .65rem; color: #edf7f4; background: #243a34; }
    .scale-workspace-slot > header > div { display: flex; align-items: center; gap: .48rem; }
    .scale-workspace-slot > header b { font-size: .68rem; letter-spacing: .035em; }.scale-workspace-slot > header span { color: #bcd1cb; font-size: .62rem; font-weight: 800; }
    .scale-workspace-slot > header button { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; padding: 0; color: #e8f3ef; border: 1px solid rgba(232, 243, 239, .28); border-radius: 4px; background: rgba(255, 255, 255, .07); cursor: pointer; }
    .scale-workspace-slot > header button i { font-size: .72rem; font-style: normal; line-height: 1; transition: transform .18s ease; }.scale-workspace-slot.is-collapsed > header button i { transform: rotate(180deg); }
    .scale-workspace-canvas { min-width: 0; min-height: 18rem; padding: .75rem; overflow: hidden; background: #fff; }
    .scale-original-map.stage { --board: #fff; --fret: #e0e2e3; --string: #8f9492; --board-ink: #1f2423; --board-muted: rgba(31, 36, 35, .62); --board-label-bg: rgba(31, 36, 35, .06); width: 100%; max-width: none; padding: .55rem; border: 1px solid #e3eae7; border-radius: 7px; background: #fff; box-shadow: none; }
    .scale-original-map .instrument-canvas { padding: 0 0 .25rem; overflow-x: auto; }
    .fretboard.scale-loaded-fretboard { --row-height: 3.25rem; grid-template-columns: 3.2rem 1.2rem repeat(12, 3.3rem); grid-template-rows: repeat(6, var(--row-height)) 1.65rem; width: 44rem; min-width: 44rem; max-width: 44rem; }
    .fretboard.scale-loaded-fretboard::before { left: 4.4rem; width: 39.6rem; }
    .fretboard.scale-loaded-fretboard .marker { width: 2.45rem; min-width: 2.45rem; font-size: .75rem; }.fretboard.scale-loaded-fretboard .string-label { width: 2rem; min-width: 2rem; font-size: .75rem; pointer-events: none; }.fretboard.scale-loaded-fretboard .nut-bar { width: .42rem; }
    .scale-loaded-fret-numbers { display: grid; grid-row: 7; grid-column: 3 / 15; grid-template-columns: repeat(12, 3.3rem); align-self: center; color: #7d8985; font-size: .58rem; font-weight: 850; text-align: center; }.scale-loaded-fret-numbers span:nth-child(1) { grid-column: 3; }.scale-loaded-fret-numbers span:nth-child(2) { grid-column: 5; }.scale-loaded-fret-numbers span:nth-child(3) { grid-column: 7; }.scale-loaded-fret-numbers span:nth-child(4) { grid-column: 9; }.scale-loaded-fret-numbers span:nth-child(5) { grid-column: 12; }
    .keyboard-map.scale-loaded-keyboard { --key-unit: 4rem; --key-height: 14rem; width: calc(var(--white-count) * var(--key-width) + .9rem); min-width: calc(var(--white-count) * var(--key-width) + .9rem); height: var(--key-height); overflow: hidden; background: #f7faf9; box-shadow: 0 12px 26px rgba(38, 44, 42, .07); }
    .scale-loaded-keyboard .piano-key.black.is-edge-start,
    .scale-loaded-keyboard .piano-key.black.is-edge-end { pointer-events: none; }
    .scale-loaded-keyboard .piano-key.black.is-edge-start { clip-path: inset(0 0 0 50%); }
    .scale-loaded-keyboard .piano-key.black.is-edge-end { clip-path: inset(0 50% 0 0); }
    .scale-loaded-keyboard .marker { width: 2.45rem; min-width: 2.45rem; font-size: .78rem; }.scale-loaded-keyboard .piano-key.black .marker { width: 1.9rem; min-width: 1.9rem; font-size: .65rem; }
    .scale-workspace-slot[data-scale-workspace="fretboard"] { width: fit-content; max-width: 100%; justify-self: start; }
    .scale-workspace-slot[data-scale-workspace="fretboard"] .scale-workspace-canvas, .scale-workspace-slot[data-scale-workspace="fretboard"] .scale-original-map.stage { width: fit-content; max-width: 100%; }
    .scale-workspace-slot[data-scale-workspace="keyboard"] { width: fit-content; max-width: 100%; justify-self: start; }
    .scale-workspace-slot[data-scale-workspace="keyboard"] .scale-workspace-canvas, .scale-workspace-slot[data-scale-workspace="keyboard"] .scale-original-map.stage { width: fit-content; max-width: 100%; }

    .chord-curriculum-flow { display: grid; gap: .8rem; }
    .chord-family-block { display: grid; gap: .8rem; }
    .chord-family-block + .chord-family-block { margin-top: .2rem; padding-top: .9rem; border-top: 1px solid #dfe9e5; }
    .chord-family-intro { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.7fr); gap: 1rem; align-items: end; padding: .2rem .25rem; }
    .chord-family-intro > div { display: grid; gap: .12rem; }.chord-family-intro span { color: #00a99d; font-size: .6rem; font-weight: 950; letter-spacing: .11em; }.chord-family-intro h3 { margin: 0; color: #1d302a; font-size: 1.2rem; }.chord-family-intro small { color: #76837e; font-size: .68rem; }
    .chord-family-intro p { margin: 0; color: #63726d; font-size: .72rem; line-height: 1.6; }
    .chord-curriculum-unit .scale-distance-readout { padding-top: .2rem; }
    .chord-step-tape { min-height: 3.25rem; }
    .chord-complete-table { min-width: 28rem; }
    .chord-family-section { display: grid; gap: .8rem; min-width: 0; padding: 1rem; border: 1px solid #dce7e2; border-radius: 9px; background: #fff; }
    .chord-family-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #e5ece9; }
    .chord-family-head > div:first-child { display: grid; gap: .14rem; }
    .chord-family-head span { color: #7c8b85; font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
    .chord-family-head h3 { margin: 0; color: #172a24; font-size: 1.28rem; font-weight: 950; line-height: 1.15; }
    .chord-family-head small { color: #6f7d77; font-size: .72rem; }
    .chord-family-head code { padding: .38rem .58rem; color: #3d554e; border: 1px solid #e2eae7; border-radius: 5px; background: #f2f6f4; font-size: .82rem; font-weight: 850; letter-spacing: .04em; white-space: nowrap; }
    .chord-family-lesson { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .7rem .8rem; border-left: 3px solid #00a99d; border-radius: 5px; background: #f3faf8; }
    .chord-family-lesson b { color: #287066; font-size: .69rem; letter-spacing: .04em; }.chord-family-lesson p { margin: 0; color: #5e7069; font-size: .72rem; line-height: 1.6; }
    .chord-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #dfe8e4; border-radius: 7px; }
    .chord-notion-table { width: 100%; min-width: 63rem; border-collapse: collapse; color: #4d5d57; font-size: .69rem; text-align: center; }
    .chord-notion-table th, .chord-notion-table td { padding: .55rem .48rem; border-right: 1px solid #e0e9e5; border-bottom: 1px solid #e0e9e5; vertical-align: middle; }
    .chord-notion-table th:last-child, .chord-notion-table td:last-child { border-right: 0; }.chord-notion-table tbody tr:last-child th, .chord-notion-table tbody tr:last-child td { border-bottom: 0; }
    .chord-notion-table thead th { color: #64736d; background: #f2f7f5; font-size: .62rem; font-weight: 950; letter-spacing: .025em; white-space: nowrap; }
    .chord-notion-table tbody tr:hover { background: #fbfdfc; }
    .chord-symbol { color: #1f3c35; font-size: .78rem; white-space: nowrap; }.chord-name { display: block; color: #233832; font-size: .75rem; white-space: nowrap; }.chord-name + small { display: block; margin-top: .16rem; color: #82908b; font-size: .56rem; white-space: nowrap; }
    .chord-tone-stack { display: flex; justify-content: center; gap: .26rem; min-width: 10.2rem; }
    .chord-tone { display: grid; gap: .1rem; place-items: center; min-width: 2.15rem; padding: .28rem .25rem; border: 1px solid #dce7e3; border-radius: 6px; background: #fff; }
    .chord-tone b { color: #40534d; font-size: .67rem; }.chord-tone i { color: #74837d; font-size: .57rem; font-style: normal; font-weight: 800; }
    .chord-tone.is-root { border-color: #91d4cc; }.chord-tone.is-root b { color: #008f84; }.chord-tone.is-characteristic { border-color: #edc1bd; background: #fff8f7; }.chord-tone.is-characteristic b { color: #bd665d; }
    .chord-row-controls { display: grid; gap: .38rem; min-width: 10.2rem; text-align: left; }
    .chord-row-controls label { display: grid; grid-template-columns: 2.1rem 1fr; gap: .35rem; align-items: center; color: #64756e; font-size: .58rem; font-weight: 900; }
    .chord-row-controls select, .chord-diatonic-controls select { min-height: 1.85rem; padding: 0 .45rem; color: #203832; border: 1px solid #cdded8; border-radius: 5px; background: #f9fbfa; font-size: .65rem; font-weight: 800; }
    .chord-row-controls > div { display: flex; gap: .3rem; }.chord-row-controls button, .chord-diatonic-controls button { min-height: 1.85rem; padding: 0 .45rem; color: #275d55; border: 1px solid #bcd9d2; border-radius: 5px; background: #f5fbf9; font-size: .56rem; font-weight: 900; cursor: pointer; white-space: nowrap; }.chord-row-controls button:hover, .chord-diatonic-controls button:hover { border-color: #00a99d; background: #eaf8f5; }
    .chord-diatonic-section { margin-top: .8rem; }.chord-diatonic-controls { display: flex; gap: .38rem; align-items: end; }.chord-diatonic-controls label { display: grid; gap: .22rem; color: #65766f; font-size: .57rem; font-weight: 900; }.chord-diatonic-controls select { min-width: 5.2rem; }
    .chord-diatonic-table { min-width: 66rem; }.chord-diatonic-table tbody th { color: #203830; background: #fafcfb; text-align: left; }.chord-diatonic-table td b { display: block; color: #2b443d; font-size: .72rem; }.chord-diatonic-table td small { display: block; margin-top: .13rem; color: #87938f; font-size: .54rem; }
    .chord-status { display: inline-flex; padding: .24rem .4rem; color: #3e6e65; border-radius: 999px; background: #edf7f4; font-size: .56rem; font-weight: 900; letter-spacing: .04em; }
    .scale-workspace-slot[data-chord-workspace="fretboard"], .scale-workspace-slot[data-chord-workspace="keyboard"] { width: fit-content; max-width: 100%; justify-self: start; }
    .scale-workspace-slot[data-chord-workspace] .scale-workspace-canvas, .scale-workspace-slot[data-chord-workspace] .scale-original-map.stage { width: fit-content; max-width: 100%; }

    @media (max-width: 1320px) {
      .scale-study-shell { grid-template-columns: minmax(0, 52rem); }
      .scale-instrument-window { position: static; max-width: 52rem; }
    }

    @media (max-width: 760px) {
      .scale-study-shell { padding: .8rem; }
      .scale-topic-lesson { grid-template-columns: 1fr; }
      .scale-topic-lesson ol { grid-template-columns: 1fr; }
      .scale-key-application { grid-template-columns: 1fr; }
      .scale-curriculum-unit-head { flex-direction: column; }
      .scale-unit-controls { justify-items: start; }
      .chord-family-head { flex-direction: column; }
      .chord-family-intro { grid-template-columns: 1fr; gap: .35rem; }
      .chord-family-lesson { grid-template-columns: 1fr; gap: .25rem; }
      .chord-diatonic-controls { align-items: end; }
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem;
      align-items: end;
    }

    .crumbs {
      margin: 0 0 .35rem;
      color: var(--muted);
    }

    h1 {
      margin: 0;
      font-size: clamp(2rem, 4vw, 4.2rem);
      line-height: .96;
      letter-spacing: 0;
    }

    .hero p {
      max-width: 44rem;
      margin: .65rem 0 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .hero-actions {
      display: grid;
      gap: .65rem;
      justify-items: end;
    }

    .page-zoom {
      display: inline-grid;
      grid-template-columns: 2.2rem 4.1rem 2.2rem;
      align-items: center;
      gap: .25rem;
      width: 9.6rem;
      padding: .25rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 10px 22px rgba(21, 29, 27, .06);
    }

    .page-zoom button {
      min-height: 2rem;
      border: 0;
      border-radius: 6px;
      color: var(--ink);
      background: #edf3f0;
      font-weight: 900;
    }

    .page-zoom output {
      color: var(--muted);
      font-size: .86rem;
      font-weight: 900;
      text-align: center;
    }

    .toolbar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(7.2rem, max-content));
      gap: .55rem .65rem;
      align-items: start;
      justify-content: start;
      position: relative;
      padding: .68rem 11rem .68rem .68rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .86);
      box-shadow: 0 10px 28px rgba(21, 29, 27, .07);
    }

    .control {
      display: grid;
      gap: .28rem;
      width: min(12.5rem, 100%);
      min-width: 7.2rem;
    }

    .control:has(#tuning-preset) {
      width: 13.5rem;
    }

    .control:has(#board-theme) {
      width: 10rem;
    }

    .control:has(#display-scale),
    .control:has(#aspect-scale) {
      width: 10.5rem;
    }

    .page-zoom-control {
      position: absolute;
      top: .68rem;
      right: .68rem;
      z-index: 2;
      width: 9.6rem;
      min-width: 9.6rem;
    }

    .control label {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
    }

    .control select,
    .control input {
      width: 100%;
      min-height: 2.28rem;
      padding: 0 .62rem;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      outline: none;
    }

    .range-row {
      display: grid;
      grid-template-columns: 1fr 3.2rem;
      align-items: center;
      gap: .45rem;
    }

    .range-value {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 800;
      text-align: right;
    }

    .segmented {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .25rem;
      padding: .25rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f2f6f4;
    }

    .segmented button {
      min-height: 1.95rem;
      color: var(--muted);
      border: 0;
      border-radius: 6px;
      background: transparent;
    }

    .segmented button.is-active {
      color: #fff;
      background: var(--accent);
    }

    .name-toggle {
      grid-template-columns: repeat(4, 1fr);
    }

    .sound-toggle {
      grid-template-columns: repeat(2, 1fr);
    }

    .tag-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .25rem;
      min-height: 2.45rem;
      padding: .25rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f2f6f4;
    }

    .tag-options button {
      min-height: 1.95rem;
      color: var(--muted);
      border: 1px solid transparent;
      border-radius: 6px;
      background: rgba(255, 255, 255, .62);
      font-size: .82rem;
      font-weight: 900;
    }

    .tag-options button.is-active {
      color: #fff;
      border-color: transparent;
      background: var(--accent);
    }

    .tag-options button.is-disabled {
      color: rgba(93, 106, 101, .34);
      border-color: rgba(220, 228, 224, .5);
      background: rgba(255, 255, 255, .42);
      cursor: not-allowed;
    }

    .tag-options:has(button:disabled) {
      border-color: rgba(220, 228, 224, .65);
      background: rgba(242, 246, 244, .52);
      filter: grayscale(.25);
      opacity: .72;
    }

    .panel-shell {
      padding: .85rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 10px 28px rgba(21, 29, 27, .06);
    }

    .panel-title {
      display: flex;
      align-items: baseline;
      gap: .65rem;
      margin-bottom: .7rem;
    }

    .panel-title strong {
      color: var(--ink);
      font-size: .9rem;
      letter-spacing: .08em;
    }

    .panel-title span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
    }

    .pattern-grid,
    .layer-grid {
      display: grid;
      gap: .65rem;
    }

    .pattern-panel {
      display: grid;
      grid-template-columns: minmax(34rem, .95fr) minmax(26rem, 1.05fr);
      gap: .75rem 1rem;
      align-items: stretch;
    }

    .pattern-panel > .panel-title {
      grid-column: 1 / -1;
      margin-bottom: 0;
    }

    .pattern-grid {
      grid-template-columns: repeat(4, minmax(9rem, 1fr));
    }

    .layer-row {
      display: grid;
      grid-template-columns: 4.2rem 5.8rem 5.6rem minmax(8.3rem, 1fr) minmax(8.5rem, 1fr) 5.2rem;
      align-items: end;
      gap: .45rem;
      padding: .55rem;
      border: 1px solid rgba(110, 147, 219, .2);
      border-radius: 8px;
      background: rgba(247, 250, 249, .74);
    }

    .layer-row[data-layer-row="b"] {
      border-color: rgba(0, 169, 157, .2);
    }

    .layer-row.is-muted {
      opacity: .58;
    }

    .pattern-grid label,
    .layer-row label {
      display: grid;
      gap: .28rem;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
    }

    .layer-enable {
      place-items: center;
      align-self: stretch;
      min-height: 2.35rem;
      color: #fff;
      border-radius: 8px;
      background: #6e93db;
    }

    .layer-row[data-layer-row="b"] .layer-enable {
      background: #00a99d;
    }

    .layer-enable input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .layer-enable span {
      display: grid;
      place-items: center;
      width: 3.35rem;
      aspect-ratio: 1;
      border-radius: 8px;
      font-size: .82rem;
      font-weight: 900;
    }

    .pattern-grid select,
    .layer-row select,
    .formula-output {
      min-height: 2.35rem;
      padding: 0 .62rem;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .formula-output {
      overflow: hidden;
      white-space: nowrap;
      color: #51605c;
      font-size: .86rem;
      font-weight: 900;
      text-overflow: ellipsis;
    }

    .form-summary {
      display: grid;
      min-height: 100%;
    }

    .form-summary-row {
      display: grid;
      grid-template-columns: 3.35rem minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: .18rem .7rem;
      align-content: center;
      padding: .82rem .95rem;
      border: 1px solid rgba(0, 169, 157, .22);
      border-radius: 8px;
      background:
        linear-gradient(120deg, rgba(0, 169, 157, .1), rgba(255, 209, 102, .11) 48%, rgba(255, 255, 255, .82)),
        #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 22px rgba(21, 29, 27, .055);
    }

    .form-summary-row span {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      color: #007d75;
      font-size: .78rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .form-summary-row strong {
      align-self: end;
      min-width: 0;
      color: #172321;
      font-size: clamp(1.35rem, 1.85vw, 2.28rem);
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .form-summary-row output {
      align-self: start;
      color: #59615e;
      font-size: clamp(1.08rem, 1.5vw, 1.48rem);
      font-weight: 950;
      letter-spacing: .02em;
    }

    .stage {
      min-width: 0;
      overflow: auto;
      padding: 1.25rem;
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, .08);
      background: #ffffff;
      box-shadow: var(--shadow);
    }

    .stage.theme-white {
      --board: #ffffff;
      --fret: #e0e2e3;
      --string: #8f9492;
      --board-ink: #1f2423;
      --board-muted: rgba(31, 36, 35, .62);
      --board-label-bg: rgba(31, 36, 35, .06);
    }

    .stage.theme-ebony {
      --board: #141817;
      --fret: rgba(220, 232, 228, .58);
      --string: rgba(245, 248, 247, .72);
      --board-ink: #f4faf8;
      --board-muted: rgba(244, 250, 248, .62);
      --board-label-bg: rgba(255, 255, 255, .08);
    }

    .stage.theme-rosewood {
      --board: #4a251c;
      --fret: rgba(255, 231, 212, .48);
      --string: rgba(255, 245, 235, .66);
      --board-ink: #fff3ea;
      --board-muted: rgba(255, 243, 234, .66);
      --board-label-bg: rgba(255, 255, 255, .08);
    }

    .stage.theme-maple {
      --board: #e7c889;
      --fret: rgba(92, 62, 30, .34);
      --string: rgba(67, 49, 31, .56);
      --board-ink: #2b2115;
      --board-muted: rgba(43, 33, 21, .62);
      --board-label-bg: rgba(43, 33, 21, .08);
    }

    .canvas-work {
      min-width: 0;
    }

    .stage-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(13rem, 16vw, 17rem);
      align-items: start;
      gap: 1rem;
      min-width: 0;
    }

    .instrument-canvas {
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      padding: .2rem 0 .75rem;
      scrollbar-gutter: stable;
    }

    .palette-legend {
      display: grid;
      gap: .7rem;
      padding-top: .1rem;
      color: #4c5350;
      font-size: .92rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .palette-legend.is-mono .legend-row:not(.mono-legend-row) {
      display: none;
    }

    .palette-title {
      display: grid;
      gap: .18rem;
      margin-bottom: .35rem;
      color: #151b1f;
    }

    .palette-title strong {
      font-size: 1rem;
    }

    .palette-title span {
      color: #6d7773;
      font-size: .78rem;
      font-weight: 700;
    }

    .legend-row {
      display: grid;
      grid-template-columns: 2.15rem 4.8rem 2.3rem;
      align-items: center;
      gap: .6rem;
    }

    .legend-dot {
      display: grid;
      place-items: center;
      width: 2rem;
      aspect-ratio: 1;
      color: #fff;
      border: 0;
      border-radius: 999px;
      background: var(--legend-color, #9da5aa);
      box-shadow: 0 10px 18px rgba(38, 44, 42, .14);
      font-weight: 900;
      cursor: pointer;
    }

    .legend-picker {
      width: 2.3rem;
      height: 1.7rem;
      padding: 0;
      border: 1px solid #d8ddda;
      border-radius: 6px;
      background: #fff;
    }

    .mono-legend-row {
      display: none;
    }

    .palette-legend.is-mono .mono-legend-row {
      display: grid;
    }

    .mono-legend-label {
      display: grid;
      place-items: center;
      width: 2rem;
      aspect-ratio: 1;
      color: #4f5e5a;
      border: 1px solid #dce4e0;
      border-radius: 8px;
      background: #fff;
      font-size: .78rem;
      font-weight: 950;
    }

    .palette-set-dock {
      display: flex;
      justify-content: flex-start;
      margin-top: .25rem;
    }

    .fretboard {
      --strings: 6;
      --frets: 12;
      --row-height: 4.55rem;
      display: grid;
      grid-template-columns: 3.5rem 1.9rem repeat(12, minmax(4.2rem, 1fr));
      grid-template-rows: repeat(var(--strings), var(--row-height)) 2.2rem;
      align-items: center;
      min-width: max(66rem, calc((var(--frets) + 2) * 4.6rem));
      border-radius: 8px;
      background: transparent;
      position: relative;
    }

    .fretboard::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 5.4rem;
      top: calc(var(--row-height) / 2);
      width: var(--board-width, calc(100% - 5.4rem));
      height: calc((var(--strings) - 1) * var(--row-height));
      background: var(--board);
    }

    .keyboard-map {
      --key-unit: 7rem;
      --key-width: calc(var(--key-unit) * var(--keyboard-aspect, 1));
      --key-height: 17rem;
      --white-count: 14;
      position: relative;
      justify-self: start;
      width: calc(var(--white-count) * var(--key-width) + .9rem);
      min-width: calc(var(--white-count) * var(--key-width) + .9rem);
      height: calc(var(--key-height, 15.5rem) * var(--display-scale));
      padding: .45rem .45rem 1.25rem;
      border: 1px solid #dce4e0;
      border-radius: 8px;
      background: #f7faf9;
      box-shadow: 0 16px 34px rgba(38, 44, 42, .08);
    }

    .keyboard-sound-control {
      min-height: 2rem;
      padding: 0 .75rem;
      color: #fff;
      border: 0;
      border-radius: 5px;
      background: #00a99d;
      font-size: .68rem;
      font-weight: 950;
      letter-spacing: .04em;
      box-shadow: 0 5px 12px rgba(0, 169, 157, .22);
    }

    .keyboard-sound-dock {
      display: flex;
      justify-content: flex-start;
      width: fit-content;
      margin-top: .75rem;
      padding: .45rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(38, 44, 42, .06);
    }

    .keyboard-sound-control.is-off {
      color: #69736f;
      background: #e7ece9;
      box-shadow: none;
    }

    .piano-white-deck {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(var(--white-count), var(--key-width));
      height: 100%;
      border: 1px solid #d4ded9;
      border-radius: 8px;
      overflow: hidden;
      background: linear-gradient(#ffffff 0%, #ffffff 82%, #f3f7f5 100%);
      box-shadow: inset 0 -10px 18px rgba(38, 44, 42, .035);
    }

    .piano-key {
      position: relative;
      display: grid;
      align-items: end;
      justify-items: center;
      border: 0;
      background: #fff;
      color: #1f2423;
      font-weight: 900;
    }

    .piano-key.white {
      min-height: 100%;
      border-right: 1px solid #dce4e0;
      box-shadow: inset 0 -1px 0 rgba(38, 44, 42, .08);
      padding: 0 .35rem .85rem;
    }

    .piano-key.white:last-child {
      border-right: 0;
    }

    .piano-key.black {
      position: absolute;
      z-index: 4;
      top: .45rem;
      left: calc(.45rem + (var(--black-x) * var(--key-width)));
      width: calc(var(--key-width) * .62);
      height: calc(62% - .45rem);
      color: #edf7f4;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 0 0 7px 7px;
      background: #171b1a;
      box-shadow: 0 12px 22px rgba(21, 29, 27, .28);
      transform: translateX(-50%);
    }

    .piano-key .marker {
      width: clamp(calc(2.35rem * var(--display-scale)), calc(var(--key-width) * .58 * var(--display-scale)), calc(4.2rem * var(--display-scale)));
      min-width: calc(2.15rem * var(--display-scale));
      margin-bottom: .95rem;
      font-size: clamp(calc(.88rem * var(--display-scale)), calc(var(--key-width) * .18 * var(--display-scale)), calc(1.16rem * var(--display-scale)));
    }

    .piano-key.black .marker {
      width: clamp(calc(2rem * var(--display-scale)), calc(var(--key-width) * .45 * var(--display-scale)), calc(3.1rem * var(--display-scale)));
      min-width: calc(1.9rem * var(--display-scale));
      margin-bottom: .65rem;
      font-size: clamp(calc(.74rem * var(--display-scale)), calc(var(--key-width) * .14 * var(--display-scale)), calc(.92rem * var(--display-scale)));
    }

    .keyboard-map .marker-note {
      font-size: 1em;
    }

    .keyboard-map .marker-solfege {
      font-size: .62em;
      padding-bottom: .18rem;
    }

    .piano-key.black .marker-solfege {
      display: none;
    }

    .piano-note-name {
      display: none;
    }

    .piano-key.black .piano-note-name {
      display: none;
    }

    .string-label {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      justify-self: center;
      padding: 0;
      width: calc(2.35rem * var(--display-scale));
      min-width: 2.2rem;
      aspect-ratio: 1;
      color: var(--open-color);
      font-size: calc(1.02rem * var(--display-scale));
      font-weight: 900;
      border: 2px solid transparent;
      border-radius: 999px;
      background: transparent;
      cursor: pointer;
    }

    .string-label.is-in-key {
      border-color: currentColor;
    }

    .string-label.is-label-hidden {
      color: transparent;
    }

    .string-label.is-selected {
      box-shadow: 0 12px 18px rgba(38, 44, 42, .12);
    }

    .string-label.is-emphasis {
      box-shadow: 0 13px 22px rgba(191, 91, 122, .12);
    }

    .string-label.is-emphasis::before {
      content: "";
      position: absolute;
      inset: -7px;
      border: 2.35px solid #d986a0;
      border-radius: 8px;
      pointer-events: none;
    }

    .string-label.is-selected::after {
      content: "";
      position: absolute;
      inset: -7px;
      border: 3px solid #fff;
      border-radius: 8px;
      box-shadow: 0 0 0 1px rgba(52, 59, 56, .18);
      pointer-events: none;
    }

    .nut-bar {
      position: relative;
      z-index: 2;
      align-self: stretch;
      justify-self: center;
      width: .58rem;
      margin-block: calc(var(--row-height) / 2);
      border-radius: 999px;
      background: #3d4140;
      box-shadow: 0 6px 12px rgba(38, 44, 42, .22);
    }

    .cell {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .cell::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 2px;
      background: var(--string);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .18);
      transform: translateY(-50%);
    }

    .cell::after {
      content: "";
      position: absolute;
      top: 0;
      right: -1px;
      bottom: 0;
      width: 2px;
      background: var(--fret);
    }

    .cell.first-string::after {
      top: 50%;
    }

    .cell.last-string::after {
      bottom: 50%;
    }

    .marker {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: 1fr auto;
      place-items: center;
      width: calc(3.05rem * var(--display-scale));
      min-width: 2.2rem;
      aspect-ratio: 1;
      color: #fff;
      border: 0;
      border-radius: 999px;
      background: transparent;
      box-shadow: 0 12px 18px rgba(38, 44, 42, .16);
      transform: scale(var(--in-key-scale));
      transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
    }

    .marker-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background: var(--note-color);
      opacity: var(--color-fill-opacity, 1);
      pointer-events: none;
    }

    .marker-note,
    .marker-solfege {
      position: relative;
      z-index: 1;
    }

    .marker.is-transpose-slide.is-transpose-up {
      animation: transpose-slide-up .24s cubic-bezier(.2, .72, .18, 1);
    }

    .marker.is-label-hidden .marker-note,
    .marker.is-label-hidden .marker-solfege {
      display: none;
    }

    .marker.is-transpose-slide.is-transpose-down {
      animation: transpose-slide-down .24s cubic-bezier(.2, .72, .18, 1);
    }

    @keyframes transpose-slide-up {
      0% {
        opacity: .78;
        transform: translateX(calc(-2.45rem * var(--display-scale))) scale(calc(var(--in-key-scale) * .94));
      }

      100% {
        opacity: 1;
        transform: translateX(0) scale(var(--in-key-scale));
      }
    }

    @keyframes transpose-slide-down {
      0% {
        opacity: .78;
        transform: translateX(calc(2.45rem * var(--display-scale))) scale(calc(var(--in-key-scale) * .94));
      }

      100% {
        opacity: 1;
        transform: translateX(0) scale(var(--in-key-scale));
      }
    }

    .marker:hover {
      box-shadow: 0 0 0 2px rgba(31, 36, 35, .1), 0 15px 24px rgba(38, 44, 42, .24);
      transform: scale(calc(var(--in-key-scale) + .08));
    }

    .marker.is-selected {
      box-shadow: 0 15px 24px rgba(38, 44, 42, .24);
      transform: scale(calc(var(--in-key-scale) + .08));
    }

    .marker.is-out {
      color: #fff;
      outline: 0;
      box-shadow: 0 12px 18px rgba(38, 44, 42, .14);
    }

    .marker.is-out .marker-bg {
      background: #9da5aa;
    }

    .marker.is-out.is-selected {
      box-shadow: 0 15px 24px rgba(38, 44, 42, .24);
    }

    .marker.is-layer-b {
      color: #00a99d;
      border: 2px solid #00a99d;
      box-shadow: 0 10px 16px rgba(0, 169, 157, .12);
    }

    .marker.is-layer-b .marker-bg {
      background: #fff;
    }

    .marker.is-emphasis {
      box-shadow: 0 13px 22px rgba(191, 91, 122, .18);
      font-weight: 950;
    }

    .marker.is-emphasis.is-selected {
      box-shadow: 0 13px 22px rgba(191, 91, 122, .2);
    }

    .marker.is-emphasis::before {
      content: "";
      position: absolute;
      inset: -7px;
      border: 2.35px solid #d986a0;
      border-radius: 8px;
      pointer-events: none;
    }

    .marker.is-selected::after,
    .marker.is-emphasis.is-selected::after {
      content: "";
      position: absolute;
      inset: -7px;
      border: 3px solid #fff;
      border-radius: 8px;
      box-shadow: 0 0 0 1px rgba(52, 59, 56, .18);
      pointer-events: none;
    }

    .selection-frame,
    .emphasis-frame {
      position: relative;
      display: block;
      width: calc(3.05rem * var(--display-scale));
      min-width: 2.2rem;
      aspect-ratio: 1;
      border-radius: 8px;
      pointer-events: none;
    }

    .selection-frame {
      z-index: 2;
      border: 3px solid #fff;
      box-shadow: 0 0 0 1px rgba(52, 59, 56, .18), 0 13px 22px rgba(38, 44, 42, .12);
    }

    .emphasis-frame {
      z-index: 1;
      border: 2.35px solid #d986a0;
      background: rgba(217, 134, 160, .045);
      box-shadow: 0 13px 22px rgba(191, 91, 122, .12);
    }

    .piano-key .selection-frame,
    .piano-key .emphasis-frame {
      position: absolute;
      left: 50%;
      bottom: .95rem;
      width: clamp(calc(2.35rem * var(--display-scale)), calc(var(--key-width) * .58 * var(--display-scale)), calc(4.2rem * var(--display-scale)));
      min-width: calc(2.15rem * var(--display-scale));
      transform: translateX(-50%);
    }

    .piano-key.black .selection-frame,
    .piano-key.black .emphasis-frame {
      bottom: .65rem;
      width: clamp(calc(2rem * var(--display-scale)), calc(var(--key-width) * .45 * var(--display-scale)), calc(3.1rem * var(--display-scale)));
      min-width: calc(1.9rem * var(--display-scale));
    }

    .marker.is-overlap {
      box-shadow: 0 12px 18px rgba(38, 44, 42, .16);
    }

    .marker.is-overlap .marker-note,
    .marker.is-overlap .marker-solfege {
      color: #111615;
      font-weight: 950;
      paint-order: stroke fill;
      -webkit-text-stroke: 1.4px rgba(255, 255, 255, .92);
      text-shadow:
        0 1px 0 rgba(255, 255, 255, .8),
        0 0 3px rgba(255, 255, 255, .86);
    }

    .marker.is-overlap .marker-solfege {
      -webkit-text-stroke-width: .8px;
    }

    .marker.is-overlap .marker-note {
      font-size: calc((1.02rem * var(--display-scale)) + 4px);
    }

    .stage.is-mono .marker {
      color: var(--mono-text-color, #6e93db);
      border: 2px solid var(--mono-stroke-color, #6e93db);
      box-shadow: 0 10px 16px rgba(110, 147, 219, .16);
    }

    .stage.is-mono .marker .marker-bg {
      background: var(--mono-fill-color, #ffffff);
      opacity: var(--mono-fill-opacity, 1);
    }

    .stage.is-mono .marker.is-layer-b {
      color: var(--mono-text-color, #6e93db);
      border-color: var(--mono-stroke-color, #6e93db);
    }

    .stage.is-mono .marker.is-overlap .marker-note,
    .stage.is-mono .marker.is-overlap .marker-solfege {
      color: var(--mono-text-color, #6e93db);
      -webkit-text-stroke-color: rgba(255, 255, 255, .92);
    }

    .stage.is-mono .marker.is-emphasis {
      box-shadow: 0 13px 22px rgba(191, 91, 122, .16);
    }

    .stage.is-mono .marker.is-out {
      color: var(--mono-text-color, #6e93db);
      border-color: var(--mono-stroke-color, #6e93db);
      opacity: .58;
    }

    .marker.is-out.is-emphasis,
    .stage.is-mono .marker.is-out.is-emphasis {
      box-shadow: 0 13px 22px rgba(191, 91, 122, .16);
    }

    .marker-note {
      font-size: calc(1.02rem * var(--display-scale));
      font-weight: 900;
      line-height: 1;
    }

    .marker-solfege {
      font-size: calc(.62rem * var(--display-scale));
      font-weight: 800;
      opacity: .74;
      line-height: 1;
      padding-bottom: .45rem;
    }

    .marker.is-out .marker-solfege {
      opacity: .38;
    }

    .fret-number {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      color: var(--board-muted);
      font-size: .92rem;
      font-weight: 900;
    }

    .note-switchboard {
      display: grid;
      justify-items: center;
      gap: .55rem;
      margin: 1.05rem auto 0;
      width: 100%;
      max-width: 100%;
    }

    .switch-row {
      display: flex;
      justify-content: center;
      gap: .55rem;
      max-width: 100%;
      overflow-x: auto;
      padding: .05rem .25rem .35rem;
    }

    .pitch-row,
    .tools-row,
    .emphasis-row {
      flex-wrap: nowrap;
    }

    .pitch-button {
      display: grid;
      place-items: center;
      align-content: start;
      gap: .32rem;
      min-height: 4.4rem;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #8a9490;
      box-shadow: none;
      transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
    }

    .pitch-button.is-in-key {
      color: var(--note-color);
    }

    .pitch-button.is-forced-on {
      color: var(--note-color);
    }

    .pitch-button.is-forced-off {
      opacity: .45;
      box-shadow: none;
    }

    .pitch-button strong {
      display: grid;
      place-items: center;
      width: 3.45rem;
      min-height: 3.05rem;
      color: #87918d;
      border: 1px solid #dfe5e2;
      border-radius: 8px;
      background: #f5f8f6;
      font-size: 1.02rem;
      line-height: 1;
      box-shadow: none;
    }

    .pitch-button.is-in-key strong,
    .pitch-button.is-forced-on strong {
      color: #fff;
      border-color: transparent;
      background: var(--note-color);
      box-shadow: 0 10px 18px rgba(38, 44, 42, .12);
    }

    .pitch-button span {
      min-height: .95rem;
      color: currentColor;
      font-size: .7rem;
      font-weight: 900;
      line-height: 1;
    }

    .pitch-button.is-solo strong {
      color: #ffb8b8;
      box-shadow: 0 0 0 3px rgba(31, 36, 35, .12), 0 13px 20px rgba(38, 44, 42, .2);
    }

    .pitch-collapse {
      display: grid;
      place-items: center;
      align-self: start;
      width: 3.3rem;
      min-height: 3.05rem;
      color: var(--ink);
      border: 1px solid #dfe5e2;
      border-radius: 8px;
      background: #fff;
      font-size: 1.25rem;
      font-weight: 900;
      box-shadow: 0 8px 16px rgba(38, 44, 42, .08);
    }

    .pitch-tool {
      display: grid;
      place-items: center;
      align-self: start;
      width: 3.3rem;
      min-height: 3.05rem;
      color: var(--ink);
      border: 1px solid #dfe5e2;
      border-radius: 8px;
      background: #fff;
      font-size: .9rem;
      font-weight: 900;
      box-shadow: 0 8px 16px rgba(38, 44, 42, .08);
    }

    .switch-spacer {
      display: block;
      width: 3.3rem;
      min-height: 3.05rem;
      pointer-events: none;
    }

    .pitch-tool.is-active {
      color: #fff;
      border-color: transparent;
      background: #6e93db;
    }

    .palette-set-group {
      display: inline-grid;
      grid-template-columns: repeat(4, auto);
      align-items: stretch;
      gap: .35rem;
      min-height: 2.9rem;
      padding: .22rem .35rem;
      border: 1px solid #dfe5e2;
      border-radius: 8px;
      background: rgba(255, 255, 255, .84);
      box-shadow: 0 8px 16px rgba(38, 44, 42, .06);
    }

    .palette-set-button {
      display: inline-grid;
      grid-template-columns: repeat(2, .78rem);
      place-content: center;
      gap: .18rem;
      width: 2.45rem;
      min-height: 2.35rem;
      padding: .24rem;
      color: #4f5e5a;
      border: 1px solid #dfe5e2;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    .palette-set-button span {
      width: .72rem;
      aspect-ratio: 1;
      border-radius: 999px;
      background: var(--set-color);
    }

    .palette-set-button span.is-ring {
      border: 2px solid var(--set-color);
      background: #fff;
    }

    .palette-set-button b {
      grid-column: 1 / -1;
      display: grid;
      place-items: center;
      font-size: .9rem;
      line-height: 1;
    }

    .palette-set-button.is-active {
      border-color: #ef7fa2;
      box-shadow: 0 0 0 2px rgba(239, 127, 162, .22);
    }

    .palette-set-group.is-mono .palette-set-button {
      grid-template-columns: repeat(3, .55rem);
      gap: .14rem;
    }

    .palette-set-group.is-mono .palette-set-button span {
      width: .55rem;
    }

    .palette-opacity {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: auto minmax(5.5rem, 1fr) 2.7rem;
      align-items: center;
      gap: .35rem;
      min-height: 1.8rem;
      color: #6d7773;
      font-size: .72rem;
      font-weight: 950;
    }

    .palette-opacity input {
      width: 100%;
      min-height: 1.2rem;
      padding: 0;
    }

    .palette-opacity output {
      color: #4f5e5a;
      text-align: right;
    }

    .emphasis-tool {
      width: auto;
      min-width: 3.3rem;
      padding: 0 .65rem;
      color: #b95b74;
      border-color: rgba(185, 91, 116, .22);
      background: #fff;
      font-size: .78rem;
      white-space: nowrap;
    }

    .emphasis-tool.is-target {
      width: 4.2rem;
      color: #b95b74;
      border-color: rgba(185, 91, 116, .28);
    }

    .emphasis-tool.is-active {
      color: #bf5b7a;
      border-color: #d986a0;
      background: #fff;
      box-shadow: 0 0 0 2.5px rgba(217, 134, 160, .32), 0 10px 18px rgba(191, 91, 122, .12);
    }

    .note-switchboard.is-mono .pitch-button.is-in-key strong,
    .note-switchboard.is-mono .pitch-button.is-forced-on strong {
      color: var(--mono-text-color, #6e93db);
      border-color: var(--mono-stroke-color, #6e93db);
      background: #fff;
      box-shadow: 0 10px 18px rgba(110, 147, 219, .16);
    }

    .status-dock {
      position: fixed;
      left: var(--dock-left);
      right: auto;
      bottom: .75rem;
      z-index: 30;
      display: grid;
      width: min(var(--status-width), calc(100vw - var(--dock-left) - var(--shortcut-width) - var(--dock-gap) - 1rem));
      min-width: 26rem;
      min-height: 0;
      max-height: calc(100vh - 1.5rem);
      gap: .28rem;
      padding: .32rem;
      border: 1px solid rgba(220, 228, 224, .92);
      border-radius: 8px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 18px 42px rgba(21, 29, 27, .16);
      backdrop-filter: blur(10px);
      overflow: auto;
    }

    .status-dock-resize {
      position: absolute;
      top: .22rem;
      right: .22rem;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 1.35rem;
      height: 1.35rem;
      padding: 0;
      color: #6c7772;
      border: 1px solid transparent;
      border-radius: 5px;
      background: transparent;
      cursor: nesw-resize;
      font-size: 1rem;
      font-weight: 900;
      line-height: 1;
      touch-action: none;
      user-select: none;
    }

    .status-dock-resize:hover,
    .status-dock-resize:focus-visible {
      color: #1f2423;
      border-color: #dce5e1;
      background: #f4f8f6;
      outline: none;
    }

    .status-dock .analysis-panel,
    .status-dock .info-bar {
      box-shadow: none;
    }

    .status-dock .analysis-panel {
      padding: .34rem .42rem .42rem;
    }

    .status-dock .panel-title {
      margin-bottom: .25rem;
      cursor: ew-resize;
      touch-action: none;
      user-select: none;
    }

    #status-dock-toggle {
      margin-left: auto;
      margin-right: 1.5rem;
      min-width: 1.7rem;
      min-height: 1.35rem;
      color: #56615d;
      border: 1px solid #dce5e1;
      border-radius: 6px;
      background: #fff;
      font-size: .75rem;
      font-weight: 950;
      line-height: 1;
    }

    .status-dock.is-collapsed {
      width: 8.5rem;
      min-width: 8.5rem;
      min-height: 2.75rem;
      height: 2.75rem;
      left: var(--dock-left);
      right: auto;
      bottom: .75rem;
      padding: .22rem;
      border-color: rgba(23, 27, 26, .22);
      background: rgba(255, 255, 255, .98);
      overflow: hidden;
    }

    .status-dock.is-collapsed .analysis-placeholder,
    .status-dock.is-collapsed .info-bar {
      display: none;
    }

    .status-dock.is-collapsed .analysis-panel {
      width: 100%;
      height: 100%;
      display: grid;
      padding: .18rem;
      border: 0;
      background: transparent;
    }

    .status-dock.is-collapsed .panel-title {
      margin-bottom: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .35rem;
      height: 100%;
      min-height: 0;
      cursor: default;
    }

    .status-dock.is-collapsed .panel-title strong {
      color: #1f2423;
      font-size: .72rem;
      letter-spacing: .16em;
    }

    .status-dock.is-collapsed .panel-title span {
      display: none;
    }

    .status-dock.is-collapsed #status-dock-toggle {
      position: static;
      min-width: 1.45rem;
      min-height: 1.2rem;
      margin: 0;
      padding: 0;
      transform: translateX(-50%);
      border-color: rgba(23, 27, 26, .18);
      background: #f4f8f6;
    }

    .status-dock.is-collapsed .status-dock-resize {
      display: none;
    }

    .app.is-sidebar-collapsed .status-dock,
    .app.is-sidebar-collapsed .status-dock.is-collapsed {
      left: 4.5rem;
    }

    .info-bar {
      display: grid;
      grid-template-columns: repeat(6, minmax(4.8rem, 1fr));
      gap: .3rem;
      padding: .32rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 10px 28px rgba(21, 29, 27, .06);
    }

    .info-item {
      display: grid;
      gap: .15rem;
      min-height: 1.75rem;
      padding: .26rem .38rem;
      border-radius: 8px;
      background: #f4f8f6;
    }

    .info-item span {
      color: var(--muted);
      font-size: .64rem;
      font-weight: 800;
    }

    .info-item strong {
      font-size: .78rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .analysis-placeholder {
      min-height: 1.9rem;
      padding: .34rem;
      border-radius: 8px;
      background: #f4f8f6;
    }

    .scope-body {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(15rem, 1.05fr);
      gap: .35rem .45rem;
      align-items: stretch;
    }

    .scope-column {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: .35rem;
      min-width: 0;
    }

    .scope-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      align-self: start;
      min-height: 1.9rem;
    }

    .analysis-placeholder b {
      font-size: .82rem;
    }

    #scope-view-toggle {
      min-height: 2rem;
      padding: 0 .75rem;
      color: #5c6965;
      border: 1px solid #dce5e1;
      border-radius: 8px;
      background: #fff;
      font-size: .78rem;
      font-weight: 900;
    }

    #scope-view-toggle.is-active {
      color: #fff;
      border-color: transparent;
      background: #6e93db;
    }

    .analysis-placeholder span {
      color: var(--muted);
      font-size: .75rem;
      line-height: 1.35;
    }

    .scope-selection {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      align-items: center;
      min-height: 1.9rem;
    }

    .scope-empty {
      color: var(--muted);
      font-size: .86rem;
    }

    .scope-chip {
      display: grid;
      grid-template-columns: auto auto;
      align-items: center;
      gap: .1rem .45rem;
      min-width: 3.4rem;
      padding: .45rem .6rem;
      color: var(--ink);
      border: 1px solid rgba(217, 229, 224, .95);
      border-left: 4px solid var(--note-color);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 8px 16px rgba(38, 44, 42, .06);
      text-align: left;
      cursor: grab;
    }

    .scope-chip:active {
      cursor: grabbing;
    }

    .scope-chip.is-dragging {
      opacity: .48;
    }

    .scope-chip strong {
      font-size: 1rem;
      font-weight: 950;
    }

    .scope-chip span {
      color: #5c6965;
      font-size: .76rem;
      font-weight: 800;
    }

    .scope-chip small {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 900;
    }

    .scope-chip.is-out {
      opacity: .72;
    }

    .scope-suggestions {
      display: grid;
      gap: .25rem;
      min-height: 1.9rem;
      padding: .32rem;
      border: 1px solid rgba(217, 229, 224, .95);
      border-radius: 8px;
      background: rgba(255, 255, 255, .76);
    }

    .scope-suggestions strong {
      font-size: .82rem;
      font-weight: 950;
    }

    .scope-chord-list {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .scope-chord {
      display: grid;
      gap: .1rem;
      min-width: 4.8rem;
      padding: .45rem .55rem;
      color: #1f2423;
      border: 1px solid #dce5e1;
      border-radius: 8px;
      background: #fff;
      text-align: left;
    }

    .scope-chord.is-exact {
      border-color: rgba(110, 147, 219, .48);
      box-shadow: 0 0 0 2px rgba(110, 147, 219, .14);
    }

    .scope-chord span {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 900;
    }

    .shortcut-help {
      position: fixed;
      right: 1rem;
      bottom: .75rem;
      z-index: 31;
      display: grid;
      gap: .36rem;
      width: var(--shortcut-width);
      padding: .55rem;
      color: #edf7f4;
      border: 1px solid rgba(237, 247, 244, .12);
      border-radius: 8px;
      background: rgba(23, 27, 26, .88);
      box-shadow: 0 18px 40px rgba(21, 29, 27, .22);
      backdrop-filter: blur(10px);
    }

    .shortcut-help strong {
      color: #ffd166;
      font-size: .82rem;
      letter-spacing: .08em;
    }

    .shortcut-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
    }

    #shortcut-help-toggle {
      min-width: 1.55rem;
      min-height: 1.25rem;
      color: #171b1a;
      border: 0;
      border-radius: 6px;
      background: #ffd166;
      font-size: .72rem;
      font-weight: 950;
      line-height: 1;
    }

    .shortcut-body {
      display: grid;
      gap: .36rem;
    }

    .shortcut-help.is-collapsed .shortcut-body {
      display: none;
    }

    .shortcut-help span {
      display: flex;
      align-items: center;
      gap: .45rem;
      color: rgba(237, 247, 244, .82);
      font-size: .78rem;
      font-weight: 800;
    }

    .shortcut-help kbd {
      display: inline-grid;
      place-items: center;
      min-width: 2.1rem;
      min-height: 1.55rem;
      padding: 0 .38rem;
      color: #171b1a;
      border-radius: 6px;
      background: #ffd166;
      font: inherit;
      font-size: .72rem;
      font-weight: 950;
    }

    @media (max-width: 1120px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        grid-template-rows: auto;
      }

      .toolbar,
      .pattern-grid,
      .info-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .toolbar {
        padding-right: .68rem;
      }

      .page-zoom-control {
        position: static;
      }

      .stage-layout {
        grid-template-columns: 1fr;
      }

      .palette-legend {
        grid-template-columns: repeat(7, max-content);
        align-items: center;
        gap: .45rem .7rem;
        white-space: normal;
      }

      .palette-title {
        grid-column: 1 / -1;
      }

      .main.is-keyboard-page .toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .main.is-keyboard-page .stage-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        width: 100%;
      }

      .main.is-keyboard-page .palette-legend {
        grid-template-columns: repeat(7, max-content);
        align-items: center;
        justify-content: center;
        gap: .45rem .7rem;
        white-space: normal;
      }

      .main.is-keyboard-page .palette-title {
        grid-column: 1 / -1;
        text-align: center;
      }

      .scope-body {
        grid-template-columns: 1fr;
      }

      .status-dock {
        left: var(--dock-left);
        right: auto;
        width: min(var(--status-width), calc(100vw - var(--dock-left) - var(--shortcut-width) - var(--dock-gap) - 1rem));
      }

      .status-dock.is-collapsed {
        left: var(--dock-left);
        right: auto;
      }

      .shortcut-help {
        bottom: .75rem;
        width: var(--shortcut-width);
      }

      .theory-layout {
        grid-template-columns: 1fr;
      }

      .main.is-theory-page .theory-page {
        width: 100%;
        max-width: none;
      }

      .scale-hero,
      .scale-bottom-grid {
        grid-template-columns: 1fr;
      }

      .layer-row {
        grid-template-columns: 3rem repeat(3, minmax(0, 1fr));
      }

      .pattern-panel {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      .hero {
        grid-template-columns: 1fr;
      }

      .toolbar,
      .pattern-grid,
      .info-bar {
        grid-template-columns: 1fr;
      }

      .main.is-keyboard-page .toolbar {
        grid-template-columns: 1fr;
      }

      .main.is-keyboard-page .stage {
        padding: .75rem;
      }

      .main.is-keyboard-page .stage-layout {
        justify-items: start;
      }

      .main.is-keyboard-page .palette-legend {
        grid-template-columns: repeat(2, max-content);
        justify-content: start;
      }

      .layer-row {
        grid-template-columns: 1fr;
      }

      .theory-row {
        grid-template-columns: 1fr;
      }

      .scale-hero {
        padding: 1.25rem;
        border-radius: 12px;
      }

      .theory-tool-bar,
      .theory-tool-panel-head {
        display: grid;
      }

      .theory-tool-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .theory-open-full {
        justify-self: stretch;
      }

      .scale-notion-title {
        grid-template-columns: 1fr;
      }

      .scale-callout {
        grid-template-columns: 1fr;
      }

      .scale-practice-wide ol {
        grid-template-columns: 1fr;
      }

      .scale-compact-header,
      .scale-table-head,
      .scale-family-compact summary {
        align-items: start;
        flex-direction: column;
      }

      .scale-solfege-lines {
        grid-template-columns: 1fr;
      }

      .scale-compact-notes {
        grid-template-columns: 1fr;
      }

      .scale-structure-row {
        grid-template-columns: 8rem 19rem 19rem;
      }

      .scale-hero-map {
        min-height: 10rem;
        justify-content: start;
        overflow-x: auto;
      }

      .scale-section-head {
        display: grid;
      }

      .scale-card-grid {
        grid-template-columns: 1fr;
      }

      .scale-card-head {
        display: grid;
      }

      .theory-cell {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .theory-cell:last-child {
        border-bottom: 0;
      }

    }

    /* The map is a desktop workbench: smaller screens scroll horizontally instead of reflowing the instrument. */
    @media (max-width: 1120px) {
      body {
        min-width: 1180px;
        overflow-x: auto;
      }

      .app,
      .app.is-sidebar-collapsed {
        min-width: 1180px;
        grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
      }

      .app.is-sidebar-collapsed {
        grid-template-columns: 3.5rem minmax(0, 1fr);
      }

      .sidebar {
        grid-template-rows: auto 1fr auto;
      }

      .hero {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .toolbar {
        grid-template-columns: repeat(auto-fit, minmax(7.2rem, max-content));
        padding-right: 1rem;
      }

      .main.is-keyboard-page .toolbar {
        grid-template-columns: repeat(7, minmax(8.4rem, 1fr));
      }

      .page-zoom-control {
        position: absolute;
      }

      .stage-layout {
        grid-template-columns: minmax(0, 1fr) clamp(13rem, 16vw, 17rem);
      }

      .main.is-keyboard-page .stage-layout {
        grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
        justify-items: start;
        width: auto;
      }

      .palette-legend,
      .main.is-keyboard-page .palette-legend {
        grid-template-columns: none;
        justify-content: start;
        white-space: nowrap;
      }

      .palette-title,
      .main.is-keyboard-page .palette-title {
        grid-column: auto;
        text-align: left;
      }

      .info-bar {
        grid-template-columns: repeat(6, minmax(4.8rem, 1fr));
      }

      .layer-row {
        grid-template-columns: 3rem repeat(3, minmax(0, 1fr));
      }
    }

    /* Theory chapter: Circle of fifths */
    .circle-lesson-shell {
      display: grid;
      gap: 1rem;
      min-width: 0;
      padding: clamp(.8rem, 1.4vw, 1.2rem);
      border: 1px solid #dce7e2;
      border-radius: 12px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 10px 22px rgba(28, 45, 41, .05);
    }

    .circle-lesson-header {
      display: grid;
      grid-template-columns: minmax(21rem, .8fr) minmax(30rem, 1.2fr);
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: end;
      padding: .45rem .35rem 1rem;
      border-top: 4px solid #00a99d;
      border-bottom: 1px solid #e1ebe7;
    }

    .circle-lesson-header > div {
      display: grid;
      gap: .28rem;
    }

    .circle-lesson-header span,
    .circle-detail-heading span,
    .circle-signature-section > header span {
      color: #008f85;
      font-size: .65rem;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .circle-lesson-header h2 {
      max-width: 34rem;
      margin: 0;
      color: #1c2f2a;
      font-size: clamp(1.45rem, 2.2vw, 2.15rem);
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .circle-lesson-header p {
      max-width: 52rem;
      margin: 0;
      color: #61716b;
      font-size: .78rem;
      line-height: 1.75;
    }

    .circle-concept-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .65rem;
    }

    .circle-concept-strip article {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .7rem;
      align-items: start;
      min-width: 0;
      padding: .75rem;
      border: 1px solid #e0e9e5;
      border-radius: 8px;
      background: #fbfdfc;
    }

    .circle-concept-strip article > b {
      display: grid;
      place-items: center;
      width: 2.15rem;
      height: 2.15rem;
      color: #fff;
      border-radius: 7px;
      background: #00a99d;
      font-size: .72rem;
    }

    .circle-concept-strip article:nth-child(2) > b { background: #9a86bc; }
    .circle-concept-strip article:nth-child(3) > b { background: #d8c85a; }

    .circle-concept-strip article > div {
      display: grid;
      gap: .12rem;
    }

    .circle-concept-strip span {
      color: #83908b;
      font-size: .58rem;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .circle-concept-strip strong {
      color: #2d413b;
      font-size: .82rem;
    }

    .circle-concept-strip p {
      margin: .1rem 0 0;
      color: #687770;
      font-size: .67rem;
      line-height: 1.55;
    }

    #circle-interactive {
      display: grid;
      gap: 1rem;
      min-width: 0;
    }

    .circle-lesson-grid {
      display: grid;
      grid-template-columns: minmax(31rem, 1.15fr) minmax(21rem, .85fr);
      gap: 1rem;
      align-items: stretch;
    }

    .circle-board-card,
    .circle-key-detail,
    .circle-signature-section {
      min-width: 0;
      border: 1px solid #dce7e2;
      border-radius: 10px;
      background: #fff;
    }

    .circle-board-card {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      justify-items: center;
      padding: .7rem;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 48%, rgba(0, 169, 157, .055), transparent 42%),
        #fff;
    }

    .circle-board-controls {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: .65rem;
      align-items: center;
      width: 100%;
    }

    .circle-board-controls button {
      min-height: 2rem;
      padding: 0 .65rem;
      color: #3d554e;
      border: 1px solid #ceddd8;
      border-radius: 6px;
      background: #f7faf9;
      font: inherit;
      font-size: .7rem;
      font-weight: 900;
      cursor: pointer;
    }

    .circle-board-controls button:hover {
      color: #007d74;
      border-color: #8dcfc7;
      background: #eef9f7;
    }

    .circle-board-controls button:disabled {
      opacity: .36;
      cursor: default;
    }

    .circle-board-controls .circle-trail-mode-toggle {
      justify-self: center;
      min-width: 8.4rem;
      color: #40564f;
    }

    .circle-trail-mode-toggle i {
      margin-right: .35rem;
      color: #8069a7;
      font-size: .92rem;
      font-style: normal;
    }

    .circle-board-controls .circle-trail-mode-toggle.is-active {
      color: #fff;
      border-color: #8069a7;
      background: #8069a7;
      box-shadow: 0 5px 12px rgba(128, 105, 167, .2);
    }

    .circle-board-controls .circle-trail-mode-toggle.is-active i { color: #fff; }

    .circle-board {
      display: block;
      width: min(100%, 44rem);
      max-height: 37rem;
      overflow: visible;
    }

    .circle-board-halo {
      fill: #f7faf9;
      stroke: #e4ece9;
      stroke-width: 1;
    }

    .circle-key-sector { outline: none; }

    .circle-signature-orbit-card {
      cursor: pointer;
      outline: none;
    }

    .circle-signature-orbit-card rect {
      fill: transparent;
      stroke: transparent;
      stroke-width: 0;
      filter: none;
      transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease;
    }

    .circle-signature-orbit-card image {
      pointer-events: none;
      opacity: .92;
      transition: filter .16s ease, opacity .16s ease;
    }

    .circle-signature-orbit-card:hover image,
    .circle-signature-orbit-card:focus image,
    .circle-signature-orbit-card.is-active image {
      opacity: 1;
      filter: drop-shadow(0 2px 3px rgba(0, 127, 118, .24));
    }

    .circle-signature-orbit-card.is-active rect {
      fill: transparent;
      stroke: transparent;
      stroke-width: 0;
    }

    .circle-signature-orbit-card.is-dual rect {
      stroke-dasharray: none;
    }

    .circle-major-slice,
    .circle-minor-slice {
      cursor: pointer;
      outline: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: butt;
      stroke-linejoin: miter;
      stroke-miterlimit: 2;
      stroke: rgba(255, 255, 255, .94);
      stroke-width: 3;
      transition: filter .16s ease, opacity .16s ease, stroke .16s ease, stroke-width .16s ease;
    }

    .circle-minor-slice { opacity: .42; }

    .circle-major-slice:hover,
    .circle-major-slice:focus {
      filter: saturate(1.04) brightness(1.02);
      stroke: #151817;
      stroke-width: 5;
    }

    .circle-minor-slice:hover,
    .circle-minor-slice:focus {
      opacity: .68;
      stroke: #151817;
      stroke-width: 5;
    }

    .circle-key-sector.is-active .circle-major-slice,
    .circle-key-sector.is-active .circle-minor-slice {
      stroke: rgba(255, 255, 255, .94);
      stroke-width: 3;
    }

    .circle-key-sector.is-active .circle-minor-slice { opacity: .42; }

    .circle-key-sector.is-major-selected .circle-major-slice {
      fill: color-mix(in srgb, var(--circle-sector-color) 50%, white);
      filter: none;
      stroke: rgba(255, 255, 255, .94);
      stroke-width: 3;
    }

    .circle-key-sector.is-minor-selected .circle-minor-slice {
      fill: color-mix(in srgb, var(--circle-sector-color) 50%, white);
      filter: none;
      opacity: 1;
      stroke: rgba(255, 255, 255, .94);
      stroke-width: 3;
    }

    .circle-key-sector.is-major-selected .circle-major-label,
    .circle-key-sector.is-minor-selected .circle-minor-label {
      fill: #151817;
      font-weight: 800;
    }

    .circle-selection-frame {
      pointer-events: none;
    }

    .circle-selection-frame path {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke: #151817;
      stroke-width: 4;
      stroke-linecap: butt;
      stroke-linejoin: miter;
      stroke-miterlimit: 2;
    }

    .circle-board.is-trail-mode .circle-signature-orbit-card,
    .circle-board.is-trail-mode .circle-arrow,
    .circle-board.is-trail-mode .circle-arrow-label {
      opacity: 0;
      pointer-events: none;
    }

    .circle-board.is-trail-mode .circle-major-slice,
    .circle-board.is-trail-mode .circle-minor-slice {
      fill: #f5f8f7;
      filter: none;
      opacity: 1;
      stroke: #d8e3df;
      stroke-width: 2;
    }

    .circle-board.is-trail-mode .circle-major-label,
    .circle-board.is-trail-mode .circle-minor-label { opacity: 0; }

    .circle-board.is-trail-mode .circle-major-slice:hover,
    .circle-board.is-trail-mode .circle-major-slice:focus {
      fill: #e8f6f3;
      stroke: #00a99d;
      stroke-width: 5;
    }

    .circle-board.is-trail-mode .circle-minor-slice:hover,
    .circle-board.is-trail-mode .circle-minor-slice:focus {
      fill: #f0ecf7;
      stroke: #8069a7;
      stroke-width: 5;
    }

    .circle-board.is-trail-mode .circle-key-sector.is-trail-major .circle-major-slice,
    .circle-board.is-trail-mode .circle-key-sector.is-trail-minor .circle-minor-slice {
      fill: var(--circle-sector-color);
      filter: saturate(1.05);
      stroke: #fff;
      stroke-width: 3;
    }

    .circle-board.is-trail-mode .circle-key-sector.is-trail-minor .circle-minor-slice { opacity: .62; }
    .circle-board.is-trail-mode .circle-key-sector.is-trail-major .circle-major-label,
    .circle-board.is-trail-mode .circle-key-sector.is-trail-minor .circle-minor-label { opacity: 1; }

    .circle-major-label,
    .circle-minor-label,
    .circle-center-kicker,
    .circle-center-key,
    .circle-center-minor,
    .circle-center-signature,
    .circle-arrow-label {
      fill: #1e302b;
      text-anchor: middle;
      pointer-events: none;
    }

    .circle-major-label {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 28px;
      font-weight: 700;
    }

    .circle-minor-label {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
      font-weight: 700;
    }

    .circle-board-center {
      fill: rgba(255, 255, 255, .97);
      stroke: #d4e5e0;
      stroke-width: 2;
      filter: drop-shadow(0 8px 18px rgba(31, 64, 56, .12));
    }

    .circle-center-kicker {
      fill: #008f85;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 2px;
    }

    .circle-center-key {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 35px;
      font-weight: 700;
    }

    .circle-center-minor {
      fill: #566862;
      font-size: 18px;
      font-weight: 850;
    }

    .circle-center-signature {
      fill: #7a8782;
      font-size: 12px;
      font-weight: 800;
    }

    .circle-arrow {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 4 8;
      pointer-events: none;
    }

    .circle-arrow--sharp { stroke: #00a99d; }
    .circle-arrow--flat { stroke: #9a86bc; }

    .circle-arrow-label {
      font-size: 12px;
      font-weight: 900;
    }

    .circle-arrow-label--sharp { fill: #008f85; }
    .circle-arrow-label--flat { fill: #8069a7; }

    .circle-board-legend {
      display: flex;
      justify-content: center;
      gap: 1rem;
      width: 100%;
      padding-top: .35rem;
      color: #62716b;
      font-size: .65rem;
      font-weight: 850;
    }

    .circle-board-legend span {
      display: flex;
      gap: .35rem;
      align-items: center;
    }

    .circle-board-legend i {
      display: block;
      width: .72rem;
      height: .72rem;
      border-radius: 50%;
      background: #69b8ca;
    }

    .circle-board-legend i.is-minor { opacity: .42; }

    .circle-key-detail {
      display: grid;
      gap: .9rem;
      align-content: start;
      padding: 1rem;
      background: linear-gradient(145deg, #fbfdfc, #fff 44%);
    }

    .circle-key-detail > header {
      display: grid;
      gap: .35rem;
      padding-bottom: .8rem;
      border-bottom: 1px solid #e3ebe8;
    }

    .circle-key-detail > header > span {
      color: #00a99d;
      font-size: .61rem;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .circle-key-detail > header > div {
      display: flex;
      gap: .6rem;
      align-items: baseline;
      flex-wrap: wrap;
    }

    .circle-key-detail h3 {
      margin: 0;
      color: #1c302a;
      font-size: 1.55rem;
      line-height: 1;
    }

    .circle-key-detail > header b {
      color: #8069a7;
      font-size: .9rem;
    }

    .circle-key-detail > header p {
      margin: 0;
      color: #697771;
      font-size: .7rem;
      line-height: 1.55;
    }

    .circle-ring-focus {
      display: inline-flex;
      align-items: center;
      margin-right: .45rem;
      padding: .18rem .42rem;
      color: #fff;
      border-radius: 999px;
      background: #00a99d;
      font-size: .58rem;
      font-style: normal;
      font-weight: 900;
      white-space: nowrap;
    }

    .circle-ring-focus.is-minor { background: #8069a7; }

    .circle-key-facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .55rem;
      margin: 0;
    }

    .circle-key-facts > div {
      display: grid;
      gap: .22rem;
      padding: .65rem;
      border: 1px solid #e2eae7;
      border-radius: 7px;
      background: #f7faf9;
    }

    .circle-key-facts dt {
      color: #82908b;
      font-size: .58rem;
      font-weight: 900;
    }

    .circle-key-facts dd {
      margin: 0;
      color: #31463f;
      font-size: .76rem;
      font-weight: 900;
      line-height: 1.45;
    }

    .circle-function-map,
    .circle-diatonic {
      display: grid;
      gap: .55rem;
    }

    .circle-detail-heading {
      display: grid;
      gap: .1rem;
    }

    .circle-detail-heading h4 {
      margin: 0;
      color: #2a3c36;
      font-size: .9rem;
    }

    .circle-function-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .4rem;
      position: relative;
    }

    .circle-function-row::before {
      position: absolute;
      top: 50%;
      right: .6rem;
      left: .6rem;
      height: 1px;
      background: #cbd8d4;
      content: "";
    }

    .circle-function-row button {
      display: grid;
      z-index: 1;
      gap: .25rem;
      place-items: center;
      min-height: 4rem;
      padding: .45rem;
      color: #42544e;
      border: 1px solid #d9e4e0;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
    }

    .circle-function-row button.is-tonic {
      color: #fff;
      border-color: #00a99d;
      background: #00a99d;
      box-shadow: 0 6px 14px rgba(0, 169, 157, .18);
    }

    .circle-function-row button.is-tonic.is-minor {
      border-color: #8069a7;
      background: #8069a7;
      box-shadow: 0 6px 14px rgba(128, 105, 167, .2);
    }

    .circle-function-row small { font-size: .54rem; font-weight: 900; }
    .circle-function-row strong { font-size: .9rem; }

    .circle-diatonic > div:last-child {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: .28rem;
    }

    .circle-diatonic > div:last-child span {
      display: grid;
      gap: .18rem;
      place-items: center;
      min-width: 0;
      padding: .42rem .16rem;
      border: 1px solid #dde6e3;
      border-radius: 6px;
      background: #f8faf9;
    }

    .circle-diatonic small {
      color: #84918c;
      font-size: .5rem;
      font-weight: 900;
    }

    .circle-diatonic b {
      color: #354a43;
      font-size: .67rem;
      white-space: nowrap;
    }

    .circle-trail-panel {
      display: grid;
      gap: .55rem;
      padding: .7rem;
      border: 1px solid #ded7e9;
      border-radius: 8px;
      background: linear-gradient(135deg, #faf8fd, #fff);
    }

    .circle-trail-panel > header {
      display: flex;
      gap: .6rem;
      align-items: center;
      justify-content: space-between;
    }

    .circle-trail-panel > header span {
      display: block;
      color: #8069a7;
      font-size: .56rem;
      font-weight: 950;
      letter-spacing: .11em;
    }

    .circle-trail-panel > header strong { color: #31463f; font-size: .8rem; }

    .circle-trail-panel button {
      min-height: 1.75rem;
      padding: 0 .55rem;
      color: #6f5c91;
      border: 1px solid #d8cfe6;
      border-radius: 6px;
      background: #fff;
      font: inherit;
      font-size: .58rem;
      font-weight: 900;
      cursor: pointer;
    }

    .circle-trail-panel ol {
      display: flex;
      gap: .38rem;
      flex-wrap: wrap;
      max-height: 7.5rem;
      margin: 0;
      padding: 0;
      overflow: auto;
      list-style: none;
    }

    .circle-trail-panel li {
      display: grid;
      place-items: center;
      min-width: 3.25rem;
      padding: .42rem .65rem;
      color: #334840;
      border: 1px solid #e1e8e5;
      border-left: 4px solid var(--trail-color);
      border-radius: 6px;
      background: #fff;
      font-size: .62rem;
      font-weight: 850;
    }

    .circle-trail-panel li strong { font-size: .72rem; }
    .circle-trail-panel > p { margin: 0; color: #7b8984; font-size: .63rem; line-height: 1.55; }

    .circle-instrument-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .45rem;
      margin-top: auto;
      padding-top: .1rem;
    }

    .circle-instrument-actions button {
      min-height: 2.3rem;
      padding: .4rem .55rem;
      color: #304840;
      border: 1px solid #cbdcd6;
      border-radius: 7px;
      background: #f5faf8;
      font: inherit;
      font-size: .65rem;
      font-weight: 900;
      cursor: pointer;
    }

    .circle-instrument-actions button span {
      display: inline-grid;
      place-items: center;
      min-width: 1.45rem;
      min-height: 1.3rem;
      margin-right: .32rem;
      color: #fff;
      border-radius: 4px;
      background: #263b35;
      font-size: .55rem;
    }

    .circle-signature-section {
      display: grid;
      gap: 1.125rem;
      width: 100%;
      justify-self: start;
      box-sizing: border-box;
      padding: 1.35rem;
    }

    .circle-signature-section > header {
      display: grid;
      gap: .55rem;
      align-items: start;
    }

    .circle-signature-section > header span { font-size: .975rem; }

    .circle-signature-section > header > div {
      display: grid;
      gap: .1rem;
    }

    .circle-signature-section h3 {
      margin: 0;
      color: #263a34;
      font-size: 1.5rem;
    }

    .circle-signature-section > header p {
      max-width: 52rem;
      margin: 0;
      color: #78857f;
      font-size: .96rem;
      line-height: 1.55;
      text-align: left;
    }

    .circle-signature-natural-row {
      display: flex;
      justify-content: flex-start;
    }

    .circle-signature-natural {
      display: grid;
      grid-template-columns: 9.3rem minmax(13.5rem, 1fr);
      gap: 1.05rem;
      align-items: center;
      width: min(100%, 34.5rem);
      padding: .825rem 1.125rem;
      color: #354a43;
      border: 1px solid #dfe8e5;
      border-radius: 9px;
      background: #fbfdfc;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .circle-signature-natural img {
      width: 100%;
      height: 4.95rem;
      object-fit: contain;
    }

    .circle-signature-natural span,
    .circle-signature-pair-copy {
      display: grid;
      gap: .1rem;
    }

    .circle-signature-natural small,
    .circle-signature-pair-copy small {
      color: #7b8a84;
      font-size: .84rem;
      font-weight: 900;
    }

    .circle-signature-natural strong,
    .circle-signature-pair-copy strong {
      color: #2b4039;
      font-size: 1.17rem;
    }

    .circle-signature-natural em,
    .circle-signature-pair-copy em {
      color: #8069a7;
      font-size: .855rem;
      font-style: normal;
      font-weight: 850;
    }

    .circle-signature-natural:hover,
    .circle-signature-natural.is-active {
      border-color: #00a99d;
      background: #f0faf8;
      box-shadow: inset 3px 0 #00a99d;
    }

    .circle-signature-pair-head,
    .circle-signature-pair-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 5.1rem minmax(0, 1fr);
      gap: .675rem;
      align-items: center;
    }

    .circle-signature-pair-head {
      padding: 0 .975rem;
      color: #718079;
      font-size: .885rem;
      font-weight: 900;
      text-align: center;
    }

    .circle-signature-pair-head span:first-child { color: #008f85; text-align: right; }
    .circle-signature-pair-head span:last-child { color: #8069a7; text-align: left; }
    .circle-signature-pair-head i { font-size: 1.2rem; font-style: normal; }

    .circle-signature-pair-table {
      display: grid;
      gap: .63rem;
    }

    .circle-signature-pair-row {
      position: relative;
    }

    .circle-signature-pair-row::before {
      position: absolute;
      right: 1.7rem;
      left: 1.7rem;
      z-index: 0;
      height: 1px;
      background: linear-gradient(90deg, #a7ddd7, #dfe8e5 48%, #d4c9e5);
      content: "";
    }

    .circle-signature-pair-axis {
      display: grid;
      z-index: 1;
      gap: .05rem;
      place-items: center;
      min-height: 5.175rem;
      border: 1px solid #dbe6e2;
      border-radius: 8px;
      background: #fff;
    }

    .circle-signature-pair-axis b {
      color: #40564f;
      font-size: 1.14rem;
    }

    .circle-signature-pair-axis span {
      color: #87938e;
      font-size: .72rem;
      font-weight: 850;
    }

    .circle-signature-pair-cell {
      display: grid;
      z-index: 1;
      grid-template-columns: minmax(10.8rem, 13.5rem) 8.4rem;
      gap: .75rem;
      align-items: center;
      justify-self: end;
      width: min(100%, 24rem);
      min-width: 0;
      min-height: 6.225rem;
      padding: .57rem .87rem;
      overflow: hidden;
      color: #354a43;
      border: 1px solid #dfe8e5;
      border-radius: 8px;
      background: #fbfdfc;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .circle-signature-pair-cell.is-flat {
      grid-template-columns: 8.4rem minmax(10.8rem, 13.5rem);
      justify-self: start;
    }

    .circle-signature-pair-cell.is-sharp .circle-signature-pair-art { grid-column: 2; grid-row: 1; }
    .circle-signature-pair-cell.is-sharp .circle-signature-pair-copy { grid-column: 1; grid-row: 1; text-align: left; }
    .circle-signature-pair-cell.is-flat .circle-signature-pair-art { grid-column: 1; grid-row: 1; }
    .circle-signature-pair-cell.is-flat .circle-signature-pair-copy { grid-column: 2; grid-row: 1; text-align: left; }

    .circle-signature-pair-art {
      display: grid;
      place-items: center;
      min-width: 0;
      height: 4.875rem;
      overflow: hidden;
      border-radius: 5px;
      background: #fff;
    }

    .circle-signature-pair-art img {
      display: block;
      width: auto;
      max-width: 100%;
      height: 4.575rem;
      max-height: 4.575rem;
      object-fit: contain;
    }

    .circle-signature-pair-cell:hover,
    .circle-signature-pair-cell.is-active {
      border-color: #00a99d;
      background: #f0faf8;
      box-shadow: inset 3px 0 #00a99d;
    }

    .circle-signature-pair-cell.is-flat:hover,
    .circle-signature-pair-cell.is-flat.is-active {
      border-color: #9a86bc;
      background: #f7f4fb;
      box-shadow: inset -3px 0 #9a86bc;
    }

    .circle-signature-usage-note {
      margin: 0;
      padding: .87rem 1.08rem;
      color: #66766f;
      border-left: 3px solid #d6c8e7;
      border-radius: 0 7px 7px 0;
      background: #faf8fc;
      font-size: .885rem;
      line-height: 1.55;
    }

    .circle-signature-usage-note strong {
      color: #40564f;
    }

    .circle-signature-boundary {
      border: 1px dashed #d8e2de;
      border-radius: 8px;
      background: #fafcfb;
    }

    .circle-signature-boundary summary {
      padding: .87rem 1.125rem;
      color: #687771;
      font-size: .93rem;
      font-weight: 900;
      cursor: pointer;
    }

    .circle-signature-boundary > div {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .5rem;
      padding: 0 .65rem .65rem;
    }

    .circle-signature-boundary article {
      display: grid;
      grid-template-columns: 6.5rem minmax(0, 1fr);
      gap: .55rem;
      align-items: center;
      padding: .5rem;
      border: 1px solid #e1e9e6;
      border-radius: 7px;
      background: #fff;
    }

    .circle-signature-boundary img {
      width: 100%;
      height: 3.5rem;
      object-fit: contain;
    }

    .circle-signature-boundary article span { display: grid; gap: .12rem; }
    .circle-signature-boundary strong { color: #30453e; font-size: .7rem; }
    .circle-signature-boundary small { color: #718079; font-size: .55rem; line-height: 1.45; }

    .circle-signature-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: .42rem;
    }

    .circle-signature-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: .18rem .42rem;
      align-items: center;
      min-width: 0;
      padding: .55rem;
      color: #354a43;
      border: 1px solid #dfe8e5;
      border-radius: 7px;
      background: #fbfdfc;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .circle-signature-item > span {
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 1.7rem;
      height: 1.7rem;
      color: #00a99d;
      border-radius: 50%;
      background: #eef9f7;
      font-size: .58rem;
      font-weight: 950;
    }

    .circle-signature-item strong { font-size: .72rem; }
    .circle-signature-item small { color: #72817b; font-size: .56rem; font-weight: 850; text-align: right; }
    .circle-signature-item em { color: #8069a7; font-size: .57rem; font-style: normal; font-weight: 850; }

    .circle-signature-item:hover,
    .circle-signature-item.is-active {
      border-color: #00a99d;
      background: #f0faf8;
      box-shadow: inset 3px 0 #00a99d;
    }

    @media (min-width: 1181px) {
      .circle-signature-section {
        width: calc((100% - 1rem) * .575);
      }
    }

    .circle-source-reference {
      border: 1px solid #e0e8e5;
      border-radius: 8px;
      background: #fafcfb;
    }

    .circle-source-reference summary {
      padding: .65rem .8rem;
      color: #5f706a;
      font-size: .68rem;
      font-weight: 850;
      cursor: pointer;
    }

    .circle-source-reference img {
      display: block;
      width: 100%;
      height: auto;
      border-top: 1px solid #e0e8e5;
    }

    @media (min-width: 1600px) and (min-height: 900px) {
      .circle-lesson-grid {
        height: min(50.75rem, calc(100svh - 9rem));
        max-height: 50.75rem;
      }

      .circle-board {
        width: min(100%, 47rem);
        max-height: 47rem;
      }

    }

    @media (max-width: 1420px) {
      .circle-lesson-grid {
        grid-template-columns: minmax(31rem, 1fr) minmax(20rem, .78fr);
      }

      .circle-signature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

    }

    @media (max-width: 1180px) {
      .circle-lesson-header {
        grid-template-columns: 1fr;
        gap: .65rem;
      }

      .circle-lesson-grid {
        grid-template-columns: minmax(29rem, 1fr) minmax(19rem, .72fr);
      }

      .circle-concept-strip {
        grid-template-columns: 1fr;
      }

      .circle-board-controls button span {
        display: none;
      }

      .circle-signature-section > header {
        align-items: start;
      }

      .circle-signature-section > header p {
        text-align: left;
      }
    }

    /* Theory chapter: Key signatures */
    .key-lesson-shell {
      display: grid;
      gap: .9rem;
      min-width: 0;
      padding: clamp(.8rem, 1.4vw, 1.2rem);
      color: #243a34;
      border: 1px solid #dce7e2;
      border-radius: 12px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 10px 22px rgba(28, 45, 41, .05);
    }

    .key-lesson-header {
      display: grid;
      grid-template-columns: minmax(19rem, .8fr) minmax(28rem, 1.2fr);
      gap: clamp(1.25rem, 4vw, 3.5rem);
      align-items: end;
      padding: .45rem .35rem .9rem;
      border-top: 4px solid #00a99d;
      border-bottom: 1px solid #e1ebe7;
    }

    .key-lesson-header > div,
    .key-signature-gallery > header > div {
      display: grid;
      gap: .25rem;
    }

    .key-lesson-header span,
    .key-signature-gallery > header span,
    .key-selection-panel > div > span {
      color: #008f85;
      font-size: .64rem;
      font-weight: 950;
      letter-spacing: .13em;
    }

    .key-lesson-header h2 {
      max-width: 34rem;
      margin: 0;
      font-size: clamp(1.45rem, 2.15vw, 2.1rem);
      line-height: 1.14;
      letter-spacing: -.035em;
    }

    .key-lesson-header p,
    .key-signature-gallery > header p {
      margin: 0;
      color: #61716b;
      font-size: .76rem;
      line-height: 1.7;
    }

    .key-order-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .65rem;
    }

    .key-order-strip article {
      display: grid;
      grid-template-columns: 2.45rem minmax(0, 1fr);
      gap: .75rem;
      align-items: center;
      padding: .75rem .85rem;
      border: 1px solid #dfe9e5;
      border-radius: 9px;
      background: #fbfdfc;
    }

    .key-order-strip article > b {
      display: grid;
      place-items: center;
      width: 2.45rem;
      height: 2.45rem;
      color: #fff;
      border-radius: 8px;
      background: #00a99d;
      font-size: 1.35rem;
    }

    .key-order-strip article:nth-child(2) > b { background: #9a86bc; }
    .key-order-strip article > div { display: grid; gap: .12rem; }
    .key-order-strip span { color: #7b8a84; font-size: .6rem; font-weight: 900; letter-spacing: .08em; }
    .key-order-strip strong { font-size: .9rem; letter-spacing: .08em; }
    .key-order-strip p { margin: 0; color: #6c7b75; font-size: .65rem; line-height: 1.5; }

    .key-signature-gallery {
      display: grid;
      gap: .75rem;
      padding: .8rem;
      border: 1px solid #dce7e2;
      border-radius: 10px;
      background: #fff;
    }

    .key-signature-gallery > header {
      display: grid;
      grid-template-columns: minmax(16rem, .75fr) minmax(22rem, 1.25fr);
      gap: 1rem;
      align-items: end;
      padding-bottom: .65rem;
      border-bottom: 1px solid #e6eeeb;
    }

    .key-signature-gallery h3,
    .key-selection-panel h3,
    .key-reading-notes h3 {
      margin: 0;
    }

    .key-signature-gallery h3 { font-size: 1rem; }

    .key-signature-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: .55rem;
    }

    .key-signature-card {
      position: relative;
      display: grid;
      grid-template-rows: minmax(7rem, 1fr) auto;
      min-width: 0;
      min-height: 10.3rem;
      padding: .55rem;
      color: #2a4039;
      border: 1px solid #dce7e2;
      border-radius: 9px;
      background: #fbfdfc;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .key-signature-card:hover {
      border-color: #92cec7;
      box-shadow: 0 7px 16px rgba(31, 72, 63, .08);
      transform: translateY(-1px);
    }

    .key-signature-card.is-active {
      border-color: #00a99d;
      background: #f3fbfa;
      box-shadow: inset 0 0 0 1px #00a99d, 0 8px 18px rgba(0, 169, 157, .1);
    }

    .key-signature-count {
      position: absolute;
      top: .42rem;
      right: .42rem;
      z-index: 1;
      min-width: 1.8rem;
      padding: .2rem .35rem;
      color: #53665f;
      border-radius: 999px;
      background: #edf3f1;
      font-size: .6rem;
      font-weight: 950;
      text-align: center;
    }

    .key-signature-card.is-active .key-signature-count { color: #fff; background: #00a99d; }

    .key-signature-art {
      display: grid;
      place-items: center;
      min-width: 0;
      height: 7rem;
      padding: .15rem .2rem;
      overflow: hidden;
    }

    .key-signature-art img {
      display: block;
      width: auto;
      max-width: 100%;
      height: 6.6rem;
      object-fit: contain;
    }

    .key-signature-label {
      display: grid;
      gap: .08rem;
      padding-top: .45rem;
      border-top: 1px solid #e4ece9;
    }

    .key-signature-label strong { font-size: .78rem; }
    .key-signature-label small { color: #7a8883; font-size: .58rem; font-weight: 750; }

    .key-selection-panel {
      display: grid;
      grid-template-columns: minmax(18rem, 1fr) auto;
      gap: 1rem;
      align-items: center;
      padding: .8rem 1rem;
      border-left: 4px solid #00a99d;
      border-radius: 8px;
      background: linear-gradient(110deg, #effaf8, #f8fbfa 68%);
    }

    .key-selection-panel > div { display: grid; gap: .18rem; }
    .key-selection-panel h3 { font-size: 1.05rem; }
    .key-selection-panel p { margin: 0; color: #61716b; font-size: .69rem; line-height: 1.55; }
    .key-selection-panel dl { display: grid; grid-template-columns: repeat(3, auto); gap: .5rem; margin: 0; }
    .key-selection-panel dl div { min-width: 5rem; padding: .42rem .58rem; border: 1px solid #d8e7e2; border-radius: 7px; background: rgba(255, 255, 255, .82); }
    .key-selection-panel dt { color: #7d8c86; font-size: .55rem; font-weight: 850; }
    .key-selection-panel dd { margin: .08rem 0 0; font-size: .76rem; font-weight: 950; }

    .key-reading-notes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .55rem;
    }

    .key-reading-notes article {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .65rem;
      padding: .7rem;
      border: 1px solid #e1e9e6;
      border-radius: 8px;
      background: #fff;
    }

    .key-reading-notes article > span { color: #00a99d; font-size: .62rem; font-weight: 950; }
    .key-reading-notes h3 { font-size: .76rem; }
    .key-reading-notes p { margin: .15rem 0 0; color: #6d7b76; font-size: .64rem; line-height: 1.5; }

    .key-source-note {
      margin: 0;
      color: #7a8883;
      font-size: .58rem;
      line-height: 1.55;
      text-align: right;
    }

    .key-source-note a { color: #007f76; }

    @media (max-width: 1420px) {
      .key-signature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (max-width: 980px) {
      .key-lesson-header,
      .key-signature-gallery > header { grid-template-columns: 1fr; gap: .55rem; }
      .key-signature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .key-selection-panel { grid-template-columns: 1fr; }
      .key-selection-panel dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .key-reading-notes { grid-template-columns: 1fr; }
    }

    @media (max-width: 680px) {
      .key-order-strip { grid-template-columns: 1fr; }
      .key-signature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .key-selection-panel dl { grid-template-columns: 1fr; }
    }

    /* Theory chapter: Intervals */
    .interval-lesson-shell {
      display: grid;
      gap: 1rem;
      min-width: 0;
      padding: clamp(.8rem, 1.4vw, 1.2rem);
      border: 1px solid #dce7e2;
      border-radius: 12px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 10px 22px rgba(28, 45, 41, .05);
    }

    .interval-lesson-header {
      display: grid;
      grid-template-columns: minmax(22rem, .85fr) minmax(31rem, 1.15fr);
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: end;
      padding: .45rem .35rem 1rem;
      border-top: 4px solid #6e93db;
      border-bottom: 1px solid #e1ebe7;
    }

    .interval-lesson-header > div {
      display: grid;
      gap: .28rem;
    }

    .interval-lesson-header span,
    .interval-piano-card > header span,
    .interval-reference-section > header span {
      color: #527bc7;
      font-size: .65rem;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .interval-lesson-header h2 {
      max-width: 34rem;
      margin: 0;
      color: #1c2f2a;
      font-size: clamp(1.45rem, 2.2vw, 2.15rem);
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .interval-lesson-header p {
      max-width: 54rem;
      margin: 0;
      color: #61716b;
      font-size: .78rem;
      line-height: 1.75;
    }

    .interval-reading-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .7rem;
      padding: .7rem;
      border: 1px solid #e0e8e5;
      border-radius: 8px;
      background: #fbfdfc;
    }

    .interval-reading-strip article {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .55rem;
      align-items: center;
      min-width: 11rem;
    }

    .interval-reading-strip article > b {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      color: #fff;
      border-radius: 50%;
      background: #d8c85a;
      font-size: .68rem;
    }

    .interval-reading-strip article:nth-of-type(2) > b { background: #00a99d; }
    .interval-reading-strip article:nth-of-type(3) > b { background: #6e93db; }

    .interval-reading-strip article > div {
      display: grid;
      gap: .08rem;
    }

    .interval-reading-strip strong {
      color: #30453e;
      font-size: .75rem;
    }

    .interval-reading-strip span {
      color: #7b8883;
      font-size: .6rem;
    }

    .interval-reading-strip > i {
      color: #a1afaa;
      font-size: .8rem;
      font-style: normal;
    }

    #interval-interactive {
      display: grid;
      gap: 1rem;
      min-width: 0;
    }

    .interval-lab-grid {
      display: grid;
      grid-template-columns: minmax(37rem, 1.35fr) minmax(20rem, .65fr);
      gap: 1rem;
      align-items: stretch;
    }

    .interval-piano-card,
    .interval-result-card,
    .interval-reference-section {
      min-width: 0;
      border: 1px solid #dce7e2;
      border-radius: 10px;
      background: #fff;
    }

    .interval-piano-card {
      display: grid;
      gap: .7rem;
      align-content: start;
      padding: .85rem;
      overflow: hidden;
    }

    .interval-piano-card > header,
    .interval-reference-section > header {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: end;
    }

    .interval-piano-card > header > div:first-child,
    .interval-reference-section > header > div {
      display: grid;
      gap: .12rem;
    }

    .interval-piano-card h3,
    .interval-reference-section h3 {
      margin: 0;
      color: #263a34;
      font-size: 1rem;
    }

    .interval-piano-actions {
      display: flex;
      gap: .4rem;
    }

    .interval-piano-actions button,
    .interval-play-actions button {
      min-height: 2rem;
      padding: 0 .65rem;
      color: #3c514a;
      border: 1px solid #cfddd8;
      border-radius: 6px;
      background: #f7faf9;
      font: inherit;
      font-size: .65rem;
      font-weight: 900;
      cursor: pointer;
    }

    .interval-piano-actions button.is-active {
      color: #fff;
      border-color: #00a99d;
      background: #00a99d;
      box-shadow: 0 5px 12px rgba(0, 169, 157, .17);
    }

    .interval-keyboard-stage.scale-original-map.stage {
      width: fit-content;
      max-width: 100%;
      justify-self: center;
      padding: .55rem;
      overflow-x: auto;
    }

    .keyboard-map.interval-lesson-keyboard {
      --key-unit: 3.55rem;
      --key-height: 13.5rem;
      width: calc(var(--white-count) * var(--key-width) + .9rem);
      min-width: calc(var(--white-count) * var(--key-width) + .9rem);
      height: var(--key-height);
      overflow: hidden;
      background: #f7faf9;
    }

    .interval-lesson-keyboard .piano-key {
      cursor: pointer;
      transition: background .15s ease, box-shadow .15s ease, opacity .15s ease;
    }

    .interval-lesson-keyboard .piano-key:hover:not(:disabled),
    .interval-lesson-keyboard .piano-key:focus-visible:not(:disabled) {
      outline: 2px solid #6e93db;
      outline-offset: -3px;
    }

    .interval-lesson-keyboard .piano-key.white.is-start {
      background: linear-gradient(#fffbe5, #f3e89c);
      box-shadow: inset 0 -6px #d8c85a;
    }

    .interval-lesson-keyboard .piano-key.white.is-end {
      background: linear-gradient(#effcf9, #bfeae4);
      box-shadow: inset 0 -6px #00a99d;
    }

    .interval-lesson-keyboard .piano-key.white.is-same {
      background: linear-gradient(135deg, #fff7ce 0 50%, #d6f3ef 50% 100%);
      box-shadow: inset 0 -6px #6e93db;
    }

    .interval-lesson-keyboard .piano-key.black.is-start { background: #a89226; }
    .interval-lesson-keyboard .piano-key.black.is-end { background: #007f76; }
    .interval-lesson-keyboard .piano-key.black.is-same { background: #526fa9; }

    .interval-lesson-keyboard .piano-key.is-unavailable {
      cursor: not-allowed;
      opacity: .32;
    }

    .interval-key-name {
      position: absolute;
      right: 0;
      bottom: .45rem;
      left: 0;
      color: #364841;
      font-size: .72rem;
      font-weight: 900;
      text-align: center;
      pointer-events: none;
    }

    .interval-lesson-keyboard .piano-key.black .interval-key-name {
      display: none;
    }

    .interval-reference-token {
      position: absolute;
      right: 0;
      bottom: 2.15rem;
      left: 0;
      color: #283b35;
      font-size: .72rem;
      font-weight: 950;
      text-align: center;
      pointer-events: none;
    }

    .interval-lesson-keyboard .piano-key.black .interval-reference-token {
      bottom: .72rem;
      color: #fff;
      font-size: .62rem;
    }

    .interval-key-marker {
      position: absolute;
      z-index: 6;
      right: 50%;
      bottom: 2rem;
      display: grid;
      place-items: center;
      width: 3.05rem;
      min-width: 3.05rem;
      aspect-ratio: 1;
      color: #24352f;
      border: 3px solid #fff;
      border-radius: 50%;
      background: #d8c85a;
      box-shadow: 0 7px 14px rgba(39, 53, 48, .18);
      transform: translateX(50%);
      pointer-events: none;
    }

    .interval-key-marker.is-end {
      color: #fff;
      background: #00a99d;
    }

    .interval-key-marker.is-same {
      color: #fff;
      background: #6e93db;
    }

    .interval-key-marker small {
      font-size: .43rem;
      font-weight: 950;
      letter-spacing: .06em;
    }

    .interval-key-marker b {
      margin-top: -.18rem;
      font-size: .78rem;
    }

    .interval-lesson-keyboard .piano-key.black .interval-key-marker {
      bottom: .55rem;
      width: 2.2rem;
      min-width: 2.2rem;
      border-width: 2px;
    }

    .interval-keyboard-help {
      margin: 0;
      color: #75827d;
      font-size: .64rem;
      font-weight: 750;
      text-align: center;
    }

    .interval-result-card {
      display: grid;
      gap: .8rem;
      align-content: start;
      padding: 1rem;
      background: linear-gradient(145deg, #f9fbfa, #fff 50%);
    }

    .interval-result-card > span {
      color: #6e93db;
      font-size: .6rem;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .interval-result-card h3 {
      margin: 0;
      color: #20342e;
      font-size: 1.35rem;
      line-height: 1.1;
    }

    .interval-result-card > p {
      margin: 0;
      color: #687871;
      font-size: .7rem;
      line-height: 1.65;
    }

    .interval-result-placeholder {
      display: flex;
      gap: .55rem;
      align-items: center;
      justify-content: center;
      min-height: 5rem;
      padding: .7rem;
      color: #83908b;
      border: 1px dashed #cddbd6;
      border-radius: 8px;
      background: #f7faf9;
      font-size: .72rem;
      font-weight: 850;
    }

    .interval-result-placeholder b,
    .interval-result-placeholder em {
      display: grid;
      place-items: center;
      width: 2.8rem;
      height: 2.8rem;
      color: #273a34;
      border-radius: 50%;
      background: #d8c85a;
      font-size: .9rem;
      font-style: normal;
    }

    .interval-result-placeholder em {
      color: #fff;
      background: #c7d3cf;
    }

    .interval-result-placeholder i {
      color: #8b9994;
      font-style: normal;
    }

    .interval-result-route {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: .5rem;
      align-items: center;
      padding: .65rem;
      border: 1px solid #e0e8e5;
      border-radius: 8px;
      background: #f8faf9;
      text-align: center;
    }

    .interval-result-route b {
      color: #2e443d;
      font-size: .82rem;
    }

    .interval-result-route i {
      color: #00a99d;
      font-style: normal;
    }

    .interval-result-name {
      display: flex;
      justify-content: space-between;
      gap: .6rem;
      align-items: center;
    }

    .interval-result-name strong {
      padding: .45rem .6rem;
      color: #fff;
      border-radius: 6px;
      background: #6e93db;
      font-size: .78rem;
      white-space: nowrap;
    }

    .interval-result-card dl {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .4rem;
      margin: 0;
    }

    .interval-result-card dl > div {
      display: grid;
      gap: .18rem;
      padding: .55rem;
      border: 1px solid #e1e9e6;
      border-radius: 7px;
      background: #fff;
    }

    .interval-result-card dt {
      color: #84918c;
      font-size: .53rem;
      font-weight: 850;
    }

    .interval-result-card dd {
      margin: 0;
      color: #30463e;
      font-size: .76rem;
      font-weight: 950;
    }

    .interval-play-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .4rem;
      margin-top: auto;
    }

    .interval-play-actions button:first-child {
      color: #fff;
      border-color: #273c35;
      background: #273c35;
    }

    .interval-reference-section {
      display: grid;
      gap: .75rem;
      padding: .9rem;
    }

    .interval-reference-section > header p {
      margin: 0;
      color: #74817c;
      font-size: .65rem;
    }

    .interval-table-wrap {
      max-width: 100%;
      overflow-x: auto;
      border: 1px solid #e0e8e5;
      border-radius: 8px;
    }

    .interval-reference-table {
      width: 100%;
      min-width: 58rem;
      border-collapse: collapse;
      color: #50605a;
      font-size: .69rem;
      text-align: left;
    }

    .interval-reference-table th,
    .interval-reference-table td {
      padding: .53rem .62rem;
      border-right: 1px solid #e3ebe8;
      border-bottom: 1px solid #e3ebe8;
      transition: color .15s ease, background .15s ease;
    }

    .interval-reference-table th:last-child,
    .interval-reference-table td:last-child { border-right: 0; }
    .interval-reference-table tbody tr:last-child th,
    .interval-reference-table tbody tr:last-child td { border-bottom: 0; }

    .interval-reference-table thead th {
      color: #697871;
      background: #f2f6f4;
      font-size: .62rem;
      font-weight: 950;
      letter-spacing: .035em;
      white-space: nowrap;
    }

    .interval-reference-table tbody th {
      position: relative;
      min-width: 6rem;
      color: #2c4039;
      background: #fcfdfd;
      font-size: .72rem;
      font-weight: 900;
    }

    .interval-reference-table tbody th::before {
      position: absolute;
      top: .35rem;
      bottom: .35rem;
      left: 0;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: #00a99d;
      content: "";
      opacity: .4;
    }

    .interval-table-row.is-major th::before { background: #6e93db; }
    .interval-table-row.is-minor th::before { background: #9a86bc; }
    .interval-table-row.is-altered th::before { background: #d78479; }

    .interval-reference-table td:nth-child(5) {
      width: 4rem;
      text-align: center;
    }

    .interval-reference-table td:nth-child(5) b {
      display: inline-grid;
      place-items: center;
      width: 1.65rem;
      height: 1.65rem;
      border-radius: 50%;
      background: #edf3f1;
      font-size: .66rem;
    }

    .interval-reference-table code {
      color: #526fa9;
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: .68rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .interval-reference-table .is-active th,
    .interval-reference-table .is-active td {
      color: #17332c;
      background: #eaf8f5;
      box-shadow: inset 0 1px rgba(0, 169, 157, .18), inset 0 -1px rgba(0, 169, 157, .18);
    }

    .interval-reference-table .is-active th {
      color: #007f76;
      box-shadow: inset 4px 0 #00a99d, inset 0 1px rgba(0, 169, 157, .18), inset 0 -1px rgba(0, 169, 157, .18);
    }

    .interval-reference-table .is-active th::before { opacity: 0; }

    .interval-reference-table .is-active td:nth-child(5) b {
      color: #fff;
      background: #00a99d;
      box-shadow: 0 4px 9px rgba(0, 169, 157, .2);
    }

    @media (max-width: 1420px) {
      .interval-lab-grid {
        grid-template-columns: minmax(36rem, 1.2fr) minmax(19rem, .8fr);
      }

      .keyboard-map.interval-lesson-keyboard {
        --key-unit: 3.15rem;
      }
    }

    @media (max-width: 1180px) {
      .interval-lesson-header {
        grid-template-columns: 1fr;
        gap: .65rem;
      }

      .interval-reading-strip {
        justify-content: flex-start;
      }

      .interval-lab-grid {
        grid-template-columns: minmax(34rem, 1fr) minmax(18rem, .72fr);
      }

      .keyboard-map.interval-lesson-keyboard {
        --key-unit: 2.85rem;
      }
    }

    /* Theory chapter: Staff reading */
    .staff-lesson-shell {
      display: grid;
      gap: 1rem;
      min-width: 0;
      padding: clamp(.8rem, 1.4vw, 1.2rem);
      border: 1px solid #dce7e2;
      border-radius: 12px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 10px 22px rgba(28, 45, 41, .05);
    }

    .staff-lesson-header {
      display: grid;
      grid-template-columns: minmax(23rem, .85fr) minmax(31rem, 1.15fr);
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: end;
      padding: .45rem .35rem 1rem;
      border-top: 4px solid #9a86bc;
      border-bottom: 1px solid #e1ebe7;
    }

    .staff-lesson-header > div {
      display: grid;
      gap: .28rem;
    }

    .staff-lesson-header span,
    .staff-notation-card > header span,
    .staff-result-card > span,
    .staff-clef-card header span,
    .staff-tip-card > span {
      color: #8069a7;
      font-size: .65rem;
      font-weight: 950;
      letter-spacing: .12em;
    }

    .staff-lesson-header h2 {
      max-width: 36rem;
      margin: 0;
      color: #1c2f2a;
      font-size: clamp(1.45rem, 2.2vw, 2.15rem);
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .staff-lesson-header p {
      max-width: 54rem;
      margin: 0;
      color: #61716b;
      font-size: .78rem;
      line-height: 1.75;
    }

    .staff-reading-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .7rem;
      padding: .7rem;
      border: 1px solid #e0e8e5;
      border-radius: 8px;
      background: #fbfdfc;
    }

    .staff-reading-strip article {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .55rem;
      align-items: center;
      min-width: 13rem;
    }

    .staff-reading-strip article > b {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      color: #fff;
      border-radius: 50%;
      background: #9a86bc;
      font-size: .68rem;
    }

    .staff-reading-strip article:nth-of-type(2) > b { background: #6e93db; }
    .staff-reading-strip article:nth-of-type(3) > b { background: #00a99d; }

    .staff-reading-strip article > div {
      display: grid;
      gap: .08rem;
    }

    .staff-reading-strip strong {
      color: #30453e;
      font-size: .75rem;
    }

    .staff-reading-strip span {
      color: #7b8883;
      font-size: .6rem;
    }

    .staff-reading-strip > i {
      color: #a1afaa;
      font-size: .8rem;
      font-style: normal;
    }

    #staff-interactive {
      display: grid;
      gap: 1rem;
      min-width: 0;
    }

    .staff-lab-grid {
      display: grid;
      grid-template-columns: minmax(38rem, 1.4fr) minmax(17rem, .6fr);
      gap: 1rem;
      align-items: stretch;
    }

    .staff-notation-card,
    .staff-result-card,
    .staff-clef-card,
    .staff-tip-card {
      min-width: 0;
      border: 1px solid #dce7e2;
      border-radius: 10px;
      background: #fff;
    }

    .staff-notation-card {
      display: grid;
      gap: .7rem;
      align-content: start;
      padding: .85rem;
      overflow: hidden;
    }

    .staff-notation-card > header {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: end;
    }

    .staff-notation-card > header > div:first-child {
      display: grid;
      gap: .12rem;
    }

    .staff-notation-card h3 {
      margin: 0;
      color: #263a34;
      font-size: 1rem;
    }

    .staff-notation-actions {
      display: flex;
      gap: .4rem;
    }

    .staff-notation-actions button,
    .staff-result-card > button {
      min-height: 2rem;
      padding: 0 .65rem;
      color: #3c514a;
      border: 1px solid #cfddd8;
      border-radius: 6px;
      background: #f7faf9;
      font: inherit;
      font-size: .65rem;
      font-weight: 900;
      cursor: pointer;
    }

    .staff-notation-actions button.is-active {
      color: #fff;
      border-color: #00a99d;
      background: #00a99d;
      box-shadow: 0 5px 12px rgba(0, 169, 157, .17);
    }

    .staff-keyboard-stage.scale-original-map.stage {
      width: 100%;
      max-width: 100%;
      justify-self: center;
      padding: .3rem;
      overflow: hidden;
    }

    .staff-keyboard-stage .instrument-canvas {
      width: 100%;
      padding: 0;
      overflow: hidden;
      scrollbar-gutter: auto;
    }

    .keyboard-map.staff-lesson-keyboard {
      --key-width: calc((100% - .9rem) / var(--white-count));
      --key-height: 12.2rem;
      width: 100%;
      min-width: 0;
      height: var(--key-height);
      overflow: hidden;
      background: #f7faf9;
    }

    .staff-lesson-keyboard .piano-key.white {
      cursor: pointer;
      transition: background .15s ease, box-shadow .15s ease;
    }

    .staff-lesson-keyboard .piano-key.white:hover,
    .staff-lesson-keyboard .piano-key.white:focus-visible {
      outline: 2px solid #9a86bc;
      outline-offset: -3px;
    }

    .staff-lesson-keyboard .piano-key.white.is-selected {
      background: linear-gradient(#f0fcfa, #bceae3);
      box-shadow: inset 0 -6px #00a99d;
    }

    .staff-key-name {
      position: absolute;
      right: 0;
      bottom: .42rem;
      left: 0;
      color: #354840;
      font-size: .65rem;
      font-weight: 900;
      text-align: center;
      pointer-events: none;
    }

    .staff-middle-c-key {
      position: absolute;
      top: .35rem;
      right: 50%;
      color: #cf625b;
      font-size: .48rem;
      font-weight: 950;
      letter-spacing: .08em;
      writing-mode: vertical-rl;
      transform: translateX(50%);
      pointer-events: none;
    }

    .staff-key-marker {
      position: absolute;
      z-index: 6;
      right: 50%;
      bottom: 1.55rem;
      display: grid;
      place-items: center;
      width: 3.05rem;
      min-width: 3.05rem;
      aspect-ratio: 1;
      color: #fff;
      border: 3px solid #fff;
      border-radius: 50%;
      background: #00a99d;
      box-shadow: 0 7px 14px rgba(39, 53, 48, .18);
      transform: translateX(50%);
      pointer-events: none;
    }

    .staff-key-marker small {
      font-size: .45rem;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .staff-key-marker b {
      margin-top: -.15rem;
      font-size: .8rem;
    }

    .staff-diagram-wrap {
      min-width: 0;
      padding: .3rem;
      overflow-x: auto;
      border: 1px solid #e0e8e5;
      border-radius: 8px;
      background: #fbfdfc;
    }

    .grand-staff {
      display: block;
      width: 100%;
      min-width: 0;
      height: auto;
    }

    .staff-paper {
      fill: #fff;
      stroke: #e3ebe8;
      stroke-width: 1;
    }

    .staff-lines line {
      stroke: #53615c;
      stroke-width: 1.5;
    }

    .staff-clef {
      fill: #263b35;
      font-family: "Segoe UI Symbol", "Noto Music", serif;
      font-size: 84px;
    }

    .staff-clef--bass { font-size: 70px; }

    .staff-section-label {
      fill: #81908a;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-anchor: end;
      writing-mode: vertical-rl;
    }

    .staff-middle-c-label {
      fill: #cf625b;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .08em;
      text-anchor: middle;
    }

    .staff-note-target {
      cursor: pointer;
      outline: none;
    }

    .staff-pitch-surface {
      fill: transparent;
      cursor: crosshair;
      pointer-events: all;
      touch-action: manipulation;
    }

    .staff-note-hit {
      fill: transparent;
    }

    .staff-note-head {
      fill: #243730;
      transition: fill .15s ease, filter .15s ease;
    }

    .staff-note-stem,
    .staff-ledger-line {
      stroke: #243730;
      stroke-width: 2;
      transition: stroke .15s ease;
    }

    .staff-note-guide {
      stroke: #b5c0bc;
      stroke-width: 1;
      stroke-dasharray: 4 5;
      pointer-events: none;
    }

    .staff-note-name {
      fill: #4b5d56;
      font-size: 11px;
      font-weight: 900;
      text-anchor: middle;
      pointer-events: none;
    }

    .staff-note-target:hover .staff-note-head,
    .staff-note-target:focus .staff-note-head,
    .staff-note-target.is-selected .staff-note-head {
      fill: #00a99d;
      filter: drop-shadow(0 4px 5px rgba(0, 169, 157, .28));
    }

    .staff-note-target:hover .staff-note-stem,
    .staff-note-target:focus .staff-note-stem,
    .staff-note-target.is-selected .staff-note-stem,
    .staff-note-target.is-selected .staff-ledger-line {
      stroke: #00a99d;
    }

    .staff-lab-help {
      margin: 0;
      color: #75827d;
      font-size: .64rem;
      font-weight: 750;
      text-align: center;
    }

    .staff-result-card {
      display: grid;
      gap: .85rem;
      align-content: start;
      padding: 1rem;
      background: linear-gradient(145deg, #faf9fc, #fff 50%);
    }

    .staff-result-card h3 {
      margin: 0;
      color: #243830;
      font-size: 1.3rem;
      line-height: 1.15;
    }

    .staff-result-card > p,
    .staff-result-note p {
      margin: 0;
      color: #687871;
      font-size: .7rem;
      line-height: 1.65;
    }

    .staff-result-bridge {
      display: grid;
      grid-template-columns: auto 1fr auto 1fr auto;
      gap: .35rem;
      align-items: center;
      min-height: 5rem;
      padding: .7rem;
      border: 1px dashed #cddbd6;
      border-radius: 8px;
      background: #f8faf9;
      text-align: center;
    }

    .staff-result-bridge b {
      color: #8069a7;
      font-family: "Segoe UI Symbol", "Noto Music", serif;
      font-size: 2.15rem;
    }

    .staff-result-bridge i {
      color: #7e8d87;
      font-size: .56rem;
      font-style: normal;
      font-weight: 850;
    }

    .staff-result-bridge strong {
      display: grid;
      place-items: center;
      width: 3rem;
      height: 3rem;
      color: #fff;
      border-radius: 50%;
      background: #00a99d;
      font-size: .8rem;
    }

    .staff-result-note {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .7rem;
      align-items: center;
      padding: .7rem;
      border: 1px solid #e0e8e5;
      border-radius: 8px;
      background: #f8faf9;
    }

    .staff-result-note > b {
      display: grid;
      place-items: center;
      width: 3.2rem;
      height: 3.2rem;
      color: #fff;
      border-radius: 50%;
      background: #00a99d;
      box-shadow: 0 6px 13px rgba(0, 169, 157, .2);
      font-size: 1rem;
    }

    .staff-result-note > div {
      display: grid;
      gap: .15rem;
    }

    .staff-result-card dl {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .45rem;
      margin: 0;
    }

    .staff-result-card dl > div {
      display: grid;
      gap: .18rem;
      padding: .58rem;
      border: 1px solid #e1e9e6;
      border-radius: 7px;
      background: #fff;
    }

    .staff-result-card dt {
      color: #84918c;
      font-size: .53rem;
      font-weight: 850;
    }

    .staff-result-card dd {
      margin: 0;
      color: #30463e;
      font-size: .7rem;
      font-weight: 900;
      line-height: 1.4;
    }

    .staff-result-card > button {
      color: #fff;
      border-color: #273c35;
      background: #273c35;
    }

    .staff-reference-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem;
    }

    .staff-clef-card,
    .staff-tip-card {
      padding: .9rem;
    }

    .staff-clef-card {
      display: grid;
      grid-template-columns: minmax(10rem, .62fr) minmax(0, 1.38fr);
      gap: .85rem;
    }

    .staff-clef-card header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .65rem;
      align-items: center;
    }

    .staff-clef-card header > b {
      color: #8069a7;
      font-family: "Segoe UI Symbol", "Noto Music", serif;
      font-size: 3.25rem;
      font-weight: 400;
    }

    .staff-clef-card.is-bass header > b { color: #6e93db; }

    .staff-clef-card header > div {
      display: grid;
      gap: .12rem;
    }

    .staff-clef-card h3,
    .staff-tip-card h3 {
      margin: 0;
      color: #2b4038;
      font-size: .9rem;
    }

    .staff-clef-card dl {
      display: grid;
      gap: .35rem;
      margin: 0;
    }

    .staff-clef-card dl > div {
      display: grid;
      grid-template-columns: 5.2rem minmax(0, 1fr);
      gap: .5rem;
      align-items: baseline;
      padding-bottom: .3rem;
      border-bottom: 1px solid #e8eeec;
    }

    .staff-clef-card dl > div:last-child { border-bottom: 0; }

    .staff-clef-card dt {
      color: #7d8b85;
      font-size: .58rem;
      font-weight: 900;
    }

    .staff-clef-card dd {
      margin: 0;
      color: #465a52;
      font-size: .68rem;
      font-weight: 800;
      line-height: 1.45;
    }

    .staff-clef-mnemonic {
      grid-column: 1 / -1;
      display: grid;
      gap: .45rem;
      margin: .15rem 0 0;
      padding: .55rem;
      border: 1px solid #e2ddec;
      border-radius: 10px;
      background: #fcfaff;
    }

    .staff-clef-mnemonic.is-bass {
      border-color: #dce6f6;
      background: #f9fbff;
    }

    .staff-clef-mnemonic svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .staff-mnemonic-paper {
      fill: #fff;
      stroke: #e6e1ed;
      stroke-width: 1.5;
    }

    .staff-clef-mnemonic.is-bass .staff-mnemonic-paper { stroke: #dfe8f5; }

    .staff-mnemonic-lines line {
      stroke: #80908a;
      stroke-width: 1.4;
    }

    .staff-mnemonic-clef {
      fill: #8069a7;
      font-family: "Segoe UI Symbol", "Noto Music", serif;
      font-size: 70px;
    }

    .staff-clef-mnemonic.is-bass .staff-mnemonic-clef {
      fill: #6e93db;
      font-size: 62px;
    }

    .staff-mnemonic-tag {
      fill: #8b78aa;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .13em;
    }

    .staff-mnemonic-line-note circle {
      fill: #8069a7;
      stroke: #fff;
      stroke-width: 3;
      filter: drop-shadow(0 3px 4px rgba(85, 67, 115, .2));
    }

    .staff-clef-mnemonic.is-bass .staff-mnemonic-line-note circle { fill: #6e93db; }

    .staff-mnemonic-line-note text,
    .staff-mnemonic-space-note text {
      fill: #fff;
      font-size: 10px;
      font-weight: 950;
      text-anchor: middle;
    }

    .staff-mnemonic-space-note circle {
      fill: #00a99d;
      stroke: #fff;
      stroke-width: 2.5;
      filter: drop-shadow(0 2px 3px rgba(0, 129, 120, .2));
    }

    .staff-clef-mnemonic.is-bass .staff-mnemonic-space-note circle { fill: #e1c84e; }

    .staff-mnemonic-caption rect { fill: #f0ebf7; }
    .staff-clef-mnemonic.is-bass .staff-mnemonic-caption rect { fill: #eaf0fb; }
    .staff-mnemonic-caption.is-space rect { fill: #e6f7f4; }
    .staff-clef-mnemonic.is-bass .staff-mnemonic-caption.is-space rect { fill: #fff7d9; }

    .staff-mnemonic-caption text {
      fill: #56456f;
      font-size: 10px;
      font-weight: 900;
      text-anchor: middle;
    }

    .staff-clef-mnemonic.is-bass .staff-mnemonic-caption text { fill: #466496; }
    .staff-mnemonic-caption.is-space text { fill: #127d75; }
    .staff-clef-mnemonic.is-bass .staff-mnemonic-caption.is-space text { fill: #756114; }

    .staff-clef-mnemonic figcaption {
      display: flex;
      flex-wrap: wrap;
      gap: .25rem .7rem;
      color: #65746e;
      font-size: .6rem;
      line-height: 1.5;
    }

    .staff-clef-mnemonic figcaption b { color: #514364; }
    .staff-clef-mnemonic.is-bass figcaption b { color: #466496; }

    .staff-tip-card {
      display: grid;
      gap: .35rem;
      align-content: start;
      border-left: 4px solid #00a99d;
      background: #f8fcfb;
    }

    .staff-tip-card:last-child {
      border-left-color: #d8c85a;
      background: #fffdf4;
    }

    .staff-tip-card p {
      margin: 0;
      color: #66766f;
      font-size: .7rem;
      line-height: 1.65;
    }

    @media (max-width: 1420px) {
      .staff-lab-grid {
        grid-template-columns: minmax(36rem, 1.25fr) minmax(17rem, .75fr);
      }

      .keyboard-map.staff-lesson-keyboard {
        --key-unit: 1.8rem;
      }
    }

    @media (max-width: 1180px) {
      .staff-lesson-header {
        grid-template-columns: 1fr;
        gap: .65rem;
      }

      .staff-reading-strip {
        justify-content: flex-start;
      }

      .staff-lab-grid {
        grid-template-columns: minmax(35rem, 1fr) minmax(17rem, .7fr);
      }

      .keyboard-map.staff-lesson-keyboard {
        --key-unit: 1.7rem;
      }
    }