/* Tokens. Names --pen, --ink, --muted, --line, --card, --paper, --flag are also
   used inside the question SVG diagrams, so keep them. */
:root {
  --paper: #f6f2ea;
  --paper-2: #efe9dd;
  --card: #fffdf8;
  --ink: #1d2421;
  --ink-2: #3a4541;
  --muted: #74807b;
  --line: #e4ddcf;
  --pen: #0f6b55;
  --pen-soft: #e1f0e8;
  --pen-ink: #0b4f3f;
  --flag: #a8660c;
  --flag-soft: #fbefd9;
  --good: #1f7a4d;
  --good-soft: #def3e6;
  --bad: #b33a3a;
  --bad-soft: #fbe3e1;
  --note: #2f5d9e;
  --note-soft: #e4edfa;
  --sir: #7a3fb0;
  --sir-soft: #f1e7fb;
  --shadow: 0 1px 2px rgba(29, 36, 33, .05), 0 10px 28px -18px rgba(29, 36, 33, .35);
  --radius: 16px;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121614; --paper-2: #181d1b; --card: #1b2120; --ink: #e9ece8; --ink-2: #c3cbc6;
    --muted: #8d9993; --line: #2b3431; --pen: #5fd0ae; --pen-soft: #183229; --pen-ink: #8fe3c8;
    --flag: #f0b456; --flag-soft: #33291a; --good: #62d197; --good-soft: #163123; --bad: #f08a86;
    --bad-soft: #3a1f1e; --note: #8db5f2; --note-soft: #1b2638; --sir: #c79af2; --sir-soft: #2a1f36;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121614; --paper-2: #181d1b; --card: #1b2120; --ink: #e9ece8; --ink-2: #c3cbc6;
  --muted: #8d9993; --line: #2b3431; --pen: #5fd0ae; --pen-soft: #183229; --pen-ink: #8fe3c8;
  --flag: #f0b456; --flag-soft: #33291a; --good: #62d197; --good-soft: #163123; --bad: #f08a86;
  --bad-soft: #3a1f1e; --note: #8db5f2; --note-soft: #1b2638; --sir: #c79af2; --sir-soft: #2a1f36;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16.5px/1.6 var(--sans); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(900px 500px at 110% -10%, color-mix(in oklab, var(--pen) 12%, transparent), transparent 60%),
    radial-gradient(700px 420px at -10% 10%, color-mix(in oklab, var(--sir) 9%, transparent), transparent 60%);
}
a { color: var(--pen) }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 6px }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap { display: flex; align-items: center; gap: 10px; height: 60px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 17px/1 var(--serif); white-space: nowrap }
.brand .dot { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--pen), var(--sir)); display: grid; place-items: center; color: #fff; font: 700 14px/1 var(--sans) }
.search { flex: 1; min-width: 0; position: relative }
.search input {
  width: 100%; font: 15px var(--sans); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 36px;
}
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted) }
.iconbtn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
}
.iconbtn:hover { border-color: var(--pen); color: var(--pen) }
.progress-line { height: 3px; background: transparent }
.progress-line i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pen), var(--sir)); transition: width .5s ease }

/* ---------- home ---------- */
.hero { display: flex; align-items: center; gap: 28px; padding: 40px 0 8px }
.hero-text { flex: 1; min-width: 0 }
.eyebrow { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pen); margin: 0 0 14px }
.hero h1 { font: 600 clamp(30px, 6.4vw, 46px)/1.08 var(--serif); letter-spacing: -.02em; margin: 0 0 14px }
.hero h1 em { font-style: italic; color: var(--pen) }
.hero-meta { color: var(--muted); font-size: 14.5px; margin: 0 }
.hero-ring { flex: none; text-align: center }
.hero-ring p { margin: 6px 0 0; font-size: 13px; color: var(--muted) }
.hero-ring p b { color: var(--ink) }
.ring.big { width: 128px; height: 128px }
.ring.big circle { stroke-width: 9 }
.ring.big text { font: 600 26px var(--serif); fill: var(--ink) }

.actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin: 26px 0 6px }
.act {
  display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); font-weight: 600; font-size: 15.5px; line-height: 1.3;
  transition: transform .15s ease, border-color .15s ease;
}
.act small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-bottom: 3px }
.act:hover { transform: translateY(-2px); border-color: var(--pen) }
.act.primary { background: linear-gradient(135deg, var(--pen), color-mix(in oklab, var(--pen) 70%, var(--sir))); border-color: transparent; color: #fff }
.act.primary small { color: rgba(255, 255, 255, .78) }
.act.off { opacity: .55; pointer-events: none }
@media (max-width: 640px) {
  .hero { flex-direction: column-reverse; align-items: flex-start; gap: 18px; padding-top: 26px }
  .hero-ring { display: flex; align-items: center; gap: 12px }
  .ring.big { width: 72px; height: 72px }
  .ring.big text { font-size: 22px }
  .actions { grid-template-columns: 1fr 1fr }
  .act.primary { grid-column: 1 / -1 }
}

.grid.papers { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.topic.paper { padding: 12px 14px }
.topic p .bad { color: var(--bad) }
.group-h span { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; opacity: .8 }
.grid.playbooks { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }
.pbk {
  display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); border-radius: var(--radius); padding: 16px;
  background: linear-gradient(135deg, var(--sir-soft), color-mix(in oklab, var(--sir-soft) 55%, var(--card)));
  border: 1px solid color-mix(in oklab, var(--sir) 25%, var(--line)); transition: transform .15s ease;
}
.pbk:hover { transform: translateY(-2px) }
.pbk h3 { margin: 0 0 2px; font: 600 16px/1.3 var(--serif); color: var(--sir) }
.pbk p { margin: 0; font-size: 13.5px; color: var(--ink-2) }
.pbk-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--sir); font-size: 20px; box-shadow: var(--shadow) }

.group-h { font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 34px 0 12px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px }
.topic {
  position: relative; display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease;
}
.topic:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--pen) 50%, var(--line)) }
.topic h3 { margin: 0 0 2px; font: 600 15.5px/1.3 var(--sans) }
.topic p { margin: 0; color: var(--muted); font-size: 13px }
.topic .sirmark { display: inline-block; margin-top: 6px }
.ring { flex: none; width: 46px; height: 46px }
.ring circle { fill: none; stroke-width: 5 }
.ring .bg { stroke: var(--line) }
.ring .fg { stroke: var(--pen); stroke-linecap: round; transition: stroke-dashoffset .6s ease }
.ring text { font: 700 12px var(--sans); fill: var(--ink) }

/* ---------- topic page ---------- */
.crumbs { padding: 26px 0 0; font-size: 14px }
.crumbs a { text-decoration: none; color: var(--muted) }
.crumbs a:hover { color: var(--pen) }
.thead { padding: 10px 0 8px }
.thead h1 { font: 600 clamp(26px, 6vw, 38px)/1.12 var(--serif); letter-spacing: -.015em; margin: 0 0 8px }
.thead .tag { color: var(--pen); font-weight: 500; margin: 0 }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px }
.chip {
  cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 500;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.chip .n { opacity: .6; margin-left: 4px }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 16px 0; overflow: hidden }
.panel > summary {
  cursor: pointer; list-style: none; padding: 15px 18px; display: flex; align-items: center; gap: 10px;
  font: 600 16px/1.3 var(--serif);
}
.panel > summary::-webkit-details-marker { display: none }
.panel > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s }
.panel[open] > summary::after { transform: rotate(-135deg) }
.panel[open] > summary { border-bottom: 1px solid var(--line) }
.panel .body { padding: 6px 18px 18px }
.panel .body > p { margin: 12px 0 0; color: var(--ink-2) }
.panel.sir > summary { color: var(--sir) }
.panel.sir { border-color: color-mix(in oklab, var(--sir) 30%, var(--line)) }
.emoji-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--pen-soft); color: var(--pen); flex: none; font: 700 13px var(--sans) }
.panel.sir .emoji-ico { background: var(--sir-soft); color: var(--sir) }

.rules { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.rules li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px }
.rules li:last-child { border-bottom: 0 }
.rules li i { font-style: normal; color: var(--muted); flex: 0 0 140px; font-size: 13px; padding-top: 1px }
.rules li b { font-weight: 500; color: var(--ink) }
figure { margin: 14px 0 4px; padding: 0 }
figure svg { width: 100%; height: auto; display: block }
.sol figure { background: var(--paper-2); border-radius: 12px; padding: 12px 14px; margin: 12px 0 }
figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.55 }
.svgtxt { font: 500 12.5px/1 var(--sans) }
.svgsm { font: 500 11px/1 var(--sans) }

.pb-h { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.pb-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--paper-2) }
.pb-card h4 { margin: 0 0 6px; font: 600 15px/1.3 var(--sans); color: var(--ink) }
.pb-card p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2) }
.pb-card p b { color: var(--ink) }
.pb-card .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sir); margin-right: 6px }
.pb-card .ex { font-size: 13.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 8px }
.triage { counter-reset: t; list-style: none; padding: 0; margin: 0 }
.triage li { counter-increment: t; position: relative; padding: 8px 0 8px 38px; border-bottom: 1px solid var(--line); font-size: 14.5px }
.triage li:last-child { border-bottom: 0 }
.triage li::before { content: counter(t); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--sir-soft); color: var(--sir); font: 700 12px/24px var(--sans); text-align: center }

/* ---------- question card ---------- */
.qlist { margin-top: 10px }
.q {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 18px 14px; margin: 14px 0; scroll-margin-top: 80px;
  transition: border-color .2s;
  /* topic pages hold up to ~110 cards; skip layout and paint for the ones off screen */
  content-visibility: auto; contain-intrinsic-size: auto 320px;
}
.q.st-solved { box-shadow: inset 4px 0 0 var(--good), var(--shadow) }
.q.st-missed { box-shadow: inset 4px 0 0 var(--bad), var(--shadow) }
.plines { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 0; font-size: 14px; color: var(--muted) }
.plines b { font-weight: 700; color: var(--ink) }
.plines b.ok { color: var(--good) }
.plines b.bad { color: var(--bad) }
.q.is-focus { border-color: color-mix(in oklab, var(--pen) 55%, var(--line)) }
.qtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px }
.qnum { font: 700 12.5px/1 var(--sans); color: var(--muted); letter-spacing: .03em }
.badge { font: 600 11.5px/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2) }
.badge.sir { background: var(--sir-soft); color: var(--sir) }
.badge.paper { background: var(--note-soft); color: var(--note) }
.badge.flag { background: var(--flag-soft); color: var(--flag) }
.badge.ok { background: var(--good-soft); color: var(--good) }
.badge.miss { background: var(--bad-soft); color: var(--bad) }

.qtext { font-size: 17px; line-height: 1.55; margin: 0 0 14px; color: var(--ink) }
/* paper figures are scanned on white, so keep them on a white card in both themes */
.qimg { margin: 0 0 14px; display: grid; gap: 8px }
.qimg img { display: block; max-width: 100%; height: auto; background: #fff; border-radius: 10px; border: 1px solid var(--line); padding: 6px }
.also { font-size: 13.5px; color: var(--muted); margin: 10px 0 0 }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none }
.opts.long { grid-template-columns: 1fr }
@media (max-width: 560px) { .opts { grid-template-columns: 1fr } .opts.short { grid-template-columns: 1fr 1fr } }
.opt {
  width: 100%; text-align: left; cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font-size: 15.5px; transition: border-color .15s, background .15s, transform .08s;
}
.opt:hover:not([disabled]) { border-color: var(--pen); background: var(--pen-soft) }
.opt:active:not([disabled]) { transform: scale(.99) }
.opt .k { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); display: grid; place-items: center; font: 700 11.5px var(--sans); color: var(--muted); background: var(--card); margin-top: 1px }
.opt[disabled] { cursor: default }
.opt.right { border-color: var(--good); background: var(--good-soft) }
.opt.right .k { background: var(--good); border-color: var(--good); color: #fff }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft) }
.opt.wrong .k { background: var(--bad); border-color: var(--bad); color: #fff }
.opt.dim { opacity: .55 }
.q.shake .opt.wrong { animation: shake .35s ease }
@keyframes shake { 20%, 60% { transform: translateX(-4px) } 40%, 80% { transform: translateX(4px) } }

.qact { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap }
.btn {
  cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 500;
}
.btn:hover { border-color: var(--pen); color: var(--pen) }
.btn.primary { background: var(--pen); border-color: var(--pen); color: #fff }
:root[data-theme="dark"] .btn.primary { color: #06231b }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #06231b } }
.qact .hint { margin-left: auto; color: var(--muted); font-size: 12.5px }
.qact .hint kbd, .kbd { font: 600 11px var(--sans); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: var(--card); color: var(--ink-2) }

.sol { display: none; margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px; animation: rise .3s ease }
.q.open .sol { display: block }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.ans { font: 600 16px/1.4 var(--sans); color: var(--good); margin: 0 0 12px }
.glance {
  position: relative; background: linear-gradient(135deg, var(--pen-soft), color-mix(in oklab, var(--pen-soft) 60%, var(--card)));
  border-radius: 12px; padding: 12px 14px 12px 16px; margin-bottom: 12px; border-left: 3px solid var(--pen);
}
.glance .lbl, .why .lbl, .trap .lbl, .note .lbl {
  display: block; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px;
}
.glance .lbl { color: var(--pen) }
.glance p { margin: 0; font-size: 15.5px; color: var(--ink) }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 12px }
.steps li { counter-increment: s; position: relative; padding: 5px 0 5px 34px; font-size: 15.5px }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--pen); color: var(--pen); font: 700 11.5px/19px var(--sans); text-align: center;
}
.steps li + li::after { content: ""; position: absolute; left: 10.5px; top: -8px; height: 12px; border-left: 1.5px dotted var(--line) }
.sirway { background: var(--sir-soft); border-left: 3px solid var(--sir); border-radius: 12px; padding: 12px 14px 4px 16px; margin-bottom: 12px }
.sirway .lbl { display: block; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sir); margin-bottom: 4px }
.sirway .steps { margin: 0 0 6px }
.sirway .steps li::before { border-color: var(--sir); color: var(--sir) }
.sure { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px }
.why, .trap, .note { border-radius: 12px; padding: 10px 14px; margin: 10px 0 0; font-size: 15px }
.why { background: var(--paper-2) }
.why .lbl { color: var(--muted) }
.trap { background: var(--flag-soft) }
.trap .lbl { color: var(--flag) }
.note { background: var(--note-soft) }
.note .lbl { color: var(--note) }
.why p, .trap p, .note p { margin: 0 }
.rule {
  margin-top: 12px; display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 500;
  padding: 10px 14px; border-radius: 12px; border: 1.5px dashed color-mix(in oklab, var(--pen) 45%, var(--line)); color: var(--pen-ink);
}
.rule span { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pen); flex: none }
.sol figure { overflow-x: auto }
.katex { font-size: 1.12em }
.katex .mfrac { padding: 0 .08em }
.steps li, .glance p, .why p, .trap p, .note p { line-height: 1.75 }

.empty { text-align: center; color: var(--muted); padding: 50px 0 }
.pager { display: flex; justify-content: space-between; gap: 10px; margin: 30px 0 60px }
.pager a { flex: 1; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink); box-shadow: var(--shadow) }
.pager a small { display: block; color: var(--muted); font-size: 12px }
.pager a.next { text-align: right }
.pager a:hover { border-color: var(--pen) }

footer { color: var(--muted); font-size: 13px; padding: 30px 0 50px; border-top: 1px solid var(--line); margin-top: 30px }

.totop { position: fixed; right: 16px; bottom: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20 }
.totop.show { opacity: 1; pointer-events: auto }

.toast {
  position: fixed; left: 50%; top: 72px; transform: translate(-50%, -12px); opacity: 0; transition: all .25s;
  background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; z-index: 40; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) }

@media (max-width: 560px) {
  body { font-size: 16px }
  .brand .txt { display: none }
  .q { padding: 15px 14px 12px }
  .rules li { flex-direction: column; gap: 2px }
  .rules li i { flex: none }
  .qact .hint { display: none }
  figure { overflow-x: auto }
  /* diagrams are drawn at 640px; keep their labels readable and let them scroll */
  figure svg { min-width: 600px }
  figcaption { position: sticky; left: 0; max-width: calc(100vw - 72px) }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}
:root[data-theme="dark"] .act.primary, :root[data-theme="dark"] .act.primary small { color: #06231b }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .act.primary, :root:not([data-theme="light"]) .act.primary small { color: #06231b } }

/* ---------- card extras: sub-topic, star, note, link ---------- */
.qtop-end { margin-left: auto; display: flex; gap: 6px; align-items: center }
.badge.sub { background: transparent; border: 1px solid var(--line); color: var(--muted) }
.star { cursor: pointer; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); padding: 2px 4px; border-radius: 8px }
.star:hover { color: var(--flag) }
.star.on { color: var(--flag) }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); padding-left: 8px; padding-right: 8px }
.btn.ghost:hover { color: var(--pen); border-color: var(--line) }
.mynote { margin-top: 12px; background: var(--flag-soft); border-radius: 12px; padding: 10px 14px; font-size: 15px }
.mynote .lbl { display: block; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--flag); margin-bottom: 6px }
.mynote p { margin: 0 }
.note-edit { margin-top: 10px }
.note-edit textarea { width: 100%; font: 15px/1.5 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical }
.note-btns { display: flex; gap: 8px; margin-top: 8px }
.filters.subs { margin-top: 14px }
.chip.sub { font-size: 13px; padding: 5px 11px }
.search-head { padding-top: 26px }

/* ---------- review list ---------- */
.later { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden }
.later li + li { border-top: 1px solid var(--line) }
.later a { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; padding: 11px 16px; text-decoration: none; color: var(--ink); font-size: 14.5px }
.later a:hover { background: var(--paper-2) }
.later .when { color: var(--pen); font-weight: 600 }
.later .box { color: var(--muted); font-size: 13px }
@media (max-width: 560px) { .later a { grid-template-columns: 1fr; gap: 2px } }

/* ---------- stats ---------- */
.stable { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden }
.srow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) 52px minmax(0, 1.2fr); gap: 14px; align-items: center; padding: 12px 16px; text-decoration: none; color: var(--ink); font-size: 14.5px }
.srow + .srow { border-top: 1px solid var(--line) }
.srow:hover { background: var(--paper-2) }
.sname small { display: block; color: var(--muted); font-size: 12.5px }
.snum { font-weight: 700; text-align: right }
.sfine { color: var(--muted); font-size: 13px }
.sbar { display: block; height: 8px; border-radius: 99px; background: var(--bad-soft); overflow: hidden }
.sbar .r { display: block; height: 100%; background: var(--good); border-radius: 99px }
@media (max-width: 560px) { .srow { grid-template-columns: 1fr 52px; gap: 6px 12px } .srow .sbar { grid-column: 1 / -1; order: 3 } .srow .sfine { grid-column: 1 / -1; order: 4 } }

/* ---------- figure zoom ---------- */
[data-zoom] { cursor: zoom-in }
#zoom { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(10, 14, 12, .92) }
#zoom::backdrop { background: rgba(10, 14, 12, .92) }
#zoom .zoom-body { width: 100%; height: calc(100% - 40px); display: grid; place-items: center; overflow: auto; padding: 16px; cursor: zoom-out }
#zoom img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 8px; padding: 8px }
#zoom svg { width: min(100%, 1100px); height: auto; background: var(--card); border-radius: 12px; padding: 12px }
.zoom-hint { margin: 0; text-align: center; color: #cfd6d2; font-size: 13px }

/* ---------- text size ---------- */
.iconbtn .aa { font: 700 14px/1 var(--serif) }
:root[data-fs="l"] #app { zoom: 1.12 }
:root[data-fs="s"] #app { zoom: .92 }

/* ---------- phone bottom bar ---------- */
.bnav { display: none }
@media (max-width: 640px) {
  .deskonly { display: none }
  body { padding-bottom: 76px }
  .totop { bottom: 86px }
  .bnav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: color-mix(in oklab, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 4px 0 }
  .bnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
  .bnav a.on { color: var(--pen) }
  .bnav .dot { position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 99px; background: var(--bad); color: #fff; font: 700 10.5px/17px var(--sans); text-align: center; padding: 0 4px }
  .toast { top: auto; bottom: 90px }
}
@media (max-width: 640px) {
  /* one swipeable row of chips instead of several wrapped rows */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px }
  .filters::-webkit-scrollbar { display: none }
  .chip { flex: none }
}
.note.flawed { background: var(--flag-soft) }
.note.flawed .lbl { color: var(--flag) }
.note.picture, .note.other { background: var(--paper-2) }
.note.picture .lbl, .note.other .lbl { color: var(--muted) }
.note .verdict { font-weight: 700; color: var(--ink); margin-bottom: 6px }

/* ---------- tricks page ---------- */
.trick { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 12px 0; scroll-margin-top: 80px }
.trick.is-focus { border-color: var(--sir) }
.trick h3 { margin: 0 0 6px; font: 600 19px/1.3 var(--serif); color: var(--sir) }
.trule { font-size: 16px; font-weight: 500; margin: 0 0 10px }
.twhen, .tex { font-size: 14.5px; color: var(--ink-2); margin: 10px 0 0 }
.tused { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px }
.tused a { text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 4px 9px; color: var(--ink); font-weight: 600; font-size: 13.5px }
.tused a small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px }
.tused a:hover { border-color: var(--sir) }
.trick-link { color: var(--sir); text-decoration: none; text-transform: none; letter-spacing: 0; font-weight: 600 }
.trick-link:hover { text-decoration: underline }

/* ---------- quick-reference tables ---------- */
.ref { margin: 14px 0 6px }
.ref h4 { margin: 0 0 8px; font: 600 14.5px/1.3 var(--sans); color: var(--ink) }
.refnote { margin: 6px 0 0; font-size: 13.5px; color: var(--muted) }
.rscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
.rtable { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums }
.rtable th, .rtable td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap }
.rtable thead th { background: var(--paper-2); font-weight: 600; color: var(--ink-2); font-size: 13px }
.rtable tbody th { text-align: left; font-weight: 600; color: var(--ink-2); background: var(--paper-2); white-space: normal }
.rtable tr:last-child td, .rtable tr:last-child th { border-bottom: 0 }
.rtable td b { color: var(--pen) }
.strip { display: flex; flex-wrap: wrap; gap: 10px }
.sgroup { display: flex; border: 1.5px solid var(--pen); border-radius: 12px; overflow: hidden; background: var(--card) }
.scell { display: flex; flex-direction: column; align-items: center; padding: 7px 10px; min-width: 46px; border-right: 1px solid var(--line) }
.scell:last-child { border-right: 0 }
.scell span { font-size: 12px; color: var(--muted) }
.scell b { font: 700 22px/1.2 var(--serif); color: var(--pen) }
.scell i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--flag) }
.pillrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 }
.plbl { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 56px }
.pchip { border-radius: 999px; padding: 4px 11px; font-size: 14px; font-weight: 600 }
.pchip.ok { background: var(--good-soft); color: var(--good) }
.pchip.bad { background: var(--bad-soft); color: var(--bad) }
.panel.refs > summary { color: var(--pen-ink) }