:root{
  --bg:#F0F7FD; --surface:#FFFFFF; --surface-2:#E4EFF9; --surface-3:#D3E4F4;
  --ink:#0A1B2E; --ink-2:#28425C; --ink-3:#4A6685; --line:#CFE2F4; --line-2:#B5D2EC;   /* ink-3 / accent: 4.5:1 or better on white and surface-2 (WCAG AA) */
  --accent:#0270AC; --accent-hover:#025C8F; --accent-2:#E0F2FE; --accent-3:#BAE6FD; --accent-ink:#FFFFFF;
  --accent-grad:linear-gradient(135deg, #0379B9 0%, #025C8F 100%);   /* white text 4.7:1 or better everywhere on it */
  --violet:#6D28D9; --violet-2:#EDE9FE;
  --f-display:"Bricolage Grotesque","Source Sans 3","Noto Sans Lao",system-ui,sans-serif;   /* page titles, brand, big numbers */
  --shadow-sm:0 1px 2px rgba(10,27,46,.04),0 3px 10px rgba(2,132,199,.06);
  --jade:#047857; --jade-2:#D1FAE5; --warn:#B45309; --warn-2:#FEF3C7; --bad:#BE123C; --bad-2:#FFE4E6;   /* text-safe shades (4.5:1 on white and on their -2 tints) */
  --t1:#0270AC; --t2:#0F766E; --t3:#B45309; --t4:#BE123C; --t0:#56677D;
  /* the six Lao tones (Tone Lab charts and labels) */
  --tone-1:#0270AC; --tone-2:#047857; --tone-3:#B45309; --tone-4:#B91C1C; --tone-5:#6D28D9; --tone-6:#9A3412;
  --shadow:0 1px 3px rgba(10,27,46,.05),0 6px 20px rgba(2,132,199,.08);
  --shadow-lg:0 12px 32px -4px rgba(2,132,199,.18);
  --r:14px; --r-s:9px;
  /* Icon system (see docs/ICONS.md). Use only these sizes:
     2xs 12 tiny badge · xs 14 chips/compact · sm 16 inline text, small buttons, table actions · md 18 buttons, headings (default)
     lg 20 sidebar navigation, feature tiles · xl 22 mobile tab bar · display 28 locked/empty state, media play · hero 32 main listen button */
  --ic-2xs:12px; --ic-xs:14px; --ic-sm:16px; --ic-md:18px; --ic-lg:20px; --ic-xl:22px; --ic-display:28px; --ic-hero:32px;
  --ic-stroke:1.9; --ic-stroke-sm:2.1; --ic-gap:8px;
  --hit:36px; --hit-touch:44px;       /* minimum size of an icon-only control (mouse / touch screens) */
  --f-ui:"Source Sans 3","Noto Sans Lao","Phetsarath OT","Saysettha OT",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --f-hz:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  --f-hzd:"Noto Serif SC","Songti SC","STSong","SimSun","Source Han Serif SC",serif;
  --f-lo:"Noto Sans Lao","Phetsarath OT","Saysettha OT","Lao UI","Noto Sans",sans-serif;
  color-scheme:light;
}
/* DAY (Light) is the default; NIGHT (Dark) triggers on data-theme="night" or "dark" */
:root[data-theme="night"],
:root[data-theme="dark"]{
  --bg:#08121D; --surface:#0E1B2A; --surface-2:#16283D; --surface-3:#1E3652;
  --ink:#F0F7FD; --ink-2:#A4C2E0; --ink-3:#86A6C4; --line:#1C344E; --line-2:#284B6E;
  --accent:#38BDF8; --accent-hover:#7DD3FC; --accent-2:#0E2A44; --accent-3:#133E64; --accent-ink:#061424;
  --accent-grad:linear-gradient(135deg, #38BDF8 0%, #0284C7 100%);
  --jade:#34D399; --jade-2:#053B2D; --warn:#FBBF24; --warn-2:#451A03; --bad:#FB7185; --bad-2:#4C0519; --violet:#A78BFA; --violet-2:#2E1065; --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.22);
  --t1:#38BDF8; --t2:#2DD4BF; --t3:#FBBF24; --t4:#FB7185; --t0:#94A3B8;
  --tone-1:#38BDF8; --tone-2:#34D399; --tone-3:#FBBF24; --tone-4:#F87171; --tone-5:#A78BFA; --tone-6:#FB923C;
  --shadow:0 2px 4px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3); color-scheme:dark;
}
/* SYSTEM mode follows OS preferences when explicitly selected */
@media (prefers-color-scheme:dark){
  :root[data-theme="system"],
  :root[data-theme="auto"]{
    --bg:#08121D; --surface:#0E1B2A; --surface-2:#16283D; --surface-3:#1E3652;
    --ink:#F0F7FD; --ink-2:#A4C2E0; --ink-3:#86A6C4; --line:#1C344E; --line-2:#284B6E;
    --accent:#38BDF8; --accent-hover:#7DD3FC; --accent-2:#0E2A44; --accent-3:#133E64; --accent-ink:#061424;
    --accent-grad:linear-gradient(135deg, #38BDF8 0%, #0284C7 100%);
    --jade:#34D399; --jade-2:#053B2D; --warn:#FBBF24; --warn-2:#451A03; --bad:#FB7185; --bad-2:#4C0519; --violet:#A78BFA; --violet-2:#2E1065; --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.22);
    --t1:#38BDF8; --t2:#2DD4BF; --t3:#FBBF24; --t4:#FB7185; --t0:#94A3B8;
  --tone-1:#38BDF8; --tone-2:#34D399; --tone-3:#FBBF24; --tone-4:#F87171; --tone-5:#A78BFA; --tone-6:#FB923C;
    --shadow:0 2px 4px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3); color-scheme:dark;
  }
}

*{box-sizing:border-box}
/* "hidden" always hides, even on elements whose class sets a display (e.g. .row, .stack) */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-ui);-webkit-text-size-adjust:100%;}
:lang(lo), .lo{font-family:var(--f-lo)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
/* Safari before 17 (iPad / iPhone) has "align-items: flex-start" in its own stylesheet for <button>: a button laid out
   as a flex box then shrinks its children to their content (practice cards, stat cards, tone cards broke on iPad).
   Chrome, Firefox and new Safari stretch them. This puts every browser on the same rule; a button's own class still
   chooses its alignment. (scripts/qa_safari.mjs checks it in old and new WebKit.) */
button{align-items:stretch}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.hz{font-family:var(--f-hz)}
.hzd{font-family:var(--f-hzd)}
.muted{color:var(--ink-3)}
.small{font-size:.875rem}
.tabnum{font-variant-numeric:tabular-nums}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:1.75rem;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
p{margin:0}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;padding:18px 12px;gap:4px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 18px}
.seal{width:38px;height:38px;border-radius:12px;background:var(--accent-grad);color:#fff;display:grid;place-items:center;font:700 22px/1 var(--f-lo);flex:none;box-shadow:0 4px 12px rgba(2,132,199,.28);position:relative;overflow:hidden}
.seal::before{content:"";position:absolute;inset:0;border-radius:12px;border:1.5px solid rgba(255,255,255,.45);pointer-events:none}
.seal.logo{background:none;border-radius:50%;box-shadow:0 4px 12px rgba(2,61,189,.28);user-select:none;overflow:visible}
/* Logo effect (brandMark in ui.js adds .lm-hover on pointer enter and every 5 s, 700 ms): a little pop, a soft white band sweeping across
   the circle (clipped to it), and a wiggle of the small letter. */
.seal.logo{transform-origin:50% 50%}
.seal.lm-hover{animation:lmPop .7s cubic-bezier(.3,0,.3,1)}
.lm-sweep{transform:translateX(-300px)}
.lm-hover .lm-sweep{animation:lmSweep .7s ease-in-out}
.lm-small{transform-box:fill-box;transform-origin:50% 60%}
.lm-hover .lm-small{animation:lmWiggle .7s ease-in-out}
@keyframes lmPop{0%,100%{transform:scale(1)}45%{transform:scale(1.06)}}
@keyframes lmSweep{from{transform:translateX(-300px)}to{transform:translateX(780px)}}
@keyframes lmWiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(-9deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.seal.lm-hover,.lm-hover .lm-sweep,.lm-hover .lm-small{animation:none}}
.seal::after{content:"";position:absolute;width:40px;height:24px;bottom:-6px;right:-8px;background:radial-gradient(ellipse at center,rgba(255,255,255,.35) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.brand b{display:block;font-size:1.15rem;letter-spacing:.01em;font-weight:700}
.brand small{display:block;color:var(--ink-3);font-size:.75rem;line-height:1.2}
.nav-btn{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:9px 12px;border-radius:var(--r-s);color:var(--ink-2);text-align:left;font-weight:600;font-size:.95rem;transition:all .15s}
.ic{width:var(--ic-md);height:var(--ic-md);flex:none;fill:none;stroke:currentColor;stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;overflow:visible}
.nav-btn svg{width:var(--ic-lg);height:var(--ic-lg);flex:none;stroke:currentColor;fill:none;stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round}
.nav-btn:hover{background:var(--surface-2);color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--accent-2);color:var(--accent);font-weight:700}
.nav-btn .count{margin-left:auto;font-size:.75rem;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:1px 7px;font-weight:700}
.side .sep{height:1px;background:var(--line);margin:10px 8px}
.side-group-label{padding:14px 12px 4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.side-group-label:first-child{padding-top:0}
.side-foot{margin-top:auto;padding:10px 12px;font-size:.8rem;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.dot-ok{width:8px;height:8px;border-radius:50%;background:var(--jade)}

.mainwrap{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-block:10px;padding-inline:24px;display:flex;align-items:center;gap:12px}
.topbar .mbrand{display:none}
.search{position:relative;flex:1;max-width:560px}
.search input{-webkit-appearance:none;appearance:none;width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:9px 14px 9px 38px;font-size:.95rem}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:var(--ic-sm);height:var(--ic-sm);stroke:var(--ink-3);fill:none;stroke-width:var(--ic-stroke)}
.search-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);max-height:70vh;overflow:auto;padding:6px;z-index:30}
.sp-item{display:flex;gap:12px;align-items:baseline;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px}
.sp-item:hover,.sp-item.active{background:var(--surface-2)}
.sp-item .hz{font-size:1.15rem;min-width:3.2em}
.sp-item .py{min-width:6em}
.sp-head{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 2px;font-weight:700}
.toggles{display:flex;gap:4px;align-items:center}
.tg{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:5px 11px;font-size:.8rem;font-weight:600;color:var(--ink-3)}
.tg[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.langsw{display:flex;border:1px solid var(--line-2);border-radius:99px;overflow:hidden;background:var(--surface)}
.langsw button{border:0;background:none;padding:5px 10px;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.langsw button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
main{padding-block:28px 96px;padding-inline:24px;width:100%;max-width:980px;margin:0 auto}
.tabbar{display:none}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .topbar{padding-inline:16px;flex-wrap:wrap;row-gap:8px}
  .topbar .mbrand{display:flex;align-items:center;gap:8px;font-weight:700}
  .topbar .mbrand .seal{width:28px;height:28px;font-size:16px}
  .search{order:3;flex-basis:100%;max-width:none}
  .toggles{margin-left:auto}
  main{padding-inline:16px;padding-block:18px 110px}
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;font-size:.68rem;font-weight:600;color:var(--ink-3)}
  .tabbar svg{width:var(--ic-xl);height:var(--ic-xl);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round}
  .tabbar button[aria-current="page"]{color:var(--accent)}
  .hide-m{display:none!important}
}
@media (max-width:420px){ .toggles .tg{padding:5px 8px} .langsw button{padding:5px 8px} }

/* ---------- Generic ---------- */
.stack{display:flex;flex-direction:column;gap:16px}
.stack-l{display:flex;flex-direction:column;gap:28px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card.flat{box-shadow:none}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:10px;padding:9px 15px;font-weight:600;font-size:.95rem;min-height:40px;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent-grad);border-color:transparent;color:var(--accent-ink);box-shadow:0 2px 8px rgba(2,132,199,.25)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 4px 14px rgba(2,132,199,.35)}
.btn.jade{background:var(--jade);border-color:var(--jade);color:#fff}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{padding:5px 10px;min-height:32px;font-size:.85rem;border-radius:8px}
.btn svg,.ib svg{width:var(--ic-md);height:var(--ic-md);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round}
.btn.sm svg{width:var(--ic-sm);height:var(--ic-sm)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.ib{border:1px solid transparent;background:none;border-radius:8px;width:36px;height:36px;display:inline-grid;place-items:center;color:var(--ink-2)}
.ib:hover{background:var(--surface-2);color:var(--ink)}
.ib[aria-pressed="true"]{color:var(--accent);background:var(--accent-2)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:2px 10px;font-size:.78rem;font-weight:700;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip.lv{background:var(--jade-2);color:var(--jade)}
.chip.acc{background:var(--accent-2);color:var(--accent)}
.chip.warn{background:var(--warn-2);color:var(--warn)}
.chip.violet{background:var(--violet-2);color:var(--violet)}
.chip.bad{background:var(--bad-2);color:var(--bad)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;border-radius:8px;padding:6px 12px;font-weight:600;font-size:.88rem;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.input{border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:9px 12px;width:100%}
input[type=search].input,.input[type=search]{-webkit-appearance:none;appearance:none}   /* older Safari draws search fields natively (no border or radius) */
.empty{padding:28px;text-align:center;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--r)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:100;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.pagehead{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.pagehead p{color:var(--ink-2);max-width:62ch}

/* ---------- Tones / pinyin ---------- */
.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}.t4{color:var(--t4)}.t0{color:var(--t0)}
body.no-tone .t1,body.no-tone .t2,body.no-tone .t3,body.no-tone .t4,body.no-tone .t0{color:inherit}

/* ---------- Sentence ---------- */
.sent{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 0;border-top:1px solid var(--line)}
.sent:first-child{border-top:0}
.sent .zh{font-family:var(--f-hz);font-size:1.45rem;line-height:1.5;letter-spacing:.02em}
.w{border:0;background:none;padding:0 1px;margin:0;font:inherit;color:inherit;border-radius:4px;cursor:pointer;border-bottom:1.5px solid transparent}
.w:hover{background:var(--surface-2);border-bottom-color:var(--line-2)}
.w.mk{color:var(--accent);font-weight:600}
.punct{color:var(--ink-3)}
.sent .py{font-size:1rem;color:var(--ink-2);letter-spacing:.01em}
.sent .tr{color:var(--ink-2);font-size:.97rem}
.sent .tr-lo{font-family:var(--f-lo)}
body.hide-py .py, body.hide-py .bd-py{visibility:hidden}
body.hide-py .sent .py{display:none}
body.hide-tr .sent .tr{display:none}
body.hide-hz .sent .zh{filter:blur(6px)}
body.hide-hz .sent .zh:hover{filter:none}
.sent-actions{display:flex;gap:2px;align-items:flex-start}
.sent-src{font-size:.72rem;color:var(--ink-3)}
.bd{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bd-cell{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:6px 10px 7px;display:flex;flex-direction:column;align-items:center;min-width:56px;cursor:pointer}
.bd-cell:hover{border-color:var(--line-2)}
.bd-cell .hz{font-size:1.3rem;line-height:1.3}
.bd-cell .bd-py{font-size:.85rem}
.bd-cell .bd-gl{font-size:.75rem;color:var(--ink-2);max-width:9em;text-align:center;line-height:1.25}
.bd-cell .bd-pos{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
.bd-cell.mk{border-color:var(--accent);background:var(--accent-2)}
.fix{font-size:.78rem;color:var(--warn);background:var(--warn-2);border-radius:6px;padding:2px 8px;display:inline-block;margin-top:4px}

/* ---------- Home ---------- */
.hero-greet{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.hero-greet h1{font-size:2rem}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-size:1.9rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;color:var(--ink-3)}
.cont{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.bigno{font:700 .8rem/1 var(--f-ui);color:var(--ink-3);letter-spacing:.06em}
.pat-big{font-family:var(--f-hzd);font-size:2.4rem;line-height:1.15;font-weight:700}
.lvbar{display:grid;grid-template-columns:3.5em minmax(0,1fr) 4.5em;gap:10px;align-items:center;font-size:.88rem}
.bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--jade);border-radius:99px}
.qs{display:flex;gap:14px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;width:100%}
.qs:hover{border-color:var(--line-2);background:var(--surface-2)}
.qs .qi{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font:700 1.25rem/1 var(--f-hzd);flex:none}

/* ---------- Learn list ---------- */
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:3.2em minmax(7em,auto) minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 12px;border:0;background:none;text-align:left;border-radius:10px;width:100%}
.prow:hover{background:var(--surface-2)}
.prow .pn{font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:700}
.prow .ph{font-family:var(--f-hz);font-size:1.15rem;font-weight:600}
.prow .pm{color:var(--ink-2);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center}
.status.done{background:var(--jade);border-color:var(--jade)}
.status.done::after{content:"";width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.group-h{display:flex;align-items:baseline;gap:10px;margin:22px 0 6px;padding:0 12px}
.group-h:first-child{margin-top:0}
@media (max-width:600px){.prow{grid-template-columns:2.6em minmax(0,1fr) auto;gap:10px}.prow .pm{grid-column:2;grid-row:2;white-space:normal;font-size:.85rem}.prow .status{grid-row:1/3;grid-column:3}}

/* ---------- Pattern page ---------- */
.crumb{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--ink-3);margin-bottom:14px;flex-wrap:wrap}
.crumb button{border:0;background:none;color:var(--ink-2);padding:0;font-weight:600}
.phead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;margin-bottom:26px}
.phead .pat-big{font-size:clamp(2.2rem,6vw,3.4rem)}
.phead .pmean{font-size:1.15rem;color:var(--ink-2);margin-top:6px}
.phead .plo{font-family:var(--f-lo);color:var(--ink-3);margin-top:2px}
@media (max-width:600px){.phead{grid-template-columns:1fr}}
.formula{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fchip{border-radius:8px;padding:5px 11px;background:var(--surface-2);border:1px solid var(--line);font-weight:600;font-size:.92rem}
.fchip.hz{background:var(--accent-2);border-color:transparent;color:var(--accent);font-size:1.1rem;padding:3px 11px}
.fplus{color:var(--ink-3);font-weight:700}
.sect{display:flex;flex-direction:column;gap:12px}
.sect > h2{display:flex;align-items:center;gap:10px}
.why{font-size:1.02rem;max-width:68ch;color:var(--ink)}
.mistake{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.mistake .mk-x{color:var(--bad);font-weight:800}
.mistake .mk-v{color:var(--jade);font-weight:800}
.mistake .hz{font-size:1.2rem}
.mistake .bad{text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:1.5px;color:var(--ink-2)}
.mistake .reason{grid-column:1/-1;color:var(--ink-2);font-size:.95rem;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.pnav{display:flex;justify-content:space-between;gap:10px;margin-top:10px}

/* ---------- Generator ---------- */
.gen-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
.picker{position:sticky;top:76px;max-height:calc(100vh - 100px);display:flex;flex-direction:column;gap:10px}
.picker .plist-s{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);flex:1;min-height:200px}
.pick{display:grid;grid-template-columns:auto 2.4em minmax(0,1fr);gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.92rem}
.pick:last-child{border-bottom:0}
.pick input{accent-color:var(--accent);width:17px;height:17px}
.pick .pn{font-size:.75rem;color:var(--ink-3);font-weight:700}
.pick .hz{font-weight:600}
.pick small{display:block;color:var(--ink-3);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvchips{display:flex;gap:4px;flex-wrap:wrap}
.lvchips button{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:3px 10px;font-size:.78rem;font-weight:700;color:var(--ink-2)}
.lvchips button[aria-pressed="true"]{background:var(--jade);border-color:var(--jade);color:#fff}
.gen-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.gen-bar input[type=range]{accent-color:var(--accent);width:130px}
.gen-group{margin-top:14px}
.gen-group-h{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:2px solid var(--ink);margin-bottom:2px}
.gen-group-h .hz{font-size:1.1rem;font-weight:700}
@media (max-width:900px){.gen-layout{grid-template-columns:1fr}.picker{position:static;max-height:none}.picker .plist-s{max-height:300px}}

/* ---------- Practice ---------- */
.pcard{display:flex;gap:14px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px;width:100%}
.pcard:hover{border-color:var(--line-2);background:var(--surface-2)}
.pcard .qi{width:42px;height:42px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font:700 1.2rem/1 var(--f-hzd);flex:none;color:var(--accent)}
.pcard b{display:block}
.pcard span{color:var(--ink-3);font-size:.88rem}
.quiz{max-width:720px;margin:0 auto}
.qprog{display:flex;gap:4px;margin-bottom:18px}
.qprog i{flex:1;height:5px;border-radius:9px;background:var(--surface-3)}
.qprog i.ok{background:var(--jade)}.qprog i.no{background:var(--bad)}.qprog i.cur{background:var(--ink-3)}
.qbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.qprompt{font-size:1.1rem;color:var(--ink-2);margin-bottom:6px}
.qzh{font-family:var(--f-hz);font-size:1.7rem;line-height:1.5}
.qpy{color:var(--ink-2)}
.opts{display:grid;gap:10px;margin-top:18px}
.opt{border:1.5px solid var(--line-2);background:var(--surface);border-radius:12px;padding:12px 14px;text-align:left;font-size:1.05rem}
.opt.hz{font-size:1.25rem}
.opt:hover{border-color:var(--ink-3)}
.opt.right{border-color:var(--jade);background:var(--jade-2)}
.opt.wrong{border-color:var(--bad);background:var(--bad-2)}
.tiles{display:flex;flex-wrap:wrap;gap:8px;min-height:54px}
.tiles.answer{border-bottom:2px solid var(--line-2);padding-bottom:10px;margin-top:14px}
.tile{border:1.5px solid var(--line-2);background:var(--surface-2);border-radius:10px;padding:6px 12px;font:1.3rem/1.3 var(--f-hz)}
.tile small{display:block;font:.72rem/1.2 var(--f-ui);color:var(--ink-3)}
.tile.used{opacity:.25;pointer-events:none}
.feedback{margin-top:16px;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.feedback.ok{background:var(--jade-2)}.feedback.no{background:var(--bad-2)}
.feedback b{font-size:1.02rem}
.qfoot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.blank{display:inline-block;min-width:2.2em;border-bottom:2px solid var(--accent);text-align:center;color:var(--accent)}
.listen-big{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:0;display:grid;place-items:center;margin:8px auto}
.listen-big svg{width:var(--ic-hero);height:var(--ic-hero);fill:currentColor;stroke:none}
.result{text-align:center;padding:30px 20px}
.result .big{font-size:3.2rem;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Dictionary / sheet ---------- */
.dict-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.dres{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dres button{display:grid;grid-template-columns:minmax(4em,auto) minmax(6em,auto) minmax(0,1fr) auto;gap:14px;align-items:baseline;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:10px 14px}
.dres button:last-child{border-bottom:0}
.dres button:hover{background:var(--surface-2)}
.dres .hz{font-size:1.25rem}
.dres .gl{color:var(--ink-2);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.dres button{grid-template-columns:auto minmax(0,1fr) auto}.dres .gl{grid-column:1/-1;white-space:normal}}
.scrim{position:fixed;inset:0;background:rgba(10,14,12,.35);z-index:60}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:61;box-shadow:-10px 0 40px rgba(0,0,0,.15);display:flex;flex-direction:column;border-left:1px solid var(--line)}
.sheet-h{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);padding-top:calc(10px + env(safe-area-inset-top,0px))}
.sheet-b{overflow:auto;padding:18px 20px 40px;display:flex;flex-direction:column;gap:18px}
@media (max-width:700px){.sheet{top:auto;left:0;width:100%;max-height:88vh;border-radius:18px 18px 0 0;border-left:0;padding-bottom:env(safe-area-inset-bottom,0px)}.sheet-h{padding-top:10px}}
.entry-h{display:flex;flex-direction:column;gap:2px}
.entry-h .big{font-family:var(--f-hzd);font-size:3.2rem;line-height:1.15;font-weight:700}
.entry-h .epy{font-size:1.3rem}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.93rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0}
.charcards{display:flex;flex-direction:column;gap:10px}
.charcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;border:1px solid var(--line);border-radius:12px;padding:12px}
.charcard .cc{font-family:var(--f-hzd);font-size:2.4rem;line-height:1;grid-row:1/4;align-self:center;border:0;background:none;padding:4px}
.hw-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.hw-target{width:220px;height:220px;max-width:100%;background:var(--surface);border-radius:10px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(45deg,transparent calc(50% - .5px),var(--line) calc(50% - .5px),var(--line) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),var(--line) calc(50% - .5px),var(--line) calc(50% + .5px),transparent calc(50% + .5px));
  background-size:50% 50%,50% 50%,100% 100%,100% 100%;background-position:center}
.wordchips{display:flex;flex-wrap:wrap;gap:6px}
.wordchips button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 9px;font-size:.9rem}
.wordchips button .hz{font-size:1.05rem}
.wordchips button:hover{background:var(--surface-2)}

/* ---------- Pinyin ---------- */
.tonecard{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 10px;text-align:center}
.tonecard svg{width:100%;max-width:120px;height:auto}
.tonecard .syl{font-size:1.6rem;font-weight:700}
.tonecard .ex{font:1.4rem var(--f-hz)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.scell{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:0}
.scell b{font-size:1.15rem}
.scell .hz{font-size:1.1rem}
.scell small{color:var(--ink-3);font-size:.75rem}
.scell:hover{background:var(--surface-2)}
.rule{border-left:3px solid var(--accent);padding:4px 0 4px 14px;display:flex;flex-direction:column;gap:6px}

/* ---------- Characters ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.cgrid button{aspect-ratio:1;max-width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;font:1.6rem/1 var(--f-hz);display:grid;place-items:center}
.cgrid button:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Review ---------- */
.flash{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.flash .front{font-family:var(--f-hz);font-size:2.4rem;line-height:1.35}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.grades button small{display:block;font-size:.72rem;color:var(--ink-3);font-weight:500}

/* ---------- Settings ---------- */
/* label and control side by side when they fit; on narrow screens the control drops below the label at full width */
.set-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.set-row>:first-child{flex:1 1 170px;min-width:0}
.set-row>:not(:first-child){max-width:100%;overflow-wrap:anywhere}
.set-row:first-child{border-top:0}
.set-field{display:flex;gap:8px;align-items:center;flex:0 1 400px;min-width:0}
.set-field .input{flex:1;min-width:0}
.set-field .btn{flex:none}
.set-row label{font-weight:600}
.set-row p{color:var(--ink-3);font-size:.88rem}
.switch{position:relative;width:44px;height:26px;appearance:none;-webkit-appearance:none;background:var(--line-2);border-radius:99px;cursor:pointer;transition:background .15s;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.switch:checked{background:var(--jade)}
.switch:checked::after{transform:translateX(18px)}
textarea.code{width:100%;min-height:90px;font:.8rem/1.4 ui-monospace,Menlo,monospace;border:1px solid var(--line-2);border-radius:10px;padding:10px;background:var(--surface-2)}
.notice{display:flex;gap:10px;align-items:flex-start;background:var(--warn-2);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===================== Platform additions ===================== */
.lo, :lang(lo){font-family:var(--f-lo)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.jade{background:var(--jade);border-color:var(--jade);color:#fff}
.toast.err{background:var(--bad);color:#fff}
.scrim{position:fixed;inset:0;background:rgba(10,14,12,.38);z-index:60}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;background:var(--surface);border-radius:16px;z-index:70;box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column}
.dialog.wide{width:min(760px,calc(100% - 32px))}
.dialog-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 6px}
.dialog-b{padding:8px 18px 12px;display:flex;flex-direction:column;gap:12px}
.dialog-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
/* "Discard changes?" (js/shared/ui.js discardDialog) */
.discard-dlg{width:min(400px,calc(100% - 32px));border:1px solid color-mix(in srgb,var(--warn) 25%,var(--line));
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--warn) 13%,var(--surface)),var(--surface) 62%)}
.discard-dlg .dialog-b{padding:28px 24px 6px}
.discard-dlg .dialog-f{border-top:0;padding:14px 24px 22px;justify-content:stretch}
.discard-dlg .dialog-f .btn{flex:1 1 140px;min-height:46px;font-weight:700}
.dc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.dc h2{margin:10px 0 0;font-size:1.3rem}
.dc p{margin:0;color:var(--ink-3);line-height:1.5}
.dc-ic{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 16%,var(--surface));box-shadow:0 10px 26px -12px var(--warn)}
.dc-ic .ic{width:30px;height:30px;position:relative}
.dc-ring{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--warn) 55%,transparent)}
.field{display:flex;flex-direction:column;gap:5px}
.field > label, .field > .lbl{font-weight:600;font-size:.88rem}
.field .help{font-size:.8rem;color:var(--ink-3)}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
select.input{appearance:auto}
textarea.input{min-height:80px;resize:vertical;line-height:1.45}
.banner{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--warn-2);border-radius:12px;padding:10px 14px;font-size:.92rem}
.banner.ok{background:var(--jade-2)}
.banner.info{background:var(--surface-2)}
.banner.bad{background:var(--bad-2)}
.demo-bar{background:var(--ink);color:var(--bg);font-size:.8rem;text-align:center;padding:5px 12px}
.demo-bar a,.demo-bar button{color:inherit;font-weight:700;background:none;border:0;text-decoration:underline;padding:0}
.netdot{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-3)}
.netdot i{width:8px;height:8px;border-radius:50%;background:var(--jade)}
.netdot.off i{background:var(--warn)}

/* auth & waiting */
.waiting-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%, #E0F2FE 0%, #F0F7FD 60%, #E2EDF8 100%);padding:24px;text-align:center}
:root[data-theme="dark"] .waiting-screen{background:radial-gradient(ellipse at 50% 30%, #0E2A44 0%, #08121D 60%, #060D15 100%)}
.waiting-card{position:relative;z-index:2;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(56,189,248,.35);border-radius:24px;padding:clamp(28px,6vw,44px) clamp(20px,6vw,40px);max-width:440px;width:100%;box-shadow:0 20px 48px -10px rgba(2,132,199,.22),0 0 0 1px rgba(255,255,255,.8);display:flex;flex-direction:column;align-items:center;gap:16px;animation:fadeScaleIn .6s cubic-bezier(.16,1,.3,1) both}
:root[data-theme="dark"] .waiting-card{background:rgba(14,27,42,.85);border-color:rgba(56,189,248,.25);box-shadow:0 20px 48px -10px rgba(0,0,0,.55),0 0 0 1px rgba(56,189,248,.15)}

/* Dok Champa (Lao Flower) Animation */
.champa-wrap{position:relative;width:120px;height:120px;margin-bottom:6px}
.champa-svg{width:100%;height:100%;animation:champaSpin 24s linear infinite, champaBreathe 4s ease-in-out infinite}
.champa-halo{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.35) 0%,rgba(251,191,36,.22) 50%,transparent 70%);animation:haloPulse 3s ease-in-out infinite;pointer-events:none}
@keyframes champaSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes champaBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes haloPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:.9;transform:scale(1.12)}}

/* Sabaidee Typography & Glowing Welcome */
.lao-sabaidee{font-family:var(--f-lo);font-size:clamp(2.4rem,8vw,3.4rem);font-weight:700;line-height:1.1;background:linear-gradient(135deg, #0284C7 0%, #0369A1 50%, #0D9488 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px rgba(2,132,199,.25));margin:0}
:root[data-theme="dark"] .lao-sabaidee{background:linear-gradient(135deg, #38BDF8 0%, #7DD3FC 50%, #34D399 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.waiting-sub{font-size:.95rem;color:var(--ink-2);font-weight:600;margin:0}
.waiting-note{font-size:.84rem;color:var(--ink-3);margin:0;display:flex;align-items:center;gap:6px}

/* Mekong River Shimmer Bar */
.mekong-stream{width:100%;height:6px;background:rgba(2,132,199,.15);border-radius:99px;overflow:hidden;position:relative;margin-top:6px}
.mekong-shimmer{position:absolute;inset:0;width:40%;background:linear-gradient(90deg, transparent, #38BDF8, #0284C7, transparent);border-radius:99px;animation:mekongFlow 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mekongFlow{0%{left:-40%}100%{left:100%}}

/* Floating Lao Alphabet Background Particles */
.floating-elements{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.float-glyph{position:absolute;font-family:var(--f-lo);font-weight:700;color:#0284C7;opacity:.18;filter:blur(.4px);user-select:none;animation:floatDrift 14s ease-in-out infinite}
:root[data-theme="dark"] .float-glyph{color:#38BDF8;opacity:.14}
.float-glyph:nth-child(1){top:12%;left:10%;font-size:3.5rem;animation-duration:12s;animation-delay:0s}
.float-glyph:nth-child(2){top:22%;right:12%;font-size:4.2rem;animation-duration:15s;animation-delay:1.5s}
.float-glyph:nth-child(3){bottom:18%;left:14%;font-size:3.8rem;animation-duration:13s;animation-delay:2.5s}
.float-glyph:nth-child(4){bottom:25%;right:15%;font-size:4.5rem;animation-duration:17s;animation-delay:3.5s}
.float-glyph:nth-child(5){top:48%;left:6%;font-size:3rem;animation-duration:16s;animation-delay:4s}
.float-glyph:nth-child(6){top:65%;right:8%;font-size:3.4rem;animation-duration:14s;animation-delay:5s}
@keyframes floatDrift{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(12px,-18px) rotate(6deg)}
  66%{transform:translate(-10px,14px) rotate(-5deg)}
}
@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}

/* Enhanced Interactive Auth Page */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--bg)}
.auth-art{background:linear-gradient(145deg, #0284C7 0%, #0369A1 50%, #075985 100%);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,5vw,52px);position:relative;overflow:hidden;box-shadow:inset -1px 0 0 rgba(255,255,255,.1)}
.auth-art::before{content:"";position:absolute;width:420px;height:420px;top:-120px;right:-100px;background:radial-gradient(circle,rgba(56,189,248,.35) 0%,transparent 70%);pointer-events:none}
.auth-art::after{content:"";position:absolute;width:550px;height:550px;bottom:-180px;left:-140px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);pointer-events:none}

.auth-hero-top{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px}
.auth-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);padding:5px 14px;border-radius:99px;font-size:.82rem;font-weight:700;color:#fff;width:fit-content;letter-spacing:.02em}
.auth-badge i{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 8px #34D399}

.auth-brand-row{display:flex;align-items:center;gap:14px}
.auth-champa-icon{width:56px;height:56px;flex:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));animation:champaBreathe 5s ease-in-out infinite}
.auth-title-group h2{margin:0;font-size:2.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.auth-title-group small{display:block;color:rgba(255,255,255,.82);font-size:.88rem;font-weight:600;margin-top:2px}

/* Interactive Sabaidee Audio Button */
.sabaidee-interactive-btn{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.32);color:#fff;padding:12px 18px;border-radius:14px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);width:fit-content;box-shadow:0 6px 20px rgba(0,0,0,.15);text-align:left;position:relative;z-index:2}
.sabaidee-interactive-btn:hover{background:rgba(255,255,255,.28);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.sabaidee-interactive-btn:active{transform:translateY(0)}
.sound-bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.sound-bars span{width:3.5px;height:6px;background:#fff;border-radius:2px;transition:height .15s}
.sabaidee-interactive-btn.playing .sound-bars span:nth-child(1){animation:equalize 0.6s infinite ease-in-out}
.sabaidee-interactive-btn.playing .sound-bars span:nth-child(2){animation:equalize 0.8s 0.15s infinite ease-in-out}
.sabaidee-interactive-btn.playing .sound-bars span:nth-child(3){animation:equalize 0.5s 0.3s infinite ease-in-out}
.sabaidee-interactive-btn.playing .sound-bars span:nth-child(4){animation:equalize 0.7s 0.2s infinite ease-in-out}
@keyframes equalize{0%,100%{height:4px}50%{height:18px}}

/* Interactive Lao Consonant Chips on Hero */
.hero-consonants{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.hero-consonants-title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.8)}
.consonant-chips{display:flex;flex-wrap:wrap;gap:8px}
.consonant-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:6px 10px;min-width:44px;color:#fff;cursor:pointer;transition:all .15s;font-family:var(--f-ui)}
.consonant-chip:hover{background:rgba(255,255,255,.28);transform:scale(1.08);border-color:#fff}
.consonant-chip .c-char{font-family:var(--f-lo);font-size:1.35rem;font-weight:700;line-height:1}
.consonant-chip .c-name{font-size:.68rem;opacity:.9;font-weight:600;margin-top:2px}
.consonant-chip.active{background:#fff;color:#0284C7;transform:scale(1.1);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.consonant-chip.active .c-name{color:#0369A1}

/* Proverb / Wisdom Box */
.lao-proverb-box{position:relative;z-index:2;background:rgba(0,0,0,.18);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 18px;margin-top:14px}
.lao-proverb-box .pv-lao{font-family:var(--f-lo);font-size:1.05rem;font-weight:700;line-height:1.4;color:#fff}
.lao-proverb-box .pv-tr{font-size:.82rem;color:rgba(255,255,255,.85);margin-top:4px;font-style:italic}

/* Mekong River Aesthetic Wave curve */
.auth-art-wave{position:absolute;bottom:0;left:0;right:0;height:70px;pointer-events:none;opacity:.25}

/* Auth Form Container */
.auth-form-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(20px,5vw,48px) clamp(16px,4vw,36px);width:100%}
.auth-form{display:flex;flex-direction:column;gap:18px;max-width:440px;width:100%;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,5vw,36px);box-shadow:var(--shadow-lg)}
.auth-form-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.auth-form h1{font-size:1.75rem;margin:0;font-weight:700;color:var(--ink)}

/* Input Enhancements with Password Toggle */
.field{display:flex;flex-direction:column;gap:6px}
.input-wrap{position:relative;display:flex;align-items:center;width:100%}
.input-wrap .input{width:100%;padding-right:44px}
.pw-toggle-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--ink-3);width:32px;height:32px;padding:0;cursor:pointer;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;transition:color .15s, background .15s;z-index:2}
.pw-toggle-btn:hover{color:var(--accent);background:var(--surface-2)}
.pw-toggle-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pw-toggle-btn svg{width:var(--ic-md);height:var(--ic-md);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke);display:block}

/* Demo account fast switcher cards */
.demo-quick-box{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.demo-quick-header{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:700}
.demo-btn-group{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Responsive Breakpoints for All Devices */
@media (max-width: 900px){
  .auth{grid-template-columns:1fr;min-height:auto}
  .auth-art{padding:32px 24px;border-radius:0 0 24px 24px}
  .auth-title-group h2{font-size:1.85rem}
  .auth-form-wrap{padding:24px 16px}
  .auth-form{padding:24px 20px;border-radius:16px}
}
@media (max-width: 480px){
  .auth-art{padding:24px 16px}
  .auth-title-group h2{font-size:1.55rem}
  .auth-badge{font-size:.75rem}
  .sabaidee-interactive-btn{font-size:.92rem;padding:10px 14px}
  .consonant-chips{gap:6px}
  .consonant-chip{min-width:38px;padding:5px 7px}
  .consonant-chip .c-char{font-size:1.15rem}
  .demo-btn-group{grid-template-columns:1fr}
}


/* lesson & content */
.speaker{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.bd-role{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:800}
.bd-notes{flex-basis:100%;font-size:.88rem;color:var(--ink-2);display:flex;flex-direction:column;gap:4px;margin-top:4px}
.lock{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:var(--warn);background:var(--warn-2);border-radius:99px;padding:2px 9px}
.lock svg{width:var(--ic-2xs);height:var(--ic-2xs);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke-sm)}
.item-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%}
.item-row:last-child{border-bottom:0}
.item-row:hover{background:var(--surface-2)}
.item-row .ttl{font-weight:600}
.item-row .sub{font-size:.85rem;color:var(--ink-3)}
.list-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stepnum{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.82rem;background:var(--surface-2);color:var(--ink-2);flex:none}
.stepnum.done{background:var(--jade);color:#fff}
.obj{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vcard{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:1px;text-align:left}
.vcard:hover{background:var(--surface-2)}
.vcard .hz{font-size:1.35rem}
.vcard .m{font-size:.85rem;color:var(--ink-2)}
.skill{display:grid;grid-template-columns:9em minmax(0,1fr) 3em;gap:10px;align-items:center;font-size:.92rem}
.skill .bar i{background:var(--t1)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:.85rem;font-weight:600;background:var(--surface)}
.badge svg{width:var(--ic-md);height:var(--ic-md);stroke:var(--warn);fill:none;stroke-width:var(--ic-stroke)}
/* not earned yet: dashed and muted, but the text stays readable */
.badge.off{border-style:dashed;background:var(--surface-2);color:var(--ink-3)}
.badge.off svg{stroke:var(--ink-3);opacity:.6}
.rec{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;text-align:left;width:100%}

/* Theme Switcher Segmented Control */
.themesw{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:2px;gap:2px}
.themesw button{border:0;background:none;color:var(--ink-3);font-size:.78rem;font-weight:700;padding:4px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;transition:all .15s}
.themesw button svg{width:var(--ic-xs);height:var(--ic-xs);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke-sm)}
.themesw button:hover{color:var(--ink)}
.themesw button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Lao Handwriting & Canvas */
.hw-container{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.hw-canvas-wrap{position:relative;width:260px;height:260px;background:var(--surface-2);border:2px dashed var(--line-2);border-radius:14px;overflow:hidden;touch-action:none;user-select:none}
.hw-canvas-bg{position:absolute;inset:0;display:grid;place-items:center;font-size:160px;color:rgba(2,132,199,.15);pointer-events:none;font-family:var(--f-lo);font-weight:700}
.hw-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;z-index:2}
.hw-grid-lines{position:absolute;inset:0;pointer-events:none}
.hw-grid-lines::before{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px dashed var(--line);transform:translateY(-50%)}
.hw-grid-lines::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--line);transform:translateX(-50%)}
.hw-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* Video Feed */
.video-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.video-embed-wrap{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:14px 14px 0 0;overflow:hidden}
.video-embed-wrap iframe,.video-embed-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-info{padding:14px 16px;display:flex;flex-direction:column;gap:6px}

/* Audio Studio & Voice QC */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Feed & Promotional Banners */
.promo-card{background:linear-gradient(135deg, rgba(2,132,199,.08) 0%, rgba(56,189,248,.12) 100%);border:1px solid var(--line);border-radius:16px;padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.feed-item{border-bottom:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:4px}
.feed-item:last-child{border-bottom:0}

/* Excel Import Preview & Health Tables */
.xl-preview-table{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.health-meter{display:flex;align-items:center;gap:10px}
.health-meter .bar{flex:1;height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.health-meter .bar i{display:block;height:100%;border-radius:99px}

.rec:hover{background:var(--surface-2)}
.rec .qi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accent-2);color:var(--accent)}
.rec .qi svg{width:var(--ic-md);height:var(--ic-md);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke)}
.match .opt.sel{border-color:var(--t1);background:color-mix(in srgb,var(--t1) 12%,var(--surface))}
.notecard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.dl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.dl-row:first-child{border-top:0}

/* ===== Video lessons: library + video page (player · synced transcript · recap) ===== */
.vlib-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.vlib-tools .input{max-width:260px}
.vlib{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.vcard2{font:inherit;color:inherit;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);overflow:hidden;padding:0;display:flex;flex-direction:column;cursor:pointer;transition:transform .15s,box-shadow .15s}
.vcard2:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.vcard2:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.vthumb{position:relative;aspect-ratio:16/9;background:#0b1622}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb-ph{display:grid;place-items:center;height:100%;color:#fff}
.vthumb svg{width:var(--ic-display);height:var(--ic-display);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke)}
.vplay{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.62);display:grid;place-items:center;color:#fff;transition:background .15s}
.vplay svg{fill:currentColor;stroke:none;margin-left:3px}
.vcard2:hover .vplay{background:var(--accent)}
.vlevel{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.66);color:#fff;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px}
.vbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.vtitle{font-size:1.02rem;line-height:1.35}
.vdesc{margin:0;color:var(--ink-2);font-size:.86rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vmeta .chip svg{width:var(--ic-xs);height:var(--ic-xs);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke-sm)}

main:has(.vd){max-width:1320px}
.vd{display:flex;flex-direction:column;gap:14px}
.vd-head{display:flex;flex-direction:column;gap:6px}
.vd-back{align-self:flex-start;margin-left:-8px}
.vd-head h1{margin:0;font-size:1.4rem;line-height:1.3}
.vd-watch{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:16px;align-items:start}
.vd-stage{background:var(--bg);min-width:0}
.vd-stage .video-embed-wrap{border-radius:var(--r) var(--r) 0 0}
.vd-stage .video-embed-wrap:last-child{border-radius:var(--r)}
.vd-host,.vd-host>*{position:absolute;inset:0;width:100%;height:100%;border:0}
.vd-novideo{display:grid;place-items:center;color:#fff}
.vd-caption{background:#0b1622;color:#fff;border-radius:0 0 var(--r) var(--r);padding:10px 16px 12px;min-height:66px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.vd-cap-text{font-size:1.1rem;font-weight:600;line-height:1.4}
.vd-cap-text.lo{font-family:var(--f-lo);font-size:1.22rem}
.vd-cap-text.muted{opacity:.7;font-weight:500;font-size:.95rem}
.vd-cap-sub{font-size:.85rem;opacity:.8;margin-top:2px}
.vd-stage.no-en .vd-cap-sub{display:none}
/* wide screens: the transcript column takes the height of the player; its lines scroll inside it */
.vd-side{position:relative;align-self:stretch;min-height:320px}
.vd-side>.vd-transcript{position:absolute;inset:0;display:flex;flex-direction:column}
.vd-tabs{display:none}
.vd-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.vd-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.vd-panel-head h2{font-size:1.05rem;margin:0;display:flex;align-items:center;gap:8px}
.vd-panel-head h2>svg{width:var(--ic-md);height:var(--ic-md);fill:none;stroke:var(--accent);stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round}
.vd-nosync{flex-basis:100%;margin:0}
.vd-toggles{display:flex;flex-wrap:wrap;gap:4px 12px}
.vd-toggle{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-2);cursor:pointer}
.vd-toggle .switch{width:34px;height:20px}
.vd-toggle .switch::after{width:14px;height:14px}
.vd-toggle .switch:checked::after{transform:translateX(14px)}
.vd-lines-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.vd-lines{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding-right:4px}
.vd-line{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 10px;border-radius:10px;cursor:pointer;border-left:3px solid transparent;transition:background .15s}
.vd-line:hover{background:var(--surface-2)}
.vd-line:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vd-line.past .vd-text{color:var(--ink-3)}
.vd-line.on{background:var(--accent-2);border-left-color:var(--accent)}
.vd-line.on .vd-text{color:var(--ink);font-weight:600}
.vd-ts{font-size:.78rem;font-weight:700;line-height:1.9;color:var(--accent);font-variant-numeric:tabular-nums}
.vd-text{line-height:1.5}
.vd-text.lo{font-family:var(--f-lo);font-size:1.08rem}
.vd-sp{color:var(--accent);font-weight:700}
.vd-rom{font-size:.82rem;color:var(--ink-2);font-style:italic}
.vd-en{font-size:.85rem;color:var(--ink-3)}
.no-rom .vd-rom,.no-en .vd-en{display:none}
.vd-say-sm{width:30px;height:30px}
.vd-resume[hidden]{display:none}
.vd-resume{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);box-shadow:var(--shadow-lg);z-index:2;white-space:nowrap}
.vd-empty{padding:22px}
.vd-summary{margin:0 0 4px;line-height:1.65;max-width:75ch}
.vd-summary.lo{font-family:var(--f-lo)}
.vd-sub{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:16px 0 8px}
.vd-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.vd-point{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.vd-say{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;transition:transform .1s,background .15s}
.vd-say:hover{background:var(--accent-hover)}
.vd-say:active{transform:scale(.93)}
.vd-say svg{width:var(--ic-lg);height:var(--ic-lg);fill:none;stroke:currentColor;stroke-width:var(--ic-stroke);stroke-linecap:round;stroke-linejoin:round}
.vd-point-lo{font-size:1.12rem;font-weight:600;line-height:1.45}
.vd-jump{white-space:nowrap}
.vd-vocab{display:flex;flex-wrap:wrap;gap:8px}
/* tablets and narrow desktops: transcript under the player */
@media (max-width:1180px){
  .vd-watch{display:flex;flex-direction:column}
  .vd-side,.vd-side>.vd-transcript{position:static;min-height:0}
  .vd-lines{flex:none;max-height:300px}
}
/* phones: sticky full-width player, then Transcript | Recap tabs */
@media (max-width:700px){
  .vd-head h1{font-size:1.22rem}
  .vd-watch,.vd-side{display:contents}
  .vd-head{order:0} .vd-stage{order:1} .vd-tabs{order:2} .vd-transcript{order:3} .vd-recap{order:4}
  .vd-stage{position:sticky;top:var(--sticky-top,0px);z-index:15;margin-inline:-16px;width:calc(100% + 32px);transition:top .28s ease}
  .vd-stage .video-embed-wrap,.vd-stage .video-embed-wrap:last-child{border-radius:0}
  .vd-caption{border-radius:0;min-height:58px;padding:8px 14px}
  .vd-tabs{display:flex}
  .vd-tabs button{flex:1}
  .vd[data-tab="transcript"] .vd-recap,.vd[data-tab="recap"] .vd-transcript,.vd[data-tab="transcript"] .vd-more,.vd[data-tab="recap"] .vd-more,
  .vd[data-tab="more"] .vd-transcript,.vd[data-tab="more"] .vd-recap{display:none}
  .vd-more{order:5;min-height:calc(100vh - 56.25vw - 58px)}
  .vd-more-grid{grid-template-columns:1fr}
  /* each panel fills the screen under the player, so the player can always scroll to the top */
  .vd-side>.vd-transcript,.vd-recap{min-height:calc(100vh - 56.25vw - 58px)}
  .vd-panel{padding:12px}
  .vd-lines{flex:none;max-height:calc(100vh - 56.25vw - 210px);min-height:200px}
  .vd-points{grid-template-columns:1fr}
  .vd-line{grid-template-columns:40px minmax(0,1fr) auto;padding:8px 6px}
}

/* ===== Scoring: quiz results, XP, level, mastery ===== */
.stars{display:flex;justify-content:center;gap:6px;font-size:2rem;line-height:1;margin:6px 0 2px}
.stars span{color:var(--surface-3);transition:color .2s}
.stars span.on{color:#F59E0B;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.result .big small{font-size:1.1rem;font-weight:600}
.verdict{margin:4px 0 10px;font-weight:700}
.verdict.ok{color:var(--jade)}.verdict.no{color:var(--bad)}
.breakdown{max-width:320px;margin:0 auto;display:flex;flex-direction:column;gap:4px;text-align:left}
.breakdown .total{border-top:1px solid var(--line);padding-top:6px;margin-top:2px;font-size:1.02rem}
.xp-pill,.combo-pill{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:99px;font-size:.8rem;font-weight:700;vertical-align:middle}
.xp-pill{background:#FEF3C7;color:#92400E}
.combo-pill{background:var(--accent-2);color:var(--accent)}
.qprog i.skip{background:var(--line-2)}
.hw-canvas-bg.compare{opacity:.55;color:var(--jade)}
.xpcard{display:flex;flex-direction:column;gap:14px}
.xp-level{display:flex;align-items:center;gap:14px}
.xp-badge{flex:none;width:58px;height:58px;border-radius:16px;background:var(--accent-grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.xp-badge small{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;opacity:.9}
.xp-badge b{font-size:1.45rem;line-height:1}
.xp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.xp-main .bar i{background:var(--accent-grad)}
.xp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.xp-goal{display:flex;flex-direction:column;gap:6px}
.xp-goal svg,.xp-streak svg{width:var(--ic-sm);height:var(--ic-sm);fill:none;stroke:currentColor;stroke-width:var(--ic-stroke);vertical-align:-3px}
.bar.goal i{background:#F59E0B}
.xp-streak{display:flex;align-items:center;gap:6px;color:#EA580C}
.xp-streak b{font-size:1.2rem}
.xpcard.compact .xp-badge{width:48px;height:48px;border-radius:13px}
.skill.mastery{grid-template-columns:9em minmax(0,1fr) 9.5em}
.m-label{text-align:right;font-weight:600;color:var(--ink-3)}
.m-mastered .m-label{color:var(--jade)}.m-mastered .bar i{background:var(--jade)}
.m-strong .m-label{color:var(--t1)}
.m-practicing .m-label{color:var(--warn)}.m-practicing .bar i{background:var(--warn)}
.m-learning .m-label{color:var(--bad)}.m-learning .bar i{background:var(--bad)}
@media (max-width:600px){ .skill.mastery{grid-template-columns:7em minmax(0,1fr)} .skill.mastery .m-label{grid-column:1/-1;text-align:left;margin-top:-6px} }

/* ---------- plans & access: locked screens, limits, plan cards (js/learner/upgrade.js) ---------- */
.lockp{max-width:560px;margin:24px auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 22px}
.lockp-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--warn-2);color:var(--warn)}
.lockp-ic svg{width:var(--ic-display);height:var(--ic-display);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke)}
.lockp p{max-width:46ch}
.lockp-perks{text-align:left;background:var(--surface-2);border-radius:12px;padding:12px 16px;width:100%;max-width:420px}
.lockp-perks ul{margin-top:6px}
.lockp-act{justify-content:center;flex-wrap:wrap;margin-top:6px}
.dialog .lockp{margin:0;box-shadow:none;border:0;padding:8px 4px}
.navlock{margin-left:auto;display:inline-flex;color:var(--ink-3)}
.navlock svg{width:var(--ic-xs);height:var(--ic-xs);stroke:currentColor;fill:none;stroke-width:var(--ic-stroke-sm)}
.pcard b .navlock,.qs .navlock,.btn .navlock{margin-left:6px;vertical-align:-2px}
.locked-row{opacity:.65;cursor:pointer}
.locked-row:hover,.locked-row:focus-visible{opacity:.9}
.plan-card{display:flex;flex-direction:column;gap:8px}
.plan-card.current{border-color:var(--jade);box-shadow:0 0 0 1px var(--jade)}
.plan-price{font-size:1.05rem;font-weight:700;color:var(--accent)}
.upgrade-how{display:flex;flex-direction:column;gap:8px}
.pay-qr{width:180px;max-width:100%;height:auto;border-radius:12px;background:#fff;padding:8px}
.bar.full i{background:var(--warn)}

/* ---------- handwriting pad & activity (js/shared/handwriting/pad.js, js/learner/views-handwriting.js) ---------- */
.hwp{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin-inline:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.hwp-grid{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat}
.hwp-glyph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-lo);font-weight:700;line-height:1;color:var(--accent-2);pointer-events:none;transition:opacity .2s}
.hwp-layer{position:absolute;inset:0;width:100%;height:100%}
.hwp-ink{cursor:crosshair;touch-action:none}
.hwp.locked .hwp-ink{cursor:not-allowed}
.hwp-gif{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--surface);z-index:3}
.hw-act{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.hw-act{grid-template-columns:1fr}}
.hw-side{display:flex;flex-direction:column;gap:14px}
.hw-letter{display:flex;align-items:center;gap:14px}
.hw-letter .big{font-family:var(--f-lo);font-size:3rem;font-weight:700;line-height:1.1;color:var(--accent)}
.hw-steps{display:flex;gap:6px;flex-wrap:wrap}
.hw-steps span{min-width:28px;height:28px;border-radius:99px;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--surface-2);color:var(--ink-3)}
.hw-steps span.cur{background:var(--accent);color:var(--accent-ink)}
.hw-steps span.ok{background:var(--jade-2);color:var(--jade)}
.hw-steps span.bad{background:var(--bad-2);color:var(--bad)}
.hw-fb{min-height:48px;border-radius:12px;padding:10px 14px;font-weight:600;background:var(--surface-2)}
.hw-fb.ok{background:var(--jade-2);color:var(--jade)}
.hw-fb.error{background:var(--bad-2);color:var(--bad)}
.hw-fb.info{background:var(--accent-2);color:var(--accent)}
.hw-tools{display:flex;gap:8px;flex-wrap:wrap}
.hw-score{display:flex;align-items:baseline;gap:8px}
.hw-score b{font-size:2.4rem;line-height:1}
.hw-comp{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;font-size:.9rem}
.hw-comp .bar{height:6px}
.hw-pick{display:flex;gap:8px;flex-wrap:wrap}
.hw-pick button{min-width:52px;min-height:52px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font:700 1.5rem/1 var(--f-lo);color:var(--ink);position:relative}
.hw-pick button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-3)}
.hw-pick button .tick{position:absolute;top:3px;right:5px;font-size:.65rem;color:var(--jade)}
.hw-pick button.free{opacity:.75}
@media (max-width:860px){.hw-pick{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}.hw-pick button{flex:none;scroll-snap-align:start}}

/* ---------- icon contexts that previously had no size (docs/ICONS.md) ---------- */
.qs .qi .ic,.pcard .qi .ic{width:var(--ic-lg);height:var(--ic-lg)}            /* feature tiles: 20px inside a 40px tile */
.stepnum .ic{width:var(--ic-sm);height:var(--ic-sm)}                           /* lesson / path step circle */
.chip .ic,.pill .ic{width:var(--ic-xs);height:var(--ic-xs);stroke-width:var(--ic-stroke-sm)}
.small .ic,.muted .ic{width:var(--ic-sm);height:var(--ic-sm)}                 /* inline in small text */
h1 .ic,h2 .ic,h3 .ic,h4 .ic{width:var(--ic-md);height:var(--ic-md);vertical-align:-.15em}
.notice>.ic,.banner>.ic{width:var(--ic-md);height:var(--ic-md);margin-top:1px}
/* icon-only controls: comfortable touch targets without enlarging the icon */
.ib{min-width:var(--hit);min-height:var(--hit)}
.btn.sm.icon-only{padding:0;min-width:var(--hit);min-height:var(--hit)}
@media (pointer:coarse){
  .ib{width:var(--hit-touch);height:var(--hit-touch)}
  .btn.sm{min-height:40px}
  .btn.sm.icon-only{min-width:var(--hit-touch);min-height:var(--hit-touch)}
}
.pill>.ic:first-child{margin-right:4px}
:is(b,strong,th,h3,h4)>.ic:first-child{margin-right:6px}
.sabaidee-interactive-btn>.ic{width:var(--ic-lg);height:var(--ic-lg)}

/* ---------- plans, checkout, payment result, my plan (js/learner/views-billing.js) ---------- */
.lockp-price{margin:0;font-size:.95rem;color:var(--ink-2)}
.bill-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bill-cycle button{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.bill-save{font-size:.72rem;font-weight:700;color:var(--jade);background:var(--jade-2);border-radius:99px;padding:1px 7px}
.bill-from{justify-content:flex-start}
.bill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch}
.bill-plan{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:22px}
.bill-plan h2{font-size:1.2rem;margin:0}
.bill-plan.recommended{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-lg)}
.bill-plan.current{border-color:var(--jade);box-shadow:0 0 0 1px var(--jade)}
.bill-ribbon{position:absolute;top:-11px;left:16px;display:inline-flex;align-items:center;gap:5px;background:var(--accent-grad);color:var(--accent-ink);font-size:.74rem;font-weight:700;border-radius:99px;padding:3px 10px;box-shadow:0 4px 10px -4px var(--accent)}
.bill-ribbon .ic{width:var(--ic-2xs);height:var(--ic-2xs)}
.bill-price b{font-size:1.6rem;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bill-price span{color:var(--ink-3);font-size:.9rem}
.bill-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.bill-feats li{display:flex;gap:8px;align-items:flex-start}
.bill-feats .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--jade);margin-top:2px;flex:none}
.bill-act{margin-top:auto;padding-top:6px;display:flex}
.bill-act .btn,.bill-act .chip{width:100%;justify-content:center}
.bill-secure{display:flex;align-items:center;gap:6px;margin:0}
.bill-secure .ic{width:var(--ic-sm);height:var(--ic-sm);flex:none}

.bill-co{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.bill-side{position:sticky;top:76px}
.bill-methods{display:flex;flex-direction:column;gap:10px}
.bill-method{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;cursor:pointer;min-height:var(--hit-touch);transition:border-color .15s,box-shadow .15s,background .15s}
.bill-method:hover{background:var(--surface-2)}
.bill-method.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-3);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.bill-method.off{opacity:.55;cursor:not-allowed}
.bill-method input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.bill-mi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.bill-mt{display:flex;flex-direction:column;min-width:0}
.bill-ma{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bill-sum{display:flex;flex-direction:column;gap:8px}
.bill-sum p{margin:0}
.bill-sum-plan{font-size:1.05rem}
.bill-sum-amt{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.bill-pay{width:100%;min-height:48px;font-size:1rem}
.bill-msg{color:var(--bad);margin:0;min-height:1em}

.bill-result-wrap{display:flex;justify-content:center}
.bill-result{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 22px}
.bill-result h1{font-size:1.45rem;margin:4px 0 0}
.bill-result p{margin:0;max-width:44ch}
.bill-result .bill-kv{text-align:left;width:100%;max-width:380px;margin:6px 0;background:var(--surface-2);border-radius:12px;padding:12px 14px}
.bill-st{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff}
.bill-st .ic{width:var(--ic-hero);height:var(--ic-hero);stroke-width:2.4}
.bill-st.ok{background:var(--jade);box-shadow:0 10px 30px -8px var(--jade);animation:billPop .5s cubic-bezier(.2,1.6,.4,1)}
.bill-st.bad{background:var(--bad)}
.bill-st.warn{background:var(--warn)}
.bill-st.wait{background:var(--surface-2)}
.bill-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--accent);animation:billSpin .8s linear infinite}
.bill-burst{position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--jade);opacity:0;animation:billRing .9s .1s ease-out}
.bill-ra{justify-content:center;flex-wrap:wrap;margin-top:8px}
.bill-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
.bill-pill{display:inline-flex;align-items:center;border-radius:99px;padding:2px 10px;font-size:.78rem;font-weight:700;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.bill-pill.ok{background:var(--jade-2);color:var(--jade)}

.bill-current{gap:12px}
.bill-cur-name{font-size:1.5rem;margin:2px 0 0}
.bill-cur-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-2);color:var(--accent)}
.bill-cur-ic .ic{width:var(--ic-xl);height:var(--ic-xl)}
.bill-sched{justify-content:flex-start}
.bill-sched .btn{margin-left:auto}
.bill-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bill-table{width:100%;border-collapse:collapse;font-size:.92rem}
.bill-table th{text-align:left;font-size:.78rem;color:var(--ink-3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
.bill-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.bill-receipt{display:flex;flex-direction:column;gap:12px}

@keyframes billSpin{to{transform:rotate(360deg)}}
@keyframes billPop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes billRing{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
@media (max-width:760px){
  .bill-co{grid-template-columns:1fr}
  .bill-side{position:static;order:-1}
  .bill-method{grid-template-columns:auto auto minmax(0,1fr);row-gap:4px}
  .bill-ma{grid-column:3;text-align:left}
  .bill-table thead{display:none}
  .bill-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .bill-table td{border:0;padding:0}
  .bill-table td:nth-child(2){grid-column:1/-1;order:-1;font-weight:600}
  .bill-ra .btn{flex:1 1 100%}
  .bill-table .btn{min-height:40px;padding-inline:14px}
}

/* ---------- profile: avatar, top-bar button, menu (js/learner/main.js), account page ---------- */
.av{display:inline-grid;place-items:center;flex:none;border-radius:50%;object-fit:cover;font-weight:800;letter-spacing:.02em;color:#fff;user-select:none;
  background:linear-gradient(135deg,hsl(var(--av-h,200) 75% 58%),hsl(calc(var(--av-h,200) + 40) 70% 44%));box-shadow:0 0 0 2px var(--surface),0 2px 8px -2px rgba(0,0,0,.25)}
.av-sm{width:34px;height:34px;font-size:.8rem}
.av-md{width:44px;height:44px;font-size:1rem}
.av-lg{width:60px;height:60px;font-size:1.25rem}
.av-xl{width:96px;height:96px;font-size:2rem}
.topbar .toggles{margin-left:auto}
.pchip{display:inline-flex;align-items:center;gap:9px;flex:none;margin-left:4px;padding:3px 10px 3px 3px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:0 1px 2px rgba(10,27,46,.06);transition:border-color .2s,box-shadow .2s,transform .18s cubic-bezier(.2,.9,.3,1.2)}
.pchip:hover{border-color:var(--accent);box-shadow:0 4px 14px -6px var(--accent)}
.pchip:active{transform:scale(.97)}
.pchip[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-3)}
.pchip-t{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
.pchip-t b{font-size:.86rem;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchip-t small{font-size:.7rem;color:var(--ink-3);font-weight:600}
.pchip-c{width:var(--ic-sm);height:var(--ic-sm);color:var(--ink-3);transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
.pchip[aria-expanded="true"] .pchip-c{transform:rotate(180deg)}

.pmenu-scrim{position:fixed;inset:0;z-index:58;background:transparent;animation:fadeIn .2s ease both}
.pmenu{position:fixed;z-index:59;width:min(340px,calc(100vw - 16px));max-height:calc(100vh - 80px);overflow:auto;padding:10px;border-radius:18px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line);box-shadow:0 24px 60px -18px rgba(2,40,80,.35),0 2px 8px rgba(0,0,0,.06);
  transform-origin:top right;animation:pmIn .32s cubic-bezier(.2,1.25,.35,1) both}
.pmenu.out{animation:pmOut .18s ease-in both}
.pmenu>*{animation:pmItem .38s calc(var(--i,0) * 28ms + 40ms) cubic-bezier(.2,.9,.3,1) both}
.pmenu-head{display:flex;align-items:center;gap:14px;padding:10px 8px 14px}
.pmenu-av,.acc-av{position:relative;flex:none}
.pmenu-cam,.acc-cam{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--surface);
  background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
.pmenu-cam .ic,.acc-cam .ic{width:var(--ic-xs);height:var(--ic-xs)}
.pmenu-cam:hover,.acc-cam:hover{transform:scale(1.12)}
.pmenu-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.pmenu-id b{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmenu-id small{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmenu-id .chip{align-self:flex-start}
.pmenu-lbl{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 4px}
.pmenu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;min-height:44px;border-radius:12px;font-size:.92rem;font-weight:600}
.pmenu-sw{cursor:pointer}
.pmenu-sw:hover{background:var(--surface-2)}
.pmenu-seg button{min-width:40px;min-height:32px;display:inline-grid;place-items:center}
.pmenu-sep{height:1px;background:var(--line);margin:8px 6px}
.pmenu-link{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:12px;background:none;color:var(--ink);font-weight:600;font-size:.93rem;text-decoration:none;cursor:pointer;text-align:left;
  transition:background .18s,transform .18s cubic-bezier(.2,.9,.3,1.2)}
.pmenu-link span{flex:1}
.pmenu-link>.ic:first-child{color:var(--accent)}
.pmenu-link:hover{background:var(--surface-2)}
.pmenu-link:hover .pmenu-go{transform:translateX(3px)}
.pmenu-go{color:var(--ink-3);transition:transform .2s}
.pmenu-logout{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:10px;border:1.5px solid color-mix(in srgb,var(--bad) 45%,transparent);border-radius:14px;
  background:var(--bad-2);color:var(--bad);font-weight:800;font-size:.97rem;cursor:pointer;transition:background .2s,color .2s,box-shadow .25s,transform .18s cubic-bezier(.2,.9,.3,1.2)}
.pmenu-logout:hover{background:var(--bad);color:#fff;box-shadow:0 10px 24px -10px var(--bad)}
.pmenu-logout:active{transform:scale(.97)}

.acc-profile{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface) 60%)}
.acc-cam{width:34px;height:34px;right:-2px;bottom:-2px}
.acc-id{display:flex;flex-direction:column;gap:6px;min-width:0}
.acc-id h2{margin:0;font-size:1.45rem}
.acc-id p{margin:0}
.acc-out{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.acc-out h2{margin:0 0 4px;font-size:1.1rem}
.acc-out p{margin:0}
.acc-out-btn{min-height:46px;padding-inline:22px;font-weight:800;box-shadow:0 8px 20px -10px var(--bad)}
.acc-out-btn:hover{filter:brightness(1.08)}
body.leaving .app,body.leaving .tabbar,body.leaving .topbar{animation:appOut .26s ease-in both}

@media (max-width:900px){
  .topbar .toggles .tg,.topbar .langsw{display:none}           /* in the profile menu on phones */
  .pchip{margin-left:auto;padding-right:6px}
  .pchip-t{display:none}
}
@media (max-width:600px){
  .pmenu{top:auto!important;right:0!important;left:0;bottom:0;width:100%;max-height:85vh;border-radius:22px 22px 0 0;padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px));
    transform-origin:bottom center;animation-name:pmUp}
  .pmenu::before{content:"";display:block;width:42px;height:4px;border-radius:99px;background:var(--line-2);margin:4px auto 6px}
  .pmenu.out{animation-name:pmDown}
  .pmenu-scrim{background:rgba(6,14,24,.4)}
  .acc-out-btn{width:100%}
}

/* ---------- transitions (smooth motion everywhere; all of it is switched off with "reduce motion") ---------- */
/* page changes: View Transitions API (js/shared/ui.js withTransition) */
main#main{view-transition-name:page}
::view-transition-group(*){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.9,.25,1)}
::view-transition-old(page){animation:vtOut .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(page){animation:vtIn .42s cubic-bezier(.2,.9,.25,1) both}
html[data-vt="back"]::view-transition-old(page){animation-name:vtOutBack}
html[data-vt="back"]::view-transition-new(page){animation-name:vtInBack}
html[data-vt="fade"]::view-transition-old(page){animation:vtFade .2s ease reverse both}
html[data-vt="fade"]::view-transition-new(page){animation:vtFade .3s ease both}
/* active menu item and tab: a highlight that glides from the old item to the new one */
.nav-btn{position:relative;isolation:isolate}
.nav-btn[aria-current="page"]{background:none}
.nav-ind{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--accent-2);view-transition-name:nav-ind}
.tabbar button{position:relative;isolation:isolate}
.tab-ind{position:absolute;top:5px;left:50%;width:52px;height:30px;margin-left:-26px;z-index:-1;border-radius:99px;background:var(--accent-2);view-transition-name:tab-ind}
/* theme: the new colours spread in a circle from the button */
html[data-vt="theme"] main#main,html[data-vt="theme"] .nav-ind,html[data-vt="theme"] .tab-ind{view-transition-name:none}
html[data-vt="theme"]::view-transition-old(root){animation:none}
html[data-vt="theme"]::view-transition-new(root){animation:vtReveal .65s cubic-bezier(.4,0,.2,1) both}
/* without View Transitions: the new page fades up */
main.enter>*{animation:vtIn .38s cubic-bezier(.2,.9,.25,1) both}

/* dialogs, sheets, toasts */
.scrim{animation:fadeIn .22s ease both}
.scrim.out,.sheet-scrim.out{animation:fadeOut .18s ease both}
.dialog{animation:dlgIn .36s cubic-bezier(.2,1.2,.35,1) both}
.dialog.out{animation:dlgOut .16s ease-in both}
.discard-dlg .dc-ic{animation:dcPop .5s .08s cubic-bezier(.2,1.5,.4,1) both}
.discard-dlg .dc-ic .ic{animation:dcWiggle .7s .4s ease-in-out both}
.discard-dlg .dc-ring{animation:dcRing 1.8s .3s ease-out infinite}
.discard-dlg .dc h2,.discard-dlg .dc p,.discard-dlg .dialog-f{animation:dcUp .4s cubic-bezier(.2,.9,.25,1) both}
.discard-dlg .dc h2{animation-delay:.1s}.discard-dlg .dc p{animation-delay:.16s}.discard-dlg .dialog-f{animation-delay:.22s}
@keyframes dcPop{from{transform:scale(.4);opacity:0}}
@keyframes dcWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}55%{transform:rotate(10deg)}80%{transform:rotate(-4deg)}}
@keyframes dcRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@keyframes dcUp{from{opacity:0;transform:translateY(8px)}}
.sheet{animation:sheetIn .38s cubic-bezier(.2,.9,.25,1) both}
.sheet.out{animation:sheetOut .2s ease-in both}
.toast{animation:toastIn .34s cubic-bezier(.2,1.2,.35,1) both}
.toast.out{animation:toastOut .22s ease-in both}
.out{pointer-events:none}

/* small interactions */
.btn,.ib,.tg,.seg button,.langsw button,.chip,.qs,.pcard,.tabbar button,.item-row{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease,transform .2s cubic-bezier(.2,.9,.3,1.25),opacity .2s ease,filter .2s ease}
.btn:active,.ib:active,.tg:active,.seg button:active,.langsw button:active,.qs:active,.pcard:active,.tabbar button:active{transform:scale(.96)}
.btn.primary:hover{transform:translateY(-1px)}
.qs:hover,.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.tabbar button[aria-current="page"] .ic{animation:tabPop .45s cubic-bezier(.2,1.4,.4,1)}
.switch::after{transition:transform .25s cubic-bezier(.2,1.3,.4,1)}
.switch{transition:background .25s ease}
.bar i{transition:width .8s cubic-bezier(.2,.9,.25,1)}
.input,select.input,textarea.input{transition:border-color .2s ease,box-shadow .2s ease}
details>summary{transition:color .2s}
.card{transition:border-color .25s ease,box-shadow .3s ease}

@keyframes vtIn{from{opacity:0;transform:translateX(26px) scale(.995)}}
@keyframes vtOut{to{opacity:0;transform:translateX(-18px) scale(.995)}}
@keyframes vtInBack{from{opacity:0;transform:translateX(-26px) scale(.995)}}
@keyframes vtOutBack{to{opacity:0;transform:translateX(18px) scale(.995)}}
@keyframes vtFade{from{opacity:0}}
@keyframes vtReveal{from{clip-path:circle(0 at var(--vt-x,90%) var(--vt-y,40px))}to{clip-path:circle(150vmax at var(--vt-x,90%) var(--vt-y,40px))}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes dlgIn{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}
@keyframes dlgOut{to{opacity:0;transform:translate(-50%,-49%) scale(.97)}}
@keyframes sheetIn{from{transform:translateX(100%)}}
@keyframes sheetOut{to{transform:translateX(100%)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,10px)}}
@keyframes pmIn{from{opacity:0;transform:translateY(-8px) scale(.94)}}
@keyframes pmOut{to{opacity:0;transform:translateY(-6px) scale(.96)}}
@keyframes pmUp{from{transform:translateY(100%)}}
@keyframes pmDown{to{transform:translateY(100%)}}
@keyframes pmItem{from{opacity:0;transform:translateY(6px)}}
@keyframes tabPop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes appOut{to{opacity:0;transform:scale(.985)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ==========================================================================================
   Welcome page (js/learner/welcome.js), ported from docs/mockups/welcome-landing.html.
   Everything is scoped to .wl and prefixed wl-. The rules are not in a cascade layer on purpose: app.css is unlayered,
   and unlayered rules beat layered ones, so layering these would let the app's element rules (main, h1…) win.
   Keyframes live in @layer wl-motion. Theme: the app's data-theme day | night | system (Auto).
   ========================================================================================== */
.wl{
  --bg:#F3F8FD; --surface:#FFFFFF; --surface-2:#E6F0FA; --line:#D3E4F4;
  --ink:#0A1B2E; --ink-2:#28425C; --ink-3:#4A6685;
  --accent:#0270AC; --accent-hover:#025C8F; --accent-ink:#FFFFFF; --accent-soft:#E0F2FE;
  --gold:#F59E0B; --gold-ink:#8A3B0A; --gold-soft:#FEF3C7; --red:#CE1126; --red-ink:#B30F20; --good:#047857;
  --shadow:0 24px 50px -20px rgba(2,60,100,.35);
  --sky-0:#0C4A6E; --sky-1:#0369A1; --sky-2:#38BDF8; --sky-3:#FDE68A;
  --hill-far:#5AA9A0; --hill-near:#0F766E; --water-a:#0EA5E9; --water-b:#075985;
  --stupa:#FBBF24; --stupa-line:#B45309; --sun:#FDBA3B; --moon:#F1F5F9;
  --sun-y:0px; --moon-y:150px; --star-o:0; --sun-o:1; --fire-o:0; --mapboat-o:.55;
  --drift-bg:rgba(255,255,255,.92); --drift-glow:none; --drift-r:60% 0 60% 0;
  --sc-a:#BFE6FB; --sc-b:#FFF1C2; --sc-far:#8CC9BE; --sc-mid:#4FA38F; --sc-near:#237A5E; --sc-water:#4DB3E6; --sc-ground:#D9BE8E;
  --sc-karst-1:#A9C7C0; --sc-karst-2:#7FA79B; --sc-karst-3:#4C7F72; --sc-jar:#9AA3AD; --sc-jar-hi:#C4CAD1; --sc-stone:#CDBB96; --sc-lit-o:.35; --orb:#FBBF24;
  --map-land:#DCEBF8; --map-line:#9DBFE0; --map-river:#2E9BD6;
  --f-display:"Bricolage Grotesque","Source Sans 3",system-ui,sans-serif;
  --f-ui:"Source Sans 3","Noto Sans Lao",system-ui,sans-serif;
  --f-lo:"Noto Sans Lao","Phetsarath OT",sans-serif;
  --f-lo-display:"Noto Serif Lao","Noto Sans Lao",serif;
  background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-ui);min-block-size:100dvh;
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
  transition:background .6s,color .6s;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
:root[data-theme="night"] .wl,:root[data-theme="dark"] .wl{
  --bg:#070E1C; --surface:#0D1A2E; --surface-2:#13253F; --line:#1D3453; --ink:#F0F7FD; --ink-2:#A9C3DE; --ink-3:#8DABCB;
  --accent:#38BDF8; --accent-hover:#7DD3FC; --accent-ink:#061424; --accent-soft:#0E2A44;
  --gold:#FBBF24; --gold-ink:#FDE68A; --gold-soft:#33260A; --red:#F0455A; --red-ink:#FF8A98; --good:#34D399; --shadow:0 24px 50px -20px rgba(0,0,0,.7);
  --sky-0:#040913; --sky-1:#0A1730; --sky-2:#1B2A5E; --sky-3:#4A3A78; --hill-far:#1B2D55; --hill-near:#0A1730; --water-a:#13305E; --water-b:#08142B;
  --stupa:#FDE68A; --stupa-line:#F59E0B; --sun-y:150px; --moon-y:0px; --star-o:1; --sun-o:0; --fire-o:1; --mapboat-o:1;
  --drift-bg:#FDE68A; --drift-glow:0 0 10px 3px rgba(253,224,71,.65); --drift-r:50%;
  --sc-a:#0B1A3A; --sc-b:#2B2F6B; --sc-far:#1E2F57; --sc-mid:#14264A; --sc-near:#0B1730; --sc-water:#12356B; --sc-ground:#1B2440;
  --sc-karst-1:#26396B; --sc-karst-2:#1A2B55; --sc-karst-3:#101C3B; --sc-jar:#6B7480; --sc-jar-hi:#8C95A1; --sc-stone:#7C6F58; --sc-lit-o:1; --orb:#E2E8F0;
  --map-land:#13253F; --map-line:#2A4A73; --map-river:#38BDF8; color-scheme:dark}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"] .wl,:root[data-theme="auto"] .wl,:root:not([data-theme]) .wl{
  --bg:#070E1C; --surface:#0D1A2E; --surface-2:#13253F; --line:#1D3453; --ink:#F0F7FD; --ink-2:#A9C3DE; --ink-3:#8DABCB;
  --accent:#38BDF8; --accent-hover:#7DD3FC; --accent-ink:#061424; --accent-soft:#0E2A44;
  --gold:#FBBF24; --gold-ink:#FDE68A; --gold-soft:#33260A; --red:#F0455A; --red-ink:#FF8A98; --good:#34D399; --shadow:0 24px 50px -20px rgba(0,0,0,.7);
  --sky-0:#040913; --sky-1:#0A1730; --sky-2:#1B2A5E; --sky-3:#4A3A78; --hill-far:#1B2D55; --hill-near:#0A1730; --water-a:#13305E; --water-b:#08142B;
  --stupa:#FDE68A; --stupa-line:#F59E0B; --sun-y:150px; --moon-y:0px; --star-o:1; --sun-o:0; --fire-o:1; --mapboat-o:1;
  --drift-bg:#FDE68A; --drift-glow:0 0 10px 3px rgba(253,224,71,.65); --drift-r:50%;
  --sc-a:#0B1A3A; --sc-b:#2B2F6B; --sc-far:#1E2F57; --sc-mid:#14264A; --sc-near:#0B1730; --sc-water:#12356B; --sc-ground:#1B2440;
  --sc-karst-1:#26396B; --sc-karst-2:#1A2B55; --sc-karst-3:#101C3B; --sc-jar:#6B7480; --sc-jar-hi:#8C95A1; --sc-stone:#7C6F58; --sc-lit-o:1; --orb:#E2E8F0;
  --map-land:#13253F; --map-line:#2A4A73; --map-river:#38BDF8; color-scheme:dark}}
@property --wl-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

.wl *{box-sizing:border-box}
.wl [hidden]{display:none!important}
.wl :is(h1,h2,h3,h4,p,figure,ul){margin:0}
.wl ul{padding:0;list-style:none}
.wl button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.wl a{color:var(--accent)}
.wl svg{display:block}
.wl :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wl :is(h1,h2,h3){font-family:var(--f-display);text-wrap:balance;letter-spacing:-.015em}
.wl p{text-wrap:pretty}
.wl .wl-lo{font-family:var(--f-lo);letter-spacing:0}
.wl .ic{inline-size:18px;block-size:18px;flex:none}
.wl .wl-defs{position:absolute;inline-size:0;block-size:0;overflow:hidden}
.wl .wl-eyebrow{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.wl .wl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;padding:9px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  &:hover{border-color:var(--accent)}
  &.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);&:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}
  &.sm{min-block-size:40px;padding:5px 14px;font-size:.9rem}
  &[disabled]{opacity:.6;cursor:not-allowed}
  &:active{transform:scale(.97)}}
@media (hover:hover){.wl .wl-btn:not([disabled]):hover{transform:translateY(-1px)}.wl .wl-btn.primary:hover{box-shadow:0 8px 22px -8px var(--accent)}}
.wl .wl-chip{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:2px 10px;font-size:.76rem;font-weight:700;background:var(--accent-soft);color:var(--accent);&.gold{background:var(--gold-soft);color:var(--gold-ink)}}
.wl section{padding-block:clamp(36px,6vw,72px)}
.wl .wl-sec-h{display:flex;flex-direction:column;gap:8px;margin-block-end:28px;max-inline-size:62ch;
  h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.7rem);line-height:1.08;font-weight:800}
  p{color:var(--ink-2)}
  .wl-lo-sub{font:600 1.05rem var(--f-lo);color:var(--ink-3)}}
.wl .wl-skip{position:fixed;inset-block-start:-120px;inset-inline-start:8px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;transition:inset-block-start .2s;&:focus{inset-block-start:8px}}
.wl .wl-preview{position:sticky;inset-block-start:62px;z-index:29;display:flex;align-items:center;justify-content:center;gap:8px;margin-block:8px 0;padding:8px 14px;border-radius:12px;background:var(--gold-soft);color:var(--gold-ink);font-weight:700;font-size:.9rem;border:1px dashed var(--gold)}

/* ---------- nav ---------- */
.wl .wl-nav{container-type:inline-size;container-name:wlnav;position:sticky;inset-block-start:env(safe-area-inset-top,0px);z-index:30;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-block-end:1px solid var(--line);
  margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px))) calc(-1*max(16px,env(safe-area-inset-right,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
@supports not (background:color-mix(in srgb,red 50%,blue)){.wl .wl-nav{background:var(--bg)}}
.wl .wl-nav-in{max-inline-size:1180px;margin-inline:auto;display:flex;align-items:center;gap:12px;min-block-size:62px}
.wl .wl-brand{display:flex;align-items:center;gap:10px;font:800 1.2rem var(--f-display);color:var(--ink);background:none;border:0;padding:0;min-block-size:44px;text-align:start;
  svg,.wl-logo{inline-size:36px;block-size:36px;flex:none}
  small{display:block;font:500 .75rem var(--f-lo);color:var(--ink-3);line-height:1.1}}
.wl .wl-links{display:flex;gap:2px;margin-inline:auto;
  button{color:var(--ink-2);background:none;border:0;font-weight:600;font-size:.92rem;padding:8px 10px;border-radius:9px;min-block-size:40px;transition:background .2s,color .2s;
    &:hover,&[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}}}
.wl .wl-tools{display:flex;align-items:center;gap:8px}
.wl .wl-seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:2px;
  button{border:0;background:none;padding:4px 9px;border-radius:8px;font-size:.78rem;font-weight:700;color:var(--ink-2);display:grid;place-items:center;min-block-size:36px;min-inline-size:36px;
    &[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}}
  .ic{inline-size:16px;block-size:16px}}
.wl .wl-menu-btn{display:none;min-inline-size:44px;padding-inline:0}
.wl .wl-sheet{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 66px) 12px auto 12px;margin:0;max-block-size:calc(100dvh - 90px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);padding:8px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .2s,transform .2s,display .2s allow-discrete,overlay .2s allow-discrete;
  > button{display:flex;align-items:center;inline-size:100%;min-block-size:48px;padding:6px 12px;color:var(--ink);background:none;border:0;font-weight:600;border-radius:10px;text-align:start;&:hover{background:var(--accent-soft)}}
  .wl-seg{margin:6px 6px 4px}
  &:popover-open{opacity:1;transform:none;@starting-style{opacity:0;transform:translateY(-8px) scale(.98)}}}
@supports not selector(:popover-open){.wl .wl-sheet{display:none}.wl .wl-sheet.open{display:block;opacity:1;transform:none}}
@container wlnav (max-width:66rem){.wl .wl-links{display:none}.wl .wl-menu-btn{display:inline-flex}.wl .wl-tools{margin-inline-start:auto}}
@container wlnav (min-width:66.0625rem){.wl .wl-sheet{display:none!important}}
@container wlnav (max-width:33rem){.wl #wl-go-signin{display:none}.wl .wl-brand > span{display:none}}
@container wlnav (max-width:24.99rem){.wl .wl-nav-lang{display:none}}
@container wlnav (min-width:25rem){.wl .wl-sheet-lang{display:none}}

/* ---------- hero ---------- */
.wl .wl-main{display:block;max-inline-size:1180px;margin-inline:auto;padding:0;outline:none}
.wl .wl-offer-strips:empty{display:none}
.wl .wl-strip-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;justify-content:center;margin-block-start:12px;padding:10px 16px;border-radius:16px;background:var(--gold-soft);color:var(--gold-ink);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line))}
.wl .wl-hero{margin-block-start:16px;border-radius:30px;background:var(--sky-1);background:linear-gradient(180deg,var(--sky-0) 0%,var(--sky-1) 58%,var(--sky-2) 84%,var(--sky-3) 100%);color:#fff;position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(18px,3.5vw,44px) clamp(16px,4vw,56px) clamp(190px,21vw,250px);container-type:inline-size;container-name:wlhero}
@supports (background:linear-gradient(in oklch 180deg,red,blue)){.wl .wl-hero{background:linear-gradient(in oklch 180deg,var(--sky-0) 0%,var(--sky-1) 58%,var(--sky-2) 84%,var(--sky-3) 100%)}}
.wl .wl-hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,56px);align-items:start}
@container wlhero (max-width:55rem){.wl .wl-hero-grid{grid-template-columns:minmax(0,1fr)}}
@container wlhero (max-width:24rem){.wl .wl-hero h1 em{white-space:normal}}
.wl .wl-stars{position:absolute;inset:0 0 40% 0;z-index:0;opacity:var(--star-o);transition:opacity 1s;pointer-events:none;
  i{position:absolute;inline-size:var(--s);block-size:var(--s);border-radius:50%;background:#fff;animation:wl-twinkle 3s ease-in-out infinite;animation-delay:var(--d)}}
.wl .wl-drift{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  i{position:absolute;inset-block-start:0;inset-inline-start:var(--x);inline-size:var(--s);block-size:calc(var(--s)*1.5);background:var(--drift-bg);border-radius:var(--drift-r);box-shadow:var(--drift-glow);opacity:0;animation:wl-fall var(--t) linear infinite;animation-delay:var(--d)}}
.wl .wl-scene{position:absolute;inset-inline:0;inset-block-end:0;block-size:clamp(190px,21vw,250px);inline-size:100%;z-index:1}
.wl .wl-hero-copy{display:flex;flex-direction:column;gap:20px;min-inline-size:0}
.wl .wl-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 14px;border-radius:99px;font-size:.8rem;font-weight:700;
  i{inline-size:8px;block-size:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 #34D399;animation:wl-ping 2s infinite;flex:none}}
.wl .wl-hero h1{font-size:clamp(2.05rem,1.2rem + 3.8vw,3.9rem);line-height:1.06;font-weight:800;overflow-wrap:anywhere;color:#fff;
  .wl-lo-word{display:block;font-family:var(--f-lo-display);font-size:1.1em;line-height:1.3;margin-block-end:.1em;letter-spacing:0;color:#FBBF24;
    background:linear-gradient(100deg,#FBBF24 20%,#FFF7D6 45%,#FBBF24 70%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wl-shimmer 5s linear infinite}
  em{font-style:normal;white-space:nowrap;background:linear-gradient(90deg,#FBBF24,#F97316) no-repeat 0 100%/100% .14em;padding-block-end:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:wl-underline 1.1s .6s cubic-bezier(.2,.8,.2,1) both}}
.wl .wl-lead{font-size:1.1rem;color:rgba(255,255,255,.92);max-inline-size:46ch}
.wl .wl-hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.wl .wl-btn.gold{background:#FBBF24;border-color:#FBBF24;color:#3A2A08;font-weight:700;&:hover{background:#FDE68A;box-shadow:0 10px 26px -8px rgba(251,191,36,.7)}}
.wl .wl-btn.ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wl .wl-hear{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:8px 16px 8px 10px;text-align:start;inline-size:fit-content;max-inline-size:100%;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s;
  &:hover{background:rgba(255,255,255,.22)}
  b{font:700 1.15rem var(--f-lo);display:block}
  small{display:block;font-size:.8rem;color:rgba(255,255,255,.9)}
  .wl-nop{inline-size:46px;block-size:54px;flex:none;border-radius:12px;background:rgba(255,255,255,.12)}}
.wl .wl-bars{display:flex;align-items:flex-end;gap:3px;block-size:18px;span{inline-size:3.5px;block-size:5px;background:#fff;border-radius:2px}}

/* sign-in card */
.wl .wl-auth-wrap{position:relative;min-inline-size:0}
.wl .wl-bloom{animation:wl-bloomin 1.3s .3s cubic-bezier(.2,1.2,.3,1) both;position:absolute;z-index:4;inline-size:92px;block-size:92px;inset-block-start:-46px;inset-inline-end:-8px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));pointer-events:none;
  svg{inline-size:100%;block-size:100%;animation:wl-spin 48s linear infinite}}
.wl .wl-auth{position:relative;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3.5vw,32px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-inline-size:0;
  h2{font-size:1.5rem;font-weight:800}
  .wl-sub{color:var(--ink-3);font-size:.92rem;margin-block-start:-6px}}
@supports not (background:color-mix(in srgb,red 50%,blue)){.wl .wl-auth{background:var(--surface)}}
.wl .wl-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:12px;padding:3px;&.one{grid-template-columns:1fr}
  button{border:0;background:none;border-radius:10px;min-block-size:44px;padding:6px;font-weight:700;color:var(--ink-2);transition:background .2s,color .2s;
    &[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}}}
.wl .wl-field{display:flex;flex-direction:column;gap:5px;
  label{font-size:.84rem;font-weight:700;color:var(--ink-2)}
  &:has(.wl-input:user-invalid) label{color:var(--red-ink)}}
.wl .wl-input{inline-size:100%;min-block-size:46px;padding:9px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:max(16px,1rem);transition:border-color .2s,box-shadow .2s;
  &:focus{border-color:var(--accent);outline:0;box-shadow:0 0 0 4px var(--accent-soft)}
  &:user-invalid{border-color:var(--red)}}
.wl .wl-pw{position:relative;.wl-input{padding-inline-end:52px}}
.wl .wl-eye{position:absolute;inset-inline-end:3px;inset-block-start:50%;translate:0 -50%;inline-size:44px;block-size:44px;border:0;background:none;border-radius:10px;color:var(--ink-3);display:grid;place-items:center}
.wl .wl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wl .wl-linkbtn{border:0;background:none;padding:10px 0;color:var(--accent);font-weight:600;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;min-block-size:44px;display:inline-flex;align-items:center}
.wl .wl-msg{font-size:.9rem;border-radius:12px;padding:9px 12px;background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--ink);margin:0;transition:opacity .3s,transform .3s;@starting-style{opacity:0;transform:translateY(-6px)}
  &.ok{background:color-mix(in srgb,var(--good) 16%,var(--surface))}}
.wl .wl-closed{font-size:.88rem;color:var(--ink-2)}
.wl .wl-demo{border:1px dashed var(--line);border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.wl .wl-demo-h{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:700;color:var(--ink-3);flex-wrap:wrap;gap:6px}
.wl .wl-demo-b{display:flex;gap:8px;flex-wrap:wrap}
.wl .wl-perks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.86rem;color:var(--ink-2);li{display:flex;align-items:center;gap:6px}.ic{inline-size:15px;block-size:15px;color:var(--good)}}

/* ---------- ribbons, alphabet, stats ---------- */
.wl .wl-marquee{margin-block-start:18px;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--surface);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wl .wl-track{display:flex;gap:12px;inline-size:max-content;padding:12px 6px;animation:wl-marq 52s linear infinite}
.wl .wl-marquee:hover .wl-track{animation-play-state:paused}
.wl .wl-greet{display:flex;align-items:baseline;gap:10px;padding:6px 16px;border-radius:99px;background:var(--surface-2);white-space:nowrap;b{font:700 1.15rem var(--f-lo)}span{font-size:.86rem;color:var(--ink-2)}}
.wl .wl-silk{block-size:16px;margin-block:14px 0;border-radius:3px;background-repeat:repeat-x;background-size:40px 16px;animation:wl-silk 10s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16' shape-rendering='crispEdges'%3E%3Crect width='40' height='16' fill='%23CE1126'/%3E%3Cg fill='%23FBBF24'%3E%3Crect x='18' y='1' width='4' height='2'/%3E%3Crect x='14' y='3' width='12' height='2'/%3E%3Crect x='10' y='5' width='20' height='6'/%3E%3Crect x='14' y='11' width='12' height='2'/%3E%3Crect x='18' y='13' width='4' height='2'/%3E%3C/g%3E%3Cg fill='%230B2A6B'%3E%3Crect x='18' y='4' width='4' height='2'/%3E%3Crect x='14' y='6' width='12' height='4'/%3E%3Crect x='18' y='10' width='4' height='2'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='19' y='7' width='2' height='2'/%3E%3Crect x='0' y='7' width='2' height='2'/%3E%3Crect x='38' y='7' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E")}
.wl .wl-alpha{display:flex;gap:14px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 20px;margin-block-start:18px}
.wl .wl-chip-note{font-size:.92rem;color:var(--ink-2);min-block-size:22px;margin-block-start:4px;b{color:var(--accent)}}
.wl .wl-chips{display:flex;flex-wrap:wrap;gap:7px;
  button{display:flex;flex-direction:column;align-items:center;min-inline-size:48px;min-block-size:48px;padding:6px 7px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);transition:transform .2s,background .2s;
    b{font:700 1.3rem/1 var(--f-lo)}small{font-size:.75rem;margin-block-start:3px}
    &[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}}}
@media (hover:hover){.wl .wl-chips button:hover{transform:translateY(-3px) scale(1.06)}}
.wl .wl-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px 12px;padding-block:24px;
  div{display:flex;flex-direction:column;gap:2px;padding-inline-start:14px;border-inline-start:3px solid var(--gold)}
  b{font:800 1.7rem var(--f-display);font-variant-numeric:tabular-nums}
  span{font-size:.88rem;color:var(--ink-2)}}

/* ---------- journey through Laos ---------- */
.wl .wl-journey{container-type:inline-size;container-name:wljourney}
.wl .wl-j-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@container wljourney (min-width:48.75rem){.wl .wl-j-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:28px}.wl .wl-j-map{position:sticky;inset-block-start:84px}}
.wl .wl-j-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:16px;
  button{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.92rem;color:var(--ink-2);transition:background .2s,border-color .2s,color .2s;
    &[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
    .wl-lo{font-size:.98rem}}}
.wl .wl-j-map{max-inline-size:460px;inline-size:100%;margin-inline:auto}
.wl .wl-map-cap{margin-block-start:10px;text-align:center}
.wl .wl-map{position:relative;aspect-ratio:740/880;container-type:inline-size;
  .wl-map-svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
  .wl-land{fill:var(--map-land);stroke:var(--map-line);stroke-width:3;stroke-linejoin:round}
  .wl-river{fill:none;stroke:var(--map-river);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
  .wl-nb{font:700 22px var(--f-ui);letter-spacing:.2em;fill:var(--ink-3);opacity:.8}
  .wl-fb{offset-path:var(--river);offset-rotate:0deg;opacity:var(--mapboat-o)}}
@supports not (offset-path:path("M0 0")){.wl .wl-fbs{display:none}}
.wl .wl-pin{position:absolute;inset-inline-start:var(--x);inset-block-start:var(--y);translate:-50% -50%;inline-size:44px;block-size:44px;border-radius:50%;border:0;background:none;padding:0;display:grid;place-items:center;
  &::before{content:"";inline-size:18px;block-size:18px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .25s,background .25s}
  &[data-on="true"]::before{background:var(--gold);transform:scale(1.3)}
  &[data-on="true"]::after{content:"";position:absolute;inline-size:18px;block-size:18px;border-radius:50%;border:2px solid var(--gold);animation:wl-ring 1.8s ease-out infinite}
  span{position:absolute;inset-inline-start:calc(50% + 14px);inset-block-start:50%;translate:0 -50%;white-space:nowrap;font:700 .8rem var(--f-lo);color:var(--ink);background:color-mix(in srgb,var(--surface) 88%,transparent);padding:1px 7px;border-radius:99px;border:1px solid var(--line);display:none}}
.wl .wl-pin.left span{inset-inline-start:auto;inset-inline-end:calc(50% + 14px)}
@container (min-width:18.75rem){.wl .wl-pin span{display:block}}
.wl .wl-j-panel{background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.wl .wl-stage{position:relative;aspect-ratio:400/260;background:var(--sc-a);overflow:hidden;
  .wl-scn{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transition:opacity .6s;@starting-style{opacity:0}}}
.wl .wl-stage-badge{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:2}
.wl .wl-j-body{padding:clamp(16px,3vw,26px);display:flex;flex-direction:column;gap:12px;
  h3{font-size:clamp(1.35rem,1rem + 1.2vw,1.8rem);font-weight:800;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .wl-lo-t{font:700 1.2em var(--f-lo-display);color:var(--accent)}
  p{color:var(--ink-2);max-inline-size:60ch}}
.wl .wl-j-facts{display:flex;flex-wrap:wrap;gap:8px}
.wl .wl-j-words{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:4px}
.wl .wl-word{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:8px 8px 8px 16px;
  b{font:700 1.3rem var(--f-lo);display:block;line-height:1.3}
  small{display:block;color:var(--ink-2);font-size:.84rem}
  .wl-btn{min-inline-size:44px;min-block-size:44px;padding-inline:12px}}

/* festival calendar */
.wl .wl-fest-wrap{container-type:inline-size;container-name:wlfest;padding-block-start:8px}
.wl .wl-fest-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-block-end:14px;h2{font-size:1.4rem;font-weight:800;margin-block-start:4px}p{color:var(--ink-2);font-size:.92rem}}
.wl .wl-fest{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,290px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-block:6px 14px;
  margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));scrollbar-width:thin;scrollbar-color:var(--line) transparent}
@container wlfest (min-width:72rem){.wl .wl-fest{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0}}
.wl .wl-fcard{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:6px;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s;
  &[data-now="true"]{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%,transparent)}
  svg{inline-size:100%;block-size:auto;aspect-ratio:96/72;background:var(--sc-a);border-radius:14px}
  .wl-mo{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
  h3{font:800 1.02rem var(--f-display)}
  .wl-lo-t{font:700 1rem var(--f-lo-display);color:var(--accent)}
  p{font-size:.86rem;color:var(--ink-2)}
  .wl-now{position:absolute;inset-block-start:22px;inset-inline-end:22px;z-index:2}
  .wl-lunar{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--ink-3);margin-block-start:auto;.ic{inline-size:13px;block-size:13px}}}
@media (hover:hover){.wl .wl-fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}}

/* services */
.wl .wl-bento-wrap{container-type:inline-size;container-name:wlbento}
.wl .wl-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
.wl .wl-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;min-inline-size:0;transition:transform .3s,box-shadow .3s,border-color .3s;
  h3{font-size:1.15rem}p{color:var(--ink-2);font-size:.94rem}}
@media (hover:hover){.wl .wl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}}
.wl .wl-tile{inline-size:42px;block-size:42px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;.ic{inline-size:20px;block-size:20px}}
.wl .wl-b-big{grid-column:span 3;grid-row:span 2}.wl .wl-b-mid{grid-column:span 3}.wl .wl-b-sm{grid-column:span 2}
@container wlbento (max-width:51.25rem){.wl .wl-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.wl .wl-b-big,.wl .wl-b-mid{grid-column:span 2;grid-row:auto}.wl .wl-b-sm{grid-column:span 1}}
@container wlbento (max-width:32.5rem){.wl .wl-bento{grid-template-columns:minmax(0,1fr)}.wl .wl-b-sm,.wl .wl-b-big,.wl .wl-b-mid{grid-column:span 1}}
.wl .wl-pattern{margin-block-start:auto;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.wl .wl-p-lao{font-size:1.3rem;font-weight:700}
.wl .wl-p-tr{color:var(--ink-2);font-size:.94rem}
.wl .wl-words{display:flex;flex-wrap:wrap;gap:8px;
  button{border:1px solid var(--line);background:var(--surface);border-radius:12px;min-block-size:48px;padding:6px 12px;text-align:center;line-height:1.2;transition:transform .2s,border-color .2s;
    b{display:block;font:700 1.15rem var(--f-lo)}small{font-size:.78rem;color:var(--ink-2)}
    &.sel{border-color:var(--accent);background:var(--accent-soft)}}}
.wl .wl-lock{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:700;color:var(--gold-ink);background:var(--gold-soft);border-radius:99px;padding:2px 8px;inline-size:fit-content;.ic{inline-size:12px;block-size:12px}}

/* resources */
.wl .wl-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;.wl-card{gap:12px}.wl-btn{margin-block-start:auto}}
.wl .wl-cover{block-size:132px;border-radius:14px;display:grid;place-items:center;font:700 3.2rem var(--f-lo-display);color:#fff;position:relative;overflow:hidden;
  &::after{content:"";position:absolute;inset:auto 0 0 0;block-size:8px;background-size:28px 8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Crect width='28' height='14' fill='%23CE1126'/%3E%3Cpath d='M14 1 L21 7 L14 13 L7 7Z' fill='%23FBBF24'/%3E%3C/svg%3E")}
  &.c1{background:linear-gradient(140deg,#0270AC,#075985)}&.c2{background:linear-gradient(140deg,#B45309,#7C2D12)}&.c3{background:linear-gradient(140deg,#0E7490,#164E63)}&.c4{background:linear-gradient(140deg,#6D5BD0,#312E81)}
  .wl-chip{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:rgba(255,255,255,.94);color:#0A1B2E;font-family:var(--f-ui)}}
.wl .wl-empty{color:var(--ink-2);background:var(--surface);border:1px dashed var(--line);border-radius:18px;padding:20px;text-align:center}

/* promotions and plans */
.wl .wl-promo{background:var(--gold-soft);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,4vw,34px);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-block-end:18px;position:relative;overflow:hidden;
  &::after{content:"";position:absolute;inset-inline-end:-30px;inset-block-start:-30px;inline-size:150px;block-size:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 35%,transparent),transparent 70%);animation:wl-glow 4s ease-in-out infinite}
  >*{position:relative;z-index:1}
  > div:first-child{display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-inline-size:60ch}
  h3{font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem)}p{color:var(--ink-2)}}
@supports (background:linear-gradient(in oklch 120deg,red,blue)){.wl .wl-promo{background:linear-gradient(in oklch 120deg,var(--gold-soft),var(--accent-soft))}}
.wl .wl-count{display:flex;gap:8px;div{background:var(--surface);border:1px solid var(--line);border-radius:14px;min-inline-size:60px;padding:8px 6px;text-align:center}b{display:block;font:800 1.4rem var(--f-display);font-variant-numeric:tabular-nums}small{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}}
.wl .wl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.wl .wl-plan{position:relative;
  &.feat{border:2px solid var(--gold);box-shadow:var(--shadow)}
  .wl-tag{position:absolute;inset-block-start:-12px;inset-inline-end:16px}
  ul{display:flex;flex-direction:column;gap:7px;font-size:.94rem;color:var(--ink-2)}
  li{display:flex;gap:8px;align-items:flex-start}li .ic{inline-size:16px;block-size:16px;color:var(--good);margin-block-start:3px}
  .wl-btn{margin-block-start:auto}}
@supports (background:conic-gradient(from var(--wl-ang),red,blue)){
  .wl .wl-plan.feat{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--wl-ang),var(--gold),var(--accent),var(--red),var(--gold)) border-box;animation:wl-ang 7s linear infinite}}
.wl .wl-price{font:800 2.4rem var(--f-display);font-variant-numeric:tabular-nums;line-height:1;small{font:600 .9rem var(--f-ui);color:var(--ink-2)}}

/* news, about, closing, footer */
.wl .wl-news{container-type:inline-size;container-name:wlnews;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.wl .wl-news>*,.wl .wl-news-l{min-inline-size:0}
.wl .wl-news-l{display:flex;flex-direction:column;gap:14px}
.wl .wl-story{display:flex;flex-direction:row;gap:16px;align-items:stretch;overflow-wrap:anywhere;
  .wl-thumb{inline-size:112px;flex:none;border-radius:14px;display:grid;place-items:center;font:700 2.2rem var(--f-lo-display);color:#fff;min-block-size:96px}
  .wl-thumb.g1{background:linear-gradient(140deg,#0270AC,#0C4A6E)}.wl-thumb.g2{background:linear-gradient(140deg,#B45309,#7C2D12)}.wl-thumb.g3{background:linear-gradient(140deg,#0E7490,#164E63)}.wl-thumb.g4{background:linear-gradient(140deg,#6D5BD0,#312E81)}
  .wl-tx{display:flex;flex-direction:column;gap:6px;min-inline-size:0}
  .wl-meta{font-size:.8rem;color:var(--ink-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap;.ic{inline-size:14px;block-size:14px}}
  .wl-meta > span:last-child{display:inline-flex;align-items:center;gap:4px}
  h3{font-size:1.08rem}.wl-lo-t{font:600 .92rem var(--f-lo);color:var(--ink-2)}
  &.lead{flex-direction:column;.wl-thumb{inline-size:100%;block-size:180px;font-size:4.2rem}h3{font-size:1.35rem}}}
@container wlnews (max-width:34rem){.wl .wl-story:not(.lead){flex-direction:column;.wl-thumb{inline-size:100%;block-size:96px}}}
.wl .wl-about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,4vw,48px);align-items:center;
  h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.7rem);line-height:1.08;margin-block:8px 0;font-weight:800}
  p{color:var(--ink-2);margin-block-start:12px}
  ul{margin-block-start:14px;display:flex;flex-direction:column;gap:9px}li{display:flex;gap:10px;color:var(--ink-2)}li .ic{color:var(--accent);margin-block-start:3px}}
.wl .wl-about-art{border-radius:26px;background:var(--surface-2);border:1px solid var(--line);aspect-ratio:1.15/1;max-inline-size:100%;display:grid;place-items:center;position:relative;overflow:hidden;
  svg{inline-size:56%;block-size:auto;animation:wl-spin 60s linear infinite}
  .wl-tagline{position:absolute;inset-inline:16px;inset-block-end:14px;text-align:center;font:600 .95rem var(--f-lo-display);color:var(--ink-2)}}
.wl .wl-closing{border-radius:26px;background:var(--sky-1);color:#fff;padding:clamp(24px,5vw,52px);display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-block-start:18px;
  h2{font-size:clamp(1.55rem,1.1rem + 2vw,2.4rem);max-inline-size:22ch;font-weight:800;color:#fff}}
@supports (background:linear-gradient(in oklch 150deg,red,blue)){.wl .wl-closing{background:linear-gradient(in oklch 150deg,var(--sky-1),var(--sky-0))}}
.wl .wl-flagbar{block-size:6px;border-radius:99px;margin-block-start:26px;background:linear-gradient(90deg,var(--red) 0 25%,#0B2A6B 25% 75%,var(--red) 75%)}
.wl .wl-footer{max-inline-size:1180px;margin-inline:auto;padding-block:34px calc(40px + env(safe-area-inset-bottom,0px));color:var(--ink-2);font-size:.9rem;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  nav{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center}
  a,.wl-linkbtn{color:var(--ink-2);display:inline-flex;min-block-size:44px;align-items:center;font-size:.9rem;font-weight:500}}

/* ---------- scene art (themed by the tokens above) ---------- */
.wl .wl-px{transition:transform .25s ease-out}
.wl .wl-l-far{transform:translateX(calc(var(--px,0)*-6px))}
.wl .wl-l-mid{transform:translateX(calc(var(--px,0)*-12px))}
.wl .wl-l-near{transform:translateX(calc(var(--px,0)*-20px))}
.wl .wl-orb{transition:transform 1.4s cubic-bezier(.5,0,.2,1),opacity 1.2s}
.wl .wl-sun-g{transform:translateY(var(--sun-y));opacity:var(--sun-o)}
.wl .wl-moon-g{transform:translateY(var(--moon-y));opacity:calc(1 - var(--sun-o))}
.wl .wl-stupa{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--stupa) 55%,transparent))}
.wl .wl-fires{opacity:var(--fire-o);transition:opacity 1s}
.wl .wl-fire{animation:wl-floatby var(--t) ease-in-out infinite alternate;animation-delay:var(--d)}
.wl .wl-fire .wl-flick{transform-box:fill-box;transform-origin:50% 100%;animation:wl-flicker .9s ease-in-out infinite alternate}
.wl .wl-lit{opacity:var(--sc-lit-o);transition:opacity 1s}
.wl .wl-sun-rise{animation:wl-rise 14s ease-in-out infinite alternate}
.wl .wl-monk{animation:wl-bob 1.05s ease-in-out infinite;animation-delay:var(--d)}
.wl .wl-mist{animation:wl-mist 26s ease-in-out infinite alternate}
.wl .wl-mist.b{animation-duration:34s;animation-direction:alternate-reverse}
.wl .wl-balloon{animation:wl-balloon 46s linear infinite}
.wl .wl-balloon .wl-bb{animation:wl-bobby 4s ease-in-out infinite}
.wl .wl-flame-c{transform-box:fill-box;transform-origin:50% 100%;animation:wl-flicker .7s ease-in-out infinite alternate;animation-delay:var(--d)}
.wl .wl-petalfall{animation:wl-petalfall var(--t) linear infinite;animation-delay:var(--d);transform-box:fill-box;transform-origin:center}
.wl .wl-cascade{stroke-dasharray:6 8;animation:wl-dash 1s linear infinite}
.wl .wl-longtail{animation:wl-cross2 22s linear infinite}
.wl .wl-wake{animation:wl-wake 1.6s ease-out infinite}
.wl .wl-ripple{stroke-dasharray:10 14;animation:wl-dash 3s linear infinite}
.wl .wl-waves{animation:wl-slide 7s linear infinite;&.b{animation-duration:11s;animation-direction:reverse}}
.wl .wl-skiff{animation:wl-cross 70s linear infinite}
.wl .wl-skiff .wl-bob{animation:wl-bobby 3s ease-in-out infinite}
.wl .wl-nop-arm{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.wl .wl-nop-arm.l{transform-origin:15px 34px}.wl .wl-nop-arm.r{transform-origin:33px 34px}
.wl .wl-nop-head{transition:transform .5s;transform-origin:24px 18px}
.wl .wl-hear.playing{
  .wl-nop-arm.l{transform:rotate(-134deg)}.wl-nop-arm.r{transform:rotate(134deg)}
  .wl-nop-head{transform:rotate(9deg)}
  .wl-bars span{animation:wl-eq .7s infinite ease-in-out;&:nth-child(2){animation-delay:.15s}&:nth-child(3){animation-delay:.3s}&:nth-child(4){animation-delay:.1s}}}
.wl .wl-drop{animation:wl-splash 1.8s ease-out infinite;animation-delay:var(--d);transform-box:fill-box}
.wl .wl-rocket{animation:wl-rocket 3.4s ease-in infinite}
.wl .wl-smoke{animation:wl-smoke 3.4s ease-out infinite;animation-delay:var(--d);transform-box:fill-box;transform-origin:center}
.wl .wl-boatbob{animation:wl-bobby 2.6s ease-in-out infinite}
.wl .wl-cand{animation:wl-flicker .8s ease-in-out infinite alternate;animation-delay:var(--d);transform-box:fill-box;transform-origin:50% 100%}
.wl .wl-fb{animation:wl-floatriver 120s linear infinite}
.wl[data-off] *,.wl [data-off] *{animation-play-state:paused!important}

@layer wl-motion{
  @keyframes wl-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
  @keyframes wl-fall{0%{transform:translate(0,10px) rotate(0);opacity:0}12%{opacity:.9}50%{transform:translate(40px,48%) rotate(160deg)}90%{opacity:.7}100%{transform:translate(-30px,105%) rotate(320deg);opacity:0}}
  @keyframes wl-ping{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
  @keyframes wl-shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
  @keyframes wl-underline{from{background-size:0% .14em}to{background-size:100% .14em}}
  @keyframes wl-eq{0%,100%{block-size:4px}50%{block-size:18px}}
  @keyframes wl-spin{to{transform:rotate(360deg)}}
  @keyframes wl-marq{to{transform:translateX(-50%)}}
  @keyframes wl-silk{to{background-position-x:-40px}}
  @keyframes wl-glow{50%{transform:scale(1.25)}}
  @keyframes wl-ang{to{--wl-ang:360deg}}
  @keyframes wl-ring{from{transform:scale(1);opacity:.9}to{transform:scale(3);opacity:0}}
  @keyframes wl-slide{to{transform:translateX(-60px)}}
  @keyframes wl-floatriver{from{offset-distance:0%}to{offset-distance:100%}}
  @keyframes wl-bloomin{from{transform:scale(0) rotate(-120deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes wl-cross{from{transform:translateX(-120px)}to{transform:translateX(1320px)}}
  @keyframes wl-bobby{50%{transform:translateY(2px) rotate(1deg)}}
  @keyframes wl-floatby{from{transform:translateX(0)}to{transform:translateX(-90px)}}
  @keyframes wl-flicker{from{transform:scale(1,1)}to{transform:scale(.82,1.22)}}
  @keyframes wl-rise{from{transform:translateY(22px)}to{transform:translateY(-8px)}}
  @keyframes wl-bob{50%{transform:translateY(-3px)}}
  @keyframes wl-mist{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
  @keyframes wl-balloon{from{transform:translateX(-60px)}to{transform:translateX(470px)}}
  @keyframes wl-petalfall{0%{transform:translate(0,-20px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),250px) rotate(300deg);opacity:0}}
  @keyframes wl-dash{to{stroke-dashoffset:-28}}
  @keyframes wl-cross2{from{transform:translateX(-90px)}to{transform:translateX(460px)}}
  @keyframes wl-wake{from{transform:scaleX(.4);opacity:.9}to{transform:scaleX(1.5);opacity:0}}
  @keyframes wl-splash{0%{transform:translate(0,0);opacity:0}15%{opacity:1}50%{transform:translate(calc(var(--dx)*.6),-24px)}100%{transform:translate(var(--dx),4px);opacity:0}}
  @keyframes wl-rocket{0%{transform:translate(0,0)}70%{transform:translate(28px,-46px);opacity:1}100%{transform:translate(34px,-56px);opacity:0}}
  @keyframes wl-smoke{0%{transform:scale(.3);opacity:.8}100%{transform:scale(1.6);opacity:0}}
  @keyframes wl-par1{to{transform:translateY(10px)}}@keyframes wl-par2{to{transform:translateY(22px)}}@keyframes wl-par3{to{transform:translateY(38px)}}
  @keyframes wl-draw{to{stroke-dashoffset:0}}
  @keyframes wl-rv{from{transform:translateY(26px)}to{transform:none}}
}
/* scroll-driven: hero parallax, the river drawing itself in, sections rising into view */
@supports (animation-timeline:view()){
  .wl .wl-sp-1{animation:wl-par1 linear both;animation-timeline:scroll(root);animation-range:0 600px}
  .wl .wl-sp-2{animation:wl-par2 linear both;animation-timeline:scroll(root);animation-range:0 600px}
  .wl .wl-sp-3{animation:wl-par3 linear both;animation-timeline:scroll(root);animation-range:0 600px}
  .wl .wl-river{stroke-dasharray:1;stroke-dashoffset:.35;animation:wl-draw linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .wl .wl-rv{animation:wl-rv linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@media (prefers-reduced-motion:reduce){.wl .wl-river{stroke-dashoffset:0}.wl *,.wl *::before,.wl *::after{animation:none!important;transition-duration:.01ms!important}}
@media (prefers-contrast:more){.wl{--line:currentColor}.wl .wl-card,.wl .wl-fcard,.wl .wl-j-panel{border-width:2px}}
@media (forced-colors:active){.wl .wl-btn,.wl .wl-input,.wl .wl-fcard,.wl .wl-card{border:1px solid CanvasText}.wl .wl-pin::before{background:Highlight}}
@media (pointer:coarse){.wl :is(.wl-chips button,.wl-words button,.wl-seg button,.wl-btn.sm,.wl-tabs button,.wl-linkbtn,.wl-menu-btn,.wl-sheet > button,.wl-brand,.wl-links button){min-block-size:44px;min-inline-size:44px}}
@media (orientation:landscape) and (max-height:520px){.wl .wl-hero{padding-block-end:clamp(120px,24vw,200px)}.wl .wl-scene{block-size:150px}}

/* ---------- one design system: the learner app and the admin share these tokens, type and components ---------- */
/* titles and big numbers in the display face (Lao and Chinese fall back to their own fonts) */
main h1,.pagehead h1,.brand b,.mbrand b,.stat b,.kpi b,.kpi-t b,.aa-head h1{font-family:var(--f-display);letter-spacing:-.02em}
main h1{font-weight:800;line-height:1.15}
.pagehead h1,.hero-greet h1{font-size:clamp(1.55rem,2.4vw,2rem)}
.pagehead .eyebrow,.hero-greet .eyebrow{color:var(--accent)}
:lang(lo) main h1,main h1:lang(lo),:lang(lo) .pagehead h1{font-family:var(--f-lo);letter-spacing:0}
/* one surface style for cards, panels, stat tiles and tables */
.card,.panel,.kpi,.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.panel>h3,.card>h2:first-child,.card>h3:first-child{font-size:1.05rem;font-weight:700;color:var(--ink)}
/* stat cards with an icon tile (admin dashboard; same look as the learner tiles) */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.kpi-card{display:flex;align-items:center;gap:12px;padding:14px 16px;transition:transform .2s cubic-bezier(.2,.9,.3,1.25),box-shadow .25s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;flex:none}
.kpi-ic .ic{width:var(--ic-lg);height:var(--ic-lg)}
.kpi-t{min-width:0}
.kpi-t b{display:block;font-size:1.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.kpi-t span{display:block;margin-top:4px;font-size:.85rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat b,.kpi b{font-weight:800}
.tone-accent{background:var(--accent-2);color:var(--accent)}
.tone-jade{background:var(--jade-2);color:var(--jade)}
.tone-warn{background:var(--warn-2);color:var(--warn)}
.tone-bad{background:var(--bad-2);color:var(--bad)}
.tone-violet{background:var(--violet-2);color:var(--violet)}
.tone-neutral{background:var(--surface-2);color:var(--ink-3)}
@media (max-width:600px){.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* buttons on a coloured background: white text by day, dark text at night (the night colours are light) */
.btn.danger,.btn.jade{color:var(--accent-ink)}
/* small text-style buttons and the Tone Lab example rows (they had no styles and showed the browser's grey button) */
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600;cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline}
.tone-ex-btn{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.tone-ex-btn:hover{background:var(--surface-2);border-color:var(--line-2)}
.tone-ex-btn .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--accent);flex:none}
.tone-ex-btn > span{min-width:0;overflow-wrap:anywhere}   /* a long meaning wraps instead of pushing the play icon off a phone screen */

/* ---------- Flashcard Studio (js/learner/views-cards.js) ---------- */
.fc{--fc-w:min(560px,100%)}
.fc kbd{font:600 .7rem/1 var(--f-ui);padding:3px 5px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-3);margin-inline-start:2px}
@media (pointer:coarse),(max-width:560px){.fc kbd{display:none}}
@media (max-width:560px){.fc-grades .btn{padding-inline:8px;gap:5px;white-space:nowrap}}
.fc-ov{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.fc-ov-t{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:2px;justify-items:start;box-shadow:var(--shadow-sm);min-width:0}
.fc-ov-t .ic{width:var(--ic-md);height:var(--ic-md);color:var(--accent)}
.fc-ov-t b{font:800 1.5rem/1.1 var(--f-display)}
.fc-ov-t span{font-size:.8rem;color:var(--ink-3)}
.fc-ov-t.fc-tricky .ic{color:var(--warn)} .fc-ov-t.fc-mastered .ic{color:var(--jade)} .fc-ov-t.fc-due .ic{color:var(--violet)}
@media (max-width:640px){.fc-ov{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fc-alert{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;background:var(--warn-2);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--r);padding:14px;margin-bottom:14px}
.fc-alert > div{flex:1 1 240px} .fc-alert p{margin:2px 0 8px;color:var(--ink-2);font-size:.9rem}
.fc-alert-ic .ic{width:var(--ic-lg);height:var(--ic-lg);color:var(--warn)}
.fc-mini{display:flex;flex-wrap:wrap;gap:6px}
.fc-mini .chip{border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:.9rem;padding:4px 10px;min-height:36px}
.fc-setup{display:grid;gap:18px}
.fc-field{display:grid;gap:8px}
.fc-label{font-weight:700;font-size:.9rem;color:var(--ink-2)}
.fc-chips{display:flex;flex-wrap:wrap;gap:8px}
.fc-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 .9rem var(--f-ui);cursor:pointer}
.fc-chip small{font-size:.75rem;color:var(--ink-3);font-weight:600}
.fc-chip[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fc-chip[aria-checked="true"] small{color:inherit;opacity:.85}
.fc-chip:disabled{opacity:.45;cursor:not-allowed}
.fc-modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fc-mode{display:grid;gap:4px;justify-items:start;text-align:start;padding:12px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.fc-mode small{color:var(--ink-3);font-size:.8rem;line-height:1.35}
.fc-mode-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-2);color:var(--accent)}
.fc-mode-ic .ic{width:var(--ic-md);height:var(--ic-md)}
.fc-mode[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.fc-toggles{display:flex;flex-wrap:wrap;gap:8px 20px}
.fc-tog{display:inline-flex;gap:8px;align-items:center;min-height:44px;cursor:pointer}
.fc-tog input{width:18px;height:18px;accent-color:var(--accent)}
.fc-start{display:grid;gap:8px;justify-items:start}
.fc-go{min-height:48px;padding-inline:22px;font-size:1rem}
/* player */
.fc-play{position:relative;max-width:var(--fc-w);margin-inline:auto}
.fc-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fc-close{min-width:44px;min-height:44px;padding:0}
.fc-bar{flex:1;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.fc-bar i{display:block;height:100%;width:0;background:var(--accent-grad);border-radius:inherit;transition:width .3s ease}
.fc-streak{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--warn)}
.fc-streak .ic{width:var(--ic-sm);height:var(--ic-sm)}
.fc-slot{display:grid;gap:12px}
.fc-enter{animation:fcIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes fcIn{from{opacity:0;transform:translateX(24px)}}
.fc-card{position:relative;min-height:300px;perspective:1200px;cursor:pointer;outline:none;touch-action:pan-y;transition:translate .2s,rotate .2s}
.fc-card:focus-visible .fc-face{box-shadow:0 0 0 3px var(--accent)}
.fc-inner{position:relative;min-height:300px;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.fc-card.is-flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.fc-back{transform:rotateY(180deg);overflow:auto}
.fc-card[data-swipe="right"] .fc-face{box-shadow:0 0 0 3px var(--jade)} .fc-card[data-swipe="left"] .fc-face{box-shadow:0 0 0 3px var(--bad)}
.fc-card.flat{cursor:default;min-height:0;display:grid;justify-items:center;gap:8px;padding:24px 18px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.fc-word{font:600 clamp(2.4rem,9vw,3.4rem)/1.35 var(--f-lo);color:var(--ink)}
.fc-word.sm{font-size:1.6rem}
.fc-rom{font-size:1.15rem;color:var(--ink-2)}
.fc-again{position:absolute;top:12px;inset-inline-start:12px}
.fc-card.flat .fc-again{position:static}
.fc-details{display:grid;gap:8px;justify-items:center}
.fc-pic{font-size:2.6rem;line-height:1}
.fc-meaning{font:700 1.35rem/1.35 var(--f-display);color:var(--ink)}
.fc-meaning.lo{font-family:var(--f-lo)}
.fc-meaning.big{font-size:1.6rem}
.fc-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;color:var(--ink-2)}
.fc-ex{display:grid;gap:2px;background:var(--surface-2);border-radius:12px;padding:8px 12px;font-size:1.05rem}
.fc-ex small{color:var(--ink-3)}
.fc-hints{display:grid;gap:6px}
.fc-hints:empty{display:none}
.fc-hint-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;border-radius:12px;background:var(--accent-2);color:var(--ink);animation:fcIn .25s ease}
.fc-hint-row .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--accent)}
.fc-hint-k{font-size:.78rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.fc-hint-v{font-size:1.02rem} .fc-hint-v small{color:var(--ink-3)}
.fc-h-picture .fc-hint-v{font-size:1.8rem;line-height:1}
.fc-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fc-actions .btn{min-height:46px}
.fc-grades .btn{flex:1 1 0;min-width:0}
.fc-g0{border-color:color-mix(in srgb,var(--bad) 50%,transparent);color:var(--bad)}
.fc-g1{border-color:color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn)}
.fc-g2{background:var(--jade);border-color:var(--jade);color:var(--accent-ink)}
.fc-swipe{text-align:center;margin:0}
.fc-q{margin:4px 0 0;color:var(--ink-2);font-weight:600}
.fc-listen{display:grid;place-items:center;gap:6px;width:120px;height:120px;border-radius:50%;border:0;background:var(--accent-grad);color:var(--accent-ink);cursor:pointer;box-shadow:var(--shadow)}
.fc-listen .ic{width:var(--ic-xl);height:var(--ic-xl)}
.fc-listen span{font-size:.75rem;font-weight:700}
.fc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:420px){.fc-opts{grid-template-columns:1fr}}
.fc-opt{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 1rem var(--f-ui);text-align:start;cursor:pointer;min-width:0}
.fc-opt kbd{flex:none}
.lo-opts .fc-opt{font-size:1.35rem}
.fc-opt:hover:not(:disabled){border-color:var(--accent)}
.fc-opt.right{border-color:var(--jade);background:var(--jade-2)}
.fc-opt.wrong{border-color:var(--bad);background:var(--bad-2)}
.fc-opt:disabled{cursor:default;color:var(--ink)}
.fc-after{display:grid;gap:10px;justify-items:center;text-align:center;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.fc-verdict{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.fc-verdict.ok{color:var(--jade)} .fc-verdict.no{color:var(--bad)}
.fc-verdict .ic{width:var(--ic-md);height:var(--ic-md)}
.fc-next{min-width:160px}
/* coaching pop-up */
.fc-coach{position:absolute;inset-inline:8px;top:56px;z-index:5;display:grid;gap:8px;justify-items:center;text-align:center;padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);animation:fcPop .3s cubic-bezier(.2,.9,.3,1.2)}
.fc-coach p{margin:0;color:var(--ink-2)}
.fc-coach-ic{font-size:2.2rem;line-height:1}
.fc-coach-warn{border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.fc-coach-good{border-color:color-mix(in srgb,var(--jade) 50%,transparent)}
@keyframes fcPop{from{opacity:0;transform:translateY(10px) scale(.96)}}
/* summary */
.fc-sum{max-width:640px;margin-inline:auto;display:grid;gap:14px}
.fc-sum h2{margin:0}
.fc-sum-top{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.fc-ring{--p:0;width:128px;height:128px;border-radius:50%;display:grid;place-content:center;justify-items:center;flex:none;
  background:radial-gradient(closest-side,var(--surface) 78%,transparent 80% 100%),conic-gradient(var(--jade) calc(var(--p)*1%),var(--surface-3) 0)}
.fc-ring b{font:800 1.7rem/1 var(--f-display)} .fc-ring small{color:var(--ink-3)}
.fc-sum-tiles{flex:1 1 260px;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.fc-sum-t{display:grid;gap:2px;padding:10px;border-radius:12px;background:var(--surface-2)}
.fc-sum-t .ic{width:var(--ic-sm);height:var(--ic-sm)}
.fc-sum-t b{font:800 1.3rem/1.1 var(--f-display)} .fc-sum-t span{font-size:.78rem;color:var(--ink-3)}
.fc-sum-t.fc-known .ic{color:var(--jade)} .fc-sum-t.fc-almost .ic{color:var(--warn)} .fc-sum-t.fc-missed .ic{color:var(--bad)} .fc-sum-t.fc-hints .ic{color:var(--accent)}
.fc-sum-btns{justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.fc-inner,.fc-card,.fc-bar i{transition:none}.fc-enter,.fc-hint-row,.fc-coach{animation:none}}

/* ---------- Grammar Studio (js/learner/views-grammar.js) ---------- */
/* one colour per job in the sentence; built from theme tokens, so Day and Night both work */
.gb{--rc:var(--ink-3);display:inline-grid;justify-items:center;gap:1px;padding:7px 11px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--rc) 50%,transparent);
  background:color-mix(in srgb,var(--rc) 6%,var(--surface));color:var(--ink);font:inherit;line-height:1.25;min-width:44px;min-height:44px;align-content:center;
  box-shadow:inset 0 3px 0 color-mix(in srgb,var(--rc) 55%,transparent)}   /* light tint keeps small tone-coloured text readable (WCAG AA); the colour shows in the border and top edge */
.gb b{font-weight:700;font-size:1.02rem}
.gb b.lo,.gb .lo{font-family:var(--f-lo);font-size:1.2rem;font-weight:600}
.gb small{font-size:.72rem;color:var(--ink-3);font-weight:600}
.gb.sm{min-height:34px;padding:4px 10px} .gb.sm b{font-size:.85rem}
.gb.opt{border-style:dashed;opacity:.85}
.gb[data-role="S"]{--rc:var(--accent)} .gb[data-role="V"]{--rc:var(--jade)} .gb[data-role="O"]{--rc:var(--violet)} .gb[data-role="N"]{--rc:var(--tone-1)}
.gb[data-role="Adj"]{--rc:var(--warn)} .gb[data-role="Adv"]{--rc:var(--tone-5)} .gb[data-role="Num"],.gb[data-role="Clf"]{--rc:var(--tone-3)}
.gb[data-role="Time"],.gb[data-role="Place"]{--rc:var(--tone-6)} .gb[data-role="Neg"]{--rc:var(--bad)} .gb[data-role="Q"]{--rc:var(--tone-2)} .gb[data-role="P"]{--rc:var(--tone-4)}
.gb[data-role="M"]{--rc:var(--ink);border-width:2px;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--accent) 60%,transparent)}
.gs-sent.plain .gb,.gb.mono{--rc:var(--ink-3)}
.gs{display:grid;gap:16px}
.gs-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,var(--accent-2),var(--surface) 60%)}
.gs-hero-txt{flex:1 1 320px;display:grid;gap:8px} .gs-hero h1{margin:0} .gs-hero p{margin:0;color:var(--ink-2);max-width:60ch}
.gs-ring{--p:0;width:116px;height:116px;border-radius:50%;display:grid;place-content:center;justify-items:center;flex:none;
  background:radial-gradient(closest-side,var(--surface) 77%,transparent 79% 100%),conic-gradient(var(--jade) calc(var(--p)*1%),var(--surface-3) 0)}
.gs-ring b{font:800 1.4rem/1 var(--f-display)} .gs-ring small{font-size:.75rem;color:var(--ink-3)}
.gs-ring.big{width:140px;height:140px} .gs-ring.big b{font-size:1.8rem}
.gs-legend{display:grid;gap:10px} .gs-legend p{margin:2px 0 0}
.gs-legend-row{display:flex;flex-wrap:wrap;gap:6px}
.gs-demo{display:grid;gap:6px}
.gs-stage h2{font-size:1.05rem;margin:4px 0 10px;display:flex;align-items:center;gap:6px}
.gs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.gs-card{display:grid;gap:10px;align-content:start;text-align:start;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--shadow-sm);min-width:0}
.gs-card:hover{border-color:var(--accent)} .gs-card.locked{opacity:.75}
.gs-card[data-status="mastered"]{border-color:color-mix(in srgb,var(--jade) 45%,transparent)}
.gs-card[data-status="review"]{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.gs-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gs-card-t{font-size:1.02rem;line-height:1.35}
.gs-st-new{background:var(--surface-2);color:var(--ink-2)} .gs-st-learning{background:var(--accent-2);color:var(--accent)} .gs-st-mastered{background:var(--jade-2);color:var(--jade)} .gs-st-review{background:var(--warn-2);color:var(--warn)}
.gs-dots{display:inline-flex;gap:4px} .gs-dots i{width:8px;height:8px;border-radius:50%;background:var(--surface-3)} .gs-dots i.on{background:var(--jade)}
.gs-formula{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gs-formula.big{gap:8px} .gs-formula.big .gb{padding:10px 14px} .gs-formula.big .gb b{font-size:1.1rem}
.gs-plus{color:var(--ink-3);font-weight:800}
/* one point */
.gs-title h1{margin:0}
.gs-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;position:sticky;top:var(--sticky-top,0px);transition:top .28s ease;z-index:3;padding:6px 0;background:var(--bg)}
.gs-step{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 .9rem var(--f-ui);cursor:pointer;min-width:0}
.gs-step > span:last-child{display:grid;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gs-step small{font-size:.68rem;color:var(--ink-3)}
.gs-step-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);flex:none}
.gs-step-ic .ic{width:var(--ic-sm);height:var(--ic-sm)}
.gs-step.on{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.gs-step.done .gs-step-ic{background:var(--jade);color:var(--accent-ink)}
@media (max-width:640px){.gs-step{flex-direction:column;justify-content:center;gap:2px;padding:6px 2px;text-align:center}.gs-step small{display:none}.gs-step > span:last-child{font-size:.72rem}}
.gs-enter{animation:fcIn .25s ease}
.gs-formula-card{display:grid;gap:12px}
.gs-explain{font-size:1.05rem;line-height:1.65;margin:0 0 8px}
.gs-mis{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.gs-mis-x,.gs-mis-v{display:flex;gap:8px;align-items:center;font-size:1.1rem} .gs-mis-x{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px} .gs-mis-v{color:var(--jade)}
.gs-mis .ic{width:var(--ic-sm);height:var(--ic-sm);flex:none}
.gs-actions{justify-content:flex-end}
.gs-sent{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.gs-sent .tok{cursor:pointer;transition:transform .15s,box-shadow .15s}
.gs-sent .tok:hover{transform:translateY(-2px)}
.gs-sent .tok.lit,.gs-answer .tok.lit{transform:translateY(-4px) scale(1.06);box-shadow:0 6px 14px -6px var(--rc)}
.gs-gl{font-style:normal;font-size:.75rem;color:var(--ink-2);max-width:12ch;text-align:center;overflow-wrap:anywhere}
.gs-ex{display:grid;gap:10px}
.gs-ex-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.gs-ex-tr{margin:0;color:var(--ink-2)}
.gs-tog{display:inline-flex;gap:8px;align-items:center;min-height:40px;cursor:pointer} .gs-tog input{width:18px;height:18px;accent-color:var(--accent)}
.gs-prompt{font-size:1.1rem;margin:0}
.gs-answer{display:flex;flex-wrap:wrap;gap:6px;min-height:64px;padding:10px;border-radius:16px;border:2px dashed var(--line-2);background:var(--surface);align-items:center}
.gs-answer.ok{border-style:solid;border-color:var(--jade);background:color-mix(in srgb,var(--jade-2) 60%,var(--surface))}
.gs-ph{color:var(--ink-3);font-size:.9rem}
.gs-bank{display:flex;flex-wrap:wrap;gap:8px;min-height:52px}
.gs-answer .tok,.gs-bank .tok{cursor:pointer}
.tok.wrong{animation:gsShake .4s;border-color:var(--bad)!important;box-shadow:0 0 0 2px var(--bad)}
@keyframes gsShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.gs-fb:empty{display:none}
.gs-fb{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.gs-fb p{margin:0}
.gs-ok,.gs-no{display:flex;align-items:center;gap:8px;font-weight:800} .gs-ok{color:var(--jade)} .gs-no{color:var(--bad)}
.gs-ok .ic,.gs-no .ic{width:var(--ic-md);height:var(--ic-md)}
.gs-opts{display:grid;gap:10px}
.gs-opt{display:block;text-align:start;padding:12px;border-radius:16px;border:1.5px solid var(--line-2);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.gs-opt:hover:not(:disabled){border-color:var(--accent)}
.gs-opt .tok{cursor:inherit;pointer-events:none}
.gs-opt.right{border-color:var(--jade);background:color-mix(in srgb,var(--jade-2) 70%,var(--surface))}
.gs-opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad-2) 70%,var(--surface))}
.gs-opt:disabled{cursor:default}
.gs-intro{justify-items:center;text-align:center} .gs-intro p{margin:0}
.gs-intro-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--warn-2);color:var(--warn)} .gs-intro-ic .ic{width:var(--ic-lg);height:var(--ic-lg)}
.gs-mbar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden} .gs-mbar i{display:block;height:100%;width:0;background:var(--accent-grad);transition:width .3s}
.gs-result{display:grid;justify-items:center;gap:8px;text-align:center} .gs-result h2,.gs-result p{margin:0}
.gs-result.win{background:linear-gradient(160deg,var(--jade-2),var(--surface) 70%)}
::view-transition-group(*){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){.gs-enter,.tok.wrong{animation:none}.gs-sent .tok,.gs-mbar i{transition:none}}

/* ---------- auto-hiding top bar (js/shared/autohide.js) ----------
   Pinned elements use top:var(--sticky-top): right under the bar while it shows, at the very top while it is away. */
:root{--tb-h:0px;--sticky-top:var(--tb-h)}
@media (max-width:900px){
  .topbar{transition:transform .28s ease,box-shadow .28s ease;will-change:transform}
  html.tb-hide{--sticky-top:0px}
  html.tb-hide .topbar{transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 2px));box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.topbar,.vd-stage,.gs-steps{transition:none}}

/* ---------- video: phone held sideways = the video fills the screen ---------- */
@media (max-width:950px) and (orientation:landscape) and (max-height:520px){
  html:has(.vd) .topbar,html:has(.vd) .tabbar,html:has(.vd) .demo-bar{display:none}
  html:has(.vd) main{padding-top:0;padding-bottom:16px}
  .vd-watch{display:block}
  .vd-stage{position:relative;top:0;margin-inline:-16px;width:calc(100% + 32px)}
  .vd-stage .video-embed-wrap,.vd-stage .video-embed-wrap:last-child{padding-bottom:0;height:calc(100dvh - 52px);border-radius:0}
  .vd-stage .video-embed-wrap:last-child{height:100dvh}
  .vd-caption{border-radius:0;min-height:52px;padding:6px 14px}
  .vd-cap-text{font-size:1rem} .vd-cap-sub{font-size:.78rem}
  .vd-head .vd-back{display:none}
}

/* ---------- video: watch next, up next, caption gestures ---------- */
.vd-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vd-upnext-tag,.vd-seen-tag{position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px}
.vd-upnext-tag{background:var(--accent);color:var(--accent-ink)}
.vd-seen-tag{top:auto;bottom:8px;background:rgba(0,0,0,.66);color:#fff} .vd-seen-tag .ic{width:var(--ic-xs);height:var(--ic-xs)}
.vd-next{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:12px;background:rgba(5,12,22,.82);backdrop-filter:blur(3px);color:#fff;animation:fcIn .3s ease}
.vd-next-card{display:grid;gap:10px;justify-items:center;width:min(440px,100%);text-align:center}
.vd-next .eyebrow{color:#cfe3f5}
.vd-next-item{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:8px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:inherit;text-align:start;cursor:pointer}
.vd-next-item:hover{background:rgba(255,255,255,.14)}
.vd-next-item img,.vd-next-item .vthumb-ph{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:grid;place-items:center}
.vd-next-t{display:grid;gap:2px;min-width:0} .vd-next-t b{line-height:1.3} .vd-next-t small{opacity:.75}
.vd-next-ring{--p:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,rgba(5,12,22,.9) 76%,transparent 78% 100%),conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.22) 0);transition:--p .9s linear}
.vd-next-btns{justify-content:center}
.vd-next .btn:not(.primary){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
@media (max-width:480px){.vd-next{padding:6px}.vd-next-item{grid-template-columns:84px minmax(0,1fr) auto;gap:8px;padding:6px}.vd-next-item img,.vd-next-item .vthumb-ph{width:84px}.vd-next-card{gap:6px}.vd-next .eyebrow{display:none}}
.vd-caption{touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}
.vd-caption.swipe-l .vd-cap-text{animation:vdSwipeL .3s ease}
.vd-caption.swipe-r .vd-cap-text{animation:vdSwipeR .3s ease}
@keyframes vdSwipeL{from{transform:translateX(28px);opacity:.3}}
@keyframes vdSwipeR{from{transform:translateX(-28px);opacity:.3}}
.vd-gesture-hint{font-size:.72rem;opacity:.75;margin-top:4px}
@media (prefers-reduced-motion:reduce){.vd-next,.vd-caption .vd-cap-text{animation:none}}

/* ---------- Script & Handwriting (js/learner/views-handwriting.js) ---------- */
/* consonant classes have their own colour everywhere they appear */
[data-cls="middle"]{--cls:var(--jade)} [data-cls="high"]{--cls:var(--violet)} [data-cls="low"]{--cls:var(--accent)}
.hwh{display:grid;gap:16px}
.hwh-hero{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--accent-2),var(--surface) 65%)}
.hwh-hero h1{margin:2px 0 6px} .hwh-hero p{margin:0;color:var(--ink-2);max-width:62ch}
.hwh-ring{--p:0;width:104px;height:104px;border-radius:50%;display:grid;place-content:center;justify-items:center;flex:none;
  background:radial-gradient(closest-side,var(--surface) 76%,transparent 78% 100%),conic-gradient(var(--jade) calc(var(--p)*1%),var(--surface-3) 0)}
.hwh-ring b{font:800 1.5rem/1 var(--f-display)} .hwh-ring small{color:var(--ink-3);font-size:.75rem}
.hwh-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;position:sticky;top:var(--sticky-top,0px);z-index:4;padding:6px 0;background:var(--bg);transition:top .28s ease}
.hwh-tab{position:relative;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 10px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;cursor:pointer;overflow:hidden;min-width:0;text-align:start}
.hwh-tab[aria-current="page"]{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.hwh-tab-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent-2);color:var(--accent);flex:none}
.hwh-tab-ic .ic{width:var(--ic-sm);height:var(--ic-sm)}
.hwh-tab-t{display:grid;min-width:0;line-height:1.2} .hwh-tab-t b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hwh-tab-t small{color:var(--ink-3);font-size:.74rem}
.hwh-tab-bar{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p)*1%);background:var(--jade)}
@media (max-width:720px){.hwh-tabs{grid-template-columns:repeat(5,minmax(64px,1fr));overflow-x:auto;scrollbar-width:none}.hwh-tab{flex-direction:column;gap:2px;padding:6px 4px;text-align:center}.hwh-tab-t b{font-size:.72rem}}
.hwh-body{display:grid;gap:14px}
.hwh-note{display:flex;gap:8px;align-items:center;margin:0;color:var(--ink-2)} .hwh-note .ic{color:var(--accent);flex:none}
.hwh-group{display:grid;gap:12px;border-top:4px solid var(--cls,var(--line))}
.hwh-group-h{display:flex;gap:14px;align-items:center}
.hwh-group-h h2{display:flex;align-items:center;gap:8px;margin:0;font-size:1.08rem} .hwh-group-h p{margin:2px 0 0}
.hwh-demo{display:grid;place-items:center;min-width:64px;height:56px;padding:0 10px;border-radius:14px;background:var(--surface-2);font:600 1.6rem/1 var(--f-lo);color:var(--ink-2);flex:none}
.hwh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.hwh-tile{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;min-height:108px;padding:10px 6px 8px;border-radius:16px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.hwh-tile:hover{transform:translateY(-2px);border-color:var(--cls,var(--accent));box-shadow:var(--shadow-sm)}
.hwh-tile[data-state="passed"]{border-color:color-mix(in srgb,var(--jade) 55%,transparent);background:color-mix(in srgb,var(--jade-2) 45%,var(--surface))}
.hwh-glyph{font:600 2.3rem/1.2 var(--f-lo);color:var(--cls,var(--ink))}
.hwh-sub{font-size:.75rem;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwh-word{font-size:.78rem;color:var(--ink-3);font-family:var(--f-lo)}
.hwh-ok{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--jade);color:var(--accent-ink)} .hwh-ok .ic{width:12px;height:12px}
.hwh-best{position:absolute;top:6px;right:8px;font-size:.7rem;font-weight:700;color:var(--ink-3)}
.hwh-tpl{position:absolute;top:6px;left:6px;color:var(--accent)} .hwh-tpl .ic{width:14px;height:14px}
/* one letter */
.hwl{display:grid;gap:14px}
.hwl-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:16px;align-items:center;border-top:4px solid var(--cls,var(--accent))}
.hwl-big{font:600 clamp(3.6rem,12vw,5.4rem)/1.1 var(--f-lo);color:var(--cls,var(--ink));min-width:1.2em;text-align:center}
.hwl-info{display:grid;gap:6px;min-width:0}
.hwl-name{font-size:1.15rem} .hwl-word{color:var(--ink-2)} .hwl-word span{font-family:var(--f-lo);font-size:1.1rem;color:var(--ink)}
.hwl-cls{background:color-mix(in srgb,var(--cls) 14%,var(--surface));color:var(--cls)}
.hwl-nav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.hwl-mode{margin-inline-start:auto}
@media (max-width:640px){.hwl-head{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}.hwl-big{grid-row:1;grid-column:2;text-align:center}.hwl-info{grid-column:1 / -1}.hwl-nav:first-child{grid-row:1;grid-column:1}.hwl-nav:last-child{grid-row:1;grid-column:3}}
/* writing board */
.hww{display:grid;gap:12px}
.hww-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.hww-model{font:600 2.4rem/1.2 var(--f-lo);color:var(--ink);letter-spacing:.06em;opacity:0;transition:opacity .25s;min-height:1.2em}
.hww-model.shown{opacity:1}
.hww-pad{display:grid;justify-items:center}
.cp{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-radius:18px}
.cp-strip{position:relative;margin-inline:auto;border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden}
.cp-layer{position:absolute;inset:0;display:block}
.cp-ink{touch-action:none;cursor:crosshair}
.cp.locked .cp-ink{cursor:default}
.hww-result .hw-score b{font-size:2.4rem}
.hww-cells{display:flex;flex-wrap:wrap;gap:6px}
.hww-cell{display:grid;justify-items:center;min-width:48px;padding:6px 8px;border-radius:12px;border:1px solid var(--line)}
.hww-cell b{font:600 1.4rem/1.2 var(--f-lo)} .hww-cell small{font-size:.72rem;font-weight:700}
.hww-cell.ok{background:var(--jade-2);color:var(--jade);border-color:transparent} .hww-cell.bad{background:var(--bad-2);color:var(--bad);border-color:transparent}
.hww-card{display:grid;gap:10px}
.hww-card-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.hww-meaning{font:700 1.25rem/1.3 var(--f-display)}
.hww-rules{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hww-rules li{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--ink-2)} .hww-rules .ic{color:var(--accent);flex:none;width:var(--ic-sm);height:var(--ic-sm)}
.hww-word-area{display:grid;gap:14px}
@media (prefers-reduced-motion:reduce){.hwh-tile,.hww-model,.hwh-tabs{transition:none}}

/* ---------- Practice Studio (js/learner/views-practice.js) ---------- */
.trk-vocab{--trk:var(--accent)} .trk-listen{--trk:var(--t2)} .trk-speak{--trk:var(--tone-4)} .trk-read{--trk:var(--jade)} .trk-write{--trk:var(--tone-6)}
.trk-grammar{--trk:var(--tone-3)} .trk-tones{--trk:var(--tone-5)} .trk-script{--trk:var(--ink-2)} .trk-talk{--trk:color-mix(in srgb,var(--t2) 50%,var(--violet))}
[class*="trk-"]{--trk-ink:color-mix(in srgb,var(--trk) 72%,var(--ink))}
.pz{display:flex;flex-direction:column;gap:26px}
.pz-hero{position:relative;overflow:hidden;border-radius:22px;padding:24px;background:var(--accent-grad);color:var(--accent-ink);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px 24px;box-shadow:var(--shadow-lg)}
.pz-hero::after{content:"ກ ຂ ຄ ງ";position:absolute;right:-10px;bottom:-34px;font:800 7.5rem/1 var(--f-lo);letter-spacing:.05em;opacity:.08;pointer-events:none;white-space:nowrap}
.pz-hero .eyebrow{color:inherit;opacity:.85}
.pz-hero h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:4px 0 14px}
.pz-rank{display:flex;gap:14px;align-items:center}
.pz-rank-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.pz-rank-txt b{font:800 1.3rem/1.15 var(--f-display)}
.pz-meter{height:8px;border-radius:99px;background:color-mix(in srgb,var(--accent-ink) 25%,transparent);overflow:hidden;max-width:320px;margin-top:4px}
.pz-meter i{display:block;height:100%;background:var(--accent-ink);border-radius:99px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pz-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:end}
.pz-stat{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--accent-ink) 13%,transparent)}
.pz-stat .ic{width:var(--ic-md);height:var(--ic-md);opacity:.9}
.pz-stat b{font:800 1.45rem/1.1 var(--f-display)}
.pz-stat span{font-size:.78rem;opacity:.85}
.pz-quick{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative;z-index:1}
.pz-qbtn{display:flex;gap:10px;align-items:center;text-align:left;border-radius:14px;padding:12px;border:1px solid color-mix(in srgb,var(--accent-ink) 28%,transparent);background:color-mix(in srgb,var(--accent-ink) 12%,transparent);color:inherit;min-height:64px}
.pz-qbtn:hover{background:color-mix(in srgb,var(--accent-ink) 22%,transparent);transform:translateY(-2px)}
.pz-qbtn b{display:block;font-size:.98rem}
.pz-qbtn small{display:block;font-size:.76rem;opacity:.85;line-height:1.3}
.pz-qbtn.primary{background:var(--surface);color:var(--accent);border-color:transparent;box-shadow:var(--shadow)}
.pz-qbtn.primary small{color:var(--ink-2);opacity:1}
.pz-qbtn.quiet{opacity:.8}
.pz-qic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accent-ink) 18%,transparent)}
.pz-qbtn.primary .pz-qic{background:var(--accent-2)}
.pz-qic .ic{width:var(--ic-lg);height:var(--ic-lg)}
.pz-badge .hex{fill:var(--rk,var(--accent))} .pz-badge .hex-in{fill:var(--surface)} .pz-badge .pip{fill:var(--rk,var(--accent))}
.pz-badge .num{fill:var(--rk,var(--accent));font:800 22px var(--f-display)}
.pz-badge{flex:none;filter:drop-shadow(0 3px 6px rgba(10,27,46,.18))}
.pz-badge.r0{--rk:var(--t0)} .pz-badge.r1{--rk:var(--t2)} .pz-badge.r2{--rk:var(--jade)} .pz-badge.r3{--rk:var(--accent)}
.pz-badge.r4{--rk:var(--violet)} .pz-badge.r5{--rk:var(--warn)} .pz-badge.r6{--rk:var(--tone-6)} .pz-badge.r7{--rk:var(--bad)}
.pz-coach h2{display:flex;align-items:center;gap:6px}
.pz-coach{container-type:inline-size;container-name:pzcoach}
.pz-coach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:start;margin-top:12px}
.pz-radar-wrap{display:grid;place-items:center;min-width:0;width:100%;overflow:hidden}
.pz-radar{display:block;width:100%;max-width:440px;height:auto;overflow:hidden}
.pz-radar .rd-ring{fill:none;stroke:var(--line)} .pz-radar .rd-axis{stroke:var(--line)}
.pz-radar .rd-area{fill:color-mix(in srgb,var(--accent) 22%,transparent);stroke:var(--accent);stroke-width:2;stroke-linejoin:round;transform-box:view-box;transform-origin:50% 50%;animation:pzRadar .8s cubic-bezier(.2,.8,.2,1)}
.pz-radar .rd-dot{fill:var(--accent)}
.pz-radar .rd-label{fill:var(--ink-2);font:600 13px var(--f-ui)} .pz-radar .rd-label.none{fill:var(--ink-3);font-weight:500}
.pz-radar .rd-val{fill:var(--accent);font:800 13px var(--f-display)}
@keyframes pzRadar{from{transform:scale(.2);opacity:0}}
.pz-insight{--x:var(--accent);display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface-2);border-left:3px solid var(--x)}
.pz-insight.good{--x:var(--jade)} .pz-insight.warn{--x:var(--warn)} .pz-insight.bad{--x:var(--bad)}
.pz-insight p{flex:1;min-width:0;font-size:.92rem}
.pz-in-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--x) 16%,var(--surface));color:var(--x)}
.pz-in-ic .ic{width:var(--ic-sm);height:var(--ic-sm)}
.pz-next{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.pz-next-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.pz-mini{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 10px;color:inherit}
.pz-mini:hover{border-color:var(--trk);transform:translateY(-1px)}
.pz-mini-art{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--trk) 15%,var(--surface));color:var(--trk);font-weight:700;font-size:.95rem;overflow:hidden;white-space:nowrap}
.pz-mini-art.long{font-size:.72rem}.pz-mini-art.xl{font-size:.6rem}
.pz-mini-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.pz-mini-txt b,.pz-mini-txt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-mini-txt small{color:var(--ink-3);font-size:.76rem}
.pz-stars{display:inline-flex;gap:1px;font-size:.95rem;line-height:1;flex:none}
.pz-stars i{font-style:normal;color:var(--surface-3)} .pz-stars i.on{color:var(--warn)}
.pz-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pz-tools .input[type=search]{flex:1 1 220px;width:auto}
.pz-tools .pz-status{width:auto;flex:0 0 auto}
.pz-tracks{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pz-tchip{--trk:var(--accent);display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:7px 13px;font-weight:600;font-size:.88rem;color:var(--ink-2);white-space:nowrap}
.pz-tchip .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--trk)}
.pz-tchip small{font-size:.74rem;color:var(--ink-3);font-weight:700}
.pz-tchip[aria-selected="true"]{background:var(--trk);border-color:var(--trk);color:var(--surface)}
.pz-tchip[aria-selected="true"] .ic,.pz-tchip[aria-selected="true"] small{color:var(--surface)}
.pz-row{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.pz-row-h h3{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.pz-row-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--trk) 16%,var(--surface));color:var(--trk)}
.pz-row-ic .ic{width:var(--ic-sm);height:var(--ic-sm)}
.pz-scroller{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(178px,58vw,224px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pz-scroller>*{scroll-snap-align:start}
.pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.pz-card{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);background:var(--surface);border-radius:18px;overflow:hidden;color:inherit;min-width:0}
.pz-card:hover{border-color:color-mix(in srgb,var(--trk) 55%,var(--line));transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.pz-card.locked .pz-art{filter:saturate(.35)}
.pz-art{position:relative;height:96px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--trk) 24%,var(--surface)),color-mix(in srgb,var(--trk) 7%,var(--surface)))}
.pz-art::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-40px;top:-50px;background:color-mix(in srgb,var(--trk) 14%,transparent)}
.pz-glyph{position:relative;font:700 2rem/1.2 var(--f-lo);color:var(--trk);max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .3s cubic-bezier(.2,.9,.3,1.25)}
.pz-glyph.long{font-size:1.55rem}.pz-glyph.xl{font-size:1.2rem}
.pz-arrow{border:1px solid var(--line-2);background:var(--surface)}
@media (hover:none),(max-width:700px){.pz-arrow{display:none}}
.pz-card:hover .pz-glyph{transform:scale(1.12) rotate(-3deg)}
.pz-trk-ic{position:absolute;left:10px;top:10px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--trk)}
.pz-trk-ic .ic{width:var(--ic-xs);height:var(--ic-xs)}
.pz-ribbon{position:absolute;right:10px;top:10px;font-size:.7rem;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:99px;background:var(--trk);color:var(--surface)}
.pz-body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px;flex:1}
.pz-mode{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--trk-ink)}
.pz-ttl{font-size:1rem;line-height:1.25}
.pz-meta{font-size:.8rem;color:var(--ink-3)}
.pz-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.pz-newchip{background:color-mix(in srgb,var(--trk) 9%,var(--surface));color:var(--trk-ink)}
/* a session */
.pz-session{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;width:100%}
.pz-shead{display:flex;align-items:center;gap:12px}
.pz-shead-t{display:flex;flex-direction:column;flex:1;min-width:0}
.pz-shead-t small{color:var(--trk-ink);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.pz-shead-t b{font:800 1.2rem/1.2 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-combo{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:99px;background:var(--warn-2);color:var(--warn);font-weight:800}
.pz-combo .ic{width:var(--ic-sm);height:var(--ic-sm)}
.pz-combo.pop{animation:pzPop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pzPop{40%{transform:scale(1.3)}}
.pz-session .quiz{width:100%;max-width:none}
.pz-session .qbox{border-top:4px solid var(--trk);border-radius:18px}
.pz-session .qprog i.cur{background:var(--trk)}
.pz-session .qzh,.pz-session .opt.hz,.pz-session .tile,.pz-session .flash .front,.pz-session .reply-opt{font-family:var(--f-lo)}
.pz-session .opt{transition:transform .15s ease,border-color .2s,background-color .2s}
.pz-session .opt:active{transform:scale(.98)}
.pz-session .opt.right{animation:pzRight .35s ease}
.pz-session .opt.wrong{animation:pzShake .35s ease}
@keyframes pzRight{50%{transform:scale(1.03)}}
@keyframes pzShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.q-timer{padding:3px 11px;border-radius:99px;background:var(--accent-2);color:var(--accent);font-size:.95rem}
.q-timer.low{background:var(--bad-2);color:var(--bad);animation:pzPulse 1s infinite}
@keyframes pzPulse{50%{opacity:.55}}
.tf-claim{display:flex;gap:12px;align-items:center;margin:16px 0 4px;padding:14px 16px;border-radius:14px;background:var(--surface-2);font-size:1.2rem}
.tf-eq{color:var(--ink-3);font-weight:800;font-size:1.4rem}
.tf-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.tf-btns .btn{min-height:60px;font-size:1.1rem;font-weight:700;border-width:1.5px;border-radius:14px}
.tf-btns .tf-yes .ic{color:var(--jade)} .tf-btns .tf-no .ic{color:var(--bad)}
.tf-btns .btn.right{border-color:var(--jade);background:var(--jade-2)} .tf-btns .btn.wrong{border-color:var(--bad);background:var(--bad-2)}
.chat{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.bubble{display:flex;gap:10px;align-items:flex-end}
.bubble .who{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;background:color-mix(in srgb,var(--trk,var(--accent)) 16%,var(--surface));color:var(--trk,var(--accent))}
.bubble-body{position:relative;background:var(--surface-2);border-radius:18px 18px 18px 4px;padding:10px 44px 10px 14px;max-width:88%;display:grid;gap:3px;min-height:44px}
.bubble-body .ib{position:absolute;right:4px;top:4px}
.bubble-text{font:600 1.35rem/1.45 var(--f-lo)}
.replies{gap:8px}
.reply-opt{border-radius:18px 18px 4px 18px;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
/* after a round */
.pz-after{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.pz-rs{display:grid;grid-template-columns:minmax(7em,10em) minmax(0,1fr) auto 3.5em;gap:10px;align-items:center;font-size:.9rem}
.pz-rs>span:first-child{display:flex;align-items:center;gap:6px}
.pz-rs .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--accent)}
.pz-rs .bar i{background:var(--accent)}
.pz-delta{font-weight:800;font-size:.82rem;white-space:nowrap} .pz-delta.up{color:var(--jade)} .pz-delta.down{color:var(--bad)}
.pz-record{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--warn-2);color:var(--warn);font-weight:800}
.pz-record .ic{width:var(--ic-lg);height:var(--ic-lg)}
.pz-fix{display:flex;flex-wrap:wrap;gap:8px}
.pz-fixchip{display:inline-flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:6px 11px;background:var(--surface)}
.pz-fixchip b{font:600 1.1rem/1.35 var(--f-lo)} .pz-fixchip small{color:var(--ink-3);font-size:.76rem}
.pz-burst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.pz-burst i{position:absolute;left:50%;top:22%;width:8px;height:9px;border-radius:2px;background:var(--warn);opacity:0;animation:pzBurst 1.15s ease-out forwards;animation-delay:var(--d)}
.pz-burst i:nth-child(3n+1){background:var(--accent)} .pz-burst i:nth-child(3n+2){background:var(--jade)} .pz-burst i:nth-child(4n){background:var(--violet)}
@keyframes pzBurst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-150px) scale(.6)}}
/* coach card narrower than 680px: radar on top, advice below */
@container pzcoach (max-width:680px){.pz-coach-grid{grid-template-columns:minmax(0,1fr)}.pz-radar-wrap{max-width:460px;margin:0 auto}}
@container pzcoach (max-width:520px){.pz-insight{flex-wrap:wrap}.pz-insight p{flex:1 1 calc(100% - 42px)}.pz-insight .btn{margin-left:42px}}
/* the admin's learner page */
.pz-adm-grid{display:grid;grid-template-columns:1fr;gap:14px}
.pz-adm .pz-radar{max-width:380px}
.pz-adm .skill{grid-template-columns:8.5em minmax(0,1fr) auto}
/* the report */
.pz-skill{display:flex;flex-direction:column;gap:5px}
.pz-skill .bar i{background:var(--t0)}
.pz-skill.lv-beginner .bar i{background:var(--bad)} .pz-skill.lv-developing .bar i{background:var(--warn)} .pz-skill.lv-good .bar i{background:var(--accent)}
.pz-skill.lv-strong .bar i{background:var(--jade)} .pz-skill.lv-mastered .bar i{background:var(--violet)}
.pz-heat{display:grid;grid-template-rows:repeat(7,13px);grid-auto-flow:column;grid-auto-columns:13px;gap:3px;overflow-x:auto;padding-bottom:4px}
.pz-heat i,.pz-heat-key i{display:block;width:13px;height:13px;border-radius:3px;background:var(--surface-3)}
.pz-heat .l1,.pz-heat-key .l1{background:color-mix(in srgb,var(--jade) 30%,var(--surface))} .pz-heat .l2,.pz-heat-key .l2{background:color-mix(in srgb,var(--jade) 55%,var(--surface))}
.pz-heat .l3,.pz-heat-key .l3{background:color-mix(in srgb,var(--jade) 80%,var(--surface))} .pz-heat .l4,.pz-heat-key .l4{background:var(--jade)}
.pz-heat-key{display:flex;align-items:center;gap:4px;margin-top:8px}
@media (max-width:900px){.pz-hero{grid-template-columns:1fr}.pz-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .pz-hero{padding:18px;border-radius:18px} .pz-hero::after{font-size:5rem}
  .pz-coach-grid{grid-template-columns:1fr}
  .pz-rs{grid-template-columns:minmax(6em,8em) minmax(0,1fr) auto} .pz-rs>:last-child{display:none}
  .pz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pz-art{height:80px} .pz-glyph{font-size:1.6rem} .pz-body{padding:10px 11px 12px}
  .pz-shead-t b{font-size:1.05rem}
}
@media (max-width:520px){.pz-qbtn{flex-direction:column;align-items:flex-start;gap:6px;padding:11px}.pz-qic{width:32px;height:32px;border-radius:10px}.pz-qbtn small{font-size:.72rem}}
@media (max-width:380px){.pz-quick{grid-template-columns:1fr}.pz-hero-stats{gap:6px}.pz-stat{padding:9px}}
@media (prefers-reduced-motion:reduce){.pz-radar .rd-area,.pz-combo.pop,.pz-session .opt.right,.pz-session .opt.wrong,.q-timer.low{animation:none}.pz-glyph.long{font-size:1.55rem}.pz-glyph.xl{font-size:1.2rem}
.pz-arrow{border:1px solid var(--line-2);background:var(--surface)}
@media (hover:none),(max-width:700px){.pz-arrow{display:none}}
.pz-card:hover .pz-glyph{transform:none}}

/* ---------- Pronunciation Studio (js/learner/views-pronounce.js) ---------- */
.tn1{--tn:var(--tone-1)} .tn2{--tn:var(--tone-2)} .tn3{--tn:var(--tone-3)} .tn4{--tn:var(--tone-4)} .tn5{--tn:var(--tone-5)} .tn6{--tn:var(--tone-6)}
.pn{display:flex;flex-direction:column;gap:22px}
.pn-hero{position:relative;overflow:hidden;border-radius:22px;padding:24px;background:linear-gradient(135deg,var(--violet),color-mix(in srgb,var(--violet) 55%,var(--accent)));color:var(--surface);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;box-shadow:var(--shadow-lg)}
:root[data-theme="night"] .pn-hero,:root[data-theme="dark"] .pn-hero{color:var(--bg)}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .pn-hero,:root[data-theme="auto"] .pn-hero{color:var(--bg)}}
.pn-hero::after{content:"ກ່ ກ້ ກ໊";position:absolute;right:-6px;bottom:-30px;font:800 6.5rem/1 var(--f-lo);opacity:.09;pointer-events:none;white-space:nowrap}
.pn-hero .eyebrow{color:inherit;opacity:.85}
.pn-hero h1{font-size:clamp(1.5rem,3vw,2.05rem);margin:4px 0 8px}
.pn-hero p{max-width:60ch;opacity:.92}
.pn-hero-side{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1}
.pn-levels{display:flex;gap:8px}
.pn-levels div{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:12px;background:color-mix(in srgb,currentColor 12%,transparent);min-width:72px}
.pn-levels small{font-size:.68rem;opacity:.85;text-align:center} .pn-levels b{font:800 1.1rem var(--f-display)}
.pn-cta{background:var(--surface);color:var(--violet);border-color:transparent;font-weight:700;max-width:100%}
.pn-cta2{background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;border-color:color-mix(in srgb,currentColor 30%,transparent)}
.pn-hero .pn-cta,.pn-hero .pn-cta2{white-space:normal;text-align:left}
.pn-hero .pn-ring .bg{stroke:color-mix(in srgb,currentColor 22%,transparent)} .pn-hero .pn-ring .fg{stroke:currentColor} .pn-hero .pn-ring text{fill:currentColor}
.pn-ring .bg{fill:none;stroke:var(--surface-3);stroke-width:7} .pn-ring .fg{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1)}
.pn-ring text{font:800 20px var(--f-display);fill:var(--ink)}
.pn-ring.none .fg{display:none}
.pn-ring.hi .fg{stroke:var(--jade)} .pn-ring.mid .fg{stroke:var(--warn)} .pn-ring.lo .fg{stroke:var(--bad)}
.pn-l1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:6px}
.pn-profile h3{margin-bottom:10px}
.pn-tones{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end}
.pn-tonebar{display:flex;flex-direction:column;align-items:center;gap:4px}
.pn-tb{height:92px;width:100%;max-width:34px;border-radius:9px;background:var(--surface-2);display:flex;align-items:flex-end;overflow:hidden}
.pn-tb i{display:block;width:100%;background:var(--tn);border-radius:9px;transition:height .8s cubic-bezier(.2,.8,.2,1)}
.pn-tonebar b{color:var(--tn);font-weight:800} .pn-tonebar small{font-size:.72rem;color:var(--ink-3)}
.pn-area h2{display:flex;align-items:center;gap:6px}
.pn-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pn-unit{position:relative;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px;color:inherit;min-width:0}
.pn-unit:hover{border-color:var(--violet);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.pn-unit.next{border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 18%,transparent)}
.pn-unit.done .pn-step{background:var(--jade);color:var(--surface)}
.pn-step{position:absolute;left:-8px;top:-8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;background:var(--surface-3);color:var(--ink-2);border:2px solid var(--bg)}
.pn-unit-art{width:56px;height:56px;border-radius:14px;flex:none;display:grid;place-items:center;font:700 1rem/1.1 var(--f-lo);text-align:center;color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,var(--surface));overflow:hidden;padding:2px}
.pn-unit-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pn-unit-b b{line-height:1.25} .pn-unit-b small{color:var(--ink-3);font-size:.78rem}
.pn-next{position:static;--trk:var(--violet)}
.pn-hist{display:flex;flex-wrap:wrap;gap:8px}
.pn-hchip{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:99px;background:var(--surface-2);border-left:3px solid var(--ink-3)}
.pn-hchip.hi{border-color:var(--jade)} .pn-hchip.mid{border-color:var(--warn)} .pn-hchip.lo{border-color:var(--bad)}
.pn-hchip b{font:600 1.05rem var(--f-lo)}
.pn-refs{justify-content:flex-end}
/* a unit */
.pn-unitv{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto;width:100%}
.pn-uhead{display:flex;align-items:center;gap:12px}
.pn-uhead-t{display:flex;flex-direction:column;flex:1;min-width:0}
.pn-uhead-t small{color:var(--violet);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.pn-uhead-t b{font:800 1.25rem/1.2 var(--f-display)}
.pn-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--surface-2);padding:5px;border-radius:14px}
.pn-tab{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;border-radius:10px;padding:9px 6px;font-weight:600;color:var(--ink-2);font-size:.9rem;min-width:0}
.pn-tab .ic{width:var(--ic-sm);height:var(--ic-sm)}
.pn-tab[aria-selected="true"]{background:var(--surface);color:var(--violet);box-shadow:var(--shadow-sm)}
.pn-tabn{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;background:var(--surface-3);flex:none}
.pn-tab[aria-selected="true"] .pn-tabn{background:var(--violet);color:var(--surface)}
.pn-can{background:var(--jade-2);color:var(--jade);white-space:normal;align-self:flex-start;padding:5px 11px;line-height:1.35}
.pn-explain{font-size:1.05rem;line-height:1.6}
.pn-tip{border-left:4px solid var(--violet);background:color-mix(in srgb,var(--violet) 7%,var(--surface));border-radius:12px;padding:12px 14px}
.pn-tip b{color:var(--violet);display:block;margin-bottom:4px}
.pn-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pn-wordbtn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;text-align:left;color:inherit;position:relative}
.pn-wordbtn:hover{border-color:var(--violet)}
.pn-wordbtn .ic{position:absolute;right:8px;top:8px;width:var(--ic-sm);height:var(--ic-sm);color:var(--violet)}
.pn-wl{font:700 1.35rem/1.3 var(--f-lo)} .pn-wordbtn small{color:var(--ink-3)}
.pn-syls{display:inline-flex;flex-wrap:wrap;gap:4px}
.pn-syl{display:inline-flex;align-items:baseline;gap:3px;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,var(--tn) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--tn) 40%,transparent)}
.pn-syl b{font:600 .95rem var(--f-lo);color:var(--ink)} .pn-syl small{font-size:.7rem;font-weight:800;color:color-mix(in srgb,var(--tn) 75%,var(--ink))}
.pn-say{display:flex;flex-direction:column;gap:14px}
.pn-word{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pn-lao{font:700 clamp(2rem,6vw,2.8rem)/1.3 var(--f-lo)} .pn-py{color:var(--ink-2);font-size:1.05rem} .pn-mean{color:var(--ink-3)}
.pn-play{justify-content:center}
.pn-src{background:var(--surface-2);color:var(--ink-2)}
.pn-chart-wrap{display:flex;flex-direction:column;gap:6px;width:100%;max-width:520px;margin:0 auto}
.pn-chart{width:100%;height:auto;display:block}
.pn-chart .frame{fill:var(--surface-2);stroke:var(--line)}
.pn-chart .sep{stroke:var(--line-2);stroke-dasharray:3 4}
.pn-chart .syl{font:600 11px var(--f-lo);fill:var(--tn,var(--ink-2))}
.pn-chart .pn-t{fill:none;stroke:color-mix(in srgb,var(--violet) 30%,transparent);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.pn-chart .pn-y{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pn-chart .pn-live{fill:none;stroke:var(--jade);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pn-legend{display:flex;align-items:center;gap:6px;justify-content:center;color:var(--ink-3)}
.pn-legend .k{display:inline-block;width:18px;height:6px;border-radius:9px;margin-left:8px} .pn-legend .k.t{background:color-mix(in srgb,var(--violet) 35%,transparent);height:9px} .pn-legend .k.y{background:var(--accent)}
.pn-microw{display:flex;flex-direction:column;align-items:center;gap:8px}
.pn-mic{width:76px;height:76px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--violet);color:var(--surface);box-shadow:0 6px 18px color-mix(in srgb,var(--violet) 35%,transparent);position:relative}
.pn-mic .ic{width:var(--ic-hero);height:var(--ic-hero)}
.pn-mic:disabled{opacity:.45;cursor:not-allowed}
.pn-mic.on{background:var(--bad)}
.pn-mic.on::before,.pn-mic.on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--bad);opacity:.5;animation:pnPulse 1.4s ease-out infinite}
.pn-mic.on::after{animation-delay:.7s}
@keyframes pnPulse{from{transform:scale(.9);opacity:.6}to{transform:scale(1.45);opacity:0}}
.pn-status{text-align:center;min-height:1.4em}
.pn-res{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pn-verdict{font-size:1.05rem}
.pn-bar{display:grid;grid-template-columns:minmax(6em,8em) minmax(0,1fr) 2.5em;gap:10px;align-items:center;font-size:.88rem}
.pn-bar .bar i{background:var(--violet)}
.pn-tips{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pn-tips li{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:12px;background:var(--warn-2);color:var(--ink)}
.pn-tips .ic{flex:none;width:var(--ic-sm);height:var(--ic-sm);color:var(--warn);margin-top:3px}
.pn-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pn-dot{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);font-size:.78rem;font-weight:700;color:var(--ink-2)}
.pn-dot.cur{border-color:var(--violet);color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 18%,transparent)}
.pn-dot.hi{background:var(--jade-2);border-color:var(--jade)} .pn-dot.mid{background:var(--warn-2);border-color:var(--warn)} .pn-dot.lo{background:var(--bad-2);border-color:var(--bad)}
.pn-checkres{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
@media (max-width:700px){
  .pn-hero{grid-template-columns:1fr;padding:18px;border-radius:18px} .pn-hero-side{flex-direction:row;justify-content:space-between;flex-wrap:wrap}
  .pn-profile-grid{grid-template-columns:1fr}
  .pn-tab{flex-direction:column;gap:2px;font-size:.78rem;padding:7px 4px} .pn-tab .ic{display:none}
  .pn-units{grid-template-columns:1fr}
  .pn-bar{grid-template-columns:minmax(5.5em,7em) minmax(0,1fr) 2.2em}
}
@media (prefers-reduced-motion:reduce){.pn-mic.on::before,.pn-mic.on::after{animation:none}.pn-tb i,.pn-ring .fg{transition:none}}

/* ---------- Smart Review (js/learner/views-review.js) ---------- */
.c-tone{--cz:var(--tone-5)} .c-length{--cz:var(--tone-3)} .c-lookalike{--cz:var(--accent)} .c-vowel{--cz:var(--t2)} .c-order{--cz:var(--tone-6)}
.c-related{--cz:var(--jade)} .c-meaning{--cz:var(--violet)} .c-other{--cz:var(--ink-3)} .c-forgetting{--cz:var(--bad)} .c-slow{--cz:var(--warn)} .c-hard{--cz:var(--tone-4)}
.rv{display:flex;flex-direction:column;gap:24px}
.rv-hero{position:relative;overflow:hidden;border-radius:22px;padding:24px;background:linear-gradient(135deg,var(--jade),color-mix(in srgb,var(--jade) 50%,var(--accent)));color:var(--surface);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px 24px;box-shadow:var(--shadow-lg)}
:root[data-theme="night"] .rv-hero,:root[data-theme="dark"] .rv-hero{color:var(--bg)}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .rv-hero,:root[data-theme="auto"] .rv-hero{color:var(--bg)}}
.rv-hero::after{content:"✓ ✗ ↺";position:absolute;right:6px;bottom:-26px;font:800 6rem/1 var(--f-display);opacity:.08;pointer-events:none}
.rv-hero .eyebrow{color:inherit;opacity:.85} .rv-hero h1{font-size:clamp(1.5rem,3vw,2.05rem);margin:4px 0 8px} .rv-hero p{max-width:60ch;opacity:.92}
.rv-cta{background:var(--surface);color:var(--jade);border-color:transparent;font-weight:700}
.rv-cta2{background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;border-color:color-mix(in srgb,currentColor 30%,transparent)}
.rv-hero .btn:disabled{opacity:.55}
.rv-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-self:center;position:relative;z-index:1}
.rv-stats div{display:flex;flex-direction:column;padding:12px;border-radius:14px;background:color-mix(in srgb,currentColor 12%,transparent)}
.rv-stats b{font:800 1.5rem/1.1 var(--f-display)} .rv-stats span{font-size:.78rem;opacity:.85}
.rv-empty{display:flex;flex-direction:column;align-items:center;gap:10px}
.rv-causes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.rv-ccard{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--cz)}
.rv-ccard .btn{align-self:flex-start;margin-top:auto}
.rv-cic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--cz) 15%,var(--surface));color:var(--cz)}
.rv-cic .ic{width:var(--ic-md);height:var(--ic-md)}
.rv-cn{font:800 1.6rem/1 var(--f-display);color:var(--cz)}
.rv-cw{display:flex;flex-wrap:wrap;gap:6px} .rv-cw span{font:600 1.05rem var(--f-lo);padding:1px 9px;border-radius:99px;background:var(--surface-2)}
.rv-list{display:flex;flex-direction:column;gap:8px}
.rv-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.rv-item[open]{border-color:var(--line-2);box-shadow:var(--shadow)}
.rv-item summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;list-style:none}
.rv-item summary::-webkit-details-marker{display:none}
.rv-k{font:700 1.45rem/1.25 var(--f-lo)} .rv-m{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rv-tag{background:color-mix(in srgb,var(--cz) 12%,var(--surface));color:color-mix(in srgb,var(--cz) 72%,var(--ink))} .rv-tag .ic{width:var(--ic-xs);height:var(--ic-xs)}
.rv-hist{display:flex;gap:3px} .rv-hist i{width:8px;height:8px;border-radius:50%;background:var(--surface-3)} .rv-hist i.ok{background:var(--jade)} .rv-hist i.no{background:var(--bad)}
.rv-detail{padding:4px 14px 14px;display:flex;flex-direction:column;gap:12px;border-top:1px dashed var(--line)}
.rv-why{display:flex;flex-direction:column;gap:10px}
.rv-cause{border-left:3px solid var(--cz);padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--cz) 6%,var(--surface));display:flex;flex-direction:column;gap:6px}
.rv-cause-h{display:flex;align-items:center;gap:6px;color:color-mix(in srgb,var(--cz) 72%,var(--ink))} .rv-cause-h .ic{width:var(--ic-sm);height:var(--ic-sm)}
.rv-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rv-cmp{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--surface);border:1.5px solid var(--line)}
.rv-cmp.ok{border-color:var(--jade)} .rv-cmp.no{border-color:var(--bad)}
.rv-cmp small{color:var(--ink-3);font-size:.72rem;min-width:4.5em}
.rv-diffw{font:700 1.5rem/1.3 var(--f-lo);flex:1}
.rv-diffw mark{background:color-mix(in srgb,var(--warn) 30%,transparent);color:inherit;border-radius:5px;padding:0 2px;box-shadow:inset 0 -3px 0 var(--warn)}
.rv-tip{display:flex;gap:4px;align-items:flex-start} .rv-tip .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--warn);flex:none;margin-top:2px}
.rv-fc{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end}
.rv-fcb{display:flex;flex-direction:column;align-items:center;gap:4px}
.rv-fcbar{height:90px;width:100%;max-width:36px;border-radius:9px;background:var(--surface-2);display:flex;align-items:flex-end;overflow:hidden}
.rv-fcbar i{display:block;width:100%;background:var(--jade);border-radius:9px;min-height:2px}
.rv-fcb small{font-size:.72rem;color:var(--ink-3)}
.rv-session{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;width:100%}
.rv-session .quiz{width:100%;max-width:none}
.rv-session .qzh,.rv-session .opt.hz,.rv-session .tile{font-family:var(--f-lo)}
.rv-session .qbox{border-top:4px solid var(--jade);border-radius:18px}
@media (max-width:760px){
  .rv-hero{grid-template-columns:1fr;padding:18px;border-radius:18px}
  .rv-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .rv-stats div{padding:9px} .rv-stats b{font-size:1.2rem}
  .rv-item summary{grid-template-columns:auto minmax(0,1fr);row-gap:6px} .rv-tags{justify-content:flex-start}
  .rv-compare{grid-template-columns:1fr}
}
@media (max-width:420px){.rv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Safari before 16.2 has no color-mix(): plain token colours for the tinted panels (the layout stays the same) */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pz-art,.pz-mini-art,.pz-row-ic,.pn-unit-art,.rv-cic,.pz-in-ic,.pn-syl{background:var(--surface-2)}
  .pz-trk-ic{background:var(--surface)} .pz-newchip{background:var(--surface-2);color:var(--ink-2)}
  .pz-mode,.pz-shead-t small,.rv-tag,.rv-cause-h{color:var(--ink-2)}
  .pz-qbtn,.pz-stat,.pz-meter{background:rgba(255,255,255,.14)} .pz-qbtn{border-color:rgba(255,255,255,.3)}
  .pn-levels div,.rv-stats div{background:rgba(255,255,255,.14)}
}

/* ---------- side menu: folding sections, rail, "Find a page" (js/shared/sidenav.js) ---------- */
.sn{gap:2px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.sn .brand{padding-bottom:12px}
.sn-find{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink-3);font-size:.9rem;text-align:left}
.sn-find:hover{border-color:var(--line-2);color:var(--ink-2)}
.sn-find .ic{width:var(--ic-sm);height:var(--ic-sm)}
.sn-find .sn-lbl{flex:1}
.sn-kbd{font:600 .7rem/1 var(--f-ui);padding:3px 6px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);white-space:nowrap}
.sn-sec{display:flex;flex-direction:column}
.sn-head{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:12px 12px 4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;border-radius:8px}
.sn-head:hover{color:var(--ink-2)}
.sn-head .sn-lbl{flex:1}
.sn-chev{width:var(--ic-xs);height:var(--ic-xs);transition:transform .25s ease}
.sn-sec.closed .sn-chev{transform:rotate(-90deg)}
.sn-items{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}
.sn-sec.closed .sn-items{grid-template-rows:0fr}
.sn-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding-top:2px}
.sn-sec.closed .sn-inner{visibility:hidden;transition:visibility 0s .25s}
.sn .nav-btn{padding:8px 12px}
.sn .nav-btn .sn-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-extra:empty{display:none}
.sn-extra .count{margin-left:0}
.sn-admin{color:var(--accent);font-weight:600;text-decoration:none;margin-top:8px}
.sn .side-foot{padding-top:12px}
.sn-rail-btn{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:8px 12px;border-radius:var(--r-s);color:var(--ink-3);font-size:.85rem;font-weight:600;text-align:left}
.sn-rail-btn:hover{background:var(--surface-2);color:var(--ink-2)}
.sn-rail-btn .ic{width:var(--ic-md);height:var(--ic-md);transition:transform .25s ease}
/* the rail: icons only (wide screens; phones use the tab bar) */
@media (min-width:901px){
  html.sn-rail .app{grid-template-columns:76px minmax(0,1fr)}
  html.sn-rail .sn{padding:14px 10px;align-items:stretch}
  html.sn-rail .sn .sn-lbl,html.sn-rail .sn .sn-kbd,html.sn-rail .sn .sn-chev{display:none}
  html.sn-rail .sn .brand{justify-content:center;padding:4px 0 12px}
  html.sn-rail .sn-find,html.sn-rail .sn .nav-btn,html.sn-rail .sn-rail-btn{justify-content:center;padding:10px 0}
  html.sn-rail .sn-head{height:1px;padding:0;margin:8px 10px;background:var(--line);pointer-events:none}
  html.sn-rail .sn-sec.closed .sn-items{grid-template-rows:1fr} html.sn-rail .sn-sec.closed .sn-inner{visibility:visible}
  html.sn-rail .sn .nav-btn .sn-extra{position:absolute;top:2px;right:6px} html.sn-rail .sn-extra .navlock{display:none}
  html.sn-rail .sn-extra .count{font-size:.62rem;padding:0 5px}
  html.sn-rail .sn .side-foot{justify-content:center} html.sn-rail .sn .side-foot .netdot{font-size:0}
  html.sn-rail .sn-rail-ic{transform:rotate(180deg)}
}
/* Find a page */
.pal-scrim{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--ink) 30%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:palFade .15s ease}
.pal{position:fixed;z-index:91;top:12vh;left:50%;transform:translateX(-50%);width:min(600px,calc(100vw - 32px));max-height:min(560px,76vh);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(10,27,46,.28);overflow:hidden;animation:palIn .18s cubic-bezier(.2,.9,.3,1.1)}
.pal-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pal-top .ic{color:var(--ink-3)}
.pal-in{flex:1;border:0;background:none;font-size:1.05rem;outline:none;min-width:0}
.pal-in::-webkit-search-cancel-button{display:none}
.pal-list{overflow-y:auto;padding:6px;overscroll-behavior:contain}
.pal-sep{padding:8px 10px 4px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pal-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:9px 10px;border-radius:10px;text-align:left;color:var(--ink)}
.pal-item .ic{color:var(--ink-3)}
.pal-item .pal-l{flex:1;min-width:0;font-weight:600}
.pal-item small{color:var(--ink-3);font-size:.78rem;white-space:nowrap}
.pal-item[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.pal-item[aria-selected="true"] .ic,.pal-item[aria-selected="true"] small{color:inherit;opacity:.9}
.pal-none{padding:20px;text-align:center;color:var(--ink-3)}
.pal-hint{padding:8px 14px;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-3)}
@keyframes palIn{from{opacity:0;transform:translate(-50%,-8px) scale(.98)}}
@keyframes palFade{from{opacity:0}}
@media (max-width:600px){.pal{top:8px;max-height:calc(100dvh - 16px);border-radius:14px}.pal-hint{display:none}}
@media (prefers-reduced-motion:reduce){.sn-items,.sn-chev,.pal,.pal-scrim{transition:none;animation:none}}
@supports not (color: color-mix(in srgb, red 50%, blue)){.pal-scrim{background:rgba(10,27,46,.3)}}

/* ---------- Tone & sound lab, lab tabs, responsive table (views-soundlab.js, views-labs.js) ---------- */
/* segmented control (iOS style): the tabs of a combined menu entry */
.sl-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);max-width:520px}
.sl-seg4{max-width:none}
.sl-seg button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;border-radius:9px;padding:8px 10px;font-size:.88rem;font-weight:600;color:var(--ink-2);min-width:0}
.sl-seg button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-seg button .ic{width:var(--ic-sm);height:var(--ic-sm);flex:none}
.sl-seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,27,46,.12)}
@media (max-width:600px){.sl-seg4{grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.sl-seg4::-webkit-scrollbar{display:none}.sl-seg4 button{font-size:.82rem;padding:7px 12px}.sl-seg4 button span{overflow:visible}}
.sl{display:flex;flex-direction:column;gap:26px;max-width:860px;margin:0 auto;width:100%}
.sl-head h1{font-size:clamp(1.6rem,3vw,2.1rem)} .sl-head p{color:var(--ink-2);margin-top:6px;max-width:62ch}
/* inset grouped lists */
.sl-group{display:flex;flex-direction:column;gap:8px}
.sl-gt{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding-left:14px}
.sl-note{font-size:.88rem;color:var(--ink-3);padding-left:14px;margin-top:-4px}
.sl-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sl-row{display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:52px}
.sl-row + .sl-row{border-top:1px solid var(--line)}
.sl-row.muted{color:var(--ink-3)}
/* the six tones */
.sl-tones{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sl-tone{display:flex;flex-direction:column;gap:8px;text-align:left;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:inherit}
.sl-tone:hover{border-color:var(--tn)}
.sl-tone-h{display:flex;align-items:center;gap:8px}
.sl-tone-h b{flex:1;min-width:0;font-size:.98rem}
.sl-tone-h small{font:700 .78rem var(--f-display);color:var(--ink-3)}
.sl-tchip{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:99px;font:800 .8rem/1 var(--f-display);background:var(--tn,var(--accent));color:var(--surface)}
.sl-spark{width:100%;height:46px;border-radius:10px;background:var(--surface-2)}
.sl-spark .g{stroke:var(--line);stroke-width:1}
.sl-spark polyline{fill:none;stroke:var(--tn);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sl-ex{display:flex;flex-wrap:wrap;gap:6px}
.sl-ex span,.sl-ex button{font:600 1.05rem/1.3 var(--f-lo);padding:3px 10px;border-radius:99px;background:var(--surface-2);border:0;color:var(--ink);cursor:pointer}
.sl-ex span:hover,.sl-ex button:hover{background:var(--accent-2)}
/* finder */
.sl-finder{display:flex;gap:8px}
.sl-input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:12px;padding:10px 14px;font-size:1.35rem;background:var(--surface)}
.sl-chips{display:flex;flex-wrap:wrap;gap:6px}
.sl-chips button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 12px;font-size:1rem}
.sl-chips button:hover{border-color:var(--accent)}
.sl-syl,.sl-anat{flex-wrap:wrap}
.sl-sylw{font:700 1.7rem/1.3 var(--f-lo);border:0;background:none;padding:0 4px;min-width:2.6em;text-align:left;color:var(--ink)}
.sl-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px;flex:1;min-width:220px}
.sl-why span{display:flex;flex-direction:column} .sl-why small{font-size:.7rem;color:var(--ink-3)} .sl-why b{font-size:.9rem}
.sl-res{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--tn)}
/* rules matrix */
.sl-rules{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sl-rr{display:grid;grid-template-columns:minmax(110px,1.4fr) repeat(5,minmax(0,1fr));align-items:center;gap:6px;padding:10px 14px}
.sl-rr + .sl-rr{border-top:1px solid var(--line)}
.sl-rh{background:var(--surface-2);font-size:.74rem;font-weight:700;color:var(--ink-3);text-align:center}
.sl-rr > span{display:flex;justify-content:center} .sl-rr > span:first-child{flex-direction:column;align-items:flex-start;justify-content:center}
.sl-rr small{font-size:.75rem;color:var(--ink-3);line-height:1.3}
/* pairs, finals, vowels */
.sl-pairs{flex-wrap:wrap;gap:8px}
.sl-word{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:6px 12px;color:inherit}
.sl-word b{font:700 1.3rem/1.2 var(--f-lo)} .sl-word small{color:var(--ink-3)}
.sl-tns{display:inline-flex;gap:2px}
.sl-word .sl-tchip{min-width:20px;height:20px;font-size:.7rem}
.sl-final{flex-wrap:wrap}
.sl-fl{font:700 1.6rem/1 var(--f-lo);min-width:2.2em;color:var(--accent)}
.sl-fd{flex:1;min-width:180px;display:flex;flex-direction:column} .sl-fd small{color:var(--ink-3)}
.sl-vp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sl-v{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:8px 12px;text-align:left;color:inherit}
.sl-v small{font-size:.7rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.sl-v b{font:700 1.35rem/1.2 var(--f-lo);color:var(--accent)} .sl-v span{font:600 1.1rem var(--f-lo)}
.sl-v.long b{color:var(--violet)}
.sl-v .ic{color:var(--ink-3)}
.sl-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1;min-width:240px}
.sl-part{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:10px;background:var(--surface-2);text-align:center}
.sl-part b{font:700 1.25rem/1.3 var(--f-lo)} .sl-part small{font-size:.66rem;color:var(--ink-3);line-height:1.2}
.sl-part.p-init b{color:var(--accent)} .sl-part.p-vow b{color:var(--violet)} .sl-part.p-mark b{color:var(--tone-3)} .sl-part.p-fin b{color:var(--jade)}
.sl-cta{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:640px){
  .sl-why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-rr{grid-template-columns:minmax(78px,1fr) repeat(5,minmax(0,1fr));padding:9px 10px;gap:3px} .sl-rh{font-size:.62rem}
  .sl-rr small{display:none}
  .sl-vp{grid-template-columns:1fr}
  .sl-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* responsive table: a table where there is room, one card per row where there is not */
.rtable-wrap{container-type:inline-size;container-name:rtable}
.rtable{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.92rem}
.rtable th,.rtable td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.rtable tr:last-child > *{border-bottom:0}
.rtable thead th{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);white-space:nowrap}
.rtable .rt-key{font-weight:700;color:var(--accent);min-width:150px}
.rtable .rt-lao{font-size:1.1rem;line-height:1.5}
.rtable .rt-note{color:var(--ink-2);font-size:.86rem;min-width:180px}
@container rtable (max-width:720px){
  .rtable,.rtable tbody,.rtable tr,.rtable th,.rtable td{display:block;width:100%}
  .rtable{border:0;background:none;border-radius:0}
  .rtable thead{display:none}
  .rtable tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
  .rtable .rt-key{background:var(--surface-2);border-bottom:1px solid var(--line)}
  .rtable td{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:10px;border-bottom:1px solid var(--line)}
  .rtable td::before{content:attr(data-label);font:700 .72rem/1.6 var(--f-ui);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
  .rtable tr > :last-child{border-bottom:0}
}
@supports not (container-type:inline-size){@media (max-width:760px){.rtable thead{display:none}.rtable tr,.rtable td,.rtable th{display:block}.rtable td::before{content:attr(data-label) " · ";color:var(--ink-3);font-size:.75rem}}}
/* ---------- Pattern Studio (js/learner/views-patterns.js): the map, cards, pattern of the day, one pattern ---------- */
.ps,.ps-browse{grid-template-columns:minmax(0,1fr)} .ps > *,.ps-browse > *{min-width:0}
.ps-hero{background:linear-gradient(135deg,var(--violet-2),var(--accent-2) 45%,var(--surface) 85%)}
.ps-hero .gs-hero-txt .row{flex-wrap:wrap}
.ps-go .lo{font-family:var(--f-lo);font-weight:700}
.ps-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ps-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:start;padding:12px 14px;min-height:64px;
  border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.ps-stat:hover{transform:translateY(-1px);border-color:var(--accent)}
.ps-stat[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ps-stat-ic{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--surface-2)}
.ps-stat-ic .ic{width:var(--ic-md);height:var(--ic-md)}
.ps-stat b{font:800 1.35rem/1.1 var(--f-display)} .ps-stat small{color:var(--ink-3);font-size:.78rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-stat[data-s="mastered"] .ps-stat-ic{background:var(--jade-2);color:var(--jade)}
.ps-stat[data-s="learning"] .ps-stat-ic{background:var(--accent-2);color:var(--accent)}
.ps-stat[data-s="review"] .ps-stat-ic{background:var(--warn-2);color:var(--warn)}
.ps-stat[data-s="new"] .ps-stat-ic{background:var(--violet-2);color:var(--violet)}
.ps-daily{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;border:1.5px solid var(--line);
  background:linear-gradient(120deg,var(--warn-2),var(--surface) 55%)}
.ps-daily-l{display:grid;gap:4px;min-width:0;flex:1 1 260px} .ps-daily-l p{margin:0;color:var(--ink-2)}
.ps-daily-l .eyebrow{display:inline-flex;align-items:center;gap:6px} .ps-daily-l .eyebrow .ic{width:var(--ic-sm);height:var(--ic-sm);color:var(--warn)}
.ps-daily-hz{gap:10px;align-items:center} .ps-daily-hz b{font:700 clamp(1.6rem,4.5vw,2.3rem)/1.35 var(--f-lo);overflow-wrap:anywhere}
.ps-daily-r{display:grid;gap:12px;justify-items:end;flex:1 1 260px;min-width:0}
.ps-drill{display:grid;gap:12px;padding:16px;border-radius:var(--r);border:1.5px solid var(--accent);background:var(--surface)}
.ps-drill h2{margin:0;font-size:1.1rem;display:flex;align-items:center;gap:6px}
.ps-browse{display:grid;gap:12px}
.ps-bar{position:sticky;top:var(--sticky-top,0px);transition:top .28s ease;z-index:3;background:var(--bg);padding:6px 0;margin:0 -2px}
.ps-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;-webkit-overflow-scrolling:touch}
.ps-tabs::-webkit-scrollbar{display:none}
.ps-tab{flex:none;display:grid;gap:4px;min-width:92px;padding:8px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;text-align:start;cursor:pointer}
.ps-tab b{font-size:.9rem;color:var(--ink)} .ps-tab small{font-size:.72rem;color:var(--ink-3)}
.ps-tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-2)}
.ps-tab-bar{--p:0;display:block;height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.ps-tab-bar i{display:block;height:100%;width:calc(var(--p)*1%);background:var(--jade);border-radius:inherit}
.ps-bar2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ps-search{flex:1 1 240px;min-width:0} .ps-status{flex:0 1 180px;min-width:0}
.ps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ps-card{position:relative;display:grid;gap:8px;align-content:start;text-align:start;padding:14px;border-radius:var(--r);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-width:0;overflow:hidden;transition:transform .18s ease,border-color .18s,box-shadow .18s}
.ps-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--surface-3)}
.ps-card[data-status="learning"]::before{background:var(--accent)} .ps-card[data-status="mastered"]::before{background:var(--jade)}
.ps-card[data-status="review"]::before{background:var(--warn)} .ps-card[data-status="new"]::before{background:var(--violet)}
.ps-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.ps-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ps-card.locked{opacity:.8;border-style:dashed}
.ps-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ps-no{font:800 .8rem var(--f-display);color:var(--ink-3);letter-spacing:.02em}
.ps-card-hz{font:700 1.55rem/1.4 var(--f-lo);overflow-wrap:anywhere}
.ps-card-py{font-size:.85rem;color:var(--ink-2)}
.ps-card-m{color:var(--ink-2);font-size:.92rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ps-card-f .gs-formula{gap:4px} .ps-card-f .gb{min-height:30px;padding:3px 8px;border-radius:9px} .ps-card-f .gb b{font-size:.78rem} .ps-card-f .gb b.lo{font-size:.95rem}
.ps-card-f .gs-plus{font-size:.75rem}
.ps-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.ps-head{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:space-between;align-items:flex-start;background:linear-gradient(135deg,var(--accent-2),var(--surface) 60%)}
.ps-head-l{display:grid;gap:4px;min-width:0;flex:1 1 300px}
.ps-head-meta{gap:8px;flex-wrap:wrap}
.ps-head-hz{gap:10px;align-items:center} .ps-head-hz h1{margin:0;font:700 clamp(2rem,6vw,3rem)/1.3 var(--f-lo);overflow-wrap:anywhere}
.ps-say{width:48px;height:48px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line)}
.ps-head-py{font-size:1.1rem}
.ps-head-m{margin:4px 0 0;font-size:1.1rem;font-weight:600} .ps-head-sub{margin:0;color:var(--ink-2)}
.ps-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ps-mini-ring{--p:0;width:64px;height:64px;border-radius:50%;display:grid;place-content:center;
  background:radial-gradient(closest-side,var(--surface) 74%,transparent 76% 100%),conic-gradient(var(--jade) calc(var(--p)*1%),var(--surface-3) 0)}
.ps-mini-ring b{font:800 .95rem var(--f-display)}
.ps-note{display:flex;gap:8px;align-items:flex-start;margin:6px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink-2)}
.ps-note .ic{flex:none;width:var(--ic-sm);height:var(--ic-sm);margin-top:3px;color:var(--accent)}
.ps-reveal-btn{justify-self:start}
.ps-lab{display:grid;gap:12px;border:1.5px dashed var(--accent);background:linear-gradient(135deg,var(--accent-2),var(--surface) 70%)}
.ps-lab h3{margin:0;display:flex;align-items:center;gap:6px} .ps-lab p{margin:2px 0 0}
.ps-fresh{animation:fcIn .3s ease;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ps-item .wordchips{align-items:center}
@media (max-width:760px){.ps-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ps-daily-r{justify-items:start}}
@media (max-width:520px){.ps-grid{grid-template-columns:minmax(0,1fr)}.ps-head-r{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .ps-hero{position:relative}.ps-hero h1{padding-right:84px}.ps-hero .gs-ring{position:absolute;top:14px;right:14px;width:76px;height:76px}
  .ps-hero .gs-ring b{font-size:1rem}.ps-hero .gs-ring small{font-size:.62rem}.ps-stat{padding:10px}.ps-stat-ic{width:32px;height:32px}}
/* Safari before 16.2 (older iPads on iOS 15) has no color-mix(): a declaration that uses it is dropped, so the blocks
   lost their border and tint. These plain-colour versions apply only there. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .gb{border:1.5px solid var(--rc);background:var(--surface);box-shadow:inset 0 3px 0 var(--rc)}
  .gb[data-role="M"]{border-width:2px;box-shadow:inset 0 -3px 0 var(--accent)}
  .gs-answer.ok,.gs-opt.right{background:var(--jade-2)} .gs-opt.wrong{background:var(--bad-2)}
  .gs-step.on,.ps-stat[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent-2)}
  .gs-card[data-status="mastered"]{border-color:var(--jade)} .gs-card[data-status="review"]{border-color:var(--warn)}
  .ps-fresh{border-color:var(--accent)}
}
/* ---------- writing on a phone: one-letter view, Next letter, pen settings (views-handwriting.js, cellpad.js, smooth.js) ---------- */
.cp,.hwp{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.cp-map,.cp-pos{display:none}
.cp.focus{overflow:visible;display:grid;gap:8px;justify-items:center}
.cp.focus .cp-map{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%}
.cp-thumb{display:block;border-radius:10px;transition:transform .2s ease}
.cp-thumb.on{transform:translateY(-3px)}
.cp.focus .cp-strip{border-radius:22px}
.hww-switches{gap:8px;flex-wrap:wrap}
.hww-view button{display:inline-flex;align-items:center;gap:6px} .hww-view .ic{width:var(--ic-sm);height:var(--ic-sm)}
.hww-nextrow{display:flex;justify-content:center}
.hww-nextrow:has(> [hidden]){display:none}
.hww-next{min-height:52px;min-width:min(100%,320px);justify-content:center;font-size:1.05rem;border-radius:16px}
.hww-next .lo{font-family:var(--f-lo);font-size:1.25rem;font-weight:700}
.hw-pen{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.hw-pen > summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px;cursor:pointer;list-style:none;font-weight:700}
.hw-pen > summary::-webkit-details-marker{display:none}
.hw-pen > summary .ic{width:var(--ic-md);height:var(--ic-md);color:var(--accent)}
.hw-pen-sum{margin-left:auto;font-weight:600;text-align:right}
.hw-pen-body{display:grid;gap:10px;padding:4px 14px 14px}
.hw-pen-body p{margin:0}
.hw-pen-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.hw-pen-range{display:flex;align-items:center;gap:10px;min-width:0}
.hw-pen-range input{flex:1;min-width:0;height:40px;accent-color:var(--accent)}
.hw-pen-range small{color:var(--ink-3);font-size:.75rem}
.hw-pen-row > b{min-width:2.5em;text-align:right}
.hw-pen-prev{width:100%;max-width:360px;height:auto;aspect-ratio:240/64;border-radius:10px;background:var(--surface-2)}
@media (max-width:600px){.hww-model{font-size:2rem}.hw-tools .btn{flex:1 1 auto;justify-content:center}}
/* ---------- iPad / iPhone Safari: scrolling past the end ----------
   1) the page "rubber-bands" past its last line: on iOS / iPadOS (Safari 16+) the bounce of the page itself is
      switched off, and the space a bounce can still show (older iOS) has the page colour, not white;
   2) bars pinned while scrolling that blur what is under them (backdrop-filter) are not painted by iOS Safari during
      a fast scroll or a bounce — the bar and the panels under it flash blank. On iOS they are drawn solid instead;
   3) 100vh on iPad Safari is the height *without* the toolbar, so the sticky side menu ran under the toolbar:
      100dvh (the visible height) where supported.
   @supports (-webkit-touch-callout:none) matches iOS and iPadOS browsers only (all of them use WebKit), so Android
   keeps pull-to-refresh and desktop browsers keep the frosted bars. Checked by scripts/qa_safari.mjs. */
html{background:var(--bg)}
.side{height:100vh;height:100dvh}
@supports (-webkit-touch-callout:none){
  html,body{overscroll-behavior-y:none}
  .topbar,.wl .wl-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  .pmenu{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
}
/* ---------- app frame (iPhone / iPad): the page never scrolls, only the app area does (js/shared/scroller.js) ----------
   iPad Safari moved the pinned tab bar and side menu with the page when it bounced past the end, leaving an empty band.
   With the app as a screen-sized frame there is no page to bounce; the app area's own bounce is switched off, which
   Safari honours for a scrolling element. Only while the app is open (:has(> .app)): the welcome and sign-in pages
   scroll as before. Old iOS without :has() (before 15.4) keeps the normal page. */
html.ios:has(#root > .app),html.ios:has(#root > .app) body{height:100%;overflow:hidden;overscroll-behavior:none}
html.ios:has(#root > .app) #root{height:100vh;height:100dvh;display:flex;flex-direction:column}
html.ios:has(#root > .app) #root > *{flex:none}
html.ios:has(#root > .app) #root > .app{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
html.ios:has(#root > .app) .side{height:var(--frame-h,100dvh)}   /* the visible height of the app area (measured: a demo bar above it is not counted) */