:root{
  --bg:#f6f4ef; --surface:#fffdf9; --surface-2:#f1eee6;
  --ink:#211f1c; --muted:#726d64; --line:#e6e0d4;
  --accent:#274060; --accent-ink:#1c2d43; --accent-soft:#e7ecf2;
  --shadow:0 1px 2px rgba(33,31,28,.05), 0 6px 24px rgba(33,31,28,.06);
  --serif:ui-serif,Georgia,Cambria,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#161719; --surface:#1e1f22; --surface-2:#26282c;
    --ink:#ece9e2; --muted:#9a958b; --line:#2f3135;
    --accent:#9db7d6; --accent-ink:#c3d4e8; --accent-soft:#232a33;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.wrap{max-width:820px; margin:0 auto; padding:0 24px}

/* Header */
header{padding:52px 0 26px; border-bottom:1px solid var(--line)}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(27px,4vw,40px); line-height:1.08; margin:0; letter-spacing:-.01em}
.lede{margin:14px 0 0; max-width:62ch; color:var(--muted); font-size:16px}

/* Controls */
.controls{position:sticky; top:0; z-index:5; background:var(--bg);
  border-bottom:1px solid var(--line); padding:16px 0}
.controls .wrap{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:7px}
.field > label{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.range-inputs{display:flex; align-items:center; gap:8px}
.range-inputs input{width:64px; padding:8px 10px; font:inherit; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px}
.range-inputs input:focus{outline:none; border-color:var(--accent)}
.range-inputs span{color:var(--muted)}
.presets{display:flex; gap:6px; flex-wrap:wrap}
.pill{font:inherit; font-size:13px; padding:7px 13px; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:999px; transition:.15s}
.pill:hover{border-color:var(--accent)}
.pill[aria-pressed="true"]{background:var(--accent); color:var(--surface); border-color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill[aria-pressed="true"]{color:#15161a}}
.spacer{flex:1 1 auto}
.count{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.count b{color:var(--ink); font-weight:600}

main{padding:30px 0 80px}

/* HOME — list of sets */
.home.hidden{display:none}
.sets{display:flex; flex-direction:column; gap:10px}
.set{display:flex; align-items:center; gap:18px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; cursor:pointer; font:inherit; color:var(--ink); transition:.15s}
.set:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow)}
.set:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.set-index{font-family:var(--serif); font-size:13px; color:var(--muted);
  letter-spacing:.02em; width:52px; flex:none}
.set-main{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0}
.set-name{font-family:var(--serif); font-size:20px; line-height:1.2; letter-spacing:-.01em}
.set-tag{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:1px}
.set-meta{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:5px}
.set-go{font-size:13px; color:var(--accent-ink); flex:none; opacity:.7; transition:.15s}
.set:hover .set-go{opacity:1}
.set.disabled{opacity:.5; cursor:default}
.set.disabled:hover{border-color:var(--line); transform:none; box-shadow:none}
.probs-topic{color:var(--muted)}

/* STUDY */
.study{display:none; flex-direction:column; align-items:center; gap:20px}
.study.active{display:flex}
.studyhead{width:100%; max-width:620px; display:flex; align-items:center; gap:16px}
.back{font:inherit; font-size:13px; padding:8px 14px; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:9px; transition:.15s; flex:none}
.back:hover{border-color:var(--accent)}
.studytitle{font-family:var(--serif); font-size:19px; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:10px; min-width:0}
.st-set{font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); flex:none}

/* Card (flip) */
.card{width:100%; max-width:620px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; min-height:320px; cursor:pointer; perspective:1400px; box-shadow:var(--shadow)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.card .inner{position:relative; width:100%; min-height:320px;
  transition:transform .5s cubic-bezier(.4,.1,.2,1); transform-style:preserve-3d}
.card.flipped .inner{transform:rotateY(180deg)}
.face{position:absolute; inset:0; padding:34px 32px; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; display:flex; flex-direction:column}
.face.back{transform:rotateY(180deg)}
.topic-tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.term{font-family:var(--serif); font-size:30px; line-height:1.15; margin:auto 0; letter-spacing:-.01em}
.front .hint{font-size:12px; color:var(--muted); text-align:center}
.formula{margin:4px 0 16px; overflow-x:auto; overflow-y:hidden}
.formula .katex{font-size:1.5em}
.formula .katex-display{margin:.3em 0; text-align:left}
.meaning{font-size:16px; color:var(--ink); margin:0}
.probs{margin-top:auto; padding-top:14px; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; border-top:1px solid var(--line)}
.probs b{color:var(--accent-ink); font-weight:600}

.studynav{display:flex; align-items:center; gap:12px}
.studynav button{font:inherit; font-size:14px; padding:10px 18px; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:9px; transition:.15s}
.studynav button:hover{border-color:var(--accent)}
#next{background:var(--accent); color:var(--surface); border-color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #next{color:#15161a}}
.progress{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:70px; text-align:center}
.keyhint{font-size:12px; color:var(--muted)}
.keyhint kbd{font-family:var(--sans); background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; font-size:11px}

.empty{text-align:center; color:var(--muted); padding:60px 0; font-size:15px}

footer{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:13px}
footer a{color:var(--accent-ink)}

@media (max-width:640px){
  header{padding:38px 0 20px}
  .spacer{display:none}
  .count{order:5; width:100%}
  .face{padding:26px 22px}
  .term{font-size:25px}
  .studyhead{flex-wrap:wrap; gap:10px}
}