:root{--bg:#ECEFF3;--surface:#F7F8FA;--ink:#161B24;--muted:#586273;--line:#CBD2DC;--accent:#2B43D4;--on-accent:#FFFFFF;--code:#E2E6EC;--good:#13693F;--good-bg:#D9F0E2;--bad:#AE1F2C;--bad-bg:#F8DDE0;--font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0F131A;--surface:#171C25;--ink:#E7EAF0;--muted:#9AA4B5;--line:#2A3240;--accent:#8CA0FF;--on-accent:#0F131A;--code:#1D2330;--good:#5FD39A;--good-bg:#12301F;--bad:#FF8A94;--bad-bg:#3A171B;color-scheme:dark}}:root[data-theme=dark]{--bg:#0F131A;--surface:#171C25;--ink:#E7EAF0;--muted:#9AA4B5;--line:#2A3240;--accent:#8CA0FF;--on-accent:#0F131A;--code:#1D2330;--good:#5FD39A;--good-bg:#12301F;--bad:#FF8A94;--bad-bg:#3A171B;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 56px}button{font:inherit;color:inherit}.app{max-width:44rem;margin:0 auto;display:flex;flex-direction:column;gap:28px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.brand{font:500 .95rem var(--font-mono);letter-spacing:.02em}.brand b{color:var(--accent);font-weight:500}.best{font:400 .8rem var(--font-mono);color:var(--muted)}h1{font:800 clamp(2rem,7vw,3.1rem)/1.05 var(--font-display);letter-spacing:-.02em;margin:0;text-wrap:balance}h2{font:600 1.25rem/1.2 var(--font-display);margin:0;text-wrap:balance}.lead{margin:0;color:var(--muted);max-width:52ch}.stack{display:flex;flex-direction:column;gap:24px}fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}legend{padding:0;margin-bottom:10px;font:500 .72rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{position:relative;display:block}.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}.chip span{display:block;padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:.92rem}.chip input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--surface));font-weight:500}.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.count{margin:0;font:400 .85rem var(--font-mono);color:var(--muted)}.btn{appearance:none;border:1px solid transparent;border-radius:6px;padding:13px 22px;font-weight:600;cursor:pointer;text-align:center}.btn.primary{background:var(--accent);color:var(--on-accent)}.btn.ghost{background:transparent;border-color:var(--line)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible,.opt:focus-visible,.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.link{appearance:none;background:none;border:0;padding:4px 0;color:var(--muted);text-decoration:underline;cursor:pointer;align-self:flex-start;font-size:.9rem}.qhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}.qnum{font:800 3.4rem/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}.qnum .of{font-size:1.3rem;font-weight:600;color:var(--muted);letter-spacing:0}.tags{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 12rem}.tag{font:500 .7rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);border-radius:4px;padding:3px 8px;color:var(--muted)}.stats{display:flex;gap:16px;font:400 .85rem var(--font-mono);color:var(--muted)}.stats b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}.timer{display:flex;align-items:center;gap:12px}.timer-track{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}.timer-bar{height:100%;width:100%;background:var(--accent)}.timer-bar.low{background:var(--bad)}.timer-txt{font:400 .8rem var(--font-mono);color:var(--muted);min-width:4.5ch;text-align:right;font-variant-numeric:tabular-nums}.prompt{font-size:1.15rem;font-weight:500;margin:0;max-width:60ch;text-wrap:pretty}.code{margin:0;background:var(--code);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0}.code figcaption{font:500 .7rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:8px 14px;border-bottom:1px solid var(--line)}.code pre{margin:0;padding:12px 14px;overflow-x:auto;font:400 .9rem/1.65 var(--font-mono);counter-reset:n;tab-size:2}.ln{display:block;white-space:pre;min-height:1.65em}.ln:before{counter-increment:n;content:counter(n);display:inline-block;width:2ch;margin-right:1.6ch;text-align:right;color:var(--muted);opacity:.7;user-select:none}.code.small pre{font-size:.82rem}.opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.opt{appearance:none;width:100%;display:grid;grid-template-columns:2.4rem 1fr;align-items:stretch;text-align:left;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;overflow:hidden}.opt .gut{display:flex;align-items:center;justify-content:center;font:500 .85rem var(--font-mono);color:var(--muted);border-right:1px solid var(--line);background:var(--code)}.opt .txt{padding:11px 14px;min-width:0;overflow-wrap:anywhere}.mono .opt .txt{font-family:var(--font-mono);font-size:.92rem}.opt:hover:not(:disabled){border-color:var(--accent)}.opt:disabled{cursor:default;color:var(--ink)}.opt.is-ok{background:var(--good-bg);border-color:var(--good)}.opt.is-ok .gut{background:var(--good);color:var(--bg);font-weight:600;border-color:var(--good)}.opt.is-bad{background:var(--bad-bg);border-color:var(--bad)}.opt.is-bad .gut{background:var(--bad);color:var(--bg);font-weight:600;border-color:var(--bad)}.opt.is-dim{opacity:.55}.feedback{display:flex;flex-direction:column;gap:12px;padding-top:4px}.feedback p{margin:0}.verdict{font:600 1.1rem var(--font-display)}.verdict.ok{color:var(--good)}.verdict.bad{color:var(--bad)}.expl{max-width:62ch}.fb-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.hint{font:400 .75rem var(--font-mono);color:var(--muted)}.answerline{font:500 .92rem/1.5 var(--font-mono);background:var(--good-bg);color:var(--good);padding:8px 12px;border-radius:6px;overflow-wrap:anywhere}.how,.tip{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--surface);min-width:0}.tip{border-color:var(--bad);background:var(--bad-bg)}.sub{font:500 .7rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 6px}.how ol{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:4px}.how li{overflow-wrap:anywhere}.rhead{display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap}.big{font:800 clamp(4rem,16vw,6.5rem)/.9 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}.big small{font-size:.35em;font-weight:600;color:var(--muted);letter-spacing:0}.rtext{display:flex;flex-direction:column;gap:4px;min-width:0}.rtext p{margin:0}.grade{font:600 1.35rem var(--font-display)}.muted{color:var(--muted)}.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.bar-row{display:grid;grid-template-columns:minmax(7rem,11rem) 1fr auto;align-items:center;gap:6px 14px}.bar-row .nm{font-size:.92rem}.bar-row .tr{height:8px;border-radius:2px;background:var(--line);overflow:hidden}.bar-row .fl{height:100%;background:var(--accent)}.bar-row .v{font:400 .85rem var(--font-mono);font-variant-numeric:tabular-nums}.review{display:flex;flex-direction:column;gap:16px}.rev{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:0}.rev p{margin:0}.rev-meta{font:500 .7rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.rev-q{font-weight:500}.diff{display:flex;flex-direction:column;gap:4px;font:400 .88rem/1.5 var(--font-mono)}.diff p{padding:6px 10px;border-radius:4px;display:grid;grid-template-columns:1.4ch 1fr;gap:10px;overflow-wrap:anywhere}.d-bad{background:var(--bad-bg);color:var(--bad)}.d-ok{background:var(--good-bg);color:var(--good)}.rev-e{color:var(--muted);font-size:.92rem}.actions{display:flex;gap:12px;flex-wrap:wrap}.runner{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--surface);min-width:0}.runner textarea{width:100%;min-height:7.5rem;resize:vertical;font:400 .88rem/1.6 var(--font-mono);background:var(--code);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:10px 12px;tab-size:2;white-space:pre;overflow:auto}.runner textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.run-actions{display:flex;gap:8px;flex-wrap:wrap}.btn.small{padding:8px 14px;font-size:.9rem}.console{margin:0;min-height:3rem;max-height:14rem;overflow:auto;background:var(--code);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:400 .88rem/1.6 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}.console.err{color:var(--bad);border-color:var(--bad)}.console:empty:before{content:"Output muncul di sini";color:var(--muted)}.optexp{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--surface);min-width:0}.oxl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.ox{display:grid;grid-template-columns:1.8rem 1fr;gap:10px;align-items:start;padding:8px 10px;border-radius:6px;border:1px solid var(--line);min-width:0}.ox .gut{font:600 .9rem var(--font-mono);text-align:center;color:var(--muted)}.ox p{margin:0;overflow-wrap:anywhere}.ox-t{font-weight:500}.ox-e{color:var(--muted);font-size:.92rem}.ox.ok{background:var(--good-bg);border-color:var(--good)}.ox.ok .gut{color:var(--good)}.ox.bad{background:var(--bad-bg);border-color:var(--bad)}.ox.bad .gut{color:var(--bad)}.ox em{font-style:normal;font:500 .72rem var(--font-mono);color:var(--muted)}.cert-form{display:flex;flex-direction:column;gap:6px;max-width:24rem}.cert-form label{font:500 .72rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}input[type=text]{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:100%}input[type=text]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.cert{border:1px solid var(--line);background:var(--surface);padding:8px;border-radius:4px;min-width:0}.cert-in{border:3px double var(--accent);padding:clamp(20px,5vw,44px) clamp(14px,4vw,36px);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}.cert-brand{font:500 .85rem var(--font-mono);color:var(--accent);letter-spacing:.04em}.cert-title{font:800 clamp(1.9rem,8vw,3rem)/1 var(--font-display);letter-spacing:.12em;text-indent:.12em;margin:4px 0 0}.cert-sub{font:500 .7rem var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.cert-to{color:var(--muted);font-size:.9rem;margin-top:10px}.cert-name{font:800 clamp(1.5rem,7vw,2.4rem)/1.15 var(--font-display);border-bottom:1px solid var(--line);padding:0 .5em .25em;max-width:100%;overflow-wrap:anywhere}.cert-line{color:var(--muted);font-size:.9rem;margin-top:6px}.cert-score{font:800 clamp(2.6rem,12vw,4rem)/1 var(--font-display);color:var(--accent);font-variant-numeric:tabular-nums}.cert-score small{font-size:.45em;color:var(--muted);font-weight:600}.cert-pred{font-weight:600}.cert-scope{font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}.cert-meta{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;width:100%;margin-top:14px;font-size:.88rem;text-align:left}.cert-meta b{display:block;font:500 .65rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.cert-note{font-size:.72rem;color:var(--muted);margin:6px 0 0;max-width:46ch}.about{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:.92rem}.about h2{color:var(--ink)}.about p,.about ul{margin:0}.about ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:6px}.about strong{color:var(--ink);font-weight:600}.nojs{padding:12px 14px;border:1px solid var(--bad);border-radius:8px;background:var(--bad-bg);color:var(--bad)}@media(max-width:30rem){.btn.primary,.btn.ghost{flex:1 1 100%}.bar-row{grid-template-columns:1fr auto}.bar-row .tr{grid-column:1 / -1;order:3}}@media(prefers-reduced-motion:no-preference){.timer-bar{transition:width .12s linear}.opt,.chip span{transition:border-color .12s,background-color .12s}}