/* Matthew Math: tema terang, balok ala lego. Mobile dulu, laptop mulai 900px. */

:root {
  --bg: #f2f4f7;
  --card: #fff;
  --line: #e3e7ee;
  --tx: #1c2230;
  --mu: #5f6b80;
  --pri: #2d5bd6;
  --pri-dk: #2249b0;
  --pri-bg: #eaf0fd;
  --edge: #8a95a7;
  --press: #e6eaf0;
  --amb: #a86400;
  --amb-bg: #f9b93a;
  --amb-tx: #3d2600;
  --amb-soft: #fff8e8;
  --amb-line: #f0d08c;
  --ok: #1d7a4f;
  --ok-bg: #e3f4ea;
  --wn-bg: #fff3d6;
  --wn-tx: #6e4300;
  --bad: #b3261e;
  --bad-bg: #fdeceb;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgba(28, 34, 48, .05), 0 4px 12px -6px rgba(28, 34, 48, .10), 0 0 0 1px var(--line);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
ul, ol { list-style: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--pri); outline-offset: 2px; }
main:focus, [tabindex="-1"]:focus { outline: none; }
.katex { font-size: 1.05em; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.loading, .noscript { min-height: 100dvh; display: grid; place-content: center; gap: 16px; padding: 24px; text-align: center; color: var(--mu); }

/* ---------- kerangka ---------- */
.screen { min-height: 100dvh; display: flex; flex-direction: column; }
.in-w { width: 100%; max-width: 1000px; margin: 0 auto; }

.top { position: sticky; top: 0; z-index: 5; background: var(--card); box-shadow: 0 1px 0 var(--line); flex: none; }
.top > .bar { height: 60px; padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.top.slim > .bar { padding: 0 8px; gap: 4px; }
.top.amb { background: var(--amb-soft); box-shadow: 0 1px 0 var(--amb-line); }
.logo { width: 30px; height: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.logo i { border-radius: 4px; background: var(--pri); }
.logo i:nth-child(2) { background: #8fb0f0; }
.logo i:nth-child(3) { background: #5c84e6; }
.brand { font-size: 17px; font-weight: 700; }
.ttl { font-size: 17px; font-weight: 700; line-height: 1.2; min-width: 0; }
.ttl small { display: block; font-size: 13px; font-weight: 400; color: var(--mu); }
.top.amb .ttl small { color: #6b5220; }
.back { width: 48px; height: 48px; flex: none; border-radius: var(--r-md); border: 1.5px solid var(--edge); background: #fff; color: var(--tx); display: grid; place-items: center; }
.back.plain { border: 0; background: none; }
.top.amb .back { color: var(--amb-tx); }
.top.amb .back:not(.plain) { border-color: var(--amb); }

.body { flex: 1; width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.foot { position: sticky; bottom: 0; z-index: 5; background: var(--card); box-shadow: 0 -1px 0 var(--line); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); flex: none; }
.foot-in { display: grid; gap: 8px; }

.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); }

h1 { font-size: 24px; font-weight: 700; line-height: 1.25; }
.lead { font-size: 15px; line-height: 1.5; color: var(--mu); margin-top: 6px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ok); }
.eyebrow .ic { width: 16px; height: 16px; }
.eyebrow.pr { color: var(--pri); }
.muted { color: var(--mu); font-size: 15px; line-height: 1.5; margin-top: 8px; }

/* ---------- tombol ---------- */
.btns { display: flex; gap: 10px; }
.btn { height: 52px; min-width: 0; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; padding: 0 14px; white-space: nowrap; }
.btn.p { flex: 1; background: var(--pri); color: #fff; }
.btn.p:hover:not(:disabled) { background: var(--pri-dk); }
.btn.p:disabled { background: var(--press); color: var(--mu); }
.btn.s, .btn.r { border: 1.5px solid var(--edge); background: #fff; color: var(--tx); }
.btn.s:disabled, .btn.r:disabled { opacity: .45; }
.btn.block { width: 100%; }
.btns .btn.s { flex: 1; }
.btn.r .ic { width: 18px; height: 18px; }
.btn.r[aria-pressed="true"] { border: 2px solid var(--amb); background: var(--amb-bg); color: var(--amb-tx); }
.btn.r[aria-pressed="true"] .ic { fill: currentColor; }
.btn.s[aria-pressed="true"] { border: 2px solid var(--tx); background: var(--press); }
.soal ~ .foot .btns .btn.s, .soal ~ .foot .btns .btn.r { flex: none; }

.pill { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; background: var(--pri-bg); color: var(--pri); }
.pill .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.pill.ok, .pill.k { background: var(--ok-bg); color: var(--ok); }
.pill.p { background: var(--wn-bg); color: var(--wn-tx); }
.pill.m { background: var(--pri); color: #fff; }
.pill.n { background: var(--bg); color: var(--mu); box-shadow: inset 0 0 0 1px var(--line); }
.pill.x { background: var(--bad-bg); color: var(--bad); }

.tip { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: #f5f8ff; box-shadow: inset 3px 0 0 var(--pri); font-size: 14px; line-height: 1.5; }
.tip .ic { color: var(--pri); width: 18px; height: 18px; margin-top: 2px; }

/* nomor soal */
.nb { flex: none; width: 48px; height: 48px; border-radius: 10px; border: 1.5px solid var(--edge); background: #fff; color: var(--tx); font-size: 16px; font-weight: 700; display: grid; place-items: center; position: relative; }
.nb.d { background: var(--pri); border-color: var(--pri); color: #fff; }
.nb.n { border: 2.5px solid var(--pri); background: var(--pri-bg); color: var(--pri); }
.nb.q { background: var(--bg); border: 1.5px dashed var(--edge); color: var(--mu); }
.nb.x { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.nb.r { background: var(--amb-bg); border: 1.5px solid var(--amb); color: var(--amb-tx); }
.nb.r.n { border: 2.5px solid var(--pri); }
.nb .fl { position: absolute; bottom: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid var(--amb); display: grid; place-items: center; }
.nb .fl .ic { width: 12px; height: 12px; fill: #7a4a00; stroke: #7a4a00; stroke-width: 2.4; }

/* ---------- beranda ---------- */
.awal .left, .awal .right { display: flex; flex-direction: column; gap: 16px; }
.awal .eyebrow, .ragu-list .eyebrow { color: var(--pri); background: var(--pri-bg); border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.awal h1 { font-size: 26px; margin: 8px 0 4px; }
.awal .lead { font-size: 16px; margin-top: 0; }
.h2 { font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
.h2 small { font-size: 13px; font-weight: 400; color: var(--mu); }
.sessions { display: grid; gap: 12px; }
.ses { padding: 14px 16px; display: grid; gap: 12px; }
.ses .sh { display: flex; align-items: center; gap: 12px; }
.ses .sb { width: 48px; height: 48px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 19px; font-weight: 700; background: var(--pri-bg); color: var(--pri); border: 1.5px solid #c4d3f5; }
.ses .sh b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ses .sh small { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--mu); margin-top: 2px; }
.ses .sh small .ic { width: 15px; height: 15px; }
.ses .pill { margin-left: auto; }
.ses.run { box-shadow: 0 0 0 2px var(--pri), 0 4px 12px -6px rgba(45, 91, 214, .35); }
.ses.lock { background: #f8f9fb; box-shadow: 0 0 0 1px var(--line); }
.ses.lock .sb { background: var(--bg); color: var(--mu); border: 1.5px dashed var(--edge); }
.ses.lock .sh b { color: var(--mu); }
.ses.done .sb { background: var(--ok-bg); color: var(--ok); border-color: #b7dfc7; }
.ses .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ses .chips span { font-size: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--mu); border-radius: 6px; padding: 4px 8px; }
.ses .bricks { display: flex; gap: 3px; }
.ses .bricks i { flex: 1; height: 12px; border-radius: 3px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ses .bricks i.d { background: var(--pri); box-shadow: none; }
.ses .bricks i.q { background: #fff; box-shadow: inset 0 0 0 1.5px var(--edge); }
.ses .bricks i.r { background: var(--amb-bg); box-shadow: inset 0 0 0 1px var(--amb); }
.prog { display: flex; justify-content: space-between; font-size: 13px; color: var(--mu); margin-top: 6px; }
.prog b { color: var(--tx); font-weight: 700; }
.prog .rg { display: inline-flex; align-items: center; gap: 4px; color: var(--amb-tx); font-weight: 600; }
.prog .rg .ic { width: 14px; height: 14px; fill: var(--amb-bg); stroke: var(--amb); }
.tips { padding: 6px 16px; }
.ti { display: flex; gap: 12px; padding: 10px 0; align-items: flex-start; }
.ti + .ti { border-top: 1px solid var(--line); }
.tii { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); background: var(--bg); color: var(--pri); display: grid; place-items: center; }
.ti b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
.ti p { font-size: 14px; color: var(--mu); line-height: 1.45; margin-top: 2px; }

/* ---------- soal ---------- */
.top.soal { padding: 12px 16px 6px; }
.top.soal .bar { display: flex; align-items: center; gap: 12px; }
.top.soal .ttl { font-size: 16px; line-height: 1.25; }
.cnt { margin-left: auto; flex: none; font-size: 14px; font-weight: 600; color: var(--mu); background: var(--bg); border-radius: 99px; padding: 6px 12px; }
.cnt b { color: var(--tx); font-weight: 700; }
.top.amb .cnt, .top.amb .cnt b { background: var(--amb-bg); color: var(--amb-tx); }
.nums { display: flex; gap: 6px; margin: 8px -16px 0; padding: 6px 16px 12px; overflow-x: auto; scrollbar-width: none; }
.nums::-webkit-scrollbar { display: none; }
.soal { gap: 12px; }
.qcard { overflow: hidden; }
.qt { padding: 16px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pri); background: var(--pri-bg); border-radius: 6px; padding: 4px 8px; margin-bottom: 10px; }
.tag::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--pri); }
.q { font-size: 17px; line-height: 1.6; }
.q strong { font-weight: 700; }
.soal .right { display: flex; flex-direction: column; gap: 12px; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 14px 8px 10px; border-radius: var(--r-md); background: var(--card); border: 1.5px solid var(--edge); font-size: 19px; font-weight: 700; color: var(--tx); text-align: left; }
.opt:hover:not(:disabled):not(.on) { background: #f8f9fb; }
.opt .k { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); background: var(--bg); color: var(--mu); font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.opt .ot { min-width: 0; }
.opt .ck { margin-left: auto; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--pri); color: #fff; display: grid; place-items: center; visibility: hidden; }
.opt .ck .ic { width: 15px; height: 15px; stroke-width: 3.2; }
.opt.on { border: 2.5px solid var(--pri); background: var(--pri-bg); color: var(--pri); padding-left: 9px; padding-right: 13px; }
.opt.on .k { background: var(--pri); color: #fff; }
.opt.on .ck { visibility: visible; }
.opt .was { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--pri); background: #fff; border-radius: 6px; padding: 2px 6px; box-shadow: inset 0 0 0 1px #c4d3f5; }
.opt .was + .ck { margin-left: 8px; }
.opts.off .opt { opacity: .45; border-style: dashed; }
.card.off { opacity: .45; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-md); background: var(--card); box-shadow: inset 3px 0 0 var(--edge), 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; }
.note .ic { width: 18px; height: 18px; color: var(--mu); margin-top: 1px; }
.note b { font-weight: 700; }
.in { width: 88px; height: 56px; border-radius: var(--r-md); border: 1.5px solid var(--edge); text-align: center; font-size: 24px; font-weight: 700; background: #fff; }
.in:focus { outline: none; border: 2.5px solid var(--pri); box-shadow: 0 0 0 3px var(--pri-bg); }
.in:disabled { background: var(--bg); }
.in.wide { flex: 1; min-width: 0; width: auto; }
.in::placeholder { font-size: 17px; font-weight: 600; color: #9aa3b2; }
.numf { padding: 16px; display: grid; gap: 8px; }
.flabel { font-size: 15px; font-weight: 700; }
.numrow { display: flex; gap: 8px; }
.minus { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); border: 1.5px solid var(--edge); background: #fff; font-size: 26px; font-weight: 700; }
.fhelp { font-size: 13px; color: var(--mu); }
.frac { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px 16px; }
.fcol { display: grid; gap: 10px; justify-items: center; }
.ln { width: 88px; height: 3px; background: var(--tx); border-radius: 2px; }
.lbls { display: grid; gap: 10px; }
.lbls label { height: 56px; display: flex; flex-direction: column; justify-content: center; font-size: 13px; color: var(--mu); }
.lbls label b { color: var(--tx); font-weight: 700; font-size: 15px; }
.lbls span { height: 3px; }
.prev { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--amb-soft); box-shadow: inset 0 0 0 1.5px var(--amb-line); font-size: 14px; line-height: 1.45; color: #5a3a00; }
.prev .fi { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--amb-bg); color: var(--amb-tx); display: grid; place-items: center; }
.prev .fi .ic { width: 16px; height: 16px; fill: currentColor; }
.prev b { font-weight: 700; color: var(--amb-tx); }

/* lembar keluar */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; }
.scrim { position: absolute; inset: 0; background: rgba(28, 34, 48, .45); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--card); border-radius: 20px 20px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); justify-self: center; }
.sheet .si { width: 52px; height: 52px; border-radius: 14px; background: var(--pri-bg); color: var(--pri); display: grid; place-items: center; }
.sheet .si .ic { width: 24px; height: 24px; }
.sheet h2 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.sheet p { font-size: 15px; line-height: 1.5; color: var(--mu); margin-top: 4px; }
.saved { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg); font-size: 14px; }
.saved b { font-weight: 700; }
.mini { display: flex; gap: 3px; flex-wrap: wrap; max-width: 50%; }
.mini i { width: 14px; height: 12px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #b9c2d0; }
.mini i.d { background: var(--pri); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
.mini i.r { background: var(--amb-bg); box-shadow: inset 0 0 0 1.5px var(--amb); }
.mini i.q { background: #fff; box-shadow: inset 0 0 0 1.5px var(--edge); }
.sheet .col { display: grid; gap: 8px; }
.sheet .btn { width: 100%; }

/* ---------- sesi selesai ---------- */
.done .stage-card { flex: 1; min-height: 260px; display: flex; flex-direction: column; overflow: hidden; }
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 24px 16px 0; background: radial-gradient(circle, #dfe4ec 1.6px, transparent 1.8px) 0 0 / 16px 16px, #f8f9fb; }
.towers { display: flex; gap: 24px; align-items: flex-end; }
.tower { --w: 64px; --h: 30px; display: flex; flex-wrap: wrap-reverse; gap: 9px 5px; width: calc(var(--w) * 3 + 10px); }
.stage.two .tower { --w: 40px; --h: 20px; gap: 7px 4px; width: calc(var(--w) * 3 + 8px); }
.bk { width: var(--w); height: var(--h); border-radius: 4px; background: var(--pri); position: relative; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.bk::before { content: ''; position: absolute; top: -4px; left: 22%; right: 22%; height: 4px; border-radius: 2px 2px 0 0; background: inherit; box-shadow: inset 0 0 0 99px rgba(255, 255, 255, .12); }
.bk.r { background: var(--amb-bg); }
.bk.q { background: #fff repeating-linear-gradient(-45deg, transparent 0 5px, #e3e7ee 5px 7px); box-shadow: inset 0 0 0 1.5px var(--edge); }
.bk.q::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--edge); }
.ground { width: 100%; max-width: 260px; height: 10px; border-radius: 4px 4px 0 0; background: #cfd6e1; margin-top: 4px; }
.stage.two .ground { max-width: 360px; }
.done .right { display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 18px 16px 16px; text-align: center; }
.done .legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.done .legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--bg); border-radius: 8px; padding: 6px 10px; }
.done .legend b { font-weight: 700; }
.done .legend i { width: 14px; height: 10px; border-radius: 2px; background: var(--pri); }
.done .legend i.r { background: var(--amb-bg); box-shadow: inset 0 0 0 1px var(--amb); }
.done .legend i.q { background: #fff; box-shadow: inset 0 0 0 1.5px var(--edge); }
.ragu { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--amb-soft); box-shadow: inset 0 0 0 1.5px var(--amb-line); }
.ragu .fi { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--amb-bg); color: var(--amb-tx); display: grid; place-items: center; }
.ragu .fi .ic { fill: currentColor; width: 18px; height: 18px; }
.ragu b { display: block; font-size: 15px; font-weight: 700; }
.ragu small { font-size: 13px; color: #6b5220; }
.ragu button { margin-left: auto; height: 44px; min-width: 64px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--amb); background: #fff; color: var(--amb-tx); font-size: 15px; font-weight: 700; }
.save { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--mu); }
.save .ic { width: 16px; height: 16px; color: var(--ok); }

/* ---------- daftar cek ragu ---------- */
.ragu-list h1 { font-size: 22px; }
.ragu-list .list { display: grid; gap: 10px; }
.it { padding: 14px; display: grid; gap: 10px; }
.ih { display: flex; align-items: center; gap: 12px; }
.ih .nb { width: 44px; height: 44px; }
.ix { min-width: 0; }
.ix b { display: block; font-size: 13px; font-weight: 700; color: var(--pri); }
.ix p { font-size: 15px; line-height: 1.4; margin-top: 1px; }
.okl { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 3px 9px 3px 7px; margin-left: auto; }
.okl .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.ans { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: var(--r-md); background: var(--bg); }
.ans span { font-size: 14px; color: var(--mu); }
.ans span b { color: var(--tx); font-weight: 700; font-size: 16px; margin-left: 4px; }
.ans button { margin-left: auto; height: 44px; flex: none; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--amb); background: #fff; color: var(--amb-tx); font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ans button .ic { width: 18px; height: 18px; }
.it.done { box-shadow: 0 0 0 1px var(--line); background: #f8f9fb; }
.it.done .ans button { border-color: var(--edge); color: var(--mu); }
.hint { font-size: 13px; color: var(--mu); text-align: center; line-height: 1.45; }

/* ---------- hasil ---------- */
.hasil .col { display: flex; flex-direction: column; gap: 16px; }
.hasil h1 { margin-top: 4px; }
.info { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--card); box-shadow: inset 3px 0 0 var(--pri), 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; }
.info .ic { width: 18px; height: 18px; color: var(--pri); margin-top: 1px; }
.info b { font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { border-radius: var(--r-md); padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 2px; }
.tile strong { font-size: 24px; font-weight: 700; line-height: 1.1; display: flex; align-items: center; gap: 6px; }
.tile strong .ic { width: 18px; height: 18px; }
.tile span { font-size: 13px; font-weight: 600; }
.tile.k { background: var(--ok-bg); color: var(--ok); }
.tile.p { background: var(--wn-bg); color: var(--wn-tx); }
.tile.m { background: var(--pri-bg); color: var(--pri-dk); }
.tile.n { background: #fff; color: var(--mu); box-shadow: inset 0 0 0 1.5px var(--line); }
.reco { padding: 16px; position: relative; overflow: hidden; box-shadow: 0 0 0 2px var(--pri), 0 6px 16px -8px rgba(45, 91, 214, .35); }
.reco .lb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; background: var(--pri); border-radius: 8px; padding: 4px 10px 4px 8px; }
.reco .lb .ic { width: 16px; height: 16px; }
.reco h2 { font-size: 22px; font-weight: 700; margin-top: 10px; }
.reco p { font-size: 15px; color: var(--mu); margin-top: 2px; line-height: 1.45; }
.reco .fd { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--tx); }
.reco .fd b { font-weight: 700; }
.reco .deco { position: absolute; right: 14px; top: 14px; display: grid; grid-template-columns: repeat(2, 18px); gap: 3px; }
.reco .deco i { height: 12px; border-radius: 3px; background: var(--pri-bg); box-shadow: inset 0 0 0 1.5px #b9cbf5; }
.reco .deco i.on { background: var(--pri); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.hasil .sh { font-size: 17px; font-weight: 700; display: flex; align-items: baseline; justify-content: space-between; }
.hasil .sh small { font-size: 13px; font-weight: 600; color: var(--mu); }
.map { overflow: hidden; padding-bottom: 8px; }
.map .sh { padding: 14px 16px 0; }
.map .layer { font-size: 13px; font-weight: 700; color: var(--mu); padding: 12px 16px 4px; letter-spacing: .02em; display: flex; justify-content: space-between; align-items: baseline; }
.map .layer span { font-weight: 600; letter-spacing: 0; }
.tp { display: flex; align-items: center; gap: 8px; padding: 8px 16px; min-height: 48px; }
.tp + .tp { border-top: 1px solid var(--line); }
.tp.here { background: var(--pri-bg); }
.tp .nm { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.3; min-width: 0; }
.tp.todo .nm { color: var(--mu); font-weight: 400; }
.tp .bricks { display: flex; gap: 3px; flex: none; padding-top: 3px; margin-right: 4px; }
.tp .bricks i { width: 14px; height: 12px; border-radius: 3px; position: relative; background: #fff; box-shadow: inset 0 0 0 1.5px #b9c2d0; }
.tp .bricks i::before { content: ''; position: absolute; top: -3px; left: 3px; right: 3px; height: 3px; border-radius: 2px 2px 0 0; background: inherit; box-shadow: inherit; clip-path: inset(0 0 1.5px 0); }
.tp .bricks i.on { background: var(--pri); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
.tp .bricks i.on::before { box-shadow: none; clip-path: none; }
.tp .bricks i.x { background: transparent; box-shadow: none; outline: 1.5px dashed #b9c2d0; outline-offset: -1.5px; }
.tp .bricks i.x::before { display: none; }
.strong, .weak { padding: 14px 16px 16px; }
.hasil .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; padding: 6px 10px 6px 8px; border-radius: 8px; }
.chip .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.miss { display: inline-block; line-height: 1.4; padding: 6px 10px; background: var(--bg); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line); }
.chip.miss em { font-style: normal; color: var(--mu); font-weight: 400; }
.weak .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.weak h3 { font-size: 17px; font-weight: 700; }
.weak .sub { font-size: 13px; color: var(--mu); margin-top: 12px; font-weight: 600; }
.weak .chips { margin-top: 6px; }
.weak .tip { margin-top: 12px; }
.wgrid { display: grid; gap: 12px; align-items: start; }
.go { width: 100%; min-height: 72px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--tx); }
.go .gi { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--pri-bg); color: var(--pri); display: grid; place-items: center; }
.go b { display: block; font-size: 16px; font-weight: 700; }
.go small { font-size: 13px; color: var(--mu); }
.go .ch { margin-left: auto; color: var(--pri); }
.center { display: flex; justify-content: center; }
.reset { min-height: 44px; color: var(--mu); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }

/* ---------- pembahasan ---------- */
.bahas { gap: 12px; }
.bahas .nav { display: contents; }
.navcard { display: none; }
.filters { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.fc { height: 40px; flex: none; border-radius: 10px; border: 1.5px solid var(--edge); background: #fff; font-size: 14px; font-weight: 700; padding: 0 12px; display: flex; align-items: center; gap: 6px; }
.fc em { font-style: normal; font-weight: 600; color: var(--mu); }
.fc[aria-pressed="true"] { background: var(--tx); border-color: var(--tx); color: #fff; }
.fc[aria-pressed="true"] em { color: #c9d0dc; }
.fc:disabled { opacity: .45; }
.lists { display: flex; flex-direction: column; gap: 10px; }
.bahas .layer { font-size: 13px; font-weight: 700; color: var(--mu); letter-spacing: .02em; display: flex; justify-content: space-between; margin-top: 6px; }
.bahas .layer span { font-weight: 600; letter-spacing: 0; }
.bahas .list { display: grid; gap: 10px; }
.bahas .list .card { overflow: hidden; }
.bahas .nb { width: 44px; height: 44px; }
.row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; text-align: left; }
.row .tx { flex: 1; min-width: 0; }
.row b { display: block; font-size: 13px; font-weight: 700; color: var(--pri); }
.row p { font-size: 15px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row small { display: block; font-size: 13px; color: var(--mu); margin-top: 2px; }
.row small i { font-style: normal; color: var(--bad); font-weight: 700; }
.row small u { text-decoration: none; color: var(--ok); font-weight: 700; }
.row .ch { color: var(--mu); transition: transform .15s; }
.acc { box-shadow: 0 0 0 2px var(--tx), 0 6px 16px -8px rgba(28, 34, 48, .25); }
.acc .row .ch { transform: rotate(180deg); }
.dt { padding: 0 16px 16px; display: grid; gap: 14px; }
.dh, .pn { display: none; }
.split { display: grid; gap: 14px; }
.qbox { border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.qbox .q { font-size: 16px; line-height: 1.55; padding: 12px 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-md); }
.ansg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ansg > .ab:only-child { grid-column: 1 / -1; }
.ab { border-radius: var(--r-md); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ab .l { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.ab .l .ic { width: 15px; height: 15px; stroke-width: 2.8; }
.ab.you { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1.5px #f0b8b3; }
.ab.nt { background: var(--bg); color: var(--mu); box-shadow: inset 0 0 0 1.5px var(--line); }
.ab.ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1.5px #a9d8bd; }
.fb { align-self: center; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--tx); text-align: center; }
.ab.nt .fb { font-size: 16px; color: var(--mu); }
.h4 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.h4 .ic { width: 18px; height: 18px; color: var(--pri); }
.steps { display: grid; gap: 8px; counter-reset: s; }
.steps li { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; align-items: flex-start; }
.steps li::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--pri); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); margin-top: 1px; }
.steps strong { font-weight: 700; }

/* ---------- laptop ---------- */
@media (min-width: 900px) {
  .top > .bar, .top.slim > .bar { height: 64px; padding: 0 32px; }
  .top.soal { padding: 16px 32px 6px; }
  .nums { margin: 10px 0 0; padding: 6px 0 12px; }
  .body { max-width: 1064px; margin: 0 auto; padding: 28px 32px 32px; display: grid; gap: 28px; align-content: start; }
  .foot { padding: 14px 32px 18px; }
  .foot-in { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 10px; }
  .foot .btns { justify-content: flex-end; }
  .foot .btn { height: 56px; font-size: 17px; }
  .foot .btn.p { flex: none; min-width: 240px; }
  .foot .btn.block { width: auto; }
  .foot .btns .btn.s { flex: none; min-width: 180px; }
  h1 { font-size: 30px; }
  .lead { font-size: 17px; }

  .awal { grid-template-columns: 1fr 1.25fr; gap: 32px; align-items: stretch; }
  .awal h1 { font-size: 34px; }
  .awal .lead { font-size: 17px; }
  .ses { padding: 20px; }
  .tips { flex: 1; display: flex; padding: 8px 24px; }
  .tips ul { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
  .ti { padding: 16px 0; }
  .tii { width: 44px; height: 44px; }
  .ti b { font-size: 16px; }
  .ti p { font-size: 15px; }

  .soal { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .soal .prev { grid-column: 1 / -1; }
  .qt { padding: 20px 24px 24px; }
  .q { font-size: 19px; }
  .opts { gap: 12px; }
  .opt { min-height: 72px; font-size: 21px; padding-left: 14px; }
  .opt.on { padding-left: 13px; }
  .opt .k { width: 40px; height: 40px; font-size: 16px; }

  .done { grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
  .done .stage-card { min-height: 380px; }
  .stage { padding: 32px 16px 20px; }
  .tower { --h: 36px; gap: 10px 6px; width: calc(var(--w) * 3 + 12px); }
  .stage.two .tower { --w: 56px; --h: 28px; gap: 9px 5px; width: calc(var(--w) * 3 + 10px); }
  .ground, .stage.two .ground { max-width: 420px; }
  .msg { text-align: left; padding: 24px; }
  .done .legend { justify-content: flex-start; }
  .save { justify-content: flex-start; }

  .ragu-list { max-width: 704px; }

  .hasil { grid-template-columns: 1fr 1.1fr; gap: 24px; }
  .hasil h1 { font-size: 28px; }
  .full { grid-column: 1 / -1; }
  .wgrid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .go { max-width: 520px; }
  .hasil .center { justify-content: flex-start; }

  .bahas { grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
  .bahas .nav { display: grid; gap: 14px; position: sticky; top: 88px; }
  .filters { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .navcard { display: grid; gap: 10px; padding: 16px; }
  .navcard .layer { margin-top: 0; }
  .nbg { display: grid; grid-template-columns: repeat(7, 40px); gap: 8px 6px; }
  .bahas .nbg .nb { width: 40px; height: 40px; font-size: 15px; }
  .nb.cur { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--tx); }
  .navcard .legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mu); }
  .navcard .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .navcard .legend i { width: 14px; height: 12px; border-radius: 3px; background: var(--pri); }
  .navcard .legend i.x { background: var(--bad-bg); box-shadow: inset 0 0 0 1.5px var(--bad); }
  .navcard .legend i.q { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--edge); }
  .navcard .legend i.r { background: var(--amb-bg); box-shadow: inset 0 0 0 1.5px var(--amb); }
  .lists > .layer, .bahas .list .card:not(.acc), .bahas .row { display: none; }
  .bahas .list .card.acc { box-shadow: var(--shadow); }
  .dt { padding: 18px 20px 20px; }
  .dh { display: flex; align-items: center; gap: 12px; }
  .dh b { display: block; font-size: 13px; font-weight: 700; color: var(--pri); }
  .dh h1 { font-size: 20px; }
  .dh .pill { margin-left: auto; }
  .split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: stretch; }
  .split .qbox { display: flex; flex-direction: column; }
  .split .qbox .q { flex: 1; }
  .split .ansg { grid-template-columns: 1fr; }
  .split .ab { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 14px; }
  .split .fb { align-self: auto; }
  .pn { display: flex; gap: 10px; padding-top: 4px; }
  .pn .btn { height: 48px; font-size: 15px; }
  .pn .btn:last-child { margin-left: auto; }
  .pn .ic { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}