@font-face{font-family:Outfit;font-weight:400 800;font-display:swap;src:url(fonts/outfit-latin.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrumentserif-italic-latin.woff2) format("woff2")}
:root{--paper:#FFFCF3;--ink:#111112;--ink2:#1B1B1E;--body:#3A382F;--muted:#7A7664;--red:#F5304A;--red2:#D91F3A;--green:#12A150;--navy:#0A3161;--gold:#F2C230;--line:rgba(17,17,18,.09);--disp:Outfit,Inter,system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--tabs:70px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--paper)}
body{font:400 17px/1.55 Inter,system-ui,sans-serif;color:var(--body);-webkit-font-smoothing:antialiased;background-image:linear-gradient(to right,rgba(17,17,18,.028) 1px,transparent 1px),linear-gradient(rgba(17,17,18,.028) 1px,transparent 1px);background-size:54px 54px;overscroll-behavior-y:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--disp);font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.06;margin:0 0 12px}
h1{font-size:34px}h2{font-size:28px}h3{font-size:19px;letter-spacing:-.02em}
p{margin:0 0 12px}
.s{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--red);font-size:1.12em;letter-spacing:-.01em}
.top{position:sticky;top:0;z-index:20;background:rgba(17,17,18,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-top:env(safe-area-inset-top)}
.top__in{max-width:760px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font:700 18px var(--disp);color:#fff;letter-spacing:-.02em}
.brand__mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#2b2b30,#0c0c0e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--red);display:grid;place-items:center;font:800 14px var(--disp)}
.top__count{font:600 12.5px Inter;color:#d8d5c8;background:rgba(255,255,255,.1);padding:6px 12px;border-radius:999px}
.view{max-width:760px;margin:0 auto;padding:20px 18px calc(var(--tabs) + 44px);outline:0;min-height:80vh}
.view>*{animation:up .45s var(--ease) both}
.view>*:nth-child(2){animation-delay:.05s}.view>*:nth-child(3){animation-delay:.1s}.view>*:nth-child(4){animation-delay:.15s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;background:rgba(255,252,243,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;max-width:250px;height:var(--tabs);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 12.5px Inter;color:var(--muted);position:relative;transition:color .2s}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--red)}
.tab.on::before{content:"";position:absolute;top:0;width:36px;height:3px;border-radius:0 0 4px 4px;background:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 28px;border-radius:999px;background:linear-gradient(180deg,#FF4961,#E22440);color:#fff;font:600 17px var(--disp);box-shadow:0 16px 28px -14px rgba(245,48,74,.75),inset 0 0 0 1px rgba(255,255,255,.2);transition:transform .15s var(--ease),box-shadow .15s}
.btn:active{transform:scale(.975)}
.btn--ink{background:linear-gradient(180deg,#26262a,#111112);box-shadow:0 14px 26px -16px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px var(--line)}
.btn--ok{background:linear-gradient(180deg,#22C06A,#12A150);box-shadow:0 14px 26px -14px rgba(18,161,80,.7),inset 0 0 0 1px rgba(255,255,255,.2)}
.btn--block{display:flex;width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1}
/* hero */
.hero{background:var(--ink);color:#fff;border-radius:30px;padding:22px 20px 20px;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 30px 50px -34px rgba(17,17,18,.7)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 100% -10%,rgba(245,48,74,.55),transparent 70%),radial-gradient(300px 200px at 0 110%,rgba(10,49,97,.7),transparent 70%)}
.hero>*{position:relative}
.hero__top{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .tr{stroke:rgba(255,255,255,.14)}
.ring .pg{stroke:var(--red);transition:stroke-dashoffset 1s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 24px var(--disp);letter-spacing:-.04em}
.hero h1{color:#fff;font-size:27px;margin:0 0 4px}
.hero small{color:#c9c6b8;font-size:14px;line-height:1.35;display:block}
.hero .s{color:#FF7A8C}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border-radius:99px;padding:8px 13px;font:600 13.5px Inter;color:#fff}
.pill svg{width:16px;height:16px;fill:var(--gold);stroke:none}
.pill i{font-style:normal;color:var(--gold);font-weight:700}
.cta{display:flex;flex-direction:column;gap:10px}
.next{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;color:var(--ink);border-radius:20px;padding:10px 14px 10px 10px;width:100%}
.next img{width:76px;border-radius:12px;flex:none;aspect-ratio:3/2;object-fit:cover}
.next span{display:block;font:600 12px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.next b{font:700 17px/1.2 var(--disp)}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FF6B7E,var(--red));transition:width .6s var(--ease)}
.bar--l{background:#ECE8D8}
.mod{font:700 12.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:26px 2px 12px;display:flex;justify-content:space-between}
.mod em{font-style:normal;color:var(--muted);letter-spacing:.02em;text-transform:none;font-weight:600}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mcard{position:relative;display:block;text-align:left;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 18px 30px -24px rgba(17,17,18,.5);transition:transform .2s var(--ease)}
.mcard:active{transform:scale(.97)}
.mcard img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#f3efe2}
.mcard b{display:block;padding:10px 13px 13px;font:600 14.5px/1.25 var(--disp);color:var(--ink)}
.mcard small{display:block;font:500 12.5px Inter;color:var(--muted);margin-top:2px}
.mcard .num{position:absolute;top:8px;left:8px;min-width:26px;height:26px;border-radius:9px;background:rgba(17,17,18,.82);color:#fff;font:700 12px var(--disp);display:grid;place-items:center;padding:0 6px}
.mcard .ck{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.mcard .ck svg,.back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.back{display:inline-flex;align-items:center;gap:6px;font:600 15px Inter;color:var(--muted);margin-bottom:14px;padding:6px 2px}
.back svg{width:18px;height:18px;stroke-width:2.4}
.bigmap{position:relative;display:block;width:100%;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 44px -28px rgba(17,17,18,.5);margin-bottom:8px;background:#fff}
.bigmap span{position:absolute;right:10px;bottom:10px;background:rgba(17,17,18,.82);color:#fff;font:600 12.5px Inter;padding:7px 13px;border-radius:99px}
.item{background:#fff;border-radius:20px;padding:15px 17px;margin-bottom:10px;box-shadow:0 0 0 1px var(--line)}
.item .en{font:700 12.5px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.item .pr{font:700 27px/1.1 var(--disp);color:var(--red);letter-spacing:-.03em;margin:4px 0 2px}
.item .es{font-size:15.5px;color:var(--muted)}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.stat div{background:#fff;border-radius:22px;padding:16px;box-shadow:0 0 0 1px var(--line)}
.stat b{display:block;font:800 36px/1 var(--disp);color:var(--ink);letter-spacing:-.045em}
.stat span{font-size:13.5px;color:var(--muted)}
.lvl{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:24px;padding:16px 18px;margin-bottom:16px;position:relative;overflow:hidden}
.lvl::before{content:"";position:absolute;inset:0;background:radial-gradient(240px 140px at 100% 0,rgba(242,194,48,.35),transparent 70%)}
.lvl>*{position:relative}
.lvl i{width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,#F2C230,#C9961B);display:grid;place-items:center;font:800 22px var(--disp);color:#111;font-style:normal;flex:none}
.lvl b{display:block;font:700 20px var(--disp)}
.lvl small{color:#c9c6b8;font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{padding:11px 17px;border-radius:99px;background:#fff;box-shadow:0 0 0 1.5px var(--line);font:600 14.5px Inter;color:var(--body);transition:all .15s}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.lbl{font:700 12.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:20px 2px 10px}
.modes{display:grid;gap:12px;margin-bottom:20px}
.mode{display:flex;align-items:center;gap:15px;text-align:left;background:#fff;border-radius:24px;padding:18px;box-shadow:0 0 0 1px var(--line),0 18px 34px -26px rgba(17,17,18,.5);transition:transform .15s var(--ease)}
.mode:active{transform:scale(.98)}
.mode i{width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,#2b2b30,#0c0c0e);color:var(--red);display:grid;place-items:center;font:800 19px var(--disp);flex:none;font-style:normal}
.mode b{display:block;font:700 18px var(--disp);color:var(--ink)}
.mode small{display:block;color:var(--muted);font-size:14px;line-height:1.35}
.q{background:#fff;border-radius:28px;padding:26px 20px;margin-bottom:16px;text-align:center;box-shadow:0 0 0 1px var(--line),0 28px 46px -32px rgba(17,17,18,.55)}
.q .k{font:700 12.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.q .en{font:800 40px/1.05 var(--disp);color:var(--ink);letter-spacing:-.045em}
.q .pr{font:800 38px/1.05 var(--disp);color:var(--red);letter-spacing:-.04em}
.q .es{font:700 29px/1.15 var(--disp);color:var(--ink);letter-spacing:-.035em}
.q small{display:block;margin-top:10px;color:var(--muted);font-size:15px}
.opt{display:block;width:100%;text-align:left;background:#fff;border-radius:20px;padding:17px 18px;margin-bottom:10px;font:600 18px/1.25 var(--disp);color:var(--ink);box-shadow:0 0 0 1.5px var(--line);transition:transform .12s var(--ease),box-shadow .2s;animation:up .4s var(--ease) both}
.opt:nth-child(2){animation-delay:.04s}.opt:nth-child(3){animation-delay:.08s}.opt:nth-child(4){animation-delay:.12s}
.opt:active{transform:scale(.985)}
.opt.ok{background:#E7F8EE;box-shadow:0 0 0 2.5px var(--green);color:#0B5A2C}
.opt.bad{background:#FFECEF;box-shadow:0 0 0 2.5px var(--red);color:#8A1428;animation:shake .35s}
@keyframes shake{20%{transform:translateX(-7px)}50%{transform:translateX(6px)}80%{transform:translateX(-3px)}}
.opt[disabled]{cursor:default}
.fb{padding:14px 16px;border-radius:18px;margin:4px 0 12px;font:600 16px Inter}
.fb.ok{background:#E7F8EE;color:#0B5A2C}.fb.bad{background:#FFECEF;color:#8A1428}
.prog{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.prog .bar{flex:1;height:8px}
.prog span{font:600 13.5px Inter;color:var(--muted);white-space:nowrap}
.quit{font:600 14px Inter;color:var(--muted)}
.streakbadge{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:99px;padding:5px 12px;font:700 13px var(--disp)}
.streakbadge svg{width:14px;height:14px;fill:var(--gold)}
.card3d{perspective:1100px;margin-bottom:16px}
.flip{position:relative;width:100%;min-height:310px;cursor:pointer;transition:transform .55s var(--ease);transform-style:preserve-3d}
.flip.on{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:30px;padding:26px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;box-shadow:0 0 0 1px var(--line),0 28px 46px -32px rgba(17,17,18,.55)}
.face.back{transform:rotateY(180deg);background:var(--ink);color:#fff;overflow:hidden}
.face.back::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 180px at 100% 0,rgba(245,48,74,.5),transparent 70%)}
.face.back>*{position:relative}
.face.back .pr{color:#FF7A8C;font:800 42px/1.05 var(--disp);letter-spacing:-.04em;margin:6px 0 10px}
.face.back .es{color:#fff;font:600 22px var(--disp)}
.face.back .en{color:#9fb2d8;font:700 13px Inter;letter-spacing:.12em;text-transform:uppercase}
.face .en{font:800 42px/1.05 var(--disp);color:var(--ink);letter-spacing:-.045em}
.face .hint{margin-top:16px;font:500 14px Inter;color:var(--muted)}
.face .k{font:700 12.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.res{text-align:center;padding:10px 0 4px}
.res .big{font:800 72px/1 var(--disp);color:var(--ink);letter-spacing:-.055em}
.res .big em{font-style:normal;color:var(--red)}
.list .item{display:grid;gap:2px}
.msg{background:#fff;border-radius:22px;padding:18px;box-shadow:0 0 0 1px var(--line);margin-bottom:12px}
.zoom{position:fixed;inset:0;z-index:50;background:#111112;display:flex;flex-direction:column}
.zoom[hidden]{display:none}
.zoom__bar{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;color:#fff}
.zoom__title{font:600 15px var(--disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.zoom__ctl{display:flex;gap:8px}
.zoom__ctl button{min-width:44px;height:44px;border-radius:13px;background:#2a2a2d;color:#fff;font:600 20px Inter}
.zoom__x{padding:0 16px;font-size:15px!important;background:var(--red)!important}
.zoom__scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:#111112}
.zoom__scroll img{max-width:none;width:100%;margin:0 auto}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}