.modal-official-reference{margin:16px 0 0;padding:13px 15px;border-left:4px solid #ffd476;border-radius:0 10px 10px 0;background:#151109;color:#d8cbb5;line-height:1.5}
.modal-official-reference strong{color:#ffd476}
.modal-model-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:18px 0 12px}
.modal-model-picker button{min-height:44px;padding:9px 10px;border:1px solid #5f4b31;border-radius:9px;background:#0b111a;color:#d8e4ed;font:800 .87rem system-ui;cursor:pointer}
.modal-model-picker button:hover{border-color:#e2bd68}
.modal-model-picker button.active{border-color:#ffd476;background:#f2c65f;color:#161006}
.modal-model-picker button:focus-visible,.modal-interactive-shape button:focus-visible{outline:3px solid #6cf0bb;outline-offset:2px}
.modal-interactive-shape{min-width:0;padding:18px;border:1px solid #3a7258;border-radius:17px;background:linear-gradient(145deg,#06130d,#071a12);overflow:hidden}
.modal-interactive-shape>header{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:13px}
.modal-interactive-shape>header div{display:grid;gap:5px}
.modal-interactive-shape>header span{color:#58eda7;font-size:.72rem;font-weight:950;letter-spacing:.12em}
.modal-interactive-shape>header h3{margin:0;color:#fff;font-size:clamp(1.25rem,2.5vw,2rem)}
.modal-interactive-shape>header>strong{color:#c4d7cd;font-size:.9rem}
.modal-interactive-shape .modal-shape-audio{margin:0 0 13px}
.modal-interactive-shape .modal-board{display:block;width:100%;min-width:0;height:auto;border:1px solid #4e6b5c;border-radius:12px;background:#f9fffb}
.modal-interactive-shape .modal-string{stroke:#35463c;stroke-width:1.7}
.modal-interactive-shape .modal-fret{stroke:#617067;stroke-width:1.3}
.modal-interactive-shape .modal-fret.nut{stroke:#273a2f;stroke-width:6}
.modal-interactive-shape .modal-board-label{fill:#294337;font-size:14px;font-weight:800}
.modal-interactive-shape .modal-string-label{fill:#172a20;font:850 16px system-ui;text-anchor:middle}
.modal-interactive-shape .modal-note circle{fill:#102219;stroke:#5f8e75;stroke-width:2}
.modal-interactive-shape .modal-note text{fill:#f2fff7;font:850 11px system-ui;text-anchor:middle;dominant-baseline:middle}
.modal-interactive-shape .modal-note.root circle{fill:#31dc8c;stroke:#103f2a;stroke-width:3}
.modal-interactive-shape .modal-note.root text{fill:#04160d}
.modal-pentatonic-module .modal-controls{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(130px,.7fr) minmax(130px,.7fr) minmax(230px,1.2fr);align-items:end}
.modal-pentatonic-module .modal-controls select{width:100%;min-height:44px}
.modal-pentatonic-module .modal-drone-controls{align-self:end}
@media(max-width:1050px){.modal-pentatonic-module .modal-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
.modal-model-picker{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:5px}
}
@media(max-width:700px){.modal-pentatonic-module .modal-controls{grid-template-columns:1fr}
.modal-model-picker{grid-template-columns:repeat(5,1fr);overflow:visible}
.modal-model-picker button{min-width:0;padding:9px 4px;font-size:.72rem}
.modal-interactive-shape{padding:12px}
.modal-interactive-shape>header{align-items:flex-start;flex-direction:column}
.modal-interactive-shape .modal-board-label{font-size:16px}
.modal-interactive-shape .modal-string-label{font-size:18px}
.modal-interactive-shape .modal-note text{font-size:12px}
}
@media(max-width:430px){.modal-model-picker{grid-template-columns:repeat(3,1fr)}
.modal-model-picker button:nth-child(n+4){grid-column:auto}
.modal-interactive-shape .modal-note circle{r:13px}
}

/* Animated green fretboard: matches the main scale player. */
.modal-interactive-shape .modal-board{border-color:#285f43;background:radial-gradient(circle at 50% 45%,#0b2016,#030b07 72%);box-shadow:inset 0 0 36px rgba(0,0,0,.75)}
.modal-interactive-shape .modal-string{stroke:#a9bdb3}
.modal-interactive-shape .modal-fret{stroke:#3f6251}
.modal-interactive-shape .modal-fret.nut{stroke:#d7e8df}
.modal-interactive-shape .modal-board-label{fill:#89a397}
.modal-interactive-shape .modal-string-label{fill:#b9ccc2}
.modal-interactive-shape .modal-note circle{fill:#25cf78;stroke:#9dffca;filter:drop-shadow(0 0 5px rgba(48,213,129,.38));transition:fill .12s ease,stroke .12s ease,filter .12s ease}
.modal-interactive-shape .modal-note text{fill:#04160d;font-weight:900}
.modal-interactive-shape .modal-note.root circle{fill:#65efac;stroke:#effff6;stroke-width:2.5}
.modal-interactive-shape .modal-note.active circle{fill:#f4fff8;stroke:#30d581;stroke-width:4;filter:drop-shadow(0 0 13px #30d581)}
.modal-interactive-shape .modal-note.active text{fill:#06351f}
.modal-animation-hint{margin:10px 0 0;color:#88a99a;font-size:.82rem;line-height:1.45}