/* NJP preview — brand tokens. Red #D40000 sampled from the logo; never body text. */
:root{
  --red:#D40000; --red-press:#A80000; --red-tint:rgba(212,0,0,.08);
  --paper:#FAF7F2; --raised:#FFFFFF; --ink:#1A1714; --muted:#6B655D; --line:#E4DFD6;
  --display:"EB Garamond",serif; --reading:"Cardo",serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--paper:#141210;--raised:#1E1B18;--ink:#EDE8E0;--muted:#9A938A;--line:#2C2823}
}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);max-width:760px;margin:0 auto;padding:0 16px 96px}
header{display:flex;gap:14px;align-items:center;padding:22px 0 10px}
h1{font-family:var(--display);font-weight:600;font-size:26px}
.tag{color:var(--muted);font-size:13px;letter-spacing:.4px}
.mark{position:relative;width:44px;height:44px;background:var(--red);border-radius:9px;flex:none}
.mark .v,.mark .h{position:absolute;background:#fff}
.mark .v{left:18px;top:8px;width:8px;height:28px}
.mark .h{left:8px;top:18px;width:28px;height:8px}
nav{display:flex;gap:6px;position:sticky;top:0;background:var(--paper);padding:10px 0;z-index:5;border-bottom:1px solid var(--line)}
nav button{font:600 15px var(--ui);color:var(--muted);background:none;border:0;padding:8px 14px;border-radius:9px;cursor:pointer}
nav button.active{color:var(--red);background:var(--red-tint)}
main{padding-top:18px}
h2{font-family:var(--display);font-size:22px;margin:18px 0 10px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
select,.btn{font:15px var(--ui);color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.btn{cursor:pointer;font-weight:600}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:active{background:var(--red-press)}
.verse{font-family:var(--reading);font-size:18px;line-height:1.75;margin:0 0 10px}
.vnum{color:var(--red);font:700 12px var(--ui);vertical-align:super;margin-right:5px}
.gk{cursor:pointer;border-radius:4px}
.gk:hover,.gk.sel{background:var(--red-tint)}
.card-list{display:grid;gap:10px}
.deck,.work{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer}
.deck b,.work b{font-family:var(--display);font-size:17px;font-weight:600}
.deck small,.work small{color:var(--muted)}
.flash{background:var(--raised);border:1px solid var(--line);border-radius:14px;min-height:280px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:26px;text-align:center;cursor:pointer}
.flash .front{font-family:var(--reading);font-size:30px}
.flash .front.cat{font-family:var(--display);font-size:20px;line-height:1.5}
.flash .back{font-family:var(--reading);font-size:18px;line-height:1.6;border-top:1px solid var(--line);padding-top:14px}
.hint{color:var(--muted);font-size:13px}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.grades button{font:600 14px var(--ui);padding:12px 4px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--ink);cursor:pointer}
.grades button small{display:block;font-weight:400;color:var(--muted)}
.grades .again{background:var(--red);border-color:var(--red);color:#fff}
.grades .again small{color:rgba(255,255,255,.85)}
.progress{height:3px;background:var(--red-tint);border-radius:2px;margin:8px 0 14px}
.progress i{display:block;height:3px;background:var(--red);border-radius:2px}
.section{margin:0 0 22px}
.section h3{font-family:var(--display);font-size:18px;margin-bottom:6px}
.section p{font-family:var(--reading);font-size:17px;line-height:1.7;white-space:pre-wrap}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:760px;margin:0 auto;background:var(--raised);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:22px;z-index:20;box-shadow:0 -8px 30px rgba(0,0,0,.12)}
.sheet.hidden{display:none}
.sheet .close{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);font:14px var(--ui);cursor:pointer}
.sheet .lemma{font-family:var(--reading);font-size:30px}
.sheet .gloss{font-family:var(--reading);font-size:18px;margin:6px 0 10px}
.sheet .meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.sheet .meta b{display:block;color:var(--ink);font-family:var(--reading);font-size:15px}
.about p{font-family:var(--reading);font-size:17px;line-height:1.7;margin-bottom:12px}
.note{background:var(--red-tint);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--ink);margin:12px 0}