:root{--ink:#203f35;--muted:#687269;--paper:#f4f2e9;--white:#fffef8;--line:#d5d9ca;--gold:#c99d2f;--green:#163f34;--mono:Consolas,'Courier New',monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 'Segoe UI',Arial,sans-serif}
header{background:var(--green);color:#f4efd9;padding:22px max(4vw,24px)}
header h1{font:normal clamp(24px,3vw,34px)/1.1 Georgia,serif;margin:0 0 8px}
header p{margin:0;max-width:60ch;opacity:.9;font-size:15px}
main{max-width:1180px;margin:auto;padding:24px max(4vw,18px) 60px}
section{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:24px;margin-bottom:22px}
h2{font:normal 22px Georgia,serif;margin:0 0 12px}
.picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.vowel-btn{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:12px 16px;cursor:pointer;font:17px Georgia,serif;color:var(--ink);min-width:96px}
.vowel-btn small{display:block;font:10px var(--mono);color:var(--muted);margin-top:3px}
.vowel-btn.on{background:var(--green);color:#f4efd9;border-color:var(--green)}
.vowel-btn.on small{color:#cfd8cb}
.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
button{border:0;border-radius:6px;font-weight:600;cursor:pointer;font-size:15px}
.primary{background:var(--green);color:#fff;padding:16px 26px}
.primary.rec{background:#8d331f}
.primary:disabled{opacity:.55;cursor:default}
.secondary{background:transparent;color:var(--green);border:1px solid var(--green);padding:9px 16px}
.secondary:disabled{opacity:.45;cursor:default}
#status{margin:0;color:var(--muted);font-size:14px;flex:1;min-width:220px}
.verdict{margin-top:18px;padding:14px 16px;border-radius:6px;border:1px solid transparent;font-weight:600;min-height:3.1em;visibility:hidden}
.verdict.shown{visibility:visible;border-color:var(--line)}
.verdict.match{border-color:#3f7d52;color:#1d5130;background:#f1f7f0}
.verdict.miss{border-color:#a8652b;color:#7e4514;background:#fbf3ec}
.evidence{font:11px var(--mono);letter-spacing:.5px;color:var(--muted);margin-top:6px;min-height:1em}
.donate{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);visibility:hidden}
.donate.shown{visibility:visible}
.donate label{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer;margin-bottom:10px}
.fineprint{font-size:12px;color:var(--muted);margin:8px 0 0;max-width:70ch}
svg{width:100%;height:auto}
.frame{fill:#f8f7ee;stroke:#aab2a1;stroke-width:1.5}
.rule{stroke:#d6d9cd;stroke-width:1}
.axis-label{font:11px var(--mono);fill:var(--muted)}
.ref circle{fill:#f7f2dc;stroke:#8a7a45;stroke-width:1.5}
.ref text{font:19px Georgia,serif;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:#fffef8;stroke-width:3px}
.you circle{fill:var(--gold);stroke:#563f08;stroke-width:3}
.you text{font:bold 12px var(--mono);fill:#563f08}
.notes p{max-width:72ch;font-size:15px}
.notes a{color:var(--green)}
footer{padding:20px max(5vw,24px) 40px;color:var(--muted);font-size:12px;max-width:940px;margin:auto}
@media(max-width:620px){.vowel-btn{flex:1 1 40%}}

.loader{margin:4px 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:7px;background:#f8f7ee}
.loader.done{display:none}
.loader-head{margin:0 0 12px;font-weight:600;font-size:15px}
.bar{height:12px;border-radius:6px;background:#e6e8dc;overflow:hidden;position:relative}
.bar-fill{height:100%;width:0;border-radius:6px;background:var(--green);transition:width .35s ease;
  background-image:linear-gradient(115deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,
    rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%);
  background-size:22px 22px;animation:crawl 1s linear infinite}
@keyframes crawl{from{background-position:0 0}to{background-position:22px 0}}
.loader-note{margin:10px 0 0;font:11px var(--mono);letter-spacing:.5px;color:var(--muted)}
.controls.waiting{opacity:.45}
.trail{fill:#c99d2f}
.you.live circle{fill:#c99d2f;stroke:#563f08;stroke-width:2;opacity:.95}

/* The chart is the fixed point of the page: it is drawn first and never resized,
   so nothing appearing below it can move it. */

.chart-card #chart{width:100%;aspect-ratio:720/520;height:auto;display:block}
.pick-label{margin:0 0 10px;font-size:14px;color:var(--muted)}
.aim{margin:0;font-weight:600}
#record[disabled]{opacity:.5;cursor:not-allowed}
.ref.aim circle{stroke-width:2.5}
.ref.aim text{font-weight:700}

/* Wide screens: the chart holds the left column and never moves, the controls
   sit beside it. Everything the page does was otherwise below the fold on a
   laptop - you could not see the picker, the button or the verdict without
   scrolling, which is no way to find out whether it heard you. */
@media(min-width:960px){
  main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr);
       gap:22px;align-items:start}
  .chart-card{grid-column:1;grid-row:1;margin:0;position:sticky;top:18px}
  .stage{grid-column:2;grid-row:1;margin:0}
  .notes{grid-column:1/-1;margin:22px 0 0}
}
.chart-card .fineprint{max-width:64ch}

.said-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;font-size:14px}
#said{font:15px Georgia,serif;padding:7px 9px;border:1px solid var(--line);border-radius:6px;
      background:var(--paper);color:var(--ink)}