:root{--bg:#f7f8fc;--card:#fff;--text:#1e2233;--muted:#6b7280;--border:#e5e7ef;--pri:#6c5ce7;--pri2:#a29bfe;--ok:#00b894;--bad:#e17055;--shadow:0 6px 24px rgba(40,40,90,.08)} @media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#12141f;--card:#1c1f2f;--text:#eceefa;--muted:#9aa0b8;--border:#2c3048;--shadow:0 6px 24px rgba(0,0,0,.4)}} :root[data-theme=dark]{--bg:#12141f;--card:#1c1f2f;--text:#eceefa;--muted:#9aa0b8;--border:#2c3048;--shadow:0 6px 24px rgba(0,0,0,.4)} *{box-sizing:border-box}html{scroll-behavior:smooth} body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)} a{color:var(--pri);text-decoration:none}h1{font-size:2rem;margin:.4em 0}h2{margin:1.2em 0 .5em}h3{margin:.4em 0} .muted{color:var(--muted)}.center{text-align:center}.left{text-align:left}.pad{padding:12px} .wrap{max-width:1120px;margin:0 auto;padding:16px}.narrow{max-width:760px} .nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:10px 20px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} .logo{font-weight:800;font-size:1.3rem;color:var(--text)}.logo b{color:var(--pri)} #links{display:flex;gap:4px;margin:0 auto 0 24px;flex-wrap:wrap}#links a{padding:6px 12px;border-radius:20px;color:var(--text);font-weight:500;transition:.2s} #links a:hover,#links a.on{background:var(--pri);color:#fff} .icon{border:0;background:transparent;font-size:1.2rem;cursor:pointer;padding:6px 8px;border-radius:8px}.icon:hover{background:var(--border)}.burger{display:none} .page{opacity:0}.page.in{animation:fadeUp .45s forwards} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .btn{display:inline-block;border:0;cursor:pointer;background:var(--pri);color:#fff;padding:10px 20px;border-radius:12px;font:600 1rem inherit;font-family:inherit;transition:.2s;box-shadow:0 4px 14px rgba(108,92,231,.3)} .btn:hover{transform:translateY(-2px)}.btn.ghost{background:transparent;color:var(--pri);border:2px solid var(--pri);box-shadow:none}.btn.light{background:#fff;color:#333} .btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}.btn.small{padding:6px 14px;font-size:.9rem}.btn.big{padding:14px 32px;font-size:1.1rem;margin-top:12px} .row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.row.center{justify-content:center}.row.between{justify-content:space-between} .in,.ed{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit}.in:focus,.ed:focus{outline:0;border-color:var(--pri)} .ed{min-height:260px;margin-top:12px;resize:vertical} .chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.chip{border:1px solid var(--border);background:var(--card);color:var(--text);padding:6px 14px;border-radius:20px;cursor:pointer;font:inherit;transition:.2s} .chip:hover{border-color:var(--pri)}.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)} .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)} .grid,.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:16px 0} .tp{display:block;color:var(--text);animation:fadeUp .5s both;transition:.25s}.tp:hover,.cat:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(108,92,231,.2)} .tp p{color:var(--muted);margin:.3em 0;font-size:.92rem}.tp.done{border-color:var(--ok)} .cat{text-align:center;color:var(--text);transition:.25s}.big{font-size:2.6rem;display:block} .badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:10px;color:#fff;font-style:normal} .lv0{background:#00b894}.lv1{background:#0984e3}.lv2{background:#6c5ce7}.lv3{background:#e17055}.lv4{background:#d63031} .hero{position:relative;overflow:hidden;height:min(460px,70vh);color:#fff} .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;padding:0 8%;opacity:0;transform:scale(1.05);transition:opacity .8s,transform 1.2s;pointer-events:none} .slide.on{opacity:1;transform:none;pointer-events:auto}.sc{max-width:560px}.sc h1{font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.15;margin:0 0 12px}.sc p{font-size:1.15rem;opacity:.95} .slide .sc>*{opacity:0;transform:translateY(24px)}.slide.on .sc>*{animation:fadeUp .7s forwards}.slide.on .sc p{animation-delay:.15s}.slide.on .sc a{animation-delay:.3s} .emoji{font-size:clamp(5rem,16vw,11rem);animation:float 4s ease-in-out infinite;filter:drop-shadow(0 18px 20px rgba(0,0,0,.25))} @keyframes float{50%{transform:translateY(-22px) rotate(6deg)}} .orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.14);animation:float 7s ease-in-out infinite;pointer-events:none} .o1{width:220px;height:220px;left:-60px;top:-60px}.o2{width:140px;height:140px;right:20%;bottom:-40px;animation-delay:-2s}.o3{width:80px;height:80px;left:45%;top:20px;animation-delay:-4s} .arr{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.25);color:#fff;font-size:2rem;width:44px;height:44px;border-radius:50%;cursor:pointer;z-index:3}.arr:hover{background:rgba(255,255,255,.45)}.arr.l{left:12px}.arr.r{right:12px} .dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}.dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.3s}.dots i.on{width:28px;border-radius:6px;background:#fff} .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}.bar b{display:block;height:100%;background:#fff;width:0}@keyframes fill{to{width:100%}} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:16px 0}.stats>div{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;text-align:center;box-shadow:var(--shadow)} .stats b{display:block;font-size:2.3rem;color:var(--pri)}.stats span{color:var(--muted);font-size:.9rem} .wrap.stats{margin-top:-30px;position:relative;z-index:4} .path{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px} .pstep{display:flex;flex-direction:column;align-items:flex-start;color:#fff;padding:18px;border-radius:16px;animation:fadeUp .6s both;transition:.25s}.pstep:hover{transform:translateY(-6px) scale(1.03)}.pstep small{opacity:.9} .pn{background:rgba(255,255,255,.25);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;margin-bottom:8px} .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:16px 0}.wl{grid-template-columns:2fr 1fr} .wod b{font-size:1.8rem;color:var(--pri)}.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.85rem;margin-top:6px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px} canvas{max-width:100%;display:block;margin:0 auto} .topic .lead,.lead{font-size:1.2rem}.ex{list-style:none;padding:0}.ex li{display:flex;gap:10px;align-items:center;padding:10px 14px;margin:6px 0;background:var(--bg);border-left:4px solid var(--pri);border-radius:8px} .say{border:0;background:transparent;cursor:pointer;font-size:1.1rem}.back{display:inline-block;margin-bottom:8px} .pbar{height:8px;background:var(--border);border-radius:6px;overflow:hidden;margin:10px 0}.pbar b{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--ok));transition:width .6s}.pbar.big{height:14px} .fc{perspective:1000px;height:260px;cursor:pointer;margin:12px 0}.fi{position:relative;height:100%;transition:transform .6s;transform-style:preserve-3d}.fc.flip .fi{transform:rotateY(180deg)} .ff{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--border)} .front{background:var(--card)}.front h2{font-size:2.2rem;margin:10px 0;color:var(--pri)}.back{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;transform:rotateY(180deg)} .qtop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.tm{font-weight:700}.tm.low{color:var(--bad);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.4}} .qcard h2{margin:6px 0 16px}.opts{display:grid;gap:10px} .opt{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 16px;border:2px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;cursor:pointer;transition:.2s} .opt:hover:not(:disabled){border-color:var(--pri);transform:translateX(4px)}.opt i{background:var(--border);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85rem;flex:none} .opt.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent);animation:shake .4s} @keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} .ok-t{color:var(--ok)}.bad-t{color:var(--bad)}.rv{margin:10px 0}.rv p{margin:.2em 0} .hist{list-style:none;padding:0}.hist li{padding:8px 0;border-bottom:1px solid var(--border)}.hist b{color:var(--pri);margin-right:6px} .metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.metrics div{flex:1;min-width:80px;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;font-size:.8rem;color:var(--muted)}.metrics b{display:block;font-size:1.5rem;color:var(--pri)} .ck{list-style:none;padding:0;margin:0}.ck li{padding:3px 0} .acc{background:var(--card);border:1px solid var(--border);border-radius:12px;margin:10px 0;overflow:hidden} .aq{display:flex;justify-content:space-between;width:100%;padding:14px 18px;border:0;background:transparent;color:var(--text);font:600 1rem inherit;font-family:inherit;text-align:left;cursor:pointer}.aq i{font-style:normal;color:var(--pri);font-size:1.4rem;transition:.3s} .aa{max-height:0;overflow:hidden;transition:max-height .35s;padding:0 18px}.acc.open .aa{max-height:300px}.acc.open .aq i{transform:rotate(45deg)} mark{background:#fdcb6e;color:#222;border-radius:3px;padding:0 2px} .overlay{position:fixed;inset:0;background:rgba(10,10,30,.55);z-index:50;display:flex;justify-content:center;align-items:flex-start;padding-top:8vh;backdrop-filter:blur(4px)}.overlay[hidden]{display:none} .sbox{width:min(680px,94vw);background:var(--card);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden;animation:fadeUp .25s} .sbox input{width:100%;padding:18px 22px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font:1.1rem inherit;font-family:inherit;outline:0} #sRes{max-height:60vh;overflow:auto}.res{display:flex;gap:12px;padding:10px 18px;color:var(--text);align-items:flex-start}.res:hover{background:var(--bg)}.res small{display:block;color:var(--muted)}.ri{font-size:1.4rem} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 20px;border-radius:24px;z-index:60;animation:fadeUp .3s} .confetti{position:fixed;inset:0;pointer-events:none;z-index:70} .foot{text-align:center;color:var(--muted);padding:30px 10px;font-size:.9rem} @media(max-width:820px){.burger{display:block}#links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--card);padding:10px;margin:0;border-bottom:1px solid var(--border)}#links.open{display:flex}.nav .logo{margin-right:auto}.slide{flex-direction:column;justify-content:center;text-align:center;gap:10px}.emoji{font-size:4rem}.wl{grid-template-columns:1fr}.arr{display:none}} @media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}} .rv{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .rv.seen{opacity:1;transform:none} .ex li.rv{transform:translateX(-26px)}.ex li.rv.seen{transform:none} .tp.rv.seen{transition:transform .25s,box-shadow .25s} .btn,.chip,.opt{position:relative;overflow:hidden} .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none} @keyframes ripple{to{transform:scale(2.6);opacity:0}} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(108,92,231,.4)}.btn:active{transform:scale(.96)} .chip:hover{transform:translateY(-2px)}.chip.on{animation:pop .3s} @keyframes pop{50%{transform:scale(1.12)}} .logo b{display:inline-block;animation:wave 3s ease-in-out infinite} @keyframes wave{0%,100%{transform:rotate(0)}10%{transform:rotate(-8deg)}20%{transform:rotate(6deg)}30%{transform:rotate(0)}} .nav{transition:box-shadow .3s}.nav.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.18)} #links a:hover{transform:translateY(-2px)} .icon{transition:transform .3s}.icon:hover{transform:rotate(20deg) scale(1.2)} .badge{animation:pop .5s both} .say{transition:transform .2s}.say:hover{transform:scale(1.3)}.say:active{animation:pulse .4s} .tp.done{animation:fadeUp .5s both,glow 2.5s ease-in-out infinite} @keyframes glow{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 35%,transparent)}} .pbar b{animation:grow 1s cubic-bezier(.2,.7,.2,1) both} @keyframes grow{from{width:0}} .overlay:not([hidden]){animation:fade .2s} @keyframes fade{from{opacity:0}} .res{transition:background .15s,padding-left .2s}.res:hover{padding-left:22px} .opt:hover{transform:translateX(6px)} .opt.right{animation:pop .4s} .footer,.foot{animation:fade 1s} .rules,.mist{padding-left:1.2rem;margin:.4rem 0 1rem}.rules li,.mist li{margin:.3rem 0;line-height:1.5} .mist li::marker{color:#e5484d}.tip{background:rgba(99,102,241,.1);border-left:4px solid #6366f1;padding:.7rem 1rem;border-radius:8px;margin:1rem 0} .foot .legal{max-width:760px;margin:10px auto 0;font-size:.78rem;line-height:1.5;opacity:.85} .legal a{color:var(--pri);text-decoration:underline}.legal-page h3{margin-top:1.2rem}