/*
 * AP Music Theory practice (apmt.css). Every rule is scoped under .apmt-root; nothing here styles the host page.
 * Theme tokens are custom properties on .apmt-root: override them in your own CSS (.apmt-root{--apmt-coral:#f80})
 * or with mount(el, { theme: { coral: "#f80" } }).
 */
.apmt-root{
  --apmt-bg:#fffaf1;          /* cream page */
  --apmt-surface:#ffffff;     /* cards */
  --apmt-ink:#243c3a;         /* dark green ink: text and notation */
  --apmt-muted:#53615b;       /* secondary text */
  --apmt-coral:#ff8d77;       /* primary buttons (dark text on it) */
  --apmt-coral-hover:#ffa894;
  --apmt-on-coral:#243c3a;
  --apmt-peach:#ffc0ae;
  --apmt-sage:#e2e9dc;
  --apmt-butter:#f8e5a4;
  --apmt-line:#c8ccc0;        /* thin borders */
  --apmt-line-strong:#7c857a; /* control outlines (3:1 or more on white and cream) */
  --apmt-good:#2b6a3c; --apmt-good-soft:#e3f0e1; --apmt-on-good:#ffffff;
  --apmt-bad:#a8321f;  --apmt-bad-soft:#fde4dc;  --apmt-on-bad:#ffffff;
  --apmt-hl:#c4422a;          /* notes while they play */
  --apmt-focus:#243c3a;       /* focus ring */
  --apmt-radius:14px;
  --apmt-font-accent:Georgia,"Times New Roman",serif;
  display:block;
  box-sizing:border-box;
  color:var(--apmt-ink);
  background:var(--apmt-bg);
  font-size:var(--apmt-font-size,1rem);
  line-height:1.55;
  text-align:left;
  /* typography the host may set on body and that would otherwise be inherited (the font family is inherited on purpose) */
  font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;white-space:normal;
  -webkit-text-size-adjust:100%;
  scroll-margin-top:var(--apmt-scroll-offset,0px);
}
.apmt-root.apmt-fallback-font{font-family:Nunito,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
.apmt-root[data-apmt-font]{font-family:var(--apmt-font)}
.apmt-root[data-apmt-scheme="dark"]{
  --apmt-bg:#17211f; --apmt-surface:#1f2b29; --apmt-ink:#f4efe4; --apmt-muted:#bac5bd; --apmt-coral:#ff8d77; --apmt-on-coral:#17211f;
  --apmt-peach:#4a2f28; --apmt-sage:#283832; --apmt-butter:#3a3520; --apmt-line:#3f4f4b; --apmt-line-strong:#869691;
  --apmt-good:#8fd19e; --apmt-good-soft:#1d3426; --apmt-on-good:#10201a; --apmt-bad:#ff9f8a; --apmt-bad-soft:#40221b; --apmt-on-bad:#2a120c;
  --apmt-hl:#ffb199; --apmt-focus:#f8e5a4;
}
@media (prefers-color-scheme:dark){
  .apmt-root[data-apmt-scheme="auto"]{
    --apmt-bg:#17211f; --apmt-surface:#1f2b29; --apmt-ink:#f4efe4; --apmt-muted:#bac5bd; --apmt-coral:#ff8d77; --apmt-on-coral:#17211f;
    --apmt-peach:#4a2f28; --apmt-sage:#283832; --apmt-butter:#3a3520; --apmt-line:#3f4f4b; --apmt-line-strong:#869691;
    --apmt-good:#8fd19e; --apmt-good-soft:#1d3426; --apmt-on-good:#10201a; --apmt-bad:#ff9f8a; --apmt-bad-soft:#40221b; --apmt-on-bad:#2a120c;
    --apmt-hl:#ffb199; --apmt-focus:#f8e5a4;
  }
}

/* Scoped reset: host rules such as button{}, h1{} or a{} do not reach inside the module. (SVG is left alone:
   the notation engine draws with presentation attributes.) */
.apmt-root :where(div,span,p,h1,h2,h3,h4,ul,ol,li,a,button,label,input,fieldset,legend,details,summary,table,thead,tbody,tr,th,td,article,section,aside,footer,strong,em,b,i,kbd,code,sup,sub,audio,br){all:revert;box-sizing:border-box}
.apmt-root :where(button,input,summary){font:inherit;color:inherit;letter-spacing:inherit}
.apmt-root :where(p,h1,h2,h3,h4,ul,ol,figure){margin:0}
.apmt-root [hidden]{display:none!important}
.apmt-root :where(a){color:inherit;text-decoration:underline;text-underline-offset:3px}
.apmt-root :where(strong,b){font-weight:700}
.apmt-root :where(sup,sub){line-height:0}
.apmt-root :where(kbd){font:600 .85em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:1px 6px;border:1px solid var(--apmt-line-strong);border-bottom-width:2px;border-radius:6px;background:var(--apmt-surface)}
.apmt-root :where(button,a,summary,input,[tabindex="0"]):focus-visible{outline:3px solid var(--apmt-focus);outline-offset:2px}
.apmt-root .apmt-app:focus,.apmt-root .apmt-main:focus,.apmt-root [tabindex="-1"]:focus{outline:none}
.apmt-root .apmt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- frame ---------- */
.apmt-root .apmt-app{display:block;max-width:var(--apmt-max-width,1120px);margin:0 auto;container-type:inline-size;container-name:apmt;overflow-wrap:break-word}
.apmt-root .apmt-top{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.apmt-root .apmt-top:empty{display:none}
.apmt-root .apmt-body{display:block}
.apmt-root .apmt-foot{display:block;margin-top:34px;padding-top:16px;border-top:1px solid var(--apmt-line);color:var(--apmt-muted);font-size:.86rem}
.apmt-root .apmt-foot p{margin:0 0 8px}
.apmt-root .apmt-credit{font-size:.82rem}
.apmt-root .apmt-credit a{color:var(--apmt-ink)}
.apmt-root .apmt-loading{padding:48px 0;text-align:center;color:var(--apmt-muted);display:flex;flex-direction:column;align-items:center;gap:14px}
.apmt-root .apmt-muted{color:var(--apmt-muted);margin:0}

/* ---------- type ---------- */
.apmt-root .apmt-eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--apmt-muted)}
.apmt-root .apmt-h1{font-size:clamp(1.7rem,4.6vw,2.6rem);line-height:1.12;font-weight:800;letter-spacing:-.01em;margin:4px 0 0;text-wrap:balance}
.apmt-root .apmt-accent{font-family:var(--apmt-font-accent);font-style:italic;font-weight:400}
.apmt-root .apmt-h2{font-size:1.3rem;line-height:1.2;font-weight:800;text-wrap:balance}
.apmt-root .apmt-h3{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--apmt-muted);margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.apmt-root .apmt-h3-meta{font-weight:600;letter-spacing:.04em;text-transform:none;font-size:.82rem}
.apmt-root .apmt-h4{font-size:1rem;font-weight:800;margin:4px 0 0}
.apmt-root .apmt-h4 span{font-weight:600;color:var(--apmt-muted);font-size:.86rem;margin-left:8px}
.apmt-root .apmt-lede{color:var(--apmt-muted);margin-top:6px}

/* ---------- buttons ---------- */
.apmt-root .apmt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:1.5px solid transparent;font-weight:800;font-size:.98rem;line-height:1.2;cursor:pointer;text-decoration:none;text-align:center;background:transparent;color:var(--apmt-ink)}
.apmt-root .apmt-btn--primary{background:var(--apmt-coral);border-color:var(--apmt-coral);color:var(--apmt-on-coral)}
.apmt-root .apmt-btn--primary:hover:not(:disabled){background:var(--apmt-coral-hover);border-color:var(--apmt-coral-hover)}
.apmt-root .apmt-btn--ghost{background:var(--apmt-surface);border-color:var(--apmt-line-strong);color:var(--apmt-ink)}
.apmt-root .apmt-btn--ghost:hover:not(:disabled){border-color:var(--apmt-ink)}
.apmt-root .apmt-btn--quiet{color:var(--apmt-muted);padding-inline:12px}
.apmt-root .apmt-btn--quiet:hover:not(:disabled){color:var(--apmt-ink)}
.apmt-root .apmt-btn--danger{background:var(--apmt-bad);border-color:var(--apmt-bad);color:var(--apmt-on-bad)}
.apmt-root .apmt-btn--sm{min-height:38px;padding:7px 14px;font-size:.88rem}
.apmt-root .apmt-btn:disabled{opacity:.45;cursor:not-allowed}
.apmt-root .apmt-textbtn,.apmt-root .apmt-linkbtn{background:none;border:0;padding:4px 0;min-height:36px;color:var(--apmt-ink);font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:underline;text-decoration-color:var(--apmt-coral);text-decoration-thickness:2px;text-underline-offset:4px}
.apmt-root .apmt-linkbtn{font-size:.95rem;min-height:40px}
.apmt-root .apmt-textbtn:hover,.apmt-root .apmt-linkbtn:hover{text-decoration-color:var(--apmt-ink)}
.apmt-root .apmt-linkbtn.is-playing{color:var(--apmt-hl)}
.apmt-root .apmt-back{align-self:flex-start;background:none;border:0;padding:6px 0;min-height:40px;font-weight:800;color:var(--apmt-ink);cursor:pointer;font-size:.95rem}
.apmt-root .apmt-back:hover{text-decoration:underline;text-decoration-color:var(--apmt-coral);text-decoration-thickness:2px;text-underline-offset:4px}
.apmt-root .apmt-actions{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.apmt-root .apmt-spacer{flex:1 1 auto}

/* ---------- home ---------- */
.apmt-root .apmt-mast{display:flex;flex-direction:column;gap:6px}
.apmt-root .apmt-beltkey{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:var(--apmt-muted)}
.apmt-root .apmt-beltkey li{display:flex;align-items:center;gap:8px}
.apmt-root .apmt-beltkey strong{color:var(--apmt-ink)}
.apmt-root .apmt-swatch{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--apmt-ink)}
.apmt-root .apmt-swatch--wb{background:var(--apmt-sage)}
.apmt-root .apmt-swatch--reg{background:var(--apmt-butter)}
.apmt-root .apmt-swatch--bb{background:var(--apmt-coral)}
.apmt-root .apmt-units{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@container apmt (min-width:880px){ .apmt-root .apmt-units{grid-template-columns:repeat(2,minmax(0,1fr))} }
.apmt-root .apmt-unit{display:flex;flex-direction:column;gap:12px;background:var(--apmt-surface);border:1px solid var(--apmt-line);border-radius:var(--apmt-radius);padding:22px 20px 20px}
.apmt-root .apmt-unit-num{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--apmt-muted)}
.apmt-root .apmt-intro{font-size:.92rem;color:var(--apmt-muted);display:block}
.apmt-root .apmt-intro summary{cursor:pointer;font-weight:700;color:var(--apmt-ink);min-height:32px;display:list-item}
.apmt-root .apmt-intro p{margin-top:6px}
.apmt-root .apmt-levels{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@container apmt (min-width:560px){ .apmt-root .apmt-levels{grid-template-columns:repeat(3,minmax(0,1fr))} }
.apmt-root .apmt-beltcell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.apmt-root .apmt-belt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1.5px solid var(--apmt-line-strong);background:var(--apmt-surface);color:var(--apmt-ink);cursor:pointer;min-width:0}
.apmt-root .apmt-belt:hover:not(:disabled){border-color:var(--apmt-ink);background:var(--apmt-bg)}
.apmt-root .apmt-belt:disabled{opacity:.55;cursor:default}
.apmt-root .apmt-belt-name{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1rem}
.apmt-root .apmt-status{font-size:.82rem;color:var(--apmt-muted);font-variant-numeric:tabular-nums}
.apmt-root .apmt-bar{display:flex;width:100%;height:6px;border-radius:3px;background:var(--apmt-sage);overflow:hidden}
.apmt-root .apmt-bar .c{display:block;background:var(--apmt-good)}
.apmt-root .apmt-bar .w{display:block;background:var(--apmt-bad)}
.apmt-root .apmt-testrow{display:block}
.apmt-root .apmt-unit-test{border-style:dashed;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.apmt-root .apmt-unit-foot{display:flex;justify-content:flex-end}
.apmt-root .apmt-exam{background:var(--apmt-sage);border-color:var(--apmt-sage)}
.apmt-root .apmt-exam .apmt-muted,.apmt-root .apmt-exam .apmt-status{color:var(--apmt-ink)}
.apmt-root .apmt-resetall{display:flex;justify-content:center;margin-top:22px}
.apmt-root .apmt-confirm{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1.5px solid var(--apmt-bad);border-radius:12px;background:var(--apmt-bad-soft);color:var(--apmt-ink);max-width:560px}
.apmt-root .apmt-notice{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--apmt-butter)}

/* FRQ rows */
.apmt-root .apmt-frq-list{display:flex;flex-direction:column;gap:8px}
.apmt-root .apmt-frq-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid var(--apmt-line);background:var(--apmt-surface);color:var(--apmt-ink);cursor:pointer}
.apmt-root .apmt-frq-row:hover{border-color:var(--apmt-ink)}
.apmt-root .apmt-frq-num{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--apmt-butter);font-weight:800;font-variant-numeric:tabular-nums}
.apmt-root .apmt-frq-row.is-done .apmt-frq-num{background:var(--apmt-good-soft);color:var(--apmt-good)}
.apmt-root .apmt-frq-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.apmt-root .apmt-frq-title{font-weight:800;line-height:1.3}

/* ---------- set view ---------- */
.apmt-root .apmt-mast--set{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px}
.apmt-root .apmt-mast-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 300px}
.apmt-root .apmt-rank{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--apmt-muted)}
.apmt-root .apmt-scorecard{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px}
.apmt-root .apmt-score-num{font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.apmt-root .apmt-score-num.apmt-frq-scorenum{font-size:1.15rem}
.apmt-root .apmt-score-num.is-empty{color:var(--apmt-muted)}
.apmt-root .apmt-of{color:var(--apmt-muted);font-size:.6em;margin-left:2px}
.apmt-root .apmt-score-label{font-size:.82rem;color:var(--apmt-muted)}
@container apmt (max-width:560px){ .apmt-root .apmt-scorecard{align-items:flex-start;text-align:left} }
.apmt-root .apmt-strip{display:flex;gap:6px;width:100%}
.apmt-root .apmt-strip-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.apmt-root .apmt-strip-cells{display:flex;gap:2px}
.apmt-root .apmt-strip-cell{display:block;flex:1 1 0;height:8px;border-radius:2px;background:var(--apmt-line);min-width:0}
.apmt-root .apmt-strip-cell.c{background:var(--apmt-good)}
.apmt-root .apmt-strip-cell.w{background:var(--apmt-bad)}
.apmt-root .apmt-strip-cell.cur{box-shadow:0 0 0 2px var(--apmt-bg),0 0 0 3.5px var(--apmt-ink)}
.apmt-root .apmt-strip-label{font-size:.72rem;color:var(--apmt-muted);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.apmt-root .apmt-strip-label.wide{overflow:visible}
.apmt-root .apmt-shuf-row{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.apmt-root .apmt-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@container apmt (min-width:900px){ .apmt-root .apmt-layout{grid-template-columns:minmax(0,1fr) 280px} .apmt-root .apmt-navpanel{position:sticky;top:calc(var(--apmt-scroll-offset,0px) + 16px)} }
.apmt-root .apmt-main{display:block;min-width:0;scroll-margin-top:calc(var(--apmt-scroll-offset,0px) + 8px)}
.apmt-root .apmt-qcard,.apmt-root .apmt-results{display:flex;flex-direction:column;gap:18px;background:var(--apmt-surface);border:1px solid var(--apmt-line);border-radius:var(--apmt-radius);padding:clamp(16px,3.4vw,32px)}
.apmt-root .apmt-qmeta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.apmt-root .apmt-qnum{font-size:1.15rem;font-weight:800}
.apmt-root .apmt-qnum span{color:var(--apmt-muted);font-weight:600}
.apmt-root .apmt-chip{font-size:.8rem;font-weight:700;background:var(--apmt-sage);color:var(--apmt-ink);padding:4px 10px;border-radius:999px}
.apmt-root .apmt-stem{font-size:1.12rem;line-height:1.55;max-width:66ch}
.apmt-root .apmt-hintbtn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:999px;border:1.5px dashed var(--apmt-line-strong);background:var(--apmt-surface);color:var(--apmt-ink);font-weight:700;font-size:.92rem;cursor:pointer}
.apmt-root .apmt-hintbtn:hover{border-style:solid;border-color:var(--apmt-ink)}
.apmt-root .apmt-hint{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:12px;background:var(--apmt-butter);line-height:1.55}
.apmt-root .apmt-hint-label{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.apmt-root .apmt-hint .apmt-more{background:var(--apmt-surface)}
.apmt-root .apmt-options{display:flex;flex-direction:column;gap:10px;border:0;padding:0;margin:0;min-width:0}
.apmt-root .apmt-opt{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1.5px solid var(--apmt-line-strong);border-radius:12px;background:var(--apmt-surface);cursor:pointer}
.apmt-root .apmt-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.apmt-root .apmt-opt:hover{border-color:var(--apmt-ink)}
.apmt-root .apmt-opt:focus-within{outline:3px solid var(--apmt-focus);outline-offset:2px}
.apmt-root .apmt-badge{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--apmt-line-strong);font-weight:800;font-size:.95rem;color:var(--apmt-ink)}
.apmt-root .apmt-otext{display:block;min-width:0;line-height:1.45}
.apmt-root .apmt-otext.apmt-omus{color:var(--apmt-ink)}
.apmt-root .apmt-tag{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.apmt-root .apmt-opt.is-selected{border-color:var(--apmt-ink);background:var(--apmt-bg);box-shadow:inset 0 0 0 1px var(--apmt-ink)}
.apmt-root .apmt-opt.is-selected .apmt-badge{background:var(--apmt-ink);border-color:var(--apmt-ink);color:var(--apmt-surface)}
.apmt-root .apmt-options:disabled .apmt-opt{cursor:default}
.apmt-root .apmt-opt.is-correct{border-color:var(--apmt-good);background:var(--apmt-good-soft)}
.apmt-root .apmt-opt.is-correct .apmt-badge{background:var(--apmt-good);border-color:var(--apmt-good);color:var(--apmt-on-good)}
.apmt-root .apmt-opt.is-correct .apmt-tag{color:var(--apmt-good)}
.apmt-root .apmt-opt.is-wrong{border-color:var(--apmt-bad);background:var(--apmt-bad-soft)}
.apmt-root .apmt-opt.is-wrong .apmt-badge{background:var(--apmt-bad);border-color:var(--apmt-bad);color:var(--apmt-on-bad)}
.apmt-root .apmt-opt.is-wrong .apmt-tag{color:var(--apmt-bad)}
.apmt-root .apmt-opt.is-dim{opacity:.72;border-color:var(--apmt-line)}
/* answered notation choice: the tag gets its own row above the music, so the score keeps its unanswered width */
.apmt-root .apmt-opt.apmt-musopt.is-correct,.apmt-root .apmt-opt.apmt-musopt.is-wrong{row-gap:4px}
.apmt-root .apmt-opt.apmt-musopt.is-correct .apmt-badge,.apmt-root .apmt-opt.apmt-musopt.is-wrong .apmt-badge{grid-column:1;grid-row:1/3}
.apmt-root .apmt-opt.apmt-musopt.is-correct .apmt-otext,.apmt-root .apmt-opt.apmt-musopt.is-wrong .apmt-otext{grid-column:2;grid-row:2}
.apmt-root .apmt-opt.apmt-musopt.is-correct .apmt-tag,.apmt-root .apmt-opt.apmt-musopt.is-wrong .apmt-tag{grid-column:2/4;grid-row:1;justify-self:end;line-height:1.2}
.apmt-root .apmt-feedback{display:flex;flex-direction:column;gap:10px;border-radius:12px;padding:16px 18px}
.apmt-root .apmt-feedback.ok{background:var(--apmt-good-soft)}
.apmt-root .apmt-feedback.no{background:var(--apmt-bad-soft)}
.apmt-root .apmt-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:1.02rem}
.apmt-root .apmt-pill{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 12px;border-radius:999px}
.apmt-root .ok .apmt-pill{background:var(--apmt-good);color:var(--apmt-on-good)}
.apmt-root .no .apmt-pill{background:var(--apmt-bad);color:var(--apmt-on-bad)}
.apmt-root .apmt-explain{line-height:1.6}
.apmt-root .apmt-more{display:block;border:1px solid var(--apmt-line);border-radius:12px;background:var(--apmt-surface)}
.apmt-root .apmt-more>summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;min-height:44px;font-weight:800;color:var(--apmt-ink);list-style:none}
.apmt-root .apmt-more>summary::-webkit-details-marker{display:none}
.apmt-root .apmt-more>summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.apmt-root .apmt-more[open]>summary::before{transform:rotate(45deg)}
.apmt-root .apmt-more.apmt-nudge:not([open]){border:1.5px solid var(--apmt-coral)}
.apmt-root .apmt-morebody{display:flex;flex-direction:column;gap:14px;padding:4px 16px 16px;line-height:1.6}
.apmt-root .apmt-mlabel{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--apmt-muted);margin-bottom:3px}
.apmt-root .apmt-tryans{display:block;margin-top:6px}
.apmt-root .apmt-tryans summary{cursor:pointer;font-weight:700;display:list-item}
.apmt-root .apmt-ic{font:.92em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--apmt-bg);padding:1px 5px;border-radius:5px}
.apmt-root .apmt-lims{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1;font-size:.68em;margin:0 .12em 0 .02em}
.apmt-root .apmt-lims sup,.apmt-root .apmt-lims sub{position:static;font-size:1em;line-height:1.05}

/* navigator */
.apmt-root .apmt-navpanel{display:flex;flex-direction:column;gap:16px}
.apmt-root .apmt-navhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.apmt-root .apmt-nav{display:flex;flex-direction:column;gap:14px}
.apmt-root .apmt-navgroup{display:flex;flex-direction:column;gap:6px}
.apmt-root .apmt-navlabel{display:flex;gap:8px;align-items:baseline;font-size:.84rem;line-height:1.3}
.apmt-root .apmt-navlabel .code{font-weight:800;font-variant-numeric:tabular-nums}
.apmt-root .apmt-navlabel .name{flex:1 1 auto;min-width:0;color:var(--apmt-muted)}
.apmt-root .apmt-navlabel .count{color:var(--apmt-muted);font-variant-numeric:tabular-nums}
.apmt-root .apmt-navgrid{display:flex;flex-wrap:wrap;gap:6px}
.apmt-root .apmt-navbtn{position:relative;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--apmt-line);background:var(--apmt-surface);color:var(--apmt-ink);font-size:.84rem;font-variant-numeric:tabular-nums;cursor:pointer;padding:0}
.apmt-root .apmt-navbtn:hover{border-color:var(--apmt-line-strong)}
.apmt-root .apmt-navbtn.c{background:var(--apmt-good-soft);border-color:var(--apmt-good-soft);color:var(--apmt-good);font-weight:800}
.apmt-root .apmt-navbtn.w{background:var(--apmt-bad-soft);border-color:var(--apmt-bad-soft);color:var(--apmt-bad);font-weight:800}
.apmt-root .apmt-navbtn.c::after,.apmt-root .apmt-navbtn.w::after{position:absolute;top:1px;right:3px;font-size:9px;line-height:1}
.apmt-root .apmt-navbtn.c::after{content:"\2713"}
.apmt-root .apmt-navbtn.w::after{content:"\2715"}
.apmt-root .apmt-navbtn.cur{border-color:var(--apmt-ink);box-shadow:0 0 0 1px var(--apmt-ink)}
.apmt-root .apmt-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--apmt-muted)}
.apmt-root .apmt-legend span{display:inline-flex;align-items:center;gap:6px}
.apmt-root .apmt-sw{display:inline-block;width:12px;height:12px;border-radius:3px;border:1.5px solid var(--apmt-line-strong)}
.apmt-root .apmt-sw.c{background:var(--apmt-good-soft);border-color:var(--apmt-good)}
.apmt-root .apmt-sw.w{background:var(--apmt-bad-soft);border-color:var(--apmt-bad)}
.apmt-root .apmt-navreset{display:block}

/* results */
.apmt-root .apmt-res-big{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.apmt-root .apmt-res-big span{font-size:.45em;color:var(--apmt-muted);font-weight:700}
.apmt-root .apmt-bytopic{display:table;width:100%;border-collapse:collapse;font-size:.93rem}
.apmt-root .apmt-bytopic th{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--apmt-muted);text-align:left;padding:0 10px 8px 0}
.apmt-root .apmt-bytopic td{padding:9px 10px 9px 0;border-top:1px solid var(--apmt-line);vertical-align:middle}
.apmt-root .apmt-code{font-weight:800;margin-right:6px;font-variant-numeric:tabular-nums}
.apmt-root .apmt-barcell{width:30%}
.apmt-root .apmt-frac{white-space:nowrap;text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
.apmt-root .apmt-bytopic th.apmt-frac,.apmt-root .apmt-bytopic td.apmt-frac{padding-right:0;text-align:right}
@container apmt (max-width:480px){ .apmt-root .apmt-barcell{width:22%} }
.apmt-root .apmt-review{display:flex;flex-wrap:wrap;gap:8px}
.apmt-root .apmt-revbtn{padding:7px 12px;min-height:38px;border-radius:999px;border:1.5px solid var(--apmt-bad);background:var(--apmt-bad-soft);color:var(--apmt-ink);font-weight:700;font-size:.86rem;cursor:pointer}
.apmt-root .apmt-revbtn.todo{border-color:var(--apmt-line-strong);background:var(--apmt-surface)}

/* ---------- music ---------- */
.apmt-root .apmt-mus{display:block}
.apmt-root .apmt-stim{padding:14px 16px 12px;border:1px solid var(--apmt-line);border-radius:12px;background:var(--apmt-surface);color:var(--apmt-ink)}
.apmt-root .apmt-qcard>.apmt-stim{background:var(--apmt-bg)}
.apmt-root .apmt-frq-setup .apmt-stim,.apmt-root .apmt-frq-part .apmt-stim{margin-top:12px}
.apmt-root .apmt-mus-label{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--apmt-muted);margin:0 0 6px}
.apmt-root .apmt-score{display:block;color:var(--apmt-ink);min-width:0}
.apmt-root .apmt-score .dm-svg .dm-hl{color:var(--apmt-hl)}
.apmt-root .apmt-mus-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px}
.apmt-root .apmt-stim>.apmt-mus-ctl:first-child,.apmt-root .apmt-stim>.apmt-mus-label+.apmt-mus-ctl{margin-top:0}
.apmt-root .apmt-btn.apmt-play{min-width:10.5em;font-variant-numeric:tabular-nums}
.apmt-root .apmt-btn.apmt-play.is-playing{border-color:var(--apmt-hl);color:var(--apmt-hl)}
.apmt-root .apmt-mus-tip{margin:6px 0 0;font-size:.86rem;color:var(--apmt-muted)}
.apmt-root .apmt-mus-inline{display:block;margin:10px 0;color:var(--apmt-ink)}
.apmt-root .apmt-mus-inline .apmt-mus-ctl{margin-top:2px}
.apmt-root .apmt-mus-dir{font-size:.86rem;line-height:1.4;color:var(--apmt-muted);margin:0 0 -8px}
@container apmt (max-width:520px){
  .apmt-root .apmt-stim{padding:12px 8px 10px}
  .apmt-root .apmt-qcard>.apmt-stim{margin-left:-8px;margin-right:-8px}
  .apmt-root .apmt-qcard>.apmt-feedback{margin-left:-8px;margin-right:-8px;padding:14px 12px}
  .apmt-root .apmt-opt{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:10px}
}
/* sight-singing */
.apmt-root .apmt-sing{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--apmt-line-strong)}
.apmt-root .apmt-sing-time,.apmt-root .apmt-sing-count{font-weight:800;font-size:.92rem;font-variant-numeric:tabular-nums}
.apmt-root .apmt-sing-take{display:block;margin-top:10px}
.apmt-root .apmt-sing-take:empty{display:none}
.apmt-root .apmt-sing-take audio{display:block;width:100%;max-width:420px}
.apmt-root .apmt-sing-msg{margin:8px 0 0;font-size:.92rem;color:var(--apmt-bad);font-weight:700}
.apmt-root .apmt-sing-msg:empty{display:none}

/* ---------- FRQ ---------- */
.apmt-root .apmt-frq-wrap{display:flex;flex-direction:column;gap:18px}
.apmt-root .apmt-frq-setup{display:block;background:var(--apmt-surface);border:1px solid var(--apmt-line);border-radius:var(--apmt-radius);padding:clamp(16px,3vw,26px);line-height:1.6}
.apmt-root .apmt-frq-setup p{margin:0 0 10px}
.apmt-root .apmt-frq-setup ul{margin:0 0 10px;padding-left:1.3em}
.apmt-root .apmt-frq-part{display:flex;flex-direction:column;gap:12px;background:var(--apmt-surface);border:1px solid var(--apmt-line);border-radius:var(--apmt-radius);padding:clamp(16px,3vw,26px)}
.apmt-root .apmt-frq-part>.apmt-btn{align-self:flex-start}
.apmt-root .apmt-frq-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:1.1rem;font-weight:800}
.apmt-root .apmt-frq-pts{font-size:.86rem;color:var(--apmt-muted);font-weight:700;white-space:nowrap}
.apmt-root .apmt-frq-text{line-height:1.6}
.apmt-root .apmt-frq-sub{margin:0;padding-left:1.3em;line-height:1.6}
.apmt-root .apmt-frq-hint{display:block;font-size:.95rem}
.apmt-root .apmt-frq-hint summary{cursor:pointer;font-weight:800;display:list-item;min-height:32px}
.apmt-root .apmt-frq-hint p{margin-top:4px;padding:10px 14px;border-radius:10px;background:var(--apmt-butter)}
.apmt-root .apmt-frq-guide{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;background:var(--apmt-bg);border:1px solid var(--apmt-line)}
.apmt-root .apmt-rubric{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.apmt-root .apmt-rubric label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;cursor:pointer;line-height:1.5}
.apmt-root .apmt-rubric input{appearance:auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--apmt-good);cursor:pointer}
.apmt-root .apmt-frq-model{line-height:1.6;margin:0 0 6px}
.apmt-root .apmt-frq-foot{display:flex;flex-direction:column;gap:12px}
.apmt-root .apmt-frq-total{font-size:1.15rem;font-weight:800}