/* ══════════════════════════════════════════════════════════════════
   FORGE — dark by default. Near-black, one hot orange, heavy grotesk,
   monospace labels. Nothing decorative; the numbers do the talking.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0D0D0D;  --card:#171717;  --card2:#1F1F1F;  --line:#262626;  --line2:#333;
  --ink:#FFFFFF; --body:#E6E6E6;  --mut:#8C8C8C;    --dim:#5E5E5E;
  --acc:#F04E23; --accInk:#FFFFFF; --accSoft:rgba(240,78,35,.13); --accLine:rgba(240,78,35,.42);
  --ok:#4ADE80;  --warn:#F0A623;
  --f:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --e:cubic-bezier(.22,1,.36,1);
}
[data-mode="light"]{
  --bg:#F2F0ED; --card:#FFFFFF; --card2:#F7F5F2; --line:#E2DFDA; --line2:#D3CFC8;
  --ink:#0D0D0D; --body:#1F1F1F; --mut:#6E6A64; --dim:#96918A;
  --accInk:#FFFFFF; --accSoft:rgba(240,78,35,.09); --accLine:rgba(240,78,35,.34);
}
/* ── type ── */
.h1{font-family:var(--f);font-weight:800;font-size:clamp(30px,8.4vw,38px);line-height:1.04;
  letter-spacing:-.042em;color:var(--ink)}
.h2{font-family:var(--f);font-weight:800;font-size:22px;line-height:1.12;letter-spacing:-.032em}
.num{font-family:var(--f);font-weight:800;letter-spacing:-.05em;line-height:.92;
  font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.lbl.hot{color:var(--acc)}
.sub{font-family:var(--f);font-weight:400;font-size:15px;line-height:1.5;color:var(--mut)}
/* ── the pieces ── */
.pill-btn{display:block;width:100%;padding:18px;border-radius:99px;text-align:center;
  font-family:var(--f);font-weight:700;font-size:16px;letter-spacing:-.01em;
  background:var(--ink);color:var(--bg);border:none}
.pill-btn.hot{background:var(--acc);color:#fff}
.pill-btn.ghost{background:transparent;color:var(--mut);font-weight:500}
.pill-btn:active{transform:scale(.985)}
.opt-card{display:block;width:100%;text-align:left;background:var(--card);border:1.5px solid transparent;
  border-radius:16px;padding:17px 18px;transition:border-color .2s var(--e),background .2s var(--e)}
.opt-card .ot{font-family:var(--f);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.opt-card .od{font-family:var(--f);font-weight:400;font-size:13.5px;line-height:1.45;color:var(--mut);
  margin-top:6px}
.opt-card.on{border-color:var(--acc);background:linear-gradient(180deg,rgba(240,78,35,.10),var(--card))}
.note-card{background:#111;border-radius:14px;padding:16px 17px}
[data-mode="light"] .note-card{background:#0D0D0D}
.note-card .nt{font-family:var(--f);font-weight:400;font-size:14.5px;line-height:1.5;color:#EDEDED;margin-top:9px}
.note-card .nt b{font-weight:700;color:#fff}
.rule-note{border-left:2px solid var(--acc);padding-left:14px}
.rule-note p{font-family:var(--f);font-size:14px;line-height:1.5;color:var(--mut)}
/* ── progress ── */
.topbar{display:flex;align-items:center;gap:12px}
.topbar .tb{flex:1;height:3px;background:var(--line);border-radius:99px;overflow:hidden}
.topbar .tb i{display:block;height:100%;background:var(--acc);border-radius:99px;
  transition:width .45s var(--e)}
.topbar .tc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim)}