@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,Noto Sans SC,PingFang SC,sans-serif;color:#1e302e;background:#f5f7f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f5f7f5}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,[role=button]:focus-visible{outline:3px solid #176e67;outline-offset:3px}#root{min-height:100vh}.atlas{--ink: #1e302e;--muted: #6b7a77;--line: #dfe6e2;--line-soft: #e9eeeb;--teal: #176e67;--teal-soft: #e4f1ed;--teal-ink: #115c56;--coral: #b85d51;--coral-soft: #f6e6e3;--bg: #f4f6f5;--card: #ffffff;--well: #f8faf9;--radius: 16px;--radius-sm: 10px;--row-h: 40px;min-height:100vh;background:var(--bg);color:var(--ink);color-scheme:light;font-size:13px}.atlas button{font:inherit;cursor:pointer;color:inherit}.atlas h1,.atlas h2,.atlas h3{margin:0;letter-spacing:-.02em}.atlas h2{font-size:17px;font-weight:700;line-height:1.2}.atlas h3{font-size:13px;font-weight:700;margin:0 0 8px}.atlas p{margin:0}.atlas ul,.atlas ol{margin:0;padding:0;list-style:none}.muted{color:var(--muted)}.small{font-size:11.5px}.kicker{color:var(--muted);font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}.info{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line);color:var(--muted);font-size:9.5px;font-weight:700;font-style:normal;vertical-align:2px;margin-left:4px;cursor:help}.site-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px 20px;background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.brand{color:var(--ink);font-size:15px;font-weight:750;letter-spacing:-.03em;text-decoration:none;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.brand-logo{width:30px;height:28px;display:block}button.lang-switch{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#ececec;color:#3c3c3c;font-size:12px;font-weight:650}button.lang-switch:hover{background:#e2e2e2}.search{position:relative;max-width:620px;width:100%;justify-self:center}.search input{width:100%;height:38px;border:1px solid #cbd8d2;border-radius:12px;outline:none;padding:0 12px 0 36px;background:#fff;color:var(--ink);font-size:13.5px}.search input::placeholder{color:#8a9a96;opacity:1}.search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #dceee8}.search-icon{position:absolute;top:0;left:11px;height:38px;display:grid;place-items:center;color:var(--muted);font-size:18px;pointer-events:none}.search-results{position:absolute;z-index:40;top:44px;left:0;right:0;max-height:380px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 14px 36px #12342e29}.search-results button{width:100%;display:flex;align-items:baseline;gap:12px;padding:8px 10px;border:0;border-radius:8px;background:transparent;text-align:left}.search-results button.is-cursor,.search-results button:hover{background:#eff6f2}.search-results button strong{min-width:80px;font-size:13.5px}.search-results button span{color:var(--muted);font-size:12px}.search-results p{margin:8px;font-size:12px}.search-heading{color:var(--muted);font-weight:700}.atlas-main{max-width:1180px;margin:0 auto;padding:14px 16px 54px;display:grid;gap:12px}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-width:0}.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.column{display:grid;gap:12px;align-content:start}@media (max-width: 900px){.columns{grid-template-columns:1fr}}.row-list{display:grid;gap:6px}.row{width:100%;min-height:var(--row-h);display:grid;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--well);text-align:left}button.row:hover{border-color:#a8cabe;background:#f1f7f4}.row.is-active{border-color:var(--teal);background:var(--teal-soft)}.row b{font-size:13.5px}.tag{display:inline-block;padding:2px 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:#eef2f0;color:var(--muted);line-height:1.3}.tag.kind-diatonic{background:var(--teal-soft);color:var(--teal-ink)}.tag.kind-secondaryDominant,.tag.kind-tritoneSub{background:var(--coral-soft);color:#8d3d33}.tag.kind-blues{background:#e9e5f3;color:#5b4580}.tag.kind-borrowed{background:#f0ead8;color:#7b5c1d}.tag.fn-tonic{background:#e6f0ea;color:#2d5f3f}.tag.fn-predominant{background:#e6ebf3;color:#35507a}.tag.fn-dominant{background:#f6e6e3;color:#8d3d33}.hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(300px,420px);gap:12px 24px;align-items:center}.hero-text{min-width:0}.hero h1{font-size:clamp(36px,4.5vw,52px);line-height:.95;font-weight:650;letter-spacing:-.06em;margin-top:2px;word-break:break-word;white-space:nowrap}.hero h1.is-long{font-size:clamp(28px,3.4vw,40px)}.tone-row{display:flex;flex-wrap:wrap;gap:6px}.hero-controls{display:grid;gap:8px}@media (max-width: 900px){.hero{grid-template-columns:1fr}.hero h1{white-space:normal}}.tone{min-width:46px;padding:6px 8px 5px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--well);text-align:center}.tone b{display:block;font-size:16px;line-height:1.1}.tone small{display:block;margin-top:2px;color:var(--muted);font-size:10.5px}.aliases{margin-top:6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.hero-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hero-actions .play-button.is-large{flex:1 1 auto}.pickers{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:8px}.picker{position:relative;min-width:0}.menu-trigger{width:100%;height:var(--row-h);display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--well);text-align:left}.menu-trigger:hover,.menu-trigger[aria-expanded=true]{border-color:#a8cabe;background:#eff7f3}.menu-trigger span{color:var(--muted);font-size:11px;flex:none}.menu-trigger b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:750}.menu-trigger:after{content:"";width:6px;height:6px;margin-left:auto;flex:none;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px)}.menu{position:absolute;z-index:35;top:calc(100% + 6px);left:0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 14px 36px #12342e2b}.root-menu{width:230px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.root-menu button{min-height:34px;border:0;border-radius:8px;background:#f5f8f6;font-size:13px;font-weight:700}.root-menu button:hover,.root-menu button.is-selected{background:var(--teal);color:#fff}.root-menu button.is-same-pc{outline:1px dashed #a8cabe}.type-menu{width:min(560px,calc(100vw - 32px));max-height:min(480px,70vh);overflow:auto;right:0;left:auto}.type-group+.type-group{margin-top:10px}.type-group-name{color:var(--muted);font-size:10.5px;font-weight:750;letter-spacing:.06em;margin:0 0 6px 2px;text-transform:uppercase}.type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.type-grid button{min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 9px;border:0;border-radius:9px;background:#f5f8f6;text-align:left}.type-grid button:hover{background:var(--teal-soft)}.type-grid button.is-selected{background:var(--teal)}.type-grid button.is-selected b,.type-grid button.is-selected span{color:#fff}.type-grid b{font-size:13px}.type-grid span{color:var(--muted);font-size:10.5px}@media (max-width: 600px){.type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pickers{grid-template-columns:1fr 1fr}}.play-button{height:36px;min-width:60px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #b9d7ce;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);font-size:13px;font-weight:750;white-space:nowrap}.play-button svg{width:13px;height:13px;fill:currentColor}.play-button:hover{background:#d2e9e3}.play-button.is-large{height:42px;padding:0 22px;font-size:14px}.play-button.is-stop{background:var(--coral-soft);border-color:#e3bbb4;color:#8d3d33}.ghost-button{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px}.ghost-button:hover{background:#f3f6f4}.link-button{border:0;background:none;color:var(--teal-ink);font-size:12.5px;font-weight:650;padding:8px 0 0}.toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}.toggle input{accent-color:var(--teal);margin:0}.voicing-tabs{display:flex;gap:2px;flex-wrap:wrap;background:#eef2f0;padding:3px;border-radius:999px}.voicing-tabs button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:650;color:var(--muted)}.voicing-tabs button.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 3px #00000014}.keyboard-wrap{overflow-x:auto}.keyboard{width:100%;min-width:520px;height:auto;display:block}.keyboard .key rect{stroke:#b7c0bb;stroke-width:1}.keyboard .key.white rect{fill:#fbfcfb}.keyboard .key.black rect{fill:#1f2422;stroke:#141716}.keyboard .key.is-on rect{fill:var(--key);stroke:var(--key)}.keyboard .key text{font-size:9px;font-weight:750;fill:#fff;pointer-events:none}.keyboard .key text.octave{fill:#9aa7a3;font-weight:600}.keyboard .key{cursor:pointer}.keyboard .key:hover rect{filter:brightness(.93)}.voicing-foot{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px}.voicing-notes{display:flex;gap:16px;flex-wrap:wrap}.hand{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.hand-label{color:var(--muted);font-size:10.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;margin-right:3px}.note-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:42px;height:38px;padding:0 7px;border-radius:9px;background:var(--c);color:#fff}.note-chip b{font-size:12.5px;line-height:1.1}.note-chip small{font-size:9.5px;opacity:.85}.note-chip.is-added{outline:2px dashed rgba(255,255,255,.7);outline-offset:-4px}.voicing-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.live-dot{align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:18px;font-size:11px;font-weight:700;color:var(--coral)}.live-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:#d6ddd9}.live-dot.is-live:before{background:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)}.spectrum-plot{position:relative;width:100%;aspect-ratio:4.2 / 1;min-height:140px;background:var(--well);border:1px solid var(--line-soft);border-radius:var(--radius-sm);overflow:hidden}.spectrum-plot svg,.spectrum-plot canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.spectrum-plot canvas{pointer-events:none}.spectrum-plot .axis-tick line{stroke:#e6ebe8;stroke-width:1}.spectrum-plot .axis-tick text{font-size:9px;fill:#9aa7a3}.spectrum-plot .axis-base{stroke:#cfd8d4;stroke-width:1}.spectrum-plot .partial text{font-size:9.5px;font-weight:700}.spectrum-plot .coincidence{fill:#fff;stroke:var(--coral);stroke-width:1.5}.spectrum-stats{display:flex;align-items:center;gap:16px}.stat{display:inline-flex;align-items:baseline;gap:8px}.stat-label{color:var(--muted);font-size:11.5px;font-weight:650}.stat b{font-size:15px;letter-spacing:-.01em}.spectrum-foot{margin-top:12px}.spectrum-foot-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.spectrum-foot-head h3{margin-bottom:6px}.spectrum-shared{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px}.spectrum-shared li{font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spectrum-shared small{color:var(--muted);margin-left:6px}@media (max-width: 1000px){.spectrum-shared{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 760px){.spectrum-shared{grid-template-columns:1fr}.spectrum-plot{aspect-ratio:2 / 1}}.swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.role{grid-template-columns:96px minmax(0,1fr) auto}.role-key{font-size:12.5px;font-weight:650}.role-numeral{font-size:14px}.role-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;font-size:11px}.key-note{margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--well);border:1px solid var(--line-soft)}.key-note h3{margin-bottom:6px}.key-note dl{margin:0;display:grid;gap:2px}.key-note dt{font-size:11px;font-weight:700;color:var(--muted)}.key-note dd{margin:0 0 6px;font-size:12.5px;line-height:1.5}.scale{grid-template-columns:auto minmax(0,1fr);min-height:48px;padding:6px 12px 6px 8px}.scale.fits-key{border-color:#a8cabe;background:#f1f7f4}.scale-play{width:30px;height:30px;border-radius:50%;border:1px solid #b9d7ce;background:var(--teal-soft);color:var(--teal-ink);display:grid;place-items:center}.scale-play svg{width:11px;height:11px;fill:currentColor}.scale-body{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.scale-body b{font-size:13px}.scale-body b .tag{margin-left:6px}.scale-notes{display:flex;flex-wrap:wrap;gap:3px}.scale-notes span{min-width:26px;text-align:center;padding:2px 5px;border-radius:6px;background:#eef2f0;color:var(--muted);font-size:11.5px;font-weight:600}.scale-notes span.is-chord-tone{background:var(--teal);color:#fff}.progression-list{display:grid;gap:10px}.progression{border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;background:var(--well)}.progression.is-playing{border-color:var(--teal)}.progression header{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.progression-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.progression h3{font-size:14px;margin:0}.slot-switch{display:inline-flex;gap:4px}.slot-switch button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 8px;font-size:11px;color:var(--muted)}.slot-switch button.is-active{border-color:var(--teal);color:var(--teal-ink);background:var(--teal-soft)}.progression-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.bpm{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.bpm input{width:54px;height:30px;border:1px solid var(--line);border-radius:8px;padding:0 6px;font-size:13px;color:var(--ink);background:#fff}.sheet{--cols: 4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px}.bar{display:flex;gap:3px;min-width:0;padding:3px;border-radius:10px;background:#fff;border:1px solid var(--line-soft)}.chord-cell{flex:1 1 0;min-width:0;height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 4px;border:0;border-radius:8px;background:#f3f6f4}.chord-cell b{font-size:13.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.chord-cell small{font-size:10.5px;color:var(--muted);line-height:1.2}.cell-notes{display:flex;gap:3px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;max-width:100%;line-height:1.3;margin-top:2px}.cell-notes sub{font-size:7px;vertical-align:-1px}.cell-notes .moved{color:var(--coral);font-weight:700}.chord-cell.is-current{background:var(--teal-soft)}.chord-cell.is-current b{color:var(--teal-ink)}.chord-cell.is-active{background:var(--teal)}.chord-cell.is-active b,.chord-cell.is-active small,.chord-cell.is-active .cell-notes,.chord-cell.is-active .cell-notes .moved{color:#fff}.chord-cell:hover{filter:brightness(.96)}.blurb{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5}@media (max-width: 760px){.sheet{grid-template-columns:repeat(min(2,var(--cols)),minmax(0,1fr))}.cell-notes{display:none}.chord-cell{height:52px}}.relation-group+.relation-group{margin-top:14px}.row-list.two-up{grid-template-columns:1fr 1fr}@media (max-width: 1000px){.row-list.two-up{grid-template-columns:1fr}}.relation{grid-template-columns:minmax(0,1fr) auto;min-height:36px}.relation .diff{font-size:12px;font-weight:650;white-space:nowrap}.relation .diff.kind-add{color:#2d5f3f}.relation .diff.kind-remove{color:#7b5c1d}.relation .diff.kind-alter,.relation .diff.kind-other{color:var(--coral)}.relation .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notes-panel .usage{font-size:13.5px;line-height:1.65}.notes-panel .typical{margin-top:8px;font-size:12.5px;line-height:1.6}.pitfalls{margin-top:12px}.pitfalls li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.55;margin-bottom:3px}.pitfalls li:before{content:"!";position:absolute;left:0;top:0;color:var(--coral);font-weight:800}.sources{margin-top:12px}.sources li{font-size:11.5px;line-height:1.6;margin-bottom:2px}.sources .tag{margin-right:6px}.sources a{color:var(--teal-ink);text-decoration:none}.sources a:hover{text-decoration:underline}.tag.src-textbook{background:var(--teal-soft);color:var(--teal-ink)}.tag.src-research{background:#e6ebf3;color:#35507a}.tag.src-book{background:#f0ead8;color:#7b5c1d}.tag.src-score{background:#e9e5f3;color:#5b4580}.set-theory-panel{padding:12px 18px}.set-theory-panel summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--muted)}.set-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:10px 0 0;font-size:12.5px;font-variant-numeric:tabular-nums}.set-facts dt{color:var(--muted)}.set-facts dd{margin:0}.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:20;height:30px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:11px;background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:var(--ink)}@media (max-width: 760px){.site-header{grid-template-columns:auto auto;grid-template-areas:"brand lang" "search search";row-gap:8px;padding:10px 16px}.brand{grid-area:brand}.lang-switch{grid-area:lang;justify-self:end}.search{grid-area:search;max-width:none}.hero{grid-template-columns:1fr}.panel{padding:14px}}