:root{
  color-scheme:light;
  --bg:#E9EFFF; --blob1:#BFD4FF; --blob2:#FFD9E8;
  --card:#FFFFFF; --card2:#F2F5FD;
  --ink:#101426; --ink2:#6C748C; --hair:rgba(16,20,38,.09);
  --line:#141A2E; --dot:#3B6BFF; --hot:#F0453A; --go:#12A150; --gold:#E5A100;
  --key:#FFFFFF; --keyink:#101426;
  --shadow:0 1px 2px rgba(20,30,70,.06), 0 10px 26px rgba(20,30,70,.09);
  --keyshadow:0 1px 1px rgba(20,30,70,.05), 0 3px 8px rgba(20,30,70,.10);
  --r:24px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080B14; --blob1:#1B2C57; --blob2:#3A1E38;
  --card:#141A2A; --card2:#1C2436;
  --ink:#EEF1F8; --ink2:#8F98AF; --hair:rgba(238,241,248,.12);
  --line:#EEF1F8; --dot:#7CA0FF; --hot:#FF6A5E; --go:#3DD68C; --gold:#F4C64D;
  --key:#222B41; --keyink:#EEF1F8;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  --keyshadow:0 1px 2px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg)}
html[data-theme="light"] body{background:linear-gradient(180deg,#8FC4FF 0px,#C5E2FF 150px,var(--bg) 330px)}
html[data-theme="dark"] body{background:linear-gradient(180deg,#0B1130 0px,#182252 150px,var(--bg) 330px)}
body{
  min-height:100vh; color:var(--ink); position:relative; overflow-x:hidden;
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
  font-weight:700; -webkit-font-smoothing:antialiased;
  padding:calc(96px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom));
  transition:background .35s ease,color .35s ease;
}
body::after{
  content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none;
  transition:background .35s ease;
}
body::after{width:62vw;height:62vw;max-width:380px;max-height:380px;bottom:-16vw;left:-20vw;background:var(--blob2);opacity:.6}
.wrap{max-width:520px;margin:0 auto;position:relative}

/* ---- full-bleed animated sky ---- */
.skybg{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:300px;z-index:0;overflow:hidden;pointer-events:none}
.skybg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 42%,var(--bg) 100%)}
.sky{position:absolute;inset:0;width:100%;height:100%}
.day{display:block}
.night{display:none}
html[data-theme="dark"] .day{display:none}
html[data-theme="dark"] .night{display:block}

/* sun / moon are the theme switch */
.orb{pointer-events:auto;cursor:pointer}
.orb .hit{fill:transparent}
.orb:active .orbart{transform:scale(.9)}
.orbart{transform-box:fill-box;transform-origin:center;transition:transform .18s ease}

header{position:relative;z-index:2;display:flex;align-items:center;gap:13px;
  width:100%;margin:0 0 18px;padding:0 2px}
.mark{width:52px;height:52px;border-radius:17px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#4E7BFF,#2E4CE0);box-shadow:0 6px 16px rgba(20,40,110,.42);
  transition:background .5s ease}
html[data-theme="dark"] .mark{background:linear-gradient(150deg,#2B3B86,#151E4C)}
h1{font-size:26px;font-weight:900;letter-spacing:-.7px;margin:0;line-height:1;
  color:#0E2246;text-shadow:0 1px 0 rgba(255,255,255,.4);transition:color .4s ease}
.sub{font-size:12.5px;font-weight:800;margin-top:4px;color:#2F4E86;transition:color .4s ease}
html[data-theme="dark"] h1{color:#EFF3FF;text-shadow:0 1px 6px rgba(0,0,0,.5)}
html[data-theme="dark"] .sub{color:#A8B6E0}
.statchip{margin-left:auto;background:rgba(255,255,255,.92);color:#2F4E86;border:0;border-radius:999px;
  padding:10px 14px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;
  box-shadow:0 3px 10px rgba(20,40,110,.22);
  display:none;align-items:center;gap:5px;transition:transform .1s}
html[data-theme="dark"] .statchip{background:rgba(38,50,105,.9);color:#D6DFFF}
.statchip:active{transform:scale(.93)}

/* ---- sky motion (slow, low-cost, transform-only) ---- */
@keyframes drift{from{transform:translateX(-190px)}to{transform:translateX(490px)}}
@keyframes glide{
  0%{transform:translateX(-160px);opacity:0}
  5%{opacity:1}
  34%{transform:translateX(470px);opacity:1}
  39%{transform:translateX(510px);opacity:0}
  100%{transform:translateX(510px);opacity:0}
}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
@keyframes twinkle{0%,100%{opacity:.18}50%{opacity:1}}
@keyframes spinrays{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sunpulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes shoot{0%{transform:translate(0,0);opacity:0}
  3%{opacity:1}12%{transform:translate(-150px,86px);opacity:0}100%{opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes leaffall{
  0%{transform:translate(-70px,0) rotate(-25deg);opacity:0}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{transform:translate(480px,46px) rotate(315deg);opacity:0}
}
@keyframes fire{
  0%,100%{opacity:0;transform:translate(0,0)}
  22%{opacity:.95}
  50%{opacity:.25;transform:translate(14px,-12px)}
  76%{opacity:.9;transform:translate(5px,-22px)}
}

.cloud{animation:drift linear infinite;will-change:transform}
.flock{animation:glide linear infinite}
.bird{transform-box:fill-box;transform-origin:center;animation:flap .5s ease-in-out infinite}
.star{animation:twinkle ease-in-out infinite}
.rays{transform-box:fill-box;transform-origin:center;animation:spinrays 90s linear infinite}
.sunhalo{transform-box:fill-box;transform-origin:center;animation:sunpulse 9s ease-in-out infinite}
.shooter{animation:shoot 34s ease-in infinite}
.moonbob{transform-box:fill-box;transform-origin:center;animation:bob 7s ease-in-out infinite}
.leaf{transform-box:fill-box;transform-origin:center;animation:leaffall linear infinite}
.fly{transform-box:fill-box;transform-origin:center;animation:fire ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .cloud,.flock,.bird,.star,.rays,.sunhalo,.shooter,.moonbob,.leaf,.fly{animation:none!important}
}

.view{display:block}
.view[hidden]{display:none}

.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--card2);padding:6px;border-radius:19px;margin-bottom:18px}
.seg.seg3{grid-template-columns:1fr 1fr 1fr}
.seg button{border:0;background:transparent;color:var(--ink2);font:inherit;font-size:16px;font-weight:800;
  padding:13px 6px;border-radius:14px;cursor:pointer;transition:.2s}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(20,30,70,.14)}
html[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--key)}

.slots{display:flex;align-items:center;gap:10px}
.slot{flex:1;background:var(--card2);border:2.5px solid transparent;border-radius:20px;padding:12px 10px 14px;
  text-align:center;cursor:pointer;transition:.2s;min-width:0}
.slot[aria-selected="true"]{border-color:var(--dot);background:var(--card);box-shadow:0 0 0 4px rgba(59,107,255,.14)}
.slot .lbl{font-size:10.5px;color:var(--ink2);font-weight:800;letter-spacing:.7px;text-transform:uppercase}
.slot .val{font-size:34px;font-weight:900;letter-spacing:-1.4px;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.slot .val.ghost{color:var(--ink2);opacity:.32}
.op{font-size:26px;font-weight:900;color:var(--ink2);flex:none;width:22px;text-align:center}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.pad button{border:0;background:var(--key);color:var(--keyink);border-radius:19px;padding:17px 0;
  font:inherit;font-size:26px;font-weight:800;box-shadow:var(--keyshadow);cursor:pointer;transition:transform .08s,filter .12s}
.pad button:active{transform:scale(.92);filter:brightness(.96)}
.pad .util{font-size:18px;color:var(--ink2)}
.pad .go{grid-column:1/-1;background:linear-gradient(150deg,#4E7BFF,#2E4CE0);color:#fff;font-size:19px;
  font-weight:900;padding:19px 0;box-shadow:0 6px 18px rgba(46,76,224,.42)}

.hint{font-size:13px;color:var(--ink2);text-align:center;margin:14px 2px 0;font-weight:700;line-height:1.5}
.egs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.eg{border:0;background:var(--card2);color:var(--ink2);font:inherit;font-size:13px;font-weight:800;
  padding:9px 14px;border-radius:999px;cursor:pointer;transition:transform .08s}
.eg:active{transform:scale(.93)}

.answer{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.answer .q{font-size:15px;color:var(--ink2);font-weight:800}
.answer .a{font-size:33px;font-weight:900;color:var(--go);letter-spacing:-1px;line-height:1}

.paper{background:var(--card2);border-radius:18px;padding:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.board{display:block;width:100%;height:auto;min-width:250px}

.tbl{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.tbl caption{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink2);padding-bottom:9px}
.tbl th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink2);padding:0 0 7px}
.tbl td{padding:8px 0;border-top:1px solid var(--hair);font-weight:800}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tbl tr.sum td{border-top:2px solid var(--hair);font-weight:900;font-size:16px}
.sw{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:8px;vertical-align:-1px}

.note{font-size:13.5px;color:var(--ink2);line-height:1.6;font-weight:700;margin:0}
.sectiontitle{font-size:22px;font-weight:900;letter-spacing:-.4px;margin:4px 4px 14px}

/* ---- stepper / free draw controls ---- */
/* ---- colour palette (rumah angka picker) ---- */
.palette{display:flex;gap:7px;margin-bottom:11px;flex-wrap:wrap}
.pchip{flex:1;min-width:64px;border:2.5px solid transparent;background:var(--card2);border-radius:15px;
  padding:9px 6px 8px;font:inherit;cursor:pointer;transition:.18s;display:flex;
  flex-direction:column;align-items:center;gap:5px}
.pchip .pdot{width:20px;height:20px;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.pchip .pname{font-size:11.5px;font-weight:800;color:var(--ink2);letter-spacing:.2px}
.pchip .pval{font-size:9.5px;font-weight:800;color:var(--ink2);opacity:.65}
.pchip[aria-pressed="true"]{background:var(--card);box-shadow:0 2px 8px rgba(20,30,70,.16)}
.pchip[aria-pressed="true"] .pname{color:var(--ink)}
.pchip:active{transform:scale(.94)}
.zerochip{width:100%;border:2.5px dashed var(--hair);background:transparent;border-radius:15px;
  padding:10px 12px;font:inherit;font-size:13px;font-weight:800;color:var(--ink2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:11px;transition:.18s}
.zerochip[aria-pressed="true"]{border-style:dashed;border-color:var(--dot);color:var(--ink);
  background:var(--card2)}
.zerochip:active{transform:scale(.97)}
.zerochip .zline{width:26px;height:0;border-top:3px dashed currentColor;border-radius:2px}

.drawzone{position:relative;width:100%;aspect-ratio:1/1;background:var(--card2);border-radius:20px;
  overflow:hidden;touch-action:none;box-shadow:inset 0 0 0 2px var(--hair)}
.drawzone{overscroll-behavior:contain}
.drawzone.locked{box-shadow:inset 0 0 0 3px var(--dot)}
.lockbtn{width:100%;border:2.5px dashed var(--hair);background:transparent;border-radius:15px;
  padding:11px 12px;font:inherit;font-size:13px;font-weight:800;color:var(--ink2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:11px;transition:.18s}
.lockbtn[aria-pressed="true"]{border-style:solid;border-color:var(--dot);color:var(--dot);background:var(--card2)}
.lockbtn:active{transform:scale(.97)}
body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
.drawzone canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none}
.drawzone svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.stepper-row{display:flex;gap:10px;margin-bottom:4px}
.stepper{flex:1;background:var(--card2);border-radius:18px;padding:13px 10px;text-align:center}
.stepper-lbl{font-size:10.5px;color:var(--ink2);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.stepper-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:9px}
.step{width:38px;height:38px;border-radius:12px;border:0;background:var(--card);box-shadow:var(--keyshadow);
  font-size:19px;font-weight:900;color:var(--ink);cursor:pointer;transition:transform .08s}
.step:active{transform:scale(.86)}
.stepper-val{font-size:26px;font-weight:900;min-width:28px}

.bigtap{width:100%;border:0;border-radius:18px;padding:16px;background:linear-gradient(150deg,#4E7BFF,#2E4CE0);
  color:#fff;font:inherit;font-size:16.5px;font-weight:900;margin-top:14px;box-shadow:0 6px 16px rgba(46,76,224,.35);
  cursor:pointer;transition:transform .08s}
.bigtap:active{transform:scale(.97)}
.bigtap:disabled{opacity:.45;box-shadow:none}
.ghostbtn{width:100%;border:0;border-radius:16px;padding:12px;background:var(--card2);color:var(--ink2);
  font:inherit;font-weight:800;font-size:13.5px;margin-top:8px;cursor:pointer;transition:transform .08s}
.ghostbtn:active{transform:scale(.97)}
.ghostbtn.hot{color:var(--hot)}

/* ---- history ---- */
.histrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:18px;padding:13px 14px;
  margin-bottom:9px;box-shadow:var(--shadow)}
.histbadge{width:38px;height:38px;border-radius:12px;background:var(--card2);display:grid;place-items:center;
  flex:none;font-size:17px}
.histmain{flex:1;min-width:0}
.histeq{font-size:15px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.histtime{font-size:11.5px;color:var(--ink2);font-weight:700;margin-top:2px}
.histdel{border:0;background:transparent;color:var(--ink2);font-size:15px;font-weight:900;cursor:pointer;
  width:30px;height:30px;border-radius:10px;flex:none}
.histdel:active{background:var(--card2)}
.toprow{display:flex;align-items:center;justify-content:space-between;margin:4px 4px 14px}
.toprow .sectiontitle{margin:0}
.linkbtn{border:0;background:transparent;color:var(--hot);font:inherit;font-size:13px;font-weight:800;cursor:pointer}

.empty{text-align:center;padding:50px 20px;color:var(--ink2)}
.empty svg{opacity:.35;margin-bottom:14px}
.empty p{font-size:14px;font-weight:700;line-height:1.6;margin:0}

/* ---- settings ---- */
.setgrp{margin-bottom:20px}
.setgrp h3{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2);margin:0 0 8px 4px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);
  border-radius:18px;padding:15px 16px;margin-bottom:9px;box-shadow:var(--shadow)}
.setrow .lab{font-size:15px;font-weight:800}
.setrow .desc{font-size:11.5px;color:var(--ink2);font-weight:700;margin-top:3px;line-height:1.4}
.switch{position:relative;width:50px;height:30px;border-radius:999px;background:var(--card2);border:0;
  cursor:pointer;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch[aria-checked="true"]{background:var(--dot)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.aboutcard p{font-size:13.5px;line-height:1.65;color:var(--ink2);font-weight:700;margin:0 0 10px}
.aboutcard .credit{font-size:13.5px;color:var(--ink);font-weight:800}
.ver{text-align:center;font-size:11.5px;color:var(--ink2);font-weight:700;opacity:.7;margin-top:6px}

/* ---- bottom tab bar ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);
  box-shadow:0 -2px 20px rgba(20,30,70,.10);border-top:1px solid var(--hair)}
.tabbar-inner{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.tabbtn{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px;color:var(--ink2);font:inherit;font-size:10.5px;font-weight:800;cursor:pointer;
  border-radius:14px;transition:color .15s,transform .1s}
.tabbtn svg{width:23px;height:23px}
.tabbtn[aria-selected="true"]{color:var(--dot)}
.tabbtn:active{transform:scale(.9)}

.gline{stroke:var(--line);stroke-width:3;stroke-linecap:round}
.gline.zero{stroke-dasharray:7 7}
.cell{opacity:.42}
.hlabel{fill:var(--ink2);font-size:11px;font-weight:800;letter-spacing:.4px;
  paint-order:stroke;stroke:var(--card2);stroke-width:3.5;stroke-linejoin:round}
.dlabel{fill:var(--ink);font-size:20px;font-weight:900}
.arrow{stroke:var(--dot);stroke-width:2.5;stroke-linecap:round;fill:none}
.blabel{fill:var(--dot);font-size:13px;font-weight:900}
.rlabel{fill:var(--hot);font-size:12px;font-weight:800;
  paint-order:stroke;stroke:var(--card2);stroke-width:3.5;stroke-linejoin:round}
.dot{fill:var(--dot)}
.dot.rest{fill:var(--hot)}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.anim-line{animation:draw .42s ease forwards;animation-delay:var(--d)}
.anim-dot{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .3s cubic-bezier(.34,1.6,.5,1) forwards;animation-delay:var(--d)}
.anim-fade{opacity:0;animation:fade .3s ease forwards;animation-delay:var(--d)}
@media (prefers-reduced-motion:reduce){
  .anim-line,.anim-dot,.anim-fade{animation:none!important;stroke-dashoffset:0!important;transform:none!important;opacity:1!important}
}

/* ---- kisah (story) view ---- */
.kback{border:0;background:var(--card2);color:var(--ink2);font:inherit;font-size:13px;font-weight:800;
  padding:9px 15px;border-radius:999px;cursor:pointer;margin:0 4px 14px;transition:transform .08s}
.kback:active{transform:scale(.94)}
.khero{text-align:center;padding:22px 18px}
.khero img{width:150px;height:auto;display:block;margin:0 auto 12px;border-radius:12px}
.khero .kacr{font-size:13.5px;font-weight:800;color:var(--ink2);line-height:1.7;margin:0}
.khero .kacr b{color:var(--dot)}
.kcard-h{font-size:17px;font-weight:900;letter-spacing:-.2px;margin:0 0 12px;color:var(--ink)}
.kfig{margin:0 0 14px}
.kfig img{width:100%;height:auto;display:block;border-radius:16px;background:var(--card2)}
.kfig figcaption{font-size:12px;color:var(--ink2);font-weight:700;line-height:1.5;margin-top:8px;padding:0 2px}
.ktl{list-style:none;margin:0;padding:2px 0 0 24px;position:relative}
.ktl::before{content:"";position:absolute;left:5px;top:8px;bottom:12px;width:2px;background:var(--hair)}
.ktl li{position:relative;padding-bottom:16px}
.ktl li:last-child{padding-bottom:0}
.ktl li::before{content:"";position:absolute;left:-24px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--dot);box-shadow:0 0 0 3px var(--card)}
.kyear{font-size:12.5px;font-weight:900;color:var(--dot);letter-spacing:.3px}
.ktxt{font-size:13.5px;font-weight:700;color:var(--ink2);line-height:1.55;margin-top:2px}
.kawards{list-style:none;margin:0;padding:0}
.kawards li{font-size:13.5px;font-weight:700;color:var(--ink2);line-height:1.5;
  padding:9px 0;border-top:1px solid var(--hair)}
.kawards li:first-child{border-top:0;padding-top:0}
.ksrc{font-size:12px;color:var(--ink2);font-weight:700;opacity:.75;line-height:1.6;
  text-align:center;margin:0 6px 4px}