
:root{
  --bg:#faf9f7; --panel:#ffffff; --ink:#1e1c1a; --muted:#6c6660;
  --line:#e6e2dc; --accent:#0f6d6b; --accent-soft:#e6f1f0;
  --red:#b2402f; --red-soft:#fbecea; --amber:#8a6512; --amber-soft:#faf1dd;
  --green:#3a7d3f; --green-soft:#e9f5ea;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16181a; --panel:#1e2124; --ink:#eceae7; --muted:#9d9891;
    --line:#2e3236; --accent:#6fd3cd; --accent-soft:#1d2f30;
    --red:#f0937f; --red-soft:#31211e; --amber:#e3bd6f; --amber-soft:#2c2519;
    --green:#8fd19a; --green-soft:#1c2b1e;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--accent)}
.wrap{max-width:900px; margin:0 auto; padding:24px 20px 80px}
.kicker{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
h1{font-size:26px; line-height:1.2; margin:8px 0 6px; font-weight:650; letter-spacing:-.01em}
h2{font-size:19px; margin:0 0 4px; font-weight:640; letter-spacing:-.01em}
h3{font-size:14px; margin:0 0 8px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); font-weight:640}
.sub{color:var(--muted); font-size:14.5px; margin:0}
.hint{color:var(--muted); font-size:13.5px; margin:0 0 14px}
section{margin:34px 0 0}
nav.topnav{position:sticky; top:0; z-index:5; background:var(--bg); padding:14px 0;
  margin-bottom:10px; border-bottom:1px solid var(--line); display:flex; gap:6px; flex-wrap:wrap; align-items:center}
nav.topnav a{font-size:13.5px; text-decoration:none; color:var(--muted); padding:6px 12px;
  border-radius:999px; border:1px solid var(--line);}
nav.topnav a.active{color:var(--accent); border-color:var(--accent); font-weight:600}
nav.topnav a:hover{color:var(--accent); border-color:var(--accent)}
nav.jump{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 6px}
nav.jump a{font-size:13px; text-decoration:none; color:var(--muted); padding:5px 10px;
  border-radius:999px; border:1px solid var(--line);}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:12px 0}
ul.tasks{list-style:none; padding:0; margin:0}
ul.tasks li{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line)}
ul.tasks li:last-child{border-bottom:0}
.pill{flex:0 0 auto; font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent); margin-top:2px}
.pill.due{background:var(--red-soft); color:var(--red)}
.pill.later{background:var(--amber-soft); color:var(--amber)}
.t-main{font-weight:560}
.t-note{display:block; color:var(--muted); font-size:13.5px; font-weight:400; margin-top:2px}
.controls{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; align-items:center}
button, input[type=text]{font:inherit; font-size:13.5px; padding:7px 13px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink)}
button{cursor:pointer}
button:hover{border-color:var(--accent); color:var(--accent)}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
button.primary:hover{opacity:.9; color:#fff}
input[type=text]{min-width:220px}
.deck{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:10px; align-items:start}
.fc{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px;
  cursor:pointer; user-select:none; transition:border-color .15s}
.fc:hover{border-color:var(--accent)}
.fc .term{font-weight:620; font-size:15.5px}
.fc .back{display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:14px; color:var(--muted)}
.fc.open .back{display:block}
.fc .ex{display:block; margin-top:5px; font-style:italic; color:var(--muted)}
.fc .tap{font-size:11.5px; color:var(--muted); float:right; font-weight:400}
.fc.open .tap{visibility:hidden}
.fc[data-status=red]{border-left:3px solid var(--red)}
.fc[data-status=amber]{border-left:3px solid var(--amber)}
.fc[data-status=new]{border-left:3px solid var(--muted)}
.person-tabs{display:flex; gap:8px; margin:14px 0}
.person-tabs a{flex:1; text-align:center; padding:14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); text-decoration:none; color:var(--ink); font-weight:620; font-size:16px}
.person-tabs a:hover{border-color:var(--accent); color:var(--accent)}
.strength{border-left:3px solid var(--green); padding-left:13px; margin:10px 0; font-size:14.5px}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
tr:last-child td{border-bottom:0}
td.x{color:var(--red)}
td.v{color:var(--accent); font-weight:560}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 0}
.chip{font-size:13.5px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--panel)}
.chip b{font-weight:620}
.status-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px}
.status-dot.red{background:var(--red)} .status-dot.amber{background:var(--amber)}
.status-dot.green{background:var(--green)} .status-dot.new{background:var(--muted)}
.lead{border-left:3px solid var(--accent); padding-left:13px; margin:14px 0; color:var(--muted); font-size:14.5px}
ol.rules{margin:0; padding-left:20px}
ol.rules li{margin:0 0 9px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
details{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; margin:10px 0}
details summary{cursor:pointer; font-weight:600}
details[open] summary{margin-bottom:10px}
footer{margin-top:46px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
.count{font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; margin-left:auto}
.lesson-nav{display:flex; justify-content:space-between; margin-top:30px; font-size:14px}
.searchable.hide{display:none}
