/* Layout: one narrow column, phone first. Each round is a text-message thread as it appears on a phone, a question, and large answer buttons. */
:root{
  --bg:#EEF2F7; --surface:#FFFFFF; --ink:#14213D; --muted:#4A5878; --line:#C9D3E3;
  --accent:#E8A100; --on-accent:#14213D; --hover:#DDE6F3;
  --good:#1F7A4D; --good-bg:#E2F3EA; --bad:#B3261E; --bad-bg:#FBE9E7;
  /* the phone thread */
  --ph-bg:#FFFFFF; --ph-bar:#F6F6F6; --ph-rule:#D8D8DC; --ph-ink:#000000; --ph-dim:#6E6E73;
  --ph-in:#E9E9EB; --ph-link:#0A6CFF; --ph-av:#9A9AA2; --ph-av-ink:#FFFFFF;
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;
  --phone:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1729; --surface:#1A2440; --ink:#F1F4FA; --muted:#A9B5CF; --line:#33416A;
  --accent:#F5B92E; --on-accent:#14213D; --hover:#26335A;
  --good:#6FD3A0; --good-bg:#173527; --bad:#FF9A8F; --bad-bg:#40201D;
  --ph-bg:#000000; --ph-bar:#161618; --ph-rule:#2C2C2E; --ph-ink:#FFFFFF; --ph-dim:#98989F;
  --ph-in:#26262A; --ph-link:#4C9BFF; --ph-av:#5E5E66; --ph-av-ink:#FFFFFF; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0F1729; --surface:#1A2440; --ink:#F1F4FA; --muted:#A9B5CF; --line:#33416A;
  --accent:#F5B92E; --on-accent:#14213D; --hover:#26335A;
  --good:#6FD3A0; --good-bg:#173527; --bad:#FF9A8F; --bad-bg:#40201D;
  --ph-bg:#000000; --ph-bar:#161618; --ph-rule:#2C2C2E; --ph-ink:#FFFFFF; --ph-dim:#98989F;
  --ph-in:#26262A; --ph-link:#4C9BFF; --ph-av:#5E5E66; --ph-av-ink:#FFFFFF; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.25rem;line-height:1.5;padding-inline:16px;padding-block:20px 48px}
main{max-width:34rem;margin-inline:auto;display:flex;flex-direction:column;gap:20px}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:2.4rem}
h2{font-size:1.6rem}
p{margin:0}
.brand{font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stack{display:flex;flex-direction:column;gap:16px}
.muted{color:var(--muted)}

.bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-variant-numeric:tabular-nums}
.track{height:10px;background:var(--line);border-radius:5px;overflow:hidden}
.track span{display:block;height:100%;background:var(--accent);transition:width .3s}

/* phone thread */
.phone{font-family:var(--phone);background:var(--ph-bg);color:var(--ph-ink);border:2px solid var(--line);border-radius:22px;overflow:hidden;line-height:1.3}
.ph-head{background:var(--ph-bar);border-bottom:1px solid var(--ph-rule);padding:10px 12px 8px;display:grid;grid-template-columns:2rem 1fr 2rem;align-items:center}
.ph-back{color:var(--ph-link);font-size:2rem;line-height:1}
.ph-who{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ph-av{width:3rem;height:3rem;border-radius:50%;background:var(--ph-av);color:var(--ph-av-ink);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:600;position:relative;overflow:hidden}
.ph-av.anon::before{content:"";position:absolute;top:22%;width:36%;height:36%;border-radius:50%;background:var(--ph-av-ink)}
.ph-av.anon::after{content:"";position:absolute;top:64%;width:74%;height:60%;border-radius:50%;background:var(--ph-av-ink)}
.ph-name{font-size:.85rem;overflow-wrap:anywhere;text-align:center}
.ph-body{padding:12px 12px 16px;display:flex;flex-direction:column;gap:4px}
.ph-time{align-self:center;text-align:center;font-size:.75rem;color:var(--ph-dim);padding-bottom:8px}
.ph-time b{font-weight:600}
.bub{align-self:flex-start;max-width:82%;background:var(--ph-in);padding:9px 14px;border-radius:20px;font-size:1.1rem;overflow-wrap:anywhere}
.bub:last-of-type{border-bottom-left-radius:6px}
.ph-junk{font-size:.8rem;color:var(--ph-dim);padding:8px 4px 0}
.ph-junk span{color:var(--ph-link)}

.opts{display:flex;flex-direction:column;gap:12px}
button{font:inherit;color:inherit;cursor:pointer}
.opt{min-height:64px;text-align:left;padding:14px 18px;background:var(--surface);border:2px solid var(--ink);border-radius:12px;font-weight:700}
.opt:hover:not(:disabled){background:var(--hover)}
.opt:disabled{cursor:default;opacity:.55}
.opt.right{background:var(--good-bg);border-color:var(--good);opacity:1}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);opacity:1}
.go{min-height:64px;padding:14px 26px;background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);border-radius:12px;font-weight:700;font-size:1.3rem;align-self:flex-start}
:focus-visible{outline:4px solid var(--accent);outline-offset:3px}

.result{border-left:8px solid var(--good);background:var(--good-bg);padding:16px 18px;border-radius:0 12px 12px 0;display:flex;flex-direction:column;gap:8px}
.result.miss{border-color:var(--bad);background:var(--bad-bg)}
.result strong.pts{font-size:1.4rem}

.ribbon{align-self:center;width:13rem;max-width:100%;aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--on-accent);border:6px double var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}
.ribbon b{font-family:var(--display);font-weight:400;font-size:3.2rem;line-height:1;font-variant-numeric:tabular-nums}
.ribbon span{font-size:1rem;font-weight:700}
.rules{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:8px}
.copybox{background:var(--surface);border:2px dashed var(--line);border-radius:12px;padding:16px;user-select:all;overflow-wrap:anywhere}
a{color:inherit}
@media (prefers-reduced-motion: reduce){ .track span{transition:none} }

/* --- added: setup line, difficulty, email view, end-of-test options --- */
.brand a{color:inherit;text-decoration:none}
.setup{background:var(--surface);border-left:6px solid var(--accent);padding:12px 16px;border-radius:0 10px 10px 0;font-size:1.1rem}
.level{font-size:.95rem;color:var(--muted);font-weight:700;letter-spacing:.04em}
.level i{font-style:normal;letter-spacing:.15em;color:var(--ink)}
.mail{font-family:var(--phone);background:var(--ph-bg);color:var(--ph-ink);border:2px solid var(--line);border-radius:14px;overflow:hidden;line-height:1.4}
.mail-head{background:var(--ph-bar);border-bottom:1px solid var(--ph-rule);padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:.95rem}
.mail-head b{font-size:1.15rem}
.mail-head .addr{color:var(--ph-dim);overflow-wrap:anywhere}
.mail-body{padding:14px;display:flex;flex-direction:column;gap:12px;font-size:1.05rem;align-items:flex-start}
.mail-btn{background:var(--ph-link);color:#FFFFFF;border-radius:8px;padding:10px 16px;font-weight:600}
.mail-url{font-size:.85rem;color:var(--ph-dim);overflow-wrap:anywhere}
.mail-url span{color:var(--ph-ink)}
.card{background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.card.locked{border-style:dashed;border-color:var(--line)}
.card form{display:flex;flex-direction:column;gap:12px;width:100%}
.card label{font-weight:700}
.card input[type=email]{min-height:64px;padding:12px 16px;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--ink);border-radius:12px;width:100%}
.card label.check{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.check input{width:1.6rem;height:1.6rem;flex:none;margin-top:.15rem}
.note{font-weight:700}
.small{font-size:1rem}

/* --- account page --- */
.field{min-height:64px;padding:12px 16px;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--ink);border-radius:12px;width:100%}
.field.code{font-size:1.8rem;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.formcol{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.formcol label{font-weight:700}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;font-weight:400}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:.95rem;color:var(--muted)}
.chart{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .mark80{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.chart .hit{fill:transparent;cursor:pointer;outline:none}
.chart .hit:focus-visible{outline:none;stroke:var(--accent);stroke-width:3}
.chart text{fill:var(--muted);font-family:var(--body);font-size:12px}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);padding:6px 10px;border-radius:8px;font-size:.95rem;transform:translate(-50%,-130%);white-space:nowrap}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:1.05rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
a.go{text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:420px){ .stats{grid-template-columns:minmax(0,1fr)} }