:root {
  --navy:#17324d; --ink:#13283d; --cream:#fffaf1; --paper:#fffefd;
  --coral:#ff745f; --pink:#f8a6b7; --mint:#a8dfcf; --yellow:#f4c95d;
  --blue:#85b8d8; --line:#d9e1df; --muted:#667786; --shadow:0 20px 55px rgba(23,50,77,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-width:320px}
button,input{font:inherit} button{color:inherit}
.app-shell{min-height:100vh;overflow:hidden;background-image:radial-gradient(circle at 12% 18%,rgba(244,201,93,.14),transparent 24%),radial-gradient(circle at 92% 62%,rgba(168,223,207,.2),transparent 24%)}
.topbar{height:82px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,250,241,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(23,50,77,.1);position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.brand-mark{width:42px;height:42px;border-radius:50% 48% 45% 55%;display:grid;place-items:center;background:var(--coral);color:white;font-family:Georgia,serif;font-weight:800;font-style:italic;transform:rotate(-6deg)}
.brand b{display:block;font-family:Georgia,serif;font-size:1.08rem}.brand small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.04em;margin-top:2px}
.top-actions{display:flex;align-items:center;gap:12px}.icon-button,.streak{height:42px;border:1px solid rgba(23,50,77,.15);background:#fff;border-radius:22px;display:flex;align-items:center;justify-content:center}
.icon-button{width:42px;cursor:pointer;font-family:Georgia,serif;font-weight:800}.streak{gap:5px;padding:0 14px}.streak b{font-size:.9rem}
.view{display:none}.view.active{display:block}
.hero{min-height:520px;display:grid;grid-template-columns:minmax(300px,42%) 58%;position:relative;background:#dcefe7;border-bottom:1px solid rgba(23,50,77,.12);overflow:hidden}
.hero-copy{padding:clamp(62px,8vw,112px) 20px 66px clamp(24px,7vw,110px);position:relative;z-index:2}
.eyebrow,.section-kicker{font-weight:850;letter-spacing:.14em;font-size:.72rem;color:#d84f42}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.2rem,6vw,6.3rem);line-height:.84;margin:18px 0 27px;letter-spacing:-.055em;color:var(--navy)}
.hero h1 i{color:#df5549;font-weight:400}.hero-copy p{font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.65;max-width:520px;margin:0 0 30px;color:#344c60}
.primary-button,.secondary-button,.text-button,.back-button,.close-button{border:0;cursor:pointer}
.primary-button{background:var(--navy);color:#fff;border-radius:999px;padding:15px 22px;font-weight:780;display:inline-flex;align-items:center;justify-content:center;gap:28px;box-shadow:0 8px 20px rgba(23,50,77,.18);transition:.2s transform,.2s background}
.primary-button:hover{transform:translateY(-2px);background:#244966}.primary-button:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #ffb229;outline-offset:3px}
.hero-art{height:100%;min-height:520px}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;mix-blend-mode:multiply}
.float-note{position:absolute;z-index:3;background:#fffdf7;border:1px solid rgba(23,50,77,.12);box-shadow:0 12px 30px rgba(23,50,77,.14);padding:13px 17px;font-family:Georgia,serif;font-size:.85rem;line-height:1.25;transform:rotate(-4deg)}
.float-note:after{content:"";position:absolute;width:22px;height:7px;background:rgba(244,201,93,.75);top:-4px;left:40%;transform:rotate(2deg)}.note-one{top:14%;right:4%}.note-two{bottom:10%;left:48%;transform:rotate(3deg)}
.dashboard,.timeline{max-width:1240px;margin:0 auto;padding:72px 28px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.section-heading h2,.dialog-head h2{font-family:Georgia,serif;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.03em;margin:7px 0 0;color:var(--navy)}
.overall-progress{width:min(280px,35vw)}.overall-progress>div:first-child{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:7px}.progress-track,.session-progress{height:7px;background:rgba(23,50,77,.12);overflow:hidden}.progress-track{border-radius:8px}.progress-track span,.session-progress span{display:block;height:100%;width:0;background:var(--coral);transition:width .35s}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mode-card{min-height:220px;position:relative;padding:24px;text-align:left;border:1px solid rgba(23,50,77,.12);border-radius:4px;background:var(--paper);cursor:pointer;overflow:hidden;transition:.22s transform,.22s box-shadow}
.mode-card:hover{transform:translateY(-5px) rotate(-.2deg);box-shadow:var(--shadow)}.mode-card:before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-30px;top:-34px;background:var(--card-color);opacity:.86}.mode-card.coral{--card-color:var(--coral)}.mode-card.yellow{--card-color:var(--yellow)}.mode-card.mint{--card-color:var(--mint)}.mode-card.blue{--card-color:var(--blue)}.mode-card.pink{--card-color:var(--pink)}.mode-card.navy{--card-color:var(--navy);background:var(--navy);color:white}.mode-card.navy p,.mode-card.navy .mode-number{color:#d7e3eb}.mode-number{font-size:.72rem;letter-spacing:.14em;color:var(--muted);font-weight:800}.mode-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--card-color);margin:18px 0 13px;font-weight:900;font-size:.8rem}.navy .mode-icon{background:var(--yellow);color:var(--navy)}
.mode-card h3{font-family:Georgia,serif;font-size:1.45rem;margin:0 0 8px}.mode-card p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.45;max-width:80%}.mode-arrow{position:absolute;right:22px;bottom:22px;font-size:1.35rem}
.timeline{padding-top:15px;padding-bottom:90px}.section-heading.compact{align-items:center}.text-button{background:none;font-weight:800;color:#d84f42;padding:10px}
.category-strip{display:grid;grid-template-columns:repeat(9,145px);gap:12px;overflow-x:auto;padding:5px 2px 18px;scrollbar-color:var(--mint) transparent}.category-card{background:white;border:1px solid rgba(23,50,77,.12);min-height:132px;padding:17px;border-radius:4px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;cursor:pointer;transition:.2s transform,.2s border-color}.category-card:hover{transform:translateY(-3px);border-color:var(--coral)}.category-card span{font-size:1.7rem}.category-card b{display:block;font-family:Georgia,serif}.category-card small{display:block;color:var(--muted);margin-top:3px}
.exercise-view{min-height:calc(100vh - 82px);background:#edf4f1}.exercise-header{height:76px;padding:0 clamp(18px,5vw,68px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:white}.back-button{background:none;font-weight:750;text-align:left}.exercise-title{text-align:center}.exercise-title span{display:block;color:#d84f42;font-size:.65rem;letter-spacing:.14em;font-weight:850}.exercise-title b{font-family:Georgia,serif;font-size:1.12rem}.close-button{justify-self:end;width:42px;height:42px;border-radius:50%;background:#f0f1ed;font-size:1.8rem;line-height:1}.session-progress{height:5px}.session-progress span{background:var(--coral)}
.exercise-stage{min-height:calc(100vh - 163px);max-width:1120px;margin:auto;padding:60px 24px;display:grid;grid-template-columns:220px minmax(0,700px);gap:40px;justify-content:center;align-items:start}.stage-aside{padding-top:26px}.stage-sticker{width:80px;height:80px;border-radius:47% 53% 44% 56%;background:var(--yellow);display:grid;place-items:center;font-family:Georgia,serif;font-size:2rem;font-weight:850;transform:rotate(-7deg)}.stage-aside p{font-family:Georgia,serif;line-height:1.55;color:#516573;font-size:.95rem;margin-top:22px}
.question-card{background:white;min-height:505px;border:1px solid rgba(23,50,77,.12);box-shadow:var(--shadow);padding:clamp(24px,5vw,52px);display:flex;flex-direction:column}.question-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.question-instruction{color:#d84f42;font-weight:800;font-size:.85rem;margin:35px 0 10px}.question-card h2{font-family:Georgia,serif;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.18;margin:0 0 32px;color:var(--navy)}
.answer-area{display:grid;gap:11px}.choice-button{width:100%;text-align:left;border:1px solid #cfd9d7;background:#fff;border-radius:6px;padding:15px 17px;cursor:pointer;transition:.16s}.choice-button:hover{border-color:var(--navy);transform:translateX(3px)}.choice-button.selected{border:2px solid var(--navy);background:#edf4f1}.choice-button.correct{border-color:#39946d;background:#e5f6ed}.choice-button.wrong{border-color:#d84f42;background:#fff0ec}.choice-letter{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eef0ec;margin-right:11px;font-size:.72rem;font-weight:850}
.text-answer{width:100%;border:0;border-bottom:2px solid var(--navy);padding:13px 4px;background:transparent;font-size:1.15rem;border-radius:0}.text-answer::placeholder{color:#9ba9ac}.gap-sentence{font-family:Georgia,serif;font-size:1.25rem;line-height:1.6;padding:15px 18px;background:#f7f3e9;border-left:5px solid var(--yellow);margin-bottom:14px}
.order-answer{min-height:68px;border:2px dashed #bfcdca;border-radius:8px;padding:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.order-answer:empty:after{content:"Нажимай на слова по порядку";color:#91a09e;font-size:.86rem}.word-bank{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.word-chip{border:1px solid rgba(23,50,77,.25);background:#fffaf1;border-radius:20px;padding:8px 13px;cursor:pointer}.word-chip.used{opacity:.35;pointer-events:none}.order-answer .word-chip{background:var(--mint)}
.feedback{margin-top:20px;padding:15px 17px;border-radius:6px;line-height:1.5}.feedback.good{background:#e5f6ed;border-left:5px solid #39946d}.feedback.bad{background:#fff0ec;border-left:5px solid #d84f42}.feedback b{display:block;margin-bottom:3px}.feedback .answer-line{font-family:Georgia,serif;font-size:1.08rem}.speak-button{border:0;background:transparent;cursor:pointer;margin-left:6px;font-size:1rem}.question-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:28px}.secondary-button{background:#edf0ed;border-radius:999px;padding:13px 19px;font-weight:750}.check-button,.next-button{min-width:142px}.check-button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.result-view{min-height:calc(100vh - 82px);background:#dcefe7;padding:60px 20px}.result-card{max-width:620px;margin:auto;background:white;text-align:center;padding:60px 30px;box-shadow:var(--shadow);position:relative;overflow:hidden}.result-confetti{position:absolute;right:32px;top:22px;font-size:3rem;color:var(--yellow);transform:rotate(16deg)}.result-card h2{font-family:Georgia,serif;font-size:3.2rem;margin:15px 0 24px;color:var(--navy)}.score-ring{width:145px;height:145px;border-radius:50%;border:14px solid var(--mint);display:grid;place-content:center;margin:0 auto 23px;box-shadow:inset 0 0 0 3px white}.score-ring b{font-family:Georgia,serif;font-size:2rem}.score-ring span{font-size:.75rem;color:var(--muted)}.result-card>p{color:var(--muted);line-height:1.6;max-width:410px;margin:0 auto}.result-actions{display:flex;justify-content:center;gap:12px;margin-top:30px}
.glossary-dialog{width:min(940px,94vw);height:min(820px,92vh);border:0;padding:0;background:#fffdf8;color:var(--ink);box-shadow:0 30px 90px rgba(12,29,45,.3)}.glossary-dialog::backdrop{background:rgba(14,31,47,.55);backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:28px 32px 20px;border-bottom:1px solid var(--line)}.dialog-head h2{font-size:2.2rem}.search-box{margin:20px 32px 12px;height:50px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:10px;padding:0 15px}.search-box input{width:100%;border:0;outline:0;background:none;font-size:1rem}.filter-row{display:flex;gap:7px;overflow-x:auto;padding:0 32px 16px}.filter-chip{white-space:nowrap;border:1px solid var(--line);background:white;border-radius:18px;padding:7px 12px;cursor:pointer;font-size:.78rem}.filter-chip.active{background:var(--navy);color:white;border-color:var(--navy)}.glossary-list{height:calc(100% - 180px);overflow:auto;padding:0 32px 32px}.glossary-group h3{position:sticky;top:0;background:#fffdf8;padding:16px 0 9px;margin:0;color:#d84f42;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;z-index:1}.word-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) 38px;gap:18px;align-items:center;padding:13px 0;border-bottom:1px solid #e7ebe8}.word-row b{font-family:Georgia,serif;font-size:1.04rem}.word-row span{color:#586b77}.word-row button{border:0;background:#edf4f1;border-radius:50%;width:34px;height:34px;cursor:pointer}.empty-words{padding:35px;color:var(--muted);text-align:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-bottom:40px}.hero-art{height:330px;min-height:0}.hero-art img{object-position:68% center}.note-one{top:55%;right:3%}.note-two{display:none}.mode-grid{grid-template-columns:repeat(2,1fr)}.exercise-stage{grid-template-columns:1fr;max-width:760px}.stage-aside{display:none}}
@media(max-width:600px){.topbar{height:70px;padding:0 16px}.brand small{display:none}.hero h1{font-size:3.65rem}.hero-copy{padding:45px 22px 35px}.hero-copy p{font-size:.98rem}.hero-art{height:265px}.float-note{font-size:.75rem}.note-one{top:auto;bottom:14px}.dashboard,.timeline{padding:48px 16px}.timeline{padding-top:0}.section-heading{display:block}.overall-progress{width:100%;margin-top:20px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:175px}.mode-card p{max-width:75%}.exercise-header{grid-template-columns:1fr auto auto;gap:10px;padding:0 14px}.exercise-title{text-align:right}.exercise-title span{display:none}.back-button span{display:none}.exercise-stage{padding:22px 12px}.question-card{min-height:calc(100vh - 190px);padding:25px 20px}.question-instruction{margin-top:26px}.question-actions{position:sticky;bottom:0;background:white}.dialog-head,.filter-row,.glossary-list{padding-left:18px;padding-right:18px}.search-box{margin-left:18px;margin-right:18px}.word-row{grid-template-columns:1fr 34px;gap:8px}.word-row span{grid-column:1}.word-row button{grid-column:2;grid-row:1/3}.result-actions{flex-direction:column}.result-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}