/* Layout: satu kolom baca (±720px) dengan simulator selebar kolom. Warna stasiun 1 (biru) jadi penanda halaman. */
:root {
  --bg: #F2F4F6;
  --surface: #FFFFFF;
  --ink: #15202B;
  --muted: #5B6875;
  --line: #D5DBE1;
  --accent: #B4501A;
  --st: #1F5FA8;
  --st-bg: #E3EEF9;
  --ok: #1B7F4B;
  --ok-bg: #E3F4EA;
  --bad: #B3261E;
  --bad-bg: #FBE6E4;
  --wire: #3B4856;
  /* Font dan warna final ditimpa oleh teknol.css. */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg: #0F1620; --surface: #17212D; --ink: #E6EBF0; --muted: #93A1AF; --line: #2B3948;
  --accent: #E58A52; --st: #6FAEEB; --st-bg: #17304B;
  --ok: #5FD08F; --ok-bg: #14301F; --bad: #FF8A80; --bad-bg: #3C1B19; --wire: #A9B6C3;
  color-scheme: dark;
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.wrap { max-width: 720px; margin-inline: auto; padding-inline: 16px; padding-block: 24px 64px; display: grid; gap: 36px; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.5rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: 1.3rem; line-height: 1.25; font-weight: 600; text-wrap: balance; }
h3 { font-size: 1rem; font-weight: 600; }
p + p { margin-top: 10px; }
.mono { font-family: var(--font-mono); font-weight: 500; }
.sec { display: grid; gap: 14px; }
.sec > h2 { display: flex; gap: 10px; align-items: baseline; }
.sec > h2 .k { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--st); border: 1.5px solid var(--st); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.muted { color: var(--muted); }

/* kepala halaman */
.crumb { font-family: var(--font-mono); font-size: 12.5px; color: var(--st); text-transform: uppercase; letter-spacing: .06em; }
.head { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 2px solid var(--st); }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 20px; font-size: 13.5px; }
.meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.meta dd { overflow-wrap: anywhere; }
.badge-draft { display: inline-block; font-family: var(--font-mono); font-size: 12px; background: var(--accent); color: var(--bg); padding: 2px 8px; border-radius: 3px; }
.pre { display: flex; flex-wrap: wrap; gap: 6px; }
.pre span { font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; background: var(--surface); }

ul.goal { padding-left: 1.2em; display: grid; gap: 4px; }

/* tabel besaran */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; letter-spacing: .02em; color: var(--muted); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

.box { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: grid; gap: 8px; }
.box.note { border-left: 4px solid var(--st); }
.box h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; }

/* tombol pilihan */
.opts { display: grid; gap: 8px; }
.opt { font: inherit; text-align: left; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.opt:hover:not([disabled]) { border-color: var(--st); }
.opt[disabled] { cursor: default; }
.opt.right { border-color: var(--ok); background: var(--ok-bg); }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb { padding: 10px 14px; border-radius: 8px; background: var(--st-bg); font-size: 15px; }
.fb.ok { background: var(--ok-bg); }
.fb.bad { background: var(--bad-bg); }

/* simulator */
.sim { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sim-bar { display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.circ { padding: 8px 10px 0; }
svg { display: block; width: 100%; height: auto; }
svg text { font-family: var(--font-body); fill: var(--muted); font-size: 13px; }
svg .rd { fill: var(--ink); font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
svg .sym { fill: var(--ink); font-weight: 600; font-size: 17px; font-family: var(--font-mono); }
.wire { fill: none; stroke: var(--wire); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lead { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.part { fill: var(--surface); stroke: var(--wire); stroke-width: 3; }
.part.hot { stroke: var(--bad); fill: var(--bad-bg); }
.plate { stroke: var(--ink); stroke-linecap: round; }
.dot { fill: var(--accent); opacity: .92; }
.ctl { display: grid; gap: 14px; padding: 14px; border-top: 1px solid var(--line); }
.sl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.sl label { font-weight: 500; }
.sl output { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.sl input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--st); height: 32px; margin: 0; }
.calc { margin: 0 14px 14px; padding: 12px 14px; border-radius: 8px; background: var(--st-bg); font-family: var(--font-mono); font-weight: 500; font-size: 15px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.calc .big { font-size: 1.15rem; }
.warn { margin: 0 14px 14px; padding: 10px 14px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); font-size: 14px; }
.pw { margin: 0 14px 14px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { font: inherit; font-weight: 500; font-size: 14.5px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--ink); color: var(--bg); cursor: pointer; }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
.btn[disabled] { opacity: .45; cursor: default; }

.two { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.two > * { min-width: 0; }
.gtxt { fill: var(--muted); font-size: 11px; font-family: var(--font-mono); }
.grid-l { stroke: var(--line); stroke-width: 1; }
.ax { stroke: var(--muted); stroke-width: 1.5; }
.gline { stroke: var(--st); stroke-width: 2.5; fill: none; }
.gpt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.glog { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.gdash { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }

ol.tasks { padding-left: 1.3em; display: grid; gap: 8px; }
details { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
details > summary { cursor: pointer; padding: 10px 14px; font-weight: 500; }
details > div { padding: 0 14px 14px; display: grid; gap: 8px; }

/* contoh hitung */
.ex { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ex > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.ex .t { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.formula { font-family: var(--font-mono); font-weight: 500; font-size: 1.25rem; padding: 6px 0; }
.forms { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.forms > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.forms .formula { padding: 0; font-size: 1.15rem; color: var(--st); }
.forms small { color: var(--muted); }

.q { display: grid; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.q:last-of-type { border-bottom: 0; }
.q .qt { font-weight: 500; }
.q .qn { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.score { font-weight: 500; }

ul.err { padding-left: 1.2em; display: grid; gap: 10px; }
.ref { font-size: 14px; display: grid; gap: 6px; padding-left: 1.2em; }
.rev { font-size: 14px; }
.rev label { display: flex; gap: 10px; align-items: flex-start; padding: 3px 0; }
.rev input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--st); }
.nextrow { display: flex; flex-wrap: wrap; gap: 8px; }
.nextrow span { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; background: var(--surface); font-size: 14px; }

@media (max-width: 560px) {
  svg .nm { display: none; }
  svg .rd { font-size: 21px; }
  svg .sym { font-size: 24px; }
  svg text { font-size: 18px; }
  svg .gtxt { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.say { border-left: 4px solid var(--accent); padding: 4px 0 4px 14px; display: grid; gap: 4px; }
.say .who { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.mp { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-family: var(--font-mono); font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted); }
.pill.on { border-color: var(--st); color: var(--st); }
.pill.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.target { display: inline-block; font-family: var(--font-mono); font-weight: 500; background: var(--st-bg); color: var(--st); padding: 3px 10px; border-radius: 6px; width: fit-content; }
.stat { font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.num { font: inherit; font-family: var(--font-mono); font-size: 16px; padding: 8px 10px; width: 130px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.found { font-family: var(--font-mono); font-size: 13px; color: var(--ok); display: flex; flex-wrap: wrap; gap: 6px; }
.found span { background: var(--ok-bg); border-radius: 4px; padding: 1px 8px; }
.deck { display: grid; gap: 12px; }
.prog { display: grid; gap: 6px; }
.prog .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.prog .bar i { display: block; height: 100%; background: var(--st); transition: width .25s; }
.prog .lbl { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--st); border-radius: 10px; padding: 18px 16px; display: grid; gap: 14px; min-height: 280px; align-content: start; }
.card .sim { border-radius: 8px; }
.nav { display: flex; justify-content: space-between; gap: 10px; }
.tap { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tap button { font: inherit; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); cursor: pointer; display: grid; gap: 4px; }
.tap button.open { border-color: var(--st); background: var(--st-bg); }
.tap .nm2 { font-weight: 600; }
.tap .hid { color: var(--muted); font-size: 14.5px; }
.tap button.open .hid { color: var(--ink); }
.big-f { font-family: var(--font-mono); font-weight: 500; font-size: 1.4rem; color: var(--st); }
@media (prefers-reduced-motion: reduce) { .prog .bar i { transition: none; } }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; width: fit-content; background: var(--surface); }
.seg button { font: inherit; font-size: 14px; padding: 6px 16px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.errbox { border: 2px solid var(--bad); background: var(--bad-bg); color: var(--bad); border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.errbox ul { margin: 6px 0 0; padding-left: 1.2em; }
#main > .sec, #main > details { margin-bottom: 0; }
#main { display: grid; gap: 36px; }
.card .tag { width: fit-content; }
.head details summary { font-weight: 500; }
.picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.picker .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
.picker a { text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; background: var(--surface); }
.picker a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.picker a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg .sg { stroke-width: 1.5; }
svg .segA { fill: var(--st-bg); stroke: var(--st); }
svg .segB { fill: var(--dep-bg); stroke: var(--accent); }
svg .segC { fill: var(--ok-bg); stroke: var(--ok); }

:root { --dep-bg: #FBEBDD; }

:root[data-theme="dark"] { --dep-bg: #3A2616; }

/* widget umum */
.wgbody{padding:14px;display:flex;flex-direction:column;gap:12px}
.wgrow{display:flex;flex-wrap:wrap;gap:10px}
.wgrow label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted,#667);flex:1 1 130px;min-width:0}
.wgrow .num{width:100%;font-size:16px;padding:8px 10px;box-sizing:border-box}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.log{list-style:none;margin:0;padding:0;font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.log li{padding:6px 8px;border-radius:6px;background:var(--dep-bg,rgba(128,128,128,.12))}
.kode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.55;background:var(--dep-bg,rgba(128,128,128,.12));border-radius:8px;padding:12px 12px 12px 8px;overflow-x:auto;margin:10px 0;counter-reset:l;white-space:pre}
.kode .ln::before{content:attr(data-n);display:inline-block;width:2em;margin-right:.8em;text-align:right;opacity:.45}
.kode b{color:var(--accent)}
.kcat{padding-left:18px;font-size:14.5px}
.part.ok{stroke:var(--accent);stroke-width:2.5}
.gline{fill:none;stroke:var(--accent);stroke-width:2}

[hidden]{display:none!important}