:root {
  color-scheme: light;
  --ink: #192a25;
  --muted: #53645d;
  --green: #214c3e;
  --green-dark: #16372d;
  --mint: #d9ebe1;
  --cream: #f8f6ef;
  --paper: #fffefa;
  --line: #d7ddd5;
  --gold: #b78335;
  --error: #9c2f25;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--cream);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; line-height: 1.55; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem max(1.1rem,calc((100% - 1180px)/2)); color:#fff; background:var(--green-dark); }
.brand { color:#fff; font-weight:800; text-decoration:none; letter-spacing:.02em; }
.header-note { color:#d5e7dc; font-size:.9rem; }
main, footer { width:min(1180px,calc(100% - 2rem)); margin-inline:auto; }
.intro { max-width:850px; padding:3.1rem 0 1.6rem; }
.eyebrow { margin:0 0 .35rem; color:var(--green); font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3 { color:var(--ink); line-height:1.2; }
h1 { max-width:800px; margin:0 0 .8rem; font-size:clamp(2.1rem,5vw,3.7rem); letter-spacing:-.045em; }
h2 { margin:0 0 1rem; font-size:1.55rem; letter-spacing:-.02em; }
h3 { margin:0; font-size:1.1rem; }
.intro > p:not(.eyebrow) { max-width:790px; color:var(--muted); font-size:1.08rem; }
.privacy-note,.limits-note { margin-top:1.1rem; padding:.9rem 1rem; border-left:4px solid var(--gold); background:#fff9e9; color:var(--ink); }
.practice-grid { display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); align-items:start; gap:1.2rem; }
.input-card,.result-card,.method-section { min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 8px 24px rgb(25 42 37 / 5%); }
.input-card { position:sticky; top:1rem; padding:1.35rem; }
.result-card { padding:1.5rem; }
form { display:grid; gap:.9rem; }
label { display:grid; gap:.3rem; color:var(--ink); font-size:.92rem; font-weight:700; }
label span { color:var(--muted); font-size:.8rem; font-weight:500; }
input,textarea { width:100%; min-height:46px; padding:.65rem .72rem; border:1px solid #aebbb1; border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:1rem; }
textarea { min-height:190px; resize:vertical; line-height:1.5; }
label small,.small-note { color:var(--muted); font-size:.8rem; font-weight:400; line-height:1.45; }
button { min-height:44px; padding:.65rem .95rem; border:0; border-radius:9px; background:var(--green); color:white; cursor:pointer; font:inherit; font-weight:750; }
button:hover:not(:disabled) { background:var(--green-dark); }
button:disabled { cursor:not-allowed; opacity:.48; }
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #cc9b42; outline-offset:2px; }
.secondary-button { min-height:40px; padding:.5rem .85rem; border:1px solid var(--green); background:transparent; color:var(--green); }
.secondary-button:hover:not(:disabled) { background:var(--mint); color:var(--green-dark); }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.result-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.result-heading h2 { margin:0; }
.badge { padding:.24rem .6rem; border-radius:99px; background:var(--mint); color:var(--green-dark); font-size:.78rem; font-weight:800; }
.status { min-height:1.5em; margin:.8rem 0; color:var(--muted); font-weight:650; }
.error { margin:0; color:var(--error); font-weight:700; }
.audio-controls,.print-controls { display:flex; flex-wrap:wrap; gap:.55rem; margin:1rem 0; }
.drill-list { display:grid; gap:.55rem; margin:1rem 0; padding:0; list-style:none; }
.drill-row { display:grid; grid-template-columns:3rem minmax(0,1fr); align-items:center; gap:.7rem; min-height:3.1rem; padding:.5rem .7rem; border:1px solid var(--line); border-radius:9px; background:#fff; }
.drill-row.is-current { border-color:var(--gold); background:#fff9e9; box-shadow:0 0 0 2px rgb(183 131 53 / 15%); }
.drill-number { color:var(--green); font-weight:850; }
.drill-answer { min-width:0; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:1.03rem; letter-spacing:.07em; }
.answer-key { margin:1rem 0; padding:1rem; border:1px solid #9ebda9; border-radius:10px; background:#f7fcf8; }
.answer-key[hidden],.badge[hidden] { display:none; }
.answer-list { display:grid; gap:.45rem; margin:.7rem 0 0; padding-left:2rem; }
.answer-list li { padding:.3rem .45rem; border-bottom:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.answer-text { overflow-wrap:anywhere; }
#copy-sheet { display:none; }
.small-note { margin:.4rem 0 0; }
.method-section { margin:1.2rem 0 2rem; padding:1.5rem; }
.method-section p,.method-section li { max-width:850px; color:var(--muted); }
.method-section ol { padding-left:1.4rem; }
.method-section li { margin:.45rem 0; }
.limits-note h3 { font-size:1rem; }
.limits-note p { margin-bottom:0; }
code { padding:.08rem .28rem; border-radius:4px; background:#eeeade; color:var(--ink); }
footer { padding:0 0 2rem; color:var(--muted); font-size:.84rem; }
@media(max-width:850px) { .practice-grid { grid-template-columns:minmax(0,1fr); } .input-card { position:static; } .intro { padding-top:2.2rem; } }
@media(max-width:520px) { main,footer { width:min(100% - 1.1rem,1180px); } .site-header { padding-inline:.65rem; } .header-note { font-size:.75rem; } .intro { padding-top:1.7rem; } .input-card,.result-card,.method-section { padding:1rem; border-radius:12px; } .result-heading { align-items:flex-start; } .audio-controls button,.print-controls button { flex:1 1 42%; } }
@media print {
  @page { margin:14mm; }
  :root,body { min-width:0; background:#fff; color:#000; }
  .site-header, .intro, .input-card, .method-section, footer, .result-heading, .status, .audio-controls, .print-controls, .small-note, #drill-output { display:none !important; }
  main { width:100%; margin:0; }
  .practice-grid { display:block; }
  .result-card { display:block; padding:0; border:0; box-shadow:none; }
  #copy-sheet,#answer-key { display:none !important; }
  body[data-print-mode="copy"] #copy-sheet, body[data-print-mode="answers"] #answer-key { display:block !important; }
  .print-sheet { border:0; padding:0; margin:0; background:white; }
  .print-sheet h2 { margin:0 0 .4rem; font-size:20pt; }
  .print-meta { margin:0 0 1rem; color:#333; font-size:10pt; }
  .blank-list,.answer-list { display:grid; gap:0; margin:0; padding:0; list-style:none; counter-reset:sheetrow; }
  .blank-list li,.answer-list li { display:grid; grid-template-columns:12mm 1fr; align-items:end; min-height:18mm; padding:2mm 0; border-bottom:1px solid #777; font-family:inherit; font-size:12pt; break-inside:avoid; }
  .blank-list .drill-number,.answer-list li::before { color:#111; font-weight:700; }
  .answer-list { counter-reset:sheetrow; }
  .answer-list li { counter-increment:sheetrow; }
  .answer-list li::before { content:counter(sheetrow) "."; }
  .answer-list li .answer-text { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; }
  .answer-list .answer-text { overflow-wrap:anywhere; }
}