@font-face{font-family:'Baloo 2';font-weight:700;font-display:swap;src:url(fonts/baloo-2-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:600;font-display:swap;src:url(fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format('woff2')}
:root{--ink:#2B2238;--sub:#5B5470;--bg:#FFF8EE;--c:#3730A3;--soft:#E0E7FF;--acc:#F08A24;--ok:#1E9E57;--bad:#E5383B;--line:#E4DDEE;--card:#fff}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-weight:700;line-height:1.5;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
.wrap{max-width:860px;margin:0 auto;padding:0 16px 56px}
.wide{max-width:1120px}
/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,248,238,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1.5px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:8px;padding-top:9px;padding-bottom:9px;flex-wrap:nowrap}
.backlink{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:'Baloo 2';font-weight:800;font-size:15px;color:var(--ink);padding:4px 10px 4px 6px;border-radius:99px;border:2px solid var(--line);background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.backlink svg{width:18px;height:18px;flex:none}
.pill{display:inline-block;font-family:'Baloo 2';font-weight:800;font-size:12px;letter-spacing:.06em;color:#fff;background:var(--c);border-radius:99px;padding:3px 12px;line-height:1.5;white-space:nowrap}
.pill.dark{background:var(--ink)}
.sp{flex:1}
.stars{display:flex;align-items:center;gap:5px;font-family:'Baloo 2';font-weight:800;font-size:15px;background:#fff;border:2px solid var(--line);border-radius:99px;padding:2px 11px 2px 6px;white-space:nowrap}
.stars svg{width:21px;height:21px}
.stars.bump{animation:bump .6s}
@keyframes bump{40%{transform:scale(1.25)}}
.lng{display:flex;border:2px solid var(--line);border-radius:99px;background:#fff;padding:2px}
.lng a{font-family:'Baloo 2';font-weight:800;font-size:13px;text-decoration:none;padding:2px 9px;border-radius:99px;color:var(--sub)}
.lng a[aria-current="true"]{background:var(--ink);color:#fff}
/* ---------- type ---------- */
h1{font-family:'Baloo 2';font-weight:800;font-size:clamp(32px,7vw,50px);line-height:1.02;margin:16px 0 6px;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--c)}
h2{font-family:'Baloo 2';font-weight:800;font-size:clamp(24px,5vw,32px);line-height:1.08;margin:0}
h3{font-family:'Baloo 2';font-weight:800;font-size:20px;line-height:1.15;margin:0}
.lead{color:var(--sub);font-size:16px;margin:0 0 6px}
.jt{text-align:justify;hyphens:manual;-webkit-hyphens:manual}
.tabline{display:inline-flex;align-items:center;gap:8px;font-family:'Baloo 2';font-weight:800;font-size:13px;letter-spacing:.07em;color:#fff;background:var(--c);border-radius:99px;padding:3px 14px;margin-top:18px}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:'Baloo 2';font-weight:800;font-size:12px;letter-spacing:.05em;color:var(--c);border:2px solid var(--c);border-radius:99px;padding:1px 10px;background:#fff;line-height:1.5}
.part{display:flex;align-items:center;gap:12px;margin:34px 0 4px}
.part::before,.part::after{content:"";height:3px;flex:1;border-radius:3px;background:repeating-linear-gradient(90deg,var(--c) 0 10px,transparent 10px 18px);opacity:.45}
.part span{font-size:26px}
.sec-h{margin-top:30px}
.sec-h h2{margin-top:6px}
/* ---------- cards ---------- */
.card{background:var(--card);border-radius:22px;border:2px solid var(--line);padding:16px;margin-top:18px;box-shadow:0 4px 0 rgba(43,34,56,.07)}
.btn{font-family:'Baloo 2';font-weight:800;font-size:15.5px;border:0;border-radius:99px;padding:9px 18px;background:var(--c);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 3px 0 rgba(0,0,0,.18);transition:transform .15s;text-decoration:none;line-height:1.2}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn.ghost{background:#fff;color:var(--c);border:2px solid var(--c);box-shadow:none}
.btn.on{background:var(--acc)}
.btn.sm{font-size:13.5px;padding:6px 13px}
.btn svg{width:18px;height:18px;flex:none}
.btn:disabled{opacity:.75;cursor:default}
/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:center;margin-top:12px}
.hero .art{border-radius:24px;overflow:hidden}
.hero .art svg{width:100%!important;height:auto!important;display:block}
@keyframes float{50%{transform:translateY(-6px) rotate(-.4deg)}}
@media(max-width:640px){.hero{grid-template-columns:1fr}}
.talk{display:grid;gap:12px}
.bub{display:flex;align-items:flex-end;gap:8px;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.bub.show{opacity:1;transform:none}
.bub .t{background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:10px 14px;font-weight:800;font-size:16px;line-height:1.4;flex:1}
.bub.r{flex-direction:row-reverse}
.bub.r .kid{transform:scaleX(-1)}
.bub.say .t{text-align:center}
.kid{width:58px!important;height:auto;flex:none;display:block}
.bub.big .kid{width:76px!important}
/* ---------- inti ---------- */
.inti{margin-top:18px;border-left:6px solid var(--c)}
.inti .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inti .txt{font-size:clamp(18px,3vw,21px);line-height:1.62;margin:10px 0 0}
.inti .txt b{color:var(--c)}
/* ---------- row ---------- */
.row{display:flex;gap:16px;align-items:stretch;margin-top:18px}
.row>.cell{flex:var(--f,1);min-width:0;display:flex;flex-direction:column}
.row>.cell>*{margin-top:0!important;flex:1}
.col{display:grid;gap:16px;align-content:start}
.col>*{margin-top:0!important}
@media(max-width:700px){.row{flex-direction:column}}
/* ---------- wow ---------- */
.wow{background:linear-gradient(160deg,#7B5CFF,#5B3FE0);color:#fff;border-radius:22px;padding:16px 18px;transform:rotate(-1.2deg);margin-top:18px;box-shadow:0 5px 0 rgba(43,34,56,.15)}
.wow .k{font-family:'Baloo 2';font-weight:800;font-size:14px;letter-spacing:.06em;opacity:.92;display:flex;align-items:center;gap:6px}
.wow .n{font-family:'Baloo 2';font-weight:800;font-size:clamp(38px,8vw,56px);line-height:1.05;color:#FFE27A;margin:4px 0 6px;word-break:break-word}
.wow .n.pop{animation:pop .6s cubic-bezier(.3,1.8,.5,1)}
.wow p{margin:0;font-size:16px;line-height:1.45}
.wow p b{color:#FFE27A}
/* ---------- flip (tahu): dibalik tanpa 3D agar aman di semua HP & tablet ---------- */
.flip{margin-top:18px;cursor:pointer;outline:none;display:flex;flex-direction:column}
.flip .in{flex:1;display:flex;flex-direction:column;transition:transform .22s ease-in,opacity .22s;transform-origin:50% 50%}
.flip.turn .in{transform:perspective(900px) rotateY(88deg);opacity:.4}
.flip .f{flex:1;border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;min-height:150px}
.flip .ff{background:#FFF6D8;border:2.5px solid #F5C542;align-items:flex-start}
.flip .fb{background:#E6F7EE;border:2.5px solid #2FAE60;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.flip .h{font-family:'Baloo 2';font-weight:800;color:#C77700;font-size:19px;display:flex;align-items:center;gap:8px}
.flip .h svg{width:30px;height:30px;flex:none}
.flip .fb .h{color:#178A4D;font-size:15px;letter-spacing:.04em}
.flip .tap{font-size:14px;color:var(--sub);display:flex;align-items:center;gap:6px;margin-top:6px}
.flip .tap::before{content:"";width:10px;height:10px;border-radius:50%;background:#F5C542;animation:blink 1.2s infinite;flex:none}
.flip .fb p{margin:6px 0 0;font-size:17px;line-height:1.55;font-weight:700}
.flip .fbw{display:flex;gap:14px;align-items:center}
.flip .fbw .ta{flex:none;width:96px;height:96px;background:#fff;border-radius:18px;padding:6px;box-shadow:0 3px 0 rgba(23,138,77,.15)}
.flip .fbw .ta svg{width:100%;height:100%;display:block}
.flip .fbw .tx{flex:1;min-width:0}
@media(max-width:400px){.flip .fbw .ta{width:72px;height:72px;border-radius:14px}.flip .fbw{gap:10px}}
.flip .fb .again{margin-top:10px;font-size:13px;color:#178A4D;opacity:.8}
.flip .q{font-size:clamp(19px,4.6vw,22px);font-weight:800;margin:4px 0 0;line-height:1.25}
.flip:focus-visible .f{outline:3px solid var(--acc);outline-offset:2px}
@keyframes blink{50%{opacity:.2}}
/* ---------- dekat ---------- */
.dekat{background:#fff;border:2px solid var(--line);border-radius:22px;padding:14px;margin-top:18px;box-shadow:0 4px 0 rgba(43,34,56,.07)}
.dekat .bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dekat .bar .badge{color:#1F2A44;border-color:#1F2A44}
.dekat .bar .sp{min-width:4px}
.dekat .pic{position:relative;cursor:zoom-in}
.dekat .pic svg{width:100%!important;height:auto!important;display:block;max-height:78vh}
.dekat .cap{font-size:14.5px;color:var(--sub);margin:8px 2px 0;line-height:1.45}
.dekat .gh{font-size:14px;color:var(--c);margin:8px 2px 0;display:none}
.dekat.guess .gh{display:block}
.dekat.guess .pic{cursor:default}
.qbox{cursor:pointer}
.qbox.pick rect{stroke:#FFC83D;stroke-width:3}
.qbox.hot{animation:qhot .7s ease-in-out infinite}
@keyframes qhot{50%{opacity:.35}}
.dekat .lg{margin-top:6px;border-top:2px dashed var(--line);padding-top:8px}
.dekat .lg .gh{display:block;margin-top:0}
.dekat .lg .chips{margin-top:8px}
.dekat .g{background:var(--acc)}
.qbox rect{transition:opacity .3s}
.qbox:hover rect{opacity:.85}
.revealed{animation:popsvg .5s}
@keyframes popsvg{0%{opacity:0}100%{opacity:1}}
/* ---------- zoom modal ---------- */
.zoom{position:fixed;inset:0;z-index:80;background:rgba(20,16,32,.88);display:flex;flex-direction:column}
.zoom .zb{display:flex;gap:8px;padding:10px;justify-content:flex-end}
.zoom .zb button{font-family:'Baloo 2';font-weight:800;border:0;border-radius:12px;background:#fff;color:var(--ink);padding:7px 14px;cursor:pointer;font-size:15px}
.zoom .zc{flex:1;overflow:auto;padding:10px;-webkit-overflow-scrolling:touch}
.zoom .zc>div{background:#fff;border-radius:18px;padding:12px;margin:0 auto;width:min(1100px,100%)}
.zoom .zc svg{width:100%!important;height:auto!important;display:block}
/* ---------- dalam & coba ---------- */
details.dalam{margin-top:18px;border:2.5px dashed #5B8DEF;border-radius:20px;background:#EEF4FF;padding:2px 16px}
details.dalam summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 0;font-family:'Baloo 2';font-weight:800;font-size:19px;color:#2F5BD3;flex-wrap:wrap}
details.dalam summary::-webkit-details-marker{display:none}
details.dalam summary .ch{margin-left:auto;transition:transform .3s;font-size:18px}
details.dalam[open] summary .ch{transform:rotate(180deg)}
details.dalam .badge{color:#2F5BD3;border-color:#2F5BD3}
.body{font-size:16.5px;line-height:1.6}
.body p{margin:0 0 10px}
.body svg{max-width:100%;height:auto}
details.dalam .body{padding-bottom:12px}
.body p[style*="font-size"],.body div[style*="font-size"],.body span[style*="font-size"],.body li[style*="font-size"],.flip p [style*="font-size"]{font-size:inherit!important}
.coba{margin-top:18px;border:2.5px solid #2FAE60;background:#E9F8EF;border-radius:20px;padding:14px 16px}
.coba h3{color:#178A4D;display:flex;align-items:center;gap:8px}
.coba h3 svg{width:26px;height:26px;flex:none}
.coba .body{margin:8px 0 12px}
.coba .btn{background:#2FAE60}
.body .steps{display:grid;gap:7px;margin:4px 0 0}
.body .steps div{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.body .steps b.n{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid currentColor;font-family:'Baloo 2';font-weight:800;font-size:13px;margin-top:2px}
.tbl{width:100%;border-collapse:separate;border-spacing:0 5px;font-size:15.5px;font-weight:700}
.tbl td{background:#fff;padding:6px 11px}
.tbl td:first-child{border-radius:10px 0 0 10px}.tbl td:last-child{border-radius:0 10px 10px 0;text-align:right;color:#8A8399}
/* ---------- jaga ---------- */
.jaga{margin-top:18px;border-radius:20px;padding:14px 16px;background:var(--soft)}
.jaga h3{color:var(--c)}
.jaga .tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:10px}
.jaga .tip{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid transparent;border-radius:14px;padding:10px 12px;cursor:pointer;text-align:left;font-weight:700;font-size:15px;line-height:1.35}
.jaga .tip i{flex:none;width:24px;height:24px;border-radius:8px;border:2.5px solid var(--c);display:grid;place-items:center;transition:background .2s}
.jaga .tip.on{border-color:var(--c)}
.jaga .tip.on i{background:var(--c)}
.jaga .tip.on i::after{content:"";width:10px;height:6px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.jaga .note{font-size:13.5px;color:var(--sub);margin-top:8px}
/* ---------- raw ---------- */
.raw{margin-top:18px;overflow-x:auto}
.raw svg{max-width:100%;height:auto}
.raw .box{border-radius:18px;padding:12px 14px}
.raw .box .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.raw p{margin:0 0 6px}
.artb{margin:18px auto 0;max-width:620px}
.artb svg{width:100%!important;height:auto!important;display:block}
.say1{margin-top:18px}
/* ---------- quiz ---------- */
.quiz{margin-top:24px}
.quiz .badge{color:var(--acc);border-color:var(--acc)}
.qq{border:2px solid var(--line);border-radius:18px;padding:12px 14px;margin-top:12px;background:#fff}
.qq .qt{font-weight:800;font-size:17px;display:flex;gap:10px;line-height:1.4}
.qq .qn{flex:none;width:28px;height:28px;border-radius:9px;background:var(--acc);color:#fff;font-family:'Baloo 2';display:grid;place-items:center}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-left:38px}
.opt{font-weight:800;font-size:15.5px;border:2px solid var(--line);background:#fff;border-radius:99px;padding:6px 14px 6px 6px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink);text-align:left;line-height:1.3}
.opt .l{flex:none;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-family:'Baloo 2';font-size:13px}
.opt:hover:not(:disabled){border-color:var(--acc)}
.opt.right{border-color:var(--ok);background:#E7F8EE}.opt.right .l{background:var(--ok)}
.opt.wrong{border-color:var(--bad);background:#FFECEC;animation:shake .45s}.opt.wrong .l{background:var(--bad)}
.opt:disabled{cursor:default}
.ex{padding-left:38px;margin-top:8px;font-size:15px;display:none}
.ex.show{display:block;animation:pop .4s}
.score{margin-top:14px;text-align:center;display:none}
.score.show{display:block;animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
.score .big{font-family:'Baloo 2';font-weight:800;font-size:30px;color:var(--c)}
@media(max-width:480px){.opts,.ex{padding-left:0}}
@keyframes pop{0%{transform:scale(.7)}100%{transform:none}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* ---------- chapter nav ---------- */
.cnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.cnav a{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 14px;box-shadow:0 4px 0 rgba(43,34,56,.07)}
.cnav a small{color:var(--sub);font-size:13px}
.cnav a b{font-family:'Baloo 2';font-weight:800;font-size:18px;line-height:1.15;color:var(--c)}
.cnav a.nx{text-align:right;grid-column:2}
.foot{margin-top:32px;text-align:center;font-size:13px;color:var(--sub)}
/* ---------- library ---------- */
.libhead{padding:26px 0 6px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
.libhead h1{margin:6px 0 4px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:18px}
.bk{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 5px 0 rgba(43,34,56,.08);transition:transform .25s}
.bk:hover{transform:translateY(-4px) rotate(-.4deg)}
.bk .cv{display:block;background:var(--c);position:relative;aspect-ratio:4/3;overflow:hidden}
.bk .cv svg{position:absolute;inset:6% 8%;width:84%!important;height:88%!important}
.bk .cv .no{position:absolute;left:12px;top:10px;font-family:'Baloo 2';font-weight:800;font-size:12px;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.22);border-radius:99px;padding:2px 10px}
.bk .meta{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.bk .meta b{font-family:'Baloo 2';font-weight:800;font-size:20px;line-height:1.1}
.bk .meta small{color:var(--sub);font-size:13.5px;line-height:1.35;flex:1}
.bk .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.bk .prog{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:4px}
.bk .prog svg{width:16px;height:16px}
/* ---------- book home ---------- */
.cover{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;align-items:center;margin-top:16px;background:var(--c);color:#fff;border-radius:28px;padding:22px;box-shadow:0 6px 0 rgba(43,34,56,.15);position:relative;overflow:hidden}
.cover .art svg{width:100%!important;height:auto!important;display:block}
.cover h1{color:#fff;margin:6px 0 6px}
.cover p{margin:0 0 14px;font-size:17px;opacity:.95}
.cover .pill{background:rgba(0,0,0,.25)}
.cover .btn{background:#fff;color:var(--ink)}
.cover .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.cover .acts{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:700px){.cover{grid-template-columns:1fr;padding:18px}}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
.chc{display:flex;gap:12px;align-items:center;text-decoration:none;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px;box-shadow:0 3px 0 rgba(43,34,56,.06);transition:transform .2s,border-color .2s}
.chc:hover{transform:translateY(-2px);border-color:var(--cc)}
.chc .num{flex:none;width:44px;height:44px;border-radius:14px;background:var(--cc);color:#fff;display:grid;place-items:center;font-family:'Baloo 2';font-weight:800;font-size:20px}
.chc b{display:block;font-family:'Baloo 2';font-weight:800;font-size:17px;line-height:1.15}
.chc .st{display:flex;gap:2px;margin-top:3px}
.chc .st i{width:13px;height:13px;border-radius:50%;background:#EEE9F4}
.chc .st i.on{background:#FFC83D;box-shadow:0 0 0 1.5px #E0A100 inset}
.extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.extra a{display:flex;gap:12px;align-items:center;text-decoration:none;border-radius:18px;padding:14px;color:#fff;font-family:'Baloo 2';font-weight:800;font-size:18px;line-height:1.15;box-shadow:0 4px 0 rgba(43,34,56,.12)}
.extra a svg{width:34px;height:34px;flex:none}
.extra a small{display:block;font-family:Nunito;font-weight:700;font-size:13px;opacity:.92}
.guide{display:grid;gap:12px;margin-top:14px}
/* ---------- games ---------- */
.ws{display:grid;gap:3px;margin:14px auto 0;user-select:none;-webkit-user-select:none;touch-action:manipulation;max-width:520px}
.ws button{aspect-ratio:1;border:0;border-radius:8px;background:#F4F0FA;font-family:'Baloo 2';font-weight:800;font-size:clamp(13px,3.6vw,20px);cursor:pointer;padding:0;color:var(--ink);transition:background .2s,transform .2s}
.ws button.a{background:var(--acc);color:#fff;transform:scale(1.08)}
.ws button.f{color:#fff}
.wl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.wl span{font-family:'Baloo 2';font-weight:800;font-size:15px;border:2px solid var(--line);border-radius:99px;padding:2px 12px;background:#fff}
.wl span.f{text-decoration:line-through;color:#fff;border-color:transparent}
.status{margin-top:12px;text-align:center;font-size:16px;min-height:24px}
.status.ok{color:var(--ok)}.status.no{color:var(--bad)}
.match{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:14px}
.match .colm{display:grid;gap:8px;align-content:start}
.mt{border:2px solid var(--line);background:#fff;border-radius:14px;padding:9px 12px;text-align:left;cursor:pointer;font-weight:700;font-size:15px;line-height:1.3;transition:transform .2s}
.mt.w{font-family:'Baloo 2';font-weight:800;font-size:17px}
.mt.sel{border-color:var(--acc);box-shadow:0 0 0 3px #FFE1BF}
.mt.ok{border-color:var(--ok);background:#E7F8EE;opacity:.75;cursor:default}
.mt.no{animation:shake .45s;border-color:var(--bad)}
@media(max-width:520px){.match{grid-template-columns:1fr 1.25fr;gap:6px}.mt{font-size:13.5px;padding:8px 9px}.mt.w{font-size:15px}}
/* sort & order games */
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.bin{text-align:left;border:2.5px dashed var(--bc);border-radius:18px;padding:10px;min-height:120px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:background .2s}
.bin.hot{background:var(--bs)}
.bin h4{margin:0;font-family:'Baloo 2';font-weight:800;font-size:17px;color:var(--bc);display:flex;align-items:center;gap:6px}
.bin h4 i{width:14px;height:14px;border-radius:50%;background:var(--bc)}
.bin small{color:var(--sub);font-size:12.5px;line-height:1.3}
.bin .got{display:flex;flex-wrap:wrap;gap:5px}
.bin .got span{font-size:13px;border-radius:99px;background:var(--bs);padding:2px 9px;animation:pop .4s}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.chip{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;border-radius:99px;padding:7px 15px;cursor:pointer;transition:transform .2s,opacity .3s;color:var(--ink)}
.chip:hover{border-color:var(--c)}
.chip.sel{border-color:var(--acc);box-shadow:0 0 0 3px #FFE1BF;transform:translateY(-2px)}
.chip.used{opacity:0;transform:scale(.5);pointer-events:none;position:absolute}
.chip.shake{animation:shake .45s;border-color:var(--bad)}
.chip.glow{border-color:#F5C542;box-shadow:0 0 0 4px #FFE9A8}
.track{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;margin-top:14px}
.slot{border:2.5px dashed #C9C2DA;border-radius:16px;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px;background:#FBF9FE;text-align:center;font-size:14px;line-height:1.25;position:relative}
.slot .no{font-family:'Baloo 2';font-weight:800;color:#B3AACB;font-size:16px}
.slot.full{border-style:solid;border-color:#2FAE60;background:#EDFAF2;animation:pop .5s cubic-bezier(.3,1.8,.5,1)}
.slot.full .no{color:#2FAE60;font-size:13px}
.slot:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translate(50%,-50%);color:#B3AACB;font-weight:800;z-index:1}
@media(max-width:600px){.track{grid-template-columns:1fr 1fr}.slot::after{display:none}}
.planets{display:grid;grid-template-columns:44px repeat(8,1fr);gap:6px;align-items:end;margin-top:14px}
@media(max-width:560px){.planets{grid-template-columns:repeat(4,1fr)}.planets .sun{display:none}}
.planets .sun{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFF4C2,#FFC83D 60%,#F59E0B);align-self:center;box-shadow:0 0 18px #FFC83D}
.planets .slot{min-height:86px;justify-content:flex-end}
.planets .slot::after{display:none}
.ball{display:inline-block;border-radius:50%;box-shadow:inset -5px -5px 0 rgba(0,0,0,.16);flex:none}
/* ---------- 3D ---------- */
.space{position:relative;height:clamp(320px,62vw,470px);border-radius:20px;overflow:hidden;background:#0B0A26;margin-top:12px;touch-action:none;user-select:none;-webkit-user-select:none}
.space canvas{display:block;width:100%;height:100%;cursor:grab}
.space canvas:active{cursor:grabbing}
.tools{position:absolute;top:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;z-index:3;max-width:70%}
.tools button{font-family:'Baloo 2';font-weight:800;font-size:13px;border:0;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;padding:6px 10px;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tools button:hover,.tools button.on{background:rgba(255,255,255,.3)}
.hint{position:absolute;left:12px;bottom:30px;color:#C9C4FF;font-size:12.5px;line-height:1.4;z-index:2;max-width:52%;transition:opacity .6s;pointer-events:none}
.lbls{position:absolute;inset:0;pointer-events:none;z-index:1}
.lbl{position:absolute;left:0;top:0;font-family:'Baloo 2';font-weight:800;font-size:12.5px;color:#fff;white-space:nowrap;text-shadow:0 1px 3px #000,0 0 6px #000;transform:translate(-50%,-100%)}
.lbls.off .lbl{display:none}
.scale{position:absolute;left:12px;bottom:10px;color:#8D88C9;font-size:11px;z-index:2;pointer-events:none}
.spacewrap{position:relative;margin-top:12px;overflow:hidden;border-radius:20px}
.spacewrap .space{margin-top:0}
.info{position:absolute;left:12px;bottom:12px;width:min(330px,calc(100% - 24px));background:#fff;border-radius:18px;padding:12px 14px;z-index:4;box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translateY(140%);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.info.show{transform:none}
.info .nm{display:flex;align-items:center;gap:8px;font-family:'Baloo 2';font-weight:800;font-size:20px}
.info .dot{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset -4px -4px 0 rgba(0,0,0,.18)}
.info .ord{font-size:12.5px;color:var(--c);font-weight:800}
.info p{margin:6px 0 0;font-size:15px;line-height:1.45}
.info .x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:24px;color:var(--sub);cursor:pointer;line-height:1}
.nogl{padding:16px;color:#fff}
.layerkey{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.layerkey button{display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px 5px 6px;cursor:pointer;font-weight:800;font-size:14px}
.layerkey button i{width:20px;height:20px;border-radius:50%}
.layerkey button.on{border-color:var(--c);box-shadow:0 0 0 3px var(--soft)}
.clock{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.clock input{flex:1;min-width:180px;accent-color:var(--c)}
.clock .tm{font-family:'Baloo 2';font-weight:800;font-size:20px;min-width:110px}
@media(max-width:560px){.spacewrap{overflow:visible}.info{position:relative;left:0;bottom:0;width:100%;margin-top:10px;transform:none;display:none;border:2px solid var(--line);box-shadow:0 4px 0 rgba(43,34,56,.07)}.info.show{display:block;animation:pop .4s}}
/* ---------- proyek & sertifikat ---------- */
.steps{display:grid;gap:8px;margin-top:10px}
.step{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;text-align:left;font-size:16px;line-height:1.45}
.step b.n{flex:none;width:28px;height:28px;border-radius:50%;border:2.5px solid #2FAE60;color:#2FAE60;display:grid;place-items:center;font-family:'Baloo 2';font-weight:800}
.step.on{border-color:#2FAE60;background:#EDFAF2}
.step.on b.n{background:#2FAE60;color:#fff}
.bahan{margin:8px 0 0;padding-left:20px;font-size:16px;line-height:1.55}
.prow{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:center}
@media(max-width:640px){.prow{grid-template-columns:1fr}}
.prow svg{width:100%!important;height:auto!important}
.cert{background:#fff;border-radius:26px;padding:28px 24px;margin-top:18px;text-align:center;border:10px solid var(--soft);outline:3px solid var(--c);outline-offset:-18px;position:relative}
.cert .ttl{font-family:'Baloo 2';font-weight:800;font-size:clamp(28px,6vw,42px);color:var(--c);line-height:1.05;margin:6px 0}
.cert .nm{font-family:'Baloo 2';font-weight:800;font-size:clamp(30px,7vw,46px);border-bottom:3px dashed var(--line);display:inline-block;min-width:60%;padding:0 10px;margin:8px 0;line-height:1.2}
.cert .kids{display:flex;justify-content:center;gap:4px;margin-top:10px}
.cert .kids .kid{width:70px!important}
.cert .sig{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:14px;color:var(--sub);text-align:left}
.cert .sig b{display:block;font-family:'Baloo 2';color:var(--ink);font-size:17px}
.namein{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.namein input{flex:1;min-width:200px;font:inherit;font-size:17px;border:2px solid var(--line);border-radius:14px;padding:9px 12px}
/* ---------- animasi gambar (kelas ax-* ditulis di dalam SVG; hanya bergerak di web) ---------- */
.anim [class*="ax-"]{transform-box:fill-box;transform-origin:50% 50%}
.anim:not(.play) [class*="ax-"]{animation-play-state:paused!important}
.anim .ax-snip,.anim .ax-snip2,.anim .ax-needle,.anim .ax-fold,.anim .ax-topple,.anim .ax-clapl,.anim .ax-clapr,.anim .ax-orbit,.anim .ax-orbit-fast,.anim .ax-hang,.anim .ax-look,.anim .ax-wave,.anim .ax-kite,.anim .ax-hit,.anim .ax-seesaw,.anim .ax-fan,.anim .ax-pour,.anim .ax-brush,.anim .ax-dig{transform-box:view-box}
.anim .ax-blink{animation:axBlink 4.6s infinite}
.anim .ax-tw{animation:axTw 2.6s ease-in-out infinite}
.anim .ax-st{animation:axSt 3.2s ease-in-out infinite}
.anim .ax-spin{animation:axSpin 16s linear infinite}
.anim .ax-spin-f{animation:axSpin 1.8s linear infinite}
.anim .ax-orbit{animation:axSpin 24s linear infinite}
.anim .ax-orbit-fast{animation:axSpin 6s linear infinite}
.anim .ax-roll{animation:axSpin 1.6s linear infinite}
.anim .ax-pulse{animation:axPulse 2.8s ease-in-out infinite}
.anim .ax-bob{animation:axBob 3.2s ease-in-out infinite}
.anim .ax-bob2{animation:axBob 3.8s ease-in-out -1.4s infinite}
.anim .ax-hop{animation:axHop 2.4s ease-in-out infinite}
.anim .ax-bounce{animation:axBounce 1.9s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-rock{animation:axRock 4.4s ease-in-out infinite}
.anim .ax-sway{animation:axSway 3.8s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-canopy{animation:axSway 4.6s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-leaf{animation:axLeaf 3.4s ease-in-out infinite}
.anim .ax-hang{animation:axSwing 3.4s ease-in-out infinite}
.anim .ax-look{animation:axLook 4.2s ease-in-out infinite}
.anim .ax-wave{animation:axWaveArm 1.3s ease-in-out infinite alternate}
.anim .ax-flash{animation:axFlash 1.8s steps(1,end) infinite}
.anim .ax-blinklight{animation:axFlash 1.2s steps(1,end) infinite}
.anim .ax-zap{animation:axZap 1.5s ease-in-out infinite}
.anim .ax-rise{animation:axRise 3.2s ease-out infinite}
.anim .ax-drift{animation:axDrift 7s ease-in-out infinite}
.anim .ax-swim{animation:axSwim 3.4s ease-in-out infinite}
.anim .ax-swim2{animation:axSwim2 5.2s ease-in-out infinite}
.anim .ax-drop{animation:axDrop 1.5s linear infinite}
.anim .ax-wind{animation:axWind 2.4s ease-in-out infinite}
.anim .ax-wave-x{animation:axWaveX 2.8s ease-in-out infinite}
.anim .ax-dash{animation:axDash 1.4s linear infinite}
.anim .ax-dash-in{animation:axDashIn 1.2s linear infinite}
.anim .ax-glow{animation:axGlow 2.2s ease-in-out infinite}
.anim .ax-shine{animation:axGlow 2.6s ease-in-out infinite}
.anim .ax-beam{animation:axGlow 2s ease-in-out infinite}
.anim .ax-beamflow{animation:axBeamflow 1.6s ease-in-out infinite}
.anim .ax-beat{animation:axBeat 1.25s ease-in-out infinite}
.anim .ax-breathe{animation:axBreathe 3.4s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-breath{animation:axBreath 4s ease-in-out infinite}
.anim .ax-quake{animation:axQuake 2.4s linear infinite}
.anim .ax-shake{animation:axShake .28s linear infinite}
.anim .ax-flame{animation:axFlame .55s ease-in-out infinite alternate}
.anim .ax-push-r{animation:axPushR 1.8s ease-in-out infinite}
.anim .ax-push-l{animation:axPushL 1.8s ease-in-out infinite}
.anim .ax-roll-r{animation:axRollR 2.6s ease-in-out infinite}
.anim .ax-surge{animation:axSurge 3.2s ease-in-out infinite}
.anim .ax-boat{animation:axBoat 3.4s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-flagwave{animation:axFlag 2s ease-in-out infinite;transform-origin:0 50%}
.anim .ax-pop{animation:axPop 2.6s ease-in-out infinite}
.anim .ax-draw{animation:axDraw 2.2s ease-in-out infinite}
.anim .ax-kite{animation:axKite 3.6s ease-in-out infinite}
.anim .ax-jiggle{animation:axJiggle 1s ease-in-out infinite}
.anim .ax-ring{animation:axRing 1.6s ease-out infinite}
.anim .ax-note{animation:axNote 2.6s ease-in-out infinite}
.anim .ax-loupe{animation:axLoupe 4.4s ease-in-out infinite}
.anim .ax-melt{animation:axMelt 3s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-sink{animation:axSink 1.6s ease-in infinite}
.anim .ax-float{animation:axFloat 5s ease-in-out infinite}
.anim .ax-hit{animation:axHit 1s ease-in-out infinite}
.anim .ax-thump{animation:axThump 1s ease-in-out infinite}
.anim .ax-attract{animation:axAttract 1.3s ease-in-out infinite alternate}
.anim .ax-seesaw{animation:axSeesaw 3.4s ease-in-out infinite}
.anim .ax-bump{animation:axBump .7s ease-in-out infinite}
.anim .ax-creep{animation:axCreep 4.6s ease-in-out infinite}
.anim .ax-flick{animation:axFlick 1.8s ease-in-out infinite;transform-origin:0 50%}
.anim .ax-flick2{animation:axFlick2 2.8s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-fan{animation:axFan 2.6s ease-in-out infinite}
.anim .ax-buzz{animation:axBuzz 2.2s ease-in-out infinite}
.anim .ax-flutter{animation:axFlutter .32s ease-in-out infinite alternate}
.anim .ax-wiggle{animation:axWiggle 1.4s ease-in-out infinite}
.anim .ax-fly{animation:axFly 5s ease-in-out infinite}
.anim .ax-grow{animation:axGrow 3.2s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-pour{animation:axPour 3.2s ease-in-out infinite}
.anim .ax-simmer{animation:axSimmer .6s ease-in-out infinite}
.anim .ax-reach{animation:axReach 2.2s ease-in-out infinite;transform-origin:100% 100%}
.anim .ax-dropin{animation:axDropin 2.6s ease-in-out infinite}
.anim .ax-thermo{animation:axThermo 4s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-stomp{animation:axStomp 1.6s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-graze{animation:axGraze 4.4s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-chomp-up{animation:axChompUp 1.5s ease-in-out infinite}
.anim .ax-chomp-lo{animation:axChompLo 1.5s ease-in-out infinite}
.anim .ax-wobble{animation:axWobble 2.4s ease-in-out infinite;transform-origin:50% 100%}
.anim .ax-peek{animation:axPeek 2.6s ease-in-out infinite}
.anim .ax-meteor{animation:axMeteor 2s ease-in-out infinite}
.anim .ax-brush{animation:axBrush 1.2s ease-in-out infinite}
.anim .ax-dig{animation:axDig 1.5s ease-in-out infinite}
.anim .ax-ping{animation:axPing 1.8s ease-in-out infinite}
.anim .ax-scrub{animation:axScrub .55s ease-in-out infinite alternate}
.anim .ax-journey{animation:axJourney 7s linear infinite}
.anim .ax-slide{animation:axSlide 2.2s ease-in-out infinite}
.anim .ax-slide2{animation:axSlide2 1.8s linear infinite}
.anim .ax-slide3{animation:axSlide3 4.4s ease-in-out infinite}
.anim .ax-trace{animation:axTrace 4s linear infinite}
.anim .ax-snip{animation:axSnip .9s ease-in-out infinite}
.anim .ax-snip2{animation:axSnip2 .9s ease-in-out infinite}
.anim .ax-press{animation:axPress 1.6s ease-in-out infinite}
.anim .ax-needle{animation:axNeedle 3s ease-in-out infinite}
.anim .ax-fold{animation:axFold 3.2s ease-in-out infinite}
.anim .ax-topple{animation:axTopple 3.6s ease-in infinite}
.anim .ax-apart-l{animation:axApartL 4s ease-in-out infinite}
.anim .ax-apart-r{animation:axApartR 4s ease-in-out infinite}
.anim .ax-clapl{animation:axClapL .8s ease-in-out infinite}
.anim .ax-clapr{animation:axClapR .8s ease-in-out infinite}
@keyframes axSlide{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(60px);opacity:0}}
@keyframes axSlide2{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(30px);opacity:0}}
@keyframes axSlide3{0%,100%{transform:translateX(-6px)}50%{transform:translateX(52px)}}
@keyframes axTrace{0%{transform:translate(0,0);opacity:0}8%{opacity:1}33%{transform:translate(36px,16px)}66%{transform:translate(0,32px)}92%{opacity:1}100%{transform:translate(36px,46px);opacity:0}}
@keyframes axSnip{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
@keyframes axSnip2{0%,100%{transform:rotate(0)}50%{transform:rotate(16deg)}}
@keyframes axPress{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(.88);opacity:1}}
@keyframes axNeedle{0%{transform:rotate(-40deg)}35%{transform:rotate(18deg)}55%{transform:rotate(-8deg)}75%,100%{transform:rotate(0)}}
@keyframes axFold{0%,30%,100%{transform:scaleY(1)}45%,80%{transform:scaleY(.25)}}
@keyframes axTopple{0%,30%{transform:rotate(0);opacity:1}70%{transform:rotate(80deg);opacity:1}85%,100%{transform:rotate(80deg);opacity:0}}
@keyframes axApartL{0%,15%{transform:translateX(4px)}60%,100%{transform:translateX(-4px)}}
@keyframes axApartR{0%,15%{transform:translateX(-4px)}60%,100%{transform:translateX(5px)}}
@keyframes axClapL{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes axClapR{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes axBlink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes axTw{0%,100%{transform:scale(.7) rotate(0);opacity:.55}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
@keyframes axSt{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes axSpin{to{transform:rotate(360deg)}}
@keyframes axPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes axBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes axHop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-8px)}40%{transform:translateY(0)}47%{transform:translateY(-2px)}}
@keyframes axBounce{0%,100%{transform:translateY(0) scaleY(1)}45%{transform:translateY(-7px) scaleY(1.02)}90%{transform:translateY(0) scaleY(.96)}}
@keyframes axRock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes axSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes axLeaf{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes axSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes axLook{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}}
@keyframes axWaveArm{from{transform:rotate(8deg)}to{transform:rotate(-14deg)}}
@keyframes axFlash{0%{opacity:1}50%{opacity:.25}}
@keyframes axZap{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08) rotate(-3deg)}60%{transform:scale(.97) rotate(2deg)}}
@keyframes axRise{0%{transform:translateY(4px);opacity:0}20%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
@keyframes axDrift{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes axSwim{0%,100%{transform:translate(-5px,0)}50%{transform:translate(5px,-2px)}}
@keyframes axSwim2{0%,100%{transform:translate(-7px,1px) rotate(-1.5deg)}50%{transform:translate(7px,-2px) rotate(1.5deg)}}
@keyframes axDrop{0%{transform:translateY(-3px);opacity:0}15%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes axWind{0%,100%{transform:translateX(-4px);opacity:.35}50%{transform:translateX(5px);opacity:1}}
@keyframes axWaveX{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
@keyframes axDash{to{stroke-dashoffset:-24}}
@keyframes axDashIn{to{stroke-dashoffset:22}}
@keyframes axGlow{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes axBeamflow{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes axBeat{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.09)}22%{transform:scale(1.03)}}
@keyframes axBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.01,1.03)}}
@keyframes axBreath{0%,100%{transform:scale(.96)}50%{transform:scale(1.05)}}
@keyframes axQuake{0%,40%,100%{transform:translate(0,0) rotate(0)}5%{transform:translate(-2px,0) rotate(-1deg)}10%{transform:translate(2px,-1px) rotate(1deg)}15%{transform:translate(-2px,1px) rotate(-1deg)}20%{transform:translate(2px,0) rotate(1deg)}25%{transform:translate(-1px,0)}30%{transform:translate(1px,0)}}
@keyframes axShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-.8px,.6px)}50%{transform:translate(.8px,-.6px)}75%{transform:translate(-.6px,-.4px)}}
@keyframes axFlame{from{transform:scale(.9,.86);opacity:.85}to{transform:scale(1.06,1.12);opacity:1}}
@keyframes axPushR{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes axPushL{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes axRollR{0%,100%{transform:translateX(-3px)}50%{transform:translateX(5px)}}
@keyframes axSurge{0%,100%{transform:translateX(-4px) rotate(-1deg)}50%{transform:translateX(4px) rotate(1deg)}}
@keyframes axBoat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes axFlag{0%,100%{transform:skewY(0)}50%{transform:skewY(-4deg)}}
@keyframes axPop{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes axDraw{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,3px)}}
@keyframes axKite{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes axJiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(-4deg)}30%{transform:rotate(4deg)}45%{transform:rotate(-3deg)}60%{transform:rotate(2deg)}}
@keyframes axRing{0%{transform:scale(.85);opacity:0}30%{opacity:1}100%{transform:scale(1.18);opacity:0}}
@keyframes axNote{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes axLoupe{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-3px)}50%{transform:translate(0,-6px)}75%{transform:translate(-4px,-3px)}}
@keyframes axMelt{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.96)}}
@keyframes axSink{0%{transform:translateY(-4px);opacity:0}30%{opacity:1}100%{transform:translateY(8px);opacity:0}}
@keyframes axFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes axHit{0%,100%{transform:rotate(-12deg)}40%{transform:rotate(6deg)}48%{transform:rotate(3deg)}}
@keyframes axThump{0%,36%,60%,100%{transform:scale(1)}44%{transform:scale(1.035,.97)}}
@keyframes axAttract{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes axSeesaw{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes axBump{0%,100%{transform:translateY(0)}30%{transform:translateY(-1.6px)}60%{transform:translateY(.4px)}}
@keyframes axCreep{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes axFlick{0%,60%,100%{transform:scaleX(.2)}70%,90%{transform:scaleX(1)}}
@keyframes axFlick2{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(8deg)}}
@keyframes axFan{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes axBuzz{0%,100%{transform:translate(0,0)}25%{transform:translate(5px,-4px)}50%{transform:translate(0,-6px)}75%{transform:translate(-5px,-3px)}}
@keyframes axFlutter{from{transform:scaleX(1)}to{transform:scaleX(.55)}}
@keyframes axWiggle{0%,100%{transform:translateX(-2px) skewX(-6deg)}50%{transform:translateX(2px) skewX(6deg)}}
@keyframes axFly{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(8px,-7px) rotate(12deg)}}
@keyframes axGrow{0%,100%{transform:scaleY(.93)}50%{transform:scaleY(1.03)}}
@keyframes axPour{0%,25%,100%{transform:rotate(0)}45%,80%{transform:rotate(-9deg)}}
@keyframes axSimmer{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.5px) rotate(.8deg)}}
@keyframes axReach{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes axDropin{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}75%{transform:translateY(5px);opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes axThermo{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
@keyframes axStomp{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-1deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-3px) rotate(1deg)}}
@keyframes axGraze{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1deg)}}
@keyframes axChompUp{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes axChompLo{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes axWobble{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(-7deg)}20%{transform:rotate(6deg)}30%{transform:rotate(-4deg)}40%{transform:rotate(2deg)}}
@keyframes axPeek{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
@keyframes axMeteor{0%,100%{transform:translate(-5px,-5px)}50%{transform:translate(3px,3px)}}
@keyframes axBrush{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes axDig{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}
@keyframes axPing{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
@keyframes axScrub{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes axJourney{0%{transform:translateY(0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translateY(228px);opacity:0}}
/* ---------- toast & confetti ---------- */
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,220%);visibility:hidden;background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;font-size:14.5px;z-index:90;transition:transform .4s;max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0);visibility:visible}
.conf{position:fixed;top:-12px;width:10px;height:14px;z-index:95;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.loading{padding:80px 0;text-align:center;color:var(--sub)}
.fade{animation:fadein .5s}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
@media(max-width:480px){.jt{text-align:left}.wrap{padding:0 12px 48px}.card{padding:14px}.top .stars{font-size:14px}.backlink{max-width:none;width:44px;height:44px;padding:0;justify-content:center;flex:none}.backlink svg{width:22px;height:22px}.backlink span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== Ramah Baca: ukuran huruf, huruf mudah dibaca, mode tenang ===== */
@font-face{font-family:OpenDyslexic;font-weight:400;font-display:swap;src:url(fonts/opendyslexic-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:OpenDyslexic;font-weight:700;font-display:swap;src:url(fonts/opendyslexic-latin-700-normal.woff2) format('woff2')}
html.fs1 .inti .txt{font-size:clamp(20.7px,3vw,24.1px)}
html.fs1 .body{font-size:19.0px}
html.fs1 .bub .t{font-size:18.4px}
html.fs1 .wow p{font-size:18.4px}
html.fs1 .flip .fb p{font-size:19.5px}
html.fs1 .flip .q{font-size:clamp(21.8px,4.6vw,25.3px)}
html.fs1 .dekat .cap{font-size:16.7px}
html.fs1 .qq .qt{font-size:19.5px}
html.fs1 .opt{font-size:17.8px}
html.fs1 .ex{font-size:17.2px}
html.fs1 .jaga .tip{font-size:17.2px}
html.fs1 .step{font-size:18.4px}
html.fs1 .bahan{font-size:18.4px}
html.fs1 .lead{font-size:18.4px}
html.fs1 .cover p{font-size:19.5px}
html.fs1 .tbl{font-size:17.8px}
html.fs1 details.dalam summary{font-size:21.8px}
html.fs1 .mt{font-size:17.2px}
html.fs1 .mt.w{font-size:19.5px}
html.fs1 .info p{font-size:17.2px}
html.fs1 .status{font-size:18.4px}
html.fs1 .chip{font-size:17.2px}
html.fs2 .inti .txt{font-size:clamp(23.4px,3vw,27.3px)}
html.fs2 .body{font-size:21.4px}
html.fs2 .bub .t{font-size:20.8px}
html.fs2 .wow p{font-size:20.8px}
html.fs2 .flip .fb p{font-size:22.1px}
html.fs2 .flip .q{font-size:clamp(24.7px,4.6vw,28.6px)}
html.fs2 .dekat .cap{font-size:18.9px}
html.fs2 .qq .qt{font-size:22.1px}
html.fs2 .opt{font-size:20.2px}
html.fs2 .ex{font-size:19.5px}
html.fs2 .jaga .tip{font-size:19.5px}
html.fs2 .step{font-size:20.8px}
html.fs2 .bahan{font-size:20.8px}
html.fs2 .lead{font-size:20.8px}
html.fs2 .cover p{font-size:22.1px}
html.fs2 .tbl{font-size:20.2px}
html.fs2 details.dalam summary{font-size:24.7px}
html.fs2 .mt{font-size:19.5px}
html.fs2 .mt.w{font-size:22.1px}
html.fs2 .info p{font-size:19.5px}
html.fs2 .status{font-size:20.8px}
html.fs2 .chip{font-size:19.5px}
html.easy .body,html.easy .inti .txt,html.easy .bub .t,html.easy .wow p,html.easy .flip .fb p,html.easy .flip .q,html.easy .dekat .cap,html.easy .qq .qt,html.easy .opt,html.easy .ex,html.easy .jaga .tip,html.easy .step,html.easy .bahan,html.easy .lead,html.easy .cover p,html.easy .info p,html.easy .tbl,html.easy .status,html.easy .mt{font-family:OpenDyslexic,Nunito,sans-serif;font-weight:400;letter-spacing:.01em;word-spacing:.14em;line-height:1.75}
html.easy .body,html.easy .inti .txt,html.easy .bub .t,html.easy .wow p,html.easy .flip .fb p,html.easy .flip .q,html.easy .dekat .cap,html.easy .qq .qt,html.easy .opt,html.easy .ex,html.easy .jaga .tip,html.easy .step,html.easy .bahan,html.easy .lead,html.easy .cover p,html.easy .info p,html.easy .tbl,html.easy .status,html.easy .mt,html.easy .jt,html.easy .body p,html.easy .body li,html.easy .inti .txt p{text-align:left!important;hyphens:none!important;-webkit-hyphens:none!important}
html.easy .body b,html.easy .inti .txt b{font-weight:700}
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.calm .conf{display:none!important}

.aa{flex:none;font-family:'Baloo 2';font-weight:800;font-size:15px;border:2px solid var(--line);background:#fff;border-radius:99px;height:30px;min-width:38px;padding:0 9px;color:var(--ink);cursor:pointer}
.aa:hover,.aa:focus-visible{border-color:var(--ink)}
.who{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:'Baloo 2';font-weight:800;font-size:13px;color:#fff;background:#2FAE60;border-radius:99px;padding:3px 10px 2px 7px;text-decoration:none;max-width:30vw}
.who svg{width:15px;height:15px;flex:none}.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){.who span{display:none}.who{padding:5px}}
.sheetbg{position:fixed;inset:0;z-index:90;background:rgba(32,26,48,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px}
@media (min-width:640px){.sheetbg{align-items:center}}
.sheet{background:#fff;border-radius:22px;width:100%;max-width:460px;padding:16px 18px 18px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.sheet .sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sheet .sh b{font-family:'Baloo 2';font-weight:800;font-size:22px}
.sheet .x{border:0;background:#F3EFF8;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer;line-height:1}
.orow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1.5px solid var(--line)}
.orow>span{font-weight:800;font-size:16px;display:flex;flex-direction:column}
.orow small{font-weight:600;font-size:12.5px;color:var(--sub);margin-top:2px}
.seg{display:flex;flex:none;border:2px solid var(--line);border-radius:99px;padding:2px;background:#FBF8FF}
.seg button{border:0;background:none;border-radius:99px;min-width:46px;height:38px;padding:0 10px;font-family:'Baloo 2';font-weight:800;font-size:14px;color:var(--sub);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.sheet .note{font-size:13px;color:var(--sub);margin:8px 0 0}
.libhead .lh-r{display:flex;align-items:flex-end}
.liblinks{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.liblinks .btn svg{width:18px;height:18px;margin-right:4px;vertical-align:-3px}
@media (max-width:640px){.libhead{grid-template-columns:1fr}.liblinks{justify-content:flex-start}}
.offbtn.ok{color:#15803D;border-color:#15803D;opacity:1}
/* paspor */
.pass{background:linear-gradient(160deg,#2D1B69,#4C2A99);border-radius:26px;padding:18px;color:#fff;box-shadow:0 12px 30px rgba(45,27,105,.25)}
.pid{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.1);border:1.5px dashed rgba(255,255,255,.35);border-radius:18px;padding:12px 14px;margin-bottom:16px}
.pav{flex:none;width:58px;height:58px;border-radius:14px;background:#FFC83D;color:#4C2A99;display:grid;place-items:center}.pav svg{width:38px;height:38px}
.pf{flex:1;display:flex;flex-direction:column;min-width:0}
.pf small{font-family:'Baloo 2';font-weight:800;font-size:11px;letter-spacing:.12em;opacity:.75}
.pf b{font-family:'Baloo 2';font-weight:800;font-size:20px;margin-bottom:4px}
.pf input{font:inherit;font-family:'Baloo 2';font-weight:800;font-size:20px;background:transparent;color:#fff;border:0;border-bottom:2px solid rgba(255,255,255,.5);padding:0 0 2px;margin-bottom:6px;outline:none;width:100%}
.pf input::placeholder{color:rgba(255,255,255,.55)}
.pcount{flex:none;text-align:center;background:#FFC83D;color:#2D1B69;border-radius:16px;padding:6px 12px}.pcount b{font-family:'Baloo 2';font-weight:800;font-size:26px;display:block;line-height:1}.pcount small{font-weight:800;font-size:12px}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.stamp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:#fff;text-decoration:none;padding:10px 6px;border-radius:16px;background:rgba(255,255,255,.06)}
.stamp .sc{width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--c);border:5px solid rgba(255,255,255,.25);display:grid;place-items:center;transform:rotate(-7deg);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.stamp .sc svg{width:120%!important;max-width:none}
.stamp b{font-family:'Baloo 2';font-weight:800;font-size:14.5px;line-height:1.15}
.stamp i{font-style:normal;font-size:12px;font-weight:700;opacity:.85}
.stamp.lv0 .sc{filter:grayscale(1);opacity:.4;border-style:dashed;transform:none}
.stamp.lv1 .sc{border-color:#CD7F32}.stamp.lv2 .sc{border-color:#C9D1D9}.stamp.lv3 .sc{border-color:#FFC83D;box-shadow:0 0 0 3px rgba(255,200,61,.35),0 0 22px rgba(255,200,61,.45)}
.onlyprint{display:none}
/* laporan dan mode kelas */
.rephead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.rephead .bf{font-family:'Baloo 2';font-weight:800;font-size:18px}
.repf{display:flex;gap:12px;flex-wrap:wrap}
.repf label{display:flex;flex-direction:column;font-weight:800;font-size:12.5px;color:var(--sub)}
.repf input{font:inherit;font-size:16px;font-weight:800;color:var(--ink);border:0;border-bottom:2px solid var(--line);padding:3px 0;min-width:170px;outline:none;background:transparent}
.repf input:focus{border-color:var(--ink)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.reptbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.reptbl th,.reptbl td{border-bottom:1.5px solid var(--line);padding:7px 6px;text-align:left;white-space:nowrap}
.reptbl th{font-family:'Baloo 2';font-weight:800;font-size:13px;color:var(--sub)}
.reptbl .c{text-align:center}
.reptbl .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.card .small{font-size:12.5px;color:var(--sub);margin:8px 0 0}
.plist{display:grid;gap:8px;margin:10px 0}
.prow2{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:14px;padding:8px 10px;flex-wrap:wrap}
.prow2.on{border-color:#2FAE60;background:#F0FBF4}
.prow2 .pn{flex:1;display:flex;align-items:center;gap:7px;min-width:140px}.prow2 .pn svg{width:18px;height:18px;color:#7B5CFF;flex:none}
.prow2 .pn small{color:var(--sub);font-weight:700}
.prow2 .pt{display:inline-flex;align-items:center;gap:3px;font-weight:800}.prow2 .pt svg{width:17px;height:17px}
.prow2 .del.sure{background:#FDE2E2;color:#B91C1C;border-color:#B91C1C}
.padd{display:flex;gap:8px;flex-wrap:wrap}
.padd input{flex:1;min-width:120px;font:inherit;font-weight:700;font-size:15px;border:2px solid var(--line);border-radius:12px;padding:8px 10px;outline:none}
.padd input:focus{border-color:var(--ink)}
@media print{body.pr-cert *{visibility:hidden}body.pr-cert .cert,body.pr-cert .cert *{visibility:visible}body.pr-cert .cert{position:absolute;left:0;top:0;width:100%;margin:0}.top,.toast,.noprint,.sheetbg{display:none!important}.onlyprint{display:block!important}body.pr-rep .rekap,body.pr-rep .cmode{display:none!important}body.pr-rekap .rep,body.pr-rekap .cmode,body.pr-rekap main>h1,body.pr-rekap main>.lead{display:none!important}.card{box-shadow:none!important;border:1.5px solid #ddd}.reptbl{min-width:0;font-size:11px}.tscroll{overflow:visible}.pass{-webkit-print-color-adjust:exact;print-color-adjust:exact}.stamps{grid-template-columns:repeat(5,1fr)}.fade{animation:none}}

.space.light .tools button{background:rgba(43,34,56,.1);color:#2B2238;border-color:rgba(43,34,56,.18)}.space.light .tools button.on{background:#2B2238;color:#fff}.space.light .hint{color:#2B2238;background:rgba(255,255,255,.85)}.space.light .scale{color:#5B5470}.space.light .lbl{color:#2B2238;text-shadow:0 0 3px #fff,0 0 6px #fff}

/* ---- Rak Ajar: label, gembok, layar terkunci ---- */
.bk .cv{position:relative}
.ra-tag{position:absolute;right:10px;top:10px;font:800 .66rem/1.3 Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:3px 10px;pointer-events:none}
.ra-tag.free{background:#fff;color:#15803D}.ra-tag.prem{background:#2B2238;color:#FFD9A8}.ra-tag.own{background:#15803D;color:#fff}
.ra-lk svg,.ra-ico svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.chc.ra-x{opacity:.72}.chc.ra-x .num svg{width:20px;height:20px}
.ra-xl{font:800 .72rem Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.ra-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#2B2238;color:#fff}
.ra-band p{flex:1;min-width:220px;margin:0;color:#E8DDF2}
.ra-ico{width:64px;height:64px;border-radius:20px;background:#FFE9D6;color:#8A3F00;display:grid;place-items:center;margin:0 auto 6px}
.ra-ico svg{width:32px;height:32px;margin:0}
.ra-ico.sm{width:44px;height:44px;border-radius:14px;margin:0}.ra-ico.sm svg{width:22px;height:22px}
.ra-lock{text-align:center}
.ra-lock h1{margin:6px 0 4px}
.ra-lock .acts{justify-content:center}
.ra-adult{margin-top:22px;padding:18px;border-radius:18px;background:#FFF8EE;border:1.5px dashed #EFE3D3;text-align:left}
.ra-adult h3{margin:0 0 6px;font-size:1.05rem}
.ra-adult .btn{margin-top:4px}
.ra-code{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:14px}
.ra-code label{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px;font:700 .82rem Nunito,sans-serif;color:var(--sub)}
.ra-code input{font:700 1rem Nunito,sans-serif;letter-spacing:.08em;padding:11px 14px;border-radius:12px;border:2px solid #EFE3D3;background:#fff;color:#2B2238;text-transform:uppercase}
.ra-code input:focus{outline:none;border-color:#F08A24}
.ra-msg{width:100%;margin:0;min-height:1.2em;font:700 .86rem Nunito,sans-serif;color:#8A3F00}
.ra-off{opacity:.55;cursor:default;pointer-events:none}
/* ---- efek suara & panduan pertama */
.aa.snd,.aa.hlp{display:inline-flex;align-items:center;justify-content:center;padding:0;width:34px;min-width:34px}
.aa.snd svg{width:18px;height:18px}.aa.snd .x{display:none}.aa.snd.off{color:#9A92AA}.aa.snd.off .w{display:none}.aa.snd.off .x{display:inline}
.sheet.guide{max-width:440px;text-align:center;padding:18px 20px 20px;border-top:6px solid var(--gc,#F08A24)}
.sheet.guide .g-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--sub)}
.sheet.guide .g-skip{border:0;background:none;color:var(--sub);font:700 13px Nunito,sans-serif;cursor:pointer;text-decoration:underline;padding:6px}
.sheet.guide .g-ico{width:76px;height:76px;margin:10px auto 6px;border-radius:24px;background:color-mix(in srgb,var(--gc,#F08A24) 14%,#fff);display:grid;place-items:center;color:var(--gc,#F08A24)}
.sheet.guide .g-ico svg{width:44px;height:44px}.sheet.guide .g-aa{font:800 30px 'Baloo 2',sans-serif}
.sheet.guide h2{font-family:'Baloo 2';font-weight:800;font-size:24px;margin:4px 0 2px;line-height:1.2}
.sheet.guide p{margin:6px 0 10px;text-align:center}
.sheet.guide .g-dots{display:flex;gap:6px;justify-content:center;margin:6px 0 14px}.sheet.guide .g-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:width .2s}.sheet.guide .g-dots i.on{width:22px;border-radius:99px;background:var(--gc,#F08A24)}
.sheet.guide .g-acts{display:flex;justify-content:space-between;gap:10px}.sheet.guide .g-acts .btn{min-width:120px}
html:not(.calm) .sheet.guide{animation:gpop .28s ease-out}@keyframes gpop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
/* HP: bilah atas bab harus muat di 360 px (label BAB sudah ada di judul halaman) */
@media(max-width:480px){.top .wrap{gap:6px}.top .pill{display:none}.top .aa{width:36px;min-width:36px;padding:0}.lng a{padding:2px 7px}}