.perception-tabs{display:flex;gap:8px;margin:20px 0;padding:6px;border:1px solid #28405d;border-radius:14px;background:#070d18}.perception-tabs button{flex:1;padding:13px 18px;border:0;border-radius:9px;background:transparent;color:#b9c8da;font-weight:900;font-size:.95rem}.perception-tabs button.active{background:#32d9eb;color:#061018}.perception-module{display:grid;gap:18px}.perception-method{display:grid;grid-template-columns:minmax(180px,.7fr) 1.2fr 2fr;align-items:center;gap:18px;padding:20px;border:1px solid #55efaa;border-radius:15px;background:linear-gradient(110deg,#071820,#0e1930)}.perception-method>span,.module-kicker,.interval-reference header>span,.rhythm-figures header>span{color:#4ae7f4;font-size:.74rem;font-weight:950;letter-spacing:.11em}.perception-method>strong{font-size:1.15rem;color:#fff}.perception-method ol{margin:0;padding-left:20px;color:#c8d5e4;line-height:1.65}.ear-training-card,.rhythm-training-card,.interval-reference,.rhythm-figures{padding:22px;border:1px solid #293e5c;border-radius:17px;background:#08111f}.ear-training-card h3,.rhythm-training-card h3,.interval-reference h3,.rhythm-figures h3{margin:6px 0;font-size:1.45rem;color:#f7fbff}.ear-training-card p,.rhythm-training-card p,.interval-reference p,.rhythm-figures p{color:#afbdcf}.ear-controls,.rhythm-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:18px 0}.ear-controls label,.rhythm-controls label{display:grid;gap:6px;color:#c6d3e2;font-size:.82rem;font-weight:800}.ear-controls select,.rhythm-controls select{min-width:180px}.rhythm-controls output{color:#5cf1ad;font-weight:900}.ear-answer-grid,.rhythm-answer-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.ear-answer-grid button,.rhythm-answer-grid button{display:grid;gap:3px;min-height:70px;padding:11px;border:1px solid #334965;border-radius:11px;background:#0d1929;color:#fff;text-align:left}.ear-answer-grid button:hover,.rhythm-answer-grid button:hover{border-color:#43ddef}.ear-answer-grid strong,.rhythm-answer-grid strong{color:#5beeb0;font-size:1.05rem}.ear-answer-grid span,.rhythm-answer-grid span{color:#b9c6d7;font-size:.76rem}.ear-answer-grid button.correct,.rhythm-answer-grid button.correct{border-color:#50eda6;background:#103126}.ear-answer-grid button.wrong,.rhythm-answer-grid button.wrong{border-color:#ff6f7d;background:#32151d}.perception-feedback{min-height:24px;margin:14px 0 6px!important}.perception-feedback b{color:#fff}.score-line{display:flex;gap:18px;color:#aebed0;font-size:.85rem}.score-line b{color:#5cf1ad}.interval-study-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:15px}.interval-study-grid article{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;padding:12px;border:1px solid #293f5c;border-radius:11px;background:#0b1625}.interval-study-grid span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#31d9eb;color:#061018;font-weight:950}.interval-study-grid strong{color:#fff;font-size:.86rem}.interval-study-grid small{color:#91a3b8}.interval-study-grid button{grid-column:1/-1;margin-top:6px;padding:7px;border:1px solid #2c8969;border-radius:7px;background:#0a1c19;color:#65efb1;font-weight:850}.interval-theory-grid,.meter-reference{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:17px}.interval-theory-grid article,.meter-reference article{padding:16px;border:1px solid #2a3e5b;border-radius:12px;background:#070e19}.interval-theory-grid strong,.meter-reference strong{display:block;color:#fff;margin-bottom:7px}.interval-theory-grid p,.meter-reference p{margin:0;color:#afbdcf;line-height:1.55}.rhythm-figure-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:16px}.rhythm-figure-grid button{display:grid;place-items:center;gap:4px;min-height:150px;padding:13px;border:1px solid #2c425f;border-radius:13px;background:#0b1727;color:#fff}.rhythm-figure-grid b{font:700 2.6rem serif;color:#48e4f2}.rhythm-figure-grid span,.rhythm-figure-grid small{color:#aebed1}.rhythm-figure-grid small{margin-top:5px;color:#5cf0ae;font-weight:800}.meter-reference{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}.meter-reference span{color:#45dce9;font-size:.7rem;font-weight:950;letter-spacing:.09em}.meter-reference strong{font-size:1.6rem;margin:6px 0}.rhythm-practice{padding:20px;border-left:4px solid #5defad;border-radius:0 13px 13px 0;background:#0b1920}.rhythm-practice strong{color:#fff;font-size:1.1rem}.rhythm-practice ol{margin-bottom:0;color:#c3d0df;line-height:1.75}
@media(max-width:1000px){.perception-method{grid-template-columns:1fr}.ear-answer-grid,.rhythm-answer-grid{grid-template-columns:repeat(3,1fr)}.interval-study-grid{grid-template-columns:repeat(3,1fr)}.rhythm-figure-grid{grid-template-columns:repeat(3,1fr)}.meter-reference{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.perception-tabs{display:grid}.ear-training-card,.rhythm-training-card,.interval-reference,.rhythm-figures{padding:15px}.ear-controls>*,.rhythm-controls>*{width:100%}.ear-controls select,.rhythm-controls select{width:100%}.ear-answer-grid,.rhythm-answer-grid,.interval-study-grid,.interval-theory-grid,.meter-reference{grid-template-columns:1fr 1fr}.rhythm-figure-grid{grid-template-columns:1fr 1fr}.perception-method{padding:16px}}@media(max-width:430px){.ear-answer-grid,.rhythm-answer-grid,.interval-study-grid,.interval-theory-grid,.meter-reference{grid-template-columns:1fr}}
.rhythm-area-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0;padding:6px;border:1px solid #cad8d0;border-radius:14px;background:#f3f8f5}.rhythm-area-tabs button{padding:14px;border:1px solid transparent;border-radius:9px;background:transparent;color:#21372d;font-weight:900}.rhythm-area-tabs button.active{background:#071421;color:#5df0ae}.rhythm-area-module{display:grid;gap:18px}.rhythm-reading-tip{padding:18px;border-left:4px solid #31d9eb;background:#071421;color:#bfd0df}.rhythm-reading-tip strong{color:#fff;font-size:1.2rem}.rhythm-reading-tip p{margin-bottom:0;line-height:1.6}.rhythm-player-bar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid #29425f;border-radius:14px;background:#08111f;color:#fff}.rhythm-player-bar label{display:grid;gap:6px;font-size:.82rem;font-weight:850}.rhythm-player-bar output{color:#59efac;font-weight:900}.rhythm-pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.rhythm-pattern-card{padding:17px;border:1px solid #29415d;border-radius:15px;background:#08111f;color:#fff}.rhythm-pattern-card header span{display:block;color:#40ddea;font-size:.7rem;font-weight:950;letter-spacing:.1em}.rhythm-pattern-card header strong{display:block;margin:5px 0 14px;font-size:1.08rem}.rhythm-notation{display:grid;grid-template-columns:repeat(16,minmax(22px,1fr));gap:3px}.rhythm-step{display:grid;place-items:center;min-height:55px;border:1px solid #2e435f;border-radius:6px;background:#0c1929;font-style:normal;transition:.1s}.rhythm-step b{color:#e9f1fa}.rhythm-step small{color:#71839a;font-size:.6rem}.rhythm-step.muted b{color:#76e9f2}.rhythm-step.rest b{color:#677990}.rhythm-step.accent{border-color:#4beaa3}.rhythm-step.accent b{color:#5cf0ad}.rhythm-step.playing{transform:translateY(-3px);background:#29d9e8;border-color:#fff}.rhythm-step.playing b,.rhythm-step.playing small{color:#061018}.rhythm-card-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}.rhythm-card-actions label{color:#aebed0;font-size:.8rem}.groove-legend{display:flex;gap:16px;flex-wrap:wrap;color:#263d32;font-weight:800}.groove-legend b{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:4px;border-radius:50%;background:#071421;color:#62efb0}.groove-legend .accent{background:#36ddeb;color:#061018}
@media(max-width:850px){.rhythm-pattern-grid{grid-template-columns:1fr}.rhythm-notation{overflow-x:auto}.rhythm-step{min-width:26px}}@media(max-width:600px){.rhythm-area-tabs{grid-template-columns:1fr}.rhythm-card-actions{align-items:stretch;flex-direction:column}.rhythm-card-actions>*{width:100%}}
.rhythm-subdivisions{padding:22px;border:1px solid #293e5c;border-radius:17px;background:#08111f}.rhythm-subdivisions header>span{color:#4ae7f4;font-size:.74rem;font-weight:950;letter-spacing:.11em}.rhythm-subdivisions h3{margin:6px 0;color:#f7fbff;font-size:1.45rem}.rhythm-subdivisions header p{color:#afbdcf}.rhythm-subdivision-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}.rhythm-subdivision-grid button{display:grid;place-items:center;gap:4px;min-height:155px;padding:13px;border:1px solid #2c425f;border-radius:13px;background:#0b1727;color:#fff}.rhythm-subdivision-grid b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#35dcea;color:#061018;font-size:1.25rem}.rhythm-subdivision-grid span,.rhythm-subdivision-grid small{color:#aebed1}.rhythm-subdivision-grid em{margin-top:5px;color:#5cf0ae;font-style:normal;font-weight:800}.subdivision-feedback{min-height:24px;margin:15px 0 0;color:#c4d1df}.subdivision-feedback b{color:#fff}
@media(max-width:1000px){.rhythm-subdivision-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.rhythm-subdivisions{padding:15px}.rhythm-subdivision-grid{grid-template-columns:1fr 1fr}}@media(max-width:430px){.rhythm-subdivision-grid{grid-template-columns:1fr}}
.interval-complete-theory,.interval-fretboard-practice{padding:22px;border:1px solid #293e5c;border-radius:17px;background:#08111f}.interval-complete-theory>header>span,.interval-fretboard-practice>header>span{color:#4ae7f4;font-size:.74rem;font-weight:950;letter-spacing:.11em}.interval-complete-theory h3,.interval-fretboard-practice h3{margin:6px 0;color:#f7fbff;font-size:1.45rem}.interval-complete-theory header p,.interval-fretboard-practice header p{color:#afbdcf}.interval-quality-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}.interval-quality-grid article{padding:16px;border:1px solid #2a3e5b;border-radius:12px;background:#0b1625}.interval-quality-grid strong{display:block;margin-bottom:7px;color:#5cf0ae}.interval-quality-grid p{margin:0;color:#afbdcf;line-height:1.55}.interval-fretboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}.interval-fretboard-grid article{overflow:hidden;padding:16px;border:1px solid #2a405e;border-radius:13px;background:#070e19}.interval-fretboard-grid article>header{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.interval-fretboard-grid header strong{color:#fff}.interval-fretboard-grid header span{color:#94a7bd;font-size:.78rem}.interval-fretboard-grid svg{display:block;width:100%;height:auto;color:#91a4b9}.interval-fretboard-grid svg line{stroke:#536980;stroke-width:1.3}.interval-fretboard-grid svg text{fill:#9dafc2;font-size:11px}.interval-fretboard-grid svg .fret-number{font-size:9px;text-anchor:middle}.interval-fretboard-grid svg circle{stroke:#dce9f6;stroke-width:2}.interval-fretboard-grid svg g text{text-anchor:middle;fill:#071019;font-size:9px;font-weight:900}.interval-fretboard-grid .root-note circle{fill:#40ddec}.interval-fretboard-grid .interval-note circle{fill:#5cf0ae}.fretboard-actions{display:flex;gap:6px;flex-wrap:wrap}.fretboard-actions button{padding:7px 9px;border:1px solid #2c8969;border-radius:7px;background:#0a1c19;color:#65efb1;font-weight:850}.interval-fretboard-practice>aside{display:grid;grid-template-columns:180px 1fr;gap:15px;margin-top:16px;padding:16px;border-left:4px solid #5defad;background:#0b1920}.interval-fretboard-practice>aside strong{color:#fff}.interval-fretboard-practice>aside ol{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;margin:0;color:#c3d0df}
@media(max-width:1000px){.interval-quality-grid{grid-template-columns:repeat(3,1fr)}.interval-fretboard-grid{grid-template-columns:1fr}}@media(max-width:650px){.interval-complete-theory,.interval-fretboard-practice{padding:15px}.interval-quality-grid{grid-template-columns:1fr 1fr}.interval-fretboard-practice>aside{grid-template-columns:1fr}.interval-fretboard-practice>aside ol{grid-template-columns:1fr}}@media(max-width:430px){.interval-quality-grid{grid-template-columns:1fr}}
.enharmonic-reminder{margin-top:16px;padding:18px;border:1px solid #2fcfdd;border-left:5px solid #40ddec;border-radius:12px;background:#0a1b26}.enharmonic-reminder span,.enharmonic-reminder strong,.enharmonic-reminder small{display:block}.enharmonic-reminder span{color:#49e4f1;font-size:.75rem;font-weight:950;letter-spacing:.1em}.enharmonic-reminder strong{margin:6px 0;color:#fff;font-size:1.08rem}.enharmonic-reminder p{margin:0;color:#c7d5e3;line-height:1.65}.enharmonic-reminder small{margin-top:9px;color:#7ff0ba;line-height:1.5}.interval-study-grid article{grid-template-columns:56px minmax(0,1fr);overflow:visible}.interval-study-grid span{width:52px;height:52px;padding:3px;font-size:.88rem;white-space:nowrap}.interval-study-grid strong,.interval-study-grid small{min-width:0;overflow:visible;white-space:normal;word-break:normal}.interval-study-grid small{line-height:1.35}
.rhythm-figure-grid .tuplet-notation{display:block;width:min(150px,100%);height:72px;overflow:visible;fill:#48e4f2;stroke:#48e4f2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.rhythm-figure-grid .tuplet-notation text{fill:#48e4f2;stroke:none;font:900 11px system-ui;text-anchor:middle}.rhythm-figure-grid button:focus-visible .tuplet-notation{filter:drop-shadow(0 0 7px #48e4f2)}