:root{color:#17312f;font-synthesis:none;text-rendering:optimizelegibility;--ink:#17312f;--muted:#607673;--surface:#fff;--surface-soft:#edf7f5;--line:#d8e7e4;--brand:#0f766e;--brand-dark:#0a5c57;--brand-soft:#dff6f2;--accent:#facc15;--accent-soft:#fff8cf;--danger:#b42318;--danger-soft:#fff0ed;--success:#16794c;--success-soft:#e9f8ef;--shadow:0 20px 45px #0f4f481a;background:#f4f8f7;font-family:Inter,ui-rounded,SF Pro Rounded,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}*{box-sizing:border-box}html{background:#f4f8f7;min-width:320px;min-height:100%}body{background:radial-gradient(circle at 12% 8%,#facc151f,#0000 26rem),radial-gradient(circle at 91% 10%,#2dd4bf1c,#0000 28rem),#f4f8f7;min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,svg:focus-visible{outline-offset:3px;outline:3px solid #0f766e59}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.045em;max-width:760px;margin-bottom:14px;font-size:clamp(2rem,5vw,3.45rem);line-height:1.05}h2{letter-spacing:-.025em;margin-bottom:10px;font-size:clamp(1.35rem,3vw,2rem);line-height:1.15}h3{margin-bottom:10px;font-size:1.05rem}p{line-height:1.65}small{line-height:1.45}.app-shell{min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}.topbar{justify-content:space-between;align-items:center;width:min(1120px,100% - 32px);min-height:76px;margin:0 auto;padding:12px 0;display:flex}.brand-lockup{align-items:center;gap:12px;display:flex}.brand-lockup>span:last-child{gap:1px;display:grid}.brand-lockup strong{letter-spacing:-.015em;font-size:1rem}.brand-lockup small{color:var(--muted);font-size:.76rem}.brand-mark{background:var(--brand);color:#fff;border-radius:14px;place-items:center;width:44px;height:44px;font-size:1.25rem;font-weight:900;display:grid;box-shadow:0 9px 20px #0f766e33}.language-pill,.status-pill,.count-badge{letter-spacing:.04em;border-radius:999px;justify-content:center;align-items:center;min-height:30px;padding:5px 10px;font-size:.74rem;font-weight:800;display:inline-flex}.language-pill{border:1px solid var(--line);color:var(--brand);background:#ffffffbf}.progress-track{background:#dfeae8;border-radius:999px;width:min(1120px,100% - 32px);height:7px;margin:0 auto;overflow:hidden}.progress-track>span{border-radius:inherit;background:linear-gradient(90deg, var(--brand), #2dd4bf);height:100%;transition:width .28s;display:block}.page{width:min(960px,100% - 32px);margin:0 auto;padding:clamp(28px,5vw,66px) 0 64px}.page--compact{width:min(1100px,100% - 32px);padding-top:clamp(20px,4vw,46px)}.eyebrow{color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;font-size:.78rem;font-weight:900}.lede,.section-intro{max-width:720px;color:var(--muted);font-size:1.03rem}.hero-card{box-shadow:var(--shadow);background:linear-gradient(145deg,#fffffff5,#edf7f5f0);border:1px solid #ffffffe6;border-radius:34px;padding:clamp(28px,6vw,72px);position:relative;overflow:hidden}.hero-card:after{content:"";background:#0f766e12;border-radius:50%;width:330px;height:330px;position:absolute;bottom:-130px;right:-90px}.hero-card>*{z-index:1;position:relative}.hero-card__visual{color:var(--brand);align-items:center;gap:clamp(8px,2vw,18px);margin-bottom:32px;font-size:clamp(1.3rem,4vw,2rem);font-weight:900;display:flex}.hero-card__visual span{background:var(--surface);border-radius:22px;place-items:center;width:clamp(48px,9vw,72px);height:clamp(48px,9vw,72px);display:grid;box-shadow:0 12px 24px #0f4f481f}.hero-card__visual span:last-child{background:var(--accent);color:#4b3c00}.hero-card__visual i{font-style:normal}.promise-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 30px;display:grid}.promise-grid article{border:1px solid var(--line);background:#ffffffb8;border-radius:20px;gap:5px;min-height:126px;padding:18px;display:grid}.promise-grid strong{font-size:.95rem}.promise-grid span{color:var(--muted);font-size:.83rem;line-height:1.5}.fine-print{color:var(--muted);text-align:center;margin:14px 0 0;font-size:.78rem}.button{cursor:pointer;border:1px solid #0000;border-radius:14px;justify-content:center;align-items:center;min-height:48px;padding:11px 18px;font-weight:800;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(0)}.button:disabled{cursor:not-allowed;opacity:.48}.button--primary{background:var(--brand);color:#fff;box-shadow:0 10px 20px #0f766e33}.button--primary:hover:not(:disabled){background:var(--brand-dark)}.button--soft{background:var(--brand-soft);color:var(--brand-dark)}.button--ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}.button--wide{width:100%}.text-button{min-height:42px;color:var(--brand);cursor:pointer;background:0 0;border:0;padding:6px 10px;font-weight:800}.text-button--muted{color:var(--muted);font-weight:650}.page-actions{justify-content:space-between;align-items:center;gap:10px;margin-top:32px;display:flex}.page-actions--sticky{z-index:10;padding:14px 12px calc(14px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f4f8f7eb;border-top:1px solid #d8e7e4bf;margin-inline:-12px;position:sticky;bottom:0}.form-stack,.option-list{gap:14px;margin-top:26px;display:grid}.field{gap:8px;display:grid}.field>span,.field-group legend{color:var(--ink);font-weight:800}.field input,.manual-picker select{border:1px solid var(--line);background:var(--surface);width:100%;min-height:54px;color:var(--ink);border-radius:14px;padding:12px 15px}.field input{font-size:1.08rem}.field small{color:var(--muted)}.field-group{border:0;margin:8px 0 0;padding:0}.field-group legend{margin-bottom:12px}.chip-grid{flex-wrap:wrap;gap:9px;display:flex}.chip{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--ink);cursor:pointer;border-radius:999px;padding:9px 14px;font-weight:720}.chip--selected{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}.info-note,.fast-exit-note,.correction-note{border:1px solid var(--line);background:var(--surface-soft);color:var(--muted);border-radius:16px;padding:16px 18px;line-height:1.6}.option-card{border:1px solid var(--line);background:var(--surface);min-height:78px;color:var(--ink);cursor:pointer;text-align:left;border-radius:18px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 16px;transition:border-color .12s,background .12s,transform .12s;display:grid}.option-card:hover:not(:disabled){border-color:#9fc9c3;transform:translateY(-1px)}.option-card--selected{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}.option-card__copy{gap:4px;display:grid}.option-card__copy strong{font-size:.98rem}.option-card__copy small{color:var(--muted);font-size:.82rem}.option-card__icon,.option-card__check{place-items:center;display:grid}.option-card__icon{background:var(--surface-soft);border-radius:14px;width:42px;height:42px}.option-card__check{width:28px;height:28px;color:var(--brand);border-radius:50%;font-weight:900}.warmup-meta{color:var(--muted);justify-content:space-between;gap:12px;margin:22px 0 8px;font-size:.8rem;font-weight:800;display:flex}.warmup-meta span:first-child{color:var(--brand)}.child-reassurance{color:var(--muted);margin-bottom:18px}.question-layout{grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);align-items:start;gap:16px;display:grid}.question-card,.pen-panel{border:1px solid var(--line);background:var(--surface);border-radius:24px;box-shadow:0 12px 30px #0f4f4812}.question-card{min-height:470px;padding:clamp(22px,4vw,36px)}.question-card h2{text-align:center;margin:10px 0 24px;font-size:clamp(2rem,6vw,3.3rem)}.question-instruction{color:var(--muted);text-align:center;font-size:.85rem;font-weight:750}.question-visual{margin:16px 0 24px}.question-visual--groups{flex-wrap:wrap;justify-content:center;gap:18px;display:flex}.dot-group,.ten-frame{border:1px solid var(--line);background:var(--surface-soft);border-radius:16px;gap:8px;padding:12px;display:grid}.dot-group{grid-template-columns:repeat(3,30px)}.ten-frame{grid-template-columns:repeat(5,30px)}.dot{border:2px solid #b7ceca;border-radius:50%;width:30px;height:30px;display:block}.dot--filled{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 5px #ffffff40}.dot--empty{background:0 0}.number-line{justify-content:center;padding:28px 8px 12px;display:flex;overflow-x:auto}.number-line__point{min-width:42px;color:var(--muted);justify-items:center;display:grid;position:relative}.number-line__point:before{background:var(--line);content:"";width:100%;height:3px;position:absolute;top:6px;left:0}.number-line__point i{z-index:1;border:3px solid var(--brand);background:var(--surface);border-radius:50%;width:15px;height:15px;position:relative}.number-line__point--active i{background:var(--accent)}.number-line__point small{margin-top:7px;font-weight:800}.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.choice-button{border:2px solid var(--line);background:var(--surface);min-height:76px;color:var(--ink);cursor:pointer;border-radius:18px;padding:12px;font-size:1.3rem;font-weight:900}.choice-button--selected{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}.number-pad{width:min(330px,100%);margin:0 auto}.number-pad__display{border:2px solid var(--brand);background:var(--brand-soft);min-height:70px;color:var(--brand-dark);border-radius:17px;place-items:center;margin-bottom:10px;font-size:2rem;font-weight:900;display:grid}.number-pad__display span{color:#73908c;font-size:.9rem;font-weight:700}.number-pad__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.number-pad__grid button{border:1px solid var(--line);background:var(--surface);min-height:58px;color:var(--ink);cursor:pointer;border-radius:14px;font-size:1.25rem;font-weight:900}.number-pad__grid button:active{background:var(--brand-soft)}.number-pad__grid .number-pad__utility{background:var(--surface-soft);color:var(--muted);font-size:.95rem}.pen-panel{overflow:hidden}.pen-panel__header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:12px;padding:16px;display:flex}.pen-panel__header>span:first-child{gap:3px;display:grid}.pen-panel__header small{color:var(--muted);font-size:.72rem}.pen-panel__actions{gap:5px;display:flex}.pen-panel__actions button{border:1px solid var(--line);background:var(--surface);min-height:36px;color:var(--muted);cursor:pointer;border-radius:10px;padding:6px 9px;font-size:.73rem;font-weight:750}.pen-canvas{color:#183b38;cursor:crosshair;background:#fffef9;width:100%;min-height:250px;display:block}.pen-canvas--pen-aktif{touch-action:pan-y}.pen-canvas--sentuh,.pen-canvas--pad-nombor{touch-action:none}.result-hero{border:1px solid var(--line);background:linear-gradient(145deg, var(--surface), var(--brand-soft));text-align:center;box-shadow:var(--shadow);border-radius:26px;justify-items:center;margin:24px 0 18px;padding:clamp(24px,5vw,46px);display:grid}.result-hero__badge{background:var(--accent);color:#453600;border-radius:50%;place-items:center;width:58px;height:58px;margin-bottom:18px;font-size:1.5rem;font-weight:900;display:grid}.result-hero p{max-width:680px;color:var(--muted);margin-bottom:11px}.result-hero h2{color:var(--brand-dark)}.route-card{border:1px solid var(--line);background:var(--surface);border-radius:20px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:18px;display:grid}.route-card article{background:var(--surface-soft);border-radius:15px;align-content:center;gap:5px;min-height:88px;padding:14px;display:grid}.route-card span{color:var(--muted);font-size:.72rem;font-weight:700}.route-card i{color:var(--brand);font-size:1.4rem;font-style:normal;font-weight:900}.fast-exit-note{background:var(--accent-soft);color:#655817;margin-top:14px}.fast-exit-note p{margin:5px 0 0}.result-section,.manual-picker{border:1px solid var(--line);background:var(--surface);border-radius:18px;margin-top:22px;padding:18px}.tag-list{flex-wrap:wrap;gap:8px;display:flex}.tag-list span{background:var(--success-soft);color:var(--success);border-radius:999px;padding:7px 10px;font-size:.77rem;font-weight:800}.tag-list--focus span{background:var(--accent-soft);color:#6b5c0c}.manual-picker p{color:var(--muted)}.result-actions{gap:10px;max-width:580px;margin:28px auto 0;display:grid}.install-hint{background:var(--accent-soft);border:1px solid #f0dc63;border-radius:18px;grid-template-columns:auto minmax(0,1fr);gap:13px;margin-bottom:16px;padding:15px 17px;display:grid}.install-hint>span{background:var(--accent);border-radius:12px;place-items:center;width:38px;height:38px;font-size:1.2rem;display:grid}.install-hint p{color:#665b1c;margin:3px 0 0;font-size:.82rem}.today-card{background:var(--brand);color:#fff;box-shadow:var(--shadow);border-radius:25px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;margin:20px 0 16px;padding:clamp(22px,5vw,38px);display:grid}.today-card p{color:#ffffffc7;max-width:650px;margin-bottom:0}.status-pill{color:#fff;background:#ffffff29;margin-bottom:14px}.today-card__metric{background:var(--accent);color:#4d3f00;text-align:center;border-radius:50%;align-content:center;place-items:center;width:120px;height:120px;display:grid}.today-card__metric strong{font-size:1.8rem}.today-card__metric span{font-size:.7rem;font-weight:800}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px;display:grid}.panel{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:22px}.panel__header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.panel p{color:var(--muted)}.count-badge{background:var(--danger-soft);color:var(--danger)}.count-badge--done{background:var(--success-soft);color:var(--success)}.mastery-list{gap:12px;display:grid}.mastery-list article{border-bottom:1px solid var(--line);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;display:grid}.mastery-list article:last-child{border-bottom:0}.mastery-list article>div{gap:2px;display:grid}.mastery-list small{color:var(--muted)}.mastery-list b{color:var(--muted);font-size:.72rem}.mastery-dot{border-radius:50%;width:13px;height:13px}.mastery-dot--retained{background:var(--success)}.mastery-dot--practice{background:var(--accent)}.mastery-dot--locked{background:#c6d5d2}.marking-instruction{border:1px solid var(--line);background:var(--brand-soft);border-radius:18px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;margin:20px 0 16px;padding:16px;display:grid}.marking-instruction>div{background:var(--brand);color:#fff;border-radius:50%;place-items:center;width:42px;height:42px;font-weight:900;display:grid}.marking-instruction p{color:var(--muted);margin:0}.marking-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.mark-card{border:2px solid var(--line);background:var(--surface);min-height:190px;color:var(--ink);cursor:pointer;text-align:left;border-radius:20px;grid-template-columns:1fr 1fr;gap:12px;padding:20px;display:grid;position:relative}.mark-card>strong{grid-column:1/-1;padding-right:70px;font-size:1.45rem}.mark-card--wrong{border-color:var(--danger);background:var(--danger-soft)}.mark-card__number{background:var(--surface-soft);width:32px;height:32px;color:var(--muted);border-radius:50%;place-items:center;font-size:.78rem;font-weight:900;display:grid;position:absolute;top:14px;right:14px}.mark-card__answer,.mark-card__correct{background:var(--surface-soft);border-radius:14px;align-content:center;gap:4px;min-height:74px;padding:12px;display:grid}.mark-card__answer small,.mark-card__correct small{color:var(--muted)}.mark-card__answer b,.mark-card__correct b{font-size:1.25rem}.mark-card__state{color:var(--success);text-align:right;grid-column:1/-1;font-size:.75rem;font-weight:900}.mark-card--wrong .mark-card__state{color:var(--danger)}.correction-note{background:var(--danger-soft);color:#7e2e27;margin-top:14px}@media (max-width:780px){.promise-grid,.dashboard-grid,.marking-grid,.question-layout{grid-template-columns:1fr}.pen-panel{order:-1}.pen-canvas{min-height:190px}.today-card{grid-template-columns:1fr}.today-card__metric{width:95px;height:95px}}@media (max-width:560px){.topbar,.progress-track,.page,.page--compact{width:min(100% - 22px,960px)}.brand-lockup small{display:none}.hero-card{border-radius:24px;padding:24px 18px}.hero-card__visual{margin-bottom:24px}.promise-grid article{min-height:auto}.page-actions{flex-wrap:wrap}.page-actions .button--primary{flex:190px}.page-actions--sticky{justify-content:stretch}.page-actions--sticky .button{flex:auto;padding-inline:10px;font-size:.82rem}.question-card{min-height:auto;padding:20px 15px}.question-card h2{font-size:2rem}.choice-grid{grid-template-columns:1fr}.choice-button{min-height:58px}.dot-group,.ten-frame{gap:6px;padding:9px}.dot-group{grid-template-columns:repeat(3,24px)}.ten-frame{grid-template-columns:repeat(5,24px)}.dot{width:24px;height:24px}.route-card{grid-template-columns:1fr}.route-card i{text-align:center;transform:rotate(90deg)}.mark-card{grid-template-columns:1fr}.mark-card__answer,.mark-card__correct{min-height:62px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.onboarding-links{flex-wrap:wrap;justify-content:center;gap:.25rem;margin-top:.75rem;display:flex}.recovery-overlay{z-index:50;background:#0f172abf;place-items:center;padding:1rem;display:grid;position:fixed;inset:0;overflow-y:auto}.recovery-card{color:#334155;background:#fff;border-radius:1rem;width:min(100%,30rem);max-height:calc(100dvh - 2rem);padding:1.5rem;overflow-y:auto}.recovery-card h2{color:#0f172a;margin:.5rem 0}.recovery-card .button{margin-top:.75rem}.recovery-code{color:#0f766e;text-align:center;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;background:#f8fafc;border:2px dashed #0d9488;border-radius:.75rem;margin:1.25rem 0;padding:1rem .5rem;font:700 clamp(1rem,4vw,1.4rem) monospace}