.panel-intro{margin:5px 0 18px}
.panel-intro h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:7px 0}
.panel-intro p{color:#9eacc0;margin:0;max-width:720px}
.cycle-notes{display:grid;place-items:center}
.cycle-svg{width:min(100%,390px);height:auto;overflow:visible}
.cycle-ring{fill:none;stroke:#263955;stroke-width:18}
.cycle-node{cursor:pointer;outline:none}
.cycle-node circle{fill:#16243b;stroke:#3adced;stroke-width:1.5;transition:.18s}
.cycle-node text{fill:#f4f8ff;font-size:14px;font-weight:900;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.cycle-node:hover circle,.cycle-node:focus circle{fill:#25d7e9;stroke:#fff;transform:scale(1.08);transform-origin:center;transform-box:fill-box}
.cycle-node:hover text,.cycle-node:focus text{fill:#061019}
.cycle-center{fill:#35dced;font-size:20px;font-weight:900;text-anchor:middle;letter-spacing:2px}.cycle-center.small{fill:#9aaac0;font-size:12px;letter-spacing:1px}
.arp-kind{display:inline-flex;gap:6px;padding:5px;margin-bottom:12px;border:1px solid #2a3954;border-radius:12px;background:#080e19}
.arp-kind button{border:0;border-radius:8px;background:transparent;color:#a7b5c9;padding:10px 18px;font-weight:900}
.arp-kind button.active{background:#31d9eb;color:#061019}
.arp-summary{display:flex;justify-content:space-between;gap:24px;align-items:center}.arp-board-shell{margin-top:22px;padding:12px;border:1px solid #263955;border-radius:14px;background:#050910;overflow-x:auto}.arp-board{display:block;min-width:680px;width:100%;height:auto}.arp-string{stroke:#7c899c;stroke-width:2}.arp-fret{stroke:#42516a;stroke-width:1.5}.arp-fret-num{fill:#8795aa;font-size:12px;text-anchor:middle}.arp-string-label{fill:#dbe7f8;font-size:13px;font-weight:800;text-anchor:middle}.arp-note circle{fill:#172840;stroke:#34d9eb;stroke-width:2}.arp-note.root circle{fill:#36deef}.arp-note text{fill:#fff;font-size:11px;font-weight:900;text-anchor:middle;dominant-baseline:middle}.arp-note.root text{fill:#071017}.arp-detail-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;margin-top:14px}.arp-detail-grid>div,.arp-detail-grid pre{margin:0;padding:16px;border:1px solid #263955;border-radius:12px;background:#080e18}.arp-detail-grid>div span{display:block;color:#36dced;font-size:.75rem;font-weight:900;letter-spacing:.1em;margin-bottom:9px}.arp-detail-grid b{display:block;color:#c0cbdb;font-size:.79rem;line-height:1.65}.arp-detail-grid pre{color:#d6e4f4;overflow:auto;font:700 .76rem/1.55 monospace}.arp-study-note{margin-top:18px;padding:14px 16px;border-left:3px solid #32d9eb;background:#0a1322;color:#acb9cc;line-height:1.5}.improv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.improv-grid article{padding:18px;border:1px solid #263956;border-radius:14px;background:#09111f}.improv-grid article>span{color:#29def0;font-size:.68rem;font-weight:900;letter-spacing:.12em}.improv-grid h3{margin:8px 0;font-size:1.1rem}.improv-grid b{color:#65f6b3}.improv-grid p{color:#aebbd0;margin:10px 0 0}
.improv-legend{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0 0;color:#aebbd0;font-size:.78rem}.improv-legend span{display:flex;gap:7px;align-items:center}.improv-legend i{width:12px;height:12px;border-radius:50%;background:#203049;border:2px solid #7990ad}.improv-legend i.target{background:#5df5b2;border-color:#caffea}.improv-legend i.root{background:#35dfef;border-color:#d4fbff}.improv-board-shell{margin-top:16px;padding:8px;background:#050910;border:1px solid #263955;border-radius:12px;overflow-x:auto}.improv-board{display:block;width:100%;min-width:560px;height:auto}.improv-note circle{fill:#203049;stroke:#7990ad;stroke-width:2}.improv-note.target circle{fill:#5df5b2;stroke:#caffea}.improv-note.root circle{fill:#35dfef;stroke:#d4fbff}.improv-note text{fill:#f7fbff;font-size:10px;font-weight:900;text-anchor:middle;dominant-baseline:middle}.improv-note.target text,.improv-note.root text{fill:#071019}
@media(max-width:720px){.arp-summary{align-items:flex-start;flex-direction:column}.arp-detail-grid,.improv-grid{grid-template-columns:1fr}.arp-board{min-width:620px}}
.arp-practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.arp-practice-grid article{padding:15px;border:1px solid #293b58;border-radius:12px;background:#09111e}.arp-practice-grid span,.arp-practice-grid strong{display:block}.arp-practice-grid span{color:#36dced;font-size:.72rem;font-weight:900;letter-spacing:.1em}.arp-practice-grid strong{margin:6px 0}.arp-practice-grid p{margin:0;color:#aebbd0;line-height:1.5;font-size:.86rem}@media(max-width:720px){.arp-practice-grid{grid-template-columns:1fr}}
.caged-scale-legend{display:flex;gap:18px;flex-wrap:wrap;margin:20px 0}.caged-scale-legend span{display:flex;align-items:center;gap:8px;color:#b9c5d7;font-weight:800}.caged-scale-legend i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:.72rem;font-weight:900}.caged-scale-legend .root{background:#35dff0;color:#061018}.caged-scale-legend .target{background:#090d14;color:#fff;border:2px solid #fff}.caged-scale-legend .scale{background:#fff;color:#071017}.caged-scale-choices{display:grid;gap:18px}.caged-scale-choice{padding:20px;border:1px solid #293956;border-radius:16px;background:#08101c}.caged-scale-choice>header>span,.scale-caged-card>span{color:#35dff0;font-size:.72rem;font-weight:900;letter-spacing:.11em}.caged-scale-choice h3{margin:7px 0;font-size:1.4rem}.caged-scale-choice header>b{color:#66f3b3}.caged-scale-choice header>p{color:#aebbd0}.scale-caged-grid{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:10px;margin-top:18px}.scale-caged-card{padding:12px;border:1px solid #2d3c58;border-radius:12px;background:#050a12}.scale-caged-card>b{display:block;margin:5px 0 8px;color:#a9b6ca;font-size:.76rem}.scale-caged-board{display:block;width:100%;height:auto}.caged-scale-string{stroke:#91a0b5;stroke-width:1.4}.caged-scale-fret{stroke:#52617a;stroke-width:1.2}.caged-scale-fret.nut{stroke:#fff;stroke-width:5}.caged-string-number,.caged-fret-number{fill:#8290a5;font-size:11px;text-anchor:middle}.caged-scale-note circle{stroke-width:2}.caged-scale-note.scale circle{fill:#f4f7fb;stroke:#f4f7fb}.caged-scale-note.target circle{fill:#070b12;stroke:#fff}.caged-scale-note.root circle{fill:#35dff0;stroke:#c9fbff}.caged-scale-note text{font-size:10px;font-weight:900;text-anchor:middle;dominant-baseline:middle}.caged-scale-note.scale text,.caged-scale-note.root text{fill:#061018}.caged-scale-note.target text{fill:#fff}@media(max-width:1100px){.scale-caged-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.scale-caged-grid{grid-template-columns:1fr 1fr}.caged-scale-choice{padding:14px}}@media(max-width:480px){.scale-caged-grid{grid-template-columns:1fr}}
.caged-scale-legend .chord{background:#ff9f43;color:#1a0d00;border:2px solid #ffd19f}.caged-scale-note.chord circle{fill:#ff9f43;stroke:#ffe0b8;stroke-width:3;filter:drop-shadow(0 0 5px #ff9f4388)}.caged-scale-note.chord text{fill:#190d00;font-size:11px}.scale-caged-card>span{font-size:.78rem}.scale-caged-card>b{font-size:.82rem}.caged-string-number,.caged-fret-number{font-size:12px}.caged-scale-note text{font-size:11px}.caged-scale-choice h3{font-size:1.5rem}.caged-scale-choice header>b,.caged-scale-choice header>p{font-size:.96rem}
.caged-scale-legend .chord{background:#05070b;color:#fff;border:2px solid #fff}.caged-scale-note.chord circle{fill:#030509;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 4px #ffffff44)}.caged-scale-note.chord text{fill:#fff;font-size:13px}.scale-caged-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.scale-caged-card{padding:18px;border-radius:15px}.scale-caged-card>span{font-size:.84rem}.scale-caged-card>b{font-size:.9rem;margin-bottom:12px}.scale-caged-card:last-child{grid-column:1/-1;max-width:calc(50% - 8px)}.scale-caged-board{max-height:360px}.caged-scale-note circle{r:17px}.caged-scale-note text{font-size:13px}.caged-string-number,.caged-fret-number{font-size:13px}.scale-chord-explanation{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);gap:24px;margin-bottom:24px;padding:22px;border:1px solid #2b4363;border-radius:16px;background:linear-gradient(135deg,#0d1828,#101329)}.scale-chord-explanation h3{margin:7px 0;font-size:1.35rem}.scale-chord-explanation p,.scale-chord-explanation li{color:#aebbd0;line-height:1.6}.scale-chord-explanation ul{display:grid;gap:8px;padding-left:20px}.scale-chord-explanation li strong{color:#5cffaa}.reference-chords{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reference-chords article{padding:13px;border:1px solid #30425f;border-radius:12px;background:#060d17}.reference-chords article>span,.reference-chords article>strong{display:block}.reference-chords article>span{color:#36dcec;font-size:.68rem;font-weight:900;letter-spacing:.1em}.reference-chords article>strong{margin-top:4px}.caged-reference-board{display:block;width:100%;margin-top:8px}.reference-string{fill:#7e8fa7;font-size:11px;text-anchor:middle}.reference-string-line,.reference-fret{stroke:#7d8da4;stroke-width:2}.reference-fret.nut{stroke:#fff;stroke-width:5}.reference-chord-note circle{fill:#030509;stroke:#fff;stroke-width:2}.reference-chord-note text{fill:#fff;font-size:11px;font-weight:900;text-anchor:middle;dominant-baseline:middle}.reference-chord-note.open circle{fill:#07101c}.reference-chord-note.open text{font-size:17px}@media(max-width:900px){.scale-chord-explanation{grid-template-columns:1fr}.scale-caged-grid{grid-template-columns:1fr}.scale-caged-card:last-child{grid-column:auto;max-width:none}}@media(max-width:560px){.reference-chords{grid-template-columns:1fr}}
.scale-caged-board{max-height:none}.caged-scale-note circle{r:14px}.caged-scale-note text{font-size:11px}.caged-scale-note.chord text{font-size:11px}
.scale-caged-board{width:100%;max-width:500px;margin:4px auto 0}.caged-scale-note circle{r:11px}.caged-scale-note.chord circle{r:12px}.caged-scale-note text,.caged-scale-note.chord text{font-size:9px}.caged-string-number,.caged-fret-number{font-size:11px}
.reference-overlays{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reference-overlays article{padding:10px;border:1px solid #30425f;border-radius:12px;background:#f7f8fa}.reference-overlays article>span{display:block;color:#10223d;font-size:.66rem;font-weight:900;letter-spacing:.07em}.reference-overlays .scale-caged-board{margin-top:5px}.reference-overlays .caged-scale-string,.reference-overlays .caged-scale-fret{stroke:#151a20}.reference-overlays .caged-scale-fret.nut{stroke:#000}.reference-overlays .caged-string-number,.reference-overlays .caged-fret-number{fill:#151a20}.reference-overlays .caged-scale-note.scale circle{fill:#fff;stroke:#111}.reference-overlays .caged-scale-note.scale text{fill:#111}.reference-overlays .caged-scale-note.root circle{fill:#fff;stroke:#111}.reference-overlays .caged-scale-note.root text{fill:#111}.reference-overlays .caged-scale-note.chord circle{fill:#000;stroke:#000;filter:none}@media(max-width:560px){.reference-overlays{grid-template-columns:1fr}}
.scale-chord-explanation{grid-template-columns:1fr}.reference-overlays{gap:18px}.reference-overlays article{padding:16px}.reference-overlays .scale-caged-board{width:100%;max-width:560px}.reference-overlays article>span{font-size:.76rem}.reference-overlays .caged-scale-note circle{r:10px}.reference-overlays .caged-scale-note.chord circle{r:11px}
.improv-application-route{margin:0 0 22px;padding:20px;border:1px solid #2a4964;border-radius:16px;background:linear-gradient(135deg,#0a1725,#10152b)}.improv-application-route h3{margin:6px 0 15px;font-size:1.35rem}.improv-route-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:14px}.improv-route-grid article{display:grid;align-content:start;gap:7px;min-height:124px;padding:13px;border:1px solid #2b3e59;border-radius:12px;background:#07101d}.improv-route-grid b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#32dceb;color:#061119}.improv-route-grid span{color:#9fadc1;font-size:.78rem;line-height:1.45}.improv-route-grid strong{font-size:.88rem}@media(max-width:900px){.improv-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.improv-route-grid{grid-template-columns:1fr}.improv-route-grid article{min-height:0}}