/* Transposition Practice: an engraved score on ivory paper. Warm cream page, near-black ink, a burgundy accent like
   the ribbon of a bound hymnal, old-style serif headings, and five thin lines (a staff) as the one ornament. The
   answer staff marks the note you just wrote in burgundy and the next slot with a pale gold box. Print: black ink,
   staffs at 6.8 mm, a tune never split across pages. */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root {
  --bg: #f4efe4;
  --paper: #fffcf5;
  --ink: #1e1a16;
  --muted: #5a5048;
  --line: #ddd3c2;
  --edge: #9a8c78;
  --accent: #7a2531;
  --accent-ink: #fffaf3;
  --accent-soft: #f3e1e1;
  --next: #a77b12;
  --next-soft: #fbefc8;
  --ghost: #b9ae9c;
  --ok: #2c6a33;
  --ok-soft: #e1f0df;
  --bad: #b1400f;
  --bad-soft: #fbe6da;
  --info: #3d5a6c;
  --focus: #b06a00;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 3px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --paper: #24201b;
    --ink: #efe7d8;
    --muted: #bdb09c;
    --line: #3a332a;
    --edge: #7d705e;
    --accent: #e3929c;
    --accent-ink: #2a0d12;
    --accent-soft: #3d2227;
    --next: #e6c063;
    --next-soft: #3b3117;
    --ghost: #6e6455;
    --ok: #93d39a;
    --ok-soft: #1b3320;
    --bad: #ffa477;
    --bad-soft: #3d2215;
    --info: #9cc3da;
    --focus: #ffbe5c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* five thin lines: the one ornament */
.hero { padding: 24px 0 6px; }
.hero::after { content: ""; display: block; width: 132px; height: 17px; margin-top: 12px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 4px); opacity: 0.55; }
h1 { font: 600 clamp(1.7rem, 4.6vw, 2.5rem)/1.12 var(--serif); margin: 0 0 8px; letter-spacing: -0.005em; }
.lede { margin: 0; color: var(--muted); max-width: 62ch; }
h2 { font: 600 1.35rem/1.25 var(--serif); margin: 0 0 10px; }
h3 { font: 600 1.12rem/1.3 var(--serif); margin: 0; }

/* setup */
.setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: var(--r); }
.setup label, .print-row label { display: flex; flex-direction: column; gap: 3px; font-size: 1rem; font-weight: 600; color: var(--muted); }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; }
select { max-width: 100%; }
.btn { font: inherit; font-weight: 600; min-height: 44px; padding: 8px 18px; border-radius: var(--r); border: 1px solid var(--accent); background: var(--paper); color: var(--accent); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 44px; padding: 6px 14px; font-size: 0.95rem; }
.btn:hover { filter: brightness(0.96); }
.link { font: inherit; background: none; border: 0; padding: 10px 4px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; }
.r6 { flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 44px; font-weight: 600; color: var(--ink) !important; flex: 1 1 100%; }
.r6 input { width: 22px; height: 22px; min-height: 0; margin: 0; }
.rules-d { margin: 2px 0 6px; }
.rules-d summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 0.95rem; padding: 10px 0; min-height: 44px; }
.rl { margin: 0 0 6px; padding-left: 1.2em; color: var(--muted); font-size: 0.95rem; max-width: 75ch; }
.rl li { margin: 2px 0; }
.src { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
.note { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--bad); background: var(--bad-soft); border-radius: var(--r); font-size: 1rem; }
#store-note { overflow-wrap: anywhere; }
.note.info { border-color: var(--info); background: var(--paper); }

/* the sheet */
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; margin-top: 6px; }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.sheet-head h2 { margin: 0; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.score { margin: 0; color: var(--muted); font-size: 0.95rem; }
.sline { margin: 2px 0 6px; color: var(--muted); font-size: 0.92rem; }
@media (pointer: coarse), (max-width: 560px) { .kbd { display: none; } }
.padhelp { margin: 0 0 4px; color: var(--muted); font-size: 0.85rem; max-width: 75ch; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { padding: 16px 0 14px; border-top: 1px solid var(--line); }
.q:first-child { border-top: 0; }
.q h3 { display: flex; align-items: baseline; gap: 10px; }
.qn { font: 600 0.95rem/1 var(--sans); color: var(--accent-ink); background: var(--accent); min-width: 1.7em; height: 1.7em; display: inline-grid; place-items: center; border-radius: 50%; flex: none; }
.scen { margin: 6px 0 4px; }
.fig { margin: 6px 0; }
.fig svg { display: block; width: 100%; height: auto; }

/* staffs: everything drawn in currentColor, so states and dark mode only change a colour */
.staff { color: var(--ink); overflow: visible; }
.staff .gl, .staff .beam, .staff .flag, .staff .dot, .staff .bar-end { fill: currentColor; }
.staff line, .staff .gl-s { stroke: currentColor; }
.staff .sl, .staff .bar { stroke-width: 1; }
.staff .stem { stroke-width: 1.3; }
.staff .lg { stroke-width: 1.4; }
.staff .ts { font: 700 22px/1 Georgia, "Times New Roman", serif; fill: currentColor; }
.staff .lab { font: italic 12px Georgia, serif; fill: var(--muted); }
.staff .hit { fill: transparent; cursor: pointer; }
.staff .hl { fill: none; }
.staff .n.ghost { color: var(--ghost); }
.staff .beam.ghost { fill: var(--ghost); }
.staff .n.is-next .hl { fill: var(--next-soft); stroke: var(--next); stroke-dasharray: 3 2; }
.staff .n.is-edit .hl { fill: var(--accent-soft); }
.staff .n.is-edit { color: var(--accent); }
.staff .n.is-right { color: var(--ok); }
.staff .n.is-wrong { color: var(--bad); }
.staff .mk { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ansbox { margin-top: 8px; padding: 8px 10px 10px; border-radius: var(--r); background: var(--bg); }
.anshead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 14px; }
.ylab { font: 600 1rem var(--serif); color: var(--muted); padding-bottom: 10px; }
.newkey { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; font-weight: 600; color: var(--muted); max-width: 100%; }
.newkey select { max-width: 100%; }
.answer { border-radius: var(--r); }
.answer:focus-visible { outline-offset: 4px; }
.write { margin-top: 4px; }

/* the note pad: ivory keys */
.pad { display: grid; gap: 6px; margin-top: 6px; }
.prow { display: grid; gap: 6px; }
.letters { grid-template-columns: repeat(7, 1fr); }
.accs { grid-template-columns: repeat(5, 1fr) 1.6fr; }
.moves { grid-template-columns: repeat(6, 1fr); }
.alls { grid-template-columns: 1fr 1fr; }
.alls .pk { font-size: 0.92rem; }
.readas { margin: 4px 0 0; color: var(--info); font-size: 0.9rem; }
.pk { font: 600 1.05rem/1 var(--sans); min-width: 44px; min-height: 44px; padding: 0 4px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-bottom-width: 3px; border-radius: var(--r); cursor: pointer; }
.pk.acc { display: inline-grid; place-items: center; }
.pk .ai .gl { fill: currentColor; }
.pk .ai .gl-s { stroke: currentColor; }
.pk.wide2 { font-size: 0.95rem; }
.moves .pk { font-size: 0.95rem; white-space: nowrap; }
.pk:active { transform: translateY(1px); border-bottom-width: 2px; }
.letters .pk { font-family: var(--serif); font-size: 1.15rem; }
.as-text { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.as-text input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; width: 100%; }
.texthint { margin: 4px 0 0; color: var(--bad); font-size: 0.9rem; }

.fbwrap:empty { display: none; }
.qscore { margin: 8px 0 2px; font-weight: 600; }
.qscore.all { color: var(--ok); }
.fbs { margin: 4px 0 0; padding-left: 1.1em; font-size: 0.95rem; }
.fb.wrong { color: var(--bad); }
.fb.empty { color: var(--muted); }
.fb b { color: var(--ink); font-weight: 600; }
.qfoot { margin-top: 8px; }
.work { margin-top: 8px; }
.work summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 10px 0; min-height: 44px; }
.keybox { padding: 2px 0; }
.kk { margin: 4px 0; }
.steps { margin: 4px 0; padding-left: 1.1em; color: var(--ink); font-size: 0.95rem; max-width: 75ch; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.hint { color: var(--muted); font-size: 0.88rem; }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.95rem; }

/* print and share */
.share { margin: 16px 0 6px; }
.print-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.share-out label { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; color: var(--muted); }
.share-out input { width: 100%; }
.recent { margin-top: 10px; }
.recent summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }
.recent ul { list-style: none; padding: 0; margin: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.recent small { display: block; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 30px); opacity: 0; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r); max-width: calc(100vw - 32px); width: max-content; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 20; font-size: 1rem; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* content */
.content { padding: 26px 0 10px; max-width: 72ch; }
.content h2 { margin-top: 26px; }
.method, .levels { padding-left: 1.3em; }
.method li, .levels li { margin: 4px 0; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; min-height: 44px; }
.faq p { margin: 0 0 12px; }
.sources { font-size: 0.9rem; color: var(--muted); margin-top: 20px; }

footer { margin-top: 30px; padding: 18px 0 30px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.indep { margin: 0 0 8px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-footer a { color: var(--muted); }

.print-root { display: none; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .sheet { padding: 12px 10px; margin-left: -6px; margin-right: -6px; }
  .setup { padding-left: 10px; padding-right: 10px; }
  .setup { gap: 8px; }
  .setup .lv { flex: 1 1 150px; min-width: 150px; }
  .hero { padding-top: 16px; }
  .hero::after { margin-top: 8px; }
  .setup .lv select { width: 100%; }
  .ansbox { padding: 6px 6px 8px; margin-left: -4px; margin-right: -4px; }
  .newkey, .newkey select { width: 100%; }
}
@media (max-width: 380px) {
  .sheet { padding: 12px 6px; }
  .ansbox { padding: 6px 4px 8px; margin-left: -6px; margin-right: -6px; }
  .prow { gap: 4px; }
  .letters { grid-template-columns: repeat(4, 1fr); }
  .accs { grid-template-columns: repeat(5, 1fr); }
  .accs .wide2 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } .pk:active { transform: none; } }

/* ---------- print ---------- */
@media print {
  @page { margin: 13mm 12mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  .print-root .staff { color: #000; }
  .print-root .staff .lab { fill: #000; font-size: 15px; }
  .pkey .pq { padding: 1.2mm 0 0.8mm; }
  .pkey .pwork { font-size: 8.5pt; line-height: 1.3; }
  .pt { width: 100%; border-collapse: collapse; }
  .pt td { padding: 0; }
  .prun { font-size: 8pt; color: #444; padding-bottom: 3mm !important; }
  .psheet, .pkey { break-after: page; }
  .pkey:last-child { break-after: auto; }
  .ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; border-bottom: 1.2pt solid #000; padding-bottom: 2mm; }
  .ph h2 { font: 600 17pt/1.1 var(--serif); margin: 0; white-space: nowrap; }
  .ph p { margin: 0; text-align: right; font-size: 8.5pt; }
  .pmeta { display: flex; gap: 10mm; margin: 4mm 0 2mm; font-size: 10.5pt; }
  .prule { font-size: 8pt; line-height: 1.35; margin: 0 0 2mm; padding: 1.5mm 2.5mm; border: 0.6pt solid #000; }
  .pinst { font-size: 9pt; margin: 0 0 1mm; }
  .pqs { list-style: none; margin: 0; padding: 0; }
  .pq { break-inside: avoid; page-break-inside: avoid; padding: 2mm 0 1mm; border-top: 0.5pt solid #999; }
  .pq:first-child { border-top: 0; }
  .pq h3 { font: 600 11pt/1.3 var(--serif); margin: 0; }
  .pfig { margin: 1mm 0; }
  .pfig svg { display: block; max-width: 100%; height: auto; }
  .pnk { margin: 0; font-size: 10.5pt; }
  .pwork { margin: 0.5mm 0 0; font-size: 9pt; line-height: 1.35; }
}