@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');

:root {
  color-scheme: dark;
  --bg: #17191c;
  --chrome: #1d2024;
  --panel: #22262b;
  --panel-2: #292e34;
  --panel-3: #30363d;
  --line: #3b424b;
  --line-soft: #30363d;
  --text: #eef0ed;
  --muted: #8f98a4;
  --faint: #626b76;
  --gold: #f0c760;
  --gold-ink: #162238;
  --scale: #45d8c4;
  --feature: #b68cff;
  --blue: #6e8cff;
  --danger: #ff806b;
  --white-key: #f3f4f1;
  --white-key-ink: #152035;
  --black-key: #344a64;
  --black-key-ink: #f7f8f5;
  --shadow: 0 20px 45px #0005;
  --mono: 'DM Mono', ui-monospace, monospace;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #e9e7df;
  --chrome: #f7f6f1;
  --panel: #fffefa;
  --panel-2: #f0eee6;
  --panel-3: #e7e5dc;
  --line: #c7c5bc;
  --line-soft: #d9d6cc;
  --text: #19202a;
  --muted: #66707d;
  --faint: #8a929b;
  --black-key: #27384d;
  --shadow: 0 18px 45px #33415522;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--text); background: var(--bg); overflow-x: hidden; }
button, input { font: inherit; }
button, a { color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #89a6ff; outline-offset: 2px; }

.scale-app { min-height: 100vh; display: grid; grid-template-columns: 286px minmax(0, 1fr); grid-template-rows: 54px minmax(calc(100vh - 80px), auto) 26px; grid-template-areas: "top top" "side work" "status status"; }
.topbar { grid-area: top; padding: 0 14px; display: grid; grid-template-columns: 250px 1fr auto; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #0c0e10; background: color-mix(in srgb, var(--chrome) 94%, transparent); backdrop-filter: blur(14px); box-shadow: inset 0 1px #ffffff10; }
.brand { width: fit-content; display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; align-items: center; column-gap: 9px; }
.brand>span { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--gold-ink); background: var(--gold); font: 800 10px var(--mono); transform: rotate(-3deg); box-shadow: inset 0 1px #fff8; }
.brand>b { align-self: end; font-size: 15px; letter-spacing: -.04em; }.brand>small { align-self: start; color: var(--faint); font: 500 7px var(--mono); letter-spacing: .15em; }
.top-status { justify-self: center; min-width: 0; display: flex; align-items: center; gap: 9px; }.top-status>i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--scale); box-shadow: 0 0 0 5px color-mix(in srgb, var(--scale) 16%, transparent); }.top-status span { min-width: 0; display: flex; align-items: baseline; gap: 10px; }.top-status b { font-size: 10px; white-space: nowrap; }.top-status small { max-width: 330px; color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 6px; }.top-actions a, .top-actions button { min-height: 31px; padding: 0 10px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--panel); font-size: 8px; font-weight: 700; }.top-actions a:hover, .top-actions button:hover { color: var(--text); border-color: var(--faint); }.top-actions button { min-width: 34px; }.mobile-only { display: none !important; }

.sidebar { grid-area: side; height: calc(100vh - 80px); padding: 14px 12px 18px; position: sticky; top: 54px; z-index: 20; border-right: 1px solid #0d0f12; background: var(--chrome); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.search-block label { display: block; margin: 0 0 7px 2px; color: var(--faint); font: 500 7px var(--mono); letter-spacing: .08em; }.search-input { height: 38px; display: grid; grid-template-columns: 32px 1fr; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); overflow: hidden; }.search-input span { color: var(--scale); text-align: center; font-size: 18px; }.search-input input { width: 100%; height: 100%; padding: 0 9px 0 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 9px; }
.category-nav { margin: 13px 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.category-nav button { min-height: 39px; padding: 6px 8px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--line-soft); border-radius: 6px; color: var(--muted); background: var(--panel); text-align: left; font-size: 8px; }.category-nav button small { color: var(--faint); font: 500 6px var(--mono); }.category-nav button:hover { color: var(--text); border-color: var(--faint); }.category-nav button.active { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }.category-nav button.active small { color: #5b4b25; }
.list-heading { height: 28px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); color: var(--muted); }.list-heading b { font-size: 9px; }.list-heading span { font: 500 7px var(--mono); }
.scale-list { display: grid; gap: 4px; }.scale-item { width: 100%; min-height: 46px; padding: 6px 8px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; text-align: left; }.scale-item:hover { color: var(--text); background: var(--panel); }.scale-item.active { color: var(--text); border-color: color-mix(in srgb, var(--gold) 52%, var(--line)); background: var(--panel-2); box-shadow: inset 3px 0 var(--gold); }.scale-item>span { color: var(--faint); font: 500 7px var(--mono); }.scale-item b { display: block; font-size: 9px; }.scale-item small { display: block; margin-top: 2px; color: var(--faint); font: 500 6px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.scale-item em { padding: 3px 5px; border-radius: 8px; color: var(--scale); background: color-mix(in srgb, var(--scale) 10%, transparent); font: 500 6px var(--mono); font-style: normal; }
.sidebar-note { margin: 17px 3px 0; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 7px; line-height: 1.7; }

.workspace { grid-area: work; min-width: 0; padding: 25px clamp(18px, 3vw, 48px) 54px; overflow: hidden; }
.scale-header { display: flex; align-items: end; justify-content: space-between; gap: 25px; }.eyebrow { display: flex; align-items: center; gap: 7px; }.eyebrow span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font: 500 7px var(--mono); }.eyebrow span:first-child { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }.title-block h1 { margin: 13px 0 2px; font-size: clamp(34px, 5vw, 70px); line-height: .94; letter-spacing: -.07em; }.title-block>p { margin: 0; color: var(--muted); font: 500 11px var(--mono); }.alias-row { min-height: 20px; margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }.alias-row span { padding: 3px 7px; border-radius: 9px; color: var(--muted); background: var(--panel); font-size: 7px; }
.transport { display: flex; gap: 7px; }.transport button { min-width: 122px; min-height: 58px; padding: 8px 11px; display: grid; grid-template-columns: 27px 1fr; grid-template-rows: auto auto; align-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); text-align: left; }.transport button>span { grid-row: 1 / 3; font-size: 19px; }.transport button>b { font-size: 9px; }.transport button>small { color: var(--muted); font-size: 7px; }.transport button:hover { border-color: var(--faint); transform: translateY(-1px); }.transport .primary-action { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }.transport .primary-action small { color: #635126; }

.control-strip { min-height: 58px; margin: 22px 0 12px; padding: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--chrome); }.root-control { min-width: 0; display: flex; align-items: center; gap: 9px; }.root-control>span { padding-left: 4px; color: var(--faint); font: 500 7px var(--mono); }.root-buttons { display: flex; flex-wrap: wrap; gap: 3px; }.root-buttons button { width: 31px; height: 31px; padding: 0; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--panel); font: 600 8px var(--mono); }.root-buttons button:hover { color: var(--text); }.root-buttons button.active { color: var(--gold-ink); border-color: var(--gold); background: var(--gold); }
.view-control { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }.view-control button { min-height: 32px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: var(--panel); font-size: 8px; }.view-control button:last-child { border-right: 0; }.view-control button.active { color: var(--text); background: var(--panel-3); box-shadow: inset 0 -2px var(--scale); }

.insight-grid { display: grid; grid-template-columns: 1.05fr 1fr 1.2fr 1.2fr; gap: 7px; }.insight { min-height: 112px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); }.insight>span { color: var(--faint); font: 500 7px var(--mono); letter-spacing: .08em; }.insight p { margin: 11px 0 0; color: color-mix(in srgb, var(--text) 82%, var(--muted)); font-size: 9px; line-height: 1.68; }.formula-card { background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 17%, var(--panel)), var(--panel)); }.formula-card>b { margin: 13px 0 7px; display: block; color: var(--text); font: 500 clamp(12px, 1.5vw, 18px) var(--mono); word-spacing: .3em; }.formula-card small { color: var(--scale); font: 500 8px var(--mono); line-height: 1.5; }.focus-card { border-color: color-mix(in srgb, var(--feature) 34%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--feature) 11%, var(--panel)), var(--panel)); }

.view-panel, .related-section { margin-top: 12px; padding: 15px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--chrome); box-shadow: var(--shadow); }.view-panel { display: none; }.view-panel.active { display: block; }.panel-heading { min-height: 45px; display: flex; align-items: start; justify-content: space-between; gap: 16px; }.panel-heading span { color: var(--scale); font: 500 7px var(--mono); letter-spacing: .1em; }.panel-heading h2 { margin: 5px 0 0; font-size: 15px; }.panel-heading h2 b { color: var(--gold); }.panel-heading>p { max-width: 430px; margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.6; text-align: right; }.legend { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; color: var(--muted); font-size: 7px; }.legend span { display: flex; align-items: center; gap: 4px; color: var(--muted); letter-spacing: 0; }.legend i { width: 9px; height: 9px; border-radius: 2px; }.white-dot { border: 1px solid #aeb8c5; background: var(--white-key); }.black-dot { border: 1px solid #142234; background: var(--black-key); }.scale-dot { border: 2px solid var(--scale); background: transparent; }.off-dot { border: 1px solid var(--line); background: var(--panel-2); }

.keyboard-wrap { min-width: 0; padding: 13px 0 0; overflow-x: auto; scrollbar-width: thin; }.piano-keyboard { min-width: 770px; height: 232px; position: relative; display: flex; border: 1px solid #718099; background: #d8dce0; box-shadow: 0 8px 22px #0005; user-select: none; }.piano-keyboard .key { border-radius: 0; transition: filter .12s, transform .12s; }.piano-keyboard .key:hover { filter: brightness(1.08); }.piano-keyboard button { touch-action: manipulation; }.white-key { height: 100%; flex: 1 1 0; padding: 0 2px 15px; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 7px; position: relative; z-index: 1; border: 0; border-right: 1px solid #aeb8c5; color: var(--white-key-ink); background: var(--white-key); }.white-key:nth-child(7n + 1) { box-shadow: inset 2px 0 #a8bfd6; }.black-key { width: 2.95%; height: 63%; padding: 17px 1px 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: absolute; top: 0; z-index: 3; border: 1px solid #142234; border-top: 0; color: var(--black-key-ink); background: var(--black-key); box-shadow: 0 5px 8px #0006; }.key .note-name { font: 700 11px var(--mono); }.key .degree { min-width: 24px; min-height: 24px; display: grid; place-items: center; border-radius: 12px; color: inherit; background: #ffffff12; font: 700 11px var(--mono); }.key:not(.included) .note-name, .key:not(.included) .degree { opacity: .28; }.key.included .degree { color: #102d2a; background: var(--scale); }.white-key.included { box-shadow: inset 0 -7px var(--scale); }.black-key.included { border-color: color-mix(in srgb, var(--scale) 75%, #142234); box-shadow: inset 0 -7px var(--scale), 0 5px 8px #0006; }.cycle-labels { min-width: 770px; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--faint); font: 500 7px var(--mono); text-align: center; }.cycle-labels span { padding-top: 8px; border-right: 1px dashed var(--line); }.cycle-labels span:last-child { border-right: 0; }

.performance-row { margin-top: 13px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 7px; }.difference-card, .motif-card { min-height: 90px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); }.difference-card>span, .motif-card>span { color: var(--faint); font: 500 7px var(--mono); }.difference-card h3, .motif-card h3 { margin: 8px 0; font-size: 13px; }.difference-card>div { display: flex; flex-wrap: wrap; gap: 5px; }.difference-card i { padding: 3px 7px; border-radius: 10px; font: 500 7px var(--mono); font-style: normal; }.difference-card .added { color: #dcd2ff; background: #7951bd55; }.difference-card .removed { color: #ffc5ba; background: #b8503a48; }.motif-card h3 { color: var(--feature); font: 500 13px var(--mono); word-spacing: .25em; }.motif-card p { margin: 0; color: var(--muted); font: 500 8px var(--mono); word-spacing: .2em; }

.root-atlas { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 7px; }.root-card { min-width: 0; padding: 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); }.root-card:hover { border-color: var(--faint); transform: translateY(-1px); }.root-card header { height: 26px; display: flex; align-items: start; justify-content: space-between; }.root-card header b { font-size: 11px; }.root-card header span { color: var(--faint); font: 500 6px var(--mono); }.mini-keyboard { height: 93px; min-width: 0; box-shadow: none; }.mini-keyboard .key .note-name { font-size: 7px; }.mini-keyboard .key .degree { min-width: 17px; min-height: 17px; border-radius: 8px; font-size: 7px; }.mini-keyboard .black-key { width: 8.9%; padding-top: 8px; }.mini-keyboard .white-key { padding-bottom: 6px; gap: 3px; }

.related-section { box-shadow: none; }.related-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }.related-card { min-width: 0; min-height: 93px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--muted); background: var(--panel); text-align: left; }.related-card:hover { color: var(--text); border-color: var(--feature); transform: translateY(-2px); }.related-card span { color: var(--feature); font: 500 7px var(--mono); }.related-card b { margin: 8px 0 3px; display: block; color: var(--text); font-size: 10px; }.related-card small { display: block; overflow: hidden; color: var(--faint); font: 500 6px var(--mono); text-overflow: ellipsis; white-space: nowrap; }

.statusbar { grid-area: status; padding: 0 12px; display: flex; align-items: center; gap: 22px; position: relative; z-index: 40; border-top: 1px solid var(--line-soft); color: var(--faint); background: var(--chrome); font: 500 7px var(--mono); }.statusbar span { display: flex; align-items: center; gap: 5px; }.statusbar span:nth-child(2) { margin-left: auto; }.statusbar i { width: 5px; height: 5px; border-radius: 50%; background: var(--scale); }.statusbar a { color: var(--scale); }

@media (max-width: 1180px) {
  .scale-app { grid-template-columns: 245px minmax(0, 1fr); }
  .topbar { grid-template-columns: 220px 1fr auto; }
  .insight-grid { grid-template-columns: 1fr 1fr; }
  .root-atlas { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .scale-app { grid-template-columns: 1fr; grid-template-areas: "top" "work" "status"; }
  .topbar { grid-template-columns: 1fr auto; }.top-status { display: none; }.mobile-only { display: grid !important; }
  .sidebar { width: min(330px, 88vw); height: calc(100vh - 54px); position: fixed; left: 0; top: 54px; z-index: 60; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 16px 0 40px #0008; }.sidebar.open { transform: translateX(0); }
  .workspace { padding-inline: 14px; }.scale-header { align-items: start; }.transport button { min-width: 55px; grid-template-columns: 1fr; text-align: center; }.transport button>span { grid-row: auto; }.transport small { display: none; }
  .control-strip { align-items: start; flex-direction: column; }.view-control { align-self: stretch; }.view-control button { flex: 1; }
  .root-atlas { grid-template-columns: 1fr 1fr; }.related-grid { grid-template-columns: 1fr 1fr; }
  .statusbar span:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
  .top-actions>a { display: none; }.brand small { display: none; }
  .scale-header { display: block; }.transport { margin-top: 17px; }.transport button { flex: 1; display: grid; grid-template-columns: 24px 1fr; text-align: left; }.transport button>span { grid-row: 1 / 3; }
  .insight-grid { grid-template-columns: 1fr; }.insight { min-height: 0; }
  .root-atlas { grid-template-columns: 1fr; }.related-grid { grid-template-columns: 1fr; }
  .performance-row { grid-template-columns: 1fr; }.panel-heading { display: block; }.legend { margin-top: 10px; justify-content: start; }.panel-heading>p { margin-top: 9px; text-align: left; }
  .title-block h1 { font-size: 42px; }.root-buttons button { width: 29px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }