:root{--bg:#f6f8fb;--ink:#1d2533;--card:#fff;--line:#d7deea;--go:#1f6feb;--ok:#137333;--no:#b3261e;
--n:#1565c0;--v:#c62828;--adj:#2e7d32;--art:#6a1b9a;--pr:#00838f;--prep:#ef6c00;--cj:#5d4037;--rel:#ad1457}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.5 system-ui,"Segoe UI",Arial,sans-serif}
body{overflow-x:hidden}.wrap{max-width:860px;margin:0 auto;padding:12px}
.draft{background:#fff3cd;border:1px solid #e0c36a;border-radius:8px;padding:6px 10px;font-size:14px;margin-bottom:8px}
header h1{font-size:1.4rem;margin:.2rem 0}header .msg{margin:.2rem 0 .4rem}header .meta{font-size:13px;color:#5b6475}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}.tts{font-size:13px;color:#5b6475}
button{font:inherit;min-height:48px;border-radius:10px;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffbf00;outline-offset:2px}
.go{background:var(--go);color:#fff;border:0;padding:10px 18px;text-decoration:none;display:inline-flex;align-items:center;min-height:48px;border-radius:10px}
.go[disabled]{opacity:.45;cursor:default}.go.alt{background:#5b6475}.link{background:none;border:0;color:var(--go);text-decoration:underline;padding:8px 0}
.toggle{background:#fff;border:2px solid var(--line);padding:6px 12px}.toggle[aria-pressed=true]{border-color:var(--ok);background:#e6f4ea}
#nav{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.dot{font-size:13px;min-height:36px;padding:4px 10px;background:#fff;border:1px solid var(--line)}.dot.on{background:var(--go);color:#fff;border-color:var(--go)}
#screen{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;min-height:300px;outline:none;overflow-wrap:anywhere}
.foot{display:flex;justify-content:space-between;gap:10px;margin:12px 0 30px}.foot button{flex:1;max-width:220px;background:#fff;border:2px solid var(--go);color:var(--go);font-weight:600}.foot button[disabled]{opacity:.35}
h2{font-size:1.2rem;margin:.2rem 0 .6rem}.prompt{font-weight:600}.big{font-size:1.15rem;font-weight:600}
.rulecard{background:#eef4ff;border-left:6px solid var(--go);border-radius:10px;padding:10px 14px}.oneliner{font-weight:700}
.contrast{margin-top:10px;background:#fff8e1;border-left:6px solid #f9a825;border-radius:10px;padding:8px 12px}
.sent{margin:10px 0}.sline{font-size:1.2rem;margin:.2rem 0}.w{font-weight:700;padding:0 2px;border-bottom:3px solid currentColor}
.t-n{color:var(--n)}.t-v{color:var(--v)}.t-adj{color:var(--adj)}.t-art{color:var(--art)}.t-pr{color:var(--pr)}.t-prep{color:var(--prep)}.t-cj{color:var(--cj)}.t-rel{color:var(--rel)}.t-x{color:var(--ink);border:0}
.zero{display:inline-block;border:2px dashed #888;border-radius:6px;padding:0 6px;color:#666;font-weight:700}
.say{min-height:40px;min-width:44px;border:1px solid var(--line);background:#fff;margin-left:6px;padding:0 6px}
.blocks{display:flex;flex-wrap:wrap;gap:6px}.b{display:inline-flex;flex-direction:column;align-items:center;border:2px solid currentColor;border-radius:8px;padding:2px 8px;min-width:56px;background:#fff}
.b b{color:var(--ink)}.b small{font-size:12px}.b.bz{border-style:dashed}.role{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;background:#263238;color:#fff;border-radius:4px;padding:0 4px}
.legend{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;margin:4px 0 8px}.excard{border-top:1px solid var(--line);padding-top:6px}.note{color:#3c4656;margin:.2rem 0 .6rem}
.exc{list-style:none;padding:0}.exc li{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}.ico{margin-right:6px}
.envi{border-collapse:collapse;width:100%}.envi td,.envi th{border:1px solid var(--line);padding:6px;text-align:left}
.mrow{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}.wrong{color:var(--no);margin:.1rem 0}.right{color:var(--ok);margin:.1rem 0}.lab{font-weight:700}.why{margin:.1rem 0}
.opts{display:grid;gap:8px;margin:8px 0}.opt{text-align:left;background:#fff;border:2px solid var(--line);padding:10px 12px}
.opt.sel{border-color:var(--go);background:#eef4ff}.opt.sel::before{content:"☑ ";}.opt.ok{border-color:var(--ok);background:#e6f4ea}.opt.ok::before{content:"✓ right · ";font-weight:700;color:var(--ok)}
.opt.no{border-color:var(--no);background:#fce8e6}.opt.no::before{content:"✗ not right · ";font-weight:700;color:var(--no)}.opt.dim{opacity:.7}
.fb .good{color:var(--ok);font-weight:700}.fb .tryit{color:#7a4b00;font-weight:700}.whys li.ok{color:var(--ok)}.whys li.no{color:var(--no)}
.hint{font-size:14px;color:#5b6475}.qn{font-size:14px;color:#5b6475}
.vi{display:none;background:#fff0f3;border-radius:8px;padding:6px 10px}.vi-on .vi{display:block}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:12px;overflow:auto;z-index:10}
.panel{background:#fff;border-radius:14px;max-width:720px;width:100%;padding:14px}
.practice{list-style:none;padding:0}.practice li{margin:8px 0}.pending{display:inline-block;border:2px dashed #999;border-radius:10px;padding:10px 14px;color:#555;background:#f1f1f1}
.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink)}.card .done{color:var(--ok);font-weight:700}
@media (max-width:480px){html,body{font-size:17px}.sline{font-size:1.1rem}.wrap{padding:8px}#screen{padding:10px}}

.crumb{font-size:14px;margin:0 0 6px}.crumb a{color:var(--go)}
#instr{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0;padding:8px 12px;background:#fff8d6;border:2px solid #f0c040;border-radius:14px;font-size:16px;color:#4a3a00}#instr[hidden]{display:none}#instr button{border:0;border-radius:999px;padding:6px 14px;background:#ff9a3d;color:#fff;font-weight:700;min-height:40px;cursor:pointer}
.b.t-x{color:#555}.b.t-x small{font-style:italic}
.embed .crumb,.embed [data-testid=back-to-grammar]{display:none}.embed body{background:#fff}