/* Base reset (the page used to get this from its host) */
*,*::before,*::after{box-sizing:border-box}
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one narrow app column — stat bar, dialect picker, winding lesson path; lessons get a bottom answer sheet */
:root{
  --bg:#f2f5f1; --surface:#ffffff; --ink:#18201b; --muted:#5b685f; --line:#d9e1da; --sunk:#e6ece7;
  --d-bac:#c23b22; --d-trung:#7a3a9e; --d-nam:#12805a;
  --ok:#2b9445; --ok-bg:#ddf2e1; --bad:#cf3b32; --bad-bg:#fbe2df;
  --on-acc:#ffffff;
  --sea:#dce8ea; --land:#fbfcf9; --land2:#ebefe9; --border:#a3b2a9;
  --acc:var(--d-nam);
  --f-ui:"Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display:"Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1310; --surface:#171f1a; --ink:#e5ece7; --muted:#97a59b; --line:#29342c; --sunk:#1f2922;
  --d-bac:#f0745a; --d-trung:#b689dc; --d-nam:#3ec28d;
  --ok:#52c56f; --ok-bg:#15301c; --bad:#f2685e; --bad-bg:#3a1916; --on-acc:#0e1310;
  --sea:#0c1a1e; --land:#26322b; --land2:#18211b; --border:#4d5f54; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0e1310; --surface:#171f1a; --ink:#e5ece7; --muted:#97a59b; --line:#29342c; --sunk:#1f2922;
  --d-bac:#f0745a; --d-trung:#b689dc; --d-nam:#3ec28d;
  --ok:#52c56f; --ok-bg:#15301c; --bad:#f2685e; --bad-bg:#3a1916; --on-acc:#0e1310;
  --sea:#0c1a1e; --land:#26322b; --land2:#18211b; --border:#4d5f54; color-scheme:dark }

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
svg{flex:none}

#app{max-width:560px;margin:0 auto;min-height:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 120px;display:flex;flex-direction:column;gap:20px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding-block:14px 10px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;font-size:17px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;font:700 17px/1 var(--f-display)}
.stats{display:flex;gap:14px}
.stat{display:flex;align-items:center;gap:5px;font-weight:700;font-variant-numeric:tabular-nums}
.stat svg{width:20px;height:20px}
.stat.fire svg{fill:#e8792b}
.stat.xp svg{fill:#e2b007}
.stat.heart svg{fill:var(--bad)}

/* dialect chips */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chip{--c:var(--acc);display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 10px 9px;border-radius:12px;border:2px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font-weight:700;font-size:15px;min-width:0}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--c);margin-bottom:4px}
.chip small{font-weight:500;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--surface));color:var(--c)}

/* hero */
.hero{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:20px;border-radius:20px;background:color-mix(in srgb,var(--acc) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--acc) 22%,var(--line))}
.hero-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-h{font:900 clamp(28px,7vw,38px)/1.05 var(--f-display);letter-spacing:-.01em}
.motto{font:800 19px/1.3 var(--f-display);color:var(--acc)}
.tag{color:var(--muted);font-size:14px}
.prog{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{flex:1;height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);border-radius:99px;transition:width .4s ease}
.map{width:104px;height:auto}
.map path{fill:none;stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 5}
.map text{font:600 9.5px var(--f-ui);fill:var(--muted)}
.map g{cursor:pointer}
.map g.on text{fill:var(--ink);font-weight:800}

/* path */
.unit{display:flex;flex-direction:column;gap:18px}
.unit-head{padding:16px 18px;border-radius:20px;background:var(--acc);color:var(--on-acc)}
.unit-head .eyebrow{color:inherit;opacity:.8}
.unit-head h2{font:900 22px/1.2 var(--f-display)}
.unit-head p{font-size:14px;opacity:.85}
.path{display:flex;flex-direction:column;align-items:center;gap:22px;padding-block:6px 10px}
.node-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(var(--x));position:relative}
.node{width:72px;height:72px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--acc);color:var(--on-acc);box-shadow:0 6px 0 color-mix(in srgb,var(--acc) 65%,#000);transition:transform .08s}
.node svg{width:30px;height:30px;fill:currentColor}
.node:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--acc) 65%,#000)}
.node.done{background:color-mix(in srgb,var(--acc) 80%,var(--surface))}
.node.locked{background:var(--sunk);color:var(--muted);box-shadow:0 6px 0 var(--line);cursor:not-allowed}
.node.current{outline:4px solid color-mix(in srgb,var(--acc) 30%,transparent);outline-offset:5px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{outline-offset:9px;outline-color:color-mix(in srgb,var(--acc) 12%,transparent)}}
.node-label{font-size:13px;font-weight:600;color:var(--muted)}
.start-tag{position:absolute;top:-34px;background:var(--surface);color:var(--acc);border:2px solid var(--line);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:9px;white-space:nowrap}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tabs-in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-block:8px}
.tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:12px;border:2px solid transparent;background:none;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tab svg{width:22px;height:22px;fill:currentColor}
.tab.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,var(--line));background:color-mix(in srgb,var(--acc) 8%,var(--surface))}

/* buttons */
.btn{--deep:color-mix(in srgb,var(--acc) 68%,#000);border:0;border-radius:14px;padding:14px 22px;background:var(--acc);color:var(--on-acc);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 0 var(--deep);cursor:pointer;transition:transform .06s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--deep)}
.btn:disabled{background:var(--sunk);color:var(--muted);box-shadow:0 4px 0 var(--line);cursor:default;transform:none}
.btn.ghost{background:var(--surface);color:var(--acc);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}

/* lesson */
.v-lesson,.v-done,.v-fail{padding-bottom:200px}
.lhead{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;align-items:center;gap:14px;padding-block:16px 8px}
.x{width:36px;height:36px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.x svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.lhead .bar{height:14px}
.lhead .bar i{background:var(--acc);box-shadow:inset 0 4px 0 rgba(255,255,255,.25)}
.stage{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.q{font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.q b{color:var(--acc)}
.quote{margin:0;align-self:flex-start;font:800 30px/1.2 var(--f-display);padding:14px 18px;border-radius:16px;border:2px solid var(--line);background:var(--surface);position:relative}
.quote.en{font:600 20px/1.35 var(--f-ui)}
.sub{color:var(--muted);font-size:14px}
.sub b{color:var(--ink)}
.opts{display:grid;gap:10px}
.opts.big{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:16px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);cursor:pointer;font-weight:600;font-size:17px;min-width:0}
.opts.big .opt{font:800 23px/1.2 var(--f-display);padding:18px 16px;justify-content:center;position:relative}
.opts.big .opt kbd{position:absolute;left:10px;top:8px}
.opts.big .opt{flex-direction:column;gap:4px}
.again{font:700 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);opacity:.85;animation:fadein .2s ease}
.opts:not(.big) .again{margin-left:auto;text-align:right}
@keyframes fadein{from{opacity:0}}
.opt kbd{font:700 11px var(--f-ui);color:var(--muted);border:1.5px solid var(--line);border-radius:6px;padding:1px 6px}
.opt:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 3%,var(--surface))}
.opt.sel{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--surface))}
.opt.right{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
.opt:disabled{cursor:default}
.opt.gone{opacity:.35}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match .col{display:grid;gap:10px;align-content:start}
.match .opt{justify-content:center;text-align:center;font-size:16px;min-height:58px}
.match .opt.w{font:800 19px/1.2 var(--f-display)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.line{min-height:62px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding:10px 0;border-bottom:2px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0 58px,var(--line) 58px 60px)}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-top:8px}
.tile{padding:9px 14px;border-radius:12px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);font-weight:600;font-size:17px;cursor:pointer}
.tile.used{background:var(--sunk);color:transparent;border-color:var(--sunk)}
.card-body{font-size:16px;color:var(--ink);max-width:62ch}
.exrows{display:grid;gap:8px;padding:14px;border-radius:16px;background:var(--surface);border:2px solid var(--line)}
.exr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.exr .w{font:800 22px/1.2 var(--f-display)}
.exr .w.acc{color:var(--acc)}
.exr .ar{color:var(--muted)}
.exhead{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.lfoot{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-top:2px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lfoot.ok{background:var(--ok-bg);border-color:transparent;--acc:var(--ok)}
.lfoot.bad{background:var(--bad-bg);border-color:transparent;--acc:var(--bad)}
.lfoot-in{max-width:560px;margin:0 auto;padding-block:16px;display:flex;flex-direction:column;gap:12px}
.lfoot-in .btn{width:100%}
.fb{display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-h{font-weight:800;font-size:20px;color:var(--acc)}
.fb-a{font-size:15px;color:var(--acc)}
.fb-why{font-size:14px;color:var(--ink)}
.hint{font-size:14px;color:var(--muted)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.sc{--c:var(--acc);display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--surface) 70%,transparent);min-width:0}
.sc span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.sc b{font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.sc.me{box-shadow:inset 0 0 0 2px var(--c)}

/* done / fail */
.end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:48px}
.end-h{font:900 clamp(34px,9vw,46px)/1.05 var(--f-display);color:var(--acc)}
.end p{color:var(--muted);max-width:40ch}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:10px}
.tl{border:2px solid var(--acc);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.tl span{background:var(--acc);color:var(--on-acc);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px}
.tl b{font-size:22px;padding:10px 4px;font-variant-numeric:tabular-nums}
.end-btns{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:18px}

/* compare */
.pg-h{font:700 30px/1.1 var(--f-display);padding-top:20px}
.pg-sub{color:var(--muted);font-size:15px;max-width:60ch}
.search{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:500 16px var(--f-ui)}
.search:focus{border-color:var(--acc);outline:none}
.tbl-wrap{overflow-x:auto;border:2px solid var(--line);border-radius:14px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);position:sticky;top:0;background:var(--surface)}
th i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px}
td.en{color:var(--muted);width:26%}
td.f{font-weight:600}
td.diff{color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
tr.grp td{background:var(--sunk);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
.note{font-size:13px;color:var(--muted);max-width:60ch}

/* explore */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--sunk)}
.seg button{border:0;background:none;padding:9px 6px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--surface);color:var(--acc);box-shadow:0 1px 0 var(--line)}
.rchips{display:flex;flex-wrap:wrap;gap:8px}
.rchip{--c:var(--ink);border:2px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px;font-weight:600;font-size:13.5px;cursor:pointer}
.rchip.on{border-color:var(--c);color:var(--c)}
.pcards{display:grid;gap:12px}
.pcard{padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--muted))}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pcard h3{font:700 22px/1.2 var(--f-display)}
.pc-known{font-weight:600}
.pc-hist{color:var(--muted);font-size:14.5px}
.provs{display:flex;flex-direction:column;gap:20px}
.pgrp{display:grid;gap:8px}
.prow{padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.prow div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prow b{font-size:16px}
.prow p{font-size:14px;color:var(--muted)}
.tline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tline li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding-block:14px;border-bottom:1px solid var(--line)}
.tline li>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ty{font:700 17px/1.3 var(--f-display);color:var(--acc);font-variant-numeric:tabular-nums}
.tline h3{font-size:16px;font-weight:700}
.tline p{font-size:14.5px;color:var(--muted)}
.tplace{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
@media (min-width:540px){ .pcards{grid-template-columns:1fr 1fr} }
button.pcard{font:inherit;color:inherit;text-align:left;cursor:pointer}
.pcard .pc-name{font:700 22px/1.2 var(--f-display);display:block}
.pcard.on{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.pdetail{padding:18px;border-radius:16px;background:color-mix(in srgb,var(--c) 8%,var(--surface));border:2px solid var(--c);display:flex;flex-direction:column;gap:6px}
.pdetail .pd-name{display:flex;align-items:center;gap:8px}
.pdetail h3{font:700 26px/1.15 var(--f-display)}
.sub-h{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vnmap{display:block;width:100%;max-width:100%;height:auto;border-radius:18px;background:var(--sea);border:1px solid var(--line)}
.vnmap .vn{fill:var(--land);stroke:var(--border);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vnmap .nb{fill:var(--land2);stroke:var(--border);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vnmap .lbl{fill:var(--muted);font-family:var(--f-ui);font-weight:700;letter-spacing:.14em}
.vnmap .sealbl{fill:var(--muted);font-family:var(--f-display);font-style:italic;opacity:.8}
.vnmap .isl{fill:var(--border)}
.pt{cursor:pointer}
.pt circle{fill:var(--c);stroke:var(--land);vector-effect:non-scaling-stroke;stroke-width:1.5}
.pt.on circle{stroke:var(--ink);stroke-width:2.5}
.pt.dim{opacity:.28}
.pt text{fill:var(--ink);font-family:var(--f-ui);font-weight:700;paint-order:stroke;stroke:var(--sea);stroke-linejoin:round}
.pt.on text{fill:var(--c)}
.tplace{border:0;background:none;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}

/* audio */
.say{flex:none;width:44px;height:44px;border-radius:12px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);color:var(--acc);display:grid;place-items:center;cursor:pointer}
.say svg{width:22px;height:22px;fill:currentColor}
.say.sm{width:32px;height:32px;border-radius:9px;border-bottom-width:2px}
.say.sm svg{width:16px;height:16px}
.say.speaking{background:color-mix(in srgb,var(--acc) 12%,var(--surface))}
.qrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sayw{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:4px}
button.sc{border:0;font:inherit;text-align:left;cursor:pointer}
.sc b{display:flex;align-items:center;gap:4px}
.sc b svg{width:12px;height:12px;fill:var(--c);flex:none}
.stats{align-items:center}
.lhead .say.sm{flex:none}
.sheet-bg{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.4)}
.sheet{position:fixed;z-index:31;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.sheet-h{display:flex;justify-content:space-between;align-items:center}
.sheet-h h2{font:700 24px/1.2 var(--f-display)}
.vlist{display:grid;gap:8px}
.vopt{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:2px solid var(--line);cursor:pointer}
.vopt:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--surface))}
.vopt input{accent-color:var(--acc);width:18px;height:18px}
.vopt span{display:flex;flex-direction:column;min-width:0}
.vopt small{color:var(--muted);font-size:12.5px}
.vwarn{padding:12px 14px;border-radius:12px;background:var(--bad-bg);color:var(--ink);font-weight:600}
.vtips{display:grid;gap:6px;font-size:14px;padding:14px;border-radius:12px;background:var(--sunk)}
.vtips p{color:var(--muted)}
.vtips p b{color:var(--ink)}
/* Bông the mascot */
.bong{display:block;flex:none;overflow:visible}
.bong.bob{animation:bob 2.6s ease-in-out infinite}
.bong .bo-ears{transform-origin:60px 46px;animation:ears 4s ease-in-out infinite}
.bong .bo-line{fill:none;stroke:#1b2230;stroke-width:3.4;stroke-linecap:round}
.bong .bo-tear{fill:#8fd0f7}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes ears{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-4deg)}95%{transform:rotate(4deg)}}
.cheer-in{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.logo-bong{width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--acc) 16%,var(--surface));display:grid;place-items:center;overflow:hidden}

/* speech bubbles */
.speech{display:flex;align-items:flex-end;gap:8px}
.bubble{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:20px;border:2px solid var(--line);background:var(--surface);min-width:0;margin-bottom:14px}
.bubble::before{content:"";position:absolute;left:-9px;bottom:16px;width:14px;height:14px;background:var(--surface);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.bubble .quote{border:0;padding:0;background:none}
.greet{display:flex;align-items:flex-end;gap:6px;padding:16px 16px 0;border-radius:22px;background:color-mix(in srgb,var(--acc) 10%,var(--surface));border:2px solid color-mix(in srgb,var(--acc) 25%,var(--line))}
.greet .bubble{flex:1;flex-direction:column;align-items:flex-start;gap:2px}
.greet .bubble b{font-size:19px;font-weight:900;color:var(--acc)}
.greet .bubble span{font-size:14px;color:var(--muted);font-weight:600}
.greet .btn{margin-top:8px;padding:10px 18px;font-size:14px}

/* daily goal */
.goal{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--surface);border:2px solid var(--line)}
.goal svg{width:56px;height:56px;flex:none}
.goal .ring-bg{fill:none;stroke:var(--sunk);stroke-width:7}
.goal .ring{fill:none;stroke:#f2a516;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .6s ease}
.goal b{font-size:16px;font-weight:800}
.goal small{display:block;color:var(--muted);font-size:13.5px;font-weight:600}

/* feedback with Bông */
.fb-row{display:flex;align-items:flex-start;gap:12px}
.fb-row .fb{flex:1}
.combo{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;background:#f2a516;color:#2a1a00;font-size:12px;font-weight:900;letter-spacing:.04em;vertical-align:middle}

/* settings + dev */
.tog{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);cursor:pointer}
.tog span{display:flex;flex-direction:column;min-width:0}
.tog small{color:var(--muted);font-size:13px}
.tog input{appearance:none;flex:none;width:46px;height:28px;border-radius:99px;background:var(--sunk);border:2px solid var(--line);position:relative;cursor:pointer;transition:background .2s}
.tog input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.tog input:checked{background:var(--acc);border-color:var(--acc)}
.tog input:checked::after{transform:translateX(18px)}
.devtag{font-size:10.5px;font-weight:900;letter-spacing:.12em;padding:3px 7px;border-radius:7px;background:#f2a516;color:#2a1a00}
.node.open{background:color-mix(in srgb,var(--acc) 55%,var(--surface));color:var(--on-acc)}
.skip{border:0;background:none;color:var(--muted);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:6px}
.gear svg{width:18px;height:18px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:40}

#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:97;max-width:min(440px,calc(100% - 32px));padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* layouts: phone is the base; tablet widens the column; computer adds a sidebar and two-column views */
.side-brand{display:none}
.home,.home-side,.home-main,.xplaces,.xmap,.xlist{display:flex;flex-direction:column;gap:20px;min-width:0}
@media (hover:none){ .opt kbd{display:none} .opts.big .opt kbd{display:none} }
@media (min-width:640px){
  #app{max-width:720px}
  .v-lesson,.v-done,.v-fail{max-width:640px!important}
  .lfoot-in{max-width:640px}
  .q{font-size:25px}
  .quote{font-size:34px}
}
@media (min-width:1000px){
  body.nav{padding-left:248px}
  body.nav #app{max-width:1120px;padding-left:40px;padding-right:40px}
  .tabs{top:0;right:auto;width:248px;border-top:0;border-right:1px solid var(--line);padding:20px 16px;padding-left:max(16px,env(safe-area-inset-left,0px))}
  .tabs-in{grid-template-columns:1fr;max-width:none;margin:0;gap:6px;padding-block:0}
  .side-brand{display:flex;padding:6px 10px 26px}
  .tab{justify-content:flex-start;font-size:15px;padding:12px 14px}
  .top .brand{visibility:hidden}
  .home{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
  .home-side{position:sticky;top:84px;order:2}
  .home-main{order:1;padding-top:8px}
  .xplaces{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
  .xmap{position:sticky;top:84px}
  .xlist .pcards{grid-template-columns:1fr}
  .provs{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .pg-h{font-size:36px}
  .opt:hover:not(:disabled){transform:translateY(-1px)}
}

@media (max-width:420px){
  .tline li{grid-template-columns:72px 1fr}
  .hero{grid-template-columns:1fr}
  .map{display:none}
  .opts.big .opt{font-size:19px}
  .chip small{display:none}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ---------- home v2: next-lesson card, dialect pills, difficulty, lighter units ---------- */
.home-side{order:2}
.home-main{order:1}
.dpick{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:16px;background:var(--sunk)}
.dpick button{--c:var(--acc);display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 4px;border:0;border-radius:12px;background:none;font-weight:800;font-size:15px;color:var(--muted);cursor:pointer}
.dpick button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.dpick button.on{background:var(--surface);color:var(--c);box-shadow:0 1px 0 var(--line),0 2px 6px rgba(0,0,0,.08)}
.next{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px;background:color-mix(in srgb,var(--acc) 12%,var(--surface));border:2px solid color-mix(in srgb,var(--acc) 30%,var(--line))}
.next-top{display:flex;align-items:center;gap:14px}
.next-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.next-txt b{font-size:24px;font-weight:900;color:var(--acc);line-height:1.15}
.next-txt span{font-size:14.5px;font-weight:700;color:var(--muted)}
.next-go{width:100%;font-size:16px;padding:16px}
.next-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.diffpick{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--sunk);min-width:220px}
.diffpick button{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 4px;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer}
.diffpick button b{font-size:13.5px;font-weight:800}
.diffpick button small{font-size:11.5px;font-weight:700;opacity:.85}
.diffpick button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.diffpick button.on small{color:var(--bad)}
.diffpick.wide{min-width:0}
.diff-note{font-size:13px;color:var(--muted);font-weight:600;margin-top:-6px}
.mini-goal{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:700}
.mini-goal svg{width:36px;height:36px}
.mini-goal b{color:var(--ink);font-weight:900}
.mini-goal .ring-bg{fill:none;stroke:var(--sunk);stroke-width:5}
.mini-goal .ring{fill:none;stroke:#f2a516;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.unit-head{display:flex;justify-content:space-between;align-items:center;gap:12px;background:color-mix(in srgb,var(--acc) 9%,var(--surface));color:var(--ink);border:2px solid color-mix(in srgb,var(--acc) 22%,var(--line))}
.unit-head .eyebrow{color:var(--acc);opacity:1}
.unit-head p{color:var(--muted);opacity:1}
.unit.active .unit-head{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.unit.active .unit-head .eyebrow,.unit.active .unit-head p{color:var(--on-acc);opacity:.85}
.unit-prog{display:flex;align-items:center;gap:4px;font-weight:900;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.unit-prog svg{width:18px;height:18px;fill:currentColor}
.unit.complete .unit-prog{color:var(--ok)}
.node.locked{opacity:.55}
.hearts{display:flex;align-items:center;gap:2px}
.hearts i{display:grid;width:20px;height:20px}
.hearts svg{width:20px;height:20px;fill:var(--bad)}
.hearts i.lost svg{fill:var(--sunk)}
.hearts b{font-size:17px;font-weight:900;margin-left:3px}
.heart-loss{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:14px;font-weight:900;color:var(--bad);vertical-align:middle}
.heart-loss svg{width:15px;height:15px;fill:var(--bad)}
@media (min-width:1000px){ .home-side{order:2} .next{padding:22px} }

/* ---------- Audio check (developer mode) ---------- */
.tabs-in{grid-template-columns:repeat(var(--n,3),1fr)}
@media (min-width:1000px){ .tabs-in{grid-template-columns:1fr} }
.al-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rchip b{font-weight:900;margin-left:2px}
.al-all{padding:10px 16px;font-size:13px}
.al-list{display:grid;gap:6px}
.al-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;background:var(--surface);border:2px solid var(--line);transition:border-color .15s}
.al-row.playing{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--surface))}
.al-row.flagged{border-color:var(--bad)}
.al-row .say:disabled{opacity:.3;cursor:not-allowed}
.al-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.al-txt b{font-size:17px;font-weight:800;overflow-wrap:anywhere}
.al-txt small{font-size:12.5px;color:var(--muted);font-weight:600}
.al-badge{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.st-borrowed .al-badge{background:color-mix(in srgb,#f2a516 18%,transparent);color:#c98500}
.st-missing .al-badge{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.al-flag{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:2px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.al-flag svg{width:16px;height:16px;fill:currentColor}
.al-flag[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:#fff}
.al-redo{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--bad-bg);border:2px solid color-mix(in srgb,var(--bad) 40%,var(--line));font-size:14px}
.al-redo p{color:var(--muted);font-size:13px}
.al-cmd{display:flex;gap:8px;align-items:center}
.al-cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.al-cmd .btn{padding:9px 14px;font-size:12px}
.al-redo .skip{align-self:flex-start}
@media (max-width:999px){
  .tab{flex-direction:column;gap:3px;padding:7px 4px;font-size:11px;letter-spacing:.06em;min-width:0}
  .tab svg{width:22px;height:22px}
}

/* "needs review" markers (developer mode) */
.rv{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,#f2a516 22%,transparent);color:#c98500;vertical-align:middle}
.rv-row td.en{font-weight:700}
.rv-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}

/* listening exercises */
.listen-bubble{gap:10px}
.listen-btn{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:16px;border:0;background:var(--acc);color:var(--on-acc);font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 4px 0 color-mix(in srgb,var(--acc) 65%,#000)}
.listen-btn svg{width:26px;height:26px;fill:currentColor}
.listen-btn:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--acc) 65%,#000)}
.listen-btn.slow{background:var(--surface);color:var(--acc);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);padding:10px 14px}
.listen-btn.slow svg{width:20px;height:20px}
.listen-reveal{font-size:24px;font-weight:900;color:var(--acc)}
/* practice card */
.practice{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--surface);border:2px solid color-mix(in srgb,#f2a516 45%,var(--line))}
.practice.idle{border-color:var(--line)}
.practice-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,#f2a516 20%,transparent)}
.practice-ic svg{width:24px;height:24px;fill:#e09a10}
.practice div{flex:1;min-width:0;display:flex;flex-direction:column}
.practice b{font-size:16px;font-weight:900}
.practice small{font-size:13px;color:var(--muted);font-weight:600}
.practice .btn{--acc:#f2a516;color:#2a1a00;padding:11px 16px;font-size:13px}

/* continue without reaching for the bottom button */
.opt.right{cursor:pointer}
.opt.right .again{color:var(--ok)}
.v-lesson .stage{cursor:default}
.go-hint{display:block;text-align:center;font-size:12px;font-weight:700;color:var(--muted);margin-top:-4px}
.lfoot.ok .go-hint,.lfoot.bad .go-hint{color:color-mix(in srgb,var(--acc) 70%,var(--ink))}

/* Play all controls */
.al-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.al-prog{font-size:13px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}

/* floating Play all bar: pinned above the tab bar (phone) or the bottom of the window (desktop) */
.al-now{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:7;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.al-now-in{pointer-events:auto;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:var(--surface);border:2px solid var(--acc);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.al-now-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.al-now-txt b{font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-now-txt small{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.al-now .btn{padding:10px 14px;font-size:12.5px;white-space:nowrap}
.v-audiolab{padding-bottom:200px}
.al-row{scroll-margin-bottom:170px;scroll-margin-top:90px}
@media (min-width:1000px){ .al-now{bottom:20px;left:248px} }
.btn kbd.key{font:800 10px var(--f-ui);letter-spacing:.06em;padding:2px 5px;margin-left:4px;border-radius:5px;background:color-mix(in srgb,var(--on-acc) 22%,transparent);vertical-align:middle}
@media (hover:none){ .btn kbd.key{display:none} }


.ed-tag{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}

/* ---------- clip editor (src/editor.js): an Audition-style window ---------- */
body.xe-open{overflow:hidden}
.xe{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.xe-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.xe-win{position:relative;width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden}
.xe-head{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.xe-title{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.xe-title b{font-size:20px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xe-title small{font-size:12.5px;color:var(--muted);font-weight:700}
.xe-flag{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,#f2a516 22%,transparent);color:#d18b00;white-space:nowrap}
.xe-flag.xe-edited{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.xe-head-btns{display:flex;gap:8px;align-items:center}
.xe-btn{border:0;border-radius:10px;padding:9px 14px;font:800 13px var(--f-ui);cursor:pointer;background:var(--sunk);color:var(--ink)}
.xe-btn.primary{background:var(--acc);color:var(--on-acc)}
.xe-btn.ghost{background:none;border:1.5px solid var(--line);color:var(--muted)}
.xe-btn.danger{background:var(--bad);color:#fff}
.xe-btn:disabled{opacity:.5;cursor:default}
.xe-btn kbd{font:800 10px var(--f-ui);opacity:.75;margin-left:4px}
.xe-icon{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer}
.xe-icon svg{width:22px;height:22px;fill:currentColor}
.xe-toolbar{display:flex;flex-wrap:wrap;gap:6px 10px;padding:8px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--sunk) 55%,var(--surface))}
.xe-grp{display:flex;align-items:center;gap:2px;padding-right:10px;border-right:1px solid var(--line)}
.xe-grp:last-child{border-right:0}
.xe-tb{display:flex;align-items:center;gap:5px;height:32px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--ink);font:700 12px var(--f-ui);cursor:pointer}
.xe-tb svg{width:17px;height:17px;fill:currentColor;flex:none}
.xe-tb:hover:not(:disabled){background:var(--sunk)}
.xe-tb.on{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc)}
.xe-tb:disabled{opacity:.35;cursor:default}
.xe-field{display:flex;align-items:center;gap:6px;font:700 12px var(--f-ui);color:var(--muted);padding:0 6px}
.xe-field input[type=range]{width:90px;accent-color:var(--acc)}
.xe-field input[type=number]{width:54px;padding:5px 6px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 12px var(--f-ui)}
.xe-field b{min-width:32px;color:var(--ink);font-variant-numeric:tabular-nums}
.xe-stage{position:relative;display:flex;flex-direction:column;gap:0;padding:10px 12px 8px;min-height:0}
.xe-ruler{display:block;width:100%;height:26px;cursor:pointer;border-radius:8px 8px 0 0}
.xe-wave{display:block;width:100%;height:clamp(180px,38vh,360px);touch-action:none}
.xe-over{display:block;width:100%;height:40px;margin-top:8px;border-radius:8px;cursor:pointer;touch-action:none}
.xe-confirm{position:absolute;inset:auto 24px 24px auto;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--surface);border:2px solid var(--bad);box-shadow:0 12px 30px rgba(0,0,0,.35);font-weight:700;font-size:14px}
.xe-confirm[hidden]{display:none}
.xe-transport{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line)}
.xe-transport .xe-grp{border-right:0;gap:4px}
.xe-transport .xe-tb span{display:none}
.xe-play{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--acc);color:var(--on-acc);cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--acc) 60%,#000)}
.xe-play svg{width:24px;height:24px;fill:currentColor}
.xe-clock{display:flex;flex-direction:column;min-width:120px}
.xe-clock b{font:700 26px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:var(--acc);font-variant-numeric:tabular-nums}
.xe-clock small{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.xe-selbox{display:flex;align-items:center;gap:12px;margin-left:auto;font:700 12px var(--f-ui);color:var(--muted);flex-wrap:wrap}
.xe-selbox label{display:flex;align-items:center;gap:6px}
.xe-selbox input{width:74px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);font:700 13px ui-monospace,Menlo,monospace}
.xe-selbox b{color:var(--ink);font:700 13px ui-monospace,Menlo,monospace}
.xe-status{display:flex;align-items:center;gap:14px;padding:7px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:600;background:color-mix(in srgb,var(--sunk) 55%,var(--surface))}
.xe-tip{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xe-link{display:flex;align-items:center;gap:5px;border:0;background:none;color:var(--muted);font:800 12px var(--f-ui);cursor:pointer}
.xe-link svg{width:15px;height:15px;fill:currentColor}
.xe-help{position:absolute;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.xe-help[hidden]{display:none}
.xe-help-in{width:min(560px,100%);max-height:100%;overflow:auto;background:var(--surface);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.xe-help-in h3{font-size:18px;font-weight:900;margin:0}
.xe-help-in table{border-collapse:collapse;font-size:13.5px}
.xe-help-in td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.xe-help-in kbd{font:800 11.5px ui-monospace,Menlo,monospace;padding:2px 6px;border-radius:6px;background:var(--sunk);white-space:nowrap}
.xe-help-in .xe-btn{align-self:flex-end}
@media (max-width:760px){
  .xe{padding:0}
  .xe-win{height:100%;border-radius:0;max-height:none}
  .xe-head-btns .xe-btn.ghost{display:none}
  .xe-flag{display:none}
  .xe-tip{display:none}
  .xe-selbox{margin-left:0}
}
@media (hover:none){ .xe-btn kbd{display:none} }

/* ---------- Kids mode (src/kids.js): one bright, soft look whatever the device theme ---------- */
.kids-entry{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border-radius:22px;border:2px solid #ffd27a;background:linear-gradient(120deg,#fff4d6,#ffe1ec);color:#3b2a1a;text-align:left;cursor:pointer;font:inherit}
.kids-entry-pic{flex:none;width:64px;display:grid;place-items:center}
.kids-entry b{display:block;font-size:17px;font-weight:900}
.kids-entry small{font-size:13px;font-weight:600;color:#7a5a3a}
.kids-entry-go{margin-left:auto;font-size:24px;font-weight:900;color:#ff8a3d}
body.kids-on{background:#dff3ff;overflow-x:hidden}
.v-kids{max-width:none!important;padding:0!important;gap:0!important}
.kids{min-height:100vh;min-height:100dvh;color:#2b2f45;font-family:var(--f-ui);background:radial-gradient(circle at 15% 10%,#fff 0 7%,transparent 7.5%),radial-gradient(circle at 85% 18%,#fff 0 5%,transparent 5.5%),linear-gradient(#bfe6ff,#e9f7ff 60%,#fff4dc);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;padding-bottom:env(safe-area-inset-bottom,0px)}
.kids button{font-family:var(--f-ui);-webkit-tap-highlight-color:transparent}
.k-top{display:flex;justify-content:space-between;align-items:center;padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.k-back{width:64px;height:64px;border-radius:50%;border:0;background:#fff;color:#2b2f45;font-size:32px;font-weight:900;box-shadow:0 5px 0 #c9dcea;cursor:pointer}
.k-back:active{transform:translateY(4px);box-shadow:0 1px 0 #c9dcea}
.k-lock{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.55);display:grid;place-items:center;font-size:18px;cursor:pointer;opacity:.7;touch-action:none}
.k-lock span{position:relative;z-index:1}
.k-lock-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.k-lock-ring circle{fill:none;stroke:#ff8a3d;stroke-width:3;stroke-dasharray:101;stroke-dashoffset:101}
.k-lock.holding{opacity:1}
.k-lock.holding .k-lock-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 3s linear}
.k-home{display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 16px 32px}
.k-hello{display:flex;align-items:center;gap:6px}
.k-hello .bong{animation:k-bounce 2.4s ease-in-out infinite}
.k-bubble{position:relative;padding:14px 22px;border-radius:26px;background:#fff;font-size:30px;font-weight:900;color:#ff8a3d;box-shadow:0 6px 0 #ffe0c2}
.k-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(560px,100%)}
.k-act{--k:#ffb84d;display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 10px 16px;border:0;border-radius:32px;background:var(--k);color:#fff;cursor:pointer;box-shadow:0 8px 0 color-mix(in srgb,var(--k) 70%,#000)}
.k-act:active{transform:translateY(6px);box-shadow:0 2px 0 color-mix(in srgb,var(--k) 70%,#000)}
.k-act-e{font-size:clamp(56px,14vw,84px);line-height:1.1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.k-act b{font-size:24px;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.k-act small{font-size:12px;font-weight:800;opacity:.85}
.k-page{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 16px 40px}
.k-themes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.k-theme{--k:#ffb84d;width:68px;height:68px;border-radius:22px;border:4px solid #fff;background:#ffffffaa;font-size:36px;cursor:pointer;box-shadow:0 4px 0 #c9dcea}
.k-theme.on{background:var(--k);border-color:#fff;transform:scale(1.08);box-shadow:0 4px 0 color-mix(in srgb,var(--k) 70%,#000)}
.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;width:min(900px,100%)}
.k-card{--k:#ffb84d;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border-radius:30px;border:5px solid var(--k);background:#fff;cursor:pointer;box-shadow:0 7px 0 color-mix(in srgb,var(--k) 60%,#fff)}
.k-card:active{transform:translateY(5px);box-shadow:0 2px 0 color-mix(in srgb,var(--k) 60%,#fff)}
.k-pic{font-size:clamp(64px,16vw,96px);line-height:1.1}
.k-word{font-size:20px;font-weight:900;color:#2b2f45}
.k-card.pop{animation:k-pop .5s cubic-bezier(.3,1.8,.5,1)}
.k-card.big{width:min(42vw,260px);aspect-ratio:1;justify-content:center;max-width:100%}
.k-card.big .k-pic{font-size:clamp(90px,24vw,150px)}
.k-card.wobble{animation:k-wobble .5s}
.k-card.yay{border-color:#2ed573;background:#eafff1;animation:k-pop .6s cubic-bezier(.3,1.8,.5,1)}
.k-ask{display:flex;align-items:center;gap:10px}
.k-ear{width:96px;height:96px;border-radius:50%;border:0;background:#ff8a3d;font-size:48px;cursor:pointer;box-shadow:0 7px 0 #c9631f;animation:k-pulse 1.8s ease-in-out infinite}
.k-ear:active{transform:translateY(5px);box-shadow:0 2px 0 #c9631f}
.k-progress{display:flex;gap:6px;font-size:30px;color:#ffffffcc;text-shadow:0 2px 0 #c9dcea}
.k-progress i{font-style:normal}
.k-progress i.on{color:#ffc312;text-shadow:0 2px 0 #d39a00}
.k-choices{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.k-win{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 16px}
.k-win .bong{animation:k-bounce 1.2s ease-in-out infinite}
.k-stars{font-size:48px;animation:k-pop .8s cubic-bezier(.3,1.8,.5,1)}
.k-big{font-size:40px;font-weight:900;color:#ff8a3d}
.k-row{display:flex;gap:16px}
.k-pill{--k:#ffb84d;min-width:100px;height:84px;padding:0 22px;border-radius:42px;border:0;background:var(--k);font-size:42px;cursor:pointer;box-shadow:0 7px 0 color-mix(in srgb,var(--k) 65%,#000)}
.k-pill:active{transform:translateY(5px);box-shadow:0 2px 0 color-mix(in srgb,var(--k) 65%,#000)}
.k-sky{position:relative;height:calc(100dvh - 90px);overflow:hidden}
.k-cloud{position:absolute;width:160px;height:56px;border-radius:40px;background:#fff;opacity:.85}
.k-cloud::before,.k-cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.k-cloud::before{width:70px;height:70px;left:24px;top:-30px}.k-cloud::after{width:56px;height:56px;left:80px;top:-20px}
.k-cloud.c1{left:6%;top:12%}.k-cloud.c2{right:8%;top:30%;transform:scale(.8)}.k-cloud.c3{left:30%;top:60%;transform:scale(.6)}
.k-balloon{--c:#ff6b81;position:absolute;bottom:-160px;width:110px;height:132px;border:0;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 30% 28%,#ffffff88 0 12%,transparent 13%),var(--c);display:grid;place-items:center;cursor:pointer;animation:k-rise linear forwards;touch-action:manipulation}
.k-balloon::after{content:"";position:absolute;bottom:-34px;left:50%;width:2px;height:36px;background:#8a8fa8}
.k-balloon span{font-size:54px}
.k-balloon.popped{animation:k-burst .35s ease-out forwards!important}
.k-said{position:absolute;transform:translateX(-10px);padding:8px 16px;border-radius:20px;background:#fff;font-size:28px;font-weight:900;color:#ff8a3d;box-shadow:0 5px 0 #ffe0c2;animation:k-float 1.6s ease-out forwards;pointer-events:none;white-space:nowrap}
.k-count-n{display:flex;align-items:baseline;gap:12px;min-height:90px}
.k-count-n b{font-size:76px;font-weight:900;color:#ff8a3d;line-height:1}
.k-count-n span{font-size:34px;font-weight:900;color:#2b2f45}
.k-count{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:700px}
.k-thing{position:relative;width:min(28vw,140px);aspect-ratio:1;border-radius:36px;border:5px dashed #ffb84d;background:#fff;font-size:clamp(60px,15vw,84px);cursor:pointer}
.k-thing.counted{border-style:solid;border-color:#2ed573;background:#eafff1;animation:k-pop .45s cubic-bezier(.3,1.8,.5,1)}
.k-thing i{position:absolute;top:-12px;right:-10px;width:44px;height:44px;border-radius:50%;background:#2ed573;color:#fff;font:900 24px/44px var(--f-ui);font-style:normal}
.k-next{margin-top:8px}
.k-parent-bg{position:fixed;inset:0;background:rgba(20,24,40,.45);z-index:20}
.k-parent{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:22px;background:#fff;color:#2b2f45;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.k-parent h2{font-size:22px;font-weight:900;margin:0}
.k-parent p{font-size:14.5px;font-weight:600}
.k-parent .dpick{background:#eef3f8}
.k-parent .dpick button.on{background:#fff}
.k-parent .k-note{font-size:13px;color:#6b7390}
.k-parent-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.k-parent .btn.ghost{background:#fff;color:#2b2f45;border-color:#d9e1ea;box-shadow:0 4px 0 #d9e1ea}
@keyframes k-bounce{50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes k-pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes k-wobble{20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
@keyframes k-pulse{50%{transform:scale(1.08)}}
@keyframes k-rise{to{transform:translateY(calc(-100dvh - 220px)) translateX(20px)}}
@keyframes k-burst{to{transform:scale(1.6);opacity:0}}
@keyframes k-float{to{transform:translate(-10px,-80px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .k-balloon{animation-duration:14s!important} }

label.al-flag{cursor:pointer}
@keyframes rec-pulse{70%{box-shadow:0 0 0 16px #e5383b00}100%{box-shadow:0 0 0 0 #e5383b00}}
@media (max-width:520px){ .al-row{flex-wrap:wrap} .al-badge{order:5} }

/* Audio tab: the top section stays pinned under the top bar at one fixed size; the explanation lives in an
   info card that floats over the list, so nothing moves while you scroll. */
.al-head{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h,58px));z-index:4;display:flex;flex-direction:column;gap:12px;background:var(--bg);padding-block:12px;border-bottom:1px solid var(--line)}
.al-title{position:relative;display:flex;align-items:center;gap:10px}
.al-head .pg-h{font-size:24px;padding-top:0}
.al-info-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:none;color:var(--muted);font:900 14px/1 Georgia,serif;font-style:italic;cursor:pointer}
.al-info-btn.on,.al-info-btn:hover{border-color:var(--acc);color:var(--acc)}
.al-info{position:absolute;top:calc(100% + 8px);left:0;z-index:6;width:min(460px,calc(100vw - 32px));display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.35);font-size:14px;color:var(--ink)}
.al-info .al-voice{font-size:12.5px;font-weight:700;color:var(--muted)}
.al-row{scroll-margin-top:calc(var(--top-h,58px) + 230px)}

/* editor: record (punch-in) */
.xe-recbtn{width:40px;height:40px;margin-left:4px;border-radius:50%;border:2px solid color-mix(in srgb,#e5383b 55%,var(--line));background:none;display:grid;place-items:center;cursor:pointer}
.xe-recbtn svg{width:18px;height:18px;fill:#e5383b}
.xe-recbtn.on{background:#e5383b;animation:rec-pulse 1.2s ease-out infinite}
.xe-recbtn.on svg{fill:#fff}
.xe-rec-dot{width:14px;height:14px;border-radius:50%;background:#e5383b;animation:rec-pulse 1.2s ease-out infinite}
.xe-newtake{display:flex;align-items:center;gap:6px;margin-left:6px;padding:8px 12px}
.xe-newtake svg{width:12px;height:12px;fill:#e5383b}
@media (max-width:760px){ .xe-newtake{padding:8px 10px} }

/* live input meter while recording: −60 dB … 0 dB; green to −18, yellow to −6, red above */
.xe-meter{position:relative;width:170px;height:10px;border-radius:5px;background:var(--sunk);overflow:hidden}
.xe-meter-fill{height:100%;width:0;background:linear-gradient(90deg,#2ed573 0 70%,#ffc312 70% 90%,#ff4757 90% 100%);background-size:170px 100%}
.xe-meter-hold{position:absolute;top:0;bottom:0;width:2px;left:0;background:var(--ink)}
.xe-rec-hint{min-width:0;font-size:12px;font-weight:800;color:var(--muted)}
.xe-rec-hint.bad{color:#ff4757}

/* recording controls in the transport bar (no pop-up) */
.xe-recbar{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.xe-recbar[hidden],.xe-selbox[hidden]{display:none}
.xe-recbar .xe-meter{width:160px;height:12px}
.xe-recbar .xe-meter-fill{background-size:160px 100%}
.xe-recbar .xe-rec-hint:empty{display:none}

/* toolbar names only hide on phone-sized screens */
@media (max-width:560px){ .xe-toolbar .xe-tb span{display:none} }
/* floating actions above the current selection */
.xe-selbar{position:absolute;z-index:3;transform:translateX(-50%);display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.35);white-space:nowrap}
.xe-selbar[hidden]{display:none}
.xe-selbar button{display:flex;align-items:center;gap:5px;padding:7px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:800 12.5px var(--f-ui);cursor:pointer}
.xe-selbar button:hover{background:var(--sunk)}
.xe-selbar button[data-x="crop"]{background:var(--acc);color:var(--on-acc)}
.xe-selbar svg{width:15px;height:15px;fill:currentColor}
.xe-cropopts{display:flex;align-items:center;gap:2px;margin:0 4px 0 2px;padding:0 4px;border-radius:8px;background:var(--sunk)}
.xe-cropopts label{display:flex;align-items:center;gap:5px;padding:6px;font:700 12px var(--f-ui);color:var(--ink);cursor:pointer}
.xe-cropopts input{width:15px;height:15px;margin:0;accent-color:var(--acc)}
@media (max-width:560px){ .xe-selbar{flex-wrap:wrap;white-space:normal;width:calc(100% - 24px);justify-content:center} }

/* Kids mode: coloring book */
.k-acts .k-act:last-child:nth-child(odd){grid-column:1 / -1}
.k-colorbook{gap:14px}
.k-pics{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.k-thumb{position:relative;width:62px;height:62px;padding:4px;border-radius:18px;border:4px solid #fff;background:#ffffffaa;cursor:pointer;box-shadow:0 4px 0 #c9dcea}
.k-thumb.on{border-color:#b197fc;transform:scale(1.08)}
.k-thumb-art{width:100%;height:100%;display:block}
.k-thumb i{position:absolute;top:-10px;right:-8px;font-style:normal;font-size:18px}
.k-canvas{position:relative;width:min(84vw,420px,52vh);aspect-ratio:1;border-radius:32px;background:#fff;box-shadow:0 8px 0 #c9dcea;padding:10px}
.k-canvas.done{animation:k-pop .6s cubic-bezier(.3,1.8,.5,1)}
.k-art{width:100%;height:100%;display:block;touch-action:manipulation}
.k-reg{cursor:pointer;transition:fill .25s ease}
.k-ear-sm{position:absolute;top:-14px;right:-14px;width:64px;height:64px;font-size:30px;animation:none}
.k-reset{position:absolute;bottom:-12px;right:-12px;width:52px;height:52px;border-radius:50%;border:0;background:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 0 #c9dcea}
.k-colorname{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:900;color:#2b2f45;min-height:40px}
.k-swatch{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 0 #c9dcea}
.k-said-pic{color:#ff8a3d}
.k-palette{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:520px}
.k-crayon{--c:#ff4d4d;width:56px;height:56px;border-radius:50%;border:5px solid #fff;background:var(--c);cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--c) 60%,#000)}
.k-crayon.on{transform:translateY(-6px) scale(1.12);box-shadow:0 0 0 4px #2b2f45,0 8px 0 color-mix(in srgb,var(--c) 60%,#000)}

/* coloring book v2: scenes, Follow Bông, name tags */
.k-pics-gap{width:10px}
.k-thumb.scene{width:84px}
.k-modes{display:flex;gap:4px;padding:4px;border-radius:20px;background:#ffffffaa}
.k-modes button{display:flex;align-items:center;gap:6px;padding:10px 16px;border:0;border-radius:16px;background:none;font:900 16px var(--f-ui);color:#6b7390;cursor:pointer}
.k-modes button.on{background:#fff;color:#2b2f45;box-shadow:0 3px 0 #c9dcea}
.k-task{display:flex;align-items:center;gap:6px;max-width:min(92vw,640px)}
.k-taskbubble{display:flex;align-items:center;gap:10px;padding:12px 18px;border:0;border-radius:24px;background:#fff;box-shadow:0 5px 0 #ffe0c2;font:800 22px var(--f-ui);color:#2b2f45;cursor:pointer;text-align:left}
.k-taskbubble b{color:#ff8a3d}
.k-taskcolor{display:inline-flex;align-items:center;gap:6px;color:#2b2f45!important}
.k-taskcolor::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 2px #2b2f45}
.k-taskbubble i{font-style:normal;font-size:22px}
.k-canvas.scene{width:min(94vw,680px,72vh);aspect-ratio:4/3}
.k-reg.hint{animation:k-hint 1s ease-in-out infinite}
@keyframes k-hint{50%{filter:brightness(.82) drop-shadow(0 0 6px #ff8a3d)}}
.k-tag rect{fill:#fff;stroke:#2b2f45;stroke-width:1.5}
.k-tag text{font:900 12px Nunito,system-ui,sans-serif;fill:#2b2f45}
.k-crayon.nudge{animation:k-wobble .6s 2}

/* Kids levels: count to 10, match pairs, first reading, three regions, parent age picker */
.k-count.many .k-thing{width:min(17vw,92px);border-radius:24px;font-size:clamp(38px,9vw,56px)}
.k-mem{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(92vw,520px)}
.k-memcard{position:relative;aspect-ratio:3/4;border:0;padding:0;background:none;cursor:pointer;perspective:600px}
.k-memback,.k-memface{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;backface-visibility:hidden;transition:transform .35s ease}
.k-memback{background:linear-gradient(135deg,#ff9f43,#ff6b81);color:#fff;font:900 40px var(--f-ui);box-shadow:0 5px 0 #c9631f}
.k-memface{background:#fff;border:4px solid #ff9f43;transform:rotateY(180deg);font-size:clamp(34px,9vw,52px);box-shadow:0 5px 0 #ffd6a8}
.k-memface small{font:900 13px var(--f-ui);color:#2b2f45}
.k-memcard.up .k-memback{transform:rotateY(180deg)}
.k-memcard.up .k-memface{transform:rotateY(0)}
.k-memcard.done .k-memface{border-color:#2ed573;background:#eafff1}
.k-readword{position:relative;padding:18px 34px;border-radius:28px;background:#fff;box-shadow:0 6px 0 #c9dcea}
.k-readword b{font-size:clamp(40px,11vw,64px);font-weight:900;color:#2b2f45}
.k-readword .k-ear-sm{top:-18px;right:-22px;width:56px;height:56px;font-size:26px}
.k-readtip{font-weight:800;color:#6b7390}
.k-regintro{font-size:24px}
.k-regcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;padding:16px;border-radius:28px;background:#fff;box-shadow:0 6px 0 #c9dcea}
.k-regcard .k-pic{font-size:84px}
.k-regrows{display:flex;flex-direction:column;gap:8px}
.k-regrow{--c:#888;display:grid;grid-template-columns:14px 92px 1fr;align-items:center;gap:10px;padding:8px 14px;border-radius:16px;border:3px solid transparent;background:#f3f6fa;cursor:pointer;text-align:left}
.k-regrow i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.k-regrow span{font-weight:800;color:#6b7390;font-size:14px}
.k-regrow b{font-size:24px;font-weight:900;color:#2b2f45}
.k-regrow.speaking{border-color:var(--c);background:#fff;transform:scale(1.04)}
.k-reggrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.k-reggrid .k-pic{font-size:52px}
.k-ages{display:grid;gap:8px}
.k-ages button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:14px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;text-align:left;cursor:pointer}
.k-ages button b{font-size:16px;font-weight:900}
.k-ages button small{font-size:12.5px;color:#6b7390;font-weight:600}
.k-ages button.on{border-color:#ff8a3d;background:#fff6ee}

/* developer: floating Add audio button */
#dev-pill{position:fixed;z-index:45;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:99px;border:2px solid #f2a516;background:var(--surface);color:var(--ink);font:800 13px var(--f-ui);cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25)}
#dev-pill.in-kids{bottom:calc(16px + env(safe-area-inset-bottom,0px));background:#fff;color:#2b2f45}
#dev-pill.on{background:#f2a516;color:#2a1a00;animation:k-pulse 1.4s ease-in-out infinite}
#dev-pill small{font-size:11px;font-weight:700;opacity:.8}
@media (min-width:1000px){ #dev-pill:not(.in-kids){left:264px;bottom:20px} }
.k-parent .tog{border-color:#d9e1ea}
.k-parent .tog small{color:#6b7390}

/* developer: "no audio for this word — record it?" */
#miss-prompt{position:fixed;z-index:46;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:12px 14px;border-radius:18px;background:#fff;color:#2b2f45;border:2px solid #f2a516;box-shadow:0 12px 30px rgba(0,0,0,.3);font:600 15px var(--f-ui);animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
#miss-prompt[hidden]{display:none}
#page-audio{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(20,24,40,.45)}
#page-audio[hidden]{display:none}
#page-audio .pa-box{width:min(560px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;background:#fff;color:#2b2f45;box-shadow:0 20px 50px rgba(0,0,0,.35);font:600 14px var(--f-ui)}
#page-audio header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-right:40px;position:relative}
#page-audio header>b{font-size:18px;font-weight:900}
#page-audio header small{color:#6b7390}
#page-audio .pa-x{position:absolute;right:0;top:-4px;width:36px;height:36px;border-radius:50%;border:0;background:#f1f4f8;font-size:16px;cursor:pointer}
#page-audio .pa-note{margin:0;font-size:13px;line-height:1.4;color:#6b7390}
#page-audio .pa-tools{display:flex;flex-wrap:wrap;gap:8px}
#page-audio .pa-tools .btn{padding:8px 12px;font-size:13px;text-transform:none;letter-spacing:0;background:#fff;color:#2b2f45;border-color:#d9e1ea;box-shadow:0 3px 0 #d9e1ea}
#page-audio .pa-list{overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:0}
#page-audio .pa-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;background:#fff4f4;border:2px solid #ffd6d6}
#page-audio .pa-row.got{background:#f3faf6;border-color:#d4efe0}
#page-audio .pa-w{flex:1;min-width:0;display:flex;flex-direction:column}
#page-audio .pa-w b{font-size:16px;font-weight:900;overflow-wrap:anywhere}
#page-audio .pa-w small{font-size:12px;color:#6b7390}
#page-audio .pa-b{flex:none;width:40px;height:40px;border-radius:12px;border:2px solid #d9e1ea;background:#fff;font-size:18px;cursor:pointer}
#page-audio .pa-b.rec{border-color:#f2a516;background:#fff8e6}
#miss-prompt b{font-weight:900}
#miss-prompt .btn{padding:9px 14px;font-size:13px}
#miss-prompt .btn.ghost{background:#fff;color:#2b2f45;border-color:#d9e1ea;box-shadow:0 3px 0 #d9e1ea}

/* coloring pages from image files */
.k-thumb.page{padding:3px;overflow:hidden}
.k-thumb.page img{width:100%;height:100%;object-fit:contain;border-radius:12px;background:#fff}
.k-thumb.add{font:900 30px var(--f-ui);color:#ff8a3d;border-style:dashed;border-color:#ffb27a}
.k-canvas.photo{display:grid;place-items:center}
#k-photo{max-width:100%;max-height:100%;touch-action:manipulation;cursor:pointer;border-radius:18px}
.k-field{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:14px;color:#2b2f45}
.k-field input,.k-field select{padding:10px;border-radius:10px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:600 14px var(--f-ui)}

/* ---------- kids coloring: gallery + studio ---------- */
.k-gallery{gap:16px}
.k-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;width:100%}
.k-galcard{position:relative;aspect-ratio:1;padding:8px;border-radius:24px;border:5px solid #fff;background:#fff;box-shadow:0 6px 0 #c9dcea;cursor:pointer;display:grid;place-items:center;overflow:hidden}
.k-galcard.wide{grid-column:span 2;aspect-ratio:2/1.1}
.k-galcard img,.k-galcard svg{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px}
.k-galcard i{position:absolute;top:6px;right:8px;font-style:normal;font-size:22px}
.k-galcard.add{font:900 44px var(--f-ui);color:#ff8a3d;border-style:dashed;border-color:#ffb27a;background:#fff8f0}
.k-galcard:active{transform:translateY(3px);box-shadow:0 3px 0 #c9dcea}

.k-studio{position:fixed;inset:0;display:grid;gap:10px;padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
  grid-template-columns:1fr auto auto;grid-template-rows:auto 1fr;grid-template-areas:"stage top top" "stage crayons tools";
  background:linear-gradient(transparent 88%,#6cc24a 88%,#4fa83a),repeating-linear-gradient(90deg,#7b4a2d 0 118px,#5e3720 118px 121px,#835233 121px 240px,#5e3720 240px 243px);overscroll-behavior:none}
.k-st-area{grid-area:stage;min-width:0;min-height:0;display:grid;place-items:center;--frame:36px}
.k-st-frame{padding:14px;border-radius:12px;background:linear-gradient(135deg,#f0a052,#c96a26 60%,#e8913f);box-shadow:inset 0 0 0 3px #a8541c,0 10px 24px rgba(0,0,0,.35)}
.k-stage{position:relative;background:#fff;border-radius:4px;overflow:hidden;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 2px #a8541c}
.k-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.k-stage .k-linesc{mix-blend-mode:multiply;pointer-events:none}
.k-stage .k-strokec{pointer-events:none}
.k-st-top{grid-area:top;display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.k-st-btn{width:54px;height:54px;border-radius:16px;border:3px solid #fff;background:linear-gradient(#5cc1ff,#2e8fe0);box-shadow:0 5px 0 #1f6bb0;font:900 24px var(--f-ui);color:#fff;cursor:pointer;display:grid;place-items:center}
.k-st-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1f6bb0}
.k-st-btn.x{background:linear-gradient(#ff9a6b,#e5622f);box-shadow:0 5px 0 #a8441c}
.k-st-btn.save{background:linear-gradient(#7be08a,#2fae4d);box-shadow:0 5px 0 #1d7a33}
.k-st-btn.next{background:linear-gradient(#ffc061,#f08a24);box-shadow:0 5px 0 #b05f12;font-size:28px}
.k-studio .k-lock{width:46px;height:46px;opacity:.75}
.k-st-tools{grid-area:tools;display:flex;flex-direction:column;gap:9px;align-items:center;overflow:auto;padding:4px 2px;scrollbar-width:none}
.k-tool{flex:none;width:62px;height:62px;border-radius:50%;border:4px solid #fff;background:radial-gradient(circle at 35% 30%,#bfe6ff,#69bdf5);box-shadow:0 4px 0 #2f7fc0;cursor:pointer;padding:7px;display:grid;place-items:center}
.k-tool svg{width:100%;height:100%;display:block}
.k-tool.on{border-color:#ffd43b;transform:scale(1.12);box-shadow:0 0 0 4px #ffd43b88,0 4px 0 #2f7fc0}
.k-tool.inside{background:radial-gradient(circle at 35% 30%,#e9e2ff,#b9a6ff);box-shadow:0 4px 0 #6f58c9}
.k-tool.inside:not(.on){opacity:.6;filter:grayscale(.6)}
.k-st-sizes{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:20px;background:#ffffffd0}
.k-st-sizes[hidden]{display:none}
.k-st-sizes button{width:40px;height:34px;border:0;border-radius:12px;background:transparent;cursor:pointer;display:grid;place-items:center}
.k-st-sizes button.on{background:#ffe9a8}
.k-st-sizes i{width:var(--s);height:var(--s);border-radius:50%;background:currentColor;box-shadow:0 0 0 2px #2b2f4533}
.k-st-crayons{grid-area:crayons;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 0 10px 14px;border-radius:22px 0 0 22px;background:linear-gradient(90deg,#ffffffe8,#dfe7f1);box-shadow:inset -6px 0 10px rgba(0,0,0,.12);overflow:auto;scrollbar-width:none}
.k-cr{flex:none;width:96px;height:34px;border:0;padding:0;background:none;cursor:pointer;transition:transform .15s;filter:drop-shadow(0 2px 0 rgba(0,0,0,.28))}
.k-cr span{display:block;width:100%;height:100%;clip-path:polygon(0 50%,24% 10%,100% 10%,100% 90%,24% 90%);
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 45%,rgba(0,0,0,.18)),linear-gradient(90deg,transparent 0 46%,rgba(0,0,0,.2) 46% 50%,transparent 50% 82%,rgba(0,0,0,.2) 82% 86%,transparent 86%),var(--c)}
.k-cr.on{transform:translateX(-18px)}
@media (max-aspect-ratio:1/1){
  .k-studio{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:"top" "stage" "tools" "crayons";background:linear-gradient(transparent 94%,#6cc24a 94%),repeating-linear-gradient(90deg,#7b4a2d 0 118px,#5e3720 118px 121px,#835233 121px 240px,#5e3720 240px 243px)}
  .k-st-area{--frame:30px}
  .k-st-frame{padding:10px}
  .k-st-top{justify-content:space-between}
  .k-st-btn{width:46px;height:46px;font-size:20px;border-radius:14px}
  .k-st-tools{flex-direction:row;overflow-x:auto;padding:6px 4px}
  .k-tool{width:52px;height:52px;padding:6px}
  .k-st-sizes{flex-direction:row}
  .k-st-sizes button{width:34px;height:38px}
  .k-st-crayons{flex-direction:row;justify-content:safe center;gap:3px;padding:12px 8px 0;border-radius:20px 20px 0 0;height:96px;overflow-x:auto;overflow-y:hidden;align-items:flex-start}
  .k-cr{width:30px;height:90px}
  .k-cr span{clip-path:polygon(50% 0,90% 24%,90% 100%,10% 100%,10% 24%);background:linear-gradient(90deg,rgba(255,255,255,.4),transparent 45%,rgba(0,0,0,.18)),linear-gradient(180deg,transparent 0 46%,rgba(0,0,0,.2) 46% 50%,transparent 50% 82%,rgba(0,0,0,.2) 82% 86%,transparent 86%),var(--c)}
  .k-cr.on{transform:translateY(-10px)}
}
.k-st-crayons{width:120px;justify-self:end}
.k-st-btn.next svg{width:28px;height:28px}
@media (max-aspect-ratio:1/1){
  .k-st-crayons{width:auto;justify-self:stretch}
  .k-st-tools{flex-wrap:wrap;justify-content:center;overflow:visible;gap:6px}
  .k-tool{width:46px;height:46px;padding:5px;border-width:3px}
  .k-st-sizes{padding:3px}
  .k-st-sizes button{width:30px;height:38px}
}

/* ---------- coloring menu ---------- */
.k-hub{gap:14px}
.k-hub-title{display:flex;align-items:center;gap:10px}
.k-hub-title b{font:900 30px var(--f-ui);color:#7b2fbf;text-shadow:0 2px 0 #fff}
.k-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;width:100%;max-width:820px}
.k-hubcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 10px 8px;border-radius:26px;border:0;cursor:pointer;
  background:linear-gradient(#d65cf0,#a336d1);box-shadow:0 7px 0 #7a1fa3,inset 0 2px 0 #f1a6ff;color:#fff}
.k-hubcard:active{transform:translateY(4px);box-shadow:0 3px 0 #7a1fa3}
.k-hubart{display:block;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 3px #8e2dbb}
.k-hubart svg{width:100%;height:100%;display:block}
.k-hubpx{display:grid;place-items:center;height:100%;padding:6px;background:#fff}
.k-hubpx svg{width:auto;height:100%}
.k-hubcard b{font:900 19px var(--f-ui);text-shadow:0 2px 0 #7a1fa3;line-height:1.1;text-align:center}

/* ---------- gallery with categories ---------- */
.k-banner{display:flex;align-items:center;gap:8px;padding:8px 26px;border-radius:99px;background:linear-gradient(#c45ef0,#8d2fd0);box-shadow:0 5px 0 #6a1d9e;color:#fff}
.k-banner b{font:900 24px var(--f-ui);text-shadow:0 2px 0 #6a1d9e}
.k-banner span{font-size:24px}
.k-cats{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:4px 4px 10px;scrollbar-width:none}
.k-cat{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:78px;padding:8px 4px;border-radius:20px;border:3px solid #fff;background:#ffffffc0;cursor:pointer;box-shadow:0 4px 0 #c9dcea}
.k-cat span{font-size:30px;line-height:1}
.k-cat small{font:800 11px var(--f-ui);color:#2b2f45;text-align:center;line-height:1.1}
.k-cat.on{background:var(--k);border-color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--k) 60%,#000)}
.k-cat.on small{color:#fff}
.k-gallery .k-gal{padding:18px;border-radius:26px;background:#fdf6e3;box-shadow:inset 0 0 0 10px #c97a3a,inset 0 0 0 13px #a8541c,0 8px 20px rgba(0,0,0,.15);padding:28px 22px}
.k-galcard{transform:rotate(var(--r,0deg));border-radius:10px;border:6px solid #fff;box-shadow:0 6px 12px rgba(0,0,0,.18);overflow:visible}
.k-galcard img,.k-galcard svg{border-radius:4px}
.k-pin{position:absolute;top:-9px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9aa3b2 60%,#59606e);box-shadow:0 2px 2px rgba(0,0,0,.3);z-index:1;font-style:normal}
.k-galcard em{position:absolute;bottom:-8px;right:-8px;font-style:normal;font-size:22px}
.k-galcard.add{transform:none}

/* ---------- color by number + pixel ---------- */
.k-numpage,.k-pxpage{gap:14px}
.k-numpage .k-canvas,.k-pxpage .k-canvas{width:min(92vw,560px,60vh)}
.k-numpage .k-canvas.scene{aspect-ratio:4/3;width:min(94vw,680px,72vh)}
.k-num{font:900 1em var(--f-ui);fill:#2b2f45;paint-order:stroke;stroke:#fff;stroke-width:3px}
.k-reg.wrong{animation:k-wob .5s}
.k-numlegend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.k-numcr{width:58px;height:58px;border-radius:50%;border:5px solid #fff;background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.2);cursor:pointer;display:grid;place-items:center}
.k-numcr b{font:900 24px var(--f-ui);color:#fff;text-shadow:0 0 4px #000,0 2px 0 #0008}
.k-numcr.on{transform:scale(1.18);border-color:#ffd43b}
.k-numcr.nudge{animation:k-wob .6s 2}
.k-numdone{display:flex;align-items:center;gap:12px}
.k-numdone b{font:900 28px var(--f-ui);color:#7b2fbf}
.k-numdone .k-next{position:static}
.k-canvas.px{display:grid;place-items:center;padding:14px}
.k-canvas.px svg{width:100%;height:100%;touch-action:none;cursor:pointer}
.k-thumb.px{padding:5px;display:grid;place-items:center}
.k-thumb.px svg{width:100%;height:100%}
@keyframes k-wob{0%,100%{transform:none}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}

/* ---------- studio extras: special crayons, stickers, glow ---------- */
.k-cr.sp-rainbow span{background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 45%,rgba(0,0,0,.15)),linear-gradient(90deg,#ff4d4d,#ff9f43,#ffd43b,#51cf66,#4dabf7,#b197fc)}
.k-cr.sp-glitter span{background:radial-gradient(circle,#fff 0 1.2px,transparent 1.6px) 0 0/7px 7px,radial-gradient(circle,#c9962a 0 1px,transparent 1.4px) 3px 4px/9px 9px,linear-gradient(180deg,#ffe57a,#e0a800)}
.k-cr.sp-stars span{background:radial-gradient(circle,#ffd43b 0 2.4px,transparent 2.8px) 0 0/14px 14px,radial-gradient(circle,#fff 0 1px,transparent 1.4px) 6px 8px/11px 11px,#2c3e91}
.k-cr.sp-dots span{background:radial-gradient(circle,#fff 0 3.4px,transparent 3.8px) 0 0/13px 13px,#ff6fa8}
@media (max-aspect-ratio:1/1){
  .k-cr.sp-rainbow span{background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 45%,rgba(0,0,0,.15)),linear-gradient(180deg,#ff4d4d,#ff9f43,#ffd43b,#51cf66,#4dabf7,#b197fc)}
}
.k-st-crayons.stickers{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:10px;align-content:start;justify-content:stretch;border-radius:22px}
.k-stk{width:48px;height:48px;border-radius:14px;border:3px solid transparent;background:#fff;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}
.k-stk.on{border-color:#ffd43b;transform:scale(1.08)}
.k-tool-stk{font-size:30px;line-height:1}
.k-stage.dark{background:#0c0d1f;box-shadow:inset 0 0 0 2px #333}
.k-studio.glow{background:radial-gradient(circle at 30% 20%,#2a1d55,#0b0a1a 70%)}
.k-studio.glow .k-st-frame{background:linear-gradient(135deg,#6b5bd6,#3a2d8f);box-shadow:inset 0 0 0 3px #2a1f70,0 0 30px #7b6cff66}
@media (max-aspect-ratio:1/1){
  .k-st-crayons.stickers{display:flex;flex-wrap:nowrap;overflow-x:auto;height:auto;padding:10px;align-items:center}
  .k-stk{flex:none}
}
@media (min-aspect-ratio:1/1) and (max-height:900px){
  .k-st-tools{gap:6px}
  .k-tool{width:50px;height:50px;padding:5px;border-width:3px}
  .k-st-sizes button{height:28px}
  .k-st-btn{width:48px;height:48px;font-size:21px}
}

/* ---------- Heirbud coloring look: sunny sky, rainbow frame, paint palette, taped pictures ---------- */
.k-studio,.k-studio:not(.glow){background:
  radial-gradient(ellipse 55% 22% at 18% 102%,#8ed36b 0 98%,transparent 100%),
  radial-gradient(ellipse 65% 26% at 88% 106%,#74c257 0 98%,transparent 100%),
  radial-gradient(circle at 9% 14%,#fff 0 3.2%,transparent 3.6%),radial-gradient(circle at 13% 11%,#fff 0 4.4%,transparent 4.8%),radial-gradient(circle at 17% 14%,#fff 0 3%,transparent 3.4%),
  radial-gradient(circle at 70% 9%,#fff 0 2.6%,transparent 3%),radial-gradient(circle at 73.5% 7%,#fff 0 3.6%,transparent 4%),
  radial-gradient(circle at 96% 4%,#ffe066 0 5%,#fff3b0 5.5% 7.5%,transparent 8%),
  linear-gradient(#a9dcff,#dff3ff 62%,#f4fbff)}
.k-st-frame,.k-studio:not(.glow) .k-st-frame{padding:12px;border-radius:30px;background:linear-gradient(135deg,#ff6b6b,#ffa94d,#ffd43b,#69db7c,#4dabf7,#b197fc);box-shadow:0 10px 0 rgba(43,47,69,.12),0 14px 30px rgba(43,47,69,.18)}
.k-stage{border-radius:20px;box-shadow:none}
.k-st-area{--frame:30px}
.k-st-btn,.k-st-btn.x,.k-st-btn.save,.k-st-btn.next{background:#fff;color:#2b2f45;border:0;border-radius:50%;box-shadow:0 5px 0 var(--b,#9ccbe8)}
.k-st-btn.x{--b:#ff9a8b}.k-st-btn.save{--b:#8fd19e}.k-st-btn.next{--b:#ffc078}
.k-st-btn.next svg path{stroke:#f08a24}
.k-tool{background:#fff;border:4px solid #fff;box-shadow:0 4px 0 #b9d7ec}
.k-tool.on{border-color:#ffd43b;box-shadow:0 0 0 4px #ffd43b66,0 4px 0 #b9d7ec}
.k-tool.inside{background:#f3efff;box-shadow:0 4px 0 #cdbff5}
.k-st-sizes{background:#fff;box-shadow:0 4px 0 #b9d7ec}
/* paint palette instead of a crayon tray */
.k-st-crayons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px 14px;width:auto;justify-self:end;align-content:center;border-radius:46% 54% 50% 50% / 30% 30% 70% 70%;background:#fffaf0;box-shadow:inset 0 0 0 4px #f1e3c6,0 8px 0 rgba(43,47,69,.10);overflow:auto}
.k-cr{width:44px;height:44px;filter:none;transition:transform .15s}
.k-cr span,.k-cr.sp-rainbow span{clip-path:none;border-radius:58% 42% 55% 45% / 50% 58% 42% 50%;box-shadow:inset -4px -5px 0 rgba(0,0,0,.14),inset 4px 4px 0 rgba(255,255,255,.45),0 3px 0 rgba(43,47,69,.18)}
.k-cr span{background:var(--c)}
.k-cr:nth-child(2n) span{border-radius:45% 55% 42% 58% / 55% 45% 55% 45%}
.k-cr.sp-rainbow span{background:conic-gradient(#ff4d4d,#ff9f43,#ffd43b,#51cf66,#4dabf7,#b197fc,#ff4d4d)}
.k-cr.on,.k-cr.on:nth-child(n){transform:scale(1.22);outline:4px solid #2b2f45;outline-offset:2px;border-radius:50%}
.k-st-crayons.stickers{border-radius:28px}
@media (max-aspect-ratio:1/1){
  .k-st-crayons{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;padding:12px 16px;gap:8px;border-radius:999px;justify-self:stretch;overflow-x:auto;align-items:center}
  .k-cr{flex:none;width:38px;height:38px}
  .k-cr.on{transform:scale(1.18)}
  .k-cr.sp-rainbow span{background:conic-gradient(#ff4d4d,#ff9f43,#ffd43b,#51cf66,#4dabf7,#b197fc,#ff4d4d)}
}
/* menu: every way to play has its own color */
.k-hubcard{background:var(--k);box-shadow:0 7px 0 color-mix(in srgb,var(--k) 62%,#000),inset 0 3px 0 rgba(255,255,255,.35);border-radius:30px}
.k-hubcard:active{box-shadow:0 3px 0 color-mix(in srgb,var(--k) 62%,#000)}
.k-hubart{border-radius:20px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.7)}
.k-hubcard b{text-shadow:0 2px 0 rgba(0,0,0,.22)}
.k-hub-title b{color:#2b2f45}
.k-banner{background:var(--k,#ff8a65);box-shadow:0 5px 0 color-mix(in srgb,var(--k,#ff8a65) 62%,#000)}
.k-banner b{text-shadow:0 2px 0 rgba(0,0,0,.2)}
/* gallery: a dotted paper board, pictures held on with tape */
.k-gallery .k-gal{background:radial-gradient(circle,#e6eef8 1.6px,transparent 2px) 0 0/22px 22px,#fff;box-shadow:0 8px 0 rgba(43,47,69,.08),0 10px 26px rgba(43,47,69,.12);border-radius:30px;padding:30px 22px}
.k-galcard{border:5px solid #fff;border-radius:16px;box-shadow:0 5px 0 #dbe6f1,0 8px 16px rgba(43,47,69,.12)}
.k-tape{position:absolute;top:-12px;left:50%;width:58px;height:20px;margin-left:-29px;background:var(--t);opacity:.85;transform:rotate(-4deg);border-radius:3px;z-index:1;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 4px,transparent 4px 9px);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.k-galcard:nth-child(2n) .k-tape{transform:rotate(5deg)}
@media (min-aspect-ratio:1/1){ .k-st-crayons{align-self:center;max-height:100%;border-radius:40px 40px 48px 48px} }
/* longer palette: a row per color family (light, color, dark), scrolls */
@media (min-aspect-ratio:1/1){ .k-st-crayons:not(.stickers){grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 12px;border-radius:30px;overscroll-behavior:contain} .k-st-crayons:not(.stickers) .k-cr{width:40px;height:40px} }
.k-st-crayons{scrollbar-width:thin}

/* ---------- Pha màu ---------- */
.k-mixpage{gap:16px}
.k-mixeq{display:flex;align-items:center;gap:12px}
.k-mixeq>b{font:900 40px var(--f-ui);color:#2b2f45}
.k-mixblob{width:70px;height:70px;border-radius:58% 42% 55% 45% / 50% 58% 42% 50%;background:var(--c);box-shadow:inset -6px -7px 0 rgba(0,0,0,.14),inset 6px 6px 0 rgba(255,255,255,.4),0 4px 0 rgba(43,47,69,.15);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.k-mixblob.empty{background:transparent;border:4px dashed #b9c6d6;box-shadow:none;animation:none}
.k-bowl{position:relative;width:130px;height:130px;border-radius:50%;background:#fff;border:7px solid #fff;box-shadow:0 0 0 4px #2b2f45,0 10px 0 rgba(43,47,69,.15);overflow:hidden}
.k-bowl-paint,.k-bowl-result{position:absolute;inset:0;border-radius:50%}
.k-bowl-paint{background:conic-gradient(var(--a) 0 25%,var(--b) 25% 50%,var(--a) 50% 75%,var(--b) 75%)}
.k-bowl:not(.mixed) .k-bowl-paint{opacity:.0}
.k-bowl.mixed .k-bowl-paint{opacity:1;animation:k-swirl 1.2s ease-in forwards}
.k-bowl-result{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 40%),var(--r);opacity:0}
.k-bowl.mixed .k-bowl-result{animation:k-blend 1.4s ease-in forwards}
@keyframes k-swirl{from{transform:rotate(0) scale(1)}to{transform:rotate(540deg) scale(.9)}}
@keyframes k-blend{0%,45%{opacity:0}100%{opacity:1}}
.k-bowl.wobble{animation:k-wob .5s 2}
.k-mixname{min-height:44px;display:flex;align-items:center}
.k-mixname b{font:900 30px var(--f-ui);color:color-mix(in srgb,var(--c) 70%,#2b2f45);text-shadow:0 2px 0 #fff;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.k-mixwant{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 3px #fff,0 0 0 2px #2b2f45;flex:none}
.k-pots{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.k-pot{width:84px;height:90px;border:0;background:none;cursor:pointer;padding:0;transition:transform .15s}
.k-pot svg{width:100%;height:100%;filter:drop-shadow(0 5px 0 rgba(43,47,69,.15))}
.k-pot:active{transform:translateY(4px) scale(.95)}
.k-mixreset{position:static}
@media (max-width:500px){ .k-mixblob{width:54px;height:54px} .k-bowl{width:104px;height:104px} .k-mixeq>b{font-size:30px} .k-pot{width:62px;height:68px} }

/* ---------- learning path ---------- */
.k-journey{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:4px 14px;width:min(100%,520px);padding:14px 18px;border:0;border-radius:28px;cursor:pointer;
  background:linear-gradient(135deg,#5ad1a1,#2fb37f);box-shadow:0 7px 0 #1f8a5f;color:#fff;text-align:left}
.k-journey:active{transform:translateY(4px);box-shadow:0 3px 0 #1f8a5f}
.k-journey-play{grid-row:span 2;width:64px;height:64px;border-radius:50%;background:#fff;color:#2fb37f;display:grid;place-items:center;font-size:30px;padding-left:5px;box-shadow:0 4px 0 rgba(0,0,0,.15);animation:k-pulse 1.6s ease-in-out infinite}
.k-journey-txt b{display:block;font:900 26px var(--f-ui);text-shadow:0 2px 0 rgba(0,0,0,.15)}
.k-journey-txt small{font:800 15px var(--f-ui);opacity:.95}
.k-journey-en{display:block;margin:-2px 0 2px;font:800 14px var(--f-ui);font-style:normal;opacity:.85}
.kids-noen .k-journey-en{display:none}
.k-journey-bar{height:12px;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden}
.k-journey-bar i{display:block;height:100%;border-radius:99px;background:#ffd43b}
.k-journey-map{width:56px;height:56px;border-radius:50%;border:0;background:#fff;font-size:28px;cursor:pointer;box-shadow:0 5px 0 #c9dcea;margin-top:-6px}
.k-path{gap:6px;padding-bottom:60px}
.k-path-head{display:flex;align-items:center;justify-content:space-between;width:min(100%,520px);padding:10px 18px;border-radius:99px;background:#fff;box-shadow:0 5px 0 #c9dcea}
.k-path-head b{font:900 22px var(--f-ui)}
.k-path-head span{font:900 18px var(--f-ui);color:#e8a900}
.k-unit{width:min(100%,520px);display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px}
.k-unit-head{display:flex;align-items:center;gap:10px;padding:8px 22px;border-radius:99px;background:var(--k);color:#fff;box-shadow:0 5px 0 color-mix(in srgb,var(--k) 62%,#000)}
.k-unit-head span{font-size:26px}
.k-unit-head b{font:900 22px var(--f-ui);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.k-road{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0;position:relative}
.k-road::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:10px;margin-left:-5px;border-radius:9px;background:repeating-linear-gradient(#fff 0 14px,transparent 14px 24px);opacity:.8}
.k-stop{position:relative;transform:translateX(var(--x));z-index:1}
.k-node{position:relative;width:78px;height:78px;border-radius:50%;border:5px solid #fff;font-size:34px;cursor:pointer;display:grid;place-items:center;
  background:var(--k);box-shadow:0 7px 0 color-mix(in srgb,var(--k) 60%,#000)}
.k-node.done{background:#ffd43b;box-shadow:0 7px 0 #c99a00}
.k-node.locked{background:#dfe6ee;box-shadow:0 7px 0 #b9c6d6;cursor:default;font-size:26px;opacity:.85}
.k-node.cur{transform:scale(1.15);animation:k-pulse 1.4s ease-in-out infinite}
.k-node i{position:absolute;top:-12px;right:-10px;font-style:normal;font-size:24px}
.k-node:active:not(:disabled){transform:translateY(4px)}
.k-node-bong{position:absolute;left:96px;top:50%;transform:translateY(-55%)}
.k-path-end{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px}
.k-path-end b{font:900 28px var(--f-ui);color:#20bf6b}
.k-pathwin-bg{position:fixed;inset:0;z-index:70;background:rgba(43,47,69,.45)}
.k-pathwin{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,420px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 18px 26px;border-radius:36px;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.3);animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.k-pill.big{width:110px;height:110px;font-size:48px;animation:k-pulse 1.4s ease-in-out infinite}

/* ---------- today's lesson ---------- */
.k-lessonbar{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:64%;min-width:0}
.k-dots{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center;padding:5px 10px;border-radius:99px;background:#ffffffd0}
.k-dots i{width:24px;height:24px;border-radius:50%;background:#eef2f7;font-style:normal;font-size:14px;line-height:24px;text-align:center;filter:grayscale(1);opacity:.5}
.k-dots i.done{background:#ffe9a8;filter:none;opacity:.9}
.k-dots i.now{background:#c9f2e1;filter:none;opacity:1;transform:scale(1.3);box-shadow:0 0 0 3px #5ad1a1}
.k-dots-left{font-size:12px;font-weight:700;color:#5b6478;margin-left:4px;white-space:nowrap}
.k-goal{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px 9px;border-radius:16px;background:#fff;box-shadow:0 3px 10px #2b2f4522;overflow:hidden;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.k-intro .k-intro-goal{align-self:center;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:4px 8px;cursor:pointer;color:#2b2f45}
.k-intro .k-intro-goal b{font:900 30px/1.2 var(--f-ui);color:#e8590c}
.k-intro .k-intro-goal b i{font-style:normal;font-size:22px;opacity:.75}
.k-intro .k-intro-goal small{font:700 15px var(--f-ui);color:#6b7390}
.k-goal-e{font-size:24px}
.k-goal-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.k-goal-t b{font-size:16px;color:#2b2f45}
.k-goal-t small{font-size:11px;color:#7a8296}
.k-goal-n{font-size:15px;font-weight:700;color:#7a8296;margin-left:4px;white-space:nowrap}
.k-goal-n b{font-size:22px;color:#20a37a}
.k-goal-n{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.k-goal-n small{font-size:13px;color:#20a37a;font-weight:800}
.k-goal-bar{position:absolute;left:0;bottom:0;height:4px;width:var(--p);background:#5ad1a1;transition:width .3s}
/* the lesson bar hangs to the left of the studio's buttons, so it doesn't widen the button/crayon columns and squeeze the picture */
.k-studio .k-st-top{position:relative}
.k-studio .k-lessonbar{position:absolute;right:calc(100% + 12px);top:0;width:max-content;max-width:none;align-items:flex-end;margin:0}
.k-journey.rest{background:linear-gradient(135deg,#7aa8ff,#4b7bec);box-shadow:0 7px 0 #2f5bc0}
.k-journey.rest .k-journey-play{color:#4b7bec}
.k-journey.nudge{animation:k-wob .5s 2}
.k-journey{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.k-journey.reading{transform:scale(1.08);z-index:5}
.k-rw{display:inline-block}
.k-rw.bounce{animation:k-rw .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes k-rw{0%{transform:none}35%{transform:translateY(-9px) scale(1.18);color:#ffd43b}100%{transform:none}}
@media (prefers-reduced-motion:reduce){ .k-journey.reading{transform:none} .k-rw.bounce{animation:none;color:#ffd43b} }
.k-acts.locked .k-act{filter:grayscale(.85);opacity:.6;position:relative}
.k-act-lock{position:absolute;top:10px;right:12px;font-style:normal;font-size:22px}
.k-trophy{font-size:64px;line-height:1;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.k-parent h3{margin:14px 0 2px;font:900 18px var(--f-ui)}
.k-plan{display:flex;flex-wrap:wrap;gap:6px}
.k-plan button{padding:8px 12px;border-radius:99px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:700 13px var(--f-ui);cursor:pointer}
.k-plan button.on{background:#5ad1a1;border-color:#5ad1a1;color:#fff}
.k-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.k-week span{display:flex;flex-direction:column;align-items:center;padding:6px 0;border-radius:12px;background:#f2f5f9;color:#8a93a6}
.k-week span.lesson{background:#e8f8f1;color:#2b2f45}
.k-week span.done{background:#5ad1a1;color:#fff}
.k-week b{font:800 11px var(--f-ui)}
.k-week small{font:700 12px var(--f-ui);min-height:15px}
.linkbtn{border:0;background:none;padding:0;color:#2f7fc0;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}

/* ---------- Nói theo ---------- */
.k-saypage{gap:16px}
.k-saycard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 34px;border-radius:32px;background:#fff;box-shadow:0 8px 0 #c9dcea}
.k-saycard .k-pic{font-size:110px;line-height:1}
.k-saycard b{font:900 34px var(--f-ui);color:#2b2f45}
.k-sayrow{display:flex;align-items:center;gap:22px}
.k-mic{--lv:0;width:120px;height:120px;border-radius:50%;border:6px solid #fff;background:linear-gradient(#ff8a8a,#ff5252);color:#fff;font-size:54px;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 0 #c23b3b,0 0 0 calc(var(--lv) * 26px) rgba(255,82,82,.25)}
.k-mic:not(.on){animation:k-pulse 1.6s ease-in-out infinite}
.k-mic.on{background:linear-gradient(#7be08a,#2fae4d);box-shadow:0 8px 0 #1d7a33,0 0 0 calc(10px + var(--lv) * 34px) rgba(47,174,77,.25);transition:box-shadow .08s}
.k-saymsg{font:900 26px var(--f-ui);color:#2b2f45;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.k-saymsg.yes,.k-saymsg.tried{color:#20bf6b}
.k-saymsg.close{color:#f08a24}
.k-parentok{width:48px;height:48px;border-radius:50%;border:2px dashed #b9c6d6;background:#fff;font-size:22px;cursor:pointer;opacity:.75}
.k-saynote{max-width:320px;text-align:center}

/* studio top buttons: colored picture buttons with a word underneath */
.k-st-top{gap:10px;align-items:flex-start}
.k-stb{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:0;cursor:pointer;color:#2b2f45}
.k-stb span{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--b);border:4px solid #fff;box-shadow:0 5px 0 color-mix(in srgb,var(--b) 65%,#000)}
.k-stb svg{width:28px;height:28px}
.k-stb small{font:900 12px var(--f-ui);padding:1px 7px;border-radius:99px;background:#ffffffd9;white-space:nowrap}
.k-stb:active span{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--b) 65%,#000)}
.k-stb.b-back{--b:#ff6b6b}.k-stb.b-say{--b:#ffa94d}.k-stb.b-undo{--b:#4dabf7}.k-stb.b-fresh{--b:#20c997}.k-stb.b-save{--b:#9775fa}.k-stb.b-next{--b:#ffa94d}
.k-stb.b-done{--b:#40c057}
.k-stb.b-done span{width:70px;height:70px;animation:k-pulse 1.6s ease-in-out infinite}
.k-stb.b-done svg{width:36px;height:36px}
.k-studio .k-st-top .k-lock{align-self:center}
@media (max-aspect-ratio:1/1){
  .k-st-top{gap:4px;justify-content:space-between}
  .k-stb span{width:44px;height:44px;border-width:3px}
  .k-stb svg{width:22px;height:22px}
  .k-stb small{font-size:10px;padding:0 5px}
  .k-stb.b-done span{width:52px;height:52px}
  .k-stb.b-done svg{width:28px;height:28px}
}
@media (min-aspect-ratio:1/1) and (max-height:900px){ .k-stb span{width:50px;height:50px} .k-stb.b-done span{width:62px;height:62px} }
@media (max-aspect-ratio:1/1){
  .k-st-top{flex-wrap:wrap;row-gap:6px}
  .k-st-top .k-lessonbar{position:static;width:auto;flex-basis:100%;max-width:none;order:-1;align-items:center;margin:0}
  .k-st-top .k-dots{padding:4px 8px}
  .k-goal-t small{display:none}
  .k-st-top .k-lock{width:38px;height:38px}
  .k-stb span{width:42px;height:42px}
  .k-stb.b-done span{width:50px;height:50px}
}

/* ---------- tap-to-color games in the studio shell ---------- */
.k-studio.shell .k-st-area{container-type:size}
.k-shell-stage{aspect-ratio:var(--ar);width:min(calc(100cqw - 40px),calc((100cqh - 40px) * var(--ar)));background:#fff;border-radius:20px;overflow:hidden;display:grid;place-items:center}
.k-shell-stage svg{width:100%;height:100%;display:block}
.k-studio.pixel .k-shell-stage{padding:4%;box-sizing:border-box}
.k-studio.pixel .k-shell-stage svg{touch-action:none;cursor:pointer}
.k-st-frame.done{animation:k-pulse 1.2s ease-in-out 2}
.k-shell-side{justify-content:flex-start;gap:12px;width:190px;overflow:visible}
.k-shell-bong{display:grid;place-items:center}
.k-shell-task{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;max-width:190px;text-align:left}
.k-shell-task span{font:800 18px var(--f-ui)}
.k-shell-want{display:flex;align-items:center;gap:8px}
.k-shell-want i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 3px #fff,0 0 0 2px #2b2f45;flex:none}
.k-shell-word{padding:10px 16px;border-radius:20px;background:#fff;box-shadow:0 5px 0 #c9dcea;font:900 22px var(--f-ui);text-align:center}
.k-numbig{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--c);color:#fff;font:900 34px var(--f-ui);text-shadow:0 0 4px #000,0 2px 0 #0008;box-shadow:inset 0 0 0 4px #fff,0 0 0 2px #2b2f45}
.k-shell-tray{grid-template-columns:repeat(2,1fr) !important}
.k-cr.num{position:relative}
.k-cr.num b{position:absolute;inset:0;display:grid;place-items:center;font:900 20px var(--f-ui);color:#fff;text-shadow:0 0 4px #000,0 2px 0 #0008;pointer-events:none}
.k-cr.nudge{animation:k-wob .6s 2}
@media (max-aspect-ratio:1/1){
  .k-shell-side{width:auto;flex-direction:row;justify-content:center;align-items:center}
  .k-shell-bong svg{width:64px;height:64px}
  .k-shell-task{flex-direction:row;align-items:center;max-width:none}
  .k-shell-tray{display:flex !important}
}

/* parent settings with tabs */
.k-parent.tabs{width:min(960px,calc(100% - 32px));height:min(1100px,calc(100dvh - 40px));display:grid;grid-template-columns:190px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"head head" "tabs pane" "btns btns";gap:14px 18px}
.k-parent.tabs h2{grid-area:head}
.k-ptabs{grid-area:tabs;display:flex;flex-direction:column;gap:4px;border-right:2px solid #eef2f7;padding-right:12px}
.k-ptabs button{display:flex;align-items:center;gap:10px;padding:11px 12px;border:0;border-radius:12px;background:none;color:#4a5170;font:800 14.5px var(--f-ui);text-align:left;cursor:pointer}
.k-ptabs button span{font-size:18px}
.k-ptabs button:hover{background:#f3f6fa}
.k-ptabs button.on{background:#e8f8f1;color:#1f8a5f}
.k-ppane{grid-area:pane;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px;min-height:0}
.k-ppane h3{margin:6px 0 0;font:900 16px var(--f-ui)}
.k-ppane h3:first-child{margin-top:0}
.k-parent.tabs .k-parent-btns{grid-area:btns;border-top:2px solid #eef2f7;padding-top:12px}
.k-pbar{height:12px;border-radius:99px;background:#eef2f7;overflow:hidden}
.k-pbar i{display:block;height:100%;background:#5ad1a1;border-radius:99px}
@media (max-width:640px){
  .k-parent.tabs{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"head" "tabs" "pane" "btns";height:calc(100dvh - 24px);width:calc(100% - 20px);padding:16px}
  .k-ptabs{flex-direction:row;overflow-x:auto;min-width:0;border-right:0;border-bottom:2px solid #eef2f7;padding:0 0 8px;scrollbar-width:none}
  .k-ptabs button{flex:none;padding:8px 10px;font-size:13px}
}

/* ---------- the year: journey map, sticker book, garden ---------- */
.k-homebar{display:flex;align-items:center;gap:10px;width:min(100%,520px)}
.k-homebar .k-journey-map{margin:0;flex:none}
.k-garden{flex:1;min-height:44px;display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:0;padding:4px 10px;border-radius:22px;background:linear-gradient(transparent 55%,#a7dd8a 55%);font-size:26px;line-height:1}
.k-garden i{font-style:normal;animation:k-pulse 1.6s ease-in-out infinite}
.k-journeypage{gap:12px}
.k-unitcard{display:flex;align-items:center;gap:14px;width:min(100%,520px);padding:12px 16px;border-radius:24px;background:#fff;box-shadow:0 6px 0 #c9dcea}
.k-unitcard-e{font-size:44px}
.k-unitcard b{display:block;font:900 22px var(--f-ui)}
.k-unitcard small{font:700 14px var(--f-ui);color:#6b7390}
.k-unitcard .k-pill{margin-left:auto;width:64px;height:64px;font-size:28px}
.k-jmap{position:relative;width:min(100%,520px);border-radius:28px;background:#bfe6ff;box-shadow:inset 0 0 0 6px #fff,0 8px 0 #c9dcea;overflow:hidden}
.k-jmap svg{position:absolute;inset:0;width:100%;height:100%}
.k-jland{fill:#bfe8a0;stroke:#7cc85a;stroke-width:1.5}
.k-jroad{fill:none;stroke:#fff;stroke-width:4;stroke-dasharray:2 7;stroke-linecap:round;opacity:.9}
.k-jroad.done{stroke:#ffb300;stroke-dasharray:none;stroke-width:4}
.k-jstop{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:#dfe6ee;display:grid;place-items:center;font-size:19px;padding:0;cursor:pointer;box-shadow:0 3px 0 rgba(43,47,69,.2)}
.k-jstop.done{background:#ffd43b}
.k-jstop.now{width:52px;height:52px;font-size:26px;background:#5ad1a1;z-index:2;animation:k-pulse 1.4s ease-in-out infinite}
.k-jstop.later{width:20px;height:20px;cursor:default;opacity:.8}
.k-jstop i{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;border-radius:9px;background:#ff6b6b;color:#fff;font:900 11px/18px var(--f-ui);font-style:normal}
.k-jstop em{position:absolute;left:44px;top:-30px;pointer-events:none}
.k-stickerbook{gap:14px}
.k-spage{width:min(100%,520px);padding:14px;border-radius:24px;background:#fffdf5;box-shadow:0 6px 0 #ecdcb0}
.k-spage-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.k-spage-head span{font-size:26px}.k-spage-head b{font:900 18px var(--f-ui)}.k-spage-head small{margin-left:auto;font:700 12px var(--f-ui);color:#8a7a50}
.k-sgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.k-sgrid span{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;font-size:32px}
.k-stk-got{background:#fff;box-shadow:0 3px 0 #ecdcb0;transform:rotate(var(--r))}
.k-stk-empty{border:3px dashed #ecdcb0}
.k-newstk{display:inline-block;font-size:72px;animation:pop .6s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 4px 0 rgba(0,0,0,.15))}

/* ---------- new games ---------- */
.k-sortpage,.k-misspage,.k-simonpage,.k-tracepage{gap:16px}
.k-sortitem{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 30px;border:0;border-radius:30px;background:#fff;box-shadow:0 8px 0 #c9dcea;cursor:pointer;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.k-sortitem .k-pic{font-size:96px;line-height:1}.k-sortitem b{font:900 26px var(--f-ui);color:#2b2f45}
.k-baskets{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,520px)}
.k-basket{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 14px;min-height:170px;border:0;border-radius:24px 24px 40px 40px;cursor:pointer;color:#fff;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px),var(--k);box-shadow:0 8px 0 color-mix(in srgb,var(--k) 60%,#000)}
.k-basket-in{min-height:52px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:26px}
.k-basket-in i{font-style:normal;animation:pop .35s}
.k-basket-e{font-size:44px}.k-basket b{font:900 20px var(--f-ui);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.k-basket.wobble{animation:k-wob .5s 2}
.k-mrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.k-mcard{width:96px;height:96px;border-radius:24px;border:0;background:#fff;box-shadow:0 6px 0 #c9dcea;font-size:58px;display:grid;place-items:center;cursor:pointer}
.k-mcard.covered{background:linear-gradient(#ffb3d1,#ec5f9a);font-size:44px;animation:k-wob .5s}
.k-mcard.gap{background:transparent;border:4px dashed #ec5f9a;box-shadow:none;color:#ec5f9a;font:900 44px var(--f-ui)}
.k-mcard.back{animation:pop .5s cubic-bezier(.3,1.6,.5,1);box-shadow:0 0 0 5px #5ad1a1,0 6px 0 #c9dcea}
.k-mq{font:900 54px var(--f-ui);color:#ec5f9a}
.k-simonact{font-size:150px;line-height:1;animation:k-bounce 1s ease-in-out infinite}
@keyframes k-bounce{50%{transform:translateY(-16px) rotate(-4deg)}}
.k-pill.wait{opacity:.35;animation:none;pointer-events:none}
.k-trch{font:900 30px var(--f-ui);color:#5c7cfa}
.k-tracebox{width:min(86vw,420px,52vh);aspect-ratio:1;border-radius:32px;background:#fff;box-shadow:0 8px 0 #c9dcea;padding:8px}
.k-tracebox canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.k-tracebox.done{box-shadow:0 0 0 6px #40c057,0 8px 0 #c9dcea}

/* pictures from images/ */
.k-ic{width:1em;height:1em;object-fit:contain;display:inline-block;vertical-align:middle;pointer-events:none}
.k-pic .k-ic,.k-memface .k-ic,.k-mcard .k-ic,.k-simonact .k-ic{width:1.1em;height:1.1em}
.k-jplace{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bong-img{display:inline-block}
.k-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px;border:3px dashed #b9c6d6;border-radius:18px;background:#f7fafd;cursor:pointer;text-align:center}
.k-drop b{font:900 17px var(--f-ui)}.k-drop small{color:#6b7390;font-weight:700}
.k-drop.over{border-color:#5ad1a1;background:#e8f8f1}
.k-uplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}
.k-uplist li{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:10px;background:#f2f5f9;font:700 13px var(--f-ui)}
.k-uplist li small{color:#6b7390;text-align:right}
.k-uplist li.ok{background:#e8f8f1}.k-uplist li.ok small{color:#1f8a5f}
.k-uplist li.bad{background:#fff0f0}.k-uplist li.bad small{color:#c92a2a}
.k-pic .k-ic,.k-memface .k-ic,.k-mcard .k-ic,.k-simonact .k-ic,.k-card .k-ic{width:1.3em;height:1.3em}
.k-w{display:contents}

/* Kids: the ⓘ button and its plain-English card for grown-ups */
.k-corner{display:flex;align-items:center;gap:8px}
.k-info{width:36px;height:36px;border-radius:50%;border:2px solid #7aa8ff;background:#fff;color:#3b6fd6;font:italic 700 18px/1 Georgia,serif;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 6px #2b2f4522}
.k-infobg{position:fixed;inset:0;background:#2b2f4555;z-index:70}
.k-infocard{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;background:#fff;color:#2b2f45;border-radius:20px;padding:20px 22px;box-shadow:0 12px 40px #2b2f4555;font-size:15px;line-height:1.45;text-align:left}
.k-infocard h3{margin:0 36px 10px 0;font-size:20px}
.k-infocard h3 span{font-weight:600;color:#7a8296}
.k-infocard h4{margin:14px 0 6px;font-size:14px;color:#7a8296;text-transform:uppercase;letter-spacing:.04em}
.k-infocard p{margin:0 0 8px}
.k-infox{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:#eef2f7;font-size:16px;cursor:pointer}
.k-infowords{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.k-infowords li{display:flex;flex-direction:column;padding:6px 10px;border-radius:10px;background:#f4f7fb}
.k-infowords li span{font-size:13px;color:#7a8296}

/* Kids: postcards from the year's trip, and Bông travelling along the map */
.k-jbong{position:absolute;transform:translate(-30%,-85%);pointer-events:none;z-index:3;transition:left .8s,top .8s}
.k-cardbg{position:fixed;inset:0;background:#2b2f4566;z-index:72}
.k-postcard{position:fixed;z-index:73;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1deg);width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;display:grid;grid-template-columns:minmax(110px,30%) 1fr;gap:16px;padding:18px;border-radius:22px;background:#fffaf0;color:#2b2f45;box-shadow:0 14px 44px #2b2f4566;border:6px solid #fff;outline:2px dashed #ffb84d;outline-offset:-14px}
.k-pc-map{position:relative;align-self:start;border-radius:16px;background:#bfe6ff;overflow:hidden}
.k-pc-map svg{position:absolute;inset:0;width:100%;height:100%}
.k-pc-pin{position:absolute;transform:translate(-50%,-90%);font-size:26px;filter:drop-shadow(0 2px 2px #0004)}
.k-pc-bong{position:absolute;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#5ad1a1;box-shadow:0 0 0 3px #fff}
.k-pc-body{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left}
.k-pc-stamp{align-self:flex-end;position:absolute;top:0;right:30px;width:84px;height:84px;display:grid;place-items:center;background:#fff;border:4px dotted #ffd08a;border-radius:6px;transform:rotate(4deg);font-size:46px;overflow:hidden}
.k-pc-stamp img{width:100%;height:100%;object-fit:cover}
.k-pc-kicker{font:800 13px var(--f-ui);color:#e07b00}
.k-postcard h3{margin:0;padding-right:120px;font:900 28px/1.1 var(--f-ui)}
.k-pc-where{font:700 13px var(--f-ui);color:#7a8296;padding-right:120px}
.k-pc-fact{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;margin-top:6px;border-radius:16px;border:0;background:#fff;box-shadow:0 3px 0 #f0dcb8;cursor:pointer;font:inherit;color:inherit}
.k-pc-fact b{font:800 20px/1.25 var(--f-ui)}
.k-pc-fact b::after{content:' 🔊';font-size:15px;opacity:.6}
.k-pc-fact span{font-size:15px;color:#5b6478}
.k-pc-more{margin:0;font-size:14px;line-height:1.45;color:#4a5165}
.k-pc-morebtn{align-self:flex-start;border:0;background:none;color:#3b6fd6;font:700 13px var(--f-ui);cursor:pointer;padding:2px 0}
.k-pc-nav{display:flex;align-items:center;gap:8px;margin-top:4px}
.k-pc-nav button{width:40px;height:40px;border-radius:50%;border:0;background:#ffe2b0;font-size:24px;line-height:1;cursor:pointer}
.k-pc-nav i{width:10px;height:10px;border-radius:50%;background:#f0dcb8}
.k-pc-nav i.on{background:#ff9f43}
.k-pc-go{align-self:flex-end;margin-top:6px}
.k-pc-mini{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border-radius:16px;border:2px dashed #ffb84d;background:#fffaf0;text-align:left;cursor:pointer;font:inherit;color:#2b2f45}
.k-pc-mini>span:first-child{font-size:34px}
.k-pc-mini>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-pc-mini small{font:800 12px var(--f-ui);color:#e07b00}
.k-pc-mini b{font:800 16px/1.25 var(--f-ui)}
.k-pc-mini em{font-size:13px;font-style:normal;color:#5b6478}
@media (max-width:560px){
  .k-postcard{grid-template-columns:1fr;transform:translate(-50%,-50%)}
  .k-pc-map{display:none}
  .k-postcard h3,.k-pc-where{padding-right:96px}
  .k-pc-stamp{width:70px;height:70px;right:0;font-size:38px}
}
.k-pc-trail{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding-top:10px;border-top:2px dashed #f0dcb8}
.k-pc-trail button,.k-pc-trail i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-style:normal}
.k-pc-trail button{border:0;background:#fff;box-shadow:0 2px 0 #f0dcb8;cursor:pointer}
.k-pc-trail button.on{background:#ffd43b;box-shadow:0 0 0 3px #ff9f43}
.k-pc-trail i{background:#f4ead8;font-size:16px;opacity:.7}
.k-pc-mini.road{border-color:#7aa8ff;background:#f2f7ff}
.k-pc-mini.road small{color:#3b6fd6}

/* Kids: "next time Bông visits" at the end of a lesson */
.k-next{display:flex;gap:12px;align-items:center;width:100%;padding:10px 14px;border-radius:16px;background:#eef4ff;border:2px solid #c8d8ff;text-align:left}
.k-next>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-next small{font:800 12px var(--f-ui);color:#4263eb}
.k-next b{font:800 16px/1.25 var(--f-ui);color:#2b2f45}
.k-next em{font-size:13px;font-style:normal;color:#5b6478}
.k-next-pic{font-size:40px;line-height:1;filter:brightness(0);opacity:.35;flex:none}
.k-next-pic.shown{filter:none;opacity:1}

/* Kids: Kể cho bà (sentences to record) */
.k-tellpage{gap:14px}
.k-tellcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 28px;border-radius:32px;background:#fff;box-shadow:0 8px 0 #c9dcea;max-width:100%;text-align:center}
.k-tellcard .k-pic{font-size:90px;line-height:1}
.k-tellcard .k-pic .k-ic{width:110px;height:110px}
.k-tellcard b{font:900 30px/1.2 var(--f-ui);color:#2b2f45}
.k-tellcard small{font:700 15px var(--f-ui);color:#6b7390}
.k-tellpage .k-pill:disabled{opacity:.35}
.k-tellpage .k-row{flex-wrap:nowrap;gap:10px;align-items:center}
.k-tellpage .k-row .k-pill{min-width:0;width:64px;height:64px;padding:0;font-size:28px}
.k-tellpage .k-mic{width:100px;height:100px;font-size:46px;flex:none}

/* Family voices and recordings (parent tabs and the grandparent page) */
.k-famlist{display:flex;flex-direction:column;gap:6px}
.k-famrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f2f5f9}
.k-famrow.got{background:#e8f8f1}
.k-famrow-pic{width:40px;height:40px;flex:none;display:grid;place-items:center;font-size:28px}
.k-famrow-pic .k-ic{width:40px;height:40px}
.k-famrow-w{flex:1;min-width:0;display:flex;flex-direction:column}
.k-famrow-w b{font:800 16px var(--f-ui);color:#2b2f45}
.k-famrow-w small{font:600 12px var(--f-ui);color:#6b7390;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-fambtn{width:40px;height:40px;flex:none;border-radius:50%;border:0;background:#fff;font-size:18px;cursor:pointer;box-shadow:0 3px 0 #c9dcea}
.k-fambtn.rec{background:#ffe3e3}
.k-fambtn.rec.on{background:#ff6b6b;color:#fff;animation:k-pulse 1s infinite}
@keyframes k-pulse{50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.k-fambtn.rec.on{animation:none}}
.k-weeknote{white-space:pre-wrap;font:600 14px/1.5 var(--f-ui);background:#f2f5f9;border-radius:12px;padding:10px 12px;margin:0;color:#2b2f45}
.k-invite{max-width:620px;margin:0 auto;gap:14px;padding-bottom:110px}
.k-invite h2{font:900 24px var(--f-ui);margin:0;text-align:center;color:#2b2f45}
.k-invite .k-famlist{width:100%}
.k-invite .k-famrow{padding:8px 10px;background:#fff;box-shadow:0 3px 0 #dfe7f0}
.k-invite .k-famrow.got{background:#e8f8f1}
.k-invite .k-famrow-w b{font-size:20px}
.k-invite .k-fambtn{width:48px;height:48px;font-size:22px}
.k-invite-send{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.95);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.k-invite-send .btn:disabled{opacity:.5}
.k-invite-send small{font:600 12px var(--f-ui);color:#6b7390}

/* Postcards: the place's topics (history, food, how people talk, festival, nature) */
.k-pc-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:4px 0}
.k-pc-topics button{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;border:2px solid #e3e8ef;background:#fff;color:#4a5170;font:800 13px var(--f-ui);cursor:pointer}
.k-pc-topics button.on{border-color:#ffb84d;background:#fff4e0;color:#b35f00}
.k-pc-tname{font:900 15px var(--f-ui);color:#2b2f45}
.k-pc-talk{display:flex;align-items:center;justify-content:center;gap:12px}
.k-pc-talk span{display:flex;flex-direction:column;align-items:center;padding:6px 14px;border-radius:14px;background:#f2f5f9}
.k-pc-talk span:first-child{background:#fff4e0}
.k-pc-talk small{font:700 11px var(--f-ui);color:#6b7390}
.k-pc-talk b{font:900 24px var(--f-ui);color:#2b2f45}
.k-pc-talk i{font-style:normal;font-size:20px;color:#9aa3b8}
.k-pc-mini.topic{border-color:#5ad1a1;background:#effbf5}
.k-pc-mini.topic small{color:#1f8a5f}

/* Kids: this unit's polite words, and songs and games */
.k-manner{display:flex;align-items:center;gap:10px;width:min(100%,520px);padding:10px 14px;border-radius:18px;border:0;background:#fff;box-shadow:0 5px 0 #c9dcea;cursor:pointer;text-align:left;font:inherit;color:#2b2f45}
.k-manner>span:first-child{font-size:30px}
.k-manner span:last-child{display:flex;flex-direction:column;min-width:0}
.k-manner small{font:800 12px var(--f-ui);color:#ec5f9a}
.k-manner b{font:900 19px var(--f-ui)}
.k-songs{gap:12px}
.k-song{width:min(100%,560px);padding:12px 16px;border-radius:20px;background:#fff;box-shadow:0 5px 0 #c9dcea;display:flex;flex-direction:column;gap:6px}
.k-song header{display:flex;align-items:center;gap:8px}
.k-song header span{font-size:24px}
.k-song header b{flex:1;font:900 19px var(--f-ui);color:#2b2f45}
.k-song pre{margin:0;white-space:pre-wrap;font:700 17px/1.5 var(--f-ui);color:#2b2f45}
.k-song p{margin:0;font:600 13px var(--f-ui);color:#5b6478}
.k-song .k-song-how{color:#6b7390;font-style:italic}
.k-song.locked{opacity:.5}

/* Day / night picker (Settings and the kids' parent screen) */
.lookpick{display:flex;gap:8px}
.lookpick button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:800 14px var(--f-ui);cursor:pointer}
.lookpick button.on{border-color:var(--acc);background:var(--sunk)}
.k-parent .lookpick button{border-color:#e3e8ef;background:#fff;color:#2b2f45}
.k-parent .lookpick button.on{border-color:#5ad1a1;background:#e8f8f1}

/* Kids mode at night: a starry sky; the white cards stay as they are */
body.kids-on.kids-night{background:#141a3a}
.kids-night .kids{background:radial-gradient(circle at 12% 8%,#fff 0 .4%,transparent .6%),radial-gradient(circle at 78% 6%,#fff 0 .3%,transparent .5%),radial-gradient(circle at 42% 15%,#ffe9a8 0 .35%,transparent .55%),radial-gradient(circle at 90% 30%,#fff 0 .25%,transparent .45%),radial-gradient(circle at 25% 38%,#fff 0 .3%,transparent .5%),radial-gradient(circle at 85% 12%,#fff6c9 0 3.5%,transparent 3.8%),linear-gradient(#141a3a,#28306b 55%,#4a3f78)}
.kids-night .k-cloud{opacity:.12}
.kids-night .k-readtip,.kids-night .k-readtip small{color:#c9d1f2}
.kids-night .k-garden{filter:brightness(.85)}

/* The polite-words card reuses the postcard frame but has no map: one column, the stamp in the flow */
.k-postcard.k-mannercard{grid-template-columns:1fr;width:min(460px,calc(100vw - 32px))}
.k-mannercard .k-pc-body{align-items:stretch}
.k-mannercard .k-pc-stamp{position:static;align-self:center;transform:rotate(-3deg)}
.k-mannercard .k-pc-kicker{text-align:center}
.k-mannercard .k-pill{align-self:center}
.k-manner em{font:600 13px var(--f-ui);font-style:normal;color:#6b7390}
.k-path-head b small{font:700 12px var(--f-ui);color:#6b7390;margin-left:4px}
.k-pc-topics button>span:last-child{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.k-pc-topics button small{font:700 10px var(--f-ui);color:#8a93ab}

/* Kids: the conversation and play games (kids-games.js) */
.k-g-bubble{display:flex;flex-direction:column;gap:2px;max-width:min(100%,460px);padding:12px 16px;border-radius:20px;border:0;background:#fff;box-shadow:0 5px 0 #c9dcea;text-align:left;cursor:pointer;font:inherit;color:#2b2f45}
.k-g-bubble b{font:900 22px/1.25 var(--f-ui)}
.k-g-bubble small{font:700 13px var(--f-ui);color:#6b7390}
.k-g-hint{display:flex;flex-direction:column;align-items:center;padding:10px 18px;border-radius:999px;border:0;background:#fff;box-shadow:0 4px 0 #c9dcea;font:900 20px var(--f-ui);color:#2b2f45;cursor:pointer}
.k-g-hint small{font:700 12px var(--f-ui);color:#6b7390}
.k-g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;width:min(100%,560px)}
.k-g-grid .k-card b{font:900 15px var(--f-ui)}
.k-card.wrong{animation:k-shake .4s}
.k-card.gone{opacity:.25;pointer-events:none}
@keyframes k-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.k-g-done{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.k-g-done small{font:700 14px var(--f-ui);color:#6b7390;max-width:420px}
.k-g-list{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:16px;background:#fffaf0;border:2px dashed #ffb84d}
.k-g-list small{font:800 12px var(--f-ui);color:#b35f00}
.k-g-list span{width:48px;height:48px;display:grid;place-items:center;font-size:34px}
.k-g-list span .k-ic{width:46px;height:46px}
.k-g-list span.got{opacity:.35;position:relative}
.k-g-list span.got::after{content:"✓";position:absolute;font:900 30px var(--f-ui);color:#1f8a5f}
.k-g-pay{display:flex;flex-direction:column;align-items:center;gap:10px}
.k-g-pay>b{font:900 30px var(--f-ui)}
.k-g-coins{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.k-g-coin{width:64px;height:64px;border-radius:50%;border:0;background:#fff;font-size:38px;cursor:pointer;box-shadow:0 4px 0 #c9dcea}
.k-g-coin.paid{opacity:.3}
.k-call-ring,.k-call-screen{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border-radius:28px;background:#2b2f45;color:#fff;width:min(100%,460px)}
.k-call-ring b{font:900 22px var(--f-ui)}.k-call-ring small{color:#c9d1f2}
.k-call-face{font-size:90px;line-height:1}
.k-call-answer{animation:k-pulse 1s ease-in-out infinite}
.k-call-me{display:flex;align-items:center;gap:10px;width:min(100%,460px)}
.k-sing-lines{display:flex;flex-direction:column;gap:4px;width:min(100%,520px);padding:14px 18px;border-radius:22px;background:#fff;box-shadow:0 5px 0 #c9dcea}
.k-sing-lines p{margin:0;font:800 22px/1.4 var(--f-ui);color:#9aa3b8;transition:color .2s,transform .2s}
.k-sing-lines p.on{color:#e8590c;transform:scale(1.04)}
.k-sing-lines p.past{color:#2b2f45}
.k-cook-pot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-height:110px;width:min(100%,340px);padding:16px;border-radius:0 0 120px 120px;background:#ffe3c2;border:6px solid #e8a15b;font-size:48px}
.k-cook-pot .k-ic{width:56px;height:56px}
.k-cook-pot.done .k-ic{width:110px;height:110px}
.k-dress-sky{display:flex;align-items:center;gap:12px}
.k-dress-sky>.k-w{font-size:64px}.k-dress-sky .k-ic{width:80px;height:80px}
.k-dress-bong{display:flex;align-items:center;gap:8px}
.k-dress-bong>div{display:flex;flex-wrap:wrap;gap:4px;font-size:40px}.k-dress-bong .k-ic{width:52px;height:52px}
.k-tone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,460px)}
.k-tone{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:18px;border:3px solid #b197fc;background:#fff;cursor:pointer;color:#2b2f45}
.k-tone span{font-size:28px}.k-tone b{font:900 26px var(--f-ui)}.k-tone small{font:700 11px var(--f-ui);color:#6b7390}
.k-tone.wrong{animation:k-shake .4s}
.k-lixi-env{min-height:110px;border-radius:18px;border:0;background:#e03131;color:#ffd43b;font-size:56px;cursor:pointer;box-shadow:0 6px 0 #a61e1e;display:flex;flex-direction:column;align-items:center;justify-content:center}
.k-lixi-env.open{background:#fff4e6;color:#2b2f45;font-size:22px;box-shadow:0 6px 0 #e8a15b}
.k-lixi-env b{font:900 22px var(--f-ui)}
.k-parade{display:flex;align-items:flex-end;gap:2px;min-height:90px;font-size:40px}
.k-parade span,.k-lantern-pick{filter:drop-shadow(0 0 6px var(--c))}
.k-parade span{color:var(--c)}
.k-lantern-pick{min-height:96px;border-radius:20px;border:4px solid var(--c);background:color-mix(in srgb,var(--c) 25%,#fff);font-size:52px;cursor:pointer}
.k-lantern-pick.wrong{animation:k-shake .4s}
.k-quan-board{display:flex;align-items:stretch;gap:6px;width:min(100%,560px);padding:10px;border-radius:24px;background:#c89b6d;box-shadow:0 6px 0 #9a714a}
.k-quan-big{flex:0 0 52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:40px;background:#e8c79f;font-size:26px}
.k-quan-big.hl,.k-quan-cell.hl{outline:4px solid #ffd43b}
.k-quan-big small,.k-quan-cell small{font:900 13px var(--f-ui);color:#5b3b1d}
.k-quan-rows{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.k-quan-rows>div{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.k-quan-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;border:0;background:#e8c79f;color:#3d2b1f;font-size:9px;line-height:1;word-break:break-all;padding:4px;cursor:pointer}
.k-quan-cell:disabled{cursor:default}
.k-quan-cell.sel{outline:4px solid #5ad1a1}
.kids-night .k-g-done small{color:#c9d1f2}
.k-quan-board{gap:4px;padding:8px}
.k-quan-big{flex:0 0 40px;font-size:20px}
.k-quan-rows>div{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.k-quan-cell{padding:2px;font-size:8px}
.k-lantern-pick{display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff)}
.k-parade{gap:6px}

/* "How to play": the first-time card and the demo hand */
.k-intro{position:fixed;z-index:76;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;border-radius:26px;background:#fff;color:#2b2f45;box-shadow:0 14px 44px #2b2f4566;text-align:center}
.k-intro>small{font:800 13px var(--f-ui);color:#e8590c}
.k-intro h3{margin:0;font:900 26px var(--f-ui)}.k-intro h3 span{font-size:16px;color:#6b7390}
.k-intro-steps{display:flex;align-items:center;gap:8px;font-size:46px}
.k-intro-steps span{animation:k-step 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .8s)}
.k-intro-steps i{font-style:normal;font-size:22px;color:#9aa3b8}
@keyframes k-step{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.3)}}
.k-intro-kid{margin:0;font:800 19px/1.35 var(--f-ui);color:#2b2f45}
.k-intro-grown{width:100%;text-align:left;font:600 13px var(--f-ui);color:#5b6478}
.k-intro-grown summary{cursor:pointer;font-weight:800;color:#4263eb}
.k-infocard .k-intro-kid{font-size:16px}
.k-demo-hand{position:fixed;z-index:90;left:0;top:0;font-size:46px;pointer-events:none;filter:drop-shadow(0 4px 6px #0005);animation:k-demo 3.1s ease-in-out forwards}
@keyframes k-demo{0%{transform:translate(50vw,100vh);opacity:0}15%{opacity:1}40%{transform:translate(var(--x),var(--y))}50%{transform:translate(var(--x),var(--y)) scale(.8)}58%{transform:translate(var(--x),var(--y)) scale(1)}68%{transform:translate(var(--x),var(--y)) scale(.8)}76%,88%{transform:translate(var(--x),var(--y)) scale(1);opacity:1}100%{transform:translate(var(--x),var(--y));opacity:0}}
.k-demo-glow{outline:5px solid #ffd43b!important;outline-offset:3px;border-radius:24px}
@media (prefers-reduced-motion:reduce){.k-intro-steps span{animation:none}}
.k-pc-kid{margin:0;padding:8px 12px;border-radius:14px;background:#eef4ff;font:800 16px/1.35 var(--f-ui);color:#2b2f45}
.k-song .k-pc-kid{font-size:15px}

/* Near you (parents) */
.k-nearform{display:flex;gap:8px}
.k-nearform input{flex:1;min-width:0;padding:10px;border-radius:10px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:600 14px var(--f-ui)}
.k-neartry{white-space:normal!important;color:#1f8a5f!important}
a.k-fambtn{display:grid;place-items:center;text-decoration:none}

/* English translations hidden (parent setting): the explanations for the child stay */
.kids-noen .k-act small,.kids-noen .k-pc-fact span,.kids-noen .k-g-bubble small,.kids-noen .k-g-hint small,.kids-noen .k-path-head b small,
.kids-noen .k-manner em,.kids-noen .k-tellcard small,.kids-noen .k-pc-topics small,.kids-noen .k-next em,.kids-noen .k-intro h3 span{display:none}
.k-sound{display:block;font:700 13px/1.5 var(--f-ui);color:#7a5af8;letter-spacing:.01em}
.k-sound sup{font-size:11px;color:#e8590c;margin-left:1px}
.kids-noen .k-sound{display:none}
.k-infocard .btn.ghost{background:#fff;color:#2b2f45;border:2px solid #d9e1ea;margin:4px 0 8px;align-self:flex-start}
/* home bar: each button says what it is */
.k-homebar{align-items:flex-start;gap:6px}
.k-homebtn{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;padding:0;border:0;background:none;cursor:pointer;font:inherit}
.k-homebtn .k-journey-map{display:grid;place-items:center;margin:0}
.k-homebtn b{font:800 11px/1.15 var(--f-ui);color:#2b2f45;text-align:center}
.k-homebtn small{font:700 10px/1.1 var(--f-ui);color:#6b7390;text-align:center}
.k-homebar-garden{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.k-homebar-garden .k-garden{width:100%}
.k-homebar-garden small{font:800 11px/1.2 var(--f-ui);color:#2b2f45;text-align:center}
.k-homebar-garden small span{font-weight:700;color:#6b7390}
.kids-night .k-homebtn b,.kids-night .k-homebar-garden small{color:#eef1ff}
.kids-night .k-homebtn small,.kids-night .k-homebar-garden small span{color:#c9d1f2}
.kids-noen .k-homebtn small,.kids-noen .k-homebar-garden small span{display:none}
@media (max-width:440px){.k-homebtn{width:54px}.k-homebar-garden small span{display:none}}
.k-homebtn{gap:8px}
.k-homebtn .k-journey-map{width:52px;height:52px;font-size:25px}
.k-homebar-garden{gap:8px;padding-top:6px}

/* Family members: who's recording, who the child talks to */
.k-people{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.k-people button{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;border:2px solid #e3e8ef;background:#fff;color:#2b2f45;font:800 14px var(--f-ui);cursor:pointer}
.k-people button.on,.k-people span.on>button:first-child{border-color:#ff7aa2;background:#fff0f5}
.k-people.big{justify-content:flex-start}
.k-people.big>span{display:flex;align-items:center}
.k-people.big .x{margin-left:-6px;padding:4px 8px;border-radius:50%;font-size:11px;color:#6b7390}

/* The top stays put while a page scrolls: back, ⓘ and 🔒, and the page's title bar under them */
.k-top{position:sticky;top:0;z-index:30;padding-bottom:6px}
.k-page>.k-path-head:first-child{position:sticky;top:calc(max(12px,env(safe-area-inset-top,0px)) + 66px);z-index:25}
.kids-night .k-g-done small,.kids-night .k-tellpage>.k-readtip{color:#c9d1f2}
.k-song.locked small{font:700 13px var(--f-ui);color:#6b7390}
.k-calls{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.k-dchip{padding:4px 10px;border-radius:999px;border:2px solid #e3e8ef;background:#fff;color:#2b2f45;font:800 12px var(--f-ui);cursor:pointer}
.k-dchip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 15%,#fff)}
/* the frozen top gets a soft backing so the page scrolls away under it */
.k-top{background:linear-gradient(#bfe6ff 75%,rgba(191,230,255,0))}
.kids-night .k-top{background:linear-gradient(#141a3a 75%,rgba(20,26,58,0))}
/* sticker book: word stickers with their word, a counter per page */
.k-stickerbook>.k-readtip{text-align:center;max-width:520px}
.k-spage-head .k-spage-t{display:flex;flex-direction:column;font-size:inherit;line-height:1.1}
.k-spage-head .k-spage-t small{margin:0;font:700 12px var(--f-ui);color:#8a7a50}
.k-spage-head em{font:900 14px var(--f-ui);font-style:normal;color:#e8590c;margin-left:6px}
.k-spage.full{box-shadow:0 0 0 4px #ffd43b}
.k-sgrid button.k-stk-got{aspect-ratio:1;border:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;cursor:pointer;font-size:30px;min-width:0}
.k-sgrid button.k-stk-got .k-ic{width:40px;height:40px}
.k-sgrid button.k-stk-got small{font:800 10px/1.1 var(--f-ui);color:#2b2f45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-stk-empty{color:#ecdcb0;font:900 20px var(--f-ui)}
/* the end of a lesson: one big thing at a time */
.k-end{gap:12px;text-align:center}
.k-endslide{display:flex;flex-direction:column;align-items:center;gap:8px}
.k-endslide>small{font:800 14px var(--f-ui);color:#e8590c}
.k-endpic{font-size:110px;line-height:1}
.k-endtitle{font:900 28px/1.15 var(--f-ui);color:#2b2f45}
.k-endvi{border:0;background:#fff4e0;border-radius:18px;padding:10px 16px;cursor:pointer;font:inherit}
.k-endvi b{font:900 22px/1.3 var(--f-ui);color:#2b2f45}
.k-endkid{margin:0;max-width:340px;font:700 16px/1.35 var(--f-ui);color:#5b6478}
.k-endsticker button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 18px;border:0;border-radius:24px;background:#fff;box-shadow:0 6px 0 #ecdcb0;transform:rotate(-4deg);cursor:pointer;animation:k-pop .5s ease-out}
.k-endsticker .k-ic{width:110px;height:110px}.k-endsticker small{font:900 18px var(--f-ui);color:#2b2f45}
.k-endsticker>span{font-size:90px}
@keyframes k-pop{0%{transform:scale(.3) rotate(-20deg)}70%{transform:scale(1.1) rotate(-2deg)}100%{transform:scale(1) rotate(-4deg)}}
.k-enddots{display:flex;gap:6px}.k-enddots i{width:9px;height:9px;border-radius:50%;background:#e3e8ef}.k-enddots i.on{background:#5ad1a1}
.k-next.big{flex-direction:column;text-align:center;padding:18px}
.k-next.big .k-next-pic{font-size:100px}
.k-next.big b{font-size:24px}
.k-next-pic.mystery{filter:none;opacity:1;display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:radial-gradient(#fff6c9,#ffd43b);animation:k-wobble 2s ease-in-out infinite}
@keyframes k-wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.k-next-pic.mystery{animation:none}}
/* Kể cho bà: three numbered steps */
.k-tellsteps{display:flex;justify-content:center;align-items:flex-start;gap:18px}
.k-tellstep{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:84px}
.k-tellstep b{font:900 15px var(--f-ui);color:#2b2f45}
.k-tellstep small{font:700 12px var(--f-ui);color:#6b7390}
.k-tellstep.off{opacity:.4}
.k-tellstep .k-pill{width:72px;height:72px;min-width:0;padding:0;font-size:32px}
.k-tellstep .k-mic{width:96px;height:96px;font-size:44px}
.k-tellnav{align-items:center;gap:14px}
.k-tellnav small{font:800 14px var(--f-ui);color:#6b7390}
.kids-night .k-tellstep b{color:#eef1ff}.kids-night .k-tellstep small,.kids-night .k-tellnav small{color:#c9d1f2}
.kids-noen .k-tellstep small{display:none}
/* the trip map's close-up of where Bông is */
.k-zoom{position:relative;width:min(100%,520px);border-radius:24px;overflow:hidden;background:#c8e5fb;box-shadow:0 6px 0 #c9dcea;border:5px solid #fff}
.k-zoom svg{position:absolute;inset:0;width:100%;height:100%}
.k-zring{fill:none;stroke:#fff;stroke-width:.8;stroke-dasharray:1.6 1.4;stroke-linecap:round}
.k-zoom>span,.k-zoom>button{position:absolute;transform:translate(-50%,-50%)}
.k-zhere b{display:block;padding:4px 10px;border-radius:999px;background:#ff9f43;color:#fff;font:900 14px var(--f-ui);white-space:nowrap;box-shadow:0 3px 0 #c9752a}
.k-znear{display:flex;flex-direction:column;align-items:center;font-size:20px;opacity:.85}
.k-znear small{font:800 10px var(--f-ui);color:#2b5d3b;white-space:nowrap;background:#ffffffcc;border-radius:6px;padding:0 4px}
.k-zsight{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;border:3px solid #fff;background:#fff;box-shadow:0 3px 0 #9fc3dd;cursor:pointer;padding:0}
.k-zsight.next{background:radial-gradient(#fff6c9,#ffd43b);font-size:18px;animation:k-wobble 2s ease-in-out infinite;cursor:default}
.k-zsight.later{width:16px;height:16px;background:#ffffffaa;box-shadow:none;border-width:2px;cursor:default}
.k-zoom .k-jbong{transform:translate(-50%,-85%);z-index:2;pointer-events:none}
.k-zcount{position:absolute;left:10px;bottom:8px;font:800 12px var(--f-ui);color:#2b2f45;background:#ffffffd9;border-radius:999px;padding:2px 8px}
.k-znext{display:flex;flex-direction:column;align-items:center;gap:0}
.k-znext i{font-style:normal;font-size:22px;color:#ff9f43;text-shadow:0 1px 0 #fff}
.k-znext small{font:800 11px var(--f-ui);color:#2b2f45;background:#ffffffd9;border-radius:6px;padding:0 5px;white-space:nowrap}
.k-znext{flex-direction:row;gap:3px;z-index:3}
/* check a recording before keeping it */
.k-review{z-index:80}
.k-review h3{font-size:22px}
.k-rev-wave{width:100%;height:70px;border-radius:12px;background:#f7f9fc}
.k-rev-l{display:flex;align-items:center;gap:8px;font:800 13px var(--f-ui);color:#2b2f45}
.k-rev-l input{flex:1}
/* the trip page fits the screen: one map frame, switched between close-up and the whole trip */
.k-mapswitch{display:flex;gap:6px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 4px 0 #c9dcea}
.k-mapswitch button{display:flex;flex-direction:column;align-items:center;padding:6px 16px;border:0;border-radius:999px;background:none;color:#4a5170;font:800 14px var(--f-ui);cursor:pointer}
.k-mapswitch button small{font:700 10px var(--f-ui);color:#8a93ab}
.k-mapswitch button.on{background:#ff9f43;color:#fff}.k-mapswitch button.on small{color:#fff6e8}
.k-jmapwrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.k-jmapwrap .k-jmap{height:calc(100dvh - 360px);min-height:300px;width:auto;max-width:100%}
.k-zoom{max-height:calc(100dvh - 330px)}
.kids-noen .k-mapswitch small{display:none}

/* Trip close-up: a board-game path for the place's landmarks */
.k-zoom{aspect-ratio:110/80;background:#bfe6ff}
.k-zmap{opacity:.55}
.k-zpath{position:absolute;inset:0;width:100%;height:100%}
.k-zpath path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.1 5;opacity:.95}
.k-zdecor{position:absolute;transform:translate(-50%,-50%);font-size:22px;opacity:.75;pointer-events:none}
.k-zstone{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:4px solid #fff;padding:0;font-size:24px;box-shadow:0 4px 0 #9fc3dd}
.k-zstone.done{background:#fff;cursor:pointer}
.k-zstone.next{background:radial-gradient(#fff6c9,#ffd43b);animation:k-wobble 2s ease-in-out infinite}
.k-zstone.later{width:30px;height:30px;border-width:3px;background:#ffffffb3;color:#7a8aa3;font:900 13px var(--f-ui);box-shadow:none}
.k-zbong{transform:translate(-50%,-92%)!important;z-index:4}
.k-ztitle{position:absolute;left:50%;top:4%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#ff9f43;color:#fff;box-shadow:0 3px 0 #c9752a;z-index:3}
.k-ztitle b{font:900 15px var(--f-ui)}.k-ztitle small{font:800 12px var(--f-ui);color:#fff3e0}
.k-zoom .k-znext{position:absolute;right:8px;bottom:8px;left:auto;top:auto;transform:none;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:14px;background:#ffffffe6;z-index:3}
.k-zoom .k-znext i{font-style:normal;font-size:20px;color:#ff9f43}
.k-zoom .k-znext span{display:flex;flex-direction:column;line-height:1.1}
.k-zoom .k-znext small{font:700 10px var(--f-ui);color:#6b7390;background:none;padding:0}
.k-zoom .k-znext b{font:900 13px var(--f-ui);color:#2b2f45}
.k-zlast{position:absolute;left:8px;bottom:8px;max-width:55%;padding:4px 10px;border-radius:14px;background:#ffffffe6;font:800 12px var(--f-ui);color:#2b2f45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
.k-zcount{display:none}

/* Whole trip: every stop shows its topic, stops ahead faded, labels for here / next / the finish */
.k-jstop.later{width:28px;height:28px;font-size:15px;background:#ffffffcc;opacity:.75}
.k-jstop.later span{filter:grayscale(.4)}
.k-jstop.done i{background:#5ad1a1}
.k-jlabel{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);padding:1px 7px;border-radius:8px;background:#ffffffe6;color:#2b2f45;font:800 11px var(--f-ui);font-style:normal;white-space:nowrap;pointer-events:none;box-shadow:0 1px 3px #0002}
.k-jlabel.now{background:#5ad1a1;color:#fff;font-size:12px}
.k-jlabel.end{background:#2b2f45;color:#fff}
.k-jstop em.k-jlabel{left:50%;top:100%}
.k-review .k-tellstep b{color:#2b2f45}.k-review .k-tellstep small{color:#6b7390}
.k-rev-edit{display:flex;flex-direction:column;align-items:center;gap:0;background:#fff;color:#2b2f45;border:2px solid #d9e1ea}
.k-rev-edit small{font:600 11px var(--f-ui);color:#6b7390;text-transform:none;letter-spacing:0}
.k-jlabel.end{top:auto;bottom:100%;transform:translate(-50%,-4px)}
.k-jlabel.now{left:100%;top:50%;transform:translate(6px,-50%)}
.k-jstop em.k-jlabel.end{top:auto;bottom:100%;transform:translate(-50%,-4px)}
.k-jstop em.k-jlabel.now{left:100%;top:50%;transform:translate(6px,-50%)}

/* ---- UI pass ---- */
/* the parent screen sits above the frozen top bar */
.k-parent-bg{z-index:45}.k-parent{z-index:46}
/* parent tabs: on a phone, every tab visible as a grid instead of a hidden side-scroll */
@media (max-width:640px){
  .k-ptabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:visible}
  .k-ptabs button{flex-direction:column;gap:2px;padding:6px 4px;font-size:11.5px;text-align:center;justify-content:center}
  .k-ptabs button span{font-size:18px}
}
/* parent buttons: one compact row */
.k-parent-btns{flex-wrap:nowrap;justify-content:space-between}
.k-parent-btns .btn{flex:1;padding:10px 12px;font-size:13px}
/* page titles: the English under the Vietnamese instead of wrapping beside it */
.k-path-head b{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.k-path-head b small{margin-left:0;font-size:11.5px}
.k-path-head{align-items:center;gap:10px}
/* labels that double as audio keys stay lowercase in the data; shown with a capital */
.k-hub-title b::first-letter,.k-hubcard b::first-letter{text-transform:uppercase}
.k-hubcard small{display:block;font:700 11px var(--f-ui);color:#fff;opacity:.9}
.kids-noen .k-hubcard small{display:none}
/* home: game tiles in groups, three to a row on phones */
.k-actgroup{width:min(560px,100%);display:flex;flex-direction:column;gap:8px}
.k-actgroup h3{margin:6px 4px 0;font:900 17px var(--f-ui);color:#2b2f45}
.k-actgroup h3 small{font:700 12px var(--f-ui);color:#6b7390}
.kids-night .k-actgroup h3{color:#eef1ff}.kids-night .k-actgroup h3 small{color:#c9d1f2}
.kids-noen .k-actgroup h3 small{display:none}
@media (max-width:560px){
  .k-acts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .k-act{padding:12px 4px 10px;border-radius:24px;box-shadow:0 6px 0 color-mix(in srgb,var(--k) 65%,#000)}
  .k-act-e{font-size:44px}
  .k-act b{font-size:15px;line-height:1.15;text-align:center}
  .k-act small{font-size:10px}
}
@media (max-width:640px){ .k-ptabs{grid-template-columns:repeat(4,minmax(0,1fr))} .k-ptabs button{font-size:10.5px} }
.k-acts .k-act{grid-column:auto!important}
/* games that open later on the trip; a new game; plans */
.k-act.later{filter:grayscale(.85);opacity:.55}
.k-act.later small{opacity:1;font-weight:900}
.k-newgame{width:150px;cursor:default;animation:k-pop .5s ease-out}
.k-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.k-tier{padding:12px;border-radius:14px;border:2px solid #e3e8ef;display:flex;flex-direction:column;gap:4px}
.k-tier.on{border-color:#5ad1a1;background:#e8f8f1}
.k-tier b{font:900 16px var(--f-ui)}.k-tier small{font:600 13px var(--f-ui);color:#5b6478}
/* Mặc đồ: the clothes go on Bông */
.k-dressed{position:relative;display:grid;place-items:center}
.k-worn{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;font-size:44px;line-height:1;pointer-events:none;animation:k-pop .4s ease-out}
.k-worn .k-w,.k-worn .k-ic{width:100%;height:auto}
.k-worn{animation:k-wearin .45s ease-out}
@keyframes k-wearin{0%{transform:translate(-50%,-50%) scale(.2)}70%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}
.k-dressed{animation:k-bounce 2.4s ease-in-out infinite}
.k-dressed .bong{animation:none!important;width:100%;height:100%}
.k-dressed{display:block;margin:4px auto 10px}
.k-dressed .bong{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain}
.k-dressed .k-worn{z-index:2}
.k-dressed.pic{position:relative;width:auto;height:auto}
.k-dressed.pic .bong{position:static;width:auto!important;height:auto!important;max-height:210px}
.k-wornbadge{position:absolute;right:-6px;bottom:6px;width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid #5ad1a1;display:grid;place-items:center;font-size:28px;box-shadow:0 3px 0 #c9dcea}
.k-wornbadge .k-ic{width:38px;height:38px}
.k-dresslooks{display:flex;justify-content:center;align-items:flex-end;gap:10px;flex-wrap:wrap}
.k-dresslooks .k-dressed.pic .bong{max-height:140px}
.k-dresslooks .k-wornbadge{width:40px;height:40px}.k-dresslooks .k-wornbadge .k-ic{width:28px;height:28px}
.k-clothes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.k-cloth{animation:k-clothin .4s ease-out;transform-origin:center}
@keyframes k-clothin{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
/* Tủ đồ: dress-up */
.k-wardrobe{gap:12px}
.k-wd-stage{position:relative;display:grid;place-items:center;width:min(100%,520px);padding:8px 0;border-radius:28px;background:radial-gradient(circle at 50% 60%,#fff 0 45%,#fff0 70%)}
.k-wd-off{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;align-items:center;border:0;border-radius:16px;background:#fff;padding:6px 10px;font-size:22px;cursor:pointer;box-shadow:0 3px 0 #c9dcea}
.k-wd-off small{font:800 11px var(--f-ui);color:#6b7390}
.k-wd-tabs{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:4px}
.k-wd-tabs button{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:62px;padding:6px 4px;border-radius:16px;border:3px solid #fff;background:#ffffffcc;cursor:pointer;font-size:24px}
.k-wd-tabs button small{font:800 11px var(--f-ui);color:#2b2f45}
.k-wd-tabs button.on{border-color:#ff7aa2;background:#fff}
.k-wd-tabs button.worn::after{content:"✓";position:absolute;margin:-8px 0 0 40px;font:900 12px var(--f-ui);color:#1f8a5f}
.k-wd-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(100%,520px)}
.k-wd-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:20px;border:4px solid #fff;background:#fff;cursor:pointer;box-shadow:0 4px 0 #c9dcea;color:#2b2f45}
.k-wd-item .k-pic{font-size:40px}.k-wd-item .k-ic{width:52px;height:52px}
.k-wd-item b{font:800 13px/1.15 var(--f-ui);text-align:center}
.k-wd-item.on{border-color:#5ad1a1;background:#effbf5}
.k-wd-colors{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(100%,520px)}
.k-wd-color{width:40px;height:40px;border-radius:50%;border:4px solid #fff;background:var(--c);cursor:pointer;box-shadow:0 3px 0 #c9dcea}
.k-wd-color.on{outline:3px solid #2b2f45;outline-offset:2px}
.k-wd-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:min(100%,520px);overflow:visible}
.k-wd-tabs button{width:auto;font-size:20px;padding:6px 2px;position:relative}
.k-wd-tabs button small{font-size:10px}
/* paper-doll dress-up: Bông and every piece share one canvas size, stacked */
.k-dressed.paper{position:relative;margin:4px auto 6px}
.k-dressed.paper .k-pc{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.k-dressed.paper .k-pc.new{animation:k-pcin .35s ease-out}
@keyframes k-pcin{from{opacity:0;transform:translateY(-6%)}to{opacity:1;transform:none}}
.k-wd-tabs .k-pic{font-size:24px!important;line-height:1;height:30px;display:grid;place-items:center}
.k-wd-tabs .k-pic .k-ic{width:30px;height:30px}
@media (prefers-reduced-motion: reduce){.k-dressed.paper .k-pc{animation:none!important}}
/* dress-up: things that just opened sparkle until tapped */
.k-wd-item.is-new{position:relative}
.k-wd-item.is-new::after{content:"✨";position:absolute;top:-6px;right:-4px;font-size:18px;animation:k-twinkle 1.6s ease-in-out infinite}
.k-wd-tabs button.has-new::before{content:"";position:absolute;top:4px;left:6px;width:9px;height:9px;border-radius:50%;background:#ff7aa2}
@keyframes k-twinkle{50%{transform:scale(1.25) rotate(12deg)}}
@media (prefers-reduced-motion: reduce){.k-wd-item.is-new::after{animation:none}}
/* dress-up: things still locked (open with stars) */
.k-wd-item.locked{background:#eef1f7;border-color:#eef1f7;box-shadow:0 4px 0 #d3dae6}
.k-wd-item.locked .k-pic{filter:grayscale(1) opacity(.55)}
.k-wd-item.locked b{color:#6b7390;font-size:12px}
.k-wd-item.locked.can{border-color:#ffd43b;background:#fffbea}
.k-wd-item.locked.can .k-pic{filter:grayscale(.4) opacity(.85)}
.k-wd-stars b{font:900 18px var(--f-ui);color:#e0a800;margin-right:4px}
/* cooking: the finished dish, and what went into it */
.k-cook-pot.done{font-size:96px;min-height:150px}
.k-cook-pot.done .k-cook-dish{animation:k-pop .5s ease-out}
.k-cook-made{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;width:min(100%,420px);margin:10px auto 0}
.k-cook-made span{display:flex;flex-direction:column;align-items:center;font-size:30px;background:#fff;border-radius:14px;padding:4px 8px;box-shadow:0 3px 0 #e8a15b}
.k-cook-made .k-ic{width:40px;height:40px}
.k-cook-made b{font:800 11px var(--f-ui);color:#2b2f45}
.k-cook-made i{font:900 18px var(--f-ui);color:#e8a15b;font-style:normal}
/* theme buttons show a picture from the theme */
.k-theme{display:grid;place-items:center;padding:0}
.k-theme .k-pic{display:grid;place-items:center;line-height:1;font-size:30px;overflow:hidden;max-width:100%;max-height:100%}
.k-theme .k-pic img{max-width:44px;max-height:44px}
.k-theme .k-ic{width:46px;height:46px}
@media (max-width:440px){.k-themes{gap:7px;flex-wrap:nowrap}.k-theme{width:60px;height:60px;border-radius:18px}.k-theme .k-ic{width:40px;height:40px}}
/* Thử món mới (trying new food) */
.k-taste-row{display:flex;align-items:center;justify-content:center;gap:10px}
.k-taste-plate{width:150px;height:150px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 10px #e7eef6,0 5px 0 #c9dcea;display:grid;place-items:center;font-size:72px;margin:0 auto}
.k-taste-plate .k-ic{width:96px;height:96px}
.k-taste-tries{display:flex;gap:2px;justify-content:center;margin:6px 0;font-size:16px}
.k-taste-tries i{font-style:normal;opacity:.25;filter:grayscale(1)}.k-taste-tries i.on{opacity:1;filter:none}
.k-taste-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:min(100%,520px);margin:8px auto}
.k-taste-step{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:18px;border:4px solid #fff;background:#fff;box-shadow:0 4px 0 #c9dcea;cursor:pointer;color:#2b2f45}
.k-taste-step span{font-size:30px}.k-taste-step b{font:800 12px/1.1 var(--f-ui);text-align:center}.k-taste-step small{font:600 10px var(--f-ui);color:#6b7390;text-align:center}
.k-taste-step.next{border-color:#ffa94d;animation:k-bounce 1.6s ease-in-out infinite}
.k-taste-step.did{background:#effbf5;border-color:#5ad1a1}
.k-taste-step:disabled{opacity:.45;cursor:default}
.k-taste-more{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.k-taste-more button{width:52px;height:52px;border-radius:16px;border:3px solid #fff;background:#ffffffcc;font-size:28px;display:grid;place-items:center;cursor:pointer}
.k-taste-more .k-ic{width:38px;height:38px}
.k-taste-tries{gap:6px}.k-taste-tries i{width:14px;height:14px;border-radius:50%;background:#c9dcea;opacity:1;filter:none}.k-taste-tries i.on{background:#ffa94d}
.k-taste-go{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px;border:0;border-radius:24px;background:#5ad1a1;box-shadow:0 5px 0 #2f9e74;color:#fff;cursor:pointer}
.k-taste-go span{font-size:34px}.k-taste-go b{font:900 18px var(--f-ui)}.k-taste-go small{font:700 12px var(--f-ui);opacity:.9}
/* Thử món mới: the scene */
.k-taste-path{display:flex;align-items:center;justify-content:center;gap:0;margin:4px 0 2px}
.k-taste-path span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#ffffff55;filter:grayscale(1);opacity:.6}
.k-taste-path span.did{background:#5ad1a1;filter:none;opacity:1}
.k-taste-path span.now{background:#fff;filter:none;opacity:1;box-shadow:0 0 0 4px #ffa94d}
.k-taste-path i{width:14px;height:4px;background:#ffffff55;border-radius:2px}
.k-taste-scene{display:flex;align-items:flex-end;justify-content:center;gap:0;min-height:170px}
.k-taste-scene .k-taste-plate{width:130px;height:130px;margin:0;transform:translateX(calc(60px - var(--near) * 12px));transition:transform .5s ease}
.k-taste-scene .k-taste-plate .k-ic{width:84px;height:84px}
.k-taste-do{display:flex;flex-direction:column;align-items:center;gap:2px;width:min(100%,320px);margin:8px auto;padding:12px 16px;border:5px solid #ffa94d;border-radius:28px;background:#fff;box-shadow:0 6px 0 #e8590c;color:#2b2f45;cursor:pointer;animation:k-bounce 2s ease-in-out infinite}
.k-taste-do span{font-size:48px;line-height:1}.k-taste-do b{font:900 24px var(--f-ui)}.k-taste-do small{font:700 13px var(--f-ui);color:#6b7390;text-align:center}
.k-taste-more{align-items:center}.k-taste-more small{flex-basis:100%;text-align:center;font:800 13px var(--f-ui);color:#fff;text-shadow:0 1px 2px #0006}
@media (prefers-reduced-motion:reduce){.k-taste-do{animation:none}.k-taste-scene .k-taste-plate{transition:none}}
/* Bông turning around */
.k-hello[data-act]{cursor:pointer}
/* turning Bông by hand: sideways drags are his, up and down still scroll; seen from behind, wings sit over him */
[data-turn]{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
[data-turn].turning{cursor:grabbing}
.k-hello .bong.turned,[data-turn].turning .bong,[data-spinning] .bong{animation:none}
.k-dressed.paper[data-view="4"] .k-pc.behind{z-index:2}
.k-wd-spin{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;align-items:center;border:0;border-radius:16px;background:#fff;padding:6px 12px;font:900 22px var(--f-ui);color:#2b2f45;cursor:pointer;box-shadow:0 3px 0 #c9dcea}
.k-wd-spin small{font:800 11px var(--f-ui);color:#6b7390}
/* Bông's room: one more thing per finished lesson, dragged anywhere */
.k-room{position:relative;width:min(100%,520px);aspect-ratio:3/4;margin:0 auto;border-radius:22px;overflow:hidden;background:#f8c9a4 center bottom/cover no-repeat;box-shadow:0 4px 0 #0002;touch-action:none}
.k-room-thing{position:absolute;transform:translateX(-50%);border:0;background:none;padding:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 3px 2px #0003)}
.k-room-thing .k-ic,.k-room-thing img{width:100%;height:auto;display:block;pointer-events:none}
.k-room-thing.held{cursor:grabbing;z-index:5;filter:drop-shadow(0 8px 6px #0004);transform:translateX(-50%) scale(1.08)}
.k-room-thing.is-new{animation:k-pop .6s ease-out 2,k-roomglow 1.6s ease-in-out infinite}
@keyframes k-roomglow{50%{filter:drop-shadow(0 0 10px #ffe066) drop-shadow(0 0 4px #fff)}}
.k-room-bong{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);width:26%;z-index:1}
.k-room-bong .bong{width:100%!important;height:auto!important}
.k-room-next{display:flex;align-items:center;gap:12px;width:min(100%,520px);margin:0 auto;padding:10px 14px;border-radius:18px;background:#fff;box-shadow:0 3px 0 #0001}
.k-room-next small{display:block;font:700 12px var(--f-ui);color:#6b7390}
.k-room-next b{font:900 16px var(--f-ui);color:#2b2f45}
.k-room-mystery{width:52px;flex:none;filter:brightness(0) opacity(.25)}
.k-room-mystery .k-ic,.k-room-mystery img{width:100%;height:auto;display:block}
@media (prefers-reduced-motion: reduce){.k-room-thing.is-new{animation:none}}
.k-room-thing .k-w,.k-room-mystery .k-w{display:block}
/* Ghép đôi (matching): two columns, tap one then its partner; matched pairs share a colour */
.k-match-page{gap:12px}
.k-match-lv{display:flex;align-items:center;gap:6px;justify-content:center;font:900 16px var(--f-ui);color:#2b2f45}
.k-match-lv i{width:12px;height:12px;border-radius:50%;background:#dfe5f2}
.k-match-lv i.on{background:#4dabf7}
.k-match{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,8vw,60px);width:min(100%,520px);margin:0 auto}
.k-match-col{display:flex;flex-direction:column;gap:10px}
.k-match-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;padding:8px;border:4px solid transparent;border-radius:22px;background:#fff;box-shadow:0 4px 0 #0002;cursor:pointer;transition:transform .15s}
.k-match.n5 .k-match-card{min-height:78px}
.k-match-card .k-ic{width:72px;height:72px;object-fit:contain}
.k-match.n5 .k-match-card .k-ic{width:58px;height:58px}
.k-match-card.shadow .k-ic{filter:brightness(0) opacity(.75)}
.k-match-card.on{border-color:#ffd43b;transform:scale(1.05);box-shadow:0 0 0 4px #ffd43b55,0 4px 0 #0002}
.k-match-card.bad{animation:k-wobble .5s}
.k-match-card.done{border-color:var(--m);background:color-mix(in srgb,var(--m) 14%,#fff);cursor:default}
.k-match-card.done.shadow .k-ic{filter:none}
.k-match-card.done::after{content:'✓';position:absolute;top:4px;right:8px;font:900 18px var(--f-ui);color:var(--m)}
.k-match-card small{font:800 13px var(--f-ui);color:#2b2f45}
.k-match-snd{font-size:44px;line-height:1}
.k-match-word{font:900 24px var(--f-ui);color:#2b2f45;text-align:center}
.kids-night .k-match-lv{color:#eef1ff}
/* the English under the Vietnamese in the art area */
.k-stb small{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.k-stb small i{font:700 9.5px var(--f-ui);font-style:normal;color:#6b7390}
.k-cat small i{display:block;font:700 9.5px var(--f-ui);font-style:normal;opacity:.75}
.k-banner b small,.k-hub-title b small{display:block;font:700 12px var(--f-ui);opacity:.8}
/* the art shelf: framed pictures on wooden shelves */
.k-hub-title{position:relative}
.k-shelf-btn{display:flex;flex-direction:column;align-items:center;margin-left:auto;border:0;border-radius:18px;background:#fff;padding:6px 12px;box-shadow:0 4px 0 #0002;cursor:pointer;font-family:var(--f-ui)}
.k-shelf-btn span{font-size:28px;line-height:1.1}
.k-shelf-btn b{font:900 13px var(--f-ui);color:#2b2f45}
.k-shelf-btn small{font:700 10px var(--f-ui);color:#6b7390}
.k-shelf-page{gap:22px}
.k-shelf{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:14px;width:min(100%,520px);margin:0 auto;padding:0 10px 14px;min-height:120px}
.k-shelf::after{content:'';position:absolute;left:0;right:0;bottom:0;height:14px;border-radius:4px;background:linear-gradient(#c58b55,#9c6634);box-shadow:0 6px 8px #0003}
.k-shelf.empty{align-items:center;text-align:center;font:800 15px var(--f-ui);color:#2b2f45}
.k-shelf.empty small{display:block;font-weight:700;color:#6b7390}
.k-frame{flex:1;max-width:150px;aspect-ratio:3/4;padding:7px;border:0;border-radius:6px;background:#fff;box-shadow:0 0 0 5px #e9b872,0 6px 8px #0003;transform:rotate(var(--r,0));cursor:pointer}
.k-frame img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.k-frame.big{max-width:min(92%,420px);aspect-ratio:auto;transform:none;margin:8px auto 0;cursor:default}
.k-frame.big img{height:auto;max-height:55vh}
.k-shelf-date{text-align:center;font:700 12px var(--f-ui);color:#6b7390}
.k-shelf-acts{display:flex;justify-content:center;gap:12px}
.k-shelf-acts button{display:flex;flex-direction:column;align-items:center;min-width:88px;border:0;border-radius:20px;background:var(--k);color:#fff;padding:10px 12px;box-shadow:0 4px 0 color-mix(in srgb,var(--k) 65%,#000);cursor:pointer}
.k-shelf-acts span{font-size:26px}
.k-shelf-acts b{font:900 15px var(--f-ui)}
.k-shelf-acts small{font:700 11px var(--f-ui);opacity:.9}
.kids-night .k-shelf.empty,.kids-night .k-shelf-date{color:#eef1ff}
/* picture names on gallery cards and the art shelf: Vietnamese, with the English under it */
.k-galcard{grid-template-rows:1fr auto;gap:2px}
.k-galcard img,.k-galcard svg{min-height:0}
.k-picname{display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center;padding-top:2px}
.k-picname b{font:900 14px var(--f-ui);color:#2b2f45}
.k-picname small{font:700 11px var(--f-ui);color:#6b7390}
.k-frame{display:flex;flex-direction:column;gap:2px}
.k-frame img{flex:1;min-height:0}
.k-frame .k-picname b{font-size:12px}.k-frame .k-picname small{font-size:9.5px}
.k-picname.big b{font-size:22px}.k-picname.big small{font-size:13px}
.kids-night .k-picname.big b{color:#eef1ff}.kids-night .k-picname.big small{color:#c9d1f2}
.kids-night .k-hub-title b small{color:#c9d1f2;text-shadow:none}

/* ---------- grown-ups: the journey across Việt Nam (src/journey.js) ---------- */
.who-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:800;font-size:13px;cursor:pointer;color:var(--muted)}
.who-pill:hover{color:var(--ink);border-color:var(--acc)}
.lvpick{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--sunk)}
.lvpick button{display:flex;flex-direction:column;align-items:center;gap:0;padding:7px 2px;border:0;border-radius:10px;background:none;cursor:pointer;color:var(--muted);min-width:0}
.lvpick b{font-size:14px;font-weight:900;white-space:nowrap}
.lvpick small{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lvpick button.on{background:var(--surface);color:var(--acc);box-shadow:0 1px 0 var(--line),0 2px 6px rgba(0,0,0,.08)}

.jcard{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.jcard-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.jcard-head b{display:block;font-size:20px;font-weight:900}
.jcard-n{font-weight:900;font-size:14px;color:var(--acc);white-space:nowrap}
.jcard-sub{font-size:13.5px;color:var(--muted)}
.jmap{display:block;width:100%;height:auto;max-height:440px;border-radius:16px;background:var(--sea)}
.jmap .vn{fill:var(--land);stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
.jmap .nb{fill:var(--land2);stroke:var(--border);stroke-width:.5;vector-effect:non-scaling-stroke}
.jroute{fill:none;stroke:color-mix(in srgb,var(--ink) 35%,transparent);stroke-linecap:round;stroke-linejoin:round}
.jroute.done{stroke:var(--acc);stroke-dasharray:none}
.jdot{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 45%,transparent);cursor:pointer}
.jdot.done{fill:var(--acc);stroke:var(--surface)}
.jdot.now{fill:var(--acc);stroke:var(--surface);animation:jpulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes jpulse{50%{transform:scale(1.35)}}
.jlbl{font-family:var(--f-ui);font-weight:900;fill:var(--ink);stroke:var(--sea);paint-order:stroke;stroke-linejoin:round}
.jmap-side{display:none}
@media (min-width:1000px){ .jmap-main{display:none} .jmap-side{display:block} }

.jregion{font:900 13px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 4px 0;border-top:1px solid var(--line)}
.jstop{gap:14px}
.jstop-head{width:100%;text-align:left;font:inherit;cursor:pointer;justify-content:flex-start}
.jstop-head > div{flex:1;min-width:0}
.jstop-head p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jstop-pic{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;background:var(--sunk)}
.jstop:not(.active) .jstop-head{padding:10px 14px}
.jstop:not(.active) .jstop-head h2{font-size:18px}
.jstop:not(.active) .jstop-pic{width:46px;height:46px}
.jstop:not(.active) .jstop-head p{-webkit-line-clamp:1}
.jstop:not(.active):not(.complete) .jstop-pic{filter:saturate(.5);opacity:.8}

.jpost{position:relative;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 35% 50%,color-mix(in srgb,var(--acc) 22%,var(--sunk)),var(--sunk) 70%);height:220px;padding:14px 0}
.jpost img{height:100%;width:auto;max-width:62%;object-fit:contain;display:block;margin-left:6%}
.jpost-map{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36%;max-width:170px;border-radius:12px;overflow:hidden;border:3px solid var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.jpost-map .jmap{border-radius:0}
.jpost-name{display:flex;align-items:center;gap:10px}
.jpost-where{font-weight:800;color:var(--acc);font-size:14px}
.jpost-known{font-weight:800;font-size:17px}
.jpost-hist{color:var(--muted)}
.stage .jpost + .jpost-name{margin-top:4px}
.jstory{display:flex;flex-direction:column;gap:14px}
.jstory-vi{display:flex;align-items:center;gap:12px;padding:18px;border-radius:20px;background:color-mix(in srgb,var(--acc) 10%,var(--surface));border:2px solid color-mix(in srgb,var(--acc) 25%,var(--line))}
.jstory-vi b{flex:1;font:900 clamp(21px,5vw,28px)/1.3 var(--f-display)}
.jpic{font-size:34px;flex:none}
.jstory-en{font-size:17px;font-weight:700;color:var(--muted)}
.jen summary{cursor:pointer;font-weight:800;color:var(--acc);font-size:14px}
.jen p{margin-top:6px;color:var(--muted)}
.jmore{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--sunk)}
.jmore p{font-size:15.5px;line-height:1.55}
.jnext{display:flex;align-items:center;gap:14px;width:100%;max-width:420px;padding:12px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:left}
.jnext img{width:84px;height:64px;object-fit:cover;border-radius:12px;flex:none}
.jnext b{display:block;font-size:18px;font-weight:900}
.jnext small{display:block;color:var(--muted);font-size:13px}

/* ---------- welcome: grown-ups or kids? ---------- */
.v-welcome{max-width:980px!important}
.welcome{display:flex;flex-direction:column;align-items:center;gap:24px;padding:28px 0 20px;text-align:center}
.wl-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.wl-head h1{font:900 clamp(34px,8vw,48px)/1 var(--f-display);letter-spacing:-.02em}
.wl-head p{color:var(--muted);font-weight:700;max-width:420px}
.wl-pick{display:grid;grid-template-columns:1fr;gap:16px;width:100%}
@media (min-width:720px){ .wl-pick{grid-template-columns:1fr 1fr} }
.wl-card{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;border:2px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;padding:0;transition:transform .12s,box-shadow .12s}
.wl-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.wl-art{position:relative;height:190px;display:flex;align-items:center;padding-left:14px;overflow:hidden;background:radial-gradient(circle at 30% 50%,color-mix(in srgb,var(--acc) 25%,var(--sunk)),var(--sunk) 75%)}
.wl-art img{width:118px;height:118px;object-fit:contain;flex:none;margin-right:-34px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.wl-art img:nth-child(2){width:132px;height:132px;z-index:1}
.wl-kids .wl-art .bong-img,.wl-kids .wl-art svg{width:auto;height:160px;margin:0}
.wl-route{position:absolute;right:12px;top:12px;bottom:12px;width:24%;border-radius:12px;overflow:hidden;border:3px solid var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.25);background:var(--sea);display:grid;place-items:center}
.wl-route .jmap{height:100%;max-height:none;border-radius:0}
.wl-kids .wl-art{justify-content:center;padding:0;background:linear-gradient(120deg,#fff4d6,#ffe1ec)}
.wl-kids{border-color:#ffd27a}
.wl-txt{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.wl-txt small{font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.wl-kids .wl-txt small{color:#e0702a}
.wl-txt b{font:900 28px/1.1 var(--f-display)}
.wl-txt > span{color:var(--muted);font-size:15px}
.wl-txt em{font-style:normal;font-weight:900;color:var(--acc);margin-top:6px}
.wl-kids .wl-txt em{color:#e0702a}
.wl-note{color:var(--muted);font-size:13.5px}

/* ---------- Kids: first-time setup, and family voices as steps ---------- */
.k-setup{min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:20px 12px 40px}
.k-setcard{width:min(620px,100%);display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:26px;background:#fff;color:#2b2f45;box-shadow:0 14px 44px #2b2f4533}
.k-setsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.k-setsteps li{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;position:relative;color:#9aa3b8}
.k-setsteps li span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:#f2f5f9;border:2px solid #e3e8ef}
.k-setsteps li b{font:900 13px var(--f-ui)}
.k-setsteps li small{font:700 11px var(--f-ui)}
.k-setsteps li.now{color:#2b2f45}.k-setsteps li.now span{border-color:#ff8a3d;background:#fff6ee}
.k-setsteps li.done{color:#2f9e6e}.k-setsteps li.done span{border-color:#5ad1a1;background:#e8f8f1;font-weight:900}
.k-setbody{display:flex;flex-direction:column;gap:12px}
.k-setbody h2{margin:0;font:900 24px/1.2 var(--f-ui)}
.k-setbody h2 small,.k-setbody h3 small,.k-fbody > b small,.k-fway > b small{display:block;font:700 14px var(--f-ui);color:#6b7390}
.k-setbody h3{margin:6px 0 0;font:900 18px var(--f-ui)}
.k-setlead{font:600 15px/1.45 var(--f-ui);color:#4a5170}
.k-setname{font:800 20px var(--f-ui);padding:12px 14px;border-radius:14px;border:2px solid #d9e1ea;color:#2b2f45;background:#fff}
.k-setname:focus{outline:none;border-color:#ff8a3d}
.k-setvoice{display:grid;gap:8px}
.k-setvoice button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 16px;border-radius:16px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;cursor:pointer}
.k-setvoice i{grid-row:span 2;width:14px;height:14px;border-radius:50%;background:var(--c)}
.k-setvoice b{font:900 18px var(--f-ui)}.k-setvoice small{font:700 13px var(--f-ui);color:#6b7390}
.k-setvoice button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,#fff)}
.k-setnav{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:2px solid #eef2f7;padding-top:14px}
.k-setnav .btn.ghost{background:#fff;color:#2b2f45;border:2px solid #d9e1ea;box-shadow:0 4px 0 #d9e1ea}
.k-setnav .linkbtn{margin-left:auto}
.k-setdone{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.k-setlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.k-setlist li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#f5f8fb;font:600 14px/1.4 var(--f-ui)}
.k-setlist li > span:first-child{font-size:20px}

.k-fstep{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px;border-radius:18px;border:2px solid #e3e8ef;background:#fff}
.k-fnum{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ff8a3d;color:#fff;font:900 17px var(--f-ui)}
.k-fbody{display:flex;flex-direction:column;gap:8px;min-width:0}
.k-fbody > b{font:900 17px var(--f-ui);color:#2b2f45}
.k-fbody > small,.k-fway > small{font:600 13px/1.4 var(--f-ui);color:#6b7390}
.k-fwho{justify-content:flex-start}
.k-fwho button.on{border-color:#5ad1a1;background:#e8f8f1}
.k-fways{display:grid;gap:10px}
@media (min-width:560px){ .k-fways{grid-template-columns:1fr 1fr} }
.k-fway{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:#f5f8fb}
.k-fway > b{font:900 16px var(--f-ui);color:#2b2f45}
.k-fway .btn{width:100%;font-size:13px;padding:11px 10px}
.k-fway .btn.ghost,.k-fbody .btn.ghost{background:#fff;color:#2b2f45;border:2px solid #d9e1ea;box-shadow:0 3px 0 #d9e1ea}
.k-fway .k-people{justify-content:flex-start}
.k-famall summary{cursor:pointer;font:800 14px var(--f-ui);color:#4263eb;margin-bottom:6px}

.k-famrec{min-height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 16px 30px;color:#2b2f45}
.k-famrec-top{width:100%;display:flex;justify-content:space-between;align-items:center}
.k-famrec-top b{font:900 16px var(--f-ui);background:#fff;padding:6px 12px;border-radius:999px}
.k-famrec-top .btn.ghost{background:#fff;color:#2b2f45;border:2px solid #d9e1ea;box-shadow:0 3px 0 #d9e1ea;padding:9px 14px;font-size:13px}
.k-famrec-who{font:700 16px var(--f-ui);background:#fff;padding:8px 16px;border-radius:999px}
.k-famrec-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 18px;border-radius:26px;background:#fff;box-shadow:0 6px 0 #dfe7f0;border:3px solid transparent}
.k-famrec-card.got{border-color:#5ad1a1}
.k-famrec-pic{width:130px;height:130px;display:grid;place-items:center;font-size:96px}
.k-famrec-pic .k-ic{width:130px;height:130px}
.k-famrec-card > b{font:900 40px/1.1 var(--f-ui)}
.k-famrec-card > small{font:700 16px var(--f-ui);color:#6b7390}
.k-famrec-hear{margin-top:6px;border:0;border-radius:999px;padding:9px 16px;background:#eef3ff;color:#3b5bdb;font:800 14px var(--f-ui);cursor:pointer}
.k-bigmic{width:104px;height:104px;border-radius:50%;border:0;background:#ff5d7a;color:#fff;font-size:46px;cursor:pointer;box-shadow:0 7px 0 #c9354f}
.k-bigmic.on{animation:pulse 1.2s ease-in-out infinite;background:#e03150}
.k-famrec-tip{font:700 15px/1.4 var(--f-ui);text-align:center;background:#ffffffd9;padding:8px 14px;border-radius:14px}
.k-famrec-nav{width:100%;display:flex;align-items:center;gap:10px}
.k-famrec-nav .btn{flex:none;width:56px;padding:10px 0;background:#fff;color:#2b2f45;border:2px solid #d9e1ea;box-shadow:0 3px 0 #d9e1ea}
.k-famrec-nav .btn:disabled{opacity:.4}
.k-famrec-dots{flex:1;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.k-famrec-dots i{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #cbd3e0}
.k-famrec-dots i.done{background:#5ad1a1;border-color:#5ad1a1}
.k-famrec-dots i.now{outline:3px solid #ff8a3d;outline-offset:1px}
@media (max-width:719px){
  .welcome{gap:14px;padding-top:14px}
  .wl-head .bong{width:64px;height:auto}
  .wl-head h1{font-size:32px}
  .wl-head p{font-size:13.5px}
  .wl-pick{gap:12px}
  .wl-art{height:110px}
  .wl-art img{width:76px;height:76px;margin-right:-22px}
  .wl-art img:nth-child(2){width:86px;height:86px}
  .wl-kids .wl-art .bong-img,.wl-kids .wl-art svg{height:96px}
  .wl-txt{padding:12px 16px 14px;gap:3px}
  .wl-txt b{font-size:23px}
  .wl-txt > span{font-size:13.5px;line-height:1.4}
}
.k-setup{width:100%;box-sizing:border-box}
.k-setcard{margin:0 auto}
.k-agechips{display:flex;flex-wrap:wrap;gap:8px}
.k-agechips button{min-width:76px;padding:10px 14px;border-radius:14px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:900 17px var(--f-ui);cursor:pointer}
.k-agechips button.on{border-color:#ff8a3d;background:#fff6ee}
.k-agedesc{font:600 14px/1.4 var(--f-ui);color:#4a5170;background:#f5f8fb;padding:10px 12px;border-radius:12px}
.k-mixed{border:2px solid #e3e8ef;border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.k-mixed summary{cursor:pointer;font:900 16px var(--f-ui);color:#2b2f45}
.k-mixed summary small{display:block;font:700 13px var(--f-ui);color:#6b7390}
.k-mixed[open] summary{margin-bottom:8px}
.k-mixrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid #eef2f7;flex-wrap:wrap}
.k-mixrow > span{font:700 15px var(--f-ui)}
.k-mixpick{display:flex;gap:6px}
.k-invsheet{gap:12px;text-align:left;align-items:stretch}
.k-invsheet h3{text-align:center}
.k-invsheet > small{text-align:center}
.k-invmsg{font:600 14px/1.45 var(--f-ui);background:#f5f8fb;border-radius:14px;padding:10px 12px;color:#4a5170}
.k-invrow{display:flex;gap:8px}
.k-invrow input{flex:1;min-width:0;padding:11px 12px;border-radius:12px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:700 15px var(--f-ui)}
.k-invrow .btn{flex:none;min-width:104px;padding:10px 12px;font-size:13px}
.k-invmore{display:grid;gap:8px}
.k-invmore .btn.ghost{background:#fff;color:#2b2f45;border:2px solid #d9e1ea;box-shadow:0 3px 0 #d9e1ea;font-size:13px}
.k-invsheet .linkbtn{align-self:center}

/* ---------- Kids home: one big ▶, four picture doors ---------- */
.k-home2{gap:20px;padding-bottom:110px}
.k-home2 .k-journey{width:min(560px,100%)}
.k-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(560px,100%)}
.k-door{--k:#7aa8ff;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1.15;padding:12px;border:0;border-radius:32px;background:var(--k);color:#fff;cursor:pointer;box-shadow:0 8px 0 color-mix(in srgb,var(--k) 68%,#000);transition:transform .08s}
.k-door:active{transform:translateY(5px);box-shadow:0 3px 0 color-mix(in srgb,var(--k) 68%,#000)}
.k-door-e{font-size:clamp(52px,15vw,76px);line-height:1.05;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.k-door b{font:900 clamp(19px,5vw,24px)/1.1 var(--f-ui);text-shadow:0 2px 0 rgba(0,0,0,.15)}
.k-door small{font:800 13px var(--f-ui);opacity:.9}
.k-door-room{position:relative;display:block;width:1.9em;height:1.3em;border-radius:.16em;background:center bottom/cover no-repeat;border:4px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.15);overflow:hidden}
.k-door-room img{position:absolute;object-fit:contain}
.k-door-room img:nth-child(1){width:.55em;height:.55em;left:.12em;top:.08em}
.k-door-room img:nth-child(2){width:1.05em;height:.8em;right:.02em;bottom:0}
.k-door-room img:nth-child(3){width:.42em;height:.42em;left:.14em;bottom:.02em}
.k-door-song{position:relative;display:block;width:1.9em;height:1.3em}
.k-door-song img{position:absolute;object-fit:contain}
.k-door-song img:nth-child(1){height:1.45em;width:1em;left:.4em;bottom:-.08em}
.k-door-song img:nth-child(2){width:.5em;height:.5em;left:.72em;top:.6em;transform:rotate(-35deg);z-index:1}
.k-door-song img:nth-child(3){width:.45em;height:.45em;right:.08em;top:.02em;transform:rotate(12deg)}
.k-door-song img:nth-child(4){width:.38em;height:.38em;left:.02em;top:.2em;transform:rotate(-14deg)}
.k-door-badge{position:absolute;top:10px;right:12px;font-style:normal;font-size:24px}
.k-doors.small .k-door{aspect-ratio:auto;flex-direction:row;gap:10px;padding:14px;border-radius:24px}
.k-doors.small .k-door-e{font-size:38px}
.k-doors.small .k-door b{font-size:17px}
.k-doors.small .k-door small{display:none}
.k-home-garden{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;pointer-events:none;padding-bottom:env(safe-area-inset-bottom,0px)}
.k-home-garden .k-garden{width:min(560px,100%)}
body.kids-noen .k-door small{display:none}
.k-famrec-acc{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 80%,#000);font:900 13px var(--f-ui);border:2px solid var(--c)}

/* ---------- recording for anyone: guided steps, Good / Again ---------- */
.k-bigmic.on{animation:none;box-shadow:0 0 0 calc(var(--lv,0) * 26px + 6px) #ff5d7a55,0 7px 0 #c9354f;transition:box-shadow .08s}
.k-review.simple{gap:12px}
.k-rev-ok{font:700 15px var(--f-ui);color:#4a5170}
.k-rev-issue{font:800 17px/1.35 var(--f-ui);color:#b35400;background:#fff3e0;border-radius:14px;padding:10px 14px}
.k-rev-issue small{display:block;font:700 13px var(--f-ui);color:#8a5a2b;margin-top:2px}
.k-rev-big{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.k-rev-big button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 8px 14px;border:0;border-radius:24px;color:#fff;font-size:44px;cursor:pointer}
.k-rev-big b{font:900 20px var(--f-ui)}.k-rev-big small{font:800 13px var(--f-ui);opacity:.9}
.k-rev-good{background:#2fb37a;box-shadow:0 6px 0 #1f7f56}
.k-rev-again{background:#ff8a3d;box-shadow:0 6px 0 #c4621f}
.k-rev-big.warn .k-rev-good{background:#9fb5aa;box-shadow:0 6px 0 #7b8f85}
.k-rev-big.warn .k-rev-again{animation:pulse 1.6s ease-in-out infinite}
.k-recintro{gap:14px;text-align:center}
.k-recintro h2{margin:0;font:900 24px/1.2 var(--f-ui);color:#2b2f45}
.k-recintro h2 small,.k-recintro-lead small,.k-recintro-note small{display:block;font:700 14px var(--f-ui);color:#6b7390;margin-top:2px}
.k-recintro-lead{font:800 17px/1.4 var(--f-ui);background:#fff;padding:12px 16px;border-radius:18px}
.k-recsteps{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.k-recsteps li{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #dfe7f0}
.k-recsteps li span{grid-row:span 2;font-size:40px;text-align:center}
.k-recsteps li b{font:900 18px/1.25 var(--f-ui);color:#2b2f45}
.k-recsteps li small{font:700 13px var(--f-ui);color:#6b7390}
.k-recintro-note{font:800 15px/1.4 var(--f-ui);color:#2f7a55;background:#e8f8f1;padding:10px 14px;border-radius:14px}
.k-recintro-go{width:100%;font-size:18px;padding:18px}
.k-door-badge{top:8px;right:10px;background:#fff;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:20px;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.k-invauto{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;background:#f5f8fb}
.k-invauto .tog{background:#fff}
.k-invwhen{display:grid;grid-template-columns:1fr 1fr;gap:8px;font:800 12px var(--f-ui);color:#4a5170}
.k-invwhen label{display:flex;flex-direction:column;gap:3px;min-width:0}
.k-invwhen select{width:100%;min-width:0;padding:10px 8px;border-radius:12px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:800 15px var(--f-ui)}
.k-invbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.k-invbtns .btn{font-size:13px;padding:11px 8px}
.k-invbtns .btn.ghost{background:#fff;color:#2b2f45;border:2px solid #d9e1ea;box-shadow:0 3px 0 #d9e1ea}
.k-invtest{font:700 12.5px/1.4 var(--f-ui);color:#7a5a00;background:#fff6d6;border-radius:10px;padding:8px 10px}
.k-invsent{font:600 13px/1.45 var(--f-ui);background:#fff;border:2px dashed #b9c6d6;border-radius:12px;padding:10px;white-space:pre-wrap;word-break:break-word}
.k-invsent a{font-weight:800;color:#2f7fc0}
.k-invself summary{cursor:pointer;font:800 14px var(--f-ui);color:#4263eb;text-align:center}
.k-invself[open]{display:flex;flex-direction:column;gap:8px}
.k-invon-tag{display:block;font:700 11px var(--f-ui);color:#2f9e6e;text-transform:none;letter-spacing:0}
.k-act-img{width:1.25em;height:1.25em;object-fit:contain;display:block;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.k-door .k-act-img{width:1.3em;height:1.3em}
.k-doors.small .k-act-img{width:1.1em;height:1.1em}
.k-callsug{display:flex;flex-wrap:wrap;gap:4px;min-height:0;margin-top:4px}
.k-callsug:empty{display:none}
.k-callsug button{padding:4px 10px;border-radius:999px;border:2px solid #ffd27a;background:#fff8e6;color:#2b2f45;font:800 14px var(--f-ui);cursor:pointer}
.k-famgroup{display:flex;align-items:center;gap:8px;margin:12px 0 6px;font:900 15px var(--f-ui);color:#2b2f45}
.k-famgroup span{width:30px;height:30px;display:grid;place-items:center;font-size:22px}
.k-famgroup .k-act-img{width:30px;height:30px}
.k-famgroup small{font:700 12px var(--f-ui);color:#6b7390}
.k-famrow-pic .k-act-img{width:36px;height:36px}
.k-famrec-for{font:700 14px var(--f-ui);background:#fff;padding:6px 14px;border-radius:999px;display:flex;align-items:center;gap:6px}
.k-famrec-for b{display:inline-flex;align-items:center;gap:4px}
.k-famrec-for .k-act-img{width:24px;height:24px}
.k-famrec-for small{color:#6b7390}
/* focus inside the box: the scrolling settings panel would cut an outside outline off */
.k-parent input:focus-visible,.k-parent select:focus-visible,.k-setcard input:focus-visible,.k-invsheet input:focus-visible,.k-invsheet select:focus-visible{outline:none;border-color:#5ad1a1;box-shadow:inset 0 0 0 2px #5ad1a1}
/* family-word suggestions: a dropdown over the boxes below, not pushing them down */
.k-calls .k-field{position:relative}
.k-calls .k-callsug{position:absolute;z-index:5;top:100%;left:0;min-width:100%;margin-top:4px;flex-direction:column;flex-wrap:nowrap;gap:0;padding:4px;border-radius:14px;background:#fff;border:2px solid #d9e1ea;box-shadow:0 10px 24px rgba(43,47,69,.18)}
.k-calls .k-callsug button{border:0;border-radius:10px;background:none;text-align:left;padding:8px 12px;font:800 16px var(--f-ui)}
.k-calls .k-callsug button:hover,.k-calls .k-callsug button:first-child{background:#fff6e0}

/* studio top bar, tidied: Về on the left, the everyday buttons together in one white bar, Xong on the right, the goal
   on its own line above; labels sit clear under their buttons */
.k-st-acts{display:flex;align-items:flex-start;gap:6px;padding:7px 10px 6px;border-radius:26px;background:#fff;box-shadow:0 4px 0 #b9d7ec}
.k-st-acts .k-stb span{border:0;box-shadow:0 3px 0 color-mix(in srgb,var(--b) 65%,#000)}
.k-st-acts .k-stb small{background:none;padding:0 2px}
.k-stb small{margin-top:5px}
.k-st-acts .k-stb small{margin-top:3px}
.k-stb.b-done span{animation:none;box-shadow:0 5px 0 #2b8a3e,0 0 0 0 #40c05788;animation:k-done-ring 1.8s ease-out infinite}
@keyframes k-done-ring{0%{box-shadow:0 5px 0 #2b8a3e,0 0 0 0 #40c05799}80%,100%{box-shadow:0 5px 0 #2b8a3e,0 0 0 14px #40c05700}}
/* the coloring screen has its own 🎙 in the top bar (beside ⓘ and 🔒); the floating pill only shows while picking */
#dev-pill.in-studio:not(.on){display:none}
.k-devmic{font-size:20px;font-style:normal}
@media (max-aspect-ratio:1/1){
  .k-st-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:8px;min-width:0}
  .k-st-top .k-lessonbar{grid-row:1;grid-column:1/-1;justify-self:center}
  .k-st-top .k-corner{grid-row:1;grid-column:3;justify-self:end;align-self:start;display:flex;gap:6px;align-items:center}
  .k-st-acts{justify-self:center;justify-content:space-around;width:min(100%,420px);min-width:0;box-sizing:border-box;padding:6px 4px 5px;gap:2px}
  .k-st-acts .k-stb{flex:1 1 0;min-width:0}
}
@media (prefers-reduced-motion:reduce){ .k-stb.b-done span{animation:none} }
@media (max-width:480px){
  .k-st-acts .k-stb span{width:38px;height:38px}
  .k-st-acts .k-stb svg{width:20px;height:20px}
  .k-st-acts .k-stb small i{display:none}
}

/* Toán (math): Bông's question, the pictures to count, and big number buttons */
.k-math{display:flex;flex-direction:column;align-items:center;gap:16px}
.k-m-ask{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border:0;border-radius:24px;background:#fff;color:#2b2f45;box-shadow:0 5px 0 #c9dcea;cursor:pointer;font:900 26px var(--f-ui)}
.k-m-ask .k-m-eq{font-size:34px;letter-spacing:.04em}
.k-m-ask i{font-style:normal;font-size:22px;opacity:.7}
.k-m-pics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:420px}
.k-m-pic{position:relative;width:62px;height:62px;display:grid;place-items:center;border:0;border-radius:18px;background:#fff;box-shadow:0 4px 0 #c9dcea;font-size:38px;padding:0;cursor:default}
button.k-m-pic{cursor:pointer}
.k-m-pic img{width:48px;height:48px;object-fit:contain}
.k-m-pic.counted{box-shadow:0 0 0 4px #ffd43b,0 4px 0 #c9dcea}
.k-m-pic i{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;border-radius:12px;background:#ffd43b;color:#2b2f45;font:900 14px/24px var(--f-ui);font-style:normal;text-align:center}
.k-m-pic.gone{opacity:.4}
.k-m-pic.gone::after{content:'';position:absolute;inset:8px;background:linear-gradient(45deg,transparent 46%,#ff6b6b 46% 54%,transparent 54%)}
.k-m-sum{display:flex;flex-direction:column;align-items:center;gap:6px}
.k-m-sum>b{font:900 40px var(--f-ui);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.k-m-sides{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.k-m-side{min-width:150px;max-width:220px;min-height:150px;display:grid;place-items:center;padding:14px;border:4px solid #fff;border-radius:26px;background:#ffffff26;cursor:pointer}
.k-m-side .k-m-pic{width:50px;height:50px;font-size:30px}
.k-m-side .k-m-pic img{width:38px;height:38px}
.k-m-line{display:flex;gap:10px}
.k-m-line b{width:76px;height:76px;display:grid;place-items:center;border-radius:20px;background:#fff;color:#2b2f45;font:900 40px var(--f-ui);box-shadow:0 5px 0 #c9dcea}
.k-m-line b.q{background:#ffd43b;box-shadow:0 5px 0 #d9a400}
.k-m-opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.k-m-opt{width:96px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:28px;background:#fff;color:#2b2f45;box-shadow:0 6px 0 #4dabf7;cursor:pointer}
.k-m-opt b{font:900 48px/1 var(--f-ui)}
.k-m-opt small{font:800 15px var(--f-ui);color:#6b7390}
.k-m-opt:active{transform:translateY(4px);box-shadow:0 2px 0 #4dabf7}
.k-m-opt.wrong,.k-m-side.wrong{animation:k-m-no .4s;background:#ffe3e3}
@keyframes k-m-no{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){ .k-m-opt.wrong,.k-m-side.wrong{animation:none} }

/* Giơ tay!: Cô Bông at the board, the classmates' desks, the big ✋, and the "whole class can hear" volume bar */
.k-class{display:flex;flex-direction:column;align-items:center;gap:14px}
.k-cls-front{display:flex;align-items:flex-end;gap:12px}
.k-cls-board{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:170px;padding:14px 18px;border-radius:14px;background:#2f6b4f;border:8px solid #b07a46;box-shadow:0 6px 0 rgba(0,0,0,.18);color:#fff}
.k-cls-board .k-pic{font-size:64px;line-height:1}
.k-cls-board .k-pic img{width:84px;height:84px}
.k-cls-board b{font:900 24px var(--f-ui);font-family:var(--f-ui)}
.k-cls-desks{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.k-cls-desk{position:relative;width:74px;height:74px;display:grid;place-items:center;border-radius:20px;background:#fff;box-shadow:0 5px 0 #d8b98f;font-size:40px}
.k-cls-desk .k-pic img{width:52px;height:52px}
.k-cls-desk.me{background:#fff3bf;box-shadow:0 5px 0 #f59f00}
.k-cls-desk.me b{font:900 20px var(--f-ui);color:#2b2f45}
.k-cls-desk i{position:absolute;top:-26px;left:50%;font-style:normal;font-size:30px;opacity:0;transform:translate(-50%,16px) scale(.6);transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.k-cls-desk.up i{opacity:1;transform:translate(-50%,0) scale(1) rotate(-8deg)}
.k-cls-hand{display:flex;flex-direction:column;align-items:center;width:150px;height:150px;justify-content:center;border:6px solid #fff;border-radius:50%;background:linear-gradient(#ffd43b,#f59f00);box-shadow:0 8px 0 #c77700;font-size:68px;cursor:pointer;animation:k-pulse 1.6s ease-in-out infinite}
.k-cls-hand small{font:900 18px var(--f-ui);color:#2b2f45}
.k-cls-hand:active{transform:translateY(5px);box-shadow:0 3px 0 #c77700}
.k-cls-bar{--lv:0;--goal:.5;position:relative;width:min(320px,90%);height:34px;border-radius:17px;background:#ffffff33;border:3px solid #fff;overflow:hidden}
.k-cls-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--lv) * 100%);background:linear-gradient(90deg,#69db7c,#ffd43b,#ff922b);transition:width .08s}
.k-cls-bar::after{content:'';position:absolute;top:0;bottom:0;left:calc(var(--goal) * 100%);width:4px;background:#fff}
.k-cls-bar span{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:800 12px var(--f-ui);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){ .k-cls-hand{animation:none} }

/* Úp ly: the cups slide between places (--slot) and lift to show what's under them */
.k-cups{display:flex;flex-direction:column;align-items:center;gap:20px}
.k-cup-row{position:relative;width:min(100%,calc(var(--n) * 120px));height:190px}
.k-cup{position:absolute;bottom:0;left:calc(var(--slot) * 100% / var(--n));width:calc(100% / var(--n));height:190px;border:0;background:none;padding:0;cursor:pointer;transition:left .5s cubic-bezier(.5,0,.3,1)}
.k-cup-thing{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:52px;line-height:1}
.k-cup-thing img{width:66px;height:66px}
.k-cup-cup{position:absolute;left:50%;bottom:0;width:96px;height:112px;transform:translateX(-50%);border-radius:14px 14px 30px 30px / 14px 14px 18px 18px;
  background:linear-gradient(90deg,#e8590c,#ff922b 40%,#ffa94d 55%,#e8590c);box-shadow:inset 0 -10px 0 rgba(0,0,0,.12),0 6px 0 rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.k-cup-cup::before{content:'';position:absolute;left:-6px;right:-6px;bottom:-4px;height:16px;border-radius:10px;background:#d9480f}
.k-cup.up .k-cup-cup{transform:translate(-50%,-92px) rotate(-6deg)}
.k-cup.wrong .k-cup-cup{animation:k-m-no .4s}
/* Nhớ thứ tự: the order slots, the picture being shown, and the cards to tap */
.k-order{display:flex;flex-direction:column;align-items:center;gap:18px}
.k-ord-slots{display:flex;gap:10px}
.k-ord-slots>span{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;border:3px dashed #ffffff88;color:#fff;font:900 24px var(--f-ui)}
.k-ord-slots>span.got{border:0;background:#fff;box-shadow:0 4px 0 #69db7c}
.k-ord-slots>span.now{border-color:#ffd43b}
.k-ord-slots .k-pic{font-size:38px}.k-ord-slots .k-pic img{width:46px;height:46px}
.k-ord-big{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:210px;justify-content:center}
.k-ord-big .k-pic{display:grid;place-items:center;width:170px;height:170px;border-radius:32px;background:#fff;box-shadow:0 6px 0 #c9dcea;font-size:110px;animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.k-ord-big .k-pic img{width:130px;height:130px}
.k-ord-big b{font:900 26px var(--f-ui);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.k-ord-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:440px}
.k-ord-opts .k-card.wrong{animation:k-m-no .4s}
@media (prefers-reduced-motion:reduce){ .k-cup{transition:none} .k-cup-cup{transition:none} }

/* Family voices: pick a unit, a game and "only what's missing" */
.k-fambrowse{display:flex;flex-direction:column;gap:10px}
.k-famunits{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.k-famunits button{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;padding:6px 4px;border:2px solid #d9e1ea;border-radius:12px;background:#fff;color:#2b2f45;cursor:pointer}
.k-famunits button span{font-size:22px;line-height:1}
.k-famunits button small{font:800 11px var(--f-ui);color:#6b7390}
.k-famunits button.on{border-color:#2fb37f;background:#e6f8f0}
.k-famunit-name{margin:0;font:600 14px var(--f-ui);color:#4a5170}
.k-famgames{display:flex;flex-wrap:wrap;gap:6px}
.k-famgames button{display:flex;align-items:center;gap:5px;padding:6px 10px;border:2px solid #d9e1ea;border-radius:99px;background:#fff;color:#2b2f45;font:800 13px var(--f-ui);cursor:pointer}
.k-famgames button .k-act-img{width:20px;height:20px}
.k-famgames button.on{border-color:#2fb37f;background:#2fb37f;color:#fff}
.k-famfilter{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 13px var(--f-ui);color:#4a5170}
.k-famfilter label{display:flex;align-items:center;gap:6px;cursor:pointer}
.k-famfilter b{font:900 14px var(--f-ui);color:#2fb37f;white-space:nowrap}

/* Listen book: the English meaning under a new word, the microphone listening on a card, ✓ once the child said it */
.k-word-en{display:block;font:700 13px var(--f-ui);color:#6b7390;margin-top:-2px}
.kids-noen .k-word-en{display:none}
.k-card{position:relative}
.k-card-mic,.k-card-ok,.k-card-quiet{position:absolute;top:-10px;right:-10px;font-style:normal}
.k-card-mic{--lv:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#2fae4d;color:#fff;font-size:24px;box-shadow:0 0 0 calc(4px + var(--lv) * 18px) rgba(47,174,77,.3);transition:box-shadow .08s}
.k-card.listen{box-shadow:0 0 0 5px #69db7c,0 7px 0 color-mix(in srgb,var(--k) 60%,#fff)}
.k-card-ok{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#ffd43b;color:#2b2f45;font:900 22px var(--f-ui);box-shadow:0 3px 0 #d9a400}
.k-card-quiet{top:auto;bottom:-12px;right:50%;transform:translateX(50%);white-space:nowrap;padding:3px 9px;border-radius:99px;background:#fff3bf;color:#2b2f45;font:800 12px var(--f-ui);box-shadow:0 2px 0 #f59f00}
/* Toán: the direction line, and the microphone on the answer while the child says it */
.k-m-tip{margin:0;text-align:center;font:900 20px var(--f-ui);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.k-m-tip small{display:block;font:700 14px var(--f-ui);opacity:.85}
.kids-noen .k-m-tip small{display:none}
.k-m-opt{position:relative}
.k-m-opt.saying{box-shadow:0 0 0 5px #69db7c,0 6px 0 #4dabf7}
.k-m-opt i{--lv:0;position:absolute;top:-12px;right:-12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2fae4d;font-style:normal;font-size:22px;box-shadow:0 0 0 calc(3px + var(--lv) * 16px) rgba(47,174,77,.3);transition:box-shadow .08s}

/* ---------- No scrolling in Kids mode: every screen fills the window exactly ----------
   The kids frame is the window's height; its header keeps its size and the screen's section takes the rest, so
   content shrinks to fit instead of running off the bottom. Long lists page instead (see .k-pager). */
.kids{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.kids>.k-top{flex:none;position:relative}
.kids>section{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}   /* a screen that fits never scrolls; a longer one (setup, grown-up pages) scrolls instead of being cut off */
.kids>section.k-setup{min-height:0;justify-content:flex-start;align-items:center}   /* the setup card starts at the top, so a tall card scrolls instead of its top going above the screen */
html:has(.kids),body:has(.kids){overflow:hidden;overscroll-behavior:none}
/* home: Bông, the lesson button, the four doors (they share what's left), the garden in the flow at the bottom */
.k-home2{gap:clamp(8px,2vh,18px);padding:4px 16px max(8px,env(safe-area-inset-bottom,0px))}
.k-home2 .k-hello{flex:none}
.k-home2 .k-hello .bong{width:auto;height:clamp(64px,14vh,130px)}
.k-home2 .k-journey{flex:none}
.k-home2 .k-doors{flex:1 1 0;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));width:min(560px,100%,calc((100dvh - 330px) * 1.25))}
.k-home2 .k-door{aspect-ratio:auto;min-height:0;container-type:size;padding:6px}
.k-home2 .k-door-e{font-size:min(76px,38cqh,30cqw)}
.k-home2 .k-door b{font-size:clamp(15px,11cqh,24px)}
.k-home2 .k-door small{font-size:clamp(10px,7cqh,13px)}
.k-home2 .k-home-garden{position:static;flex:none;width:min(560px,100%)}
.k-home2 .k-home-garden .k-garden{width:100%}

/* pages instead of scrolling: the grid fills the space left, the items share it, ◀ dots ▶ underneath */
.k-page{min-height:0;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.k-pager{flex:1 1 0;min-height:0;width:min(1000px,100%);display:flex;flex-direction:column;gap:8px;touch-action:pan-y}
.k-pager-page{--cols:3;--rows:2;flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:var(--gap);align-content:start}
.k-pager-page>*{min-width:0;min-height:0;width:auto;height:auto;max-height:100%;margin:0;container-type:size}
.k-pager-nav{flex:none;display:flex;align-items:center;justify-content:center;gap:14px}
.k-pager-nav.one{visibility:hidden}
.k-pager-nav button{width:58px;height:58px;border-radius:50%;border:4px solid #fff;background:#ffd43b;color:#2b2f45;font-size:22px;box-shadow:0 5px 0 #d9a400;cursor:pointer}
.k-pager-nav button:disabled{opacity:.3;box-shadow:none;cursor:default}
.k-pager-nav button:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 #d9a400}
.k-pager-nav span{display:flex;gap:7px}
.k-pager-nav i{width:11px;height:11px;border-radius:50%;background:#ffffff66}
.k-pager-nav i.on{background:#fff;transform:scale(1.3)}
/* cards inside a pager scale with their cell */
.k-pager .k-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px}
.k-pager .k-card .k-pic{font-size:min(64px,45cqh);line-height:1}
.k-pager .k-card .k-pic img,.k-pager .k-card .k-ic{width:min(110px,55cqh,70cqw);height:min(110px,55cqh,70cqw)}
.k-pager .k-card .k-word{font-size:clamp(14px,11cqh,22px)}
.k-pager .k-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.k-pager .k-act .k-act-e{font-size:min(52px,40cqh)}
.k-pager .k-act .k-act-img{width:min(64px,42cqh);height:min(64px,42cqh)}
.k-games .k-manner{flex:none}
/* paged songs: one song card per page, the lyrics sized to fit it */
.k-songs .k-pager .k-song{display:flex;flex-direction:column;overflow:hidden;margin:0}
.k-songs .k-pager .k-song pre{flex:1 1 0;min-height:0;overflow:hidden;font-size:clamp(12px,3.6cqh,18px);line-height:1.35}
.k-songs .k-pager .k-song .k-intro-grown,.k-songs .k-pager .k-song>p:not(.k-pc-kid){display:none}
/* the wardrobe's things and the taste game's other foods page too */
.k-wd-items,.k-taste-more{min-height:0}
.k-taste-more{flex:1 1 0;display:flex;flex-direction:column;width:100%}
.k-taste-more .k-pager-nav button{width:44px;height:44px;font-size:16px}
.k-taste-more .k-pager-page>button{display:grid;place-items:center;font-size:min(34px,60cqh)}
.k-taste-more .k-pager-page>button img{width:min(40px,70cqh);height:min(40px,70cqh)}
.k-wardrobe .k-pager .k-wd-item .k-pic img{width:min(52px,50cqh);height:min(52px,50cqh)}
.k-hub .k-pager .k-hubcard{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.k-hub .k-pager .k-hubart{max-height:60cqh;display:block;overflow:hidden}
.k-hub .k-pager .k-hubart svg,.k-hub .k-pager .k-hubart img{max-height:60cqh;width:auto}
/* game card areas take the height that's left, and their cards and pictures shrink to fit (small phones too) */
.kids .k-choices,.kids .k-g-grid,.kids .k-tone-grid{flex:1 1 0;min-height:0;grid-auto-rows:minmax(0,1fr);align-content:center}
.kids .k-choices{display:grid;grid-template-columns:repeat(2,minmax(0,260px));justify-content:center;width:100%;max-height:560px}
.kids .k-choices>:last-child:nth-child(odd){grid-column:1/-1}
.kids .k-choices>.k-card.big{width:auto;height:100%;max-width:100%;max-height:260px;aspect-ratio:1;justify-self:center;min-height:0;container-type:size;padding:4px}
.kids .k-choices>.k-card.big .k-pic{font-size:min(150px,58cqh)}
.kids .k-choices>.k-card.big .k-word{font-size:clamp(13px,11cqh,22px)}
.kids .k-g-grid>*{min-height:0;container-type:size}
.kids .k-g-grid>.k-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}
.kids .k-g-grid .k-card .k-pic{font-size:min(80px,52cqh)}
.kids .k-g-grid .k-card b,.kids .k-g-grid .k-card .k-word{font-size:clamp(12px,13cqh,20px)}
.kids .k-tone-grid>*{min-height:0}
/* short screens (small phones): the tracing box and the taste game's scene give up some height */
.kids .k-tracebox{width:min(86vw,420px,calc(100dvh - 330px));min-width:0}
@media (max-height:740px){
  .k-taste-scene{min-height:0}
  .k-taste-scene .bong,.k-taste-bong .bong{height:96px;width:auto}
  .k-taste-plate{width:104px;height:104px;font-size:52px}
  .k-taste-do{margin:4px auto;padding:8px 12px}
  .k-taste-more{margin-top:4px}
}
@media (max-height:740px){
  .kids .k-tracebox{width:min(86vw,calc(100dvh - 400px))}
  .k-tellpage .k-readtip{display:none}
  .k-taste-plate{width:84px;height:84px;font-size:42px}
  .k-taste-scene .bong,.k-taste-bong .bong{height:80px}
  .k-taste-do{padding:6px 10px;border-width:4px}
}
@media (max-height:740px){
  .k-taste-scene .k-taste-plate{width:84px;height:84px}
  .k-taste-scene .k-taste-plate .k-ic{width:56px;height:56px}
}

/* the one end card every game shows: Bông cheering, stars, the praise, ▶ again (and 🏠) */
.k-done{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,2vh,14px);text-align:center;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.k-done .bong{height:clamp(100px,22vh,170px);width:auto}
.k-done .k-stars{font-size:clamp(34px,6vh,48px);letter-spacing:4px}
.k-done .k-big{font:900 clamp(28px,5vh,40px) var(--f-ui);color:#ffa94d;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.k-win{justify-content:center}
/* one layout for every game: the goal chip in the top bar takes the place of each game's own title bar */
.kids:has(.k-top .k-goal) .k-page>.k-path-head{display:none}
/* fewer words: the grown-ups' notes inside games go (ⓘ explains each game); Vietnamese and word meanings stay */
.kids>section .k-readtip small:not(.k-keep),.kids>section .k-readtip.k-grown{display:none}
.k-m-tip{padding:6px 14px;border-radius:16px;background:#ffffffe6;color:#2b2f45;text-shadow:none;box-shadow:0 3px 0 #c9dcea;font-size:18px}
.k-m-tip small{color:#6b7390;opacity:1}

/* Chữ và số: tabs for letters, tone marks and numbers; big tiles to tap, hear and say */
.k-abc{display:flex;flex-direction:column;align-items:center;gap:10px}
.k-abc-tabs{flex:none;display:flex;gap:8px}
.k-abc-tabs button{display:flex;align-items:center;gap:6px;padding:8px 16px;border:3px solid #fff;border-radius:99px;background:#ffffffcc;color:#2b2f45;font:900 16px var(--f-ui);cursor:pointer;box-shadow:0 3px 0 #c9dcea}
.k-abc-tabs button.on{background:#20c997;color:#fff}
.k-abc-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:4px solid #20c997;border-radius:22px;background:#fff;color:#2b2f45;cursor:pointer;box-shadow:0 5px 0 #12b886;padding:4px}
.k-abc-tile b{font:900 min(54px,48cqh) var(--f-ui);line-height:1;letter-spacing:.02em}
.k-abc-tile small{font:800 clamp(11px,11cqh,16px) var(--f-ui);color:#6b7390;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.k-abc-tile.said{border-color:#ffd43b;box-shadow:0 5px 0 #f59f00}
.k-abc-tile.listen{box-shadow:0 0 0 5px #69db7c,0 5px 0 #12b886}

/* games in two levels: category doors (with a peek at their games), then a category's tabs and games */
.k-gcat{position:relative}
.k-gcat-peek{display:flex;gap:4px;justify-content:center;margin-top:4px;font-style:normal}
.k-gcat-peek span{width:min(26px,14cqh);height:min(26px,14cqh);display:grid;place-items:center;border-radius:8px;background:#ffffff40;font-size:min(16px,9cqh)}
.k-gcat-peek .k-act-img{width:80%;height:80%}
.k-gcat-head{flex:none;display:flex;align-items:baseline;gap:8px;padding:6px 16px;border-radius:99px;background:var(--k);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--k) 65%,#000)}
.k-gcat-head span{font-size:22px}
.k-gcat-head b{font:900 20px var(--f-ui)}
.k-gcat-head small{font:800 13px var(--f-ui);opacity:.9}
.k-games .k-abc-tabs button.on{background:var(--k,#20c997)}

/* Bông's offer: three big games and a 🎲 surprise */
.k-offer{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,16px)}
.k-offer .k-hello{flex:none}
.k-offer-picks{flex:1 1 0;min-height:0;width:min(760px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-aspect-ratio:1/1){ .k-offer-picks{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));width:min(420px,100%)} }
.k-offer-pick{min-height:0;container-type:size;flex-direction:column;gap:2px;justify-content:center}
.k-offer-pick .k-act-e{font-size:min(70px,52cqh)}
.k-offer-pick .k-act-img{width:min(84px,56cqh);height:min(84px,56cqh)}
.k-offer-pick b{font-size:clamp(18px,13cqh,26px)}
.k-offer-dice{flex:none;display:flex;align-items:center;gap:8px;padding:10px 26px;border:4px solid #fff;border-radius:99px;background:linear-gradient(#b197fc,#845ef7);color:#fff;font:900 20px var(--f-ui);box-shadow:0 6px 0 #5f3dc4;cursor:pointer}
.k-offer-dice span{font-size:30px;display:inline-block}
.k-offer-dice small{font:800 13px var(--f-ui);opacity:.9}
.k-offer-dice.rolling span{animation:k-dice .3s linear infinite}
@keyframes k-dice{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .k-offer-dice.rolling span{animation:none} }

/* the trip strip: this city's landmarks along a path, Bông standing at --at (hopping from --from on an end card) */
.k-trip{flex:none;display:flex;flex-direction:column;gap:2px;width:min(560px,100%);padding:6px 12px 8px;border:0;border-radius:22px;background:#ffffffe6;color:#2b2f45;box-shadow:0 4px 0 #c9dcea;font-family:var(--f-ui)}
button.k-trip{cursor:pointer}
.k-trip-name{font:700 12px var(--f-ui);color:#6b7390;text-align:left}
.k-trip-name b{font:900 14px var(--f-ui);color:#2b2f45}
.k-trip-path{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:center;height:44px}
.k-trip-path::before{content:'';position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:50%;border-top:4px dotted #c9dcea}
.k-trip-slot{position:relative;justify-self:center;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:17px;box-shadow:0 2px 0 #c9dcea;color:#c9dcea}
.k-trip-slot.seen{background:#fff3bf;box-shadow:0 2px 0 #f59f00}
.k-trip-slot.next{background:#ffd43b;color:#2b2f45;font-size:15px;animation:k-pulse 1.6s ease-in-out infinite}
.k-trip-slot.start,.k-trip-slot.city{background:#e6f8f0;box-shadow:0 2px 0 #2fb37f}
.k-trip-bong{position:absolute;bottom:14px;left:calc((var(--at) + .5) * 100% / var(--n));transform:translateX(-50%);pointer-events:none;z-index:1}
.k-trip-bong .bong{height:40px;width:auto}
.k-trip.hop .k-trip-bong{animation:k-trip-hop 1.1s .3s cubic-bezier(.5,0,.3,1) backwards}
@keyframes k-trip-hop{0%{left:calc((var(--from) + .5) * 100% / var(--n))}50%{bottom:34px}100%{left:calc((var(--at) + .5) * 100% / var(--n));bottom:14px}}
.k-pathwin .k-trip{width:min(420px,100%)}
@media (prefers-reduced-motion:reduce){ .k-trip.hop .k-trip-bong,.k-trip-slot.next{animation:none} }
/* home with three doors: 🎮 wide on top, songs and room below */
.k-home2 .k-doors.three .k-door:first-child{grid-column:1/-1}
/* roomier strip: future landmarks are small dots; Bông stands above the path, the city name sits apart */
.k-trip{padding-top:4px}
.k-trip-name{text-align:right}
.k-trip-path{height:50px;margin-top:6px}
.k-trip-slot{width:12px;height:12px;font-size:0;box-shadow:none;background:#dbe4ee}
.k-trip-slot.seen,.k-trip-slot.next,.k-trip-slot.start,.k-trip-slot.city{width:min(32px,100%);height:auto;aspect-ratio:1;font-size:min(17px,60%)}
.k-trip-slot.seen,.k-trip-slot.next,.k-trip-slot.start,.k-trip-slot.city{font-size:16px}
.k-trip-bong{bottom:22px}
.k-trip-bong .bong{height:36px}
@keyframes k-trip-hop{0%{left:calc((var(--from) + .5) * 100% / var(--n))}50%{bottom:42px}100%{left:calc((var(--at) + .5) * 100% / var(--n));bottom:22px}}
.k-trip-slot{align-self:center}
.k-trip-slot.seen,.k-trip-slot.next,.k-trip-slot.start,.k-trip-slot.city{width:28px;height:28px;aspect-ratio:auto}

/* Khám phá: tabs, topics, and a project as a picture book (one step per page, a photo at the end) */
.k-discover,.k-project{display:flex;flex-direction:column;align-items:center;gap:10px}
.k-proj-page{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border:0;border-radius:30px;background:#fff;color:#2b2f45;box-shadow:0 7px 0 #f3c4d4;text-align:center;font-family:var(--f-ui);overflow:hidden}
button.k-proj-page{cursor:pointer}
.k-proj-pic{font-size:min(120px,34cqh);line-height:1}
.k-proj-page b{font:900 clamp(20px,6cqh,32px)/1.25 var(--f-ui)}
.k-proj-page small{font:700 clamp(13px,3.6cqh,18px) var(--f-ui);color:#6b7390}
.k-proj-n{position:absolute;top:12px;left:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#ff7aa2;color:#fff;font:900 18px var(--f-ui);font-style:normal}
.k-proj-grown{font:800 13px var(--f-ui);font-style:normal;color:#e8590c;background:#fff4e6;padding:4px 10px;border-radius:99px}
.k-proj-words{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.k-proj-words button{display:flex;flex-direction:column;align-items:center;padding:6px 12px;border:3px solid #ffd6e2;border-radius:16px;background:#fff8fa;cursor:pointer}
.k-proj-words b{font:900 16px var(--f-ui)}
.k-proj-words small{font:700 11px var(--f-ui)}
.k-proj-cam{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:99px;background:#ff7aa2;color:#fff;font:900 18px var(--f-ui);box-shadow:0 5px 0 #d6336c;cursor:pointer}
.k-proj-photos{display:flex;gap:6px;justify-content:center}
.k-proj-photos img{width:min(80px,18cqh);height:min(80px,18cqh);object-fit:cover;border-radius:12px;border:3px solid #fff;box-shadow:0 2px 6px #0002}
.kids-noen .k-proj-page small,.kids-noen .k-proj-words small{display:none}

/* Nhiệm vụ: the mission bubble on home, its card, and the dinner question */
.k-mission-btn{cursor:pointer;background:#ffd43b;color:#2b2f45;animation:k-pulse 1.8s ease-in-out infinite}
.k-mission-kicker{font:800 13px var(--f-ui);color:#e8590c}
.k-mission-pic{font-size:56px;line-height:1}
.k-mission-pic .k-ic{width:72px;height:72px}
.k-mission .k-intro-goal b{font-size:26px}
.k-dinner{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:6px;padding:10px;border-radius:18px;background:#f5f8fb;text-align:left}
.k-dinner>small{font:800 12px var(--f-ui);color:#6b7390}
.k-dinner button{display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px;border:2px solid #e3eaf2;border-radius:14px;background:#fff;color:#2b2f45;cursor:pointer;text-align:left}
.k-dinner button b{font:900 16px var(--f-ui)}
.k-dinner button small{font:700 12px var(--f-ui);color:#6b7390}
@media (prefers-reduced-motion:reduce){ .k-mission-btn{animation:none} }

/* scenes to act out: who speaks and their line, Bông's coaching, and the choices to tap and then say */
.k-scene{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,14px)}
.k-sc-stage{flex:none;display:flex;align-items:center;gap:10px;width:min(560px,100%)}
.k-sc-who{flex:none;width:96px;height:96px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 5px 0 #c9dcea;font-size:56px}
.k-sc-who .k-ic{width:78px;height:78px}
.k-sc-who.big{width:130px;height:130px}.k-sc-who.big .k-ic{width:110px;height:110px}
.k-sc-emoji{font-size:60px;line-height:1}
.k-sc-line{flex:1;text-align:left}
.k-sc-coach{flex:none;display:flex;align-items:center;gap:8px;width:min(560px,100%);padding:6px 12px;border-radius:18px;background:#fff3bf;box-shadow:0 3px 0 #f59f00}
.k-sc-coach b{display:block;font:900 15px var(--f-ui);color:#2b2f45}
.k-sc-coach small{font:700 12px var(--f-ui);color:#6b7390}
.k-sc-choices{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px;width:min(560px,100%)}
.k-sc-choices.row{flex-direction:row;align-items:center;justify-content:center}
.k-sc-choice{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border:4px solid #fff;border-radius:22px;background:#ffffffee;color:#2b2f45;box-shadow:0 5px 0 #c9dcea;cursor:pointer;text-align:left}
.k-sc-choice b{display:block;font:900 clamp(17px,2.6vh,22px) var(--f-ui)}
.k-sc-choice small{font:700 13px var(--f-ui);color:#6b7390}
.k-sc-pic{font-size:34px;flex:none}
.k-sc-choice.picked{border-color:#69db7c;box-shadow:0 0 0 4px #69db7c66,0 5px 0 #c9dcea}
.k-sc-choice:disabled{opacity:.35}
.k-sc-choice.term{flex:1 1 0;max-width:150px;justify-content:center;padding:18px 8px}
.k-sc-choice.term b{font-size:clamp(26px,4vh,36px)}
.k-sc-choice.wrong{animation:k-m-no .4s;background:#ffe3e3}
.k-sc-choice i{position:absolute;top:-12px;right:-10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#2fae4d;font-style:normal;font-size:20px}
.k-sc-say{flex:none;margin:0;padding:6px 14px;border-radius:16px;background:#ffffffe6;color:#2b2f45;font:900 17px var(--f-ui);text-align:center}
.k-sc-say small{display:block;font:700 12px var(--f-ui);color:#6b7390}
.kids-noen .k-sc-choice small,.kids-noen .k-sc-coach small,.kids-noen .k-sc-say small{display:none}
/* Lật hình for two: whose turn and the score, and the 1 / 2 player switch */
.k-mem-top{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.k-mem-turn{display:flex;gap:6px}
.k-mem-turn span{padding:6px 12px;border-radius:99px;background:#ffffff99;font:800 15px var(--f-ui);color:#2b2f45}
.k-mem-turn span.on{background:#ffd43b;box-shadow:0 0 0 3px #fff}
.k-mem-turn b{font-weight:900}

/* 🚗 car mode: one word at a time, huge, on a dark screen, with one big pause / play button */
.k-car-btn{flex:none;display:flex;align-items:center;gap:8px;padding:10px 22px;border:4px solid #fff;border-radius:99px;background:#343a40;color:#fff;font:900 18px var(--f-ui);box-shadow:0 5px 0 #000;cursor:pointer}
.k-car-btn small{font:700 12px var(--f-ui);opacity:.8}
.kids:has(.k-car){background:#14161f}
.k-car{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff}
.k-car-now{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.k-car-pic{font-size:110px;line-height:1}.k-car-pic .k-ic{width:150px;height:150px}
.k-car-now b{font:900 clamp(34px,7vh,56px) var(--f-ui)}
.k-car-now small{font:700 18px var(--f-ui);opacity:.75}
.k-car-play{width:120px;height:120px;border-radius:50%;border:6px solid #fff;background:#2fb37f;color:#fff;font-size:48px;cursor:pointer;box-shadow:0 6px 0 #1d7a33}
.k-car-count{opacity:.6;font:700 14px var(--f-ui)}
.k-car-none{text-align:center;font:800 18px var(--f-ui)}
.kids-noen .k-car-now small{display:none}
.kids:has(.k-car) .k-top{background:none}

/* Oẳn tù tì */
.k-ott{display:flex;flex-direction:column;align-items:center;gap:12px}
.k-ott-face{display:flex;align-items:center;gap:16px}
.k-ott-hand{font-size:84px;line-height:1}
.k-ott-hand.shake{animation:k-ott 0.45s ease-in-out 3}
@keyframes k-ott{50%{transform:translateY(-18px)}}
.k-ott-picks{display:flex;gap:12px}
.k-ott-pick{display:flex;flex-direction:column;align-items:center;gap:2px;width:100px;padding:12px 6px;border:4px solid #fff;border-radius:24px;background:#ffffffee;color:#2b2f45;box-shadow:0 5px 0 #c9dcea;cursor:pointer}
.k-ott-pick span{font-size:48px;line-height:1}
.k-ott-pick b{font:900 20px var(--f-ui)}
.k-ott-pick small{font:700 12px var(--f-ui);color:#6b7390}
.k-ott-pick.on{border-color:#ffd43b;box-shadow:0 0 0 4px #ffd43b88,0 5px 0 #c9dcea}
.k-ott-pick:disabled:not(.on){opacity:.4}
@media (prefers-reduced-motion:reduce){ .k-ott-hand.shake{animation:none} }

/* bedtime stories: a night screen, one big picture and the sentence, words bouncing as they're read */
.kids:has(.k-story),.kids:has(.k-stories){background:radial-gradient(circle at 80% 12%,#fff6c8 0 3.5%,transparent 4%),linear-gradient(#1b1f3b,#2c2f5e 70%,#3b3470)}
.kids:has(.k-story) .k-top,.kids:has(.k-stories) .k-top{background:none}
.k-stories,.k-story{display:flex;flex-direction:column;align-items:center;gap:12px}
.k-story-btn{background:#5c7cfa;box-shadow:0 5px 0 #364fc7}
.k-story-page{flex:1 1 0;min-height:0;width:min(640px,100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;border-radius:32px;background:#fffdf5;color:#2b2f45;box-shadow:0 8px 0 #c5b88f;text-align:center;cursor:pointer}
.k-story-pic{font-size:min(140px,22vh);line-height:1}
.k-story-page b{font:900 clamp(24px,4.4vh,38px)/1.35 var(--f-ui)}
.k-story-page small{font:700 clamp(14px,2.2vh,18px) var(--f-ui);color:#6b7390}
.k-story-nav{flex:none;display:flex;align-items:center;gap:12px;color:#fff;font:800 15px var(--f-ui)}
.k-story-nav button{min-width:56px;height:56px;border-radius:28px;border:4px solid #fff;background:#ffd43b;color:#2b2f45;font:900 18px var(--f-ui);padding:0 14px;cursor:pointer;box-shadow:0 4px 0 #d9a400}
.k-story-nav button:disabled{opacity:.3}
.k-story-auto.on{background:#69db7c}
.kids-noen .k-story-page small{display:none}

/* story pages as a picture book: a big picture (an illustration, or a scene from the app's art) over the text */
.k-story-page{gap:0;padding:12px;justify-content:flex-start;animation:k-turn .4s cubic-bezier(.3,1.2,.5,1)}
@keyframes k-turn{from{opacity:0;transform:translateX(40px) rotateY(-12deg)}}
.k-story-page.cover{animation:none}
.k-sart{position:relative;flex:1 1 0;min-height:0;width:100%;border-radius:22px;overflow:hidden;container-type:size;background:linear-gradient(#bfe6ff,#e8f6ff 62%,#9ad37a 62%)}
.k-sart-img{width:100%;height:100%;object-fit:cover}
.k-sart.bg-room{background:center bottom/cover var(--room),#f6d9b8}
.k-sart.bg-roomnight{background:linear-gradient(#141a3a99,#141a3a66),center bottom/cover var(--room),#5a4a6a}
.k-sart.bg-night,.k-sart.bg-lakenight{background:radial-gradient(circle at 12% 30%,#fff 0 .4%,transparent .6%),radial-gradient(circle at 34% 12%,#fff 0 .35%,transparent .55%),radial-gradient(circle at 58% 26%,#fff 0 .3%,transparent .5%),radial-gradient(circle at 88% 44%,#fff 0 .35%,transparent .55%),linear-gradient(#141a3a,#2c2f6a 70%,#3a3a7a)}
.k-sart.bg-lakenight{background:radial-gradient(circle at 34% 12%,#fff 0 .35%,transparent .55%),radial-gradient(circle at 58% 26%,#fff 0 .3%,transparent .5%),linear-gradient(#141a3a,#2c2f6a 58%,#22305e 58%,#1b2650)}
.k-sart.bg-day{background:linear-gradient(#8fd3ff,#d8f1ff 62%,#8ed36b 62%,#6cbf4f)}
.k-sart.bg-sunset{background:linear-gradient(#ff9a5a,#ffcf7a 55%,#f7a07a 62%,#7cae5a 62%)}
.k-sart.bg-garden{background:linear-gradient(#a9e0ff,#e3f6ff 58%,#9ad37a 58%,#7a5a3a 88%)}
.k-sart.bg-lake{background:linear-gradient(#a9dcff,#e3f4ff 50%,#79c2e8 50%,#4b9ccc)}
.k-sart.bg-palace{background:repeating-linear-gradient(90deg,#c0392b 0 9%,#d35400 9% 11%),linear-gradient(#f8d26a,#e9a23b);background-blend-mode:multiply}
.k-sart-bong{position:absolute;left:28%;bottom:4%;height:58%;width:auto;transform:translateX(-50%)}
.k-sart-bong .bong{height:100%;width:auto}
.k-sart-prop{position:absolute;width:calc(var(--s) * 1%);transform:translate(-50%,-50%);display:grid;place-items:center;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.k-sart-prop img{width:100%;height:auto}
.k-sart-prop b{font-size:calc(var(--s) * .8cqw);line-height:1}
.k-story-text{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 6px}
.k-story-page.cover .k-story-text b{font-size:clamp(28px,5vh,44px);color:#5c3c92}
.k-sart-prop{width:calc(var(--s) * 1.3%)}
.k-sart-bong{height:52%}

/* home before today's lesson: ▶ Bài hôm nay and the map are the big thing; the four doors wait in a small locked row.
   After the lesson the doors open full size (with a pop the first time) and the lesson button is a slim "done" bar. */
.k-home2.locked{justify-content:center}
.k-home2.locked .k-journey{flex:none;padding-block:34px}
.k-home2.locked .k-trip{transform:scale(1.04)}
.k-home2.locked .k-journey-play{transform:scale(1.35)}
.k-home2.locked .k-journey b{font-size:clamp(26px,5vh,40px)}
.k-home2.locked .k-trip{flex:none}
.k-doors-note{margin:4px 0 -4px;text-align:center;font:900 15px var(--f-ui);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.k-doors-note small{display:block;font-weight:700;font-size:12px;opacity:.9}
.kids-noen .k-doors-note small{display:none}
.k-home2 .k-doors.locked{flex:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;gap:10px;width:min(560px,100%)}
.k-home2 .k-doors.locked .k-door{aspect-ratio:1;container-type:normal;padding:6px;border-radius:20px;filter:saturate(.45);opacity:.8;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.k-home2 .k-doors.locked .k-door b{font-size:13px}
.k-home2 .k-doors.locked .k-door small{display:none}
.k-home2 .k-doors.locked .k-door-e{font-size:34px}
.k-home2 .k-doors.locked .k-door-e img{max-height:44px;width:auto}
.k-home2 .k-doors.locked .k-door-badge{top:-6px;right:-6px;width:28px;height:28px;font-size:14px}
.k-home2.open .k-journey.rest{flex:none;min-height:0;padding-block:8px}
.k-home2.open .k-journey.rest .k-journey-bar,.k-home2.open .k-journey.rest small{display:none}
.k-doors.unlock .k-door{animation:k-door-pop .6s cubic-bezier(.3,1.6,.5,1) both}
.k-doors.unlock .k-door:nth-child(2){animation-delay:.1s}.k-doors.unlock .k-door:nth-child(3){animation-delay:.2s}.k-doors.unlock .k-door:nth-child(4){animation-delay:.3s}
@keyframes k-door-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.k-doors.unlock .k-door{animation:none}}

/* Đọc cùng Bông: the passage as tappable words and phrases; the one being read lights up */
.k-room-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.k-doc-btn{background:#12b886;box-shadow:0 5px 0 #087f5b}
.k-doc{justify-content:flex-start}
.k-doc-text{width:min(720px,100%);background:#fff;border-radius:26px;padding:18px 16px;box-shadow:0 8px 0 rgba(43,47,69,.12);text-align:center;line-height:1.2}
.k-doc-w{display:inline-block;margin:5px 3px;padding:6px 12px;border:3px solid #e3f6ee;border-radius:16px;background:#f4fbf8;color:#2b2f45;font:900 clamp(22px,4.2vw,32px) var(--f-ui);cursor:pointer;transition:transform .15s,background .15s}
.k-doc-w.on{border-color:#12b886;background:#d3f9e8}
.k-doc-w.reading{background:#ffe066;border-color:#fcc419;transform:scale(1.08)}
.k-doc-br{content:"";display:block;margin:2px 0}
.k-doc-mean{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 18px;border-radius:20px;background:rgba(255,255,255,.85);color:#2b2f45}
.k-doc-mean b{font:900 26px var(--f-ui)}
.k-doc-mean small{font:700 15px var(--f-ui);color:#5c6380}
.kids-noen .k-doc-en{display:none}
.k-doc-game{background:#fd7e14!important;box-shadow:0 5px 0 #c25a00!important}
/* Xếp câu: empty slots fill as the right tile is tapped; a wrong tile shakes */
.k-xc{justify-content:flex-start}
.k-xc-hear{padding:10px 22px;border:4px solid #fff;border-radius:99px;background:#4dabf7;color:#fff;font:900 18px var(--f-ui);box-shadow:0 5px 0 #1c7ed6;cursor:pointer}
.k-xc-line{width:min(720px,100%);min-height:84px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:24px;background:#fff;box-shadow:0 8px 0 rgba(43,47,69,.12)}
.k-xc-slot{min-width:72px;height:54px;padding:0 14px;display:grid;place-items:center;border:3px dashed #cfd8e3;border-radius:16px;font:900 24px var(--f-ui);color:#2b2f45}
.k-xc-slot.full{border:3px solid #12b886;background:#d3f9e8;animation:k-door-pop .35s cubic-bezier(.3,1.6,.5,1)}
.k-xc-end{font:900 28px var(--f-ui);color:#2b2f45}
.k-xc-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:min(720px,100%)}
.k-xc-tile{padding:12px 20px;border:4px solid #fff;border-radius:18px;background:#ffd8a8;color:#2b2f45;font:900 clamp(22px,4vw,30px) var(--f-ui);box-shadow:0 6px 0 #e8590c;cursor:pointer}
.k-xc-tile.wrong{animation:k-shake .45s;background:#ffc9c9}
@keyframes k-shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.k-xc-win{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 22px;border-radius:24px;background:rgba(255,255,255,.9);color:#2b2f45}
.k-xc-win b{font:900 28px var(--f-ui)}
.k-xc-win small{font:700 15px var(--f-ui);color:#5c6380}

/* ---------- Grown-ups' home: today first, extras after (like the kids' home) ---------- */
.next-eye{color:var(--acc)}
.next.won{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.next-meta{justify-content:space-between}
.opts-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:800 13.5px var(--f-ui);cursor:pointer}
.opts-btn span{color:var(--acc)}
.next-opts{display:flex;flex-direction:column;gap:8px;padding-top:4px;animation:fadein .2s}
.more{display:flex;flex-direction:column;gap:10px}
.more-h{display:flex;flex-direction:column;gap:2px}
.more-h b{font-size:16px;font-weight:900}
.more-h small{font-size:13.5px;font-weight:700;color:var(--muted)}
.more-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.more-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;border:2px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--line);transition:transform .06s,opacity .2s}
.more-card:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.more-card .more-e{font-size:28px;line-height:1.1}
.more-card b{font-size:15px;font-weight:900}
.more-card small{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.3}
.more-card.hot{border-color:color-mix(in srgb,#f2a516 55%,var(--line))}
.more.later .more-card{opacity:.6;box-shadow:none}
.more.later .more-card:hover{opacity:1}
.more.open .more-card{border-color:color-mix(in srgb,var(--acc) 35%,var(--line))}
.more.fresh .more-card{animation:k-pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * 90ms)}

/* ---------- Grown-ups' Read tab ---------- */
.read{display:flex;flex-direction:column;gap:14px;max-width:820px;width:100%;margin:0 auto}
.rd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.rd-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.rd-card:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.rd-e{font-size:30px;line-height:1}
.rd-t{flex:1;min-width:0;display:flex;flex-direction:column}
.rd-t b{font-size:16px;font-weight:900}
.rd-t small{font-size:12.5px;font-weight:700;color:var(--muted)}
.rd-tick{color:var(--ok);font-weight:900}
.rd-back{align-self:flex-start;margin-top:14px;padding:6px 0;border:0;background:none;color:var(--acc);font:800 14px var(--f-ui);cursor:pointer}
.rd-pass{display:flex;flex-direction:column;gap:14px}
.rd-head{display:flex;align-items:center;gap:14px}
.rd-head .rd-e{font-size:44px}
.rd-head .pg-h{padding-top:0}
.rd-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rd-tools .btn{padding:11px 16px;font-size:13.5px}
.rd-play.on{background:var(--warn,#f2a516)}
.rd-entog{display:flex;align-items:center;gap:6px;margin-left:auto;font-weight:800;font-size:14px;color:var(--muted);cursor:pointer}
.rd-text{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:20px;background:var(--surface);border:2px solid var(--line)}
.rd-sent{display:flex;flex-direction:column;gap:4px;margin:0}
.rd-vi{line-height:1.7}
.rd-w{display:inline;padding:2px 5px;margin:0 -2px;border:0;border-radius:8px;background:none;color:var(--ink);font:800 clamp(20px,3.4vw,25px)/1.5 var(--f-ui);cursor:pointer;transition:background .15s}
.rd-w:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.rd-w.on{background:color-mix(in srgb,var(--acc) 26%,transparent);box-shadow:inset 0 -3px 0 var(--acc)}
.rd-w.reading{background:#ffe066;color:#2b2f45}
.rd-en{font-size:14.5px;font-weight:700;color:var(--muted)}
.rd-mean{position:sticky;bottom:calc(var(--tabs-h,72px) + 8px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:56px;padding:12px 16px;border-radius:16px;background:var(--surface);border:2px solid color-mix(in srgb,var(--acc) 35%,var(--line));box-shadow:0 6px 18px rgba(0,0,0,.12)}
.rd-mean b{font-size:22px;font-weight:900;color:var(--acc)}
.rd-mean span{font-size:16px;font-weight:800}
.rd-mean small{font-size:13.5px;font-weight:700;color:var(--muted)}
@media (min-width:1000px){ .rd-mean{bottom:16px} }
.rd-build{align-items:center;text-align:center}
.rd-build .rd-head{align-self:stretch;text-align:left}
.rd-hint{margin:0;font-size:17px;font-weight:800;color:var(--muted)}
.rd-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;width:100%;min-height:76px;padding:14px;border-radius:18px;background:var(--surface);border:2px solid var(--line)}
.rd-slot{min-width:64px;height:46px;padding:0 12px;display:grid;place-items:center;border:2px dashed var(--line);border-radius:12px;font:800 20px var(--f-ui)}
.rd-slot.full{border:2px solid var(--acc);background:color-mix(in srgb,var(--acc) 15%,transparent);animation:pop .25s}
.rd-endp{font:900 22px var(--f-ui)}
.rd-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.rd-tile{padding:11px 18px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:800 20px var(--f-ui);box-shadow:0 4px 0 var(--line);cursor:pointer}
.rd-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.rd-tile.wrong{animation:shake .4s;border-color:var(--bad);color:var(--bad)}
.rd-win{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--ok) 12%,var(--surface))}
.rd-win div{display:flex;flex-direction:column;text-align:left}
.rd-win b{font-size:22px;font-weight:900;color:var(--ok)}
.rd-win small{font-weight:700;color:var(--muted)}

/* kids' home before the lesson: Bông and the lesson in the middle, the garden on the ground at the bottom */
.k-home2.locked .k-journey{padding-block:26px}
.k-gift{display:inline-block;animation:k-wobble 2.4s ease-in-out infinite;transform-origin:50% 80%}
.k-doors-note{font-size:17px}
.k-doors-note small{font-size:13px}

/* setup's accent step fits one screen: the three accents side by side, family members in two columns */
.k-setcard{gap:14px;padding:18px 20px}
.k-setsteps li span{width:34px;height:34px;font-size:17px}
.k-setbody{gap:10px}
.k-setvoice{grid-template-columns:repeat(3,minmax(0,1fr))}
.k-setvoice button{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center;row-gap:2px;padding:10px 6px}
.k-setvoice i{grid-row:auto}
.k-mixed{padding:10px 12px;gap:6px}
.k-mixed[open] summary{margin-bottom:2px}
.k-mixed .k-setlead{font-size:14px;margin:0}
.k-mixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));column-gap:18px}
.k-mixrow{padding:5px 0;flex-wrap:nowrap}
.k-mixrow > span{white-space:nowrap}

/* today's letters in the lesson: a few big picture cards, all on one screen */
.k-abc-day{justify-content:center;gap:clamp(12px,3vh,26px)}
.k-abc-dayrow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(8px,2vw,18px);width:min(1000px,100%)}
@media (max-width:640px){ .k-abc-dayrow{grid-template-columns:repeat(var(--pn),minmax(0,1fr))} }
.k-abc-big{aspect-ratio:3/4;max-height:min(52dvh,calc((100dvh - 150px) / 2));gap:6px;padding:10px 6px;container-type:normal}
.k-abc-big .k-abc-pic{font-size:clamp(40px,9vh,84px);line-height:1}
.k-abc-big b{font-size:clamp(44px,10vh,96px)}
.k-abc-big small{font-size:clamp(15px,2.6vh,22px);color:#2b2f45}

/* grown-ups' home before the lesson: one column, the lesson and a slim journey line */
.home.home-focus{display:flex;flex-direction:column;gap:18px;max-width:640px;margin:0 auto;padding-top:8px}
.jline{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:2px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.jline:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.jline-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px}
.jline-row b{font-size:15px;font-weight:900}
.jline-row .bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.jline-row .bar i{display:block;height:100%;background:var(--acc);border-radius:99px}
.jline-row small{grid-column:1/-1;font-size:13px;font-weight:700;color:var(--muted)}
.home-note{margin:0;text-align:center;font-size:14px;font-weight:700;color:var(--muted)}

/* Family voices in three short pages */
.k-fpages{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:16px;background:#f2f5f9}
.k-fpages button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border:0;border-radius:12px;background:none;color:#6b7390;font:900 14px var(--f-ui);cursor:pointer}
.k-fpages button span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e3e8ef;font-size:13px}
.k-fpages button small{font:700 11px var(--f-ui)}
.k-fpages button.on{background:#fff;color:#2b2f45;box-shadow:0 2px 0 #e3e8ef}
.k-fpages button.on span{background:#ff8a3d;color:#fff}
.k-fpages button.done span{background:#5ad1a1;color:#fff}
.k-frec .k-fways{gap:10px}
.k-frec .k-fway .btn{width:100%}

/* steadier setup: name buttons keep their width when ticked, and the card keeps one height so Next/Back stay put */
.k-people button>span:first-child{display:inline-grid;place-items:center;width:1.3em}
.k-fone,.k-frec{grid-template-columns:1fr}
.k-setcard{min-height:min(640px,calc(100dvh - 40px))}
.k-setbody{flex:1}
.k-setnav{margin-top:auto}

/* Ghép vần: sound + sound → word */
.k-blend-head{margin:0;text-align:center;font:900 clamp(26px,5vh,40px) var(--f-ui);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.k-blend-head small{display:block;font:800 15px var(--f-ui);opacity:.9}
.k-blend-list{display:flex;flex-direction:column;gap:clamp(10px,2vh,18px);width:min(640px,100%)}
.k-blend{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,16px);padding:clamp(10px,2vh,18px) 8px;border:4px solid #20c997;border-radius:24px;background:#fff;color:#2b2f45;box-shadow:0 6px 0 #12b886;cursor:pointer}
.k-blend.now{background:#fff9db;border-color:#fcc419;box-shadow:0 6px 0 #f59f00}
.k-blend.said{border-color:#ffd43b;box-shadow:0 6px 0 #f59f00}
.k-blend>i{font:900 clamp(16px,min(4vh,5vw),32px) var(--f-ui);color:#adb5bd;font-style:normal}
.k-blend-l{min-width:1.3em;padding:2px 8px;border-radius:14px;background:#e6fcf5;font:900 clamp(26px,min(7vh,9vw),58px)/1.1 var(--f-ui);text-align:center}
.k-blend-w{display:flex;align-items:center;gap:8px}
.k-blend-w em{font-size:clamp(24px,min(6vh,8vw),52px);font-style:normal}
.k-blend-w b{font:900 clamp(26px,min(7vh,9vw),58px)/1.1 var(--f-ui);color:#e8590c}

/* kids' home as a scene: the journey along the top, Bông and the lesson in the middle, a grassy hill with the
   garden's flowers along the bottom edge */
.k-home2.locked .k-trip{order:-1;margin-bottom:auto;margin-top:clamp(40px,7vh,64px)}
.k-home2.locked .k-hello .bong{height:clamp(80px,16vh,150px)}
.k-home2.locked .k-bubble{font-size:clamp(22px,3.6vh,30px)}
.k-home2 .k-home-garden{margin-top:auto;align-self:stretch;width:auto;margin-inline:-16px;margin-bottom:calc(-1 * max(8px,env(safe-area-inset-bottom,0px)))}
.k-home2 .k-home-garden .k-garden{min-height:clamp(54px,10vh,92px);padding:clamp(10px,2vh,18px) 12px max(8px,env(safe-area-inset-bottom,0px));border-radius:50% 50% 0 0 / 34px 34px 0 0;background:linear-gradient(#9bd77e,#6fb653);align-items:flex-start;font-size:clamp(26px,4vh,36px);box-shadow:inset 0 6px 0 rgba(255,255,255,.18)}

/* ---------- Heirbud account: sign in to save progress (src/cloud.js) ---------- */
.acct{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:2px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);margin-bottom:6px}
.acct.on{flex-direction:row;align-items:center;gap:10px}
.acct-head{display:flex;gap:10px;align-items:flex-start}
.acct-ic{font-size:26px;line-height:1}
.acct-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acct-txt b{font-weight:900;font-size:15.5px}
.acct-txt small{font-size:13px;opacity:.75;overflow-wrap:anywhere}
.acct-google{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 14px;border-radius:12px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:800 15px var(--f-ui);cursor:pointer}
.acct-g{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:900 14px var(--f-ui);color:#fff;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}
.acct-email{display:flex;gap:8px}
.acct-email input{flex:1;min-width:0;padding:11px 12px;border-radius:12px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;font:700 15px var(--f-ui)}
.acct-email input:focus-visible{outline:none;border-color:#5ad1a1;box-shadow:inset 0 0 0 2px #5ad1a1}
.acct-email button,.acct-out{flex:none;padding:10px 14px;border-radius:12px;border:0;background:#2fb37a;color:#fff;font:800 14px var(--f-ui);cursor:pointer}
.acct-out{background:none;border:2px solid color-mix(in srgb,currentColor 25%,transparent);color:inherit}
.acct-sent{font-size:14px;line-height:1.45}
.acct-err{font-size:13px;color:#d6453d}
.acct-sheet{gap:12px}
.acct-choice{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:22px;background:#fff;color:#2b2f45;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.acct-choice h3{font:900 20px/1.25 var(--f-ui)}
.acct-choice p{font-size:14.5px;color:#4a5170}
.acct-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:14px;border:2px solid #d9e1ea;background:#fff;color:#2b2f45;text-align:left;cursor:pointer}
.acct-pick b{font:900 16px var(--f-ui)}.acct-pick small{font:700 13px var(--f-ui);color:#6b7390}
.acct-pick:hover{border-color:#5ad1a1;background:#f2fbf6}
.acct-note{font-size:12.5px!important;color:#8a91a8!important}