@font-face{font-family:Readex;src:url(Readex-Arabic.woff) format('woff');font-weight:300 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+060C,U+061B,U+061F,U+066A-066D}
@font-face{font-family:Outfit;src:url(Outfit-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url(Outfit-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
:root{
  --bg:#F3F1FF;--surface:#FFFFFF;--surface2:#ECE8FF;--ink:#1A1446;--mute:#6C6893;--line:#E1DCF7;
  --violet:#5B3DF5;--flame:#FF6B2C;--gold:#FFC53D;--mint:#19C79A;--rose:#FF3D7F;
  --night:#14103A;--night2:#2B1F86;--pr:#0E7C86;--ok:#19C79A;--bad:#FF4D6D;
  --shadow:0 10px 30px rgba(42,26,140,.10);--r:22px;
  --nav-h:68px;color-scheme:light
}
:root[data-theme="dark"]{
  --bg:#0B0820;--surface:#171338;--surface2:#221D4F;--ink:#F3F0FF;--mute:#A7A2D1;--line:#2C2663;
  --pr:#5FE0D0;--shadow:0 10px 30px rgba(0,0,0,.35);color-scheme:dark
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Readex,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;line-height:1.6;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 18px);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:10px}
.de{font-family:Outfit,system-ui,sans-serif;direction:ltr;unicode-bidi:isolate}
.uu{color:#8338EC;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.oo{color:#F77F00;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
:root[data-theme="dark"] .uu{color:#C3A2FF}:root[data-theme="dark"] .oo{color:#FFB060}
.pr{color:var(--pr);font-weight:700}
body:not(.sp) .pr.arp,body:not(.sp) .arpw{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:calc(env(safe-area-inset-top,0px) + 8px) 0 8px;border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:1;min-width:0}
.logo svg{width:34px;height:34px;flex:0 0 auto}
.logo b{font-family:Outfit;font-size:21px;letter-spacing:-.3px;direction:ltr}
.logo b span{color:var(--flame)}
.ibtn{width:42px;height:42px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:19px}
.ibtn.on{background:var(--gold);border-color:var(--gold)}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:6px 6px calc(env(safe-area-inset-bottom,0px) + 6px)}
.nav .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;font-size:11.5px;font-weight:700;color:var(--mute);padding:6px 0;border-radius:14px}
.nav a i{font-style:normal;font-size:22px;line-height:1.1;filter:grayscale(.6);opacity:.8}
.nav a.on{color:var(--violet)}
:root[data-theme="dark"] .nav a.on{color:var(--gold)}
.nav a.on i{filter:none;opacity:1;transform:translateY(-1px)}

/* hero */
.hero{position:relative;overflow:hidden;margin:6px 16px 0;border-radius:30px;color:#fff;min-height:410px;
  background:radial-gradient(140% 90% at 80% 0%,#4B33D6 0%,#2B1F86 35%,#14103A 75%);isolation:isolate}
@media(min-width:792px){.hero{margin:6px auto 0;max-width:728px}}
.stars{position:absolute;inset:0;z-index:-1;background-image:
  radial-gradient(1.6px 1.6px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 30% 70%,#fff 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 55% 15%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 42%,#fff 50%,transparent 51%),
  radial-gradient(1.8px 1.8px at 88% 78%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 20% 90%,#fff 50%,transparent 51%),
  radial-gradient(1.3px 1.3px at 45% 50%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 18%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 64% 88%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 55%,#fff 50%,transparent 51%);opacity:.85}
.planet{position:absolute;z-index:-1;border-radius:50%}
.planet.p1{width:220px;height:220px;left:-70px;bottom:-90px;background:radial-gradient(circle at 35% 30%,#FFC53D,#FF6B2C 60%,#C2410C);box-shadow:0 0 60px rgba(255,107,44,.35)}
.planet.p1:after{content:"";position:absolute;inset:40% -30%;border:3px solid rgba(255,255,255,.35);border-radius:50%;transform:rotate(-18deg)}
.planet.p2{width:40px;height:40px;left:34px;top:34px;background:radial-gradient(circle at 35% 30%,#9BF6D9,#19C79A)}
.hero .txt{position:relative;padding:28px 24px 0}
.hero h1{margin:0;font-size:34px;line-height:1.25;font-weight:800;max-width:15ch}
.hero h1 .de{display:block;font-size:20px;font-weight:700;color:var(--gold);margin-bottom:6px;letter-spacing:.2px}
.hero p{margin:10px 0 0;color:#D8D3FF;font-size:15.5px;max-width:30ch}
.launch{position:absolute;left:22px;bottom:22px;right:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.go{border:0;border-radius:18px;background:var(--gold);color:#1A1446;padding:15px 20px;font-weight:800;font-size:16.5px;box-shadow:0 8px 0 #C98A12,0 14px 30px rgba(0,0,0,.35);
  transition:transform .1s;display:inline-flex;align-items:center;gap:8px}
.go:active{transform:translateY(5px);box-shadow:0 3px 0 #C98A12}
.rocket{width:88px;height:150px;flex:0 0 auto;transform-origin:50% 100%}
.rocket .flame{transform-origin:50% 0;opacity:.0}
.count{position:absolute;inset:0;display:grid;place-items:center;font-family:Outfit;font-weight:700;font-size:120px;color:#fff;pointer-events:none;text-shadow:0 6px 30px rgba(0,0,0,.4)}
.count small{display:block;font-size:22px;color:var(--gold);text-align:center;margin-top:-10px}
.hero.firing .rocket .flame{opacity:1;animation:flick .12s infinite alternate}
@keyframes flick{to{transform:scaleY(1.25)}}
@keyframes lift{0%{transform:translateY(0)}15%{transform:translateY(4px)}100%{transform:translateY(-520px)}}

/* stats ribbon */
.ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0}
.stat{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.stat i{font-style:normal;font-size:24px}
.stat b{display:block;font-family:Outfit;font-size:20px;line-height:1.1}
.stat span{font-size:12px;color:var(--mute)}

/* headings */
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:28px 2px 12px}
.sh h2{margin:0;font-size:21px}
.sh a{font-size:13.5px;font-weight:700;color:var(--violet);text-decoration:none}
:root[data-theme="dark"] .sh a{color:var(--gold)}
.lead{color:var(--mute);margin:-6px 2px 12px;font-size:14px}

/* word of the day */
.wod{position:relative;display:flex;gap:14px;align-items:center;background:var(--surface);border-radius:var(--r);padding:16px;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.wod .em{font-size:52px;line-height:1;width:74px;height:74px;display:grid;place-items:center;background:var(--surface2);border-radius:20px;flex:0 0 auto}
.wod .k{font-size:12.5px;font-weight:800;color:var(--flame)}
.wod .w{font-family:Outfit;font-weight:700;font-size:24px;line-height:1.2;direction:ltr;text-align:right}
.wod .m{color:var(--mute);font-size:14px}
.play{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:0;background:var(--violet);display:grid;place-items:center;box-shadow:0 6px 16px rgba(91,61,245,.35)}
.play svg{width:22px;height:22px;fill:#fff}
.play.sm{width:40px;height:40px}.play.sm svg{width:18px;height:18px}

/* mission card */
.mission{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;border-radius:var(--r);padding:16px 18px;margin-top:12px;
  background:linear-gradient(115deg,#FF6B2C,#FF3D7F);box-shadow:0 12px 28px rgba(255,61,127,.28)}
.mission .em{font-size:38px}
.mission b{display:block;font-size:17.5px}
.mission span{font-size:13.5px;opacity:.92}
.mission .arr{margin-inline-start:auto;font-size:22px}
.mission.done{background:linear-gradient(115deg,#19C79A,#0E9F7A)}

/* planets grid (topics) */
.planets{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.planets{grid-template-columns:repeat(3,1fr)}}
.pl{position:relative;overflow:hidden;text-decoration:none;background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:14px 14px 12px;min-height:150px;display:flex;flex-direction:column}
.pl .orb{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:30px;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c) 30%,#fff),var(--c) 70%);box-shadow:0 8px 18px color-mix(in srgb,var(--c) 40%,transparent)}
.pl .orb:after{content:"";position:absolute;inset:38% -16%;border:2px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:50%;transform:rotate(-20deg)}
.pl b{font-size:16px;margin-top:10px;line-height:1.35}
.pl .g{font-family:Outfit;font-size:13px;color:var(--mute);direction:ltr;text-align:right}
.pl .bar{margin-top:auto;height:6px;background:var(--surface2);border-radius:9px;overflow:hidden}
.pl .bar i{display:block;height:100%;background:var(--c);border-radius:9px}
.pl .done{position:absolute;top:10px;left:10px;font-size:18px}

/* tools / games rows */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{position:relative;text-decoration:none;border-radius:24px;padding:16px;color:#fff;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:var(--c);box-shadow:0 10px 24px color-mix(in srgb,var(--c) 35%,transparent)}
.tile .em{position:absolute;top:10px;left:12px;font-size:40px;transform:rotate(-8deg)}
.tile b{font-size:16.5px;line-height:1.35}
.tile span{font-size:12.5px;opacity:.92}

/* level ladder */
.ladder{display:flex;flex-direction:column-reverse;gap:8px}
.rung{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;text-decoration:none}
.rung .lv{font-family:Outfit;font-weight:700;font-size:22px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--surface2)}
.rung.open .lv{background:var(--violet);color:#fff}
.rung.here{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 40%,transparent)}
.rung b{display:block;font-size:15.5px}
.rung span{font-size:12.5px;color:var(--mute)}
.rung em{margin-inline-start:auto;font-style:normal;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--surface2);color:var(--mute);white-space:nowrap}
.rung.open em{background:color-mix(in srgb,var(--mint) 18%,transparent);color:#0E9F7A}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cbtn{display:flex;align-items:center;gap:10px;text-decoration:none;border-radius:20px;padding:14px;color:#fff;font-weight:800}
.cbtn.yt{background:#FF0033}.cbtn.wa{background:#1FAF5A}
.cbtn i{font-style:normal;font-size:26px}
.cbtn small{display:block;font-weight:400;font-size:12px;opacity:.9;direction:ltr;text-align:right}
.foot{text-align:center;color:var(--mute);font-size:12.5px;margin:26px 0 8px}

/* page header */
.ph{position:relative;overflow:hidden;border-radius:28px;color:#fff;padding:22px 20px 20px;margin:6px 0 14px;
  background:radial-gradient(120% 120% at 90% 0%,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 45%,#14103A) 100%)}
.ph .em{position:absolute;left:14px;bottom:-14px;font-size:96px;opacity:.95;transform:rotate(-10deg);filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.ph .back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13px;font-weight:700;background:rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;margin-bottom:10px}
.ph h1{margin:0;font-size:28px;line-height:1.25;max-width:70%}
.ph .g{font-family:Outfit;font-size:17px;opacity:.95;direction:ltr;text-align:right;max-width:70%}
.ph p{margin:8px 0 0;font-size:14px;opacity:.92;max-width:68%}

/* control bar (speed/pron/play all) */
.ctl{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:10;display:flex;gap:8px;align-items:center;padding:8px 0;margin-bottom:6px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.seg{display:flex;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;padding:8px 13px;font-size:13.5px;font-weight:700}
.seg button.on{background:var(--ink);color:var(--bg)}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.chip.on{background:var(--violet);border-color:var(--violet);color:#fff}
.chip.go2{background:var(--flame);border-color:var(--flame);color:#fff;margin-inline-start:auto}

/* item rows */
.list{display:flex;flex-direction:column;gap:8px}
.it{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:10px 12px;width:100%;text-align:right;border-inline-start:5px solid var(--c,var(--violet))}
.it.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--violet)) 35%,transparent)}
.it .em{font-size:30px;width:46px;text-align:center;flex:0 0 auto}
.it .tx{flex:1;min-width:0}
.it .d{font-family:Outfit;font-weight:700;font-size:19px;line-height:1.3;direction:ltr;text-align:right;overflow-wrap:anywhere}
.it .d .art{font-weight:700}
.art.m{color:#2F6BFF}.art.f{color:#FF3D7F}.art.n{color:#12A877}
.it .m{color:var(--mute);font-size:13.5px}
.it .cj{font-family:Outfit;font-size:13px;color:var(--mute);direction:ltr;text-align:right}
.it .fav{border:0;background:transparent;font-size:20px;padding:4px;filter:grayscale(1);opacity:.5}
.it .fav.on{filter:none;opacity:1}
.gh{margin:16px 4px 8px;font-weight:800;color:var(--c,var(--violet));display:flex;align-items:center;gap:8px}
.gh:after{content:"";flex:1;height:1.5px;background:color-mix(in srgb,var(--c,var(--violet)) 30%,transparent)}
.sw{width:46px;height:46px;border-radius:14px;flex:0 0 auto;border:2px solid var(--line)}

/* letters */
.abc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:560px){.abc{grid-template-columns:repeat(5,1fr)}}
.lt{position:relative;border:1.5px solid var(--line);background:var(--surface);border-radius:20px;padding:10px 6px 8px;text-align:center}
.lt .L{font-family:Outfit;font-weight:700;font-size:38px;line-height:1;color:var(--violet)}
:root[data-theme="dark"] .lt .L{color:var(--gold)}
.lt .nm{font-size:12px;color:var(--mute)}
.lt .em{font-size:24px;display:block;margin-top:2px}
.lt .w{font-family:Outfit;font-weight:700;font-size:14px;direction:ltr}
.lt.on{border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 30%,transparent)}

/* rules */
.rule{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:14px 16px;margin:0 0 10px;font-size:15px;line-height:1.9}
.rule .de{font-weight:700}
.tip{border-radius:18px;padding:12px 14px;margin:0 0 10px;font-size:14.5px;line-height:1.85;border:1.5px solid}
.tip b.k{display:inline-block;border-radius:999px;padding:0 10px;margin-inline-end:6px;color:#fff;font-size:12.5px}
.tip.tip{background:color-mix(in srgb,#3A86FF 10%,var(--surface));border-color:color-mix(in srgb,#3A86FF 35%,transparent)}.tip.tip b.k{background:#3A86FF}
.tip.trap{background:color-mix(in srgb,#FF4D6D 10%,var(--surface));border-color:color-mix(in srgb,#FF4D6D 35%,transparent)}.tip.trap b.k{background:#FF4D6D}
.tip.memo{background:color-mix(in srgb,#8338EC 10%,var(--surface));border-color:color-mix(in srgb,#8338EC 35%,transparent)}.tip.memo b.k{background:#8338EC}

/* dialogs */
.dlg{background:var(--surface2);border-radius:24px;padding:14px;margin-bottom:12px}
.dlg h3{margin:0 0 10px;font-size:17px;display:flex;align-items:center;gap:8px}
.bub{max-width:84%;border-radius:18px;padding:8px 12px;margin-bottom:8px;background:var(--surface);border:1.5px solid var(--line);text-align:right;width:auto;display:block}
.bub.a{margin-inline-end:auto;border-top-right-radius:6px}
.bub.b{margin-inline-start:auto;background:color-mix(in srgb,var(--c,var(--violet)) 12%,var(--surface));border-top-left-radius:6px}
.bub .who{font-size:11px;font-weight:800;color:var(--c,var(--violet))}
.bub .d{font-family:Outfit;font-weight:700;font-size:16.5px;direction:ltr;text-align:right}
.bub .m{font-size:13px;color:var(--mute)}
.bub.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--violet)) 35%,transparent)}

/* tools */
.panel{background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.bigout{font-family:Outfit;font-weight:700;font-size:28px;line-height:1.3;direction:ltr;text-align:center;overflow-wrap:anywhere;margin:6px 0}
.bigout.sm{font-size:20px}
.center{text-align:center}
.inp{width:100%;font:inherit;font-size:18px;padding:13px 14px;border-radius:16px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.inp.de{font-family:Outfit;direction:ltr;text-align:left}
.inp:focus{outline:none;border-color:var(--violet)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:0;border-radius:16px;padding:12px 18px;font-weight:800;background:var(--violet);color:#fff}
.btn.alt{background:var(--surface2);color:var(--ink)}
.btn.flame{background:var(--flame)}
.btn.wide{width:100%}
.clockwrap{display:grid;place-items:center}
.clockwrap svg{width:min(240px,70vw);height:auto}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;direction:ltr;margin-top:10px}
.cal span{text-align:center;padding:6px 0;border-radius:10px;font-family:Outfit;font-size:14px}
.cal .h{font-weight:700;color:var(--mute);font-size:12.5px}
.cal .t{background:var(--flame);color:#fff;font-weight:700}
.form{display:grid;gap:10px}
.form label{font-size:13px;font-weight:800;color:var(--mute)}
select.inp{appearance:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.out p{margin:0 0 8px}

/* games */
.gamebar{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.prog{flex:1;height:12px;border-radius:9px;background:var(--surface2);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--violet));border-radius:9px;transition:width .3s}
.hearts{font-size:14px;font-weight:800}
.qcard{background:var(--surface);border:1.5px solid var(--line);border-radius:26px;padding:20px 16px;text-align:center;box-shadow:var(--shadow);margin-bottom:12px}
.qcard .em{font-size:64px;line-height:1.1}
.qcard .q{font-size:15px;color:var(--mute);margin-bottom:6px}
.qcard .big{font-family:Outfit;font-weight:700;font-size:30px;direction:ltr;line-height:1.25}
.qcard .bigar{font-weight:800;font-size:24px}
.opts{display:grid;gap:10px}
.opt{border:2px solid var(--line);background:var(--surface);border-radius:18px;padding:14px;font-size:17px;font-weight:700;text-align:center;transition:transform .08s}
.opt:active{transform:scale(.98)}
.opt.de{font-family:Outfit;font-size:19px}
.opt.ok{background:color-mix(in srgb,var(--ok) 18%,var(--surface));border-color:var(--ok)}
.opt.no{background:color-mix(in srgb,var(--bad) 15%,var(--surface));border-color:var(--bad)}
.feedback{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 16px);border-radius:24px 24px 0 0;transform:translateY(110%);transition:transform .25s}
.feedback.show{transform:none}
.feedback.ok{background:#D9FBEF;color:#05664D}.feedback.no{background:#FFE3E8;color:#9B1C36}
:root[data-theme="dark"] .feedback.ok{background:#0F3B31;color:#9BF6D9}:root[data-theme="dark"] .feedback.no{background:#4A1424;color:#FFB3C1}
.feedback b{font-size:18px}
.feedback .ans{font-family:Outfit;font-weight:700;font-size:18px;direction:ltr;text-align:right}
.feedback .btn{margin-top:10px;width:100%}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match .col{display:flex;flex-direction:column;gap:10px}
.mb{border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:12px 8px;font-weight:700;font-size:15px;min-height:54px}
.mb.de{font-family:Outfit;font-size:16.5px}
.mb.sel{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,var(--surface))}
.mb.done{opacity:.0;pointer-events:none;transition:opacity .3s}
.mb.no{border-color:var(--bad);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.slots{min-height:64px;border:2px dashed var(--line);border-radius:18px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;direction:ltr;margin-bottom:12px}
.pool{display:flex;flex-wrap:wrap;gap:8px;direction:ltr;justify-content:center;margin-bottom:12px}
.wchip{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:9px 13px;font-family:Outfit;font-weight:700;font-size:17px}
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mc{aspect-ratio:3/4;border-radius:18px;border:0;background:linear-gradient(135deg,var(--violet),#8E7BFF);color:#fff;font-size:28px;display:grid;place-items:center;padding:6px;transition:transform .25s}
.mc.up{background:var(--surface);color:var(--ink);border:2px solid var(--line);font-size:15px;font-weight:800}
.mc.up.de{font-family:Outfit;font-size:16px}
.mc.got{background:color-mix(in srgb,var(--ok) 18%,var(--surface));border:2px solid var(--ok)}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.artb{border:0;border-radius:18px;padding:18px 6px;font-family:Outfit;font-weight:700;font-size:22px;color:#fff}
.artb.m{background:#2F6BFF}.artb.f{background:#FF3D7F}.artb.n{background:#12A877}
.flash{perspective:1000px;margin-bottom:12px}
.fc{position:relative;height:280px;transform-style:preserve-3d;transition:transform .45s;cursor:pointer}
.fc.flip{transform:rotateY(180deg)}
.fc .side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;
  background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow)}
.fc .back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--violet),#2B1F86);color:#fff;border:0}
.fc .side .em{font-size:64px}
.fc .side .big{font-family:Outfit;font-weight:700;font-size:30px;direction:ltr}
.fc .back .pr{color:#9BF6D9}
.timer{font-family:Outfit;font-weight:700;font-size:20px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:3px 10px}
.result{text-align:center;padding:10px 0}
.result .em{font-size:84px}
.result h2{margin:6px 0 4px;font-size:26px}
.result .stars{font-size:38px;letter-spacing:4px}
.xpgain{display:inline-block;background:var(--gold);color:#1A1446;font-weight:800;border-radius:999px;padding:6px 16px;margin:10px 0}

/* picker */
.pick{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.pick::-webkit-scrollbar{display:none}

/* me page */
.alt{display:flex;gap:14px;align-items:stretch}
.altimeter{width:64px;border-radius:999px;background:var(--surface2);position:relative;overflow:hidden;min-height:260px;flex:0 0 auto}
.altimeter i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,var(--flame),var(--gold));border-radius:999px}
.altimeter span{position:absolute;left:0;right:0;text-align:center;font-size:22px;transform:translateY(50%)}
.ranks{flex:1;display:flex;flex-direction:column-reverse;justify-content:space-between;gap:6px}
.rk{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);opacity:.55}
.rk.got{opacity:1}
.rk.cur{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent)}
.rk i{font-style:normal;font-size:24px}
.rk b{font-family:Outfit;direction:ltr}
.rk span{font-size:12.5px;color:var(--mute);margin-inline-start:auto}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bd{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:12px 8px;text-align:center;filter:grayscale(1);opacity:.45}
.bd.got{filter:none;opacity:1;border-color:var(--gold)}
.bd i{font-style:normal;font-size:34px;display:block}
.bd b{font-size:13px;display:block;line-height:1.35}
.bd span{font-size:11px;color:var(--mute)}
.set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.set:last-child{border-bottom:0}
.switch{width:52px;height:30px;border-radius:999px;border:0;background:var(--line);position:relative}
.switch:after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:right .2s}
.switch.on{background:var(--mint)}.switch.on:after{right:25px}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:60;background:rgba(10,8,30,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.mcard{position:relative;width:100%;max-width:400px;background:var(--surface);border-radius:28px;padding:24px 20px 18px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.mcard .x{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--surface2);font-size:16px}
.mcard .big{font-size:60px;line-height:1.1}
.mcard h3{margin:6px 0 6px;font-size:21px}
.mcard p{margin:0 0 12px;color:var(--mute);font-size:14.5px}
.mcard ol{text-align:right;margin:0 0 12px;padding-inline-start:22px;font-size:14.5px;line-height:1.9}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translate(-50%,-140%);z-index:70;background:var(--ink);color:var(--bg);font-weight:800;padding:10px 18px;border-radius:999px;transition:transform .3s;box-shadow:0 10px 30px rgba(0,0,0,.3);white-space:nowrap}
.toast.show{transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:65}

/* search */
.res{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.empty{text-align:center;color:var(--mute);padding:30px 10px}
.empty i{font-style:normal;font-size:46px;display:block}

/* kids mode */
body.kids{font-size:17px}
body.kids .it .d{font-size:22px}
body.kids .it .em{font-size:38px;width:54px}
body.kids .opt{font-size:19px;padding:18px}
body.kids .pl .orb{width:74px;height:74px;font-size:36px}

.hero h1 .de{text-align:right}
.lt .w{background:rgba(91,61,245,.09);border-radius:10px;padding:3px 7px;display:inline-block;margin-top:2px;white-space:nowrap;font-size:13px;max-width:100%}

/* ============ v3 refresh ============ */
#app.enter > .wrap > *, #app.enter > .hero{animation:fadeUp .45s cubic-bezier(.2,.7,.2,1) both}
#app.enter > .wrap > *:nth-child(2){animation-delay:.04s}#app.enter > .wrap > *:nth-child(3){animation-delay:.08s}#app.enter > .wrap > *:nth-child(4){animation-delay:.12s}
#app.enter > .wrap > *:nth-child(5){animation-delay:.16s}#app.enter > .wrap > *:nth-child(n+6){animation-delay:.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#app.enter > .wrap > *,#app.enter > .hero{animation:none}}
:root[data-theme="dark"] body{background:radial-gradient(120% 60% at 100% 0%,#1B1450 0%,transparent 60%),radial-gradient(90% 50% at 0% 100%,#140F3C 0%,transparent 60%),var(--bg)}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .it,:root[data-theme="dark"] .pl,:root[data-theme="dark"] .wod,:root[data-theme="dark"] .qcard,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .rung,:root[data-theme="dark"] .lt,:root[data-theme="dark"] .rule,:root[data-theme="dark"] .bd,:root[data-theme="dark"] .rk{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--surface);border-color:rgba(255,255,255,.08)}
.sh h2{display:flex;align-items:center;gap:8px}
.sh h2:before{content:"";width:6px;height:22px;border-radius:9px;background:linear-gradient(180deg,var(--flame),var(--gold))}
.sh .cnt{font-size:12.5px;font-weight:800;color:var(--mute);background:var(--surface2);border-radius:999px;padding:3px 10px}
.sub{color:var(--mute);font-size:13.5px}

/* hero v3 */
.hero{min-height:440px}
.stars.s1{animation:tw 4s ease-in-out infinite alternate}
.stars.s2{transform:scale(1.6) rotate(12deg);opacity:.5;animation:tw 5.5s ease-in-out infinite alternate-reverse}
@keyframes tw{from{opacity:.35}to{opacity:.95}}
.planet.p1{width:240px;height:240px;left:-80px;bottom:-100px;background:radial-gradient(circle at 34% 28%,#FFE08A 0%,#FFB13D 22%,#FF6B2C 58%,#B8380A 100%);box-shadow:0 0 80px rgba(255,107,44,.45),inset -20px -30px 60px rgba(120,20,0,.35)}
.planet.p1 i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 38%,rgba(150,40,0,.35) 0 9%,transparent 10%),radial-gradient(circle at 40% 62%,rgba(150,40,0,.28) 0 6%,transparent 7%),radial-gradient(circle at 70% 70%,rgba(150,40,0,.25) 0 5%,transparent 6%)}
.planet.p1:after{inset:44% -34%;border:4px solid rgba(255,255,255,.28);border-left-color:transparent;transform:rotate(-16deg)}
.planet.p2{width:34px;height:34px;left:24px;right:auto;top:24px;bottom:auto;background:radial-gradient(circle at 35% 30%,#C9FFF0,#19C79A 70%,#0B7A5E);box-shadow:0 0 24px rgba(25,199,154,.5);animation:float 6s ease-in-out infinite}
.comet{position:absolute;z-index:-1;top:40px;left:-40px;width:120px;height:2px;background:linear-gradient(90deg,transparent,#fff);border-radius:2px;opacity:0;transform:rotate(-18deg);animation:comet 9s linear infinite 2s}
@keyframes comet{0%{opacity:0;transform:translate(0,0) rotate(-18deg)}4%{opacity:.9}14%{opacity:0;transform:translate(520px,-170px) rotate(-18deg)}100%{opacity:0}}
@keyframes float{50%{transform:translateY(-8px)}}
.hero .txt{transition:opacity .35s,transform .35s}
.hero.firing .txt{opacity:0;transform:translateY(-10px);pointer-events:none}
.launch .rkwrap{width:96px;flex:0 0 auto;animation:bob 3.2s ease-in-out infinite}
.rocket{width:96px;height:184px;display:block}
.rocket .flame{opacity:.9;transform-origin:60px 168px;animation:flick .14s infinite alternate}
.hero.firing .rocket .flame{transform:scaleY(1.5);animation:flick2 .09s infinite alternate}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes flick{from{transform:scaleY(.85)}to{transform:scaleY(1.05)}}
@keyframes flick2{from{transform:scaleY(1.3)}to{transform:scaleY(1.75)}}
.hero.lift .launch .rkwrap{animation:lift 1.5s cubic-bezier(.5,0,.75,0) forwards}
@media (prefers-reduced-motion:reduce){.launch .rkwrap,.rocket .flame,.stars,.planet.p2,.comet{animation:none!important}}
.count{inset:0 0 90px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px}
.count .n{font-family:Outfit;font-weight:700;font-size:130px;line-height:1;color:#fff}
.count .n.sm{font-size:58px;direction:ltr}
.count .w{margin-top:8px;font-size:24px;font-weight:800;color:var(--gold);font-family:inherit}
.count .w.de{font-family:Outfit;direction:ltr}
.count.pop .n{animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:.2}to{transform:none;opacity:1}}

/* stats as buttons */
.stat{flex-direction:column;align-items:flex-start;gap:0;padding:10px 12px;text-align:right;width:100%;cursor:pointer;transition:transform .12s}
.stat:active{transform:scale(.97)}
.stat i{font-size:20px}
.stat b{font-size:19px}
.stat b.sm{font-family:inherit;font-size:15.5px;font-weight:800;white-space:nowrap}
.stat span{white-space:nowrap;font-size:11.5px}

/* continue card */
.cont{display:flex;align-items:center;gap:14px;margin-top:14px;text-decoration:none;border-radius:var(--r);padding:14px 16px;background:var(--surface);border:1.5px solid var(--line);border-inline-start:6px solid var(--c);box-shadow:var(--shadow)}
:root[data-theme="dark"] .cont{background:linear-gradient(110deg,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),var(--surface);border-color:rgba(255,255,255,.08);border-inline-start-color:var(--c)}
.cont .em{font-size:36px}
.cont .tx{flex:1;min-width:0}
.cont small{display:block;font-size:12px;font-weight:800;color:var(--flame)}
.cont b{display:block;font-size:17px;margin-bottom:6px}
.cont .prog{height:8px}
.cont .arr{font-size:22px;color:var(--mute)}
.mission.mist{background:linear-gradient(115deg,#E63946,#9D1C3B)}
.mission.test{background:linear-gradient(115deg,#5B3DF5,#2B1F86)}
.mission.speak{background:linear-gradient(115deg,#06A77D,#0B6E5A);box-shadow:0 12px 28px rgba(6,167,125,.25)}

/* journey mini */
.jmini{display:block;text-decoration:none;margin-top:12px;border-radius:var(--r);padding:14px 16px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,#4B33D6 0%,#2B1F86 45%,#14103A 100%);box-shadow:0 12px 30px rgba(43,31,134,.35);position:relative;overflow:hidden}
.jmini:after{content:"";position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 60%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 85% 20%,#fff 50%,transparent 51%);opacity:.6;pointer-events:none}
.jm-l{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;margin-bottom:10px}
.jm-l span{grid-row:span 2;font-size:34px}
.jm-l b{font-size:16.5px}
.jm-l small{font-size:12.5px;opacity:.85}
.jmini .prog{background:rgba(255,255,255,.18);height:9px}
.jmini .prog i{background:linear-gradient(90deg,var(--gold),var(--flame))}

/* tiles */
.tiles.big .tile{min-height:128px}
.tile{transition:transform .12s}
.tile:active{transform:scale(.97)}
.tile:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.28),transparent 55%);pointer-events:none}
.tile.dim{opacity:.55}

/* unit progress bar */
.ubar{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:10px 14px;margin:0 0 10px}
:root[data-theme="dark"] .ubar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.ubtop{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:6px}
.ubtop span{font-family:Outfit;font-weight:700;color:var(--mute)}
.ubar small{display:block;color:var(--mute);font-size:12px;margin-top:6px}
.prog.thin{height:5px;margin-top:6px}

/* legend + article tip */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;margin:0 0 10px;padding:8px 12px;border-radius:14px;background:var(--surface2)}
.legend .art{font-family:Outfit;font-weight:700;padding:1px 8px;border-radius:8px;background:var(--surface)}
.legend small{flex-basis:100%;color:var(--mute);font-size:11.5px}
.art[data-g]{cursor:help;border-bottom:2px dotted currentColor}
.arttip{position:absolute;z-index:80;max-width:260px;background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 12px;font-size:13.5px;line-height:1.7;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:fadeUp .2s both}
.arttip .de{font-weight:700}

/* list rows */
.it .tx > span{display:block}
.it{position:relative;text-decoration:none}
.it .hd{position:absolute;top:6px;left:8px;font-size:11px;font-weight:900;color:#fff;background:var(--mint);width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.it.lesson b{font-size:16px;display:block}
.it .num{font-family:Outfit;font-weight:700;color:var(--c);font-size:24px}
.it .st{font-size:13px;font-weight:800;color:var(--mute);min-width:34px;text-align:center}
.lt .hd{position:absolute;top:6px;left:8px;font-size:10px;font-weight:900;color:#fff;background:var(--mint);width:17px;height:17px;border-radius:50%;display:grid;place-items:center}
.srcl{font-size:12px;color:var(--mute);margin:0 4px 3px}.srcl a{text-decoration:none}
.panel.install{display:flex;align-items:center;gap:12px;margin-top:12px}
.panel.install .em{font-size:34px}

/* stories */
.seg2{margin:0 0 10px}
.story{display:flex;flex-direction:column;gap:8px}
.sline{border:1.5px solid var(--line);background:var(--surface);border-radius:18px;padding:12px 14px;text-align:right}
:root[data-theme="dark"] .sline{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.sline .d{display:block;font-weight:700;font-size:18px;direction:ltr;text-align:left;line-height:1.5}
.sline .m{display:block;color:var(--mute);font-size:14px;margin-top:2px}
.story.notr .sline .m{display:none}
.sline.on{border-color:var(--flame);box-shadow:0 0 0 3px color-mix(in srgb,var(--flame) 30%,transparent)}
.result.small .em{font-size:60px}

/* letters */
.panel.task ul,.panel ul{margin:8px 0 0;padding-inline-start:20px;line-height:1.9}
.letter{display:flex;flex-direction:column;gap:6px}
.lline .d{font-size:17px}
textarea.inp{resize:vertical;font-size:16px;line-height:1.7}
.checks{display:grid;gap:6px;margin-top:12px;font-size:14px}
.checks .ok{color:var(--ok);font-weight:800}

/* exam */
.panel.trans .de{font-weight:700;direction:ltr;text-align:left}
.panel.trans .m{color:var(--mute);margin-top:6px;font-size:14px}
.rtext .rt-h{font-weight:800;margin-bottom:6px}
.rt p,.panel2 p{margin:0 0 6px;direction:ltr;text-align:left;font-size:16.5px}
.rt{background:var(--surface2);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.rtar p{margin:4px 0;color:var(--mute);font-size:14px}
.rq{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:12px;margin-bottom:10px}
:root[data-theme="dark"] .rq{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.rq > .de{display:block;font-weight:700;font-size:16.5px;direction:ltr;text-align:left}
.rq .m{color:var(--mute);font-size:13px;margin-bottom:8px}
.tf{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tf .opt{padding:10px;font-size:15px}
.panel2{background:var(--surface2);border-radius:14px;padding:12px 14px;margin:10px 0}
.panel2 .de{direction:ltr;text-align:left;font-weight:600}
.inp.good{border-color:var(--ok)}.inp.bad{border-color:var(--bad)}
.selfc{display:grid;gap:8px;margin:10px 0 12px;font-size:14.5px}
.selfc label{display:flex;gap:8px;align-items:center;background:var(--surface2);border-radius:12px;padding:8px 10px}
.selfc input{width:20px;height:20px;accent-color:var(--violet)}
.scard{text-align:center;border-radius:26px;padding:22px 16px;margin:6px 0 10px;color:#fff;background:radial-gradient(120% 120% at 100% 0%,#FF6FA3,#FF3D7F 50%,#9D1C5B)}
.scard .em{font-size:58px}.scard .big{font-size:32px;font-weight:700;direction:ltr}.scard .m{opacity:.9}

/* speak */
.mic{display:flex;flex-direction:column;align-items:center;gap:6px;margin:16px auto 6px;border:0;background:transparent;color:var(--ink);font-weight:800}
.mic svg{width:84px;height:84px;padding:20px;border-radius:50%;fill:#fff;background:linear-gradient(135deg,#19C79A,#06A77D);box-shadow:0 12px 28px rgba(6,167,125,.4);transition:transform .15s}
.mic.live svg{background:linear-gradient(135deg,#FF3D7F,#E63946);animation:pulse 1s infinite}
.mic:disabled{opacity:.4}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,61,127,.55)}100%{box-shadow:0 0 0 22px rgba(255,61,127,0)}}
.hres{display:inline-block;margin-top:6px;padding:10px 14px;border-radius:14px;font-weight:700}
.hres.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.hres.no{background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* memory v3 */
.memhead{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px;margin:0 2px 10px}
.memhead #mv{color:var(--mute);font-weight:700}
.mem{grid-template-columns:repeat(4,1fr);gap:8px}
.mc{aspect-ratio:4/5;border-radius:14px;font-size:22px;padding:4px;transition:transform .25s,opacity .35s,background .2s}
.mc span{display:block;line-height:1.25;overflow-wrap:anywhere}
.mc.up{font-size:12.5px}
.mc.up.de{font-size:13px}
.mc.got{transform:scale(1.04)}
.mc.gone{opacity:0;transform:scale(.6);pointer-events:none;visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s .35s}
@media(min-width:560px){.mc.up{font-size:14px}}

/* xp / streak modals */
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;margin:10px 0 14px;padding:0 4px}
.bcol{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.bcol i{display:block;width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--gold),var(--flame));min-height:4px}
.bcol span{font-size:11px;font-family:Outfit;font-weight:700}
.bcol small{font-size:10.5px;color:var(--mute);white-space:nowrap}
.howto{text-align:right;background:var(--surface2);border-radius:16px;padding:12px 14px;display:grid;gap:4px;font-size:14px}
.cal.rtl{direction:rtl}
.cal .f{background:color-mix(in srgb,var(--flame) 18%,transparent);font-size:13px}

/* journey */
.ph.space{background:radial-gradient(130% 120% at 90% 0%,#5B3DF5 0%,#2B1F86 45%,#0B0820 100%)}
.jsum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.jsum div{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:10px;text-align:center}
:root[data-theme="dark"] .jsum div{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.jsum b{display:block;font-family:Outfit;font-size:24px}.jsum span{font-size:12px;color:var(--mute)}
.journey{position:relative;margin:14px 0 16px;padding:16px 12px;border-radius:26px;background:radial-gradient(120% 80% at 50% 0%,#2B1F86,#0B0820 75%);color:#fff;overflow:hidden}
.journey:before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 80% 10%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 60% 45%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 70%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 90% 85%,#fff 50%,transparent 51%);opacity:.7}
.journey:after{content:"";position:absolute;top:40px;bottom:40px;right:44px;border-right:3px dashed rgba(255,255,255,.25)}
.jst{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:10px 6px;opacity:.5}
.jst.got{opacity:1}
.jp{width:64px;height:64px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:34px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15)}
.jst.got .jp{background:rgba(255,197,61,.18);border-color:var(--gold)}
.jst.cur .jp{box-shadow:0 0 0 6px rgba(255,197,61,.18),0 0 30px rgba(255,197,61,.5)}
.jt b{display:block;font-size:16px}.jt small{font-size:12px;opacity:.75}
.jr{position:absolute;left:14px;top:50%;font-size:34px;transform:translateY(-50%) rotate(-45deg);animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,107,44,.7))}
.badge-done{display:inline-block;margin:6px 0;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);font-weight:800;border-radius:999px;padding:6px 14px}
.resume .row{margin-top:10px}
.tile{padding-top:56px}
.tile .em{font-size:34px;top:12px;left:12px}
.tiles.big .tile{min-height:132px}
.seg button{white-space:nowrap}
.ctl{overflow-x:auto;scrollbar-width:none}.ctl::-webkit-scrollbar{display:none}
.btn:disabled{opacity:.4}
.ph p{max-width:62%}.ph h1{max-width:66%}

/* ============ v4: tabs + training ============ */
a.ibtn{text-decoration:none}
.ibtn.on{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent)}
.ph.sm{padding:18px 20px 16px}
.ph.sm .em{font-size:78px;bottom:-10px}
.ph.sm h1{font-size:26px}
.tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:11;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px 2px 10px;margin:0 -2px 6px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:800;font-size:14px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--mute);white-space:nowrap;transition:background .15s,color .15s}
.tab span{font-size:17px}
.tab.on{background:var(--violet);border-color:var(--violet);color:#fff}
:root[data-theme="dark"] .tab{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .tab.on{background:linear-gradient(115deg,#6A4DFF,#8E5CFF);border-color:transparent;color:#fff}
.tabbody{animation:fadeUp .3s both}
.lead{margin:4px 2px 14px;color:var(--mute);font-size:14.5px}
.starter{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stc{position:relative;overflow:hidden;text-decoration:none;border-radius:24px;padding:16px 14px 14px;min-height:190px;display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow)}
:root[data-theme="dark"] .stc{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--c) 35%,transparent),transparent 60%),var(--surface);border-color:rgba(255,255,255,.08)}
.stc .badge{position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--gold);color:#1A1446}
.stc .orb{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c) 30%,#fff),var(--c) 70%);box-shadow:0 10px 22px color-mix(in srgb,var(--c) 45%,transparent)}
.stc b{font-size:19px;margin-top:10px}
.stc .g{font-family:Outfit;font-size:13px;color:var(--mute);direction:ltr;text-align:right}
.stc .m{font-size:12.5px;color:var(--mute);margin:2px 0 10px}
.stc .bar{margin-top:auto;height:6px;background:var(--surface2);border-radius:9px;overflow:hidden}
.stc .bar i{display:block;height:100%;background:var(--c);border-radius:9px}
.pl .m{font-size:12px;color:var(--mute);margin:2px 0 8px}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;overflow:visible}
.tab{flex-direction:column;justify-content:center;gap:2px;padding:8px 2px;border-radius:16px;font-size:12px;line-height:1.25;text-align:center;white-space:normal}
.tab span{font-size:20px}
@media(min-width:560px){.tab{flex-direction:row;font-size:14px;gap:6px}}
/* v4b: calmer hero */
.hero{min-height:380px}
.hero .txt{padding:22px 22px 0}
.hero h1{font-size:27px;line-height:1.35;max-width:14ch}
.hero h1 .de{font-size:17px;margin-bottom:4px}
.hero p{font-size:14.5px;max-width:26ch;margin-top:8px}
@media(min-width:560px){.hero h1{font-size:34px}.hero p{font-size:15.5px}}
.launch .rkwrap{width:80px}.rocket{width:80px;height:154px}
.go{font-size:15.5px;padding:13px 18px}
.ctl.slim{position:static;padding:0 0 8px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* v4c: owner */
.ann{position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:19;display:flex;align-items:center;gap:10px;max-width:760px;margin:6px auto 0;padding:10px 14px;border-radius:16px;font-weight:800;font-size:14px;box-shadow:var(--shadow)}
.ann a,.ann span{flex:1;text-decoration:none;color:inherit}
.ann button{border:0;background:rgba(0,0,0,.12);color:inherit;width:28px;height:28px;border-radius:50%;flex:0 0 auto}
.ann.gold{background:var(--gold);color:#1A1446}.ann.violet{background:var(--violet);color:#fff}.ann.red{background:#E63946;color:#fff}.ann.green{background:#19C79A;color:#06281F}
@media(max-width:792px){.ann{margin:6px 16px 0}}
pre.cfg{background:var(--surface2);border-radius:16px;padding:14px;overflow-x:auto;font-size:13px;line-height:1.6;margin:0}
.panel.guide p{margin:0 0 10px;font-size:14.5px;line-height:1.9}
.panel.guide .chips .chip{font-size:12.5px;padding:5px 10px}

/* ===== v5: exam (official format) ===== */
.exstart{text-align:center;padding:22px 18px}
.exstart .big{font-size:46px;line-height:1}
.exstart h2{margin:8px 0 10px;font-size:21px}
.exstart .list{text-align:start;margin:10px 0}
.tmr{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0;font-weight:700;font-size:14.5px;cursor:pointer}
.tmr input{width:20px;height:20px;accent-color:var(--violet)}
.exbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 10px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:5}
.extimer,.expos{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:6px 13px;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.extimer.low{background:color-mix(in srgb,var(--bad) 18%,var(--surface));border-color:var(--bad);color:var(--bad);animation:tpulse 1s infinite}
@keyframes tpulse{50%{opacity:.6}}
.dots{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:0 0 14px}
.dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--surface);font-weight:800;font-size:13px;color:var(--mute);display:grid;place-items:center;padding:0}
.dot.done{background:color-mix(in srgb,var(--violet) 20%,var(--surface));border-color:var(--violet);color:var(--ink)}
.dot.cur{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent);color:var(--ink)}
.exhead{background:var(--surface2);border-radius:16px;padding:10px 14px;margin-bottom:12px}
.exhead b{display:block;font-size:15px}
.exhead .de{color:var(--mute);font-size:14px;margin-top:2px}
.bigq{font-size:20px;font-weight:800;text-align:center;margin:12px 4px 14px;line-height:1.5}
.exopts{display:grid;gap:10px}
.exopts.two{grid-template-columns:1fr 1fr}
.exopts .opt{display:flex;align-items:center;gap:10px;text-align:start;font-size:16.5px}
.exopts.two .opt{justify-content:center;text-align:center}
.opt.chosen{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 22%,transparent)}
.ok-k{flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-family:Outfit;font-weight:800;font-size:14px}
.opt.chosen .ok-k{background:var(--violet);color:#fff}
.exnav{justify-content:space-between;margin-top:14px;gap:10px}
.exnav .btn{flex:1}
.ads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.ad{position:relative;background:var(--surface);border:1.5px dashed var(--line);border-radius:16px;padding:12px 12px 12px;font-size:14px;line-height:1.55}
.ad b{display:block;font-size:15px;margin-bottom:4px}
.adk{position:absolute;top:-10px;inset-inline-start:10px;background:var(--gold);color:#1A1446;border-radius:999px;padding:1px 9px;font-weight:800;font-family:Outfit;font-size:13px}
.sign{background:#FFF7D6;color:#2A2100;border:3px solid #E9B300;border-radius:14px;padding:14px;text-align:center;font-weight:700;margin:10px 0;line-height:1.6}
.sign-e{font-size:30px;line-height:1;margin-bottom:6px}
.rtexts{display:grid;gap:12px;margin-bottom:12px}
.rt-h{font-weight:800;margin-bottom:6px}
.rt p{margin:4px 0;line-height:1.6}
.exres{text-align:center}
.verdict{display:inline-block;margin:8px 0;padding:6px 16px;border-radius:999px;font-family:Outfit;font-weight:800;font-size:17px}
.verdict.pass{background:color-mix(in srgb,var(--ok) 20%,var(--surface));color:var(--ok);border:2px solid var(--ok)}
.verdict.fail{background:color-mix(in srgb,var(--bad) 16%,var(--surface));color:var(--bad);border:2px solid var(--bad)}
.rv-texts{display:grid;gap:8px;margin-bottom:12px}
.rv{background:var(--surface);border:1.5px solid var(--line);border-inline-start:5px solid var(--ok);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.rv.bad{border-inline-start-color:var(--bad)}
.rv-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--mute);margin-bottom:4px}
.rv-q{font-weight:700;font-size:16px;line-height:1.5}
.rv-t{color:var(--mute);font-size:14px;margin:3px 0 6px}
.rv-a{font-size:14.5px;font-weight:700;margin-top:4px;color:var(--ok)}
.rv-a.bad{color:var(--bad)}
.rv-a.goodc{color:var(--ok)}
.rv-x{margin-top:8px;background:var(--surface2);border-radius:12px;padding:8px 12px;font-size:14px;line-height:1.6}
.rv-x summary{cursor:pointer;font-weight:700}
.rv-x .de{margin-top:4px}
.mine{color:var(--violet)}
:root[data-theme="dark"] .mine{color:var(--gold)}
:root[data-theme="dark"] .sign{background:#2B2408;color:#FFE9A3;border-color:#C99A00}
:root[data-theme="dark"] .ad,:root[data-theme="dark"] .rv,:root[data-theme="dark"] .extimer,:root[data-theme="dark"] .expos,:root[data-theme="dark"] .dot{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .dot.done{background:color-mix(in srgb,var(--violet) 35%,transparent);border-color:#8E74FF}
:root[data-theme="dark"] .opt.chosen{background:color-mix(in srgb,var(--violet) 32%,var(--surface));border-color:#8E74FF}
:root[data-theme="dark"] .rv{border-inline-start-color:var(--ok)}:root[data-theme="dark"] .rv.bad{border-inline-start-color:var(--bad)}
@media (max-width:380px){.ads{grid-template-columns:1fr}.dot{width:29px;height:29px}}

/* ===== v5: daily goal + onboarding ===== */
.goal{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:11px 14px;margin:10px 0 4px}
.goal-t{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:7px}
.goal-t span{color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums}
.goal .prog{height:9px}
.goal.done{border-color:var(--ok)}
.goal.done .prog i{background:var(--ok)}
:root[data-theme="dark"] .goal{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .goal.done{border-color:var(--ok)}
.onbcard{text-align:center;max-width:420px}
.onbcard .big{font-size:44px;line-height:1;margin:6px 0}
.onbcard h3{margin:6px 0 6px;font-size:19px}
.onbcard p{color:var(--mute);margin:0 0 12px}
.onbcard .inp{width:100%;text-align:center;font-size:17px}
.onb-dots{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.onb-dots i{width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .2s}
.onb-dots i.on{width:22px;background:var(--violet)}
.onb-opts{display:grid;gap:9px;margin-top:8px}
.onb-o{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:start;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:11px 14px;color:var(--ink)}
.onb-o span{grid-row:1/3;font-size:26px}
.onb-o b{font-size:15.5px}
.onb-o small{color:var(--mute);font-size:13px}
.onb-o.on,.onb-o:hover{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,var(--surface))}
:root[data-theme="dark"] .onb-o{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .onb-o.on{border-color:#8E74FF;background:color-mix(in srgb,var(--violet) 28%,transparent)}
.onbcard .btn{justify-content:center;text-align:center;display:flex;align-items:center}
.exbar{padding:6px 0;margin-inline:-4px;padding-inline:4px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:0 0 14px 14px}


/* ===== v6: icons, font, motion ===== */
button,input,textarea,select{font-family:inherit}
.ic{width:22px;height:22px;flex:none;display:block}
.ibtn .ic{width:21px;height:21px}
.ibtn{color:var(--ink)}
.ibtn.me{width:auto;min-width:46px;padding:0 9px;display:flex;flex-direction:column;gap:0;justify-content:center;align-items:center;line-height:1}
.ibtn.me .ic{width:19px;height:19px}
.ibtn.me small{font-size:10.5px;font-weight:800;margin-top:2px;color:var(--mute)}
.ibtn.me.on{color:#1A1446}.ibtn.me.on small{color:#1A1446}
.nav a .ic{width:24px;height:24px;margin-bottom:2px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.nav a.on .ic{fill:color-mix(in srgb,currentColor 20%,transparent);transform:translateY(-2px)}
.tab .ic{width:20px;height:20px}
.tab.on .ic{fill:rgba(255,255,255,.18)}
/* gentle page entrance */
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#app > .wrap,#app > section{animation:pgIn .28s ease-out both}
/* tactile press */
.btn,.tile,.it,.pl,.stc,.opt,.tab,.ibtn,.chip,.cont,.mission,.jmini,.dot,.onb-o{transition:transform .12s ease,background-color .2s,border-color .2s,box-shadow .2s}
.btn:active,.tile:active,.it:active,.pl:active,.stc:active,.tab:active,.ibtn:active,.chip:active,.cont:active,.mission:active,.jmini:active,.dot:active,.onb-o:active{transform:scale(.97)}
.prog i,.bar i{transition:width .6s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){#app > .wrap,#app > section{animation:none}*{transition-duration:0s!important}}
/* exam: control bar not sticky so it never covers the timer */
.exwrap .ctl{position:static;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* calmer tiles: one surface style, colour only as an accent */
.tile{background:radial-gradient(130% 100% at 100% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 62%),var(--surface);color:var(--ink);border:1.5px solid color-mix(in srgb,var(--c) 22%,var(--line));box-shadow:var(--shadow);padding-top:78px}
.tile:before{display:none}
.tile .em{top:14px;left:auto;inset-inline-start:14px;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-size:29px;transform:none;background:color-mix(in srgb,var(--c) 17%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 28%,transparent)}
.tile b{color:var(--ink)}
.tile span:not(.em){color:var(--mute);opacity:1}
.tile:after{content:"‹";position:absolute;top:22px;inset-inline-end:16px;font-size:22px;font-weight:700;line-height:1;color:var(--c)}
:root[data-theme="dark"] .tile{background:radial-gradient(130% 100% at 100% 0%,color-mix(in srgb,var(--c) 24%,transparent),transparent 62%),rgba(255,255,255,.035);border-color:color-mix(in srgb,var(--c) 30%,rgba(255,255,255,.08));box-shadow:none}
:root[data-theme="dark"] .tile:after{color:color-mix(in srgb,var(--c) 70%,#fff)}
/* picture cards (word topics) */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:6px}
@media (min-width:600px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.it.pcard{flex-direction:column;align-items:stretch;gap:8px;padding:8px 8px 12px;border-inline-start:1.5px solid var(--line);border-radius:22px;text-align:center}
.pcard .pic{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:radial-gradient(90% 90% at 50% 40%,#fff,color-mix(in srgb,var(--c) 12%,#fff))}
.pcard .pic img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .pe{font-size:64px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
.pcard .tx{display:flex;flex-direction:column;align-items:center;gap:1px;padding:0 4px}
.pcard .d{text-align:center;font-size:18px}
.pcard .m{font-size:13.5px}
.pcard .play.sm{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.pcard .hd{top:14px;left:auto;inset-inline-start:14px}
:root[data-theme="dark"] .pcard .pic{background:radial-gradient(90% 90% at 50% 40%,#2C2766,#1A1642)}
body.kids .pcard .pe{font-size:76px}
/* footer links, about, 404 */
.foot-l{display:flex;justify-content:center;gap:8px;margin-bottom:6px;font-weight:700}
.foot-l a{color:var(--violet);text-decoration:none}
:root[data-theme="dark"] .foot-l a{color:var(--gold)}
.panel.about h3{margin:0 0 6px;font-size:17px}
.panel.about p{margin:0;line-height:1.8}
.panel.about ul{margin:0;padding-inline-start:20px;line-height:1.9}
.nf{text-align:center;padding:40px 10px 10px}
.nf-n{font-size:84px;font-weight:700;line-height:1;background:linear-gradient(115deg,var(--violet),var(--flame));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-e{font-size:56px;margin:8px 0;animation:nfFloat 3s ease-in-out infinite}
@keyframes nfFloat{50%{transform:translateY(-8px) rotate(8deg)}}
.nf h1{font-size:22px;margin:6px 0}
.toast{white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.5;border-radius:20px}
.nf-try{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:16px;font-size:14px;color:var(--mute);font-weight:700}
.nf-try .chip{text-decoration:none}
.tback[hidden]{display:none!important}
.tback{color:var(--ink)}
@media (max-width:360px){.logo b{font-size:18px}.logo svg{width:30px;height:30px}}
@media (max-width:400px){.top.hasback .logo svg{display:none}.top.hasback .logo b{font-size:18px}}
.logo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== v7: home dashboard ===== */
.dash{margin-top:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--shadow)}
:root[data-theme="dark"] .dash{background:linear-gradient(160deg,rgba(124,92,255,.14),rgba(255,255,255,.03) 55%);border-color:rgba(255,255,255,.08);box-shadow:none}
.dash-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dash-h small{display:block;color:var(--mute);font-size:13px;font-weight:700}
.dash-h b{font-size:20px;line-height:1.3}
.dash-j{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:800;font-size:13px;background:var(--surface2);border-radius:999px;padding:6px 12px;white-space:nowrap}
.dash-j span{font-size:18px}
.dash .ribbon{margin:0;gap:8px}
.dash .stat{background:var(--surface2);border:0;border-radius:16px;padding:9px 10px}
:root[data-theme="dark"] .dash .stat,:root[data-theme="dark"] .dash-j{background:rgba(255,255,255,.06)}
.dash .goal{background:transparent;border:0;padding:12px 2px 2px;margin:0}
.dash-trip{display:block;text-decoration:none;color:var(--mute);font-size:12.5px;font-weight:700;padding:8px 2px 0}
.dash-trip span{display:block;margin-bottom:5px}
.dash-trip .prog{height:6px}
.dash-trip .prog i{background:linear-gradient(90deg,var(--gold),var(--flame))}
.cont.hero2{margin-top:12px;padding:16px;border-inline-start-width:1.5px;background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 60%),var(--surface)}
.cont.hero2 .em{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent);font-size:32px;flex:none}
.cont.hero2 b{font-size:18px}
.gobtn{flex:none;background:var(--violet);color:#fff;font-weight:800;font-size:14px;border-radius:999px;padding:9px 16px;box-shadow:0 8px 18px rgba(91,61,245,.3)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mini{position:relative;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);border-radius:20px;padding:14px;background:radial-gradient(130% 110% at 100% 0%,color-mix(in srgb,var(--c,#5B3DF5) 18%,transparent),transparent 62%),var(--surface);border:1.5px solid color-mix(in srgb,var(--c,#5B3DF5) 24%,var(--line))}
.mini .em{font-size:28px;line-height:1;margin-bottom:6px}
.mini b{font-size:15.5px}
.mini small{color:var(--mute);font-size:12.5px;font-weight:600}
.mini.hot{background:linear-gradient(135deg,#FF8A3D,#FF5A2C);color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(255,107,44,.28)}
.mini.hot small{color:rgba(255,255,255,.9)}
.mini.ok{--c:#19C79A}
:root[data-theme="dark"] .mini:not(.hot){background:radial-gradient(130% 110% at 100% 0%,color-mix(in srgb,var(--c,#5B3DF5) 26%,transparent),transparent 62%),rgba(255,255,255,.035);border-color:color-mix(in srgb,var(--c,#5B3DF5) 30%,rgba(255,255,255,.08))}
.mini:active{transform:scale(.97)}
.dash .ribbon{grid-template-columns:1fr 1fr}.dash .stat[data-st="station"]{display:none}
.dash .stat{flex-direction:row;align-items:center;gap:10px}.dash .stat i{font-size:22px}.dash .stat b{font-size:20px}
:root[data-theme="dark"] .dash .goal{background:transparent;border:0}
/* photos in games, word of day and topic headers */
.em.qpic{display:grid;place-items:center}
.em.qpic .pic{display:grid;place-items:center;width:100%;height:100%}
.em.qpic img{width:100%;height:100%;object-fit:cover;display:block}
.qcard .em.qpic,.fc .em.qpic{width:150px;height:150px;margin:0 auto 8px;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.12);font-size:64px;line-height:1}
.wod .em.qpic{overflow:hidden;background:#fff;padding:0}
.ph .em.phpic{left:16px;bottom:16px;width:104px;height:104px;border-radius:28px;overflow:hidden;background:#fff;border:4px solid rgba(255,255,255,.85);transform:rotate(-6deg);box-shadow:0 12px 26px rgba(0,0,0,.25);font-size:64px;display:grid;place-items:center}
.ph .em.phpic .pic{display:grid;place-items:center;width:100%;height:100%}
.ph .em.phpic img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:360px){.ph .em.phpic{width:84px;height:84px}.qcard .em.qpic,.fc .em.qpic{width:124px;height:124px}}
.lt .pic{display:block;width:72%;max-width:96px;aspect-ratio:1/1;margin:6px auto 4px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.lt .pic img{width:100%;height:100%;object-fit:cover;display:block}
.lt .pic .pe{display:grid;place-items:center;height:100%;font-size:28px}

/* ===== v8: realistic photos everywhere ===== */
.pic img{animation:picIn .45s ease both}
@keyframes picIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
/* hero: real Earth photo behind the animated rocket */
.hero.photo{background:linear-gradient(160deg,rgba(14,10,44,.92) 0%,rgba(20,16,58,.72) 42%,rgba(20,16,58,.15) 100%),url(hero.webp) 70% 80%/cover no-repeat,#0E0A2C}
.hero.photo .planet{display:none}
.hero.photo .stars{opacity:.7}
.hero.photo .launch .rkwrap{filter:drop-shadow(0 10px 30px rgba(255,140,60,.45))}
/* home photo tiles */
.tile.ptile{padding:0;min-height:0;justify-content:flex-start;overflow:hidden}
.tile.ptile:after{display:none}
.tile.ptile .tph{display:block;aspect-ratio:16/10;overflow:hidden;position:relative}
.tile.ptile .tph .pic{display:block;width:100%;height:100%}
.tile.ptile .tph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.tile.ptile:hover .tph img{transform:scale(1.05)}
.tile.ptile .tph .pe{display:grid;place-items:center;height:100%;font-size:40px}
.tile.ptile .tph:after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,color-mix(in srgb,var(--c) 30%,transparent))}
.tile.ptile .tbody{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
/* planets + starter cards: round photos */
.orb.porb{overflow:hidden;padding:0;background:#fff!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 45%,transparent),0 8px 20px rgba(0,0,0,.18)}
.orb.porb .pic{display:block;width:100%;height:100%}
.orb.porb img{width:100%;height:100%;object-fit:cover;display:block}
.orb.porb .pe{display:grid;place-items:center;height:100%}
/* journey stations */
.jp.jpic{overflow:hidden;padding:0;background:#000}
.jp.jpic .pic{display:block;width:100%;height:100%}
.jp.jpic img{width:100%;height:100%;object-fit:cover;display:block}
.jp.jpic .pe{display:grid;place-items:center;height:100%}
.jst:not(.got) .jp.jpic img{filter:grayscale(.85) brightness(.6)}
/* story/letter covers in lists */
.it .em.cov{width:64px;height:64px;border-radius:16px;overflow:hidden;padding:0;flex:none;background:var(--surface2)}
.it .em.cov .pic{display:block;width:100%;height:100%}
.it .em.cov img{width:100%;height:100%;object-fit:cover;display:block}
.it .em.cov .pe{display:grid;place-items:center;height:100%;font-size:30px}
/* suggestions */
.sug{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.sugk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px;color:var(--ink)}
.sugk span{font-size:24px}.sugk b{font-size:15px}.sugk small{color:var(--mute);font-size:12px;line-height:1.4}
.sugk.on{border-color:var(--flame);background:color-mix(in srgb,var(--flame) 10%,var(--surface))}
:root[data-theme="dark"] .sugk{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .sugk.on{border-color:var(--flame);background:color-mix(in srgb,var(--flame) 18%,transparent)}
#sugT{width:100%;margin-top:6px}
/* softer depth */
.panel,.it,.pl,.stc,.tile,.mini,.cont,.dash{box-shadow:0 1px 2px rgba(20,16,58,.06),0 8px 24px rgba(20,16,58,.07)}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .it,:root[data-theme="dark"] .pl,:root[data-theme="dark"] .stc,:root[data-theme="dark"] .tile,:root[data-theme="dark"] .mini,:root[data-theme="dark"] .cont,:root[data-theme="dark"] .dash{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px rgba(0,0,0,.28)}

/* ===== v9 ===== */
/* header: theme toggle beside logo, settings on the far side */
.top .wrap{gap:8px}
.tsp{flex:1}
.logo{flex:0 1 auto}
.ibtn.tmini{width:38px;height:38px;border-radius:12px}
.ibtn.tmini .ic{width:19px;height:19px}
.ibtn.spin .ic{animation:tspin .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes tspin{from{transform:rotate(-120deg) scale(.6);opacity:.3}to{transform:none;opacity:1}}
html.tswitch body,html.tswitch .panel,html.tswitch .it,html.tswitch .tile,html.tswitch .top,html.tswitch .nav{transition:background-color .45s ease,color .45s ease,border-color .45s ease}
@media (max-width:380px){.top .ibtn{width:38px;height:38px}.top .ibtn.me{min-width:40px;padding:0 6px}.ibtn.tmini{width:34px;height:34px}.top.hasback .logo b{font-size:16px}}
/* settings sheet */
.modal.msheet{align-items:flex-end;padding:0}
.mcard.sheet{width:100%;max-width:520px;border-radius:26px 26px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));animation:sheetUp .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.setlist .set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.setlist .set:last-child{border-bottom:0}
/* quick tools strip */
.qtools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qt{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);background:var(--surface);border:1.5px solid color-mix(in srgb,var(--c) 25%,var(--line));border-radius:18px;padding:12px 6px;text-align:center}
.qt span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--c) 18%,transparent)}
.qt b{font-size:12.5px;line-height:1.3}
.qt:active{transform:scale(.96)}
:root[data-theme="dark"] .qt{background:rgba(255,255,255,.04);border-color:color-mix(in srgb,var(--c) 30%,rgba(255,255,255,.08))}
/* coming soon tile */
.tile.soon{opacity:.6;filter:saturate(.5)}
.tile .soonb{position:absolute;top:12px;inset-inline-end:12px;font-style:normal;font-size:11px;font-weight:800;background:var(--gold);color:#1A1446;border-radius:999px;padding:2px 9px}
.tile.soon:after{display:none}
/* translation peek per line */
.story.notr .sline.peek .m{display:block}
.letter.notr .lline .m{display:none}
.letter.notr .lline.peek .m{display:block}
/* continue card photo */
.cont.hero2 .em.cov{width:58px;height:58px;border-radius:18px;overflow:hidden;padding:0}
.cont.hero2 .em.cov .pic{display:block;width:100%;height:100%}
.cont.hero2 .em.cov img{width:100%;height:100%;object-fit:cover;display:block}
.cont.hero2 .em.cov .pe{display:grid;place-items:center;height:100%;font-size:30px}
.mission.intro{background:linear-gradient(115deg,#FF3D7F,#B4236A)}
@media (max-width:360px){.top .wrap{gap:6px}.logo{gap:5px}.logo svg{width:28px;height:28px}.logo b{font-size:16.5px}.top .ibtn{width:36px;height:36px}.top .ibtn.me{min-width:38px;padding:0 5px}.ibtn.tmini{width:32px;height:32px}.top.hasback .logo svg{display:none}}
/* calendar: number stays visible with a small flame */
.cal span{position:relative}
.cal .f{font-size:14px;font-weight:700;color:var(--flame)}
.cal .fl{position:absolute;top:-7px;inset-inline-end:2px;font-style:normal;font-size:12px;line-height:1}
.cal .t{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--flame)}
.cal .t.f{background:color-mix(in srgb,var(--flame) 18%,transparent);color:var(--flame)}
/* journey rocket sits on the path between stations */
.jr{left:auto;inset-inline-start:26px;top:calc(-4% - var(--f,0) * 46%);transform:translateY(-50%);z-index:3;font-size:26px;animation:jrBob 2.4s ease-in-out infinite}
@keyframes jrBob{50%{margin-top:-6px}}
.badge-done.half{display:block;border-radius:16px;line-height:1.6;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--ink);font-weight:700}
/* v15 */
.linkbtn{display:block;width:100%;margin-top:12px;background:none;border:0;color:var(--muted,#B3ADD9);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
.gcbars{display:grid;gap:10px}
.gcr{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px;font-size:14px}
.gcr i{display:block;height:12px;border-radius:99px;background:linear-gradient(90deg,#FFC53D,#FF6B2C)}
.gcr b{text-align:left}
/* v17: footer, contact, effects */
.foot-l{flex-wrap:wrap;gap:6px 14px}
.foot-l a{white-space:nowrap}
.cbtn{background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 10px 24px -12px var(--c2);min-height:76px}
.cbtn.wa{--c1:#25C866;--c2:#128C4A;background:linear-gradient(135deg,var(--c1),var(--c2))}
.cbtn.yt{--c1:#FF3B4E;--c2:#C4122A;background:linear-gradient(135deg,var(--c1),var(--c2))}
.cbtn i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:0}
.cbtn div{font-size:15px;line-height:1.35}
.cbtn small{direction:rtl;margin-top:2px}
.btn,.tile,.it,.pl,.stc,.tab,.ibtn,.chip,.cont,.mission,.jmini,.dot,.onb-o,.opt,.mini,.qt,.cbtn,.stat{transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.cbtn:active{transform:scale(.97)}
.opt.ok{animation:okPop .38s cubic-bezier(.3,1.6,.5,1)}
.opt.no,.inp.bad{animation:shake .32s}
.inp.good{animation:okPop .38s}
@keyframes okPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.xpf{position:fixed;z-index:9999;transform:translate(-50%,-50%);pointer-events:none;font-weight:800;font-size:20px;color:#FFC53D;text-shadow:0 2px 10px rgba(0,0,0,.45);animation:xpUp 1.05s ease-out forwards}
@keyframes xpUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.stat b.bump{color:#FFC53D}
.stat.lit i{display:inline-block;transform-origin:50% 90%;animation:flame 1.1s ease-in-out infinite alternate}
@keyframes flame{0%{transform:scale(1) rotate(-4deg)}100%{transform:scale(1.14) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.stat.lit i,.xpf,.opt.ok,.opt.no,.inp.bad,.inp.good{animation:none}}
/* v18: adventure map, hearts, combo, mascot, rain */
.advbanner{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;border-radius:22px;padding:12px 16px 12px 12px;background:linear-gradient(120deg,#2B1F86,#5B3DF5 55%,#8338EC);box-shadow:0 14px 30px -16px #5B3DF5;margin:0 0 4px;position:relative;overflow:hidden}
.advbanner::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 85% 20%,rgba(255,197,61,.25),transparent 70%);pointer-events:none}
.advbanner .ab-p{flex:none;width:64px;height:64px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.advbanner .ab-p .pic,.advbanner .ab-p img{width:100%;height:100%;object-fit:cover;display:block}
.advbanner b{display:block;font-size:18px}.advbanner span{font-size:13px;opacity:.9}.advbanner .arr{margin-inline-start:auto;font-size:24px}
.advsum{display:flex;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 16px;font-weight:800;margin-bottom:6px}
.advmap{position:relative;padding:6px 0 10px}
.advgrp{display:flex;align-items:center;gap:12px;margin:22px 0 8px;padding:8px 12px;border-radius:18px;background:color-mix(in srgb,var(--c) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.advgrp .ap{width:46px;height:46px;border-radius:14px;overflow:hidden;flex:none}.advgrp .ap .pic,.advgrp .ap img{width:100%;height:100%;object-fit:cover;display:block}
.advgrp b{font-size:17px}
.advrow{display:flex;flex-direction:column;align-items:center;margin:6px 0}
.advrow.r{align-items:flex-start;padding-inline-start:18%}.advrow.l{align-items:flex-end;padding-inline-end:18%}
.lvl{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:#fff;font-weight:800;font-size:24px;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 6px 0 color-mix(in srgb,var(--c) 60%,#000),0 14px 24px -10px var(--c)}
.lvl:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 60%,#000)}
.lvl.boss{width:88px;height:88px;font-size:30px}
.lvl.lock{background:#3a3560;box-shadow:0 6px 0 #241f45;filter:grayscale(.6);opacity:.75;font-size:22px}
.lvl.cur{animation:lvlPulse 1.6s ease-in-out infinite}
@keyframes lvlPulse{0%,100%{box-shadow:0 6px 0 color-mix(in srgb,var(--c) 60%,#000),0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent)}50%{box-shadow:0 6px 0 color-mix(in srgb,var(--c) 60%,#000),0 0 0 14px transparent}}
.lvl .ls{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:15px;color:#FFC53D;white-space:nowrap;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lvl .ls i{font-style:normal;color:rgba(255,255,255,.25)}
.advrow .lvt{margin-top:24px;font-size:12.5px;color:var(--mute);font-weight:700}
.advend{text-align:center;margin:26px 0 6px;color:var(--mute);font-weight:700}
.hrt{font-size:16px;letter-spacing:1px;white-space:nowrap}.hrt i{font-style:normal;opacity:.5}
.combo{font-size:13px;font-weight:800;color:#1A1446;background:linear-gradient(90deg,#FFC53D,#FF6B2C);border-radius:999px;padding:3px 9px;white-space:nowrap;animation:okPop .4s}
.mascot{display:flex;align-items:center;gap:6px;flex:none}
.mascot .mp{width:38px;height:38px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--gold)}
.mascot .mp .pic,.mascot .mp img{width:100%;height:100%;object-fit:cover;display:block}
.mascot .say{font-size:12px;font-weight:800;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:2px 8px;white-space:nowrap;max-width:92px;overflow:hidden;text-overflow:ellipsis}
.mascot.ok .mp{animation:okPop .45s}.mascot.ok .say{color:var(--ok)}
.mascot.no .mp{animation:shake .35s}.mascot.no .say{color:var(--bad)}
.bigstars{font-size:54px;letter-spacing:6px;margin:4px 0}
.bigstars span{display:inline-block;color:rgba(255,255,255,.18);transform:scale(.4);animation:starIn .45s cubic-bezier(.3,1.7,.5,1) forwards}
.bigstars span.on{color:#FFC53D;text-shadow:0 0 18px rgba(255,197,61,.6)}
@keyframes starIn{to{transform:scale(1)}}
:root[data-theme="light"] .bigstars span{color:#d9d6ea}:root[data-theme="light"] .bigstars span.on{color:#F5A500}
.rainq{text-align:center;margin:4px 0 10px}
.rainq span{display:inline-block;background:linear-gradient(120deg,#5B3DF5,#8338EC);color:#fff;font-weight:800;font-size:22px;border-radius:18px;padding:10px 20px;box-shadow:0 10px 24px -12px #5B3DF5}
.rain{position:relative;height:min(58vh,460px);border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 60%,#fff6,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff7,transparent),linear-gradient(#0D0A24,#2B1F86)}
.rain .ground{position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(90deg,#FF6B2C,#FFC53D)}
.drop{position:absolute;top:6px;width:31%;min-height:50px;border-radius:16px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);backdrop-filter:blur(4px);color:#fff;font-weight:800;font-size:16px;padding:6px 4px;will-change:transform}
.drop.hit{background:var(--ok);border-color:var(--ok);animation:okPop .35s}
.drop.miss{background:var(--bad);border-color:var(--bad);animation:shake .3s}
.drop.right{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok)}
@media (prefers-reduced-motion:reduce){.lvl.cur,.bigstars span,.mascot .mp{animation:none}.bigstars span{transform:none}}
/* v19: scenario games */
.scgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sccard{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px -16px var(--c);transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.sccard:active{transform:scale(.97)}
.sccard .scp{display:block;height:96px;overflow:hidden;background:color-mix(in srgb,var(--c) 20%,var(--surface))}
.sccard .scp .pic,.sccard .scp img{width:100%;height:100%;object-fit:cover;display:block}.sccard .scp .pe{font-size:48px;display:grid;place-items:center;height:100%}
.sccard b{padding:10px 12px 2px;font-size:15px}
.sccard .scs{padding:0 12px 12px;font-size:13px;color:var(--mute);letter-spacing:1px}.sccard .scs i{font-style:normal;color:#FFC53D}
.chat{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.bub2{display:flex;align-items:flex-end;gap:8px;max-width:92%;animation:fadeUp .3s}
.bub2 .av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--surface);border:1px solid var(--line)}
.bub2 .bx{background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:10px 14px;min-width:0}
.bub2 .d{font-weight:700;font-size:16.5px;direction:ltr;text-align:left}
.bub2 .trb{background:none;border:0;color:var(--mute);font:inherit;font-size:12.5px;padding:4px 0 0;cursor:pointer}
.bub2 .tr{font-size:14px;color:var(--mute);margin-top:4px}
.bub2 .rp{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--violet);color:#fff;display:grid;place-items:center}
.bub2 .rp svg{width:15px;height:15px}
.bub2.me{align-self:flex-end;flex-direction:row-reverse}
.bub2.me .bx{background:linear-gradient(135deg,#5B3DF5,#8338EC);color:#fff;border:0;border-radius:18px 18px 6px 18px}
.bub2.me .trb,.bub2.me .tr{color:rgba(255,255,255,.8)}
.bub2.ann .bx{border-color:#FFC53D;background:color-mix(in srgb,#FFC53D 12%,var(--surface))}
.scq{text-align:center;font-weight:800;margin:4px 0 10px;font-size:16px}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shelf.body{grid-template-columns:repeat(3,1fr)}
.shi{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:6px 4px 8px;font:inherit;color:var(--ink);transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.shi:active{transform:scale(.95)}
.shi .pic{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;display:block}.shi .pic img{width:100%;height:100%;object-fit:cover;display:block}.shi .pe{font-size:30px;display:grid;place-items:center;height:100%}
.shi .de{font-size:12.5px;font-weight:700}
.shi.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--surface));animation:okPop .38s}
.shi.no{border-color:var(--bad);animation:shake .32s}
.basket{text-align:center;margin-top:10px;font-weight:800}
.paid{text-align:center;font-size:17px;margin-bottom:10px}.paid b{font-size:24px;color:var(--gold);direction:ltr;display:inline-block}
.money{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.money .coin{width:62px;height:62px;border-radius:50%;border:3px solid #b98a1a;background:radial-gradient(circle at 35% 30%,#ffe9a8,#e0b03a 55%,#a87a12);color:#4a3200;font-weight:800;font-size:14px;box-shadow:0 4px 0 #7a5a10}
.money .note{min-width:84px;height:52px;border-radius:10px;border:2px solid rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.money .note[data-m="5"]{background:linear-gradient(135deg,#9aa3ad,#6d7680)}.money .note[data-m="10"]{background:linear-gradient(135deg,#e46a6a,#b93b3b)}
.money .note[data-m="20"]{background:linear-gradient(135deg,#5b8ee6,#2f5fb8)}.money .note[data-m="50"]{background:linear-gradient(135deg,#f0a04b,#c46d14)}
.money button.tap{animation:okPop .3s}
.money button:active{transform:translateY(3px)}
.bub2 .av{overflow:hidden}.bub2 .av .pic,.bub2 .av img{width:100%;height:100%;object-fit:cover;display:block}
/* v20: exam models */
.extabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.extabs button{border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:10px 6px;font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.extabs button:active{transform:scale(.96)}
.extabs button b{font-size:15px}.extabs button span{font-size:12px;color:var(--mute)}
.extabs button.on{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 20%,transparent)}

/* v21 fixes */
.nav{transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}
.cbtn{padding:12px 10px;gap:8px;min-height:72px}
.cbtn i{width:36px;height:36px}
.cbtn i svg{width:18px;height:18px}
.cbtn div{font-size:14px;line-height:1.3}
.cbtn small{font-size:11.5px}
.fbpic{float:left;width:64px;height:64px;border-radius:14px;overflow:hidden;margin:0 0 6px 10px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.fbpic img{width:100%;height:100%;object-fit:cover;display:block}
.sclist{text-align:center;font-weight:800;font-size:18px;direction:ltr;background:var(--surface);border:1px dashed var(--gold);border-radius:14px;padding:10px 14px;margin:0 0 12px}
.ublink{color:var(--gold);font-weight:800;text-decoration:none}
/* v21 lobby */
.pcard2{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:16px;border-radius:24px;margin:6px 0 14px;color:#fff;
  background:radial-gradient(160px 100px at 90% 0%,rgba(255,197,61,.28),transparent 70%),linear-gradient(135deg,#2B1F86,#5B3DF5 60%,#8338EC);box-shadow:0 18px 36px -20px #5B3DF5}
.pav{grid-row:span 2;width:72px;height:72px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #FFC53D,0 0 18px rgba(255,197,61,.5)}
.pav .pic,.pav img{width:100%;height:100%;object-fit:cover;display:block}
.pname{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plv{font-size:13px;background:#FFC53D;color:#1A1446;border-radius:999px;padding:2px 10px;font-weight:800}
.pbar{height:10px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;margin:6px 0 4px}.pbar i{display:block;height:100%;background:linear-gradient(90deg,#FFC53D,#FF6B2C);border-radius:99px}
.pnext{font-size:12px;opacity:.85}
.pstats{grid-column:1/-1;display:flex;gap:8px;margin-top:6px}
.pstats>*{flex:1;text-align:center;background:rgba(255,255,255,.14);border-radius:12px;padding:6px 4px;font-weight:800;font-size:14px;color:#fff;text-decoration:none}
.advprev{display:block;text-decoration:none;color:var(--ink);border-radius:24px;padding:14px 14px 12px;background:var(--surface);border:1px solid var(--line);margin-bottom:12px;box-shadow:0 14px 30px -22px #5B3DF5}
.aph{display:flex;justify-content:space-between;align-items:center;font-size:15px}.aph span{color:var(--mute);font-weight:800;font-size:13px}
.apath{display:flex;align-items:center;justify-content:center;margin:14px 0 12px;direction:ltr}
.apn{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:16px;background:var(--c);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 60%,#000)}
.apn.lock{background:#3a3560;box-shadow:0 4px 0 #241f45;font-size:14px}
.apn.won::after{content:"★";position:absolute;margin-top:46px;font-size:11px;color:#FFC53D}
.apn{position:relative}
.apn.cur{width:54px;height:54px;font-size:19px;animation:lvlPulse 1.6s ease-in-out infinite}
.apl{flex:1;max-width:26px;height:4px;border-radius:9px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px)}
.apgo{text-align:center;font-weight:800;color:#fff;border-radius:16px;padding:12px;background:linear-gradient(135deg,#FF6B2C,#FFC53D);color:#1A1446}
.daily2{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;border-radius:22px;padding:14px 16px;margin-bottom:6px;background:linear-gradient(120deg,#FF3D7F,#FF6B2C);box-shadow:0 14px 28px -18px #FF3D7F}
.daily2 .dch{font-size:38px;animation:chestWig 2.4s ease-in-out infinite}
.daily2.done{background:linear-gradient(120deg,#19C79A,#0E8F6E)}.daily2.done .dch{animation:none}
.daily2 b{display:block;font-size:17px}.daily2 span{font-size:13px;opacity:.92}.daily2 .arr{margin-inline-start:auto;font-size:22px}
@keyframes chestWig{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-10deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.chest{text-align:center;margin:6px 0 2px;position:relative;height:110px}
.chest .cb{display:inline-block;font-size:76px;animation:chestShake .5s ease-in-out 2}
.chest .co{position:absolute;left:50%;top:30px;transform:translate(-50%,0) scale(.4);opacity:0;font-weight:800;font-size:22px;color:#FFC53D;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.4);transition:.5s cubic-bezier(.3,1.6,.5,1)}
.chest.open .cb{animation:none;transform:scale(1.15);filter:drop-shadow(0 0 22px #FFC53D)}
.chest.open .co{opacity:1;transform:translate(-50%,-34px) scale(1)}
@keyframes chestShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.lvup{text-align:center}.lvp{display:inline-block;width:110px;height:110px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px #FFC53D,0 0 30px rgba(255,197,61,.6);animation:okPop .6s}
.lvp .pic,.lvp img{width:100%;height:100%;object-fit:cover;display:block}
.lvt2{font-family:Outfit,sans-serif;font-weight:800;font-size:38px;margin-top:10px;background:linear-gradient(90deg,#FFC53D,#FF6B2C);-webkit-background-clip:text;background-clip:text;color:transparent}
.lvn{font-weight:800;font-size:20px;margin-bottom:6px}
.tpick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tpc{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:8px 6px 10px;transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.tpc:active{transform:scale(.95)}
.tpi{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,var(--surface))}
.tpi img{width:100%;height:100%;object-fit:cover;display:block}.tpi .pe{font-size:38px}
.tpc b{font-size:13px;text-align:center;line-height:1.3}
.tpill{display:inline-block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13.5px;margin:0 0 6px}
.tpill b{color:var(--gold)}
.sccard2{position:relative;display:block;height:190px;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 14px 26px -16px var(--c);transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.sccard2:active{transform:scale(.97)}
.sccard2 .scbg,.sccard2 .scbg .pic,.sccard2 .scbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sccard2 .scbg .pe{display:grid;place-items:center;height:100%;font-size:60px;background:var(--c)}
.sccard2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(10,6,40,.92) 78%)}
.sctag{position:absolute;top:8px;right:8px;z-index:1;font-size:11.5px;font-weight:800;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);border-radius:999px;padding:3px 9px}
.scplay{position:absolute;top:8px;left:8px;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#FFC53D;color:#1A1446;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.scbody{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.scbody b{font-size:16px}.scbody small{font-size:11.5px;opacity:.88;line-height:1.35}
.scbody .scs{font-size:12.5px;letter-spacing:1px;color:rgba(255,255,255,.55)}.scbody .scs i{font-style:normal;color:#FFC53D}
.sccard2.fresh{animation:freshGlow 2.6s ease-in-out infinite}
@keyframes freshGlow{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 55%,transparent),0 14px 26px -16px var(--c)}}
.grow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;margin:0 -16px;padding-inline:16px;scrollbar-width:none}
.grow::-webkit-scrollbar{display:none}
.gcard{flex:0 0 46%;max-width:200px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);border-radius:22px;padding:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 26%,var(--surface)),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.gcard:active{transform:scale(.96)}
.gico{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:34px;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 70%);box-shadow:0 8px 18px -6px var(--c),inset 0 -4px 0 rgba(0,0,0,.18);margin-bottom:4px}
.gcard b{font-size:15.5px}.gcard small{font-size:12px;color:var(--mute);line-height:1.35;min-height:32px}
.gbest{font-size:12px;font-weight:800;color:var(--gold);margin-top:2px}
.bstrip{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:12px 14px;margin-top:6px}
.bsh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.bsh span{color:var(--mute);font-size:13px;font-weight:800}
.bsrow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.bsrow::-webkit-scrollbar{display:none}
.bsi{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--bg);border:1px solid var(--line);filter:grayscale(1);opacity:.4}
.bsi.got{filter:none;opacity:1;border-color:var(--gold);box-shadow:0 0 10px -2px var(--gold)}
.bd:not(.got){position:relative}.bd:not(.got)::after{content:"🔒";position:absolute;top:6px;left:8px;font-size:13px;filter:none}
@media (prefers-reduced-motion:reduce){.daily2 .dch,.sccard2.fresh,.apn.cur,.chest .cb{animation:none}}
/* v23: new animated logo */
.logo svg.lgo{width:38px;height:38px;border-radius:50%;box-shadow:0 0 14px -2px rgba(123,47,224,.7)}
.lgo .lg-rk{animation:lgBob 2.4s ease-in-out infinite}
.lgo .lg-fl{transform-box:view-box;transform-origin:50px 68px;animation:lgFl .16s ease-in-out infinite alternate}
.lgo .lg-tw{animation:lgTw 1.8s ease-in-out infinite alternate}.lgo .lg-tw2{animation:lgTw 2.6s ease-in-out infinite alternate .6s}
@keyframes lgBob{0%,100%{transform:translate(0,0)}50%{transform:translate(1.6px,-2.4px)}}
@keyframes lgFl{from{transform:scaleY(.82) scaleX(.94)}to{transform:scaleY(1.08) scaleX(1.04)}}
@keyframes lgTw{from{opacity:.25}to{opacity:1}}
@media (max-width:360px){.logo svg.lgo{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){.lgo .lg-rk,.lgo .lg-fl,.lgo .lg-tw,.lgo .lg-tw2{animation:none}}
.tab .soon{font-style:normal;font-size:10.5px;font-weight:800;background:#FFC53D;color:#1A1446;border-radius:999px;padding:1px 7px;margin-inline-start:4px}
.b1soon .big{font-size:56px}.b1soon h3{margin:6px 0}
.tabs{display:grid!important;grid-template-columns:repeat(3,1fr);overflow:visible}

/* v24 learn hub */
.lhub{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:6px 0 18px}
.lhc{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 14px 14px;border-radius:22px;text-decoration:none;color:var(--tx);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 26%,var(--card)),var(--card) 75%);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);min-height:150px;transition:transform .15s}
.lhc:active{transform:scale(.97)}
.lhc-i{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--c);color:#fff;margin-bottom:6px;box-shadow:0 6px 18px color-mix(in srgb,var(--c) 45%,transparent)}
.lhc-i svg{width:26px;height:26px}
.lhc b{font-size:18px}.lhc small{color:var(--mut);font-size:13px;line-height:1.5}
.lhc-n{margin-top:auto;font-size:12px;color:var(--mut);padding-top:6px}
.lhc-bar{height:5px;border-radius:9px;background:color-mix(in srgb,var(--c) 18%,transparent);overflow:hidden}.lhc-bar i{display:block;height:100%;background:var(--c);border-radius:9px}
.lhc .soon{position:absolute;top:12px;left:12px;font-style:normal;font-size:11px;font-weight:800;background:#FFC53D;color:#1A1446;border-radius:999px;padding:2px 9px}
.lhc.soon{opacity:.85}
.lsec-h{display:flex;align-items:center;gap:10px;margin:8px 0 6px}.lsec-h h1{margin:0;font-size:26px}
.lsec-i{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--v,#5B3DF5);color:#fff}.lsec-i svg{width:24px;height:24px}

/* v25 lena welcome */
.lncard{padding:0!important;overflow:hidden;text-align:center;max-width:360px}
.ln-st{background:#1B1450}.lnsvg{display:block;width:100%}
.lncard .x{z-index:3}
.ln-cap{padding:12px 16px 2px;min-height:76px}.ln-cap .de{font-size:22px;font-weight:800;color:#FFC53D;direction:ltr;line-height:1.35}.ln-cap .ar{font-size:16px;margin-top:2px}
.lncard .btn.wide{width:calc(100% - 32px);margin:10px 16px 4px}.lncard .linkbtn{margin:0 0 14px}
#ln-all{animation:lnBr 3.4s ease-in-out infinite;transform-origin:150px 320px}
@keyframes lnBr{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#ln-head{transform-origin:150px 200px;animation:lnTilt 4s ease-in-out infinite}
@keyframes lnTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg)}65%{transform:rotate(-3deg)}}
#ln-eyes{transform-box:fill-box;transform-origin:center;animation:lnBl 3.8s infinite}
@keyframes lnBl{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
#ln-arm{transform-origin:205px 262px;animation:lnWv .55s ease-in-out infinite alternate}
@keyframes lnWv{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@media (prefers-reduced-motion:reduce){#ln-all,#ln-head,#ln-arm{animation:none}}

/* v26 stop button */
.chip.stopbtn{background:#E5484D!important;color:#fff!important;border-color:#E5484D!important}
/* v27 compact learn hub: 3 per row, room for more */
.lhub{grid-template-columns:repeat(3,1fr);gap:10px}
.lhc{min-height:0;padding:12px 10px 10px;border-radius:18px;gap:3px;align-items:center;text-align:center}
.lhc-i{width:40px;height:40px;border-radius:13px;margin-bottom:4px}.lhc-i svg{width:22px;height:22px}
.lhc b{font-size:15px;line-height:1.3}
.lhc small{font-size:11.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lhc-n{font-size:11px;padding-top:4px}.lhc-bar{width:100%;height:4px}
.lhc .soon{top:6px;left:6px;font-size:10px;padding:1px 7px}
@media (max-width:340px){.lhub{grid-template-columns:repeat(2,1fr)}}
/* v27 header fits search button */
@media (max-width:480px){.top .wrap{gap:6px}.top .ibtn{width:38px;height:38px;min-width:38px}.top .ibtn .ic{width:19px;height:19px}.top .ibtn small{font-size:9.5px}.top .logo b{font-size:19px}.top .logo .lgo{width:34px;height:34px}}

/* v28 scene translation reveal */
.bub2 .tr.trin{animation:trIn .45s ease}@keyframes trIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* v29 speaking check */
.sres{margin:12px 0;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:8px}
.sres.good{border-color:#19C79A}.sres.mid{border-color:#FFC53D}
.sres-h{font-weight:800}.sres-h b{float:left}
.sres-r span{font-size:13px;color:var(--mut)}.sres-r .de{font-size:18px;font-weight:700;margin-top:2px;direction:ltr;text-align:left;line-height:1.7}
.wok{color:#19A97E}.wno{color:#E5484D;text-decoration:underline wavy;text-underline-offset:4px}
.sres-k{font-size:14px;color:#C2410C}
.btn.pulse{animation:btnPulse 1.2s ease-in-out 3}@keyframes btnPulse{50%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(255,197,61,.35)}}
.sres .wok{color:#19C79A!important}.sres .wno{color:#FF5C61!important}

/* conjugation pronoun label */
.it .cjp{display:inline-block;direction:ltr;font-size:.78em;font-weight:800;padding:1px 9px;margin-inline-end:8px;border-radius:999px;background:color-mix(in srgb,var(--c,#5B3DF5) 22%,transparent);color:inherit;vertical-align:middle}



/* ===== lesson page v3: "Aurora Glass" — glass cards on a living gradient ===== */
.lesson2{--glass:rgba(255,255,255,.58);--glass2:rgba(255,255,255,.78);--gline:rgba(255,255,255,.95);--glow:rgba(123,97,255,.28);--grad:linear-gradient(120deg,#7B61FF 0%,#B05CFF 45%,#FF6B2C 100%);position:relative;z-index:1}
:root[data-theme="dark"] .lesson2{--glass:rgba(255,255,255,.07);--glass2:rgba(255,255,255,.12);--gline:rgba(255,255,255,.16);--glow:rgba(123,97,255,.38)}
.aurora i{opacity:.22}:root[data-theme="dark"] .aurora i{opacity:.38}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(70px);opacity:.38;animation:aur 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:#6B4BFF;top:-22vmax;right:-18vmax}
.aurora i:nth-child(2){background:#FF6B2C;bottom:-28vmax;left:-22vmax;opacity:.26;animation-duration:22s}
.aurora i:nth-child(3){background:#E2489E;top:35%;right:-30vmax;width:40vmax;height:40vmax;opacity:.2;animation-duration:26s}
@keyframes aur{to{transform:translate(-6vmax,5vmax) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}
.lesson2 .ph{border-radius:28px;box-shadow:0 18px 50px -12px color-mix(in srgb,var(--c) 60%,transparent)}
.lesson2 .glass,.lesson2 .rcard,.lesson2 .tip2,.lesson2 .list .it,.lesson2 .ctab .it.ctr,.lesson2 .lq-c,.lesson2 .lq-end,.lesson2 .lnb,.lesson2 .lmap,.lesson2 .ubar{background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px -14px rgba(0,0,0,.45)}
/* section map */
.lesson2 .lmap{display:flex;gap:6px;padding:6px;margin:16px 0 6px;border-radius:999px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:9}
.lesson2 .lmap button{flex:1;border:0;background:transparent;color:var(--ink);border-radius:999px;padding:10px 6px;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:background .25s,color .25s}
.lesson2 .lmap button.on{background:var(--grad);color:#fff;box-shadow:0 6px 18px -4px var(--glow)}
.lesson2 .lmap em{font-style:normal;font-size:11px;background:rgba(255,255,255,.18);border-radius:99px;padding:1px 7px;margin-inline-start:4px}
/* section headings */
.lsec-hd{display:flex;align-items:center;gap:14px;margin:34px 2px 16px;scroll-margin-top:140px}
.lsec-n{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:19px;color:#fff;background:var(--grad);box-shadow:0 0 0 5px rgba(123,97,255,.12),0 8px 24px -4px var(--glow)}
.lsec-hd b{display:block;font-size:21px;background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink) 60%,#B05CFF));-webkit-background-clip:text;background-clip:text;color:transparent}
.lsec-hd small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
/* rules */
.rgrid{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.lesson2 .rcard{position:relative;border-radius:24px;padding:18px 18px 18px 18px;font-size:15.5px;line-height:2;overflow:hidden}
.lesson2 .rcard::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.9}
.lesson2 .rcard::after{content:'';position:absolute;width:140px;height:140px;border-radius:50%;left:-50px;top:-60px;background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%);pointer-events:none}
.rcard .rbig{float:right;margin:2px 0 6px 12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:15px;color:#fff;background:var(--grad);box-shadow:0 6px 16px -4px var(--glow)}
.rcard .rnum{display:block;font-size:12px;font-weight:800;color:var(--mute);margin-bottom:2px}
/* tips */
.lesson2 .tip2{display:flex;gap:12px;align-items:flex-start;border-radius:22px;padding:14px 16px;margin:0 0 12px}
.lesson2 .tip2 .tip-i{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--glass2);border:1px solid var(--gline)}
.lesson2 .tip2.trap{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,92,97,.25),0 10px 30px -16px rgba(255,92,97,.6)}
.lesson2 .tip2.memo{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(176,92,255,.28),0 10px 30px -16px rgba(176,92,255,.6)}
.lesson2 .tip2 .k{display:inline-block;margin-bottom:4px}
/* group labels */
.gh2{display:flex;align-items:center;gap:10px;margin:24px 2px 12px;font-weight:800;font-size:14.5px;color:var(--ink)}
.gh2::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px var(--glow);flex:none}
.gh2 span{display:none}.gh2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gline))}
/* example cards */
.lesson2 .list{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:520px){.lesson2 .list{grid-template-columns:1fr 1fr}}
.lesson2 .list .it{border-radius:22px;padding:14px 14px 14px 16px;gap:14px;align-items:center;transition:transform .2s,box-shadow .25s;border-inline-start:1px solid var(--gline)}
.lesson2 .list .it .em{display:none}
.lesson2 .list .it .play.sm{width:46px;height:46px;border-radius:50%;background:var(--grad);box-shadow:0 8px 20px -6px var(--glow);flex:none}
.lesson2 .list .it .d{font-size:18px}
.lesson2 .list .it .m{font-size:13.5px}
.lesson2 .list .it:active{transform:scale(.985)}
.lesson2 .it.on{box-shadow:0 0 0 2px transparent,0 0 0 2px #B05CFF,0 0 28px -2px var(--glow)!important;background:linear-gradient(120deg,rgba(123,97,255,.22),rgba(255,107,44,.14))!important}
.lesson2 .it.on .play.sm{animation:pulseGlow 1.1s ease-in-out infinite}
@keyframes pulseGlow{50%{box-shadow:0 0 0 8px rgba(176,92,255,.18),0 8px 20px -6px var(--glow)}}
/* conjugation */
.ctab{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;direction:ltr}
.ctab + .list,.list + .ctab{margin-top:12px}
.lesson2 .ctab .it.ctr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;margin:0;padding:14px 6px 12px;border-radius:22px;text-align:center;position:relative;min-height:116px}
.ctab .ctp{font-family:Outfit;font-weight:800;font-size:12.5px;color:#fff;background:var(--grad);border-radius:99px;padding:3px 10px;box-shadow:0 4px 12px -4px var(--glow)}
.ctab .ctf{font-family:Outfit;font-weight:700;font-size:15px;line-height:1.35}
.ctab .it.ctr .play.sm{position:static;width:30px;height:30px;border-radius:50%;background:var(--glass2);border:1px solid var(--gline);box-shadow:none}
.ctab .it.ctr .play.sm svg{width:14px;height:14px}
/* quiz */
.lesson2 .lq-c,.lesson2 .lq-end{border-radius:26px;padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.lesson2 .lq-c::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;pointer-events:none}
.lq-end{align-items:flex-start}
.lq-n{align-self:flex-start;font-size:12px;font-weight:800;color:#fff;background:var(--grad);border-radius:99px;padding:3px 12px}
.lq-de{font-size:23px;font-weight:800;direction:ltr;text-align:left;font-family:Outfit}.lq-s{font-size:14px;color:var(--mute)}
.lesson2 .lquiz .opt{border-radius:18px;background:var(--glass2);border:1px solid var(--gline);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lesson2 .lquiz .opt.ok{background:linear-gradient(120deg,rgba(25,199,154,.35),rgba(25,199,154,.15));border-color:#19C79A;box-shadow:0 0 22px -4px rgba(25,199,154,.6)}
.lesson2 .lquiz .opt.no{background:linear-gradient(120deg,rgba(255,92,97,.3),rgba(255,92,97,.12));border-color:#FF5C61}
/* prev / next */
.lnav2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 8px}
.lesson2 .lnb{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:22px;text-decoration:none;color:var(--ink)}
.lnb small{color:var(--mute);font-size:12px}.lnb b{font-size:15px}
.lesson2 .lnb.nx{background:var(--grad);color:#fff;border:0;text-align:left;box-shadow:0 12px 30px -10px var(--glow)}.lnb.nx small{color:rgba(255,255,255,.8)}
.lesson2 .unitbar,.lesson2 .ubar{border-radius:22px}
.lesson2 .ctl{position:static!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;margin:0 0 10px}
.lesson2 .lmap{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
/* sticky section bar: solid, so nothing shows through it while scrolling */
.lesson2 .lmap{background:linear-gradient(120deg,color-mix(in srgb,var(--bg) 94%,#7B61FF),color-mix(in srgb,var(--bg) 94%,#FF6B2C))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;box-shadow:0 0 0 8px var(--bg),0 16px 26px -10px rgba(0,0,0,.5)!important}

.ctab .it.ctr .play.sm{color:var(--ink)}.ctab .it.ctr .play.sm svg{fill:currentColor}
:root[data-theme="light"] .ctab .it.ctr .play.sm{background:linear-gradient(120deg,#7B61FF,#B05CFF 45%,#FF6B2C);color:#fff;border:0}

/* inside a lesson: once you scroll past the title, the section tabs take the header's place */
.top{transition:transform .3s ease}
body.lsn-tabs .top{transform:translateY(-110%)}
body.lsn-tabs .lesson2 .lmap{top:calc(env(safe-area-inset-top,0px) + 8px)}
.lesson2 .lmap{transition:top .3s ease}
/* ===== lesson style: NEON SPACE (lesson pages only, same look in light & dark) ===== */
body.th-neon{background:#05030F}
body.th-neon .aurora{background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#cfe,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 10% 85%,#fff,transparent),radial-gradient(1px 1px at 55% 45%,#fff,transparent),#05030F;background-size:240px 240px}
body.th-neon .aurora i{opacity:.12}
body.th-neon .lesson2{--glass:rgba(10,8,30,.75);--glass2:rgba(20,16,50,.9);--gline:rgba(0,229,255,.55);--glow:rgba(0,229,255,.55);--grad:linear-gradient(120deg,#00E5FF,#7B61FF 55%,#FF2BD6)}
body.th-neon .lesson2 .rcard,body.th-neon .lesson2 .list .it,body.th-neon .lesson2 .ctab .it.ctr,body.th-neon .lesson2 .lq-c,body.th-neon .lesson2 .tip2,body.th-neon .lesson2 .ubar{border:1px solid var(--gline)!important;box-shadow:0 0 0 1px rgba(0,229,255,.15),0 0 18px -2px rgba(0,229,255,.45),inset 0 0 22px -12px rgba(0,229,255,.6)!important;backdrop-filter:none!important}
body.th-neon .lesson2 .list .it:nth-child(even){--gline:rgba(255,43,214,.6)}
body.th-neon .lesson2 .list .it:nth-child(even){box-shadow:0 0 0 1px rgba(255,43,214,.15),0 0 18px -2px rgba(255,43,214,.45),inset 0 0 22px -12px rgba(255,43,214,.6)!important}
body.th-neon .lesson2 .d,body.th-neon .lq-de,body.th-neon .ctf{text-shadow:0 0 10px rgba(0,229,255,.55);color:#EFFFFF}
body.th-neon .lsec-hd b{color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 0 14px rgba(0,229,255,.8)}
body.th-neon .lesson2 .lmap{background:#0A0820!important;border-color:rgba(0,229,255,.5)!important;box-shadow:0 0 0 8px #05030F,0 0 22px -4px rgba(0,229,255,.6)!important}
body.th-neon .rkt{display:block}
.rkt{display:none;position:fixed;inset-inline-start:6px;top:140px;bottom:90px;width:22px;z-index:8;pointer-events:none}
.rkt i{position:absolute;inset-inline-start:10px;top:0;bottom:0;width:2px;background:linear-gradient(#00E5FF,#FF2BD6);opacity:.35;border-radius:2px}
.rkt b{position:absolute;inset-inline-start:0;font-size:20px;transform:rotate(-45deg);filter:drop-shadow(0 0 8px #FF2BD6);transition:top .2s}

/* keep the lesson page dark in light mode too (header + bottom bar follow) */
body.th-neon{--bg:#05030F;--surface:#120F2A;--surface2:#1C1840;--ink:#EFF2FF;--mute:#A6A3C8;--line:#262150;color-scheme:dark;color:var(--ink)}
body.th-neon .top,body.th-neon .nav{background:rgba(8,6,22,.92)!important;border-color:#262150!important}
body.th-neon .lesson2 .lnb{color:var(--ink)}

.ctab .ctm{direction:rtl;font-size:11.5px;line-height:1.5;color:var(--mute);font-family:inherit}

/* v30 review + weekly challenge */
.wkc{margin-top:10px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,#FFB020 10%,transparent);border:1.5px solid color-mix(in srgb,#FFB020 35%,transparent)}
.wkc-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.wkc-t span{font-size:12.5px;color:var(--mute)}
.wkc .prog{margin:7px 0 4px}.wkc .prog i{background:linear-gradient(90deg,#FFB020,#FF6B2C)}
.wkc small{font-size:12px;color:var(--mute)}.wkc.done{background:color-mix(in srgb,#19C79A 12%,transparent);border-color:#19C79A}
.revc{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:12px 14px;border-radius:18px;text-decoration:none;color:#fff;background:linear-gradient(115deg,#0EA5E9,#5B3DF5);box-shadow:0 10px 26px -12px #0EA5E9}
.revc .em{font-size:28px}.revc b{display:block;font-size:16px}.revc small{opacity:.9;font-size:13px}.revc .arr{margin-inline-start:auto;font-size:22px}
.hres .hcmp{font-size:20px;font-weight:800;margin:6px 0 2px;direction:ltr}.hres .wok{color:#19A97E}.hres .wno{color:#E5484D;text-decoration:underline wavy;text-underline-offset:4px}
.soonrow{opacity:.6;pointer-events:none}.soonrow .soon{font-style:normal;font-size:11px;font-weight:800;background:#FFC53D;color:#1A1446;border-radius:99px;padding:2px 9px}
.wach{display:flex;gap:12px;align-items:flex-start;margin:16px 0 4px;padding:16px;border-radius:20px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#128C7E,#25D366);box-shadow:0 12px 28px -12px rgba(37,211,102,.6)}
.wach-i{width:46px;height:46px;flex:none;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}.wach-i svg{width:24px;height:24px}
.wach b{display:block;font-size:16px}.wach small{display:block;opacity:.92;font-size:13px;margin:3px 0 10px;line-height:1.6}
.wach-b{display:inline-block;background:#fff;color:#128C7E;font-weight:800;font-size:13.5px;border-radius:99px;padding:6px 16px}
/* ladder: compact, all rungs the same size */
.ladder{gap:8px}
.ladder .rung{padding:9px 12px;border-radius:16px;gap:12px;min-height:64px;box-shadow:none}
.ladder .rung .lv{width:42px;height:42px;font-size:17px;border-radius:13px;flex:none}
.ladder .rung > div{flex:1;min-width:0}
.ladder .rung b{font-size:14.5px}.ladder .rung > div span{font-size:12px;line-height:1.5;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder .rung em{font-size:11px;padding:3px 10px;flex:none}
.ladder .rung.open{border-color:color-mix(in srgb,var(--violet) 45%,var(--line))}
.ladder .rung .lv{display:grid;place-items:center;font-size:17px;line-height:1;padding:0;color:var(--mute)}.ladder .rung.open .lv{color:#fff}
.ladder .rung > div span{white-space:normal;overflow:visible;text-overflow:clip;font-size:12.5px}
.wainv{text-align:center}.wainv-i{width:64px;height:64px;margin:4px auto 10px;border-radius:50%;background:linear-gradient(135deg,#128C7E,#25D366);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(37,211,102,.6)}.wainv-i svg{width:34px;height:34px}.wainv h3{margin:0 0 6px;font-size:18px;line-height:1.5}.wainv p{margin:0 0 14px;opacity:.85}.wainv .wainv-go{background:linear-gradient(120deg,#128C7E,#25D366);color:#fff;text-decoration:none;display:block}

/* ---- phase 1 ---- */
.ibtn.wabtn{color:#fff;background:linear-gradient(135deg,#128C7E,#25D366);border-color:transparent;box-shadow:0 6px 16px -6px rgba(37,211,102,.7);border-radius:50%}
.plan0{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:13px 14px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--violet) 60%,var(--line));background:color-mix(in srgb,var(--violet) 12%,var(--surface));color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.plan0 .em{font-size:28px}.plan0 b{display:block;font-size:15.5px}.plan0 small{color:var(--mute);font-size:12.5px}.plan0 .arr{margin-inline-start:auto;font-size:20px;color:var(--violet)}
.plan{margin:12px 0 0;padding:14px;border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 20%,var(--surface)),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--violet) 35%,var(--line))}
.plan-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.plan-h b{display:block;font-size:16.5px}.plan-h small{color:var(--mute);font-size:12.5px}
.plan-n{font-weight:800;font-size:15px;background:var(--violet);color:#fff;border-radius:99px;padding:4px 12px}
.plan-miss,.plan-done{margin:10px 0 0;padding:8px 12px;border-radius:12px;font-size:13px;background:color-mix(in srgb,var(--gold) 16%,transparent)}
.plan-done{background:color-mix(in srgb,var(--ok) 18%,transparent)}
.ptasks{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.ptask{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface2);text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.ptask i{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--mute);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:900}
.ptask.ok i{background:var(--ok);border-color:var(--ok);color:#fff}.ptask.ok .pt{opacity:.6;text-decoration:line-through}
.ptask .pe{font-size:18px}.ptask .pt{flex:1;font-size:14px;line-height:1.5}.ptask .arr{color:var(--mute)}
.plan-ed{margin-top:8px;font-size:13px}
.pathc{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:14px;border-radius:20px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#5B3DF5,#8338EC);box-shadow:0 12px 28px -14px #5B3DF5}
.pathc .em{font-size:32px}.pathc>div{flex:1;min-width:0}.pathc b{display:block;font-size:17px}.pathc small{opacity:.9;font-size:13px}
.pathc .prog{margin-top:8px;background:rgba(255,255,255,.22)}.pathc .prog i{background:#fff}
.pathc .gobtn{background:#fff;color:#5B3DF5;font-weight:800;border-radius:99px;padding:6px 14px;font-size:13.5px;flex:none}
.pathsum{margin:4px 0 12px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.pathsum b{display:block;margin-bottom:8px}
.unitc{margin:0 0 10px;border-radius:20px;background:var(--surface);border:1.5px dashed var(--line);overflow:hidden}
.unitc.here{border:2px solid var(--violet);box-shadow:0 10px 26px -14px var(--violet)}.unitc.full{border-style:solid;border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.unitc summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer}.unitc summary::-webkit-details-marker{display:none}
.uic{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--surface2)}.unitc.here .uic{background:var(--violet)}
.utx{flex:1;min-width:0}.utx b{display:block;font-size:15px;line-height:1.5}.utx small{color:var(--mute);font-size:12.5px}.utx .prog{margin-top:6px}
.uhere{font-style:normal;font-size:12px;font-weight:800;background:var(--violet);color:#fff;border-radius:99px;padding:4px 10px;flex:none}
.ulist{padding:0 12px 12px;display:flex;flex-direction:column;gap:6px}
.urow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface2);text-decoration:none;color:var(--ink)}
.urow .ue{font-size:18px}.urow .ut{flex:1;font-size:14px}.urow .up{font-size:12px;color:var(--mute)}.urow .arr{color:var(--mute)}
.utest{margin-top:6px;text-align:center;text-decoration:none;display:block}
.finalx{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:14px;border-radius:20px;text-decoration:none;color:var(--ink);background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 26%,var(--surface)),var(--surface));border:1.5px solid color-mix(in srgb,var(--gold) 60%,var(--line))}
.finalx .em{font-size:30px}.finalx b{display:block;font-size:15.5px}.finalx small{color:var(--mute);font-size:12.5px}.finalx .arr{margin-inline-start:auto}
.progx{margin:14px 0 0;padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}.progx h2{margin:0 0 10px;font-size:18px}
.progu{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 12px;border-radius:14px;background:var(--surface2);text-decoration:none;color:var(--ink)}.progu b{font-size:16px}.progu small{width:100%;color:var(--mute);font-size:12.5px}
.skh{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px}.skh small{color:var(--mute);font-size:12px}.skh a{font-size:13px;color:var(--violet);text-decoration:none;font-weight:700}
.skills{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.skr{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:13.5px}.skr .prog{grid-column:1/-1}.skr .prog.low i{background:var(--flame)}
.pplan{margin-top:12px;padding:9px 12px;border-radius:12px;background:var(--surface2);font-size:13px}.pplan .linkbtn{font-size:13px}
.weak{display:flex;flex-direction:column;gap:6px}.wk{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:12px;background:var(--surface2)}.wk small{color:var(--mute);font-size:12px}
.exh{display:flex;flex-direction:column;gap:6px}.exr{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--surface2);font-size:13.5px}.exr small{color:var(--mute)}.exr b.ok{color:var(--ok)}.exr b.no{color:var(--flame)}
@media (max-width:480px){.top .wrap{gap:5px}.top .ibtn{width:35px;height:35px;min-width:35px}.top .ibtn.me{min-width:37px;padding:0 4px}.top .ibtn .ic{width:18px;height:18px}.top .logo b{font-size:18px}.top.hasback .logo b{font-size:16.5px}.top .logo .lgo{width:30px;height:30px}.ibtn.wabtn svg{width:19px;height:19px}}
@media (max-width:380px){.top .wrap{gap:4px}.top .ibtn{width:33px;height:33px;min-width:33px}.top .logo b{font-size:16.5px}.top.hasback .logo b{font-size:15px}}

/* ---- phase 2 ---- */
.iacts{display:flex;gap:4px;align-items:center;flex:none;margin-inline-start:2px}
.ia{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;background:color-mix(in srgb,var(--surface2) 80%,transparent);border:1px solid var(--line);color:var(--mute);cursor:pointer}
.ia.star.on{color:#FFB020;border-color:#FFB020;background:color-mix(in srgb,#FFB020 15%,transparent)}
.ia.big{width:44px;height:44px;font-size:21px}
.krule{display:grid;gap:8px;margin:10px 0 4px}
.kr-m,.kr-r{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--c) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.kr-r{background:color-mix(in srgb,var(--gold) 12%,var(--surface));border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.kr-m>span,.kr-r>span{font-size:22px}.krule small{display:block;color:var(--mute);font-size:12px}.krule b{font-size:14.5px;line-height:1.7;font-weight:700}
.pracm{max-width:460px}
.prac{text-align:center}.prac-w{font-size:26px;font-weight:800;line-height:1.4;margin-top:6px}.prac-p{color:var(--pr);margin-top:2px}.prac-m{color:var(--mute);margin-top:4px}
.prac-b{display:flex;gap:10px;justify-content:center;align-items:center;margin:12px 0 4px}
.prac-h{font-size:12.5px;color:var(--mute);margin-top:10px}
.prac-ws{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px;direction:ltr}
.wchip{border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:10px;padding:5px 10px;font:inherit;font-size:15px;cursor:pointer}.wchip.on{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 22%,var(--surface2))}
.prac-wm{min-height:22px;margin-top:6px;font-size:14px}
.prac-say{margin:14px 0 6px}
.micbig{display:inline-flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.micbig span{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:linear-gradient(135deg,#5B3DF5,#8338EC);box-shadow:0 10px 26px -10px #5B3DF5}
.micbig.live span{background:linear-gradient(135deg,#E63946,#FF6B2C);animation:micp 1s infinite}
.micbig small{font-size:13px;color:var(--mute)}
@keyframes micp{50%{transform:scale(1.08)}}
.pres{display:flex;gap:14px;align-items:center;text-align:start;margin-top:12px;padding:12px;border-radius:16px;background:var(--surface2)}
.pres b{display:block;font-size:15px}.pres small{display:block;color:var(--mute);font-size:12.5px;margin-top:4px}.pres-w{margin-top:4px;font-size:17px}
.pres-x{margin-top:12px;padding:10px;border-radius:14px;background:color-mix(in srgb,var(--gold) 15%,transparent);font-size:14px}
.ring{--p:0;width:70px;height:70px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--rc) calc(var(--p)*1%),var(--line) 0)}
.ring b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:19px;font-weight:900}
.prac-rate{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.prac-rate span{width:100%;font-size:13px;color:var(--mute)}
.prac-rate button{border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:99px;padding:7px 12px;font:inherit;font-size:13.5px;cursor:pointer}.prac-rate button.on{border-color:var(--violet);background:var(--violet);color:#fff}
.prac-rep{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--mute)}
#pcType{margin-top:8px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pgrid a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:var(--surface2);text-decoration:none;color:var(--ink)}
.pgrid span{font-size:22px}.pgrid b{font-size:13px}.pgrid small{color:var(--mute);font-size:12px}
.krule .de,.prac-wm .de,.sres .de{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* ---- phase 3/4 ---- */
.nav a.navmid .nm{width:46px;height:46px;margin:-20px auto 2px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#5B3DF5,#06A77D);color:#fff;box-shadow:0 8px 20px -6px rgba(91,61,245,.7);border:3px solid var(--bg,#0B0920)}
.nav a.navmid .nm .ic{width:22px;height:22px}
.nav a.navmid.on .nm{background:linear-gradient(135deg,#FF6B2C,#FFB020)}
.labg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.labt{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-radius:20px;text-decoration:none;color:var(--ink);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 24%,var(--surface)),var(--surface) 75%);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));min-height:128px;transition:transform .15s}
.labt:active{transform:scale(.97)}.labt.sm{min-height:0}
.labi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--c) 30%,transparent)}
.labt b{font-size:15.5px}.labt small{color:var(--mute);font-size:12.5px;line-height:1.6}
.workc{display:flex;align-items:center;gap:12px;margin:4px 0 6px;padding:16px 14px;border-radius:22px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#3A86FF,#5B3DF5 60%,#8338EC);box-shadow:0 14px 30px -14px #3A86FF}
.workc .em{font-size:34px}.workc>div{flex:1;min-width:0}.workc small{display:inline-block;background:#FFC53D;color:#1a1446;font-weight:800;border-radius:99px;padding:1px 8px;font-size:11px}.workc b{display:block;font-size:18px;margin:2px 0}.workc span{font-size:12.5px;opacity:.92;line-height:1.6}
.workc .gobtn{background:#fff;color:#5B3DF5;font-weight:800;border-radius:99px;padding:6px 14px;font-size:13.5px;flex:none}
.ulpick{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}.ulpick::-webkit-scrollbar{display:none}.ulpick .chip{flex:none}
.rcard2{margin-top:6px;padding:18px 16px;border-radius:22px;background:var(--surface);border:1px solid var(--line);text-align:center}
.rc-n{font-size:12.5px;color:var(--mute)}.rc-de{font-size:24px;font-weight:800;line-height:1.5;margin:8px 0 4px;transition:filter .25s}.rc-de.blur{filter:blur(9px)}
.rc-mn{color:var(--mute);margin-bottom:12px}.rc-ar{font-size:20px;font-weight:700;margin:8px 0 14px;line-height:1.7}
.rc-seg{justify-content:center;margin:6px auto 12px;display:inline-flex}
.rc-ctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}.rc-go{min-width:120px}
.rc-hide{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px;font-size:14px}
.rc-rec{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}.btn.live{background:var(--flame);color:#fff}
.myrec{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:8px;font-size:13px}.myrec audio{width:100%;max-width:320px}
.ladr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}
.ladr button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface2);color:var(--ink);font:inherit;cursor:pointer}
.ladr button span{font-size:26px}.ladr button.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--surface2))}
.play.big{width:78px;height:78px;margin:0 auto 8px;display:grid;place-items:center}.play.big svg{width:34px;height:34px}
#dIn{margin-top:12px;min-height:64px;resize:vertical;font-size:17px}
.pairo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.pairo .opt{display:flex;flex-direction:column;gap:2px;align-items:center;padding:16px 8px}.pairo .opt b{font-size:19px}.pairo .opt small{color:var(--mute)}
.cjq{display:inline-block;background:var(--violet);color:#fff;border-radius:10px;padding:0 10px;margin-inline-end:6px}
.scmic{border:0;background:linear-gradient(135deg,#5B3DF5,#06A77D);color:#fff;border-radius:99px;padding:5px 12px;font:inherit;cursor:pointer;margin-inline-start:8px}.scmic small{font-size:12.5px;color:#fff}.scmic.live{background:var(--flame)}
.worklist{display:flex;flex-direction:column;gap:10px}
.workr{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;text-decoration:none;color:var(--ink);background:linear-gradient(120deg,color-mix(in srgb,var(--c) 20%,var(--surface)),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.wre{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:28px;background:color-mix(in srgb,var(--c) 28%,transparent)}
.wrt{flex:1;min-width:0}.wrt small{color:var(--mute);font-size:12px}.wrt b{display:block;font-size:16px}.workr .arr{color:var(--mute);font-size:20px}
.wdots{display:flex;gap:5px;margin-top:6px}.wdots i{width:22px;height:6px;border-radius:9px;background:var(--line)}.wdots i.on{background:var(--ok)}
.wsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 14px}
.wst{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:16px;text-decoration:none;color:var(--mute);background:var(--surface);border:1.5px solid var(--line);font-size:12px;text-align:center;line-height:1.4}
.wst span{font-size:20px}.wst.on{color:var(--ink);border-color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,var(--surface))}.wst.ok{border-color:color-mix(in srgb,var(--ok) 60%,var(--line))}
.wchat{display:flex;flex-direction:column;gap:8px}
.wb{display:flex;flex-direction:column;gap:3px;max-width:88%;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.wb.me{align-self:flex-start;border-color:color-mix(in srgb,var(--violet) 55%,var(--line));background:color-mix(in srgb,var(--violet) 14%,var(--surface))}
.wb.ot{align-self:flex-end}.wb small{color:var(--mute);font-size:11.5px}.wb .de{font-size:15.5px;font-weight:700;direction:ltr;text-align:left}.wb em{font-style:normal;color:var(--mute);font-size:13px}
.wb.on{box-shadow:0 0 0 2px var(--gold)}.notr .wb em{display:none}
.wq{padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:16px;font-weight:700;margin-bottom:10px;line-height:1.7}
.wturn{margin:12px 0;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--violet) 14%,var(--surface));border:1.5px dashed color-mix(in srgb,var(--violet) 55%,var(--line));text-align:center}
.wturn small{color:var(--mute);font-size:12.5px}.wturn b{display:block;font-size:17px;margin-top:4px;line-height:1.7}.wans{margin-top:8px;font-size:17px;font-weight:800;color:var(--ok)}
.cvsug{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.cvcard{padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.cvh{display:flex;justify-content:space-between;align-items:center}.cvh b{font-size:24px}.cvh em{font-style:normal;font-size:12px;background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);border-radius:99px;padding:3px 10px}.cvh em.g{background:var(--surface2);color:var(--mute)}
.cvsec{margin:14px 0 6px;font-size:13px;color:var(--mute);font-weight:700}
.cvt{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cvr{display:flex;justify-content:space-between;gap:6px;padding:9px 12px;border-radius:12px;background:var(--surface2);direction:ltr}.cvr span{color:var(--mute);font-size:13px}.cvr b{font-size:15.5px}
.cvp{padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:16px;direction:ltr;text-align:left}
.vlist{display:flex;flex-direction:column;gap:10px}
.vcard{display:flex;gap:12px;align-items:center;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.vth{position:relative;width:128px;flex:none;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}.vth img{width:100%;height:100%;object-fit:cover}.vth i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-style:normal;font-size:22px;background:rgba(0,0,0,.25)}
.vcard small{color:var(--mute);font-size:12px}.vcard b{display:block;font-size:14.5px;line-height:1.6}
.cvt{direction:ltr}.cvr{flex-direction:column;gap:2px}.cvr b{font-size:16px}

/* ---- phase 5: premium polish ---- */
.ltip{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,#FF3D7F 14%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,#FF3D7F 35%,var(--line))}
.lav{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,#8F7BFF,#5B3DF5);box-shadow:0 6px 14px -6px #5B3DF5}
.ltip>div{flex:1;min-width:0}.ltip b{display:block;font-size:12px;color:#FF7AA8}.ltip span{font-size:13.5px;line-height:1.6}
.ltx{border:0;background:none;color:var(--mute);font-size:14px;cursor:pointer;padding:4px}
.nav{backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.nav a{position:relative}
.nav a.on:not(.navmid)::before{content:"";position:absolute;top:-1px;left:30%;right:30%;height:3px;border-radius:0 0 6px 6px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.tile,.labt,.workr,.unitc summary,.ptask,.urow,.lhc,.pathc,.workc,.plan0,.finalx,.revc,.pgrid a,.vcard,.wst{transition:transform .14s ease,box-shadow .2s ease}
.tile:active,.labt:active,.workr:active,.ptask:active,.urow:active,.lhc:active,.pathc:active,.workc:active,.plan0:active,.finalx:active,.revc:active,.pgrid a:active,.vcard:active,.wst:active{transform:scale(.97)}
@media (hover:hover){.labt:hover,.workr:hover,.lhc:hover,.vcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px var(--c,#5B3DF5)}}
.plan,.progx,.rcard2,.cvcard,.pathsum,.unitc{box-shadow:0 18px 40px -28px rgba(91,61,245,.55)}
.plan-n{box-shadow:0 0 14px -2px var(--violet)}
.ptask.ok i{animation:pop .35s ease}
.sh h2{letter-spacing:-.2px}

/* ---- own identity: cockpit ---- */
.cockpit{margin:14px 0 0;padding:16px 14px;border-radius:24px;background:radial-gradient(120% 80% at 100% 0,rgba(0,229,255,.12),transparent 60%),radial-gradient(100% 70% at 0 100%,rgba(255,43,214,.10),transparent 60%),var(--surface);border:1px solid color-mix(in srgb,#00E5FF 30%,var(--line));box-shadow:0 18px 40px -26px rgba(0,229,255,.5)}
.ck-h{display:flex;gap:10px;align-items:center}.ck-h>span{font-size:30px}.ck-h b{display:block;font-size:17px}.ck-h small{color:var(--mute);font-size:12.5px}
.ck-sec{display:flex;align-items:baseline;gap:8px;margin:16px 0 8px;font-weight:800;font-size:14.5px}.ck-sec em{font-style:normal;font-weight:600;color:var(--mute);font-size:12.5px}.ck-sec a{margin-inline-start:auto;font-size:13px;color:#00C2D9;text-decoration:none}
.orbit{display:flex;align-items:center;gap:0;overflow-x:auto;padding:6px 2px 4px;scrollbar-width:none}.orbit::-webkit-scrollbar{display:none}
.ob{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--mute)}
.ob span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:var(--surface2);border:1.5px solid var(--line)}
.ob small{font-size:11px}.ob.ok span{background:color-mix(in srgb,var(--ok) 25%,var(--surface2));border-color:var(--ok);color:var(--ok);font-weight:900}
.ob.here span{width:44px;height:44px;font-size:22px;background:linear-gradient(135deg,#FF6B2C,#FFB020);border:0;box-shadow:0 0 16px rgba(255,140,40,.7)}.ob.here small{color:var(--ink);font-weight:800}
.ol{flex:1;min-width:10px;height:2px;margin-bottom:16px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px)}
.ck-cur{display:block;margin-top:6px;padding:9px 12px;border-radius:12px;background:var(--surface2);text-decoration:none;color:var(--ink);font-size:13.5px}
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gauge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gz{--p:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 225deg,#00E5FF calc(var(--p)*.75%),var(--line) 0 75%,transparent 0)}
.gauge.low .gz{background:conic-gradient(from 225deg,#FF6B2C calc(var(--p)*.75%),var(--line) 0 75%,transparent 0)}
.gz b{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:16px;font-weight:900}
.gauge span{font-size:11.5px;line-height:1.4;color:var(--mute)}
.labph{background:radial-gradient(80% 90% at 0 100%,rgba(0,229,255,.35),transparent 60%),linear-gradient(135deg,#06A77D,#0E5C7A)!important}
.cockpit{background:var(--surface);border-color:var(--line);box-shadow:0 18px 40px -28px rgba(91,61,245,.5)}.gz{background:conic-gradient(from 225deg,var(--violet) calc(var(--p)*.75%),var(--line) 0 75%,transparent 0)}.ob.here span{background:var(--violet);box-shadow:0 0 14px -2px var(--violet)}.labph{background:linear-gradient(135deg,#06A77D,#0E7C86)!important}.ck-sec a{color:var(--violet)}
.scfix{margin-top:12px;padding:14px;border-radius:18px;background:color-mix(in srgb,#E63946 12%,var(--surface));border:1px solid color-mix(in srgb,#E63946 45%,var(--line));line-height:1.8}.scfix-h{font-weight:800;color:#FF6B7A;margin-bottom:4px}.scfix small{color:var(--mute)}.scfix .btn{margin-top:10px}.screv{align-self:center;margin:10px auto;padding:8px 14px;border-radius:99px;background:color-mix(in srgb,var(--gold) 20%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 50%,var(--line));font-weight:700;font-size:14px;text-align:center}.prog.rev i{background:linear-gradient(90deg,#FFC53D,#FF8A00)}
.wre{overflow:hidden;width:64px;height:64px;border-radius:18px}.wre img{width:100%;height:100%;object-fit:cover;display:block}
.ctl{flex-wrap:wrap;overflow:visible!important;gap:6px}.ctl .seg button{padding:7px 12px;font-size:13.5px}.ctl .chip{padding:7px 12px;font-size:13.5px}
/* ---- light mode: clearer cards ---- */
:root:not([data-theme="dark"]){--bg:#FAFAFF;--line:#DDD7F5;--shadow:0 2px 6px rgba(42,26,140,.06),0 14px 30px -12px rgba(42,26,140,.32)}
:root:not([data-theme="dark"]) body:not(.th-neon){background:radial-gradient(120% 50% at 100% 0%,#ECE8FF 0%,transparent 55%),var(--bg)}
:root:not([data-theme="dark"]) .tile{background:radial-gradient(130% 100% at 100% 0%,color-mix(in srgb,var(--c) 40%,transparent),transparent 70%),#fff;border:1.5px solid color-mix(in srgb,var(--c) 55%,#fff);box-shadow:var(--shadow)}
:root:not([data-theme="dark"]) .tile .em{background:color-mix(in srgb,var(--c) 34%,#fff)}
:root:not([data-theme="dark"]) .labt,:root:not([data-theme="dark"]) .lhc,:root:not([data-theme="dark"]) .workr{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 38%,#fff),color-mix(in srgb,var(--c) 8%,#fff) 85%);border:1.5px solid color-mix(in srgb,var(--c) 55%,#fff);box-shadow:var(--shadow)}
:root:not([data-theme="dark"]) .labi{background:color-mix(in srgb,var(--c) 45%,#fff)}
:root:not([data-theme="dark"]) .plan,:root:not([data-theme="dark"]) .cockpit,:root:not([data-theme="dark"]) .unitc,:root:not([data-theme="dark"]) .rcard2,:root:not([data-theme="dark"]) .ptask,:root:not([data-theme="dark"]) .it{box-shadow:var(--shadow)}
:root:not([data-theme="dark"]) .ltip{background:linear-gradient(120deg,#FFE4EE,#fff);border-color:#FFB8CF;box-shadow:var(--shadow)}
.hzw{display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:14px;border-radius:20px;text-decoration:none;color:var(--ink);background:linear-gradient(120deg,color-mix(in srgb,#FF9F1C 30%,var(--surface)),var(--surface) 80%);border:1.5px solid color-mix(in srgb,#FF9F1C 50%,var(--line));box-shadow:var(--shadow)}
.hzw>div{flex:1;min-width:0}.hzw small{color:#E07C00;font-weight:800;font-size:12px}.hzw b{display:block;font-size:18px}.hzw span:not(.hzi){font-size:13px;color:var(--mute)}
.hzw .hzi{--c:#FF9F1C}.hzw .arr,.hzl .arr{color:var(--mute);font-size:20px}
.hzi{width:48px;height:48px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:22px;color:#fff;background:var(--c);box-shadow:0 6px 14px -6px var(--c)}.hzi .ic{width:24px;height:24px}
.hzk{font-size:13px;color:var(--violet);text-decoration:none;font-weight:700}
.hzlist{display:flex;flex-direction:column;gap:8px}
.hzl{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;text-decoration:none;color:var(--ink);background:linear-gradient(120deg,color-mix(in srgb,var(--c) 18%,var(--surface)),var(--surface) 75%);border:1.5px solid color-mix(in srgb,var(--c) 40%,var(--line));box-shadow:var(--shadow)}
.hzb{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));box-shadow:0 6px 14px -6px var(--c)}
.hzt{flex:1;min-width:0}.hzt b{display:block;font-size:16px}.hzt small{color:var(--mute);font-size:12.5px}
.hzp{display:flex;align-items:center;gap:8px;margin-top:6px}.hzp .prog{flex:1}.hzp .prog i{background:var(--c)}.hzp em{font-style:normal;font-size:12px;color:var(--mute);flex:none}
.hzg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hzs{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:14px 8px;border-radius:18px;text-decoration:none;color:var(--ink);background:linear-gradient(170deg,color-mix(in srgb,var(--c) 18%,var(--surface)),var(--surface) 80%);border:1.5px solid color-mix(in srgb,var(--c) 38%,var(--line));box-shadow:var(--shadow)}
.hzs b{font-size:14.5px}.hzs small{font-size:11.5px;color:var(--mute)}

/* ---- Lena AI ---- */
.lenac{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:14px;border-radius:22px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#FF3D7F,#8338EC);box-shadow:0 14px 30px -14px #FF3D7F}
.lenac>div{flex:1;min-width:0}.lenac small{display:inline-block;background:#fff;color:#C2185B;font-weight:800;border-radius:99px;padding:1px 8px;font-size:11px}.lenac b{display:block;font-size:18px;margin:2px 0}.lenac span:not(.lena-av):not(.gobtn){font-size:12.5px;opacity:.92;line-height:1.6}
.lenac .gobtn{background:#fff;color:#8338EC;font-weight:800;border-radius:99px;padding:6px 14px;font-size:13.5px;flex:none}
.lena-av{width:50px;height:50px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#8F7BFF,#5B3DF5);box-shadow:0 6px 14px -6px #5B3DF5}
.lena-wrap{padding-bottom:170px}
.lena-h{display:flex;align-items:center;gap:12px;margin:6px 0 10px}.lena-h b{display:block;font-size:19px}.lena-h small{color:var(--mute);font-size:12.5px}
.lena-chat{display:flex;flex-direction:column;gap:10px;min-height:40vh}
.lb{display:flex;gap:8px;align-items:flex-end;max-width:90%}.lb.me{align-self:flex-start;flex-direction:row-reverse}.lb.lena{align-self:flex-end}
.lb .lav{width:32px;height:32px;font-size:18px}
.lbx{position:relative;padding:10px 12px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.lb.me .lbx{background:var(--violet);color:#fff;border-color:transparent;border-bottom-left-radius:6px}.lb.lena .lbx{border-bottom-right-radius:6px;padding-inline-start:44px}
.lde{font-size:16px;font-weight:700;direction:ltr;text-align:left}.lar{color:var(--mute);font-size:13.5px;margin-top:4px}
.lplay{position:absolute;inset-inline-start:8px;top:10px;width:28px;height:28px;border-radius:50%;border:0;background:var(--violet);color:#fff;display:grid;place-items:center;cursor:pointer}.lplay svg{width:15px;height:15px;fill:#fff}
.lfix{margin-bottom:8px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--gold) 18%,transparent);font-size:13.5px}.lfix small{display:block;color:var(--mute);margin-top:2px}
.typing .lbx{display:flex;gap:4px;padding:14px 16px 14px 44px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:ldot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ldot{50%{opacity:.25;transform:translateY(-3px)}}
.lena-in{position:fixed;left:0;right:0;bottom:calc(var(--nav-h,68px) + env(safe-area-inset-bottom,0px));z-index:20;padding:8px 12px 10px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.lena-left{font-size:12.5px;color:var(--mute);text-align:center;margin-bottom:6px}
.lena-row{display:flex;gap:8px;align-items:center;max-width:720px;margin:0 auto}.lena-row .inp{flex:1;margin:0}
.lena-mic{width:46px;height:46px;flex:none;border-radius:50%;border:0;background:linear-gradient(135deg,#5B3DF5,#8338EC);color:#fff;font-size:20px;cursor:pointer}.lena-mic small{display:none}.lena-mic.live{background:linear-gradient(135deg,#E63946,#FF6B2C);animation:micp 1s infinite}
.lena-send{width:46px;height:46px;flex:none;padding:0;border-radius:50%;font-size:18px}
.lena-mic:disabled,.lena-send:disabled{opacity:.4}
.lfix .de{direction:ltr;unicode-bidi:isolate;display:inline-block}.lena-wrap{padding-bottom:210px}

/* ===== design pass 1: spacing + sizes (home / learn / train) ===== */
#app > .wrap{padding-top:12px}
#app > .hero{margin-top:12px}
#app .ph .back,#app .wrap > a.back{display:none}
#app .ph{overflow:hidden;margin:0 0 16px}
#app .ph.sm{min-height:124px;padding:18px 20px 16px;display:flex;flex-direction:column;justify-content:center}
#app .ph h1{font-size:24px}
#app .ph.sm h1{font-size:23px}
#app .ph p{font-size:13.5px;line-height:1.6}
#app .ph .em.phpic{width:88px;height:88px;border-radius:24px;top:50%;bottom:auto;left:16px;transform:translateY(-50%) rotate(-6deg)}
#app .hero{min-height:340px}
#app .hero h1{font-size:25px;line-height:1.4}
#app .sh{margin:24px 2px 12px}
#app .sh h2{font-size:19px}
#app .tiles{gap:12px}
#app .tile.ptile .tbody b{font-size:16.5px}
#app .tile.ptile .tbody span{font-size:12.5px}
#app .lsec-h{margin:4px 0 8px}
#app .lsec-h h1{font-size:23px}
/* design pass 1b: lessons, quizzes, games */
#app .ph .em{font-size:72px}
#app .ph.sm .em{font-size:64px}
#app .qcard{padding:16px 14px;border-radius:22px}
#app .qcard .big{font-size:26px}
#app .qcard .bigar{font-size:21px}
#app .qcard .em{font-size:54px}
#app .qcard .em.qpic,#app .fc .em.qpic{width:108px;height:108px;border-radius:20px}
#app .opt{padding:12px 10px;font-size:15.5px;border-radius:16px}
#app .opts{gap:10px}
/* hero minimal space */
.hero.photo{background:radial-gradient(120% 70% at 85% 0%,rgba(124,92,255,.38) 0%,rgba(124,92,255,0) 60%),radial-gradient(90% 60% at 10% 100%,rgba(56,189,248,.22) 0%,rgba(56,189,248,0) 65%),radial-gradient(70% 50% at 30% 65%,rgba(168,85,247,.18) 0%,rgba(168,85,247,0) 70%),linear-gradient(165deg,#120C38 0%,#1B1450 55%,#0E0A2C 100%)}
.hero.photo .planet,.hero.photo .comet{display:none}
.hero.photo .stars{opacity:.45}
.hero.photo .launch .rkwrap{width:96px}
.hero.photo .rocket{width:96px;height:185px}

/* learn hub: titles only */
#app .lhc small{display:none}
#app .lhc{justify-content:center}