:root{--bg:#faf8f5;--bg2:#fff;--ink:#1d1b20;--mut:#6b6670;--line:#e8e3dc;--red:#dc143c;--red2:#b30f31;--card:#fff;--shadow:0 6px 24px rgba(40,20,20,.08);--ok:#2a9d8f;--bad:#dc143c;--gold:#e8a33d;--r:16px;
--A1:#2a9d8f;--A2:#3b82f6;--B1:#8b5cf6;--B2:#e8a33d;--C1:#dc143c}
:root[data-theme=dark]{--bg:#121014;--bg2:#1a171d;--ink:#f1eef3;--mut:#a29ca8;--line:#2d2832;--card:#1c1920;--shadow:0 6px 24px rgba(0,0,0,.4)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121014;--bg2:#1a171d;--ink:#f1eef3;--mut:#a29ca8;--line:#2d2832;--card:#1c1920;--shadow:0 6px 24px rgba(0,0,0,.4)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:10px 20px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;font-size:20px;display:flex;align-items:center;gap:8px;letter-spacing:-.02em}.logo b{color:var(--red)}
.flag{width:22px;height:22px;border-radius:50%;background:linear-gradient(#fff 50%,var(--red) 50%);border:1px solid var(--line)}
.nav{display:flex;gap:2px;margin-left:12px;flex:1}.nav a{padding:6px 12px;border-radius:99px;color:var(--mut);font-size:15px;transition:.2s}.nav a:hover{color:var(--ink);background:var(--line)}.nav a.active{background:var(--red);color:#fff}
.sbtn{display:flex;gap:8px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:6px 14px;color:var(--mut)}
kbd{border:1px solid var(--line);border-radius:5px;padding:0 6px;font-size:12px;background:var(--bg)}
.ibtn{background:none;border:1px solid var(--line);border-radius:50%;width:38px;height:38px}.burger{display:none}
main{min-height:70vh}.enter{animation:fadeUp .45s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wrap{max-width:1140px;margin:0 auto;padding:28px 20px}.narrow{max-width:760px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:24px 20px;border-top:1px solid var(--line);color:var(--mut);font-size:14px;margin-top:40px}
.page-h h1{margin:0;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em}.page-h p{color:var(--mut);margin:6px 0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}.card h3{margin:0 0 12px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);padding:9px 18px;border-radius:99px;font-weight:600;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn.pri{background:var(--red);color:#fff;border-color:var(--red)}.btn.small{padding:5px 14px;font-size:14px}.btn.big{padding:13px 30px;font-size:18px;margin-top:18px}
.btn.good{background:var(--ok);color:#fff;border-color:var(--ok)}.btn.bad{color:var(--bad);border-color:var(--bad)}.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.muted{color:var(--mut)}.center{text-align:center}.empty{padding:30px;text-align:center;color:var(--mut)}.back{display:inline-block;margin-bottom:14px;color:var(--mut)}
.inp,.ta{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--ink);font:inherit}.ta{resize:vertical}.inp:focus,.ta:focus{outline:2px solid var(--red);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.chip{border:1px solid var(--line);background:var(--bg2);padding:5px 14px;border-radius:99px;font-size:14px;transition:.15s}.chip:hover{border-color:var(--red)}.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.badge{display:inline-block;padding:0 9px;border-radius:99px;font-size:12px;font-weight:700;color:#fff;line-height:20px}
.lv-A1 .badge,.badge.lv-A1{background:var(--A1)}.lv-A2 .badge,.badge.lv-A2{background:var(--A2)}.lv-B1 .badge,.badge.lv-B1{background:var(--B1)}.lv-B2 .badge,.badge.lv-B2{background:var(--B2)}.lv-C1 .badge,.badge.lv-C1{background:var(--C1)}
/* carousel */
.carousel{position:relative;height:min(520px,78vh);min-height:430px;overflow:hidden;color:#fff}
.slide{position:absolute;inset:0;display:flex;align-items:center;padding:0 max(20px,calc((100vw - 1100px)/2));opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .8s,transform 1.2s,visibility .8s}
.slide.on{opacity:1;visibility:visible;transform:none}
.s1{background:linear-gradient(120deg,#8c0d28,#dc143c 55%,#ff6b6b)}.s2{background:linear-gradient(120deg,#0f3d4a,#1f7a8c 60%,#2a9d8f)}.s3{background:linear-gradient(120deg,#2b1b6b,#5b3fd1 60%,#8b5cf6)}.s4{background:linear-gradient(120deg,#7a4a00,#d98a1f 60%,#f2c14e)}.s5{background:linear-gradient(120deg,#0b1e44,#1d4fa8 60%,#3b82f6)}
.slide-in{max-width:620px;position:relative;z-index:2}.slide .slide-in>*{opacity:0;transform:translateY(24px);transition:.7s}.slide.on .slide-in>*{opacity:1;transform:none}
.slide.on .slide-in>*:nth-child(2){transition-delay:.15s}.slide.on .slide-in>*:nth-child(3){transition-delay:.3s}.slide.on .slide-in>*:nth-child(4){transition-delay:.45s}.slide.on .slide-in>*:nth-child(5){transition-delay:.55s}
.eyebrow{display:inline-block;background:rgba(255,255,255,.18);padding:3px 14px;border-radius:99px;font-size:14px;margin-bottom:10px}
.slide h1{font-size:clamp(34px,6vw,60px);line-height:1.08;margin:6px 0 14px;letter-spacing:-.03em}.slide h1 em{font-style:normal;background:rgba(255,255,255,.2);padding:0 .2em;border-radius:12px}
.slide p{font-size:clamp(16px,2vw,20px);opacity:.92;margin:0 0 20px}.slide .btn.pri{background:#fff;color:#222;border-color:#fff}.cta{display:flex;gap:12px;flex-wrap:wrap}
.mini-stats{display:flex;gap:22px;margin-bottom:20px;flex-wrap:wrap}.mini-stats b{display:block;font-size:28px;line-height:1}.mini-stats small{opacity:.8}
.floaty{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}.floaty span{position:absolute;bottom:-60px;color:rgba(255,255,255,.14);font-weight:800;animation:rise 14s linear infinite}
@keyframes rise{to{transform:translateY(-640px) rotate(25deg)}}
.car-btn{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:26px;backdrop-filter:blur(6px)}.car-btn:hover{background:rgba(255,255,255,.35)}.prev{left:14px}.next{right:14px}
.dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}.dots button{width:10px;height:10px;border-radius:99px;border:0;background:rgba(255,255,255,.4);transition:.3s;padding:0}.dots button.on{width:30px;background:#fff}
.car-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2);z-index:5}.car-prog i{display:block;height:100%;background:#fff;animation:prog 6.5s linear}@keyframes prog{from{width:0}to{width:100%}}
/* home sections */
.sec{margin:34px 0}.sec-h h2{margin:0;font-size:28px;letter-spacing:-.02em}.sec-h p{color:var(--mut);margin:4px 0 16px}
.lvl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.lvl-card{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--lc);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column;gap:6px}.lvl-card:hover{transform:translateY(-6px)}
.lvl-card.lv-A1{--lc:var(--A1)}.lvl-card.lv-A2{--lc:var(--A2)}.lvl-card.lv-B1{--lc:var(--B1)}.lvl-card.lv-B2{--lc:var(--B2)}.lvl-card.lv-C1{--lc:var(--C1)}
.lc-top b{font-size:34px;color:var(--lc);line-height:1;margin-right:8px}.lc-top span{color:var(--mut);font-size:14px}.lc-bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden}.lc-bar i{display:block;height:100%;background:var(--lc);border-radius:9px;animation:grow 1s both}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.wod{display:flex;gap:16px;align-items:center}.wod-pl{font-size:32px;font-weight:700;color:var(--red)}.wod-en{font-size:18px}
.row-c{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.big-n{font-size:18px;margin:0}.big-n b{font-size:34px;color:var(--red)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:2px;transition:.25s}.feat:hover{transform:translateY(-4px);border-color:var(--red)}.feat span{font-size:28px}.feat small{color:var(--mut)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:10px}.case{border:1px solid var(--line);background:var(--bg2);border-radius:12px;padding:10px;text-align:left;transition:.2s;display:flex;flex-direction:column}.case:hover{transform:translateY(-3px)}.case.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset}
.case small{color:var(--mut)}.cf{font-size:20px;font-weight:700}.cf u{color:var(--red);text-decoration:none;border-bottom:3px solid var(--red)}.case em{font-size:12px;color:var(--mut)}.case-note{margin-top:14px;padding:12px;border-radius:12px;background:var(--bg)}
/* topic cards */
.filters{margin-bottom:14px}.count{color:var(--mut);margin:8px 0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tcard{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--lc,var(--red));border-radius:14px;padding:14px 16px;transition:.2s;animation:fadeUp .4s both;display:block}.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tcard.lv-A1{--lc:var(--A1)}.tcard.lv-A2{--lc:var(--A2)}.tcard.lv-B1{--lc:var(--B1)}.tcard.lv-B2{--lc:var(--B2)}.tcard.lv-C1{--lc:var(--C1)}
.tcard h3{margin:6px 0 4px;font-size:17px;line-height:1.3}.tcard p{margin:0;color:var(--mut);font-size:14px}.tc-top{display:flex;gap:8px;align-items:center}.tk{font-size:13px;color:var(--mut)}.ck{margin-left:auto;color:var(--ok);font-weight:700;font-size:13px}.tcard.done{background:color-mix(in srgb,var(--ok) 8%,var(--card))}.more{text-align:center;margin:20px}
.topic h1{margin:8px 0 12px;letter-spacing:-.02em}.topic h3{margin:20px 0 8px}.md p{margin:.5em 0}.md ul{padding-left:20px}.md b{color:var(--red)}
.tbl-wrap{overflow-x:auto;margin:12px 0}.tbl{border-collapse:collapse;width:100%}.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}.tbl th{background:var(--bg);font-size:14px;color:var(--mut)}.tbl td.pl{font-weight:600}
.ex{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--bg);margin:6px 0}.ex .pl{font-weight:600}.ex .en{color:var(--mut);font-size:14px}
.spk{border:0;background:var(--line);border-radius:50%;width:32px;height:32px;flex:none;transition:.2s}.spk:hover{background:var(--red)}.spk.pulse{animation:pulse .6s}.spk.big{width:60px;height:60px;font-size:24px}
@keyframes pulse{50%{transform:scale(1.3);background:var(--red)}}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.actions.c{justify-content:center}.pn{display:flex;justify-content:space-between;gap:10px;margin-top:16px;color:var(--mut)}.pn a:hover{color:var(--red)}
.miniq{margin-top:22px;padding:16px;border-radius:14px;background:var(--bg);border:1px dashed var(--line)}.miniq h3{margin:0 0 6px}.q{font-weight:600;font-size:18px}
details.model summary,details summary{cursor:pointer;color:var(--red);font-weight:600}.sample{margin:10px 0}
/* quiz */
.opts{display:grid;gap:10px;margin:14px 0}.opt{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 16px;border-radius:12px;border:2px solid var(--line);background:var(--bg2);transition:.2s;font-size:17px}.opt i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-size:13px;font-weight:700;flex:none}
.opt:hover:not(:disabled){border-color:var(--red);transform:translateX(4px)}.opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--bg2));animation:pop .4s}.opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--bg2));animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes pop{50%{transform:scale(1.03)}}
.pop{animation:popIn .4s both}@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.qhead{display:flex;justify-content:space-between;color:var(--mut);font-weight:600;margin-bottom:6px}.pbar{height:8px;border-radius:9px;background:var(--line);overflow:hidden;margin-bottom:14px}.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff7a8a);transition:width .5s}
.qmeta{display:flex;gap:10px;align-items:center}.combo{margin-left:auto;color:var(--gold);font-weight:700}.fb{min-height:48px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.fb .btn{margin-left:auto}.good{color:var(--ok);font-weight:700}.nope{color:var(--bad);font-weight:700}
.rev{padding-left:18px}.rev li{margin:8px 0}.bad-t{color:var(--bad);text-decoration:line-through}.ok-t{color:var(--ok)}.small-link{font-size:14px;color:var(--mut);text-decoration:underline}
.setup h3{margin:14px 0 0}
.timer{position:sticky;top:64px;z-index:10;float:right;background:var(--card);border:1px solid var(--line);padding:3px 14px;border-radius:99px;font-weight:700}.timer.low{color:var(--bad);animation:pulse 1s infinite}
.passage{margin-bottom:14px;border-left:5px solid var(--gold)}.passage .pl{font-size:18px}
/* flashcards */
.flip{perspective:1000px;height:260px;margin:20px 0;cursor:pointer;position:relative}.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);backface-visibility:hidden;transition:transform .6s;text-align:center;padding:20px}
.front{transform:rotateY(0)}.back{transform:rotateY(180deg);background:linear-gradient(135deg,var(--red),#ff6b81);color:#fff}.flipped .front{transform:rotateY(-180deg)}.flipped .back{transform:rotateY(0)}
.fw{font-size:clamp(30px,6vw,48px);font-weight:700}.face small{color:var(--mut);margin-top:10px}.back small{color:#fff9}.lvl{position:absolute;top:14px;left:18px;color:var(--mut)}
/* charts */
.donut{position:relative;width:130px;height:130px;flex:none}.donut svg{width:100%;height:100%}.d-bg{fill:none;stroke:var(--line);stroke-width:12}.d-fg{fill:none;stroke-width:12;stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--to);animation:donut 1.2s ease-out}
@keyframes donut{from{stroke-dashoffset:var(--c)}}.d-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}.d-txt b{font-size:24px}.d-txt small{color:var(--mut);font-size:12px}
.donuts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.donuts .donut{width:100px;height:100px}.donuts .d-txt b{font-size:18px}
.bars{display:grid;gap:10px}.bar-row{display:grid;grid-template-columns:96px 1fr 56px;gap:10px;align-items:center;font-size:14px}.bt{height:12px;background:var(--line);border-radius:9px;overflow:hidden}.bt i{display:block;height:100%;border-radius:9px;animation:grow 1s both;transform-origin:left}.bv{color:var(--mut);text-align:right}
@keyframes grow{from{transform:scaleX(0)}}
.cols{display:flex;gap:12px;align-items:flex-end;padding-top:20px}.col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:13px}.col i{display:block;width:100%;border-radius:8px 8px 0 0;animation:growY 1s both;transform-origin:bottom}.cv{font-weight:700}.cl{color:var(--mut)}
@keyframes growY{from{transform:scaleY(0)}}
.line{width:100%}.grid,.line .grid,.radar .grid{stroke:var(--line)}.line .grid{stroke-width:1}.ax{fill:var(--mut);font-size:9px}.ln{fill:none;stroke:var(--red);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.4s ease-out}@keyframes draw{from{stroke-dashoffset:1}}
.area{fill:var(--red);opacity:.1}.dot{fill:var(--red);animation:fadeUp .4s both}
.radar{width:100%;max-width:300px;display:block;margin:auto}.radar polygon.grid{stroke:var(--line);fill:none}.r-area{fill:rgba(220,20,60,.25);stroke:var(--red);stroke-width:2;transform-origin:110px 105px;animation:rz 1s ease-out}@keyframes rz{from{transform:scale(0)}}
.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:5px}.heat i{aspect-ratio:1;border-radius:5px;background:var(--line)}.heat .h1{background:#f4a3b2}.heat .h2{background:#e8506e}.heat .h3{background:var(--red)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px}.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center}.tile span{font-size:24px}.tile b{display:block;font-size:30px;line-height:1.1}.tile small{color:var(--mut)}
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
/* writing, faq */
.wl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}.chars{margin:8px 0}.chars .chip{font-size:16px;padding:2px 12px}
.an-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.check{list-style:none;padding:0;margin:0;font-size:14px}.check li::before{content:"○ ";color:var(--mut)}.check li.y::before{content:"✓ ";color:var(--ok);font-weight:700}
.faq{margin-top:10px}.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:0 16px}.qa summary{list-style:none;display:flex;justify-content:space-between;gap:10px;padding:14px 0;color:var(--ink)}.qa summary::-webkit-details-marker{display:none}.qa summary small{color:var(--mut);white-space:nowrap}.qa[open]{border-color:var(--red)}.qa .md{padding-bottom:12px;animation:fadeUp .3s}
/* search overlay */
.sov{position:fixed;inset:0;z-index:100;background:rgba(10,8,14,.55);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:8vh 14px;animation:fadeIn .2s}@keyframes fadeIn{from{opacity:0}}
.sbox{width:min(720px,100%);background:var(--card);border-radius:20px;padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:popIn .25s both}
.sin{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px}.sin input{flex:1;border:0;background:none;font:inherit;font-size:18px;color:var(--ink);outline:0}
.sres{max-height:52vh;overflow:auto}.hint{color:var(--mut);padding:10px}
.res{display:flex;gap:12px;padding:10px;border-radius:12px;align-items:flex-start}.res:hover,.res.sel{background:var(--bg)}.rt{flex:none;width:92px;font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;padding-top:3px}.rb{display:flex;flex-direction:column}.rb small{color:var(--mut)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:99px;z-index:200;animation:fadeUp .3s}.toast.out{opacity:0;transition:.4s}
@media(max-width:900px){.nav{position:fixed;top:57px;left:0;right:0;flex-direction:column;background:var(--bg);padding:10px 20px;border-bottom:1px solid var(--line);display:none}.menu-open .nav{display:flex}.burger{display:block}.sbtn span,.sbtn kbd{display:none}.top{gap:8px}.logo{margin-right:auto}.nav{margin:0}.bar-row{grid-template-columns:80px 1fr 48px}.carousel{min-height:460px}.car-btn{display:none}.rt{width:70px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}