*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* DeCod-ED Engine product look (engine.decod-ed.com app.css): neutral grey-green surfaces, Inter, green brand, red only for errors/misses */
  --bg:#F3F5F4; --panel:#EEF1EF; --card:#FFFFFF; --ink:#141819; --body:#3B4442; --mute:#69716F; --faint:#949C99;
  --line:#DFE2DD; --line2:#D0D6D0; --accent:#00A36C; --accent2:#00875A; --accentsoft:#E3F4EC;
  --red:#DC2828; --red2:#B91C1C; --navy:#3B6FD8; --green:#00875A; --amber:#B87A1F;
  --pass:#E3F4EC; --miss:#FCEAEA; --soft:#EEF1EF; --dark:#0A0A0A;
  --r:8px; --r2:12px;
  --sans:'Inter','Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif; --monof:'JetBrains Mono','Space Mono',ui-monospace,monospace;
}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;font-size:16px;line-height:1.6}
.mono{font-family:var(--monof)}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink)}
a{color:inherit}

.top{position:sticky;top:0;z-index:5;background:rgba(243,245,244,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .in{max-width:980px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.brand{font-weight:900;font-size:18px;letter-spacing:-.4px;text-decoration:none}
.brand small{font-family:var(--monof);font-weight:500;font-size:11px;letter-spacing:2px;color:var(--accent);margin-left:8px}
.top nav{display:flex;gap:4px;margin-left:12px}
.top nav a{font-weight:700;font-size:14px;text-decoration:none;padding:6px 10px;color:var(--mute)}
.top nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.who{margin-left:auto;font-size:14px;color:var(--mute);display:flex;gap:12px;align-items:center}
.who button{background:none;border:0;color:var(--mute);text-decoration:underline}
.aibadge{font-family:var(--monof);font-size:11px;letter-spacing:1px;padding:2px 7px;border:1px solid var(--line2);color:var(--mute)}

main{max-width:980px;margin:0 auto;padding:32px 20px 80px}
.eyebrow{font-family:var(--monof);font-size:13px;letter-spacing:2px;color:var(--accent);text-transform:uppercase}
h1{font-weight:900;font-size:36px;letter-spacing:-1.2px;line-height:1.15;margin-top:8px}
h2{font-weight:800;font-size:22px;letter-spacing:-.4px;margin:32px 0 12px}
.lead{color:var(--body);margin-top:10px}
.muted{color:var(--mute)}
.small{font-size:14px}

a.btn{text-decoration:none;display:inline-block}
.btn{background:var(--ink);color:#fff;border:0;font-weight:700;padding:13px 22px}
.btn.red{background:var(--accent)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn:disabled{opacity:.45;cursor:default}
.link{background:none;border:0;font-weight:700;border-bottom:1.5px solid var(--ink);padding:1px 0}

.rule{border-top:2px solid var(--ink);margin-top:20px}
.row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.row .t{font-weight:800;font-size:18px;letter-spacing:-.3px}
.row .m{font-size:14px;color:var(--mute)}
.row .grow{flex:1;min-width:0}
.bar{height:8px;background:var(--panel);width:160px;flex:none;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.bar b{position:absolute;left:0;top:0;bottom:0;background:var(--navy)}
.count{font-family:var(--monof);font-weight:600;font-size:15px;min-width:58px;text-align:right}

.banner{background:var(--ink);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:16px;margin-top:24px}
.banner .btn{background:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--monof);font-size:13.5px;padding:6px 10px;border:1px solid var(--line2);background:var(--card)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:20px}
.wcell{border:1.5px solid var(--line);background:var(--card);padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:4px}
.wcell .w{font-weight:800;font-size:16px}
.wcell .s{font-family:var(--monof);font-size:11.5px;letter-spacing:.5px;color:var(--mute);text-transform:uppercase}
.st-new{border-color:var(--line)} .st-learning{border-color:var(--amber)} .st-reviewing{border-color:var(--navy)} .st-review_due{border-color:var(--red);background:#FFF7F6}
.st-held{border-color:var(--green);background:var(--pass)} .st-needs_review{border-color:var(--red)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}

.steps{display:flex;gap:0;margin-top:22px;border-top:2px solid var(--ink)}
.steps div{flex:1;padding:10px 0;font-family:var(--monof);font-size:12.5px;letter-spacing:1.5px;color:var(--faint);text-transform:uppercase;border-bottom:1px solid var(--line)}
.steps div.on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.steps div.done{color:var(--ink)}

.word{font-weight:900;font-size:44px;letter-spacing:-1.5px;line-height:1.1;margin-top:26px}
.frame{display:inline-flex;gap:8px;align-items:center;margin-top:12px;font-family:var(--monof);font-size:13px;letter-spacing:.5px}
.frame b{color:var(--accent);font-weight:600}
.def{font-size:20px;font-weight:600;margin-top:16px;line-height:1.5}
.ko{color:var(--mute);margin-top:4px}
.box{background:var(--panel);padding:18px 20px;margin-top:18px}
.box .k{font-family:var(--monof);font-size:12px;letter-spacing:1.5px;color:var(--mute);text-transform:uppercase;margin-bottom:6px}
.ex{font-size:17px;line-height:1.7}
.ex mark{background:none;font-weight:800;box-shadow:inset 0 -3px 0 rgba(208,52,58,.35)}

.stem{font-size:19px;line-height:1.8;margin-top:24px}
.stem .blank{display:inline-block;min-width:90px;border-bottom:2.5px solid var(--accent)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.choice{border:1.5px solid var(--line2);background:var(--card);padding:14px 16px;text-align:left;font-family:var(--monof);font-size:16px}
.choice:hover:not(:disabled){border-color:var(--ink)}
.choice.right{border-color:var(--green);background:var(--pass)}
.choice.wrong{border-color:var(--red);background:var(--miss);text-decoration:line-through}
.choice:disabled{cursor:default}
.note{margin-top:16px;padding:14px 16px;border-left:3px solid var(--navy);background:var(--card)}
.note.miss{border-color:var(--red)}
.note.pass{border-color:var(--green)}

textarea{width:100%;min-height:110px;border:1.5px solid var(--line2);background:var(--card);padding:14px;font-size:17px;line-height:1.6;resize:vertical;margin-top:16px}
textarea:focus,input:focus,select:focus{outline:2px solid var(--navy);outline-offset:1px}
.tips{margin-top:12px;font-size:14.5px;color:var(--body)}
.tips b{color:var(--ink)}
.fb{margin-top:20px;border-top:2px solid var(--ink)}
.fbrow{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.fbrow .lab{font-family:var(--monof);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.fbrow .lab.p{color:var(--green)} .fbrow .lab.n{color:var(--red)}
.attempt{margin-top:14px;padding:12px 14px;background:var(--card);border:1px solid var(--line)}
.attempt .q{font-size:16px}
.tag{font-family:var(--monof);font-size:11px;letter-spacing:1px;padding:2px 6px;text-transform:uppercase}
.tag.p{background:var(--pass);color:var(--green)} .tag.n{background:var(--miss);color:var(--red)}
.actions{display:flex;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:s .8s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
.err{color:var(--red);margin-top:10px;font-weight:600}

/* teacher */
table.t{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
table.t th{text-align:left;font-family:var(--monof);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);font-weight:500;padding:8px 10px;border-bottom:2px solid var(--ink)}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:var(--soft)}
.matrix{overflow-x:auto;margin-top:16px;border-top:2px solid var(--ink)}
.matrix table{border-collapse:collapse}
.matrix th{font-family:var(--monof);font-size:12px;font-weight:500;padding:8px;white-space:nowrap;color:var(--mute);text-align:left}
.matrix td{padding:4px}
.matrix td.name{font-weight:700;padding-right:16px;white-space:nowrap}
.cell{width:38px;height:30px;border:1.5px solid var(--line);display:block;background:var(--card)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin-top:12px}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--bg);border-left:2px solid var(--ink);padding:24px;overflow:auto;z-index:20;box-shadow:-12px 0 30px rgba(0,0,0,.08)}
.panel .close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:24px}
form.f{display:grid;gap:14px;margin-top:16px;max-width:620px}
form.f label{display:grid;gap:6px;font-weight:700;font-size:14px}
form.f input,form.f select,form.f textarea{border:1.5px solid var(--line2);background:var(--card);padding:10px 12px;font-weight:400;font-size:15px;margin:0}
.cardedit{border:1px solid var(--line);background:var(--card);padding:16px;margin-top:12px}
.cardedit .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cardedit input,.cardedit textarea{width:100%;border:1px solid var(--line2);padding:7px 9px;font-size:14px;margin:0;min-height:0}
.cardedit label{font-size:12px;font-family:var(--monof);color:var(--mute);display:grid;gap:3px}
.prob{color:var(--red);font-size:13px;font-weight:700}

@media(max-width:640px){
  main{padding:22px 16px 60px}
  h1{font-size:28px}
  .word{font-size:36px}
  .choices{grid-template-columns:1fr}
  .bar{width:90px}
  .top nav{margin-left:0}
  .top .in{flex-wrap:wrap;gap:8px}
  .fbrow{grid-template-columns:1fr;gap:2px}
  .cardedit .grid{grid-template-columns:1fr}
}

/* live */
.live-top{display:flex;gap:24px;align-items:center;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:18px}
.codebig{font-family:var(--monof);font-weight:700;font-size:56px;letter-spacing:6px;line-height:1}
.qr{background:#fff;padding:6px;border:1px solid var(--line)} .qr svg{display:block;width:150px;height:150px}
.stagebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.stagebar button{border:1.5px solid var(--ink);background:none;padding:10px 14px;font-weight:700}
.stagebar button.on{background:var(--ink);color:#fff}
.timer{font-family:var(--monof);font-weight:700;font-size:28px}
.timer.low{color:var(--red)}
.passage{font-size:18px;line-height:1.75;background:var(--card);border:1px solid var(--line);padding:18px 20px;margin-top:16px;white-space:pre-line}
.passage u{text-decoration-color:var(--accent);text-decoration-thickness:2px}
.qtext{font-weight:700;margin-top:14px}
.dist{margin-top:16px;display:grid;gap:8px}
.dist .d{display:grid;grid-template-columns:1fr 56px;gap:10px;align-items:center}
.dist .lbl{position:relative;padding:10px 12px;border:1.5px solid var(--line2);background:var(--card);overflow:hidden}
.dist .lbl i{position:absolute;inset:0 auto 0 0;background:rgba(36,64,122,.12)}
.dist .lbl span{position:relative}
.dist .d.key .lbl{border-color:var(--green)} .dist .d.key .lbl i{background:rgba(30,122,69,.18)}
.lb{counter-reset:r}
.lb .p{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-weight:700}
.lb .p .n{display:inline-block;color:var(--mute);font-family:var(--monof);width:38px}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-top:22px}
.feed .f{padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.feed .f:hover{background:var(--soft)}
.spot{background:var(--ink);color:#fff;padding:22px 24px;margin-top:16px;font-size:22px;line-height:1.6}
.spot .k{font-family:var(--monof);font-size:12px;letter-spacing:2px;color:#F2A3A6;text-transform:uppercase;margin-bottom:8px}
.wordstat{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.scorepill{font-family:var(--monof);font-weight:700;background:var(--ink);color:#fff;padding:6px 12px}
.joinbox{display:flex;gap:10px;margin-top:14px} .joinbox input{border:1.5px solid var(--line2);padding:12px;font-family:var(--monof);font-size:20px;letter-spacing:4px;width:180px;text-transform:uppercase;background:var(--card)}
@media(max-width:860px){.cols{grid-template-columns:1fr}.codebig{font-size:40px}}
@media(max-width:640px){.passage{font-size:16px;padding:14px;line-height:1.7}.live-top h1{font-size:24px!important}}

.qnav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;max-height:84px;overflow:auto}
.qnav button{width:34px;height:28px;border:1px solid var(--line2);background:var(--card);font-family:var(--monof);font-size:12px}
.qnav button.seen{background:var(--panel);color:var(--mute)}
.qnav button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- DeCod-ED Engine look (10/29): shapes, type and header shared with engine.decod-ed.com ---------- */
h1{font-weight:700;letter-spacing:-.03em}
h2{font-weight:650;letter-spacing:-.02em}
.eyebrow{font-size:11.5px;letter-spacing:.14em;font-weight:700}
.btn{border-radius:var(--r);font-weight:600;transition:background .15s,opacity .15s}
.btn.red:hover{background:var(--accent2)}
.btn.ghost{border:1px solid var(--line2);background:var(--card)}
.btn.ghost:hover{border-color:var(--ink)}
.box,.note,.passage,.cardedit,.qr,.attempt,.wcell,.cell{border-radius:var(--r2)}
.choice,.chip,textarea,.aibadge,.qnav button,.joinbox input,form.f input,form.f select,form.f textarea,.cardedit input,.cardedit textarea,.dist .lbl{border-radius:var(--r)}
textarea,form.f input,form.f select,form.f textarea,.joinbox input{border:1px solid var(--line2)}
textarea:focus,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.bar{border-radius:99px;overflow:hidden}
.note{background:var(--card);border:1px solid var(--line);border-left-width:3px}
.note.pass{border-left-color:var(--green)}
.note.miss{border-left-color:var(--red)}

/* header: Engine logo + product name, a link back to the Engine */
.top{background:rgba(255,255,255,.9);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand svg{width:22px;height:24px;flex:none}
.brand small{font-family:var(--monof);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--accent2);background:var(--accentsoft);padding:3px 7px;border-radius:6px;margin-left:2px}
.top nav a{font-weight:500;color:var(--mute);border-radius:6px}
.top nav a:hover{color:var(--ink);background:var(--panel)}
.top nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.enginelink{font-size:13px;font-weight:500;color:var(--mute);text-decoration:none;padding:5px 10px;border:1px solid var(--line);border-radius:var(--r);white-space:nowrap}
.enginelink:hover{color:var(--ink);border-color:var(--line2)}
@media(max-width:720px){.enginelink{display:none}}

/* ---------- sign-in page (Engine login layout: dark brand panel + light form panel) ---------- */
.signin{display:grid;grid-template-columns:minmax(320px,520px) 1fr;min-height:100vh}
.signin .brandside{background:var(--dark);color:#F5F5F5;padding:44px 56px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.signin .brandside .logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;color:#fff;text-decoration:none}
.signin .brandside .logo svg{width:30px;height:34px}
.signin .brandside .mid{margin:auto 0;position:relative;z-index:1}
.signin .brandside .tag{font-family:var(--monof);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:#4FCF8F}
.signin .brandside h1{color:#fff;font-size:42px;font-weight:500;letter-spacing:-.035em;line-height:1.16;margin-top:18px}
.signin .brandside p{color:#A1A1A1;margin-top:16px;max-width:380px}
.signin .brandside ul{list-style:none;margin-top:34px;display:grid;gap:14px;max-width:390px}
.signin .brandside li{display:grid;grid-template-columns:28px 1fr;gap:12px;color:#D4D4D4;font-size:14.5px;line-height:1.5}
.signin .brandside li b{display:block;color:#fff;font-weight:600}
.signin .brandside li span.n{font-family:var(--monof);font-size:12px;color:#4FCF8F;padding-top:2px}
.signin .brandside .shape{position:absolute;right:-90px;bottom:-40px;width:380px;height:300px;background:#1C1C1C;transform:skewX(-28deg);opacity:.9}
.signin .brandside .foot{color:#737373;font-size:13px;position:relative;z-index:1}
.signin .formside{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:48px 24px}
.signin .signpanel{width:100%;max-width:440px}
.signin .signpanel h2{font-size:30px;font-weight:650;letter-spacing:-.03em;margin:0}
.signin .signpanel .sub{color:var(--mute);margin-top:6px;font-size:15px}
.signin .cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:26px;padding:14px 18px;background:var(--accent);color:#fff;border-radius:var(--r);font-weight:600;text-decoration:none;font-size:15.5px}
.signin .cta:hover{background:var(--accent2)}
.signin .cta.off{background:var(--line);color:var(--mute);pointer-events:none}
.signin .soon{font-size:13px;color:var(--mute);margin-top:8px;text-align:center}
.signin .or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;letter-spacing:.12em;font-family:var(--monof);margin:28px 0 16px}
.signin .or:before,.signin .or:after{content:"";flex:1;height:1px;background:var(--line)}
.signin label{font-size:14px;font-weight:600;display:block;margin-bottom:8px}
.signin .join{display:flex;gap:8px}
.signin .join input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:var(--r);padding:12px 14px;font-family:var(--monof);font-size:18px;letter-spacing:.25em;text-transform:uppercase;background:#FAFBFA}
.signin .join button{border:0;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:600;padding:0 18px}
.signin .help{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--mute);line-height:1.6}
.signin .warn{background:var(--miss);border:1px solid #F4C9C9;color:#7F1D1D;border-radius:var(--r);padding:12px 14px;font-size:14px;margin-top:20px}
@media(max-width:860px){.signin{grid-template-columns:1fr}.signin .brandside{padding:28px 24px 32px}.signin .brandside .mid{margin:44px 0 8px}.signin .brandside h1{font-size:30px}.signin .brandside ul,.signin .brandside .foot,.signin .brandside .shape{display:none}}
/* header never wraps; the Engine link shortens */
.brand,.top nav a,.who,.who *{white-space:nowrap}
.top .in{gap:12px}
.top nav{margin-left:4px;gap:2px}
.top nav a{padding:6px 9px}
.who{gap:10px}
@media(max-width:1020px){.brand small{display:none}}
/* sign-in on phones: never wider than the screen */
.signin>*{min-width:0}
@media(max-width:860px){.signin{grid-template-columns:minmax(0,1fr)}.signin .formside{padding:32px 20px 48px;align-items:flex-start}}
@media(max-width:860px){.signin{grid-template-rows:auto 1fr}.signin .brandside .mid{margin:36px 0 4px}}