/* Belajar Interaktif — pola tebak → coba → bandingkan → simpulkan.
   Tema gelap Akalmatika: navy/monokrom/biru muda; umpan balik hijau/merah kecil. */
:root{
 --lab-bg:var(--color-background,#17191c);--lab-panel:#1e252d;--lab-panel-2:#243039;--lab-line:#3c4f5e;
 --lab-ink:#f3f5f7;--lab-muted:#a9b8c4;--lab-accent:#91d4f2;--lab-accent-ink:#08131d;--lab-accent-soft:#2f5368;
 --lab-ok:#9bceb0;--lab-ok-soft:#203629;--lab-bad:#dea0a8;--lab-bad-soft:#3a2529;
 --lab-k1:#91d4f2;--lab-k2:#f2c98e;--lab-k3:#b9a7f0;--lab-k4:#9bceb0;--lab-k5:#ef9fb6;
 --lab-math:"Latin Modern Math","Cambria Math","STIX Two Math",Georgia,serif;
}
.lab{max-width:760px;margin:0 auto}
.lab-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:14px;color:var(--lab-accent);text-decoration:none}
.lab-back:hover{text-decoration:underline}
.lab-eyebrow{margin:6px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#91c7e0;font-weight:650}
.lab-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 6px;margin:12px 0 4px;padding:0}
.lab-step{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lab-muted)}
.lab-step b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;box-shadow:inset 0 0 0 1px var(--lab-line);font-weight:650}
.lab-step.is-on{color:var(--lab-ink)}.lab-step.is-on b{background:var(--lab-accent);color:var(--lab-accent-ink);box-shadow:none}
.lab-step.is-done b{background:var(--lab-ok-soft);color:var(--lab-ok);box-shadow:none}
.lab-step+.lab-step::before{content:"";width:12px;height:1px;background:var(--lab-line)}
.lab-title{font-size:clamp(24px,4.8vw,32px);line-height:1.15;margin:8px 0 10px;text-wrap:balance}
.lab-story{font-size:18px;line-height:1.55;max-width:62ch}
.lab-story p{margin:0 0 8px}
.lab-quote{margin:10px 0 0;padding:8px 14px;border-left:3px solid var(--lab-accent-soft);background:var(--lab-panel);border-radius:0 10px 10px 0;font-size:17px;max-width:62ch}
.lab-stage{margin-top:20px;background:var(--lab-panel);border:1px solid var(--lab-line);border-radius:14px;padding:18px 16px 18px}
.lab-stage:focus{outline:none}
.lab-ask{font-size:19px;line-height:1.4;font-weight:650;margin:0 0 14px;text-wrap:balance}
.lab-ask:focus{outline:none}
.lab-ask.is-later{margin-top:26px}
.lab-stage>.lab-ask.is-later:first-child{margin-top:0}
.lab-hint{color:var(--lab-muted);font-size:15px;margin:10px 0 0;max-width:62ch}
.lab-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.lab-choices{display:flex;flex-wrap:wrap;gap:8px}
.lab-btn{font:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;min-width:44px;padding:9px 16px;border-radius:10px;border:1px solid var(--lab-line);background:var(--lab-panel-2);color:var(--lab-ink);cursor:pointer;text-align:left;text-decoration:none;line-height:1.3}
.lab-btn:hover:not([disabled]){border-color:#5d8199}
.lab-btn.is-primary{background:var(--lab-accent);border-color:var(--lab-accent);color:var(--lab-accent-ink);font-weight:650}
.lab-btn.is-primary:hover:not([disabled]){background:#b6e4f8;border-color:#b6e4f8}
.lab-btn[disabled]{opacity:.42;cursor:default}
.lab-choice.is-picked{border-color:var(--lab-accent);box-shadow:inset 0 0 0 1px var(--lab-accent)}
.lab-choice.is-right{border-color:var(--lab-ok);background:var(--lab-ok-soft)}
.lab-choice.is-wrong{border-color:var(--lab-bad);background:var(--lab-bad-soft)}
.lab :focus-visible{outline:3px solid var(--lab-accent);outline-offset:3px}
.lab-fb{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:16px;border:1px solid var(--lab-line);max-width:62ch}
.lab-fb.is-ok{border-color:var(--lab-ok);background:var(--lab-ok-soft)}.lab-fb.is-ok strong{color:var(--lab-ok)}
.lab-fb.is-no{border-color:var(--lab-bad);background:var(--lab-bad-soft)}.lab-fb.is-no strong{color:var(--lab-bad)}
.lab-idea{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--lab-accent-soft);max-width:62ch}
.lab-idea strong{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--lab-accent);margin-bottom:4px}
.lab-idea p{margin:0;font-size:17px}
.lab-finish{margin-top:16px;padding:16px;border:1px solid var(--lab-ok);border-radius:14px;background:var(--lab-ok-soft)}
.lab-finish-title{margin:0;font-weight:700;color:var(--lab-ok)}
.lab-finish .lab-row{margin-top:10px}
.lab-done-note{margin:16px 0 0;font-size:14px;color:var(--lab-muted)}
.lab-done-note a{color:var(--lab-accent)}
.lab-save{margin:18px 0 0;font-size:13px;color:var(--lab-muted)}
.lab-save::before{content:"●";color:var(--lab-ok);font-size:9px;margin-right:8px;vertical-align:2px}
.lab-save.is-warn::before{color:var(--lab-bad)}

/* pita */
.lab-who{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--lab-muted);margin:16px 0 6px}
.lab-who b{color:var(--lab-ink);font-weight:650;display:inline-flex;align-items:center;gap:6px}
.lab-track{position:relative;height:56px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lab-bar{position:absolute;top:8px;left:0;height:40px;border-radius:6px;outline:2px solid var(--lab-line);outline-offset:-1px;overflow:hidden;display:flex;transition:outline-color .2s,width .25s}
.lab-bar.is-good{outline-color:var(--lab-ok)}
.lab-seg{flex:0 0 auto;height:100%;display:grid;place-items:center;font:inherit;font-weight:700;font-size:15px;color:var(--lab-accent-ink);font-variant-numeric:tabular-nums;position:relative;border:0;padding:0;transition:width .2s,background .2s}
.lab-seg.is-empty{color:var(--lab-ink);background:var(--lab-panel-2)}
.lab-bar .lab-seg+.lab-seg{box-shadow:inset 3px 0 0 var(--lab-bg)}
.lab-seg.is-tap{cursor:pointer;animation:lab-glow 1.8s ease-in-out infinite}
.lab-seg.is-tap:hover{filter:brightness(1.15)}
@keyframes lab-glow{50%{filter:brightness(1.22)}}
.lab-ticks{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.2) 1px,transparent 1px);pointer-events:none}
.lab-cut{position:absolute;top:0;width:44px;height:56px;margin-left:-22px;display:grid;place-items:center;cursor:ew-resize;background:none;border:0;padding:0;z-index:2;touch-action:none}
.lab-cut::before{content:"";position:absolute;top:2px;bottom:2px;left:21px;width:3px;border-radius:2px;background:var(--lab-ink)}
.lab-knob{position:relative;width:28px;height:28px;border-radius:50%;background:var(--lab-ink);color:var(--lab-bg);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .1s}
.lab-knob svg{width:16px;height:16px}
.lab-cut.is-drag .lab-knob{transform:scale(1.15)}
.lab-legend{font-size:15px;color:var(--lab-muted);margin-top:4px;font-variant-numeric:tabular-nums;min-height:24px}
.lab-legend .is-good{color:var(--lab-ok)}
.lab-slide{height:52px;background:repeating-linear-gradient(to right,transparent 0 calc(100% / var(--units,12) - 1px),rgba(255,255,255,.08) 0 calc(100% / var(--units,12)))}
.lab-slidebar{position:absolute;top:8px;height:36px;border-radius:18px;border:0;cursor:grab;touch-action:none;font:inherit;font-size:14px;font-weight:650;color:var(--lab-accent-ink);transition:left .12s}
.lab-slidebar.is-drag{cursor:grabbing;box-shadow:0 0 0 3px var(--lab-accent)}
.lab-baseline{position:absolute;top:0;bottom:0;width:2px;background:var(--lab-ok);opacity:.7}

/* pecahan */
.lab-fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-family:var(--lab-math);line-height:1.05;margin:0 .12em;font-size:1.1em}
.lab-fr>span{padding:0 .2em}
.lab-fr>span+span{border-top:2px solid currentColor}
.lab-fr.is-xl{font-size:46px}
.lab-namebox{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px}
.lab-say{display:grid;gap:10px;font-size:16px;max-width:44ch}
.lab-say div{display:flex;gap:10px;align-items:baseline}
.lab-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;transform:translateY(1px)}
.lab-builder{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lab-stepper{display:flex;align-items:center;gap:6px}
.lab-step-btn,.lab-btn.lab-step{width:46px;padding:0;font-size:22px;justify-content:center}
.lab-stepper output{min-width:2.2ch;text-align:center;font-size:24px;font-variant-numeric:tabular-nums;font-weight:650}
.lab-stepper output.is-big{font-family:var(--lab-math);font-size:32px;font-weight:400}
.lab-fr-build{display:inline-grid;justify-items:center;gap:6px}
.lab-fr-build hr{width:100%;border:0;border-top:3px solid var(--lab-ink);margin:0}
.lab-unit{font-size:17px;color:var(--lab-muted)}
.lab-tag{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--lab-line);color:var(--lab-muted);white-space:nowrap}
.lab-tag.is-ok{border-color:var(--lab-ok);color:var(--lab-ok)}

/* benda */
.lab-field{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border-radius:12px;background:var(--lab-bg);min-height:72px;align-content:flex-start}
.lab-field.is-scatter{position:relative;display:block;height:180px}
.lab-field.is-scatter>*{position:absolute}
.lab-token{--tok:var(--lab-k1);width:40px;height:40px;border-radius:50%;background:var(--tok);display:inline-grid;place-items:center;font-weight:700;color:var(--lab-accent-ink);font-size:15px;border:0;padding:0;font-family:inherit;flex:0 0 auto;transition:transform .15s,opacity .2s}
button.lab-token{cursor:pointer}
button.lab-token:hover{transform:scale(1.08)}
.lab-token.is-dim{opacity:.28}
.lab-token.is-ring{background:transparent;box-shadow:inset 0 0 0 2px var(--tok);color:var(--lab-ink)}
.lab-token.is-crossed{position:relative;opacity:.4}
.lab-token.is-crossed::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:3px;background:var(--lab-bad);transform:rotate(-35deg)}
.lab-plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:12px}
.lab-plate{border:1px dashed var(--lab-line);border-radius:14px;padding:10px;min-height:96px;display:flex;flex-direction:column;gap:8px;background:transparent;color:var(--lab-ink);font:inherit;text-align:left;cursor:pointer}
.lab-plate[disabled]{cursor:default}
.lab-plate.is-target{border-style:solid;border-color:var(--lab-accent)}
.lab-plate .lab-plate-name{font-size:13px;color:var(--lab-muted)}
.lab-plate .lab-field{padding:0;background:none;min-height:0;gap:6px}
.lab-plate .lab-token{width:28px;height:28px;font-size:12px}
.lab-shape{display:block}
.lab-shape path,.lab-shape circle,.lab-shape rect{fill:currentColor}
.lab-pattern{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lab-slot{width:52px;height:52px;border-radius:10px;display:grid;place-items:center;background:var(--lab-bg);border:1px solid var(--lab-line);padding:0;font:inherit;color:var(--lab-muted)}
.lab-slot.is-empty{border-style:dashed}
.lab-slot.is-next{border-color:var(--lab-accent);border-style:solid;box-shadow:0 0 0 2px var(--lab-accent-soft)}
button.lab-slot{cursor:pointer}
.lab-slot.is-picked{background:var(--lab-accent-soft);border-color:var(--lab-accent)}
.lab-slot.is-unit{background:var(--lab-accent-soft)}
.lab-slot small{font-size:11px}
.lab-palette{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lab-palette .lab-btn{padding:6px 12px}

/* lidi */
.lab-bundles{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px}
.lab-place{background:var(--lab-bg);border-radius:12px;padding:10px;min-height:120px;min-width:0}
.lab-place-name{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lab-muted);margin-bottom:8px}
.lab-tens,.lab-ones{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.lab-ten{display:flex;gap:2px;padding:4px 5px;border-radius:6px;box-shadow:inset 0 -6px 0 -3px var(--lab-k2);background:none;border:0;font:inherit}
.lab-ten i{display:block;width:3px;height:62px;border-radius:2px;background:var(--lab-k2)}
.lab-one{width:12px;height:62px;padding:0;background:none;border:0;display:block;position:relative;flex:0 0 auto}
.lab-one::before{content:"";position:absolute;left:calc(50% - 1.5px);width:3px;top:0;bottom:0;border-radius:2px;background:var(--lab-k1)}
button.lab-one{width:26px;min-height:52px}
button.lab-one[disabled]{cursor:default;opacity:.55}
button.lab-ten,button.lab-one{cursor:pointer}
button.lab-ten:hover,button.lab-one:hover{filter:brightness(1.25)}
.lab-pile{display:flex;flex-wrap:wrap;gap:4px 6px;padding:12px;background:var(--lab-bg);border-radius:12px;min-height:84px}
.lab-pile .lab-one{height:48px}
.lab-digits{display:flex;gap:4px;font-family:var(--lab-math);font-size:56px;line-height:1}
.lab-digit{border:0;background:none;color:var(--lab-ink);font:inherit;padding:2px 10px;border-radius:10px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--lab-line)}
.lab-digit.is-on{background:var(--lab-accent-soft);box-shadow:inset 0 0 0 2px var(--lab-accent)}

/* pasangan, angka besar, kue, pola, ukur */
.lab-pairs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:10px}
.lab-pair{display:flex;flex-direction:column;align-items:center;gap:4px}
.lab-pair .lab-token{width:30px;height:30px}
.lab-pair-line{width:3px;height:22px;background:transparent;border-radius:2px}
.lab-pair-line.is-on{background:var(--lab-ok)}
.lab-bignum{font-family:var(--lab-math);font-size:48px;line-height:1;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.lab-frame.is-big{grid-template-columns:repeat(5,44px);grid-template-rows:repeat(2,44px)}
.lab-cookie{width:36px;height:36px;border-radius:50%;border:0;padding:0;background:var(--lab-k2);cursor:pointer;position:relative;box-shadow:inset 0 0 0 4px rgba(0,0,0,.12)}
.lab-cookie[disabled]{cursor:default}
.lab-cookie.is-crossed{opacity:.35}
.lab-cookie.is-crossed::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;background:var(--lab-bad);transform:rotate(-35deg)}
.lab-slot.is-wrong-slot{border-color:var(--lab-bad);background:var(--lab-bad-soft)}
.lab-pattern-nums{margin-top:2px}
.lab-pattern-nums .lab-slot{color:var(--lab-muted)}
.lab-ribbon{position:absolute;top:8px;left:0;height:30px;border-radius:4px}
.lab-unitpiece{position:absolute;top:50px;height:30px;border-radius:5px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--lab-accent-ink);margin-left:1px}

/* bingkai sepuluh */
.lab-frames{display:flex;flex-wrap:wrap;gap:12px}
.lab-frame{display:grid;grid-template-columns:repeat(5,34px);grid-template-rows:repeat(2,34px);gap:3px;padding:4px;background:var(--lab-line);border-radius:6px}
.lab-cell{background:var(--lab-bg);border-radius:3px;display:grid;place-items:center}
.lab-cell i{width:24px;height:24px;border-radius:50%;display:block;position:relative}
.lab-cell i.is-crossed{opacity:.35}
.lab-cell i.is-crossed::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;background:var(--lab-bad);transform:rotate(-35deg)}

/* garis bilangan */
.lab-line-wrap{overflow-x:auto}
.lab-line{display:block;width:100%;min-width:300px;height:auto}
.lab-axis{stroke:var(--lab-muted);stroke-width:2;fill:none}
.lab-tick{stroke:var(--lab-muted);stroke-width:1.5}
.lab-tick.is-whole{stroke:var(--lab-ink);stroke-width:2.5}
.lab-axis-text{fill:var(--lab-ink);font:600 17px system-ui,sans-serif}
.lab-hop{fill:none;stroke-width:2.5}
.lab-marker{stroke:var(--lab-bg);stroke-width:2}
.lab-marker-text{fill:var(--lab-ink);font:600 15px system-ui,sans-serif}

/* ringkasan Belajar */
.lab-overview{max-width:880px}
.lab-lesson{margin-top:36px}
.lab-lesson h2{margin:0 0 4px;font-size:22px}
.lab-lesson>p{margin:0 0 14px;color:var(--lab-muted);max-width:68ch}
.lab-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lab-item a{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--lab-line);border-radius:12px;background:var(--lab-panel);color:var(--lab-ink);text-decoration:none}
.lab-item a:hover{border-color:#5d8199;background:var(--lab-panel-2)}
.lab-item-top{display:flex;align-items:center;gap:10px}
.lab-num{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:650;background:var(--lab-accent-soft);color:var(--lab-ink)}
.lab-item.is-done .lab-num{background:var(--lab-ok-soft);color:var(--lab-ok)}
.lab-item-title{font-weight:650;line-height:1.3}
.lab-item-q{font-size:14px;color:var(--lab-muted);line-height:1.45}
.lab-item-state{margin-top:auto;font-size:12px;color:var(--lab-muted)}
.lab-item.is-done .lab-item-state{color:var(--lab-ok)}
.lab-item.is-started .lab-item-state{color:var(--lab-accent)}
.lab-resume{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--lab-panel);border:1px solid var(--lab-line)}
.lab-resume p{margin:0}
.lab-resume b{display:block}
@media(max-width:820px){.lab-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.lab-step:not(.is-on) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.lab-step+.lab-step::before{width:16px}.lab-axis-text{font-size:26px}.lab-marker-text{font-size:22px}.lab-list{grid-template-columns:minmax(0,1fr)}.lab-story{font-size:17px}.lab-ask{font-size:18px}.lab-fr.is-xl{font-size:40px}.lab-bundles{grid-template-columns:minmax(0,1fr)}.lab-frame{grid-template-columns:repeat(5,28px);grid-template-rows:repeat(2,28px)}.lab-cell i{width:20px;height:20px}.lab-digits{font-size:48px}.lab-slot{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.lab *{animation:none!important;transition:none!important}}