.modal-lab{margin-top:20px;padding:clamp(18px,3vw,30px);border:1px solid #2c5270;border-radius:20px;background:radial-gradient(circle at 85% 5%,#17364b 0,transparent 34%),linear-gradient(145deg,#0a1524,#0c1120);overflow:hidden}

.modal-lab-head,.modal-listening-area,.modal-controls{display:flex;align-items:center;justify-content:space-between;gap:20px}

.modal-lab-head h2{margin:7px 0;font-size:clamp(1.8rem,4vw,3rem)}
.modal-lab-head p{max-width:760px;margin:0;color:#9eacc0;line-height:1.6}

.modal-free-badge{flex:0 0 auto;padding:10px 13px;border:1px solid #31dca4;border-radius:999px;color:#69f1bd;font-size:.72rem;font-weight:950;letter-spacing:.12em}

.modal-controls{margin:24px 0;padding:16px;border:1px solid #293c55;border-radius:15px;background:#070f1a}
.modal-controls label{display:grid;gap:7px;color:#9babc0;font-size:.82rem;font-weight:850}
.modal-controls select{min-width:150px}
.modal-controls input{width:min(260px,40vw);accent-color:#39e7ff}

.modal-drone-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modal-drone-controls>span{width:100%;color:#39e7ff;font-size:.67rem;font-weight:900;letter-spacing:.12em}

.modal-mode-tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.modal-mode-tabs button{padding:11px 8px;border:1px solid #334761;border-radius:10px;background:#08111e;color:#c6d2e3;font-weight:850;cursor:pointer}
.modal-mode-tabs button.active{border-color:#3be2f3;background:#2bd6e8;color:#051118}

.modal-listening-area{margin:20px 0}
.modal-summary span,.modal-summary strong,.modal-summary small{display:block}
.modal-summary span{color:#39e7ff;font-size:1.6rem;font-weight:950}
.modal-summary strong{margin:7px 0;font-size:1.05rem}
.modal-summary p{margin:0;color:#a9b6c8}
.modal-summary b{color:#62efbd}
.modal-summary small{margin-top:7px;color:#7f90a7}
.modal-scale-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.modal-fretboard{overflow-x:auto;padding:14px;border:1px solid #293c55;border-radius:15px;background:#050b13}
.modal-board{display:block;width:100%;min-width:760px}
.modal-string{stroke:#8090a6;stroke-width:2}
.modal-fret{stroke:#35475f;stroke-width:1.5}
.modal-fret.nut{stroke:#e8f1fc;stroke-width:5}
.modal-board-label{fill:#71839a;font:11px system-ui;text-anchor:middle}
.modal-note circle{fill:#25cf78;stroke:#9dffca;stroke-width:2;filter:drop-shadow(0 0 5px rgba(48,213,129,.35))}
.modal-note text{fill:#04160d;font:900 10px system-ui;text-anchor:middle;dominant-baseline:middle}
.modal-note.root circle{fill:#65efac;stroke:#effff6}
.modal-note.root text{fill:#04160d}
.modal-note.active circle{fill:#f4fff8;stroke:#30d581;stroke-width:4;filter:drop-shadow(0 0 12px #30d581)}
.modal-note.active text{fill:#06351f}

.modal-shape-list{display:none}
.modal-animated-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.modal-animated-heading small{color:#9fbaac;font-weight:750}.modal-animated-heading .eyebrow{color:#65efac}

.modal-study-tip,.modal-premium-preview{margin-top:15px;padding:17px 19px;border-radius:14px}
.modal-study-tip{border:1px solid #28594a;background:#091d19}
.modal-study-tip strong{color:#62efbd}
.modal-study-tip p,.modal-premium-preview p{margin:6px 0 0;color:#a8b6c7;line-height:1.55}
.modal-premium-preview{border:1px solid #55487c;background:#171329}
.modal-premium-preview span,.modal-premium-preview strong{display:block}
.modal-premium-preview span{color:#c4b6ff;font-size:.68rem;font-weight:950;letter-spacing:.12em}
.modal-premium-preview strong{margin-top:6px}
.professor-tip{position:relative;padding:22px 24px;border-color:#36dca2;background:linear-gradient(120deg,#09221c,#0c1b25);box-shadow:0 0 0 1px #36dca21f,0 16px 40px #0003}
.professor-tip span,.professor-tip strong{display:block}
.professor-tip span{margin-bottom:7px;color:#39e7ff;font-size:.7rem;font-weight:950;letter-spacing:.14em}
.professor-tip strong{color:#6af4bf;font-size:1.15rem}
.professor-tip p{max-width:950px;font-size:1rem}

.modal-pentatonic-module{margin-top:22px;padding:24px;border:1px solid #725e37;border-radius:20px;background:linear-gradient(145deg,#17120d,#0b101b)}
.modal-pentatonic-module header>span,.modal-superposition>span{color:#ffd476;font-size:.7rem;font-weight:950;letter-spacing:.13em}
.modal-pentatonic-module h2{margin:7px 0}
.modal-pentatonic-module header p,.modal-penta-grid p,.modal-superposition small{color:#b9ad98}
.modal-penta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.modal-penta-grid article,.modal-superposition{padding:16px;border:1px solid #5f4b31;border-radius:13px;background:#120f0b}
.modal-penta-grid b,.modal-penta-grid strong{display:block}
.modal-penta-grid b,.modal-superposition b{color:#ffd476}
.modal-penta-grid strong{margin:8px 0;color:#fff}
.modal-penta-grid p{margin:0;font-size:.84rem}
.modal-superposition{margin-top:13px;color:#d5c6b0;line-height:1.6}
.modal-superposition p{margin:8px 0}

@media(max-width:900px){.modal-mode-tabs{grid-template-columns:repeat(4,1fr)}
.modal-controls,.modal-listening-area{align-items:flex-start;flex-wrap:wrap}
}

@media(max-width:900px){.modal-penta-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:560px){.modal-lab-head{align-items:flex-start;flex-direction:column}
.modal-controls{align-items:stretch;flex-direction:column}
.modal-controls input{width:100%}
.modal-mode-tabs,.modal-penta-grid{grid-template-columns:1fr}
.modal-listening-area{display:block}
.modal-scale-actions{margin-top:16px;justify-content:flex-start}
.modal-scale-actions button{flex:1 1 45%}
}

@media(max-width:700px){.modal-fretboard{overflow:visible;padding:10px;border:1px solid #285f43;background:#030b07}
.modal-active-shape{display:block}
.modal-animated-heading{align-items:flex-start;flex-direction:column}
.modal-active-shape .modal-board{min-width:0;width:100%}
.modal-active-shape .modal-board-label{font-size:9px}
.modal-active-shape .modal-note circle{r:11px}
.modal-active-shape .modal-note text{font-size:9px}
.modal-shape-list{display:none}
}

/* Legible fret numbers when the complete shape fits a phone screen. */
.modal-board .modal-fret-number{fill:#edf5ff;font-size:26px;font-weight:800}
@media(max-width:700px){.modal-active-shape .modal-fret-number{font-size:48px}.modal-active-shape .modal-board-label:not(.modal-fret-number){fill:#cbd8e8;font-size:30px}}