body{margin:0}
/* Layout: a slide-rule instrument at the top (sliding scale strip over a fixed chromatic strip), then the chords it produces, then every key side by side. */
:root{
  --bg:#eceee8; --surface:#f8f9f5; --fg:#1b1d17; --muted:#5b6055; --line:#c8cbc0;
  --rule:#f1d54a; --rule-edge:#c9ad22; --ink:#17150c; --black-key:#2a2b26; --black-ink:#f1f0e8;
  --hair:#cf2630; --accent:#2348c2; --accent-soft:#dfe5fb;
  --t:#2f7a4b; --s:#9a6a10; --d:#b3322d;
  --display:"Chakra Petch","IBM Plex Sans Thai",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141619; --surface:#1d2024; --fg:#e8e9e3; --muted:#9ba196; --line:#33373d;
  --rule:#d8bc39; --rule-edge:#a88f1d; --ink:#16140b; --black-key:#0d0e10; --black-ink:#e9e7dc;
  --hair:#ff5c63; --accent:#8ea6ff; --accent-soft:#252d4a;
  --t:#6cc28b; --s:#e0b04f; --d:#f07a73; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141619; --surface:#1d2024; --fg:#e8e9e3; --muted:#9ba196; --line:#33373d;
  --rule:#d8bc39; --rule-edge:#a88f1d; --ink:#16140b; --black-key:#0d0e10; --black-ink:#e9e7dc;
  --hair:#ff5c63; --accent:#8ea6ff; --accent-soft:#252d4a;
  --t:#6cc28b; --s:#e0b04f; --d:#f07a73; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
.sm-only{display:none}
@media (max-width:620px){.sm-only{display:inline}.lg-only{display:none}.bar-top{flex-wrap:nowrap}.tools select{padding:5px 4px;font-size:13px}.tools .btn.icon{width:32px;height:31px}.pages button{padding:5px 9px}.pc .step{font-size:10px;padding:2px 2px}.bar-sub{padding-top:6px}}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 56px}
.wrap{max-width:1080px;margin:28px auto 0;display:flex;flex-direction:column;gap:40px}
section{scroll-margin-top:calc(env(safe-area-inset-top,0px) + var(--barh,60px) + 16px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);border-bottom:1px solid var(--line);
  margin-left:calc(-1*max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1*max(16px,env(safe-area-inset-right,0px)));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar-in{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding-block:8px 8px}
.bar-top,.bar-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.bar-sub{border-top:1px solid var(--line);padding-top:8px}
.pages button{font-weight:600}
.tools{display:flex;align-items:center;gap:6px}
.tools select{font:inherit;font-size:14px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.tools .btn.icon{width:40px;height:40px;padding:0}
.tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bar-key{display:flex;align-items:center;gap:6px;min-width:0}
.bar-key .btn.icon{width:34px;padding:5px 0}
.bar-name{font-family:var(--display);font-weight:700;font-size:18px;min-width:5.5em;text-align:center;white-space:nowrap}
.bar select{font:inherit;font-size:14px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px;max-width:46vw}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:none;padding:7px 12px;border-radius:7px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.tab:hover{color:var(--fg)}
.tab[aria-current="true"]{color:var(--fg);background:var(--surface);box-shadow:inset 0 -2px 0 var(--hair)}
@media (max-width:620px){.bar-in{gap:6px}.tabs{order:2;width:100%}.pages button{padding:6px 10px;font-size:13px}}
h1,h2{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(30px,5vw,46px);font-weight:700;letter-spacing:-.01em}
h2{font-size:22px;font-weight:600}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lead{max-width:62ch;color:var(--muted);margin:0}
header{display:flex;flex-direction:column;gap:8px}
section{display:flex;flex-direction:column;gap:16px;min-width:0}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.sec-head p{margin:4px 0 0;color:var(--muted);max-width:62ch}

button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* mode chips */
.modes{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:14px}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:6px 14px;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

/* the rule */
.rule{background:var(--rule);color:var(--ink);border:1px solid var(--rule-edge);border-radius:6px;
  padding:10px 0 12px;box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 -2px 0 rgba(0,0,0,.06);user-select:none;-webkit-user-select:none}
.rule-row{display:flex;justify-content:space-between;padding:0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.slide{position:relative;height:62px;overflow:hidden;margin:6px 12px 0;border-top:1px solid rgba(0,0,0,.35);border-bottom:1px solid rgba(0,0,0,.35);
  background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),rgba(0,0,0,.08) calc(100%/12 - 1px) calc(100%/12));
  cursor:grab;touch-action:pan-y}
.slide.drag{cursor:grabbing}
.strip{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
.strip.anim{transition:transform .26s cubic-bezier(.3,.7,.3,1)}
.pc{flex:none;height:100%;position:relative;display:flex;align-items:center;justify-content:center}
.pc .deg{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  width:calc(100% - 10px);height:42px;border-radius:7px;background:var(--ink);color:var(--rule)}
.pc .deg.sm{font-size:clamp(13px,2.4vw,20px)}
.pc .step{position:absolute;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;
  color:var(--ink);background:var(--rule);border:1px solid rgba(0,0,0,.45);padding:3px 4px;border-radius:5px;z-index:2;white-space:nowrap}
.pc .step.half{background:#fff8d0}
.pc.root .deg{background:var(--hair);color:#fff}
.pc.ch .deg{background:var(--accent);color:#fff;box-shadow:0 0 0 2px var(--ink)}
.pc.ch.root .deg{background:var(--hair)}
.card .pin{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--hair);border:1px solid var(--hair);border-radius:4px;padding:0 4px}
.pnote{margin:0;padding:8px 12px;border-left:3px solid var(--hair);background:var(--surface);font-size:14px;color:var(--muted)}

.fixed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin:8px 12px 0;gap:0;border:1px solid rgba(0,0,0,.4);border-radius:3px;overflow:hidden}
.key{border:0;border-right:1px solid rgba(0,0,0,.25);background:#fbfaf3;color:var(--ink);height:78px;padding:6px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2px;min-width:0}
.key:last-child{border-right:0}
.key.blk{background:var(--black-key);color:var(--black-ink)}
.key .nm{font-family:var(--mono);font-size:clamp(10px,1.8vw,15px);font-weight:600;line-height:1.1;text-align:center}
.key .alt{font-family:var(--mono);font-size:clamp(8px,1.2vw,11px);opacity:.55;line-height:1.1;text-align:center}
.key .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;opacity:.25}
.key.in .dot{opacity:1;background:currentColor}
.key.out .nm{opacity:.3}
.key.out .alt{opacity:.2}
.key.in .nm{font-size:clamp(12px,2vw,17px)}
.key .role{font-family:var(--mono);font-size:11px;font-weight:600;height:16px;line-height:16px;min-width:20px;border-radius:8px;padding:0 4px;visibility:hidden}
.key.ct .role{visibility:visible;background:var(--accent);color:#fff}
.key.ct .dot{background:var(--accent);border-color:var(--accent)}

/* readout */
.readout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.keyname{font-family:var(--display);font-size:clamp(28px,4.4vw,40px);font-weight:700;line-height:1.1}
.keyname small{font-size:.5em;font-weight:500;color:var(--muted);margin-left:8px}
.notes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:8px}
.fb{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.fb summary{cursor:pointer;padding:12px 16px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;list-style:none}
.fb summary::-webkit-details-marker{display:none}
.fb summary::before{content:"▸";display:inline-block;transition:transform .15s;color:var(--muted)}
.fb[open] summary::before{transform:rotate(90deg)}
.fb-t{font-family:var(--display);font-weight:600;font-size:17px}
.fb-s{font-size:13px;color:var(--muted)}
.fb-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fb-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.fbx .wood{fill:var(--bg)}
.fbx .fr{stroke:var(--line);stroke-width:2}
.fbx .nut{stroke:var(--fg);stroke-width:5}
.fbx .sg{stroke:var(--muted)}
.fbx .inl{fill:var(--line)}
.fbx .fn{fill:var(--muted);font:500 10px var(--mono);text-anchor:middle}
.fbx .nt{cursor:pointer}
.fbx .nt circle{fill:var(--fg)}
.fbx .nt text{fill:var(--bg);font:600 9.5px var(--mono);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.fbx .nt.r circle{fill:var(--hair)}
.fbx .nt.r text{fill:#fff}
.fbx .nt.c circle{fill:var(--accent)}
.fbx .nt.c.r circle{fill:var(--hair)}
.fbx .nt.f{opacity:.22}
.notes .gap{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center;width:30px}
.notes .gap.g1{width:20px;color:var(--hair);font-weight:600;font-size:16px}
.notes .gap.g3{width:38px;color:var(--accent);font-weight:600}
.notes span{font-family:var(--mono);font-weight:600;border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:2px 9px;font-variant-numeric:tabular-nums}
.notes span:first-child{border-color:var(--hair);color:var(--hair)}
.formula{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:8px}
.ctrls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.btn.icon{width:40px;justify-content:center;padding:8px 0;font-family:var(--mono)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (max-width:620px){.readout{grid-template-columns:1fr}.ctrls{justify-content:flex-start}}

/* chord cards */
.chords{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 10px;text-align:left;
  display:flex;flex-direction:column;gap:4px;min-width:0;position:relative}
.card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}
.card .num{font-family:"Times New Roman",Georgia,serif;font-size:24px;line-height:1;font-weight:600}
.card .cname{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.card .cnotes{font-family:var(--mono);font-size:12px;color:var(--muted)}
.card .fn{font-size:12px;color:var(--muted);line-height:1.35}
.card .dia{width:100%;max-width:110px;height:auto;margin:4px auto 0;display:block}
.dia .str,.dia .frt{stroke:var(--muted);stroke-width:1}
.dia .nut{stroke:var(--fg);stroke-width:4}
.dia .dot{fill:var(--fg)}
.dia .dot.r{fill:var(--accent)}
.dia .lbl{fill:var(--bg);font:600 7.5px var(--mono);text-anchor:middle;dominant-baseline:central}
.dia .mk{fill:none;stroke:var(--muted);stroke-width:1.3}
.dia .bar{fill:var(--fg);opacity:.85}
.dia .bf{fill:var(--muted);font:500 9px var(--mono)}
.fx{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;border-radius:4px;padding:0 5px;border:1px solid currentColor;width:max-content}
.fx.T{color:var(--t)}.fx.S{color:var(--s)}.fx.D{color:var(--d)}
@media (max-width:860px){
  .chords{grid-template-columns:1fr}
  .card{display:grid;grid-template-columns:52px minmax(0,1fr) 92px;align-items:center;gap:2px 12px;padding:10px 12px}
  .card .num{grid-column:1;grid-row:1/4}
  .card .cname,.card .cnotes,.card .fn{grid-column:2}
  .card .dia{grid-column:3;grid-row:1/4;margin:0}
}

/* key table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:720px;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{font-family:"Times New Roman",Georgia,serif;font-size:18px;font-weight:600;background:var(--bg);position:sticky;top:0}
thead th:first-child,thead th:nth-child(2){font-family:var(--body);font-size:12px;color:var(--muted);font-weight:500}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--accent-soft)}
tbody tr.cur td{background:var(--accent-soft)}
tbody tr.cur td:first-child{box-shadow:inset 3px 0 0 var(--hair)}
td{font-family:var(--mono);font-size:14px}
td.k{font-family:var(--display);font-weight:700;font-size:16px}
td.sig{color:var(--muted);font-size:12px}
tbody tr:last-child td{border-bottom:0}
td.colsel,th.colsel{color:var(--accent)}

/* legend */
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.lg{border-top:2px solid var(--fg);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.lg h3{margin:0;font-family:var(--display);font-size:16px;font-weight:600}
.lg p{margin:0;color:var(--muted);font-size:14px}
.lg dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.lg dt{font-family:var(--mono);font-weight:600}
.lg dd{margin:0;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.strip.anim{transition:none}}

/* intervals, relative/parallel */
.notes span{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25}
.notes span small{font-size:10px;font-weight:500;color:var(--muted)}
.relrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.relrow .btn{padding:6px 12px;font-size:13px}
.relrow .btn b{font-weight:600}
.reldiff{font-size:13px;color:var(--muted);flex-basis:100%;margin:0}
.reldiff b{color:var(--fg);font-family:var(--mono);font-weight:600}
.card{cursor:pointer}
.card .civ{font-family:var(--mono);font-size:11px;color:var(--muted)}
.shape{display:flex;flex-direction:column;align-items:center;gap:2px}
.vnav{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--muted)}
.vnav button{border:1px solid var(--line);background:var(--bg);border-radius:5px;width:26px;height:24px;padding:0;line-height:1}
@media (max-width:860px){.card .num{grid-row:1/5}.card .civ{grid-column:2}.card .shape{grid-column:3;grid-row:1/5}}
/* fretboard extras */
.fb-ctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.fb-ctl .lbl2{font-size:13px;color:var(--muted)}
.seg.pos button{padding:6px 10px;font-family:var(--mono)}
.fbx .nt.v circle{stroke:var(--fg);stroke-width:3}
.fbx .nt.v.c circle{stroke:var(--fg)}
/* progressions */
.presets{display:flex;flex-wrap:wrap;gap:6px}
.prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:620px){.prog{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pb{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 10px 8px 12px;display:grid;grid-template-columns:minmax(0,1fr) 62px;align-items:center;gap:0 8px;text-align:left;min-width:0}
.pb .bn{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pb .num{font-family:"Times New Roman",Georgia,serif;font-size:20px;font-weight:600;line-height:1.1}
.pb .cname{font-family:var(--display);font-weight:700;font-size:18px;overflow-wrap:anywhere}
.pb svg{grid-column:2;grid-row:1/4;width:62px;height:auto}
.pb.now{border-color:var(--hair);box-shadow:0 0 0 1px var(--hair)}
.pctl{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.tempo{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.tempo input{accent-color:var(--accent);width:140px}
.tempo output{font-family:var(--mono);color:var(--fg);min-width:6ch}
.builder{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.builder .lbl2{font-size:13px;color:var(--muted);margin-right:4px}
.builder .nb{font-family:"Times New Roman",Georgia,serif;font-size:16px;font-weight:600;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:3px 8px;min-width:42px}
.builder .nb.x{font-family:var(--body);font-size:13px;font-weight:500}
.pmsg{font-size:13px;color:var(--muted);margin:0}
/* chord guide */
.gpick{display:flex;flex-direction:column;gap:10px}
.gpick .lbl2{font-size:13px;color:var(--muted);margin-bottom:4px}
.gname{font-size:clamp(26px,4vw,36px)}
.ginfo{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:6px}
.ginfo b{color:var(--fg);font-weight:600}
.forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.form{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.form-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.form-h h3{margin:0;font-family:var(--display);font-size:16px;font-weight:600}
.form-h small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.lvl{font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;border:1px solid currentColor;white-space:nowrap}
.lvl.e{color:var(--t)}.lvl.m{color:var(--s)}.lvl.h{color:var(--d)}
.form .dia{max-width:210px;width:100%;margin:0 auto}
.dia .sn,.dia .fnum{fill:var(--muted);font:500 7px var(--mono);text-anchor:middle}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:14px}
.steps li::marker{font-family:var(--mono);color:var(--muted);font-size:12px}
.steps .muted{color:var(--muted)}
.form{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.form:hover{border-color:var(--accent)}
.form:active,.form.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.form .hint{font-size:12px;color:var(--muted);font-family:var(--mono)}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
/* ear training */
.ear-ctl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ear-ctl .lbl2{font-size:13px;color:var(--muted)}
.stage{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:18px}
.stage-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.bigplay{width:72px;height:72px;border-radius:50%;border:0;background:var(--hair);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bigplay:active{transform:scale(.96)}
.prompt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.prompt b{font-family:var(--display);font-size:20px;font-weight:600}
.prompt span{color:var(--muted);font-size:14px}
.answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ans{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:62px;justify-content:center}
.ans b{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.1}
.ans small{font-size:11px;color:var(--muted);font-family:var(--mono)}
.ans:hover{border-color:var(--fg)}
.ans.ok{border-color:var(--t);box-shadow:0 0 0 2px var(--t)}
.ans.ok b{color:var(--t)}
.ans.no{border-color:var(--d);box-shadow:0 0 0 2px var(--d);opacity:.85}
.ans.no b{color:var(--d)}
.fbk{min-height:24px;font-size:15px;margin:0}
.fbk.ok{color:var(--t)}.fbk.no{color:var(--d)}
.fbk small{color:var(--muted);font-size:13px;margin-left:6px}
.scores{display:flex;flex-wrap:wrap;gap:10px}
.sc{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 16px;min-width:110px}
.sc b{display:block;font-family:var(--display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.sc span{font-size:12px;color:var(--muted)}
.hist{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.hist i{width:12px;height:12px;border-radius:3px;background:var(--line)}
.hist i.o{background:var(--t)}.hist i.x{background:var(--d)}
.keys-hint{font-size:12px;color:var(--muted);font-family:var(--mono)}
@media (max-width:620px){.bar .bar-top{flex-wrap:nowrap;gap:8px}.bar .pages{flex-shrink:0}.bar .pages button{padding:5px 8px}.tools{min-width:0}.tools select{min-width:0;max-width:100px}.stage{padding:18px 14px}.stage-top .prompt{flex:1 1 170px}.keys-hint{display:none}.bigplay{width:60px;height:60px}}
.answers{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
.ans small{white-space:nowrap}
/* chord finder */
.gview{align-self:flex-start}
.fin-ctl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.fin-sel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
.fin-sel b{font-family:var(--mono);color:var(--fg);border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:1px 8px}
.fin-sel b.bass{border-color:var(--hair);color:var(--hair)}
.fbx .hit{fill:transparent;cursor:pointer}
.fbx .hit:hover{fill:var(--accent-soft)}
.fbx .mx{fill:var(--muted);font:600 12px var(--mono);text-anchor:middle;dominant-baseline:central}
.fbx .nt.pick circle{fill:var(--accent)}
.fbx .nt.pick.bs circle{fill:var(--hair)}
.fbx .nt.pick text{fill:#fff}
.fbx .nt.q circle{fill:var(--hair)}
.fbx .nt.q text{fill:#fff}
.pcs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;max-width:640px}
@media (max-width:620px){.pcs{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pcb{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 0;font-family:var(--mono);font-weight:600;font-size:14px}
.pcb[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pcb.bass[aria-pressed="true"]{background:var(--hair);border-color:var(--hair)}
.fres{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.fr-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.fr-card.top{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fr-card .nm{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.1}
.fr-card .rk{font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.fr-card .ivs{font-family:var(--mono);font-size:12px;color:var(--muted)}
.fr-card .why{font-size:13px;color:var(--muted)}
.fr-card .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.fr-card .acts .btn{padding:5px 10px;font-size:13px}
.ans em{font-style:normal;font-size:10px;color:var(--muted);font-family:var(--mono)}
.ans em.lo{color:var(--d)}
#eweak[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.eboard{max-width:100%}
/* ear reference */
.eref .fb-body{gap:12px}
.ref-note{font-size:13px;color:var(--muted);margin:0}
.ref-lock{font-size:14px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:18px;text-align:center;align-self:stretch}
.piano{width:100%;max-width:640px;height:auto;display:block;touch-action:manipulation}
.piano .pw{fill:#fbfaf3;stroke:#2a2b26;stroke-width:1;cursor:pointer}
.piano .pb{fill:var(--black-key);stroke:#000;stroke-width:1;cursor:pointer}
.piano .pw.hl{fill:#bccbff}
.piano .pb.hl{fill:var(--accent)}
.piano .pw.hr{fill:#ffbfc3}
.piano .pb.hr{fill:var(--hair)}
.piano .pw.on{fill:#e9e6d6}
.piano .pb.on{fill:#555}
.piano .kn{font:600 11px var(--mono);text-anchor:middle;pointer-events:none;fill:#17150c}
.piano .kn.b{fill:#fff;font-size:9px}
.piano .kn.c{fill:#8a8a80;font-size:9px;font-weight:500}
.fbx .nt.hl circle{fill:var(--accent)}
.fbx .nt.hl text{fill:#fff}
.fbx .nt.hr circle{fill:var(--hair)}
.fbx .nt.last circle{fill:var(--muted);opacity:.6}
#etonic[hidden]{display:none}
.seg.inst button{width:48px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}
.seg.inst svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:620px){.seg.inst button{width:42px;height:36px}.seg.inst svg{width:26px;height:26px}}
/* mobile & touch */
button,[role=button],.hit,.piano rect,.pc,.slide,summary,.pb,.chip{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bar{transition:transform .22s ease}
.bar.away{transform:translateY(-100%)}
#gshapes{display:flex;flex-direction:column;gap:40px}
.scrollx{max-width:100%;overflow-x:auto;scrollbar-width:none}
.scrollx::-webkit-scrollbar{display:none}
.scrollx button{white-space:nowrap;flex:none}
.fb-wrap{position:relative}
@media (pointer:coarse){
  .vnav button{width:36px;height:32px;font-size:15px}
  .bar-key .btn.icon{width:38px;height:36px}
  .chip{padding:7px 13px}
  .seg button{min-height:36px}
}
@media (max-width:620px){
  .bar select,#barmode{font-size:16px}
  .slide{height:72px}
  .pc{align-items:flex-start;padding-top:6px}
  .pc .deg{height:36px;width:calc(100% - 4px);font-size:18px;border-radius:5px}
  .pc .deg.sm{font-size:13px}
  .pc .step{top:auto;bottom:3px;transform:translateX(-50%);font-size:9px;padding:1px 2px;border-radius:3px}
  .rule-row{font-size:10px;letter-spacing:.06em}
  .readout .ctrls .btn.icon{width:44px}
  .fb-wrap::after{content:"เลื่อนซ้าย-ขวาเพื่อดูทั้งคอ →";display:block;font-size:11px;color:var(--muted);padding-top:4px;position:sticky;left:0}
}
/* v25: pages, bottom nav, circle, subs, tuner */
.muted-h{font-size:.6em;font-weight:500;color:var(--muted);margin-left:6px}
.bar-title{display:none;font-family:var(--display);font-weight:700;font-size:18px}
.bnav{display:none}
.tools svg{width:20px;height:20px}
#tunerbtn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:620px){
  .bar .pages{display:none}
  .bar-title{display:block}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--bg);border-top:1px solid var(--line);
    padding:4px max(8px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;color:var(--muted);font-size:11px;font-weight:500;padding:6px 0 4px;border-radius:10px}
  .bnav button[aria-pressed="true"]{color:var(--fg)}
  .bnav button[aria-pressed="true"] svg{stroke:var(--hair)}
  .bnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .totop{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
.circle-wrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px 32px;align-items:center}
@media (max-width:760px){.circle-wrap{grid-template-columns:1fr}}
.cof{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;touch-action:manipulation}
.cof .w{fill:var(--surface);stroke:var(--line);stroke-width:1;cursor:pointer;transition:fill .12s}
.cof .w:hover{fill:var(--accent-soft)}
.cof .w.nb{fill:var(--accent-soft)}
.cof .w.cur{fill:var(--hair)}
.cof .t{fill:var(--fg);font:700 14px var(--display);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.cof .t.mi{font-size:11px;font-weight:600}
.cof .t.cur{fill:#fff}
.cof .rn{fill:var(--accent);font:600 9px "Times New Roman",Georgia,serif;text-anchor:middle;pointer-events:none}
.cof .rn.cur{fill:#fff}
.cof .sg{fill:var(--muted);font:500 9px var(--mono);text-anchor:middle;pointer-events:none}
.cof .ctr{fill:var(--bg);stroke:var(--line)}
.cof .ct1{fill:var(--fg);font:700 18px var(--display);text-anchor:middle}
.cof .ct2{fill:var(--muted);font:500 11px var(--body);text-anchor:middle}
.cof-info{display:flex;flex-direction:column;gap:10px;font-size:14px;min-width:0}
.cof-info h3{margin:0;font-family:var(--display);font-size:22px}
.cof-info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.cof-info dt{color:var(--muted)}
.cof-info dd{margin:0;font-family:var(--mono);font-weight:600}
.cof-info p{margin:0;color:var(--muted)}
.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sub{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:4px 10px;align-items:start}
.sub .ty{grid-column:1/3;font-size:11px;font-weight:600;letter-spacing:.04em;font-family:var(--mono);text-transform:uppercase}
.sub .ty.dg{color:var(--t)}.sub .ty.col{color:var(--accent)}.sub .ty.sec{color:var(--s)}.sub .ty.tri{color:var(--d)}.sub .ty.bor{color:var(--hair)}
.sub .nm{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.1}
.sub .rn2{font-family:"Times New Roman",Georgia,serif;font-size:16px;color:var(--muted);margin-left:6px;font-weight:600}
.sub .ds{font-size:13px;color:var(--muted);grid-column:1}
.sub .dia{grid-column:2;grid-row:2/5;width:84px}
.sub .acts{grid-column:1/3;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sub .acts .btn{padding:5px 12px;font-size:13px}
.modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal-card{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:16px;width:100%;max-width:420px;max-height:100%;overflow:auto;padding:18px 20px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.modal-h{display:flex;align-items:center;justify-content:space-between}
.modal-h h2{font-size:22px}
.tn-read{display:flex;flex-direction:column;align-items:center;gap:4px}
.tn-note{font-family:var(--display);font-size:56px;font-weight:700;line-height:1}
.tn-note.ok{color:var(--t)}
.tn-gauge{width:100%;max-width:280px;height:auto}
.tn-gauge .arc{fill:none;stroke:var(--line);stroke-width:10;stroke-linecap:round}
.tn-gauge .ok{fill:none;stroke:var(--t);stroke-width:10;stroke-linecap:round;opacity:.5}
.tn-gauge .tk{stroke:var(--muted);stroke-width:1.5}
.tn-gauge .nd{stroke:var(--hair);stroke-width:3;stroke-linecap:round;transition:transform .08s linear}
.tn-gauge .hub{fill:var(--fg)}
.tn-gauge .lb{fill:var(--muted);font:500 10px var(--mono);text-anchor:middle}
.tn-sub{display:flex;gap:14px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.tn-msg{margin:0;font-size:13px;color:var(--muted);text-align:center}
.tn-msg.err{color:var(--d)}
.tn-strings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:6px}
.tn-strings button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 0;display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-weight:700;font-size:17px}
.tn-strings button small{font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:500}
.tn-strings button.near{border-color:var(--hair);box-shadow:0 0 0 1px var(--hair)}
#tnmic{align-self:center}
/* back to top */
.totop{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:8;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-size:20px;line-height:1;
  box-shadow:0 4px 16px rgba(0,0,0,.22)}
/* install app + new version bar (js/pwa.js) */
#installbtn svg,.ins-share{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ins-body{display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.6}
.ins-body p,.ins-body ol{margin:0}
.ins-body ol{padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
.ins-body .btn{align-self:flex-start;text-decoration:none;color:var(--bg)}
.ins-share{width:18px;height:18px;vertical-align:-3px}
.ins-url{font-size:13px;color:var(--muted)}
.ins-url span{font-family:var(--mono);color:var(--fg);user-select:all;word-break:break-all}
.update{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:10;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px);padding:8px 8px 8px 16px;
  background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:14px}
.update .btn{padding:6px 12px}
.update .btn.icon{width:34px;padding:6px 0}
.has-update .totop{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media (max-width:620px){
  .update{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .has-update .totop{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}