/* Без gap во flexbox, clamp() и :is() — запас на старый Safari, как в AmFm. */
:root { --bg:#faf8f4; --surface:#fff; --text:#1c1a17; --muted:#6d675e; --line:#e3ddd2; --accent:#b0511b; --good:#2d7a3e; --bad:#a32b2b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14120f; --surface:#1e1b17; --text:#ece7dd; --muted:#9a9287; --line:#322d26; --accent:#f0a35e; --good:#5fbf75; --bad:#e07070; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.4 system-ui,sans-serif; padding-bottom:env(safe-area-inset-bottom); }
#tabs { display:flex; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:1; }
#tabs button { flex:1; padding:14px 4px; background:none; border:0; border-bottom:3px solid transparent; color:var(--muted); font:inherit; }
#tabs button.on { color:var(--accent); border-bottom-color:var(--accent); }
#app { max-width:640px; margin:0 auto; padding:16px; }
.label { color:var(--muted); font-size:14px; margin:0 0 6px; }
.hint { color:var(--muted); font-size:13px; margin:8px 0; }
.chips { margin-bottom:12px; }
.chip { margin:0 6px 6px 0; padding:6px 12px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--muted); font:inherit; font-size:14px; }
.chip.on { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; }
.q-text { font-size:32px; font-weight:700; padding:12px 0; }
.q-fret .diagram { width:150px; height:auto; color:var(--text); }
.answer { border-top:1px solid var(--line); margin-top:12px; padding-top:8px; }
.row { margin:4px 0; }
.actions { display:flex; margin-top:14px; }
.btn { flex:1; padding:12px; margin:0 4px; border:0; border-radius:10px; font:inherit; color:#fff; }
.btn:first-child { margin-left:0; } .btn:last-child { margin-right:0; }
.primary { background:var(--accent); color:var(--bg); } .good { background:var(--good); } .bad { background:var(--bad); }
.strip { display:flex; flex-wrap:wrap; margin-top:8px; }
.shape { margin:0 8px 8px 0; text-align:center; width:84px; }
.shape .diagram { width:84px; height:auto; color:var(--text); }
.shape figcaption { font-size:11px; color:var(--muted); }
.dot-root { fill:var(--text); } .dot-root-label { fill:var(--bg); }
.dot-top { fill:var(--accent); } .dot-top-label { fill:var(--bg); }
.scroll { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:13px; color:var(--muted); font-weight:400; padding:6px; }
.tbl td { font-size:15px; padding:10px 4px; border-top:1px solid var(--line); }
.clickable { cursor:pointer; }
.detail td { background:var(--surface); }
.dot-ok { fill:var(--good); } .dot-bad { fill:var(--bad); }
.tap { width:170px; height:auto; color:var(--text); touch-action:manipulation; }
.snd { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:10px; padding:8px 14px; font:inherit; margin:8px 0; }
.fb { font-weight:600; margin:6px 0; }