:root{color-scheme:dark;--bg:#080e18;--panel:#101b2b;--line:#29364a;--text:#eaf0f7;--muted:#a6b5ca;--root:#ef476f;--third:#ffd166;--fifth:#48c9ff;--accent:#dce7f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
.display-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:.875rem}.display-controls>span{color:var(--muted);font-size:.8rem}.tone-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}.tone-toggle input{accent-color:var(--fifth);width:20px;height:20px;cursor:pointer}.legend [hidden]{display:none!important}
.scale-reference{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px 24px;margin:0 0 24px}.scale-reference h2{font-size:1rem;margin-bottom:12px}.scale-notes{display:flex;gap:7px;flex-wrap:wrap}.scale-note{display:inline-flex;min-width:34px;min-height:38px;padding:7px 9px;align-items:center;justify-content:center;border:1px solid #b794f6;border-radius:6px;color:#d9c6ff}.scale-note.pentatonic{background:#294860;border-color:#6ca5cb;color:#fff;font-weight:650}.scale-reference>p{grid-column:1/-1;color:var(--muted);font-size:.8rem;margin:0}.scale-toggles{display:flex;gap:20px;flex-wrap:wrap}
.dot.pentatonic-other{background:#a3a3a3}.dot.full-scale-extra{background:#0b1320;border:2.5px solid #b794f6}
.scale-degree{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:34px}.chord-numeral{text-align:center;color:var(--text);font-size:.875rem;font-weight:600}
.pair-summary>div{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}.pair-summary #pair-notes{display:inline-flex!important;align-items:center;flex-wrap:wrap;gap:7px;margin:0!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}main{max-width:1512px;margin:auto;padding:32px 40px 20px}button,select{font:inherit}button,summary,select{cursor:pointer}button:focus-visible,select:focus-visible,summary:focus-visible,.neck-scroll:focus-visible{outline:3px solid var(--fifth);outline-offset:4px}header{display:flex;align-items:center;gap:16px;margin-bottom:30px}.brand-mark{display:flex;gap:4px;align-items:center;height:42px}.brand-mark i{width:7px;height:28px;background:var(--root);border-radius:4px}.brand-mark i:nth-child(2){height:42px;background:var(--third)}.brand-mark i:nth-child(3){height:34px;background:var(--fifth)}h1{font-size:clamp(1.6rem,3vw,2rem);letter-spacing:-.04em;margin:3px 0;font-weight:650}h2{font-size:1.25rem;letter-spacing:-.025em;margin:0}h3{font-size:1rem;margin:0}.eyebrow{font-size:.75rem;letter-spacing:.14em;color:var(--muted);font-weight:600;margin:0 0 7px}.tuning{margin-left:auto;letter-spacing:.18em;font-size:.9rem}.tuning span{display:block;font-size:.75rem;color:var(--muted);letter-spacing:0;text-align:right;margin-top:5px}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.controls label{display:flex;flex-direction:column;gap:9px;font-size:.875rem;color:var(--muted)}select{width:100%;background:var(--panel);color:var(--text);padding:13px 16px;border:1px solid #40516a;border-radius:8px;min-height:50px;font-size:1rem}.pair-summary{display:flex;justify-content:space-between;align-items:center;margin:18px 0 26px;gap:12px}.pair-summary strong{font-weight:600}.pair-summary #pair-notes{color:var(--muted);margin-left:20px}.link-label{color:var(--muted);font-size:.8rem}.workspace{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 24px 20px}.map-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.focus{display:flex;align-items:center;gap:12px;font-size:.875rem;color:var(--muted)}.segmented{display:flex;background:#070e19;border:1px solid var(--line);padding:4px;border-radius:8px;gap:4px}.segmented button{border:0;border-radius:5px;background:transparent;color:var(--muted);padding:9px 14px;min-height:40px;font-size:.875rem}.segmented button[aria-pressed=true]{background:#e2eaf6;color:#111a29;font-weight:650}.legend{display:flex;flex-wrap:wrap;gap:14px 24px;margin:22px 0 16px;font-size:.875rem}.legend>span{display:flex;align-items:center;gap:7px}.legend b{font-weight:800;color:var(--text);margin-left:1px}.dot{display:inline-block;flex:none;width:13px;height:13px;border-radius:50%}.root{background:var(--root)}.third{background:var(--third)}.fifth{background:var(--fifth)}.other{background:#46556b}.outline-legend{color:var(--muted);margin-left:auto}.neck-scroll{overflow-x:auto;scrollbar-color:#64758b #101b2b;scrollbar-width:thin;padding-bottom:7px}#neck{min-width:1080px}#neck svg{display:block;width:100%;height:386px}.map-caption{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.75rem;margin:8px 0 24px}.forms-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.forms-heading>span{font-size:.8rem;color:var(--muted)}.form-buttons{display:flex;gap:7px;flex-wrap:wrap}.form-buttons button{flex:1;min-width:88px;border:1px solid #3c4c63;border-radius:7px;background:transparent;color:var(--muted);padding:10px 8px;min-height:54px;position:relative}.form-buttons button b{font-size:1rem;color:var(--text);font-weight:600}.form-buttons button span{display:block;font-size:.75rem;margin-top:3px}.form-buttons button[aria-pressed=true]{background:#263649;border-color:#c0cde1;color:var(--text);box-shadow:inset 0 3px 0 #e1eafa}.detail{display:grid;grid-template-columns:1fr 1.35fr;gap:40px;padding:28px 0}.detail-info p:not(.eyebrow){color:var(--muted);line-height:1.6;margin:10px 0}.micro{font-size:.875rem;max-width:520px}.triad-area{padding-left:28px;border-left:1px solid var(--line)}.triad-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}.triad-buttons button{padding:9px 12px;color:var(--muted);background:transparent;border:1px solid #3a4b63;border-radius:7px;min-height:42px;font-size:.875rem}.triad-buttons button[aria-pressed=true]{background:#24364c;color:var(--text);border-color:#c0cde1}#triad-detail{color:var(--muted);font-size:.875rem;line-height:1.8}.tone-chip{display:inline-flex;align-items:center;gap:7px;margin-right:15px}.tone-chip strong{color:var(--text)}.book-note{border-top:1px solid var(--line);padding:19px 0;font-size:.875rem;color:var(--muted);line-height:1.6}.book-note summary{color:var(--text)}.book-note p{max-width:840px}.book-note a{color:var(--fifth)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0 0;font-size:.75rem;color:#899bb3}footer span:first-child{letter-spacing:.12em}.neck-note{font-family:inherit;font-weight:700;fill:#06101b;text-anchor:middle;dominant-baseline:central}.neck-label{fill:#b2c2d6;font-family:inherit;font-size:12px}.selected-triad{fill:none;stroke:#f5f8ff;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
@media(min-width:1550px){main{padding-top:45px}}@media(max-width:850px){main{padding:24px 20px}.workspace{padding:18px 16px}.map-heading{align-items:flex-start;flex-direction:column}.focus{width:100%;justify-content:space-between}.outline-legend{margin-left:0}.detail{gap:22px;grid-template-columns:1fr}.triad-area{padding-left:0;border-left:0}.map-caption{flex-direction:column;gap:5px}.pair-summary{align-items:flex-start}.link-label{display:none}.pair-summary #pair-notes{display:block;margin:5px 0 0}.form-buttons button{min-width:85px}}@media(max-width:520px){main{padding:20px 12px}.controls{grid-template-columns:1fr 1fr;gap:14px 10px}.controls label:last-child{grid-column:1/-1}.tuning{display:none}header{gap:12px;margin-bottom:24px}.forms-heading{align-items:flex-start;flex-direction:column}.legend{gap:12px 16px}.map-heading h2{font-size:1.1rem}footer{flex-direction:column;gap:8px}.segmented button{padding:9px 10px}}

.mini-triad-with-position{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.mini-triad-with-position .mini-triad{flex:0 0 285px}.triad-position{display:flex;flex-direction:column;gap:6px;font-size:14px}.triad-position strong{font-size:16px}.triad-position span{color:var(--muted)}

.triad-voicings{display:flex;flex-wrap:wrap;gap:16px 24px}.triad-voicing{width:285px;max-width:100%}.triad-voicing .mini-triad-with-position{display:block}.triad-voicing .triad-position{padding:8px 0 0 32px;gap:2px}.triad-key-row #triad-detail{max-width:100%;flex:0 1 auto}.mini-triad-card:has(.triad-voicings){width:100%;padding:12px 0;border-bottom:1px solid var(--line)}