/* Layout idea: a friendly learning path. One accent colour per level (set as --c on the page). */
:root{
  --bg:#F4F6FB; --surface:#FFFFFF; --ink:#1B2240; --muted:#5D6688; --line:#DDE2EF;
  --c:#2f7fd6;
  --subj:#2F6FDB; --help:#C9760E; --verb:#D2443A; --good:#1F8A4C; --bad:#C8352B;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(28px,5vw,42px)} h2{font-size:clamp(22px,3.5vw,28px)} h3{font-size:19px}
p{margin:0}
a{color:inherit}
mark{background:none;color:var(--verb);font-weight:800;border-bottom:2px solid currentColor}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--subj);outline-offset:2px}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:20px}
.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;font-size:17px}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;padding:7px 12px;border-radius:999px;font-weight:700;font-size:15px;color:var(--muted);white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--bg)}
.nav a.on{background:var(--ink);color:#fff}
.stats{display:flex;gap:10px;align-items:center;text-decoration:none;font-size:14px;color:var(--muted);font-weight:700}
.stats b{background:#FFF1D6;color:#8A5200;padding:4px 10px;border-radius:999px}
@media (max-width:720px){.nav{order:3;flex-basis:100%}.stats{margin-left:auto}#streak{display:none}}

.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 50px;display:flex;flex-direction:column;gap:20px;min-height:70vh}
.foot{text-align:center;color:var(--muted);font-size:14px;padding:20px 16px 40px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sec{margin-top:8px}
.crumbs{font-size:14px;color:var(--muted)} .crumbs a{color:var(--c);font-weight:700;text-decoration:none}

/* buttons */
.btn{font:inherit;font-weight:800;font-size:16px;padding:10px 18px;border-radius:12px;border:2px solid var(--c);background:var(--c);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--c)}
.btn.big{font-size:18px;padding:13px 24px}
.btn.small{font-size:13px;padding:5px 10px;border-width:1px}
.btn svg{width:18px;height:18px}
.chip{font:inherit;font-size:15px;font-weight:700;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--c)} .chip.on{background:var(--c);border-color:var(--c);color:#fff}
.chip:disabled{opacity:.75;cursor:default}
.pill{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);padding:3px 10px;border-radius:999px}
.say{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--c);cursor:pointer;display:inline-grid;place-items:center;padding:0;vertical-align:middle}
.say svg{width:18px;height:18px}
.say.on{background:var(--c);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}

/* home */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;background:var(--ink);color:#fff;border-radius:24px;padding:clamp(22px,4vw,40px)}
.hero p{color:#C9D0EA;max-width:46ch;margin:12px 0 18px;font-size:18px}
.hero .btn{--c:#FFC043;color:#1B2240} .hero .btn.ghost{color:#FFC043}
.heroprog{font-size:14px !important;margin:14px 0 0 !important}
.hero-art{display:flex;flex-direction:column;gap:10px}
.hb{max-width:85%;padding:10px 14px;border-radius:16px;font-weight:700;animation:bub .5s both}
.hb.a{align-self:flex-start;background:#2B3460;border-bottom-left-radius:4px}
.hb.b{align-self:flex-end;background:#FFC043;color:#1B2240;border-bottom-right-radius:4px}
.hb:nth-child(2){animation-delay:.7s}.hb:nth-child(3){animation-delay:1.4s}.hb:nth-child(4){animation-delay:2.1s}
.hb s{color:#B3261E} .hb u{text-decoration:none;background:#fff;border-radius:6px;padding:0 5px;color:#1F8A4C}
@keyframes bub{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.path{display:flex;flex-direction:column;gap:10px}
.lvl{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:var(--r);padding:14px;text-decoration:none;transition:transform .15s}
.lvl:hover{transform:translateX(4px)}
.lvl-n{flex:none;width:46px;height:46px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:22px;font-weight:700}
.lvl-b{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.lvl-b b{font-family:var(--display);font-size:19px} .lvl-b em{font-style:normal;font-size:13px;color:var(--c);margin-left:4px}
.lvl-b span{color:var(--muted);font-size:15px} .lvl-b small{color:var(--muted)}
.pbar{display:block;height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--c);border-radius:99px;transition:width .6s}
.tools,.convs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tool,.conv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .15s,border-color .15s}
.tool:hover,.conv:hover{transform:translateY(-3px);border-color:var(--c)}
.tool b,.conv b{font-family:var(--display);font-size:18px} .tool span,.conv span{color:var(--muted);font-size:15px}
.conv{border-top:5px solid var(--c)} .conv .pill{align-self:flex-start}

/* level */
.lhead{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lhead p{color:var(--muted);font-size:18px;max-width:64ch}
.llist{display:flex;flex-direction:column;gap:8px}
.litem{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none}
.litem:hover{border-color:var(--c)}
.lnum{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--c);color:var(--c);display:grid;place-items:center;font-weight:800}
.lnum.done{background:var(--c);color:#fff}
.lb{flex:1;display:flex;flex-direction:column;min-width:0} .lb span{color:var(--muted);font-size:15px}
.lscore{font-weight:800;color:var(--good)} .lgo{font-weight:800;color:var(--c)}
.testcard{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:color-mix(in srgb,var(--c) 10%,var(--surface));border:1px dashed var(--c);border-radius:var(--r);padding:16px}

/* lesson */
.visual{position:relative;background:color-mix(in srgb,var(--c) 9%,var(--surface));border-radius:20px;padding:18px 16px 14px;display:flex;flex-direction:column;gap:12px}
.visual svg{width:100%;height:auto;display:block}
.vcap{font-weight:700;text-align:center}
.replay{position:absolute;top:10px;right:10px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.box.full{grid-column:1/-1}
.box ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.box.trick{background:#FFF7E0;border-color:#F3D48A}
.box.trick p{font-weight:700;font-size:18px}
table.forms{width:100%;border-collapse:collapse;font-size:16px}
table.forms th,table.forms td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.forms th{width:110px;color:var(--muted)}
ol.ex{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:760px){ol.ex{grid-template-columns:1fr}}
ol.ex li{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--bg);animation:fadein .4s both}
.warn{border-left:5px solid var(--bad);background:var(--bg);padding:10px 12px;border-radius:10px}
.wrong{color:var(--bad);text-decoration:line-through;font-weight:700}
.right{color:var(--good);font-weight:800}
.right::before{content:"\2192  ";color:var(--muted);font-weight:400}
.warn .right::before{content:""}
.rwhy{color:var(--muted);font-size:15px}

/* animated visuals */
.brow,.fsteps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.word{padding:7px 12px;border-radius:10px;font-weight:800;font-size:18px;border:2px solid currentColor;background:var(--surface)}
.word small{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.word.s{color:var(--subj)}.word.h{color:var(--help)}.word.v{color:var(--verb)}.word.r{color:var(--muted);border-style:dashed;font-weight:700;font-size:16px}
.go .word,.go .fstep,.go .farrow,.go .prow{animation:drop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes drop{from{opacity:0;transform:translateY(-20px) scale(.8)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.frow{display:flex;flex-direction:column;gap:6px}
.flabel{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--c)}
.fstep{padding:10px 14px;border-radius:12px;font-weight:800;background:var(--surface);border:2px solid var(--c)}
.fstep.f1{background:var(--c);color:#fff}
.farrow{font-size:24px;color:var(--c);font-weight:800}
.swaparrow{font-size:14px;font-weight:700;color:var(--muted);padding-left:6px}
.swaparrow::before{content:"\21C5  "}
.scale{display:flex;flex-direction:column;gap:8px}
.srow{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;gap:10px;align-items:center}
.slab{font-weight:800;font-size:15px}
.strack{height:18px;background:var(--surface);border-radius:99px;overflow:hidden}
.strack i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:99px}
.go .strack i{animation:growx 1s ease-out both}
@keyframes growx{from{width:0}to{width:var(--w)}}
.sval{font-weight:800;font-size:14px;color:var(--muted);min-width:44px;text-align:right}
.pyr{display:flex;flex-direction:column;align-items:center;gap:6px}
.prow{background:var(--c);color:#fff;border-radius:12px;padding:10px 14px;text-align:center;display:flex;flex-direction:column}
.prow b{font-family:var(--display);font-size:20px}.prow span{font-size:14px}
.prow.p0{width:100%}.prow.p1{width:76%;filter:brightness(.9)}.prow.p2{width:52%;filter:brightness(.78)}
@media (max-width:520px){.prow.p1{width:88%}.prow.p2{width:74%}}
.place{display:flex;flex-direction:column;gap:10px;align-items:center}
.stage{position:relative;width:300px;height:170px}
.pbox{position:absolute;top:50px;width:80px;height:66px;border:4px solid var(--c);border-radius:8px;background:color-mix(in srgb,var(--c) 14%,transparent);z-index:2}
.pbox.b1{left:60px}.pbox.b2{left:200px;opacity:.25;transition:opacity .4s}
.floor{position:absolute;left:10px;right:10px;top:150px;height:3px;background:var(--line);border-radius:2px}
.ball{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--verb);z-index:3;transition:left .7s cubic-bezier(.3,1.3,.5,1),top .7s cubic-bezier(.3,1.3,.5,1),transform .5s,opacity .5s;left:85px;top:76px}
.stage[data-pos="on"] .ball{top:20px}
.stage[data-pos="under"] .ball{top:119px}
.stage[data-pos="next-to"] .ball{left:22px;top:86px}
.stage[data-pos="behind"] .ball{left:120px;top:34px;z-index:1;opacity:.75}
.stage[data-pos="in-front-of"] .ball{top:98px;transform:scale(1.35)}
.stage[data-pos="between"] .ball{left:155px;top:86px}
.stage[data-pos="between"] .b2{opacity:1}
.pbtns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ax{stroke:var(--muted);stroke-width:2}.axh{fill:var(--muted)}
.axl{fill:var(--muted);font:700 13px var(--body)}
.nowl{stroke:var(--ink);stroke-width:2;stroke-dasharray:4 4}
.nowt{fill:var(--ink);font:800 13px var(--body)}
.lab{fill:var(--ink);font:700 13px var(--body)}
.mkf{fill:var(--c)}.bar{fill:var(--c);opacity:.85}
.arr{stroke:var(--c);stroke-width:4;fill:none;stroke-linecap:round}
.flagf{fill:var(--verb)}.flagl{stroke:var(--verb);stroke-width:3}
@media (max-width:640px){.axl,.nowt,.lab{font-size:20px}.ax{stroke-width:3}}
.go .pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both;transform-box:fill-box;transform-origin:center}
.go .grow{animation:grow 1.6s ease-out both;transform-box:fill-box;transform-origin:left center}
.go .draw{stroke-dasharray:400;animation:draw 1.4s ease-out both}
.go .fade{animation:fadein .5s both}
.blink{animation:blink 1s ease-in-out infinite}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
@keyframes blink{50%{opacity:.25}}

/* quiz */
.practice{background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--c);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px}
#quiz{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
#quiz>*{max-width:100%}
.qbar{height:8px;background:var(--bg);border-radius:99px;overflow:hidden;width:100%}
.qbar i{display:block;height:100%;background:var(--c);transition:width .4s}
.qcount{color:var(--muted);font-size:14px}
.qtext{font-size:21px;font-weight:700}
.blank{display:inline-block;width:70px;border-bottom:3px solid var(--c);margin:0 4px;vertical-align:baseline}
.opts{display:flex;flex-direction:column;gap:8px;width:100%}
.opt{font:inherit;text-align:left;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.opt b{font-size:18px}
.opt:hover:not(:disabled){border-color:var(--c)}
.opt .why{font-size:15px;color:var(--muted)} .opt .why:empty{display:none} .opt .why i{font-style:normal;font-weight:800}
.opt.ok{border-color:var(--good);background:#E9F7EE;animation:pop .35s}
.opt.ok b::after{content:"  \2713";color:var(--good)}
.opt.no{border-color:var(--bad);background:#FCEBE9;animation:shake .4s}
.opt.no b{color:var(--bad);text-decoration:line-through}
.opt.dim{opacity:.85}
.opt:disabled{cursor:default;color:var(--ink)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.built{min-height:54px;width:100%;border:2px dashed var(--c);border-radius:12px;padding:8px;display:flex;flex-wrap:wrap;gap:6px}
.bank{display:flex;flex-wrap:wrap;gap:6px}
.typef{display:flex;gap:8px;flex-wrap:wrap;width:100%}
input[type=text]{font:inherit;font-size:17px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);flex:1;min-width:0}
input[type=text]:focus{border-color:var(--c);outline:none}
.fb{width:100%}
.note{padding:10px 14px;border-radius:12px}
.note.good{background:#E9F7EE;border:1px solid #9AD3AF}
.note.bad{background:#FCEBE9;border:1px solid #EBA9A3}
.result{display:flex;gap:16px;align-items:center}
.ring{flex:none;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--bg) 0);display:grid;place-items:center}
.ring b{background:var(--surface);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:20px}
.rvh{margin-top:6px}
.review{display:flex;flex-direction:column;gap:8px;width:100%}
.rv{background:var(--bg);border-radius:12px;padding:10px 12px}
.rq{font-weight:700}

/* speaking */
.composer{display:flex;gap:8px;align-items:center;width:100%}
.mic{flex:none;width:52px;height:52px;border-radius:50%;border:none;background:var(--c);color:#fff;cursor:pointer;display:grid;place-items:center}
.mic svg{width:24px;height:24px}
.mic.rec,.btn.rec{background:var(--bad);border-color:var(--bad);animation:ring 1.2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(200,53,43,.5)}100%{box-shadow:0 0 0 16px rgba(200,53,43,0)}}
.micnote{font-size:14px;color:var(--muted)}
.hint{color:var(--muted)} .hint b{color:var(--ink)}
.chat{display:flex;flex-direction:column;gap:10px}
.bub{max-width:86%;padding:10px 14px;border-radius:16px;animation:bub .4s both}
.bub small{display:block;font-size:12px;font-weight:800;opacity:.7}
.bub p{display:flex;gap:8px;align-items:center}
.bub.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub.me{align-self:flex-end;background:color-mix(in srgb,var(--c) 16%,var(--surface));border-bottom-right-radius:4px}
.bub.me p{display:block}
.err{color:var(--bad);font-weight:800;text-decoration:underline wavy}
.fbcard{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;animation:bub .4s both}
.issues{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.issues li{background:var(--bg);border-radius:10px;padding:8px 12px}
.better{background:#E9F7EE;border-radius:12px;padding:10px 12px}
.better.model{background:var(--bg)}
.better small,.yousaid small{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.better p,.exs{display:flex;gap:8px;align-items:center;font-weight:700}
.tip{font-size:15px;color:var(--muted)}
.checkbox #freefb{display:flex;flex-direction:column;gap:10px}
#ctl{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 18%);padding:14px 0 6px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.pron{align-items:flex-start}
.ptarget{font-size:clamp(22px,4vw,30px);font-weight:800;line-height:1.5}
.pw{cursor:pointer;border-radius:8px;padding:0 3px;transition:background .3s,color .3s}
.pw.hit{background:#E9F7EE;color:var(--good)} .pw.miss{background:#FCEBE9;color:var(--bad)}
#pfb{display:flex;flex-direction:column;gap:8px;width:100%}

/* vocabulary, alphabet, tenses, progress */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{height:170px;perspective:900px;cursor:pointer;animation:fadein .4s both}
.card-in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.card.flip .card-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line)}
.front{background:var(--surface);border-bottom:6px solid var(--c)} .front b{font-family:var(--display);font-size:22px} .front small{color:var(--muted)}
.back{background:var(--c);color:#fff;transform:rotateY(180deg)} .back .mean{font-weight:800} .back .exs{font-size:15px;font-weight:600;text-align:left}
.abc{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.letter{font:inherit;background:var(--surface);border:1px solid var(--line);border-bottom:5px solid var(--c);border-radius:14px;padding:12px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);animation:pop .4s both}
.letter:hover{transform:translateY(-3px)} .letter b{font-family:var(--display);font-size:28px} .letter span{font-size:15px;color:var(--muted)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.tgrid{grid-template-columns:1fr}}
.tgroup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-wrap:wrap;gap:6px}
.tgroup h3{flex-basis:100%;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--c)}
.tinfo{display:flex;flex-direction:column;gap:6px}
.tw{overflow-x:auto}
table.ref{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
table.ref th,table.ref td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.ref th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
table.ref td:first-child{font-weight:800}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat3 .box{align-items:center;gap:2px} .stat3 small{color:var(--muted);font-weight:700} .stat3 b{font-family:var(--display);font-size:clamp(22px,5vw,34px)}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition:none !important}}