:root {
  --bg: #0d0f13; --bg2: #13161c; --bg3: #1a1e26; --line: #262b35; --line2: #323946;
  --fg: #d7dce4; --dim: #8a93a3; --faint: #5c6573;
  --acc: #7ee787; --acc2: #58a6ff; --warn: #e3b341; --bad: #f47067; --pur: #c297ff;
  --easy: #3fb950; --med: #d29922; --hard: #f85149;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 13.5px/1.5 var(--sans); }
a { color: var(--acc2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd, .mono { font-family: var(--mono); font-size: 12.5px; }
kbd { border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--dim); font-size: 11px; }
h1 { font-size: 20px; margin: 0 0 4px; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 14px; margin: 22px 0 8px; font-weight: 650; color: var(--fg); text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: 13.5px; margin: 14px 0 6px; font-weight: 650; }
p { margin: 6px 0; }
.boot { padding: 40px; color: var(--dim); font-family: var(--mono); }
.dim { color: var(--dim); } .faint { color: var(--faint); } .ok { color: var(--acc); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.E { color: var(--easy); } .M { color: var(--med); } .H { color: var(--hard); }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 44px;
  background: rgba(13,15,19,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--mono); font-weight: 700; color: var(--acc); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.brand img { width: 20px; height: 20px; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav a { color: var(--dim); padding: 5px 9px; border-radius: 6px; white-space: nowrap; }
.nav a:hover { color: var(--fg); background: var(--bg3); text-decoration: none; }
.nav a.on { color: var(--fg); background: var(--bg3); }
.nav .count { background: var(--warn); color: #000; border-radius: 8px; font-size: 10.5px; padding: 0 5px; margin-left: 4px; font-weight: 700; }
.search { margin-left: auto; position: relative; }
.search input { width: 260px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; outline: none; }
.search input:focus { border-color: var(--acc2); }
.sresults { position: absolute; right: 0; top: 34px; width: 440px; max-height: 70vh; overflow: auto; background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5); display: none; }
.sresults.open { display: block; }
.sresults a { display: flex; gap: 8px; padding: 6px 10px; color: var(--fg); border-bottom: 1px solid var(--line); }
.sresults a.sel, .sresults a:hover { background: var(--bg3); text-decoration: none; }
.sresults .k { color: var(--faint); font-family: var(--mono); font-size: 11px; min-width: 52px; }
.syncdot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.syncdot.on { background: var(--acc2); animation: pulse 1s infinite; } .syncdot.err { background: var(--bad); } .syncdot.ok { background: var(--acc); }
@keyframes pulse { 50% { opacity: .3; } }

main { max-width: 1320px; margin: 0 auto; padding: 18px 20px 80px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .grid2, .grid3 { grid-template-columns: 1fr; } .search input { width: 150px; } .sresults { width: 92vw; } }
.grid2 > *, .grid3 > * { min-width: 0; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tile b { display: block; font-size: 22px; font-family: var(--mono); font-weight: 600; line-height: 1.2; }
.tile small { color: var(--dim); }
.btn { background: var(--bg3); border: 1px solid var(--line2); border-radius: 6px; padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--dim); }
.btn.pri { background: #1f6f3a; border-color: #2ea043; color: #fff; }
.btn.blue { background: #1c4f8f; border-color: #388bfd; color: #fff; }
.btn.small { padding: 1px 7px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.on { border-color: var(--acc); color: var(--acc); }
input.in, select.in, textarea.in { background: var(--bg); border: 1px solid var(--line2); border-radius: 6px; padding: 5px 8px; outline: none; }
input.in:focus, textarea.in:focus, select.in:focus { border-color: var(--acc2); }
textarea.in { width: 100%; min-height: 110px; resize: vertical; font-family: var(--mono); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; background: var(--bg3);
  border: 1px solid var(--line2); color: var(--fg); white-space: nowrap; line-height: 19px; }
a.chip:hover { border-color: var(--acc2); text-decoration: none; }
.chip.p { border-color: #2d4a6b; color: #9ecbff; } .chip.c { border-color: #4b3a6b; color: var(--pur); }
.chip.g { border-style: dashed; color: var(--dim); }
.chip.x { cursor: pointer; } .chip.x:hover { border-color: var(--bad); }
.lvl { font-family: var(--mono); font-size: 10.5px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line2); color: var(--dim); }
.lvl.l1 { color: var(--acc); border-color: #2a4a33; } .lvl.l2 { color: var(--warn); border-color: #4d3d17; } .lvl.l3 { color: var(--bad); border-color: #5a2724; }
.bar { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; min-width: 60px; }
.bar i { display: block; height: 100%; background: var(--acc); border-radius: 3px; }
.bar.blue i { background: var(--acc2); }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-weight: 600; color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 8px; border-bottom: 1px solid var(--line2); position: sticky; top: 44px; background: var(--bg); }
table.t td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:hover td { background: var(--bg2); }
table.t td.num, table.t th.num { text-align: right; font-family: var(--mono); }
.st { font-family: var(--mono); width: 18px; display: inline-block; text-align: center; }
.st.done { color: var(--acc); } .st.tried { color: var(--warn); } .st.none { color: var(--faint); }
.tabs { display: flex; gap: 4px; margin: 10px 0; flex-wrap: wrap; }
.tabs a, .tabs button { padding: 3px 10px; border-radius: 6px; color: var(--dim); background: none; border: 1px solid transparent; cursor: pointer; }
.tabs a.on, .tabs button.on { color: var(--fg); border-color: var(--line2); background: var(--bg3); }
.tabs a:hover { text-decoration: none; color: var(--fg); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.spacer { flex: 1; }
.muted-box { color: var(--dim); background: var(--bg2); border: 1px dashed var(--line2); border-radius: 8px; padding: 12px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--bg3); border: 1px solid var(--line2);
  padding: 8px 14px; border-radius: 8px; z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.toast.err { border-color: var(--bad); }

/* heatmap */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 2px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.heat::-webkit-scrollbar { display: none; }
.heat i { width: 11px; height: 11px; border-radius: 2px; background: #161b22; }
.heat i.l1 { background: #0e4429; } .heat i.l2 { background: #006d32; } .heat i.l3 { background: #26a641; } .heat i.l4 { background: #39d353; }

/* mastery map */
.mmap { display: grid; grid-template-columns: 170px 1fr; gap: 4px 10px; align-items: center; }
.mmap .cat { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmap .cells { display: flex; flex-wrap: wrap; gap: 3px; }
.mmap .cells a { width: 15px; height: 15px; border-radius: 3px; background: #1b2029; border: 1px solid #232934; display: block; }
.mmap .cells a.m1 { background: #1d3a5c; } .mmap .cells a.m2 { background: #2a5d94; } .mmap .cells a.m3 { background: #3b82d0; } .mmap .cells a.m4 { background: #79c0ff; }
.mmap .cells a.st { outline: 1px solid var(--acc); outline-offset: 1px; }

/* pattern page */
.ptitle { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumb { color: var(--dim); font-size: 12px; margin-bottom: 4px; }
.signals li { margin: 3px 0; } .signals li::marker { color: var(--acc); }
.notwhen li::marker { color: var(--bad); }
ul.tight { margin: 4px 0; padding-left: 20px; }
pre.code { background: #0a0c10; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow: auto; margin: 6px 0; position: relative;
  line-height: 1.45; tab-size: 4; max-height: 640px; }
pre.code .copy { position: absolute; right: 6px; top: 6px; }
.kw { color: #ff7b72; } .ty { color: #79c0ff; } .cm { color: #6e7781; font-style: italic; } .sg { color: #a5d6ff; } .nu { color: #79c0ff; } .pp { color: #d2a8ff; }
.variants td:first-child { white-space: nowrap; color: var(--acc2); }
.sec { margin-top: 16px; }
.sec > .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 4px; font-weight: 600; }

/* statement */
.stmt { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #0a0c10; min-height: 200px; }

/* drill */
.drill { max-width: 980px; margin: 0 auto; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.choice { text-align: left; background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.choice:hover { border-color: var(--acc2); }
.choice .n { font-family: var(--mono); color: var(--faint); margin-right: 8px; }
.choice.right { border-color: var(--acc); background: #12261a; } .choice.wrong { border-color: var(--bad); background: #2a1414; }
.choice small { display: block; color: var(--dim); }
.signalq { font-size: 17px; padding: 18px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }

/* markdown */
.md { line-height: 1.6; } .md h1, .md h2, .md h3 { text-transform: none; letter-spacing: 0; font-size: 14.5px; margin: 14px 0 6px; }
.md ul, .md ol { padding-left: 22px; margin: 4px 0; } .md p { margin: 6px 0; }
.md code { background: var(--bg3); padding: 0 4px; border-radius: 4px; }
.md pre code { background: none; padding: 0; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); }
.msg.user { background: #14233a; border-color: #1f3b63; align-self: flex-end; max-width: 80%; white-space: pre-wrap; }
.login { max-width: 340px; margin: 14vh auto; }
.login input { width: 100%; margin: 10px 0; }
.svgchart { width: 100%; height: 220px; display: block; }
.svgchart text { fill: var(--dim); font-size: 10px; font-family: var(--mono); }
.help { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; display: flex; align-items: center; justify-content: center; }
.help .card { width: 440px; }
.help td { padding: 3px 8px; }
details > summary { cursor: pointer; color: var(--dim); }
.reveal { filter: blur(6px); cursor: pointer; transition: filter .15s; } .reveal.shown { filter: none; cursor: auto; }
.picker { position: relative; display: inline-block; }
.picker .pop { position: absolute; z-index: 30; top: 26px; left: 0; width: 340px; max-height: 320px; overflow: auto; background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 8px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.picker .pop a { display: block; padding: 3px 6px; border-radius: 4px; color: var(--fg); }
.picker .pop a:hover, .picker .pop a.sel { background: var(--bg3); text-decoration: none; }
.conf button { width: 24px; padding: 1px 0; }
td.chips { display: table-cell; }
td.chips .chip { margin: 1px 3px 1px 0; max-width: 210px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
td.pt { white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.card > .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; margin: 12px 0 4px; font-weight: 600; }
.btn.peek { color: var(--dim); border-style: dashed; }
table.lt { table-layout: fixed; }

/* drill constraints, shown before the statement */
.cons { background: #10161f; border: 1px solid #1f3b63; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.cons .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--acc2); font-weight: 600; }
.consbody { font-family: var(--mono); font-size: 12.5px; white-space: pre-line; }

/* phones */
@media (max-width: 640px) {
  main { padding: 12px 10px 70px; }
  .top { gap: 8px; padding: 0 8px; }
  .search input { width: 110px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mmap { grid-template-columns: 1fr; gap: 2px; }
  .mmap .cat { margin-top: 6px; }
  table.lt { table-layout: auto; }
  table.lt col { width: auto !important; }
  table.t td { padding: 4px 5px; }
  td.pt { white-space: normal; max-width: none; }
  td.chips .chip { max-width: 150px; }
  table.lt .rv, table.lt td:last-child { display: none; }
  .ptitle h1 { font-size: 18px; }
  .signals, .notwhen { padding-left: 16px; }
  .chips { min-width: 0; }
  .chip { white-space: normal; max-width: 100%; }
  .choices { grid-template-columns: 1fr; }
  .drill .stmt { min-height: 160px; }
  table.t th { position: static; }
  .toolbar .tabs { margin: 4px 0; }
  .card { padding: 10px; overflow-x: auto; }
  pre.code { font-size: 11.5px; }
  .variants td:first-child { white-space: normal; }
}