/* ===================================================== QUESTION PAGES ==== */
.qcard{display:flex;flex-direction:column;padding:17px 19px;min-height:176px}
.qcard .qc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}
.qc-pattern{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.qc-like{flex:0 0 auto;font-size:12px;font-weight:800;padding:2px 9px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.qc-like.qc-hi{background:var(--green-soft);color:var(--green)}
.qc-like.qc-mid{background:var(--amber-soft);color:var(--amber)}
.qc-like.qc-lo{background:var(--slate-soft);color:var(--slate)}
.qcard h3{margin:0 0 8px;font-size:16.5px;font-weight:700;line-height:1.28;letter-spacing:-.012em;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qcard .qc-check{color:var(--green);font-weight:800;margin-left:6px}
.qcard p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qcard .qc-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;border-top:1px solid var(--border)}
.qc-diff{font-size:11px;font-weight:700;letter-spacing:.01em;padding:3px 9px;border-radius:7px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.qc-go{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;color:var(--accent)}
.qc-go svg{transition:transform var(--t)}
.qcard:hover .qc-go svg{transform:translateX(3px)}
.qcard.solved{border-color:var(--green)}
.qcard.solved::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:var(--r-card) 0 0 var(--r-card);background:var(--green)}
.qcard{position:relative;overflow:hidden}

.qprompt{padding:18px 22px;margin:0 0 14px}
.qprompt .prose p:last-child{margin-bottom:0}
.qclarify{margin:0 0 24px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden}
.qclarify summary{cursor:pointer;padding:13px 18px;font-weight:650;font-size:14.5px;list-style:none}
.qclarify summary::-webkit-details-marker{display:none}
.qclarify summary::before{content:"▸ ";color:var(--accent)}
.qclarify[open] summary::before{content:"▾ "}
.qclarify ul{margin:0 0 14px;padding:0 22px 0 40px}
.qclarify li{margin:6px 0;font-size:14px;color:var(--muted)}

.qways{font-size:20px;font-weight:750;margin:8px 0 14px}
.qways span{font-size:14px;font-weight:500;color:var(--muted)}
.qseg{flex-wrap:wrap;margin-bottom:20px;max-width:100%}
.qseg button{white-space:nowrap}

.qmeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.qtag{font-size:11.5px;font-weight:750;color:#fff;background:linear-gradient(135deg,var(--accent),var(--violet));padding:3px 11px;border-radius:var(--r-pill)}
.qcx{font-size:13px;color:var(--muted)}
.qcx b{color:var(--text);font-family:var(--mono);font-size:12.5px}
.qidea{font-size:15px;margin:0 0 18px;padding:12px 16px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0}

.qgrid{display:grid;gap:20px;grid-template-columns:1fr;margin-bottom:8px}
@media (min-width:1180px){ .qgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.qsub{font-size:12px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin:0 0 9px}
.qsub-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.qcode .prose pre,.qcode .prose .codehilite{margin:0}
.qexp{margin-top:6px}
.qexp .prose{max-width:none}
.qexp .prose p{font-size:14.5px}

.btn-mini{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#fff;
  background:var(--accent);padding:4px 11px;border-radius:var(--r-pill);margin-right:10px}
.btn-mini:hover{background:var(--accent-ink);text-decoration:none}

/* ===================================================== CATEGORY HEADERS == */
.cat-head{font-size:13px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  margin:26px 0 13px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.cat-head:first-of-type{margin-top:8px}
.cat-head span{font-size:11px;font-weight:800;color:var(--accent-ink);background:var(--accent-soft);
  padding:2px 9px;border-radius:var(--r-pill);letter-spacing:0}
[data-theme="dark"] .cat-head span{color:var(--accent)}

/* "this is really …" family badge on a question page */
.this-is-really{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 22px;padding:13px 16px;
  border-radius:13px;text-decoration:none;color:inherit;border:1px solid var(--violet);
  background:linear-gradient(100deg,var(--violet-soft),var(--surface));transition:all var(--t)}
.this-is-really:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateY(-1px)}
.tir-ico{font-size:20px;flex:0 0 auto}
.tir-text{font-size:14.5px;color:var(--text)} .tir-text b{color:var(--violet);font-weight:750}
.tir-count{font-size:11.5px;font-weight:700;color:var(--violet);background:var(--violet-soft);padding:2px 9px;border-radius:var(--r-pill);border:1px solid var(--violet)}
.tir-go{margin-left:auto;font-size:13px;font-weight:650;color:var(--violet);display:inline-flex;align-items:center;gap:5px}
@media (max-width:560px){.tir-go{margin-left:0}}
.fam-hl{animation:famPulse 2.2s ease}
@keyframes famPulse{0%,100%{box-shadow:var(--shadow)} 18%{box-shadow:0 0 0 3px var(--violet)}}

/* ===================================================== DISGUISES ========= */
.fam{padding:20px 22px;margin-bottom:18px}
.fam-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.fam-n{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--violet))}
.fam-head h3{margin:0;font-size:18px;font-weight:750;letter-spacing:-.01em;flex:1}
.fam-count{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--violet);background:var(--violet-soft);
  padding:3px 10px;border-radius:var(--r-pill)}
.fam-core{font-size:14.5px;color:var(--text);margin:0 0 14px}
.fam-meta{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.fam-tell,.fam-approach{font-size:13.5px;color:var(--muted);line-height:1.5;padding:10px 13px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border)}
.fam-tell{border-left:3px solid var(--amber)} .fam-approach{border-left:3px solid var(--green)}
.fam-lbl{display:inline-block;font-weight:750;color:var(--text);margin-right:6px;font-size:12.5px}
.fam-members{display:flex;flex-direction:column;gap:7px}
.fam-member{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);text-decoration:none;color:inherit;transition:all var(--t)}
.fam-member:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none;transform:translateX(2px)}
.fam-member.canon{border-color:var(--accent);background:var(--accent-soft)}
.fm-left{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.fm-title{font-weight:650;font-size:14px;color:var(--text)}
.fm-star{font-size:10.5px;font-weight:800;color:#fff;background:var(--accent);padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap}
.fm-disguise{flex:0 0 auto;font-size:12.5px;color:var(--muted);font-style:italic;display:inline-flex;align-items:center;gap:5px;text-align:right}
.fm-disguise svg{opacity:.6}
@media (max-width:560px){.fam-member{flex-direction:column;align-items:flex-start;gap:4px}.fm-disguise{text-align:left}}

/* ===================================================== RRK SCENARIOS ===== */
.scncard{display:flex;flex-direction:column;padding:18px 20px}
.scncard h3{margin:0 0 7px;font-size:17px;font-weight:700}
.scncard p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.scn-value{font-size:13px;font-weight:700;color:var(--green);background:var(--green-soft);
  border-radius:8px;padding:6px 11px;display:inline-block;margin-bottom:11px;align-self:flex-start}
.scn-value.big{font-size:14.5px;padding:8px 14px}
.scncard .scn-stack{display:flex;flex-wrap:wrap;gap:5px}
.scn-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 24px}
.scn-meta .scn-stack{display:flex;flex-wrap:wrap;gap:7px}
.scn-meta .pill{font-weight:650}

/* ===================================================== VIZ PLAYER ======== */
.viz{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.viz-stage{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:8px 4px}
@keyframes vzfade{from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none}}
.viz-stage>*{animation:vzfade .2s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.viz-stage>*{animation:none}}
.viz-note{font-size:13.5px;line-height:1.5;color:var(--text);background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;margin:12px 0 12px;min-height:42px;display:flex;align-items:center}
.viz-controls{display:flex;align-items:center;gap:8px}
.viz-btn{font-family:inherit;font-size:13px;font-weight:600;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text);border-radius:9px;padding:7px 11px;cursor:pointer;transition:all var(--t)}
.viz-btn:hover:not(:disabled){background:var(--surface-2)}
.viz-btn:disabled{opacity:.4;cursor:default}
.viz-play{background:var(--accent);border-color:var(--accent);color:#fff;min-width:84px}
.viz-play:hover{background:var(--accent-ink)}
.viz-play.on{background:var(--violet);border-color:var(--violet)}
.viz-scrub{flex:1;accent-color:var(--accent);cursor:pointer}
.viz-count{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:56px;text-align:right}

/* ---- boxes ---- */
.vz-boxes{width:100%;max-width:560px}
.vz-row{display:grid;grid-template-columns:repeat(var(--n),minmax(30px,1fr));gap:6px}
.vz-box{aspect-ratio:1/.92;min-height:40px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:15px;
  border-radius:9px;border:2px solid var(--border-strong);background:var(--surface-2);color:var(--text);transition:all .25s}
.vz-box.vz-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.vz-box.vz-done{background:var(--surface-3);border-color:var(--border);color:var(--muted)}
.vz-box.vz-match{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.vz-idxrow{margin-bottom:4px}
.vz-idx{text-align:center;font-size:10px;font-family:var(--mono);color:var(--faint)}
.vz-ptrlane{margin-top:5px}
.vz-pcell{display:flex;flex-direction:column;align-items:center;min-height:18px}
.vz-ptr{font-size:11px;line-height:1;color:var(--accent);display:flex;flex-direction:column;align-items:center;font-weight:700}
.vz-ptr em{font-style:normal;font-size:11px}
.vz-ptr-violet{color:var(--violet)}
.vz-ptr-blue{color:var(--accent)}

/* ---- grid ---- */
.vz-grid{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:4px;width:100%;max-width:320px}
.vz-cell{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;position:relative;font-size:12px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);transition:all .25s}
.vz-cell.vz-wall{background:var(--text);border-color:var(--text);opacity:.85}
.vz-cell.vz-open{background:var(--surface-2)}
.vz-cell.vz-start{background:var(--accent);border-color:var(--accent);color:#fff}
.vz-cell.vz-end{background:var(--violet);border-color:var(--violet);color:#fff}
.vz-cell.vz-visited{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-ink)}
.vz-cell.vz-frontier{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.vz-cell.vz-current{background:var(--amber);border-color:var(--amber);color:#3a2a00;box-shadow:0 0 0 3px var(--amber-soft)}
.vz-cell.vz-path{background:var(--green);border-color:var(--green);color:#fff}
.vz-cell .vz-glyph{font-size:13px;font-weight:800}
.vz-cell .vz-cl{font-family:var(--mono);font-size:11px}

/* ---- stack ---- */
.vz-stackwrap{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px}
.vz-lbl{font-size:10.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px}
.vz-strrow .vz-str{display:flex;flex-wrap:wrap;gap:3px;font-family:var(--mono)}
.vz-ch{display:grid;place-items:center;min-width:24px;height:30px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);font-weight:700;font-size:14px}
.vz-ch-cur{background:var(--amber);border-color:var(--amber);color:#3a2a00;transform:translateY(-2px)}
.vz-cols{display:flex;gap:16px;align-items:flex-start}
.vz-stackcol,.vz-outcol{flex:1;min-width:0}
.vz-stack{display:flex;flex-direction:column-reverse;gap:5px;min-height:46px;padding:8px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface-2)}
.vz-frame{font-family:var(--mono);font-size:13px;font-weight:700;padding:7px 10px;border-radius:7px;background:var(--accent-soft);
  color:var(--accent-ink);border:1px solid var(--accent);text-align:center}
.vz-frame.vz-empty{background:none;border:none;color:var(--faint);font-weight:500;font-style:italic}
.vz-out{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--green);background:var(--green-soft);
  border:1px solid var(--green);border-radius:10px;padding:12px;min-height:46px;word-break:break-all;display:flex;align-items:center}
.vz-out i{color:var(--faint)}

/* ---- intervals timeline ---- */
.vz-timeline{position:relative;width:100%;max-width:560px;margin:10px 0 0}
.vz-bar{position:absolute;height:24px;border-radius:6px;display:flex;align-items:center;padding:0 7px;font-size:11px;font-weight:700;
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-ink);transition:all .25s;overflow:hidden;white-space:nowrap}
.vz-bar.vz-iv-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.vz-bar.vz-iv-pending{background:var(--surface-2);border-color:var(--border-strong);color:var(--muted)}
.vz-bar.vz-iv-placed{background:var(--accent-soft);border-color:var(--accent)}
.vz-cursor{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--red)}
.vz-cursor span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--red);white-space:nowrap}
.vz-axis{display:flex;justify-content:space-between;max-width:560px;width:100%;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--faint)}

/* ---- tree / graph (node-link svg) ---- */
.vz-tree{max-width:520px;width:100%;height:auto}
.vz-edge{stroke:var(--border-strong);stroke-width:2}
.vz-edge-active{stroke:var(--accent);stroke-width:3}
.vz-edge-path{stroke:var(--green);stroke-width:3}
.vz-edge-tree{stroke:var(--accent);stroke-width:2.5}
.vz-elabel{fill:var(--muted);font-size:10px;font-family:var(--mono);text-anchor:middle;dominant-baseline:central}
.vz-node circle{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:2;transition:all .25s}
.vz-node text{fill:var(--text);font-size:12px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:var(--mono)}
.vz-n-active circle{fill:var(--amber);stroke:var(--amber)}
.vz-n-active text{fill:#3a2a00}
.vz-n-visited circle{fill:var(--accent-soft);stroke:var(--accent)}
.vz-n-visited text{fill:var(--accent-ink)}
.vz-n-current circle{fill:var(--accent);stroke:var(--accent)}
.vz-n-current text{fill:#fff}
.vz-n-path circle,.vz-n-match circle{fill:var(--green);stroke:var(--green)}
.vz-n-path text,.vz-n-match text{fill:#fff}
.vz-n-dim circle{fill:var(--surface-2);stroke:var(--border);opacity:.5}

/* ---- panel ---- */
.vz-panel{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.vz-chip{font-size:11.5px;font-family:var(--mono);background:var(--surface-2);border:1px solid var(--border);
  border-radius:7px;padding:3px 9px;color:var(--muted)}
.vz-chip b{color:var(--accent-ink);font-family:var(--font);margin-right:3px}
[data-theme="dark"] .vz-chip b{color:var(--accent)}