main{padding-top:22px}header{margin-bottom:18px}.controls{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}.controls select{min-height:44px;padding:10px 14px}.scale-reference{gap:12px 20px;margin-bottom:16px}.scale-reference h2{margin-bottom:8px}.workspace{padding-top:18px}.linked-caption{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:4px}.note-link-hint{font-size:12px;color:var(--muted);margin:8px 0}.practice-panel{padding:16px}.practice-panel h3{margin:14px 0 10px}.practice-controls{gap:10px}.practice-controls #practice-play{background:#48c9ff;color:#091321;font-weight:750;border-color:#48c9ff;min-width:76px}.practice-help{margin:12px 0;color:var(--muted);font-size:13px}.practice-help summary{width:max-content}.practice-help p{max-width:780px}.note-linked:not(g):not(circle):not(text){outline:3px solid #fff;outline-offset:2px;border-radius:5px}.note-linked:is(g)>circle,.note-linked:is(circle){stroke:#fff!important;stroke-width:4!important;filter:drop-shadow(0 0 5px #ffffff90)}[data-note-pc]{cursor:pointer}g.note-linked{opacity:1!important}text.note-linked{font-weight:900}.practice-library{margin-top:14px}@media(max-width:520px){.controls label:last-child{grid-column:auto}.practice-controls{gap:8px}}
.triad-key-row{justify-content:space-between;column-gap:40px}.triad-key-row>.legend{margin-left:auto;justify-content:flex-end;text-align:right;max-width:100%}@media(max-width:700px){.triad-key-row>.legend{width:100%;row-gap:12px}}

.shape-neighbor,.progression-neighbor{stroke:#9aabc2!important;stroke-width:1!important;stroke-opacity:.45!important;stroke-dasharray:none!important;fill-opacity:.02!important}.shape-shared,.progression-shape-shared{pointer-events:none;stroke-width:1.5!important}

/* Desktop density equivalent to 80% zoom; small/touch screens retain normal sizing.
   CSS zoom participates in layout and native hit testing, unlike transform scaling. */
@media screen and (min-width:1100px) and (pointer:fine){body{zoom:.8}}