/* Ganaka. Shares the EknathaLabs design tokens. */
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:800;font-display:swap;src:url(/assets/fonts/poppins-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Devanagari';font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+A8E0-A8FF}
@font-face{font-family:'Noto Sans Devanagari';font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-devanagari-devanagari-700-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+A8E0-A8FF}
@font-face{font-family:'Noto Sans Telugu';font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-telugu-telugu-400-normal.woff2) format('woff2');unicode-range:U+0C00-0C7F}
@font-face{font-family:'Noto Sans Telugu';font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-telugu-telugu-700-normal.woff2) format('woff2');unicode-range:U+0C00-0C7F}
@font-face{font-family:'Noto Sans Kannada';font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-kannada-kannada-400-normal.woff2) format('woff2');unicode-range:U+0C80-0CFF}
@font-face{font-family:'Noto Sans Kannada';font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-kannada-kannada-700-normal.woff2) format('woff2');unicode-range:U+0C80-0CFF}
@font-face{font-family:'Noto Sans Tamil';font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-tamil-tamil-400-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF}
@font-face{font-family:'Noto Sans Tamil';font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-tamil-tamil-700-normal.woff2) format('woff2');unicode-range:U+0B80-0BFF}
@font-face{font-family:'Noto Sans Bengali';font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-bengali-bengali-400-normal.woff2) format('woff2');unicode-range:U+0980-09FF,U+200C-200D}
@font-face{font-family:'Noto Sans Bengali';font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-bengali-bengali-700-normal.woff2) format('woff2');unicode-range:U+0980-09FF,U+200C-200D}
@font-face{font-family:'Noto Sans Gujarati';font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-gujarati-gujarati-400-normal.woff2) format('woff2');unicode-range:U+0A80-0AFF}
@font-face{font-family:'Noto Sans Gujarati';font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-gujarati-gujarati-700-normal.woff2) format('woff2');unicode-range:U+0A80-0AFF}
@font-face{font-family:'Noto Sans Malayalam';font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-malayalam-malayalam-400-normal.woff2) format('woff2');unicode-range:U+0D00-0D7F,U+200C-200D}
@font-face{font-family:'Noto Sans Malayalam';font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-malayalam-malayalam-700-normal.woff2) format('woff2');unicode-range:U+0D00-0D7F,U+200C-200D}

:root,:root[data-theme="light"]{--bg:#fff9ee;--surface:#fffdf7;--text:#1c1b4b;--text-muted:#4a4880;--edge:#1c1b4b;--shadow-c:#1c1b4b;--kick:#b4231a;--feat:#fff1c9;--soft:rgba(28,27,75,.08);--band:#1c1b4b;--on-band:#d8d7f5;--field:#ffffff;--accent:#1c1b4b;--accent-text:#fff9ee;color-scheme:light}
:root[data-theme="dark"]{--bg:#0c0b26;--surface:#17163f;--text:#fff9ee;--text-muted:#bdbce6;--edge:#5654b0;--shadow-c:#05041a;--kick:#ff9d8f;--feat:#26245a;--soft:rgba(255,249,238,.1);--band:#1c1b4b;--on-band:#d8d7f5;--field:#0f0e30;--accent:#ffb400;--accent-text:#1c1b4b;color-scheme:dark}
:root[data-theme="new"]{--bg:#eefaf5;--surface:#fbfffd;--text:#0b2f2d;--text-muted:#3a5f5c;--edge:#0b3d3a;--shadow-c:#0b3d3a;--kick:#0d6759;--feat:#fff0c2;--soft:rgba(11,61,58,.09);--band:#0b3d3a;--on-band:#cdeee7;--field:#ffffff;--accent:#0b3d3a;--accent-text:#eefaf5;color-scheme:light}
:root{--ink:#1c1b4b;--gold:#ffb400;--cream:#fff9ee;--indic:'Noto Sans Devanagari','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Tamil','Noto Sans Malayalam','Noto Sans Bengali','Noto Sans Gujarati';--font:'Poppins',var(--indic),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:'JetBrains Mono',var(--indic),ui-monospace,Menlo,monospace;--sh:5px 5px 0 var(--shadow-c);--ease:cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);overflow-x:hidden}
html:not([lang="en"]) body{line-height:1.75;letter-spacing:0}
html:not([lang="en"]) h1,html:not([lang="en"]) h2{overflow-wrap:break-word;letter-spacing:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:12px;top:-300px;z-index:300;background:var(--gold);color:var(--ink);font-weight:700;padding:10px 18px;border-radius:10px;border:2px solid var(--ink)}
.skip:focus{top:12px}
.wrap{width:min(1520px,100% - 48px);margin-inline:auto}
header.top{position:sticky;top:0;z-index:50;background:var(--band);color:var(--on-band);border-bottom:2px solid var(--ink)}
.bar{display:flex;align-items:center;gap:12px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;text-decoration:none;color:var(--cream);white-space:nowrap}
.brand b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gold);color:var(--ink);font-size:17px;border:2px solid var(--cream)}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--on-band);margin-top:-4px}
.bar .grow{flex:1}
.ibtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;border:2px solid var(--cream);background:transparent;color:var(--cream);font:600 14px var(--font);cursor:pointer;white-space:nowrap;text-decoration:none}
.ibtn:hover{background:rgba(255,249,238,.14)}
.pop{position:relative}
.pop-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;width:min(320px,calc(100vw - 32px));background:var(--surface);color:var(--text);border:2px solid var(--edge);border-radius:16px;box-shadow:var(--sh);padding:16px}
.pop-panel[hidden]{display:none}
.pop-panel{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
.pop-panel label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px;color:var(--text-muted)}
.pop-panel label:first-child{margin-top:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-height:40px;padding:6px 10px;border-radius:10px;border:2px solid var(--edge);background:var(--field);color:var(--text);font:600 13px var(--font);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-text)}
input,select,textarea{font:400 16px var(--font);color:var(--text);background:var(--field);border:2px solid var(--edge);border-radius:12px;padding:10px 12px;min-height:46px;width:100%}
textarea{min-height:96px;resize:vertical;font-family:var(--mono);font-size:14px}
select{appearance:auto}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--accent)}
main{padding-block:28px 56px;min-height:60vh}
h1{font-size:clamp(28px,4.4vw,46px);line-height:1.15;margin:.2em 0 .3em;font-weight:800}
h2{font-size:clamp(21px,2.6vw,28px);line-height:1.25;margin:0 0 .6em;font-weight:700}
html:not([lang="en"]) h1{font-size:clamp(24px,3.6vw,38px)}
.lede{color:var(--text-muted);font-size:17px;max-width:72ch;margin:0 0 20px}
.hero{display:grid;gap:6px;padding:18px 0 4px}.hero .lede{margin:0 0 6px}
.card{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);border:2px solid var(--edge);border-radius:18px;text-decoration:none;color:var(--text);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.card .row{display:flex;gap:12px;align-items:center}
.card h3{margin:0;font-size:16px;line-height:1.3;font-weight:700}
.card p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.5}
.card .go{margin-top:auto;font-weight:700;font-size:14px;color:var(--kick)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px}
.abtn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:6px 14px;border-radius:999px;border:2px solid var(--edge);background:var(--surface);color:var(--text);font:600 14px var(--font);cursor:pointer}
.abtn:hover{background:var(--feat)}
.abtn[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.panel{background:var(--surface);border:2px solid var(--edge);border-radius:20px;padding:20px;box-shadow:var(--sh);min-width:0}
.panel h2{font-size:17px;margin:0 0 14px}
.note{margin-top:14px;font-size:13px;color:var(--text-muted);padding:10px 14px;border-left:4px solid var(--gold);background:var(--soft);border-radius:0 10px 10px 0}
.foot{background:var(--band);color:var(--on-band);padding:28px 0;font-size:14px}
.foot a{color:var(--cream)}
.foot .wrap{display:flex;gap:16px 28px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:10px 18px;border-radius:999px;border:2px solid var(--gold);font-weight:600;z-index:200;max-width:90vw}
.toast[hidden]{display:none}
.empty{padding:30px;text-align:center;color:var(--text-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- Bhasha ---- */
.pop-title{font-weight:800;font-size:16px;margin-bottom:6px}
.tabsnav{display:flex;gap:2px;flex-wrap:wrap;padding-block:8px;border-top:1px solid rgba(255,249,238,.2)}
.tabsnav a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 8px;border-radius:999px;border:2px solid transparent;color:var(--on-band);font:600 13.5px var(--font);text-decoration:none}
.tabsnav a:hover{background:rgba(255,249,238,.14)}
.tabsnav a[aria-current="page"]{background:var(--gold);color:var(--ink);border-color:var(--cream)}
@media(max-width:640px){.ibtn .lab{display:none}.ibtn{padding:8px 12px}.brand small{display:none}.tabsnav a{padding:6px 10px;font-size:13px}.tabsnav{gap:4px}}
@media(max-width:380px){.bar{gap:8px}.brand{font-size:17px}.tabsnav{gap:4px}.tabsnav a{padding:6px 8px}}
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:0 0 16px}
.tf{display:grid;gap:4px;min-width:150px;flex:0 1 220px}
.tf.grow{flex:1 1 220px}
.tf label{font-size:13px;font-weight:600;color:var(--text-muted)}
.tf.chk{display:flex;align-items:center;gap:8px;min-height:46px;flex:0 1 auto;max-width:100%}
.tf.chk label,.tf label{overflow-wrap:anywhere;min-width:0}
.tf.chk label{margin:0;color:var(--text)}
.hint{font-size:13px;color:var(--text-muted);margin:8px 0}
.chip{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:999px;border:2px solid var(--edge);background:var(--surface);color:var(--text);font:600 12px var(--font)}
.chip.ok{background:var(--feat)}.chip.lr{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.abtn{text-decoration:none}
.abtn.gold{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.abtn.gold:hover{filter:brightness(1.05)}
.abtn.danger{color:var(--kick)}
.abtn.big{min-height:56px;font-size:18px;padding-inline:26px}
.abtn.wide{width:100%;justify-content:center;min-height:52px;font-size:16px;margin-top:14px}
.abtn:disabled{opacity:.5;cursor:not-allowed}
.abtn.right{background:#2e9e5b;color:#fff;border-color:#1c6b3b}.abtn.wrong{background:#c0392b;color:#fff;border-color:#7b241c}
.center{text-align:center}.center .acts{justify-content:center}
.hero{display:grid;gap:8px;padding:12px 0 8px}.hero .lede{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:14px 0 20px}
.stat{padding:14px;border:2px solid var(--edge);border-radius:16px;background:var(--surface);text-align:center}
.stat b{display:block;font-size:30px;line-height:1.1;font-weight:800}.stat span{font-size:13px;color:var(--text-muted);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:28px}
.card .ci{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--gold);color:var(--ink);font-size:22px;font-weight:800;border:2px solid var(--ink)}
.card h2{font-size:18px;margin:4px 0 0}.card p{font-size:14px}
.steps{margin:0;padding-left:22px;display:grid;gap:6px}
/* words */
.tk{cursor:pointer;border-radius:6px;padding:0 1px;transition:background .15s}
.tk:hover{background:var(--soft)}
.tk.sel{outline:2px solid var(--gold);outline-offset:1px}
.tk.new{background:rgba(255,180,0,.30)}.tk.learn{background:rgba(70,130,255,.2)}
[data-theme=dark] .tk.new{background:rgba(255,180,0,.28)}[data-theme=dark] .tk.learn{background:rgba(110,160,255,.3)}
.nocolor .tk.new,.nocolor .tk.learn{background:none}
ruby{ruby-position:over}ruby rt{font-size:.5em;color:var(--text-muted);font-family:var(--font);letter-spacing:0}
.legend2{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin:6px 0}.legend2 span{display:inline-flex;align-items:center;gap:6px}.legend2 i{width:14px;height:14px;border-radius:4px;border:1px solid var(--edge);display:inline-block}
.legend2 .n{background:rgba(255,180,0,.45)}.legend2 .l{background:rgba(70,130,255,.35)}.legend2 .k{background:transparent}
.rd-out{line-height:2.4;word-break:break-word;min-height:120px}
.rd-stats{font-size:13px;color:var(--text-muted);margin:8px 0}
.sen.speaking{background:var(--feat);border-radius:8px;box-shadow:0 0 0 3px var(--feat)}
.rd-panel{margin-top:14px}
/* popup (bottom sheet) */
.popup{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);max-height:78vh;overflow:auto;z-index:150;background:var(--surface);color:var(--text);border:2px solid var(--edge);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -6px 0 var(--shadow-c);padding:16px 16px 20px}
.pw{display:grid;gap:10px}.pw-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pw-word{font-size:30px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}.pw-rom{color:var(--text-muted);font-size:15px}
.pw-hint,.pw-ctx{font-size:14px;padding:8px 12px;border-left:4px solid var(--gold);background:var(--soft);border-radius:0 10px 10px 0}
.pw-tr{font-size:14px;color:var(--text-muted);min-height:0}.pw-row{display:flex;gap:8px;flex-wrap:wrap}
.pw-links{font-size:13px;color:var(--text-muted)}.pw-links a{color:var(--text);font-weight:600}
.seg button{min-height:40px}
/* watch */
.wt-drop{border:3px dashed var(--edge);border-radius:18px;padding:26px 16px;text-align:center;color:var(--text-muted);margin-bottom:14px}
.wt-drop.over{background:var(--feat)}.wt-info{font-size:14px;margin:10px 0;overflow-wrap:anywhere}
.wt-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:900px){.wt-grid{grid-template-columns:minmax(0,1fr)}}
.wt-media video{width:100%;max-height:60vh;background:#000;border-radius:16px;border:2px solid var(--edge);display:block}
.wt-media audio{width:100%}.wt-tts{padding:30px;text-align:center;font-weight:700;border:2px solid var(--edge);border-radius:16px;background:var(--feat)}
.sub-box{margin:12px 0;padding:16px;border-radius:16px;background:var(--band);color:var(--cream);text-align:center;min-height:120px;display:grid;gap:8px;align-content:center}
.sub-t{font-size:clamp(20px,3.2vw,30px);line-height:2.2;font-weight:600}.sub-t .tk:hover{background:rgba(255,249,238,.18)}
.sub-t .tk.new{background:rgba(255,180,0,.32)}.sub-t .tk.learn{background:rgba(110,160,255,.35)}
.sub-t ruby rt,.sub-box ruby rt{color:var(--on-band)}
.sub-n{font-size:16px;color:var(--on-band)}.sub-n.blur{filter:blur(6px);transition:filter .2s}.sub-n.blur:hover,.sub-n.blur:focus-within{filter:none}
.wt-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.wt-bar select{width:auto;min-height:42px}.wt-count{font-size:13px;color:var(--text-muted);font-weight:600}
.wt-offs{display:inline-flex;gap:6px;align-items:center}.wt-off{min-width:48px;text-align:center;font:600 13px var(--mono)}
.wt-rec{margin:6px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wt-list{max-height:62vh;overflow:auto;display:grid;gap:4px;align-content:start}
.wt-row{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;text-align:left;padding:8px 10px;border-radius:12px;border:2px solid transparent;background:transparent;color:var(--text);font:400 15px var(--font);cursor:pointer}
.wt-row:hover{background:var(--soft)}.wt-row.on{background:var(--feat);border-color:var(--edge)}
.wt-row .tm{font:600 12px var(--mono);color:var(--text-muted);padding-top:3px}.wt-row .nt{grid-column:2;color:var(--text-muted);font-size:13px}
.wt-side{padding:14px}.wt-side h2{margin-bottom:10px}
/* words list */
.wd-list{display:grid;gap:8px}
.wd-row{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 12px;border:2px solid var(--edge);border-radius:14px;background:var(--bg)}
.wd-main{display:grid;gap:2px;min-width:0;flex:1 1 220px}.wd-w{font-size:20px;font-weight:700;overflow-wrap:anywhere}.wd-r{font-size:13px;color:var(--text-muted)}.wd-m{font-size:15px}.wd-c{font-size:13px;color:var(--text-muted)}
.wd-side{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.wd-due{font-size:12px;color:var(--text-muted)}
/* review */
.rv-card{max-width:640px;margin-inline:auto;text-align:center}
.rv-prog{height:10px;border-radius:999px;background:var(--soft);border:2px solid var(--edge);overflow:hidden;margin-bottom:10px}.rv-prog span{display:block;height:100%;background:var(--gold)}
.rv-count{font-size:13px;color:var(--text-muted);margin-bottom:10px}
.rv-big{font-size:clamp(30px,6vw,46px);font-weight:700;line-height:1.35;overflow-wrap:anywhere}.rv-sub{color:var(--text-muted);margin-top:4px}
.rv-mean{font-size:22px;margin:10px 0}.rv-ctx{font-size:18px;margin:10px 0;padding:10px;background:var(--soft);border-radius:12px}
.rv-front,.rv-back{min-height:120px;display:grid;gap:6px;align-content:center;justify-items:center}
.rv-grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.rv-grades .abtn{flex-direction:column;gap:0;justify-content:center;min-height:56px;padding:6px 4px}.rv-grades small{font-weight:400;color:var(--text-muted);font-size:11px}
.rv-grades .g0{border-color:var(--kick)}
@media(max-width:420px){.rv-grades{grid-template-columns:repeat(2,1fr)}}
/* scripts */
.glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.gl{display:grid;place-items:center;gap:0;min-height:76px;padding:6px 2px;border:2px solid var(--edge);border-radius:14px;background:var(--bg);color:var(--text);cursor:pointer;font-family:var(--font)}
.gl:hover{background:var(--feat)}.gl .g{font-size:30px;line-height:1.4}.gl .r{font-size:12px;color:var(--text-muted);font-weight:600}
.panel+.panel,.panel+section,.tools+.panel{margin-top:18px}
canvas.trace{width:min(100%,320px);aspect-ratio:4/3;border:2px solid var(--edge);border-radius:16px;background:var(--bg);touch-action:none;display:block}
.qz-g{font-size:72px;line-height:1.3;text-align:center}.qz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0}.qz-opts .abtn{justify-content:center;min-height:50px;font-size:17px}.qz-res{min-height:1.5em;font-weight:700}
/* phrases */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}.tab{min-height:42px;padding:6px 16px;border-radius:999px;border:2px solid var(--edge);background:var(--surface);color:var(--text);font:600 14px var(--font);cursor:pointer}.tab.on,.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-text)}
.ph-list{display:grid;gap:10px}.ph{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 14px;border:2px solid var(--edge);border-radius:16px;background:var(--surface)}
.ph-main{min-width:0}.ph-t{font-size:22px;font-weight:600;line-height:1.6;overflow-wrap:anywhere}.ph-r{font-size:14px;color:var(--text-muted)}.ph-n{font-size:15px}.ph-a{display:flex;gap:6px;flex:none}
@media print{header.top,.foot,.acts,.popup,.toast,.tools{display:none!important}body{background:#fff;color:#000}}
.say-out{margin-top:20px;display:grid;gap:10px}.say-out h2{margin:0}
.vc{max-height:85vh}.vc-rows{display:grid;gap:6px}.vc-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1.6fr) auto;gap:8px;align-items:center;padding:6px 8px;border:2px solid var(--edge);border-radius:12px;background:var(--bg)}.vc-s{font-size:13px;color:var(--text-muted);overflow-wrap:anywhere}.vc-l span{color:var(--text-muted);font-size:12px}@media(max-width:520px){.vc-row{grid-template-columns:1fr auto}.vc-s{grid-column:1/-1;order:3}}
/* lesson + conversation drills */
.stepbar{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0 0 14px;padding:0}.stepbar li{padding:4px 12px;border-radius:999px;border:2px solid var(--edge);font:600 13px var(--font);color:var(--text-muted)}.stepbar li.on{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.opts{display:grid;gap:8px;margin:12px 0}.abtn.opt{flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;border-radius:16px;min-height:52px;width:100%;font-size:17px;overflow-wrap:anywhere;gap:2px}.abtn.opt .r{font-size:13px;font-weight:500;opacity:.85}
.ph-n.big{font-size:19px;font-weight:700;margin:4px 0 8px}.plain{margin:0 0 8px;padding-inline-start:20px}
.bubble{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 14px;border:2px solid var(--edge);border-radius:18px;background:var(--soft);margin:8px 0;max-width:100%}.bubble.you{background:var(--feat);margin-inline-start:clamp(0px,6vw,48px)}.bubble.them{margin-inline-end:clamp(0px,6vw,48px)}.bub-t{min-width:0}.bubble.veil{justify-content:flex-end}
.panel h2.yt{margin-top:18px}
.card{font:inherit;text-align:start;cursor:pointer}

/* feel: step entrance, confetti, pronunciation, privacy */
.enter{animation:bhEnter .28s ease both}
@keyframes bhEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.abtn.opt.right{animation:bhPop .3s ease}
.abtn.opt.wrong{animation:bhShake .3s ease}
@keyframes bhPop{50%{transform:scale(1.04)}}
@keyframes bhShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.confetti{position:fixed;left:0;right:0;top:0;height:0;overflow:visible;pointer-events:none;z-index:60}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;border-radius:2px;animation:bhFall 1.8s ease-in forwards}
@keyframes bhFall{to{transform:translate(var(--dx),100vh) rotate(var(--rot));opacity:.2}}
@media(prefers-reduced-motion:reduce){.enter,.abtn.opt.right,.abtn.opt.wrong{animation:none}.confetti{display:none}}
.pron{flex-basis:100%;width:100%;margin-top:10px;padding:12px;border:2px dashed var(--edge);border-radius:14px;background:var(--feat)}
.ph{flex-wrap:wrap}.bubble{flex-wrap:wrap}
.pr-row{display:flex;flex-wrap:wrap;gap:8px}
.pr-msg{margin:8px 0 0;font-size:13px;color:var(--text-muted)}
.pr-wave{display:block;width:100%;max-width:420px;height:56px;margin-top:10px;color:var(--text);background:var(--surface);border-radius:10px;border:1px solid var(--edge)}
.pr-meter{height:8px;margin-top:10px;border-radius:99px;background:var(--surface);overflow:hidden;border:1px solid var(--edge)}
.pr-meter i{display:block;height:100%;width:0;background:var(--gold);transition:width .08s linear}
.abtn.rec{background:#c0392b;border-color:#c0392b;color:#fff}
.pvlink{margin-left:auto;font-weight:600}
.cards.pv .card b{display:block;margin:6px 0 4px}
.pv-list li{padding:4px 0}
.pron [hidden]{display:none!important}
.abtn.danger{border-color:var(--kick)}.abtn.danger:hover{background:var(--kick);color:var(--bg)}
.grp-h{margin:22px 0 8px;font-size:18px}
/* voice check: per-language voice and speed */
.vc-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.vc-row .vc-l{flex:1 1 130px}.vc-row .vc-s{flex:2 1 200px}
.vc-c{display:flex;flex-direction:column;gap:2px;font-size:12px;flex:1 1 150px;min-width:0}.vc-c select{width:100%;min-width:0;max-width:100%}
/* sayings, twisters */
.saying .ph-t.big,.twister .ph-t.big{font-size:clamp(22px,4.5vw,30px);line-height:1.5;margin:8px 0}
.saying .chip{margin-bottom:4px}
.wrap-acts{flex-wrap:wrap}.wrap-acts .abtn{text-align:left}
#ws-sug h3{margin:14px 0 6px;font-size:15px}
/* kids corner */
.kdcard{min-height:150px}
.kdword{text-align:center;font-size:clamp(34px,9vw,56px)!important;margin:6px 0}
.kdpanel{text-align:center}.kdpanel .acts{justify-content:center}
.kdemoji{font-size:clamp(90px,26vw,160px);line-height:1.1;margin:4px 0 12px}
.kdopts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:14px}
.kdopts.pics{grid-template-columns:repeat(2,minmax(0,1fr));max-width:460px;margin-inline:auto}
.kdopt{min-height:76px;font-size:22px;border-radius:20px;flex-direction:column;justify-content:center;gap:2px}
.kdopt .r{display:block;font-size:14px;opacity:.85}
.kdpic{font-size:clamp(54px,16vw,84px);line-height:1}
.kdopts.pics .kdopt{min-height:110px}
.kdgrid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;margin:14px auto}
.kdcell{min-height:84px;border-radius:18px;border:2px solid var(--edge);background:var(--surface);color:var(--text);font:600 clamp(20px,5vw,28px) var(--font);cursor:pointer;padding:6px;word-break:break-word}
.kdcell.up{background:var(--accent);color:var(--accent-text)}.kdcell.done{background:var(--surface);border-color:var(--accent);opacity:.75}
@media(min-width:700px){.kdgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* kids mode */
html[data-kids]{font-size:118%}
html[data-kids] .abtn,html[data-kids] .tab,html[data-kids] .tabsnav a{min-height:52px}
html[data-kids] .card{border-radius:22px}
html[data-kids] .tabsnav a{font-size:16px;padding:8px 16px}

/* sound pairs, stories, output practice, review manager, Read word tracking */
.pa-score{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}.pa-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.pa-opt{flex-direction:column;justify-content:center;min-height:96px;gap:4px;text-align:center}.pa-opt .pa-w{font-size:28px;font-weight:700;line-height:1.3}.pa-opt .pa-r,.pa-mean .pa-r{font-size:14px;color:var(--text-muted);font-weight:600}
.pa-opt.right small,.pa-opt.wrong small{color:inherit}
.pa-mean{margin:8px 0}.pa-mean>div{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 0}.pa-mean .pa-w{font-size:22px;font-weight:700}
.alts{margin-top:8px;display:grid;gap:6px;width:100%}.alt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border:2px dashed var(--edge);border-radius:12px;background:var(--soft)}.alt-t{font-size:19px;font-weight:600}.alt-btn{margin-top:6px}
.st-title{margin:12px 0 4px}.story .bubble.speaking{outline:3px solid var(--gold)}.st-tap{all:unset;cursor:pointer;display:block;width:100%;border-radius:8px}.st-tap:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.st-opts{grid-template-columns:1fr}.st-opts .abtn{justify-content:flex-start;text-align:start;min-height:48px}
.wr-q{font-weight:700;margin:4px 0}.wr-in{width:100%;font:600 22px var(--font);padding:12px 14px;border:2px solid var(--edge);border-radius:14px;background:var(--surface);color:var(--text);margin:8px 0}.wr-in:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wr-v{font-weight:800;margin:10px 0 4px}.wr-v.right{color:#1c7a45}.wr-v.close{color:#a15c00}.wr-v.wrong{color:#b3261e}[data-theme=dark] .wr-v.right{color:#6fd39b}[data-theme=dark] .wr-v.close{color:#ffc766}[data-theme=dark] .wr-v.wrong{color:#ff8f86}
.wr-ans{padding:10px 12px;border:2px solid var(--edge);border-radius:14px;background:var(--soft)}
.mg-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px}.mg-bar .acts{flex:1 1 100%}.mg-row{display:flex;gap:10px;align-items:flex-start}.mg-row input[type=checkbox],.mg-bar input[type=checkbox]{width:22px;height:22px;flex:none;margin-top:4px}.mg-row .wd-main{flex:1;min-width:0}
.abtn:disabled{opacity:.45;cursor:not-allowed}
.rd-cover{font-weight:700;margin:6px 0}.rd-new{margin-top:10px;border:2px solid var(--edge);border-radius:14px;padding:8px 12px;background:var(--soft)}.rd-new summary{cursor:pointer;font-weight:700}.rd-newlist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.rd-newlist li{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rd-out.dimknown .tk.known{opacity:.4}
@media(max-width:520px){.pa-opts{grid-template-columns:1fr}}

/* ===== Guided tour, welcome, motion, ambient, theme polish ===== */
.tour{position:fixed;inset:0;z-index:1000}
.tour-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(8,7,32,.66),0 0 0 3px var(--gold);transition:top .35s var(--ease),left .35s var(--ease),width .35s var(--ease),height .35s var(--ease);pointer-events:none}
.tour-bub{position:fixed;width:min(360px,calc(100vw - 24px));padding:16px 18px;border:2px solid var(--edge);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:var(--sh);transition:left .35s var(--ease),top .35s var(--ease)}
.tour-bub.swap>.tour-t,.tour-bub.swap>.tour-b{animation:bhRise .3s var(--ease)}
.tour-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tour-n{font-size:12px;font-weight:700;color:var(--text-muted)}
.tour-t{font-weight:800;font-size:18px;line-height:1.3}
.tour-b{margin:6px 0 12px;line-height:1.6}
.tour-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tour-acts .grow{flex:1}
.tour-dots{display:flex;gap:5px}.tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--soft);border:1.5px solid var(--edge);transition:all .25s}
.tour-dots i.on{background:var(--gold);width:22px;border-radius:6px}.tour-dots i.done{background:var(--edge)}
.tour-fab{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%;border:2px solid var(--edge);background:var(--gold);color:var(--ink);font:800 20px var(--font);box-shadow:3px 3px 0 var(--shadow-c);cursor:pointer;transition:transform .2s var(--ease)}
.tour-fab:hover{transform:translateY(-2px) rotate(-6deg)}
html.tour-on body{overflow:hidden}
.wel{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(8,7,32,.66);animation:bhFade .25s ease}
.wel-card{width:min(480px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px;border:2px solid var(--edge);border-radius:22px;background:var(--surface);color:var(--text);box-shadow:var(--sh);animation:bhRise .35s var(--ease)}
.wel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wel-pane{display:grid;gap:10px}.wel-pane h2{margin:0;font-size:24px;line-height:1.3}
.wel-logo{width:64px;height:64px;border-radius:18px;background:var(--gold);color:var(--ink);display:grid;place-items:center;font:800 30px var(--font);border:2px solid var(--edge);animation:bhFloat 4s ease-in-out infinite}
.wel-priv{margin:0;color:var(--text-muted)}.wel-hint{margin:0;color:var(--text-muted);font-size:14px}
.wel-seg{display:flex;gap:8px}.wel-seg .abtn{flex:1;justify-content:center;font-size:18px}
.wel-seg .abtn[aria-pressed=true]{background:var(--gold);color:var(--ink)}
.wel-go{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wel-opt{flex-direction:column;min-height:84px;justify-content:center;gap:4px}.wel-opt span:first-child{font-size:26px}
.wel-last{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.wel .tour-acts{margin-top:16px}
@media(max-width:640px){.tour-bub{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}.tour-fab{bottom:76px}}

/* motion */
@keyframes bhRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bhFade{from{opacity:0}to{opacity:1}}
@keyframes bhFloat{50%{transform:translateY(-6px)}}
@keyframes bhFlip{from{transform:perspective(900px) rotateX(-70deg);opacity:.2}to{transform:perspective(900px) rotateY(0);opacity:1}}
@keyframes bhSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bhRipple{0%{box-shadow:0 0 0 0 rgba(255,180,0,.75)}100%{box-shadow:0 0 0 12px rgba(255,180,0,0)}}
@keyframes bhRing{0%{box-shadow:0 0 0 0 rgba(255,180,0,.8)}70%{box-shadow:0 0 0 12px rgba(255,180,0,0)}100%{box-shadow:0 0 0 0 rgba(255,180,0,0)}}
@keyframes bhFlame{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.18) rotate(4deg)}}
@keyframes bhDrift{from{transform:translateY(105vh) rotate(0)}to{transform:translateY(-30vh) rotate(18deg)}}
@keyframes bhGrad{50%{background-position:100% 50%}}
#app.pg{animation:bhRise .32s var(--ease)}
.rise{animation:bhRise .45s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.card,.stat,.ph{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover,.stat:hover{transform:translateY(-3px)}
.card:hover{box-shadow:var(--sh),0 10px 28px rgba(255,180,0,.18)}
.nav-ind{position:absolute;left:0;top:0;height:3px;border-radius:3px;background:var(--gold);transition:transform .35s var(--ease),width .35s var(--ease),opacity .2s;pointer-events:none}
.tabsnav{position:relative}
.rv-card.flip{animation:bhFlip .45s var(--ease)}.rv-card.slide{animation:bhSlide .3s var(--ease)}
.rv-card{touch-action:pan-y}
.tk.pulse{animation:bhRipple .5s ease-out}
.abtn.speaking{animation:bhRing 1.1s ease-out infinite}
.stat{position:relative}.flame{position:absolute;top:6px;right:10px;animation:bhFlame 1.6s ease-in-out infinite}

/* ambient */
.amb{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.amb span{position:absolute;top:0;font-family:var(--indic);font-weight:800;color:var(--text);opacity:.045;animation:bhDrift linear infinite;will-change:transform}
.amb.paused span{animation-play-state:paused}
html.amb-on .wrap,html.amb-on main{position:relative;z-index:1}

/* theme polish: backgrounds only, element colours stay untouched */
body{background-image:radial-gradient(900px 500px at 12% -5%,rgba(255,180,0,.12),transparent 60%),radial-gradient(800px 500px at 100% 0,rgba(180,35,26,.05),transparent 60%);background-attachment:fixed}
[data-theme=dark] body{background-image:radial-gradient(900px 520px at 10% -8%,rgba(110,100,255,.22),transparent 60%),radial-gradient(800px 500px at 100% 10%,rgba(255,180,0,.09),transparent 60%)}
[data-theme=new] body{background-image:radial-gradient(900px 520px at 8% -8%,rgba(42,200,160,.2),transparent 60%),radial-gradient(800px 500px at 100% 0,rgba(255,200,80,.16),transparent 60%)}
:root{--e1:0 1px 2px rgba(20,18,60,.12);--e2:0 6px 16px rgba(20,18,60,.12);--e3:0 14px 34px rgba(20,18,60,.18)}
[data-theme=dark]{--e1:0 1px 2px rgba(0,0,0,.4);--e2:0 6px 16px rgba(0,0,0,.4);--e3:0 14px 34px rgba(0,0,0,.55)}
[data-theme=dark] .card:hover{box-shadow:var(--sh),0 10px 30px rgba(120,110,255,.28)}
[data-theme=new] .card:hover{box-shadow:var(--sh),0 10px 28px rgba(42,200,160,.25)}
.pop-panel,.popup,.wel-card,.tour-bub{box-shadow:var(--sh),var(--e3)}
:root:not([data-theme=dark]):not([data-theme=new]) body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.tour-hole,.tour-bub,.nav-ind{transition:none}.rise,.wel-card,.wel,#app.pg,.rv-card.flip,.rv-card.slide,.tk.pulse,.abtn.speaking,.flame,.wel-logo,.tour-bub.swap>*{animation:none!important}.amb{display:none}.card:hover,.stat:hover,.tour-fab:hover{transform:none}}

/* why notes, tone, songs, numbers, night reading */
.why{margin-top:6px;font-size:14px}.why summary{cursor:pointer;color:var(--kick);font-weight:700;width:fit-content;border-radius:8px;padding:2px 4px}
.why p{margin:6px 0 0;padding:10px 12px;border:2px solid var(--edge);border-radius:12px;background:var(--feat);line-height:1.6}
.why[open] summary{margin-bottom:2px}
.tone-list{display:grid;gap:14px;margin-top:10px}.tone-t{margin:0 0 10px;font-size:18px}
.tone-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tone-col{padding:12px;border:2px solid var(--edge);border-radius:14px;background:var(--surface);display:grid;gap:8px;align-content:start}
.tone-col.f{border-style:solid}.tone-col.c{border-style:dashed}
.tone-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
@media(max-width:640px){.tone-cols{grid-template-columns:1fr}}
.verse{display:grid;gap:10px}.vs-line.playing{background:var(--feat);box-shadow:0 0 0 3px var(--gold)}
.vs-line{transition:background .2s,box-shadow .2s}
.nm-opt .pa-w{font-size:22px;font-weight:700}
html[data-night][data-theme]{--bg:#1b1812;--surface:#252017;--text:#f4e8cf;--text-muted:#cdbf9f;--edge:#6d5f45;--shadow-c:#0d0b07;--kick:#ffb38a;--feat:#38311f;--soft:rgba(244,232,207,.1);--field:#1b1812;--accent:#ffb400;--accent-text:#1b1812;color-scheme:dark}
html[data-night] body{background-image:radial-gradient(900px 520px at 10% -8%,rgba(255,170,60,.1),transparent 60%)}
html[data-night] .tk.new{background:rgba(255,180,0,.28)}html[data-night] .tk.learn{background:rgba(110,160,255,.3)}
html[data-night] .rd-out,html[data-night] .story,html[data-night] .vs-line,html[data-night] .ph-t{line-height:2.1;letter-spacing:.01em}
html[data-night]:not([data-theme=dark]) body::after{display:none}
#app>.seg{max-width:560px;margin:4px 0 14px}#app>.seg button{flex:0 1 auto;padding-inline:16px}
.vq{display:inline-block;padding:1px 8px;border-radius:999px;border:2px solid var(--edge);font-size:12px;font-weight:700}
.vq-nat{background:#cdeedb;color:#0b3d22;border-color:#0b3d22}.vq-dev{background:var(--feat)}
.vq-basic,.vq-none{background:#ffe3d6;color:#6b1d0a;border-color:#6b1d0a}
.vq-help{margin:8px 0}