:root{color:#233e4c;font-synthesis:none;--ink:#233e4c;--muted:#596973;--accent:#006a9f;--line:#d7e0e5;--soft:#edf3f6;background:#f8fafb;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0}button,select,input{font:inherit}button,select,summary{-webkit-tap-highlight-color:transparent}button,select{min-height:44px}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.7}select{color:var(--ink);background:#fff;border:1px solid #9aadb8;border-radius:6px;padding:9px 36px 9px 12px;display:block}label{gap:7px;font-size:13px;font-weight:600;display:grid}label select{font-size:15px;font-weight:500}input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;margin:0}input[type=range]{width:100%;min-height:44px;accent-color:var(--accent);cursor:ew-resize;margin:0}a{color:var(--accent)}button,a,select,input,summary{touch-action:manipulation}:focus-visible{outline-offset:3px;outline:3px solid #0072b2}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}h2{letter-spacing:-.02em;font-size:19px;font-weight:650;line-height:1.4}h3{font-size:15px;font-weight:650;line-height:1.5}p{line-height:1.6}.app-shell{max-width:1680px;margin-inline:auto;padding-inline:clamp(16px,3vw,48px)}.app-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;min-height:82px;display:flex}.wordmark{min-height:44px;color:var(--ink);letter-spacing:-.025em;align-items:center;gap:11px;font-size:17px;font-weight:650;text-decoration:none;display:inline-flex}.wordmark img{border-radius:7px}.header-actions{align-items:center;gap:22px;display:flex}.quiet-button{border:1px solid var(--line);white-space:nowrap;background:#fff;border-radius:6px;justify-content:center;align-items:center;gap:9px;padding:8px 13px;font-size:13px;font-weight:600;display:inline-flex}.quiet-button:hover{background:#f0f7fa;border-color:#7f9cab}.pwa-status{color:var(--muted);align-items:center;gap:10px;font-size:12px;display:flex}.pwa-indicator{align-items:center;gap:7px;display:inline-flex}.pwa-indicator>span{background:#75848d;border-radius:50%;flex-shrink:0;width:6px;height:6px}.pwa-indicator[data-ready=true]>span{background:#008060}.pwa-error{color:#8c3718;max-width:32ch}.selection-bar{justify-content:space-between;align-items:center;gap:24px;padding-block:34px 26px;display:flex}.selected-key h1{letter-spacing:-.035em;font-size:clamp(27px,2.8vw,37px);font-weight:750;line-height:1.15}.selected-key h1 span{font-weight:430}.selected-key p{color:var(--muted);margin-top:9px;font-size:13px}.selected-key p>span{margin-inline:5px}.key-controls{flex-shrink:0;gap:12px;display:flex}.key-controls select{min-width:100px;height:46px}.key-controls #scale-picker{min-width:218px}.notices{background:#e7f1f7;border:1px solid #c1d8e6;border-radius:6px;margin-bottom:18px;padding:13px 16px;font-size:13px}.notices p+p{margin-top:6px}.display-settings{border-block:1px solid var(--line);margin-bottom:30px}summary{cursor:pointer;align-content:center;min-height:48px;padding-block:13px;font-size:13px;font-weight:600}.settings-description{color:var(--muted);margin-left:12px;font-size:12px;font-weight:400}.settings-grid{grid-template-columns:minmax(150px,1fr) minmax(190px,1.3fr) repeat(2,minmax(145px,1fr));align-items:center;gap:20px 34px;padding-block:10px 24px;display:grid}.range-labels{color:var(--muted);justify-content:space-between;margin-top:-9px;font-size:11px;font-weight:400;display:flex}.spacing-setting{gap:0}.check-setting{cursor:pointer;align-items:center;gap:11px;min-height:60px;display:flex}.check-setting small{color:var(--muted);margin-top:5px;font-size:12px;font-weight:400;display:block}.workbench{grid-template-columns:minmax(0,1fr);gap:36px;display:grid}.practice-panel{min-width:0;scroll-margin-top:16px}.section-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;display:flex}.note-legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12px;display:inline-flex}.note-legend>span{align-items:center;gap:6px;display:inline-flex}.note-legend i{border:1px solid;border-radius:50%;flex-shrink:0;width:13px;height:13px;display:inline-block}.note-legend .legend-root{border-width:2px}.note-finder{flex-wrap:wrap;align-items:center;gap:12px 24px;margin:24px 0 22px;display:flex}.scale-notes{align-items:flex-start;gap:clamp(8px,1.2vw,20px);margin:0;padding:0;list-style:none;display:flex}.scale-note-button{background:0 0;border:0;border-radius:6px;align-content:start;justify-items:center;gap:5px;min-width:44px;padding:0;display:grid}.scale-note{border:1px solid;border-radius:50%;place-items:center;width:36px;height:36px;font-size:14px;font-weight:600;display:grid}.scale-root{border-width:2px;font-weight:750}.scale-note-button[aria-pressed=true] .scale-note{box-shadow:0 0 0 2px #f8fafb, 0 0 0 4px var(--accent);font-weight:700}.interval-label{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.note-status{align-items:center;gap:14px;min-height:44px;font-size:13px;display:flex}.fretboard[data-interactive] .note{cursor:pointer}.note-hit{pointer-events:all}.note text,.note-halo,.note-hover{pointer-events:none}.note-hover{stroke:var(--accent);opacity:0}@media (hover:hover){.scale-note-button:hover .scale-note{outline:1.5px dashed var(--accent);outline-offset:3px}.note:hover .note-hover{opacity:1}}.fretboard-frame{border:1px solid var(--line);background:#fff;border-radius:7px;overflow:hidden}.fretboard-scroll{overscroll-behavior-x:contain;scrollbar-color:#9cabb4 #f2f5f7;scrollbar-width:thin;padding-block:8px 6px;overflow-x:auto}.fretboard-scroll:focus-visible{outline-offset:-3px}.fretboard{width:100%;min-width:960px;height:auto;display:block}.fretboard text{font-family:inherit}.board-caption{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:5px 16px;margin-top:10px;font-size:11px;display:flex}.board-caption span[aria-hidden]{margin-left:4px;font-size:15px}.chord-section{margin-top:34px}.section-meta{color:var(--muted);font-size:11px}.chord-strip{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:17px;display:grid}.chord-button{background:#fff;border:1px solid #b5c5ce;border-radius:6px;justify-items:center;gap:3px;padding:12px 4px 11px;display:grid}.chord-button:hover{background:#edf6fb;border-color:#6a9ab2}.chord-button[aria-pressed=true]{background:#e0f0f8;border:2px solid #006a9f;padding:11px 3px 10px}.chord-numeral{color:#476779;font-size:12px;font-weight:650}.chord-name{letter-spacing:-.025em;font-size:23px;font-weight:650}.chord-quality{color:var(--muted);font-size:10px}.chord-detail{justify-content:space-between;align-items:center;gap:16px;min-height:94px;padding-block:18px;font-size:13px;display:flex}.chord-detail .muted{margin-top:3px;font-size:12px}.chord-tones{letter-spacing:.03em;margin-left:12px;display:inline-block}.muted{color:var(--muted)}.fret-positions{border-top:1px solid var(--line);margin-top:4px}.fret-positions>label{max-width:240px;padding-block:10px 18px}.positions-table-wrap{overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}caption{text-align:left;color:var(--muted);margin-bottom:12px;font-size:12px}th,td{border-bottom:1px solid var(--line);padding:10px 12px}thead{background:var(--soft)}tbody th{font-weight:500}.theory-panel{min-width:0}.section-description{color:var(--muted);margin-top:4px;font-size:12px}.circle-frame{width:100%;min-width:320px;max-width:420px;margin:18px auto 8px}.circle-frame svg{width:100%;height:auto;display:block;overflow:visible}.circle-frame .circle-compact{display:none}.wedge[role=button]{cursor:pointer;outline:none}.wedge[role=button]:hover path{stroke:#557a90;stroke-width:2px}.wedge[role=button]:focus-visible path{stroke:#18394c;stroke-width:3px}.wedge text{pointer-events:none;font-family:inherit}.circle-legend{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:10px 17px;margin-bottom:25px;font-size:10px;display:flex}.circle-legend span{align-items:center;gap:5px;display:inline-flex}.circle-legend i{width:8px;height:8px;display:inline-block}.legend-tonic{background:#0072b2;border-radius:2px}.legend-chord{background:#d3eaf5;border:1px solid #5b7f91;border-radius:2px}.legend-note{background:#233e4c;border-radius:50%}.legend-tonic-note{box-sizing:border-box;background:#fff;border:1.5px solid #233e4c;border-radius:50%}.key-details{border-top:1px solid var(--line);color:var(--muted);padding-top:20px;font-size:12px}.key-details h3{color:var(--ink)}.signature-heading{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px;display:flex}.signature-heading>span{font-size:11px}.signature-notes{color:var(--ink);letter-spacing:.03em;margin-bottom:10px;font-size:15px;font-weight:600}.arc-explanation{margin-top:9px}.altered-notes{color:#62491e;background:#f3eddf;border-radius:5px;margin-block:12px;padding:12px 14px}.altered-notes strong{font-size:12px}.altered-notes ul{margin:6px 0 0;padding:0;line-height:1.7;list-style:none}.altered-notes li span{margin-inline:6px}.altered-notes p{margin-top:7px;font-size:11px}.augmented-note{margin-top:8px;font-size:11px}.related-section{margin-top:24px}.related-keys{margin:10px 0 0;padding:0;list-style:none;display:grid}.related-keys button{text-align:left;background:0 0;border:0;border-bottom:1px solid #e3eaee;grid-template-columns:46px 1fr auto;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 2px;display:grid}.related-keys button:hover,.related-keys button[aria-current=true]{background:#e8f2f8}.related-name{color:var(--accent);font-size:15px;font-weight:650}.related-keys button>span:nth-child(2){color:var(--muted);font-size:11px}.related-keys button>span:last-child{color:#668393}.related-keys .parallel-key{margin-top:8px}.related-caption{margin-top:10px;font-size:10px}.mode-relations h4{color:var(--ink);margin:12px 0 4px;font-size:12px}.parallel-modes{margin-top:15px}.app-footer{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:44px;padding-block:20px 28px;font-size:11px;display:flex}.sr-only,.skip-link:not(:focus){clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link:focus{z-index:3;background:#fff;padding:12px;position:absolute;top:10px}@media (width>=1200px){.workbench{grid-template-columns:minmax(0,1fr) 360px;gap:30px}.theory-panel{border-left:1px solid var(--line);padding-left:26px}}@media (width>=1500px){.workbench{grid-template-columns:minmax(0,1fr) 400px;gap:36px}.theory-panel{padding-left:30px}}@media (width>=601px) and (width<=1199px){.theory-panel{border-top:1px solid var(--line);grid-template-columns:minmax(320px,1fr) minmax(0,1fr);gap:0 28px;padding-top:28px;display:grid}.theory-panel>h2,.theory-panel>.section-description,.theory-panel>.circle-frame,.theory-panel>.circle-legend{grid-column:1}.key-details{border-top:0;grid-area:1/2/5;padding-top:0}.circle-frame{align-self:start}}@media (width<=760px){.app-header{min-height:72px}.header-actions{gap:8px}.pwa-status{flex-wrap:wrap;max-width:150px;font-size:10px}.selection-bar{flex-wrap:wrap;gap:20px;padding-top:27px}.key-controls{width:100%}.key-controls>label{flex:1;min-width:0}.key-controls select,.key-controls #scale-picker{width:100%;min-width:0}.key-controls>label:first-child{flex:.5}.settings-grid{grid-template-columns:1fr 1fr;gap:18px 22px}.section-meta{display:none}.chord-quality{font-size:9px}}@media (width<=600px){.app-header{flex-wrap:wrap;gap:4px 12px;padding-block:13px}.wordmark{font-size:16px}.wordmark img{width:28px;height:28px}.header-actions{flex:1 0 100%;justify-content:space-between}.pwa-status{max-width:none;font-size:11px}.copy-link{background:0 0;border-color:#0000;min-height:44px;padding:6px 0 6px 8px;font-size:12px}.selection-bar{padding-top:24px;padding-bottom:22px}.settings-description{display:none}.display-settings{margin-bottom:24px}.settings-grid{padding-top:10px}.settings-grid select{width:100%;min-width:0;padding-right:20px}.note-legend{gap:4px 10px;font-size:11px}.note-legend>span{gap:5px}.note-legend i{width:11px;height:11px}h2{font-size:18px}.note-finder{gap:8px;margin-top:21px}.scale-notes{justify-content:space-between;gap:5px;width:100%}.scale-notes li{flex:1;min-width:0}.scale-note-button{width:100%;min-width:0}.scale-note{width:33px;height:33px;font-size:13px}.note-status{width:100%;font-size:12px}.fretboard-frame{margin-inline:-4px}.board-caption{flex-direction:column;font-size:10px}.chord-section{margin-top:27px}.chord-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.chord-quality{font-size:10px}.chord-button{min-height:92px}.chord-detail{flex-wrap:wrap;gap:8px;font-size:12px}.chord-tones{margin-left:7px}.theory-panel{border-top:1px solid var(--line);padding-top:26px}.circle-frame .circle-full{display:none}.circle-frame .circle-compact{display:block}.circle-frame{margin-inline:0;position:relative;left:50%;transform:translate(-50%)}.key-details{font-size:13px}.related-keys button>span:nth-child(2){font-size:12px}.related-caption,.circle-legend{font-size:11px}.app-footer{margin-top:30px;font-size:10px}}@media (prefers-reduced-motion:no-preference){.note>circle:first-child{transition:fill .15s ease-out,stroke .15s ease-out,r .15s ease-out}.note text{transition:fill .15s ease-out}.note-hover{transition:opacity .12s ease-out}.scale-note{transition:background-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out}}