:root{
  --paper:#F7F9FF; --surface:#FFFFFF; --ink:#16203A; --muted:#55607F;
  --blue:#1F3A93; --blue-d:#132766; --on-blue:#FFFFFF; --tint:#EEF2FD;
  --rule:#DCE3F7; --rule-strong:#B9C6EE; --margin:#D6304A;
  --good:#17794E; --good-d:#0F5A39; --good-bg:#E4F5EC; --bad:#B8243B; --bad-bg:#FCE8EB;
  --gold:#B7791F; --gold-bg:#FDF3DC; --fire:#D9480F;
  --hand:"Playwrite FR Moderne","Segoe Script","Snell Roundhand","Bradley Hand",cursive;
  --body:"Atkinson Hyperlegible","Noto Sans Gurmukhi","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px; --lift:0 1px 0 rgba(22,32,58,.04),0 16px 34px -24px rgba(31,58,147,.5);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E142B; --surface:#161E3D; --ink:#E9EDFB; --muted:#A3AED0;
    --blue:#9DB2FF; --blue-d:#5D74C9; --on-blue:#0E142B; --tint:#1A2448;
    --rule:#222C55; --rule-strong:#34407A; --margin:#FF6B81;
    --good:#5FD4A0; --good-d:#2E9C6C; --good-bg:#12382B; --bad:#FF8597; --bad-bg:#40151E;
    --gold:#F2C14E; --gold-bg:#3A2E10; --fire:#FF8A4C;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
html:not([lang="en"]) body{line-height:1.7}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.page{max-width:1080px;margin:0 auto;padding:0 16px}
h1,h2,h3,p,ul,dl,dd,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--paper);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.top .page{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px}
.top img{display:block;height:24px;width:auto}
.top nav{display:flex;align-items:center;gap:8px;min-width:0}
.langsel{min-height:44px;padding:6px 10px;border:1.5px solid var(--rule-strong);border-radius:999px;color:var(--ink);background:var(--surface);font:inherit;font-size:.95rem;max-width:44vw}
.signin{font-weight:700;text-decoration:none;white-space:nowrap;padding:10px 6px;min-height:44px;display:inline-flex;align-items:center}

/* buttons: big, rounded, with a pressable edge */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 24px;border-radius:16px;border:0;background:var(--blue);color:var(--on-blue);font:inherit;font-weight:700;font-size:1.06rem;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--blue-d);transition:transform .08s ease,box-shadow .08s ease;text-align:center;line-height:1.25}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.btn.go{background:var(--good);box-shadow:0 4px 0 var(--good-d);color:#fff}
.btn.go:active{box-shadow:0 1px 0 var(--good-d)}
@media (prefers-color-scheme: dark){.btn.go{color:#0E142B}}
.btn.quiet{background:var(--surface);color:var(--blue);box-shadow:0 0 0 1.5px var(--rule-strong) inset,0 4px 0 var(--rule-strong)}
.btn.quiet:active{box-shadow:0 0 0 1.5px var(--rule-strong) inset,0 1px 0 var(--rule-strong)}
.btn.wide{width:100%}
.btn.sm{min-height:46px;padding:10px 16px;font-size:.98rem;border-radius:14px}
.link{background:none;border:0;padding:8px 0;color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}

.card{background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r);box-shadow:var(--lift)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.opts.one{grid-template-columns:1fr}
.opt{min-height:54px;padding:10px 12px;border-radius:14px;border:2px solid var(--rule-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:1.05rem;cursor:pointer;box-shadow:0 3px 0 var(--rule-strong);text-align:center}
.opts.one .opt{text-align:left}
.opt:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--rule-strong)}
.opt.good{border-color:var(--good);background:var(--good-bg);color:var(--good);font-weight:700;box-shadow:0 3px 0 var(--good)}
.opt.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);box-shadow:0 3px 0 var(--bad)}
.opt:disabled{cursor:default}
.why{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--tint);animation:pop .25s ease}
.why.ok{background:var(--good-bg)}
.why.no{background:var(--bad-bg)}
.why b{display:block;font-size:1.05rem}
.why.ok b{color:var(--good)}.why.no b{color:var(--bad)}
.why .x{display:block;margin-top:4px}
.say{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:8px 14px;border-radius:14px;border:2px solid var(--rule-strong);background:var(--surface);font-weight:700;color:var(--blue);cursor:pointer}
.say.big{min-height:64px;padding:12px 22px;font-size:1.1rem;margin-top:12px}
.say.playing{border-color:var(--blue);background:var(--tint)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.seg button{min-height:42px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--rule-strong);background:var(--surface);cursor:pointer;font-size:.95rem}
.seg button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-blue);font-weight:700}
.xp{display:inline-flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.xp span{padding:6px 12px;border-radius:999px;font-weight:700;font-size:.95rem}
.xp .g{background:var(--gold-bg);color:var(--gold)}
.xp .f{background:var(--bad-bg);color:var(--fire)}
.nextk{display:block;margin-top:16px;font-weight:700;color:var(--good)}
@keyframes pop{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
/* tool pages */
body{padding-bottom:24px}
.top{position:static}
.top a.home{display:inline-flex;align-items:center;min-height:44px}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
.tool-h{padding:18px 0 6px;text-align:center}
.tool-h .ic{font-size:2.2rem;line-height:1.2}
.tool-h h1{font-size:clamp(1.6rem,6.4vw,2.2rem);line-height:1.2;margin-top:4px}
html:not([lang="en"]) .tool-h h1{line-height:1.4}
.tool-h p{margin-top:8px;color:var(--muted)}
.panel{margin-top:16px;padding:18px 16px}
.bar{height:10px;border-radius:99px;background:var(--rule);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--good);border-radius:99px;transition:width .3s ease}
.meta{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;color:var(--muted);margin-top:8px}
.q{margin-top:14px;font-family:var(--hand);font-size:1.35rem;line-height:1.8;color:var(--blue)}
.lbl{font-weight:700;margin-top:14px;display:block}
.hint{font-size:.9rem;color:var(--muted);margin-top:4px}
.big-n{font-size:3rem;font-weight:700;line-height:1.1;text-align:center}
.center{text-align:center}
.next{margin-top:18px;padding:16px;border-radius:16px;background:var(--good-bg);text-align:center}
.next b{display:block;color:var(--good)}
.next p{margin-top:6px}
.next .btn{margin-top:12px;width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
select.inp{width:100%;min-height:52px;padding:10px 12px;border-radius:14px;border:2px solid var(--rule-strong);background:var(--surface);color:var(--ink);font:inherit}
.res-t{width:100%;border-collapse:collapse;margin-top:12px;font-size:.95rem}
.res-t td,.res-t th{padding:8px 4px;border-bottom:1px solid var(--rule);text-align:left}
.res-t td:last-child,.res-t th:last-child{text-align:right;font-weight:700}
.list{margin-top:10px;display:grid;gap:6px}
.list li{padding:8px 12px;border-radius:12px;background:var(--tint)}
.more{margin-top:26px}
.more h2{font-size:1.1rem}
.more ul{display:grid;gap:8px;margin-top:10px}
.more a{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:14px;background:var(--surface);border:1.5px solid var(--rule);text-decoration:none;color:var(--ink);font-weight:700}
.fine{font-size:.85rem;color:var(--muted);margin-top:12px}
footer{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);font-size:.88rem;color:var(--muted)}
footer a{display:inline-block;padding:6px 0;margin-right:14px}
@media (max-width:360px){.q{font-size:1.2rem}.grid2{grid-template-columns:1fr}}
/* narrow phones: let the logo shrink so the language menu never pushes the page sideways */
.top a.home{min-width:0;flex:0 1 auto}
.top img{max-width:100%;height:auto}
.top nav{flex:0 0 auto}
@media (max-width:380px){.langsel{max-width:42vw;font-size:.9rem;padding:6px 8px}}