@font-face{font-family:BabySans;src:url('assets/BabySans-400.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:BabySans;src:url('assets/BabySans-700.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:BabySerif;src:url('assets/BabySerif-400.woff') format('woff');font-weight:400;font-display:swap}
:root{
  --cream:oklch(0.961 0.011 72);--paper:oklch(0.991 0.006 80);--ink:oklch(0.403 0.025 49);
  --muted:oklch(0.512 0.025 55);--pink:oklch(0.888 0.062 5);--peach:oklch(0.873 0.075 60);
  --blue:oklch(0.906 0.052 214);--lavender:oklch(0.748 0.066 310);--pale-lavender:oklch(0.93 0.035 310);
  --sage:oklch(0.875 0.071 137);--gold:oklch(0.79 0.09 79);--green:oklch(0.60 0.07 150);
  --line:oklch(0.89 0.018 65);--shadow:0 14px 36px oklch(0.48 0.04 310 / .11);
  --radius:30px 34px 28px 32px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{min-height:100%;scroll-behavior:smooth}
body{min-height:100dvh;color:var(--ink);font-family:BabySans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
  radial-gradient(circle at 8% 3%,oklch(0.93 0.035 310 / .7),transparent 31rem),
  radial-gradient(circle at 94% 20%,oklch(0.94 0.045 85 / .75),transparent 30rem),var(--cream)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E")}
button,a,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer;border:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button:focus-visible,a:focus-visible{outline:4px solid oklch(0.65 0.09 310 / .55);outline-offset:4px}
.page{width:min(1120px,100%);margin:auto;padding:18px 18px 48px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:9px;font-family:BabySerif,Georgia,serif;font-size:25px;font-weight:700;white-space:nowrap}
.brand img{width:38px;height:48px;object-fit:contain}
.top-actions{display:flex;align-items:center;gap:8px}
.soft-btn,.icon-btn{min-height:48px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:18px;background:var(--paper);font-weight:700;transition:transform .18s ease,background .18s ease}
.soft-btn:hover,.icon-btn:hover{transform:translateY(-2px);background:var(--blue)}
.icon-btn{width:48px;padding:0;border-radius:50%}
.hero{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;min-height:218px;padding:28px 30px;overflow:hidden;border-radius:40px 46px 36px 48px;background:var(--pale-lavender)}
.hero::after{content:"";position:absolute;width:170px;height:170px;right:-48px;top:-70px;border-radius:50%;background:oklch(0.96 0.034 80 / .76)}
.hero-copy{position:relative;z-index:1}
.eyebrow{margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3{font-weight:400}
h1{font-family:BabySerif,Georgia,serif;font-size:clamp(38px,6vw,62px);line-height:1.04}
h2{font-family:BabySerif,Georgia,serif;font-size:32px;line-height:1.1}
h3{font-size:21px;font-weight:700}
.hero p{max-width:520px;margin-top:12px;color:var(--muted);font-size:17px;line-height:1.5}
.hero-art{position:relative;z-index:1;width:180px;height:170px;display:grid;place-items:center}
.hero-art>img{width:150px;height:160px;object-fit:contain}
.sparkle{position:absolute;width:13px;height:13px;background:var(--gold);clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,38% 38%);opacity:.8}
.sparkle.one{right:22%;top:18%}.sparkle.two{left:8%;bottom:16%;width:9px;height:9px}
.progress-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 2px 9px;font-weight:700}
.progress-line small{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.progress-track{height:12px;border-radius:20px;background:oklch(0.91 0.015 65);overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:inherit;background:var(--green);transition:width .3s ease}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:28px 0 16px}
.section-head p{color:var(--muted);font-size:14px}
.game-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:22px 0;padding:7px;border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.game-tabs.two{grid-template-columns:repeat(2,1fr)}
.tab-btn{min-height:54px;padding:10px 8px;border-radius:17px;background:transparent;font-weight:700}
.tab-btn[aria-pressed="true"]{color:var(--paper);background:var(--lavender)}
.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.app-card{position:relative;min-height:270px;padding:24px;display:flex;flex-direction:column;overflow:hidden;border:1px solid oklch(0.94 0.015 70);border-radius:var(--radius);background:var(--card-bg,var(--paper));box-shadow:0 5px 14px oklch(0.48 0.04 55 / .05);transition:transform .2s ease,box-shadow .2s ease}
.app-card:hover{transform:translateY(-5px) rotate(-.3deg);box-shadow:var(--shadow)}
.app-card:nth-child(even):hover{transform:translateY(-5px) rotate(.3deg)}
.app-card h2{margin-top:auto;font-size:31px}
.app-card p{max-width:85%;margin-top:8px;color:var(--muted);line-height:1.45}
.app-card .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;font-size:14px;font-weight:700}
.app-card .arrow{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:oklch(0.99 0.006 80 / .75);font-size:25px}
.app-illustration{height:112px;display:flex;align-items:center;justify-content:space-between}
.app-illustration img{width:100px;height:108px;object-fit:contain}
.free-tag,.premium-tag,.age-tag{display:inline-flex;align-items:center;width:max-content;padding:6px 10px;border-radius:20px;background:oklch(0.99 0.006 80 / .75);font-size:12px;font-weight:700}
.premium-tag{background:var(--ink);color:var(--paper)}
.premium-banner{margin-top:22px;padding:25px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;border-radius:var(--radius);background:var(--ink);color:var(--paper)}
.premium-banner p{margin-top:7px;color:oklch(0.88 0.02 70);line-height:1.45}
.premium-banner .soft-btn{color:var(--ink)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.learn-card,.choice-btn,.song-card{position:relative;min-width:0;border:1px solid oklch(0.94 0.015 70);border-radius:var(--radius);background:var(--card-bg,var(--paper));transition:transform .18s ease,opacity .18s ease,border-color .18s ease}
.learn-card{min-height:190px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.learn-card:hover,.choice-btn:hover,.song-card:hover{transform:translateY(-4px)}
.learn-card strong{font-size:23px}.learn-card small{color:var(--muted);font-size:14px}
.learn-card img{width:100%;height:105px;object-fit:contain}
.choice-btn{min-height:175px;padding:12px 8px;display:grid;place-items:center}
.choice-btn.gentle{opacity:.42;transform:scale(.96)}
.choice-btn.hint{border:4px solid var(--gold);animation:softPulse .8s ease-in-out 2}
.choice-btn.success{border:4px solid var(--green);transform:scale(1.03)}
.feedback{min-height:32px;margin-top:16px;text-align:center;font-size:20px;font-weight:700}
.big-play{width:108px;height:108px;margin:5px auto 18px;display:grid;place-items:center;border-radius:50%;background:var(--blue);box-shadow:0 8px 0 oklch(0.81 0.055 214);transition:transform .18s ease,box-shadow .18s ease}
.big-play:active{transform:translateY(5px);box-shadow:0 3px 0 oklch(0.81 0.055 214)}
.big-play svg{width:48px;height:48px}
.center{text-align:center}.muted{color:var(--muted)}
.primary-btn,.secondary-btn{min-height:54px;padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:18px;font-weight:700}
.primary-btn{background:var(--lavender);color:var(--paper)}
.secondary-btn{border:1px solid var(--line);background:var(--paper)}
.button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.song-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.song-card{min-height:126px;padding:14px 10px;text-align:left}
.song-card[aria-pressed="true"]{outline:4px solid var(--lavender);outline-offset:2px}
.song-card strong{display:block;margin-top:26px;font-size:16px;line-height:1.2}
.song-card small{display:block;margin-top:5px;color:var(--muted)}
.song-card .premium-tag{position:absolute;right:9px;top:9px;padding:4px 7px;font-size:10px}
.lyrics{margin:20px auto 0;max-width:680px;display:grid;gap:10px}
.lyric-line{padding:12px 16px;border-radius:18px;color:var(--muted);font-size:clamp(19px,4vw,27px);line-height:1.3;text-align:center;transition:background .25s ease,color .25s ease,transform .25s ease}
.lyric-line.active{color:var(--ink);background:var(--pale-lavender);transform:scale(1.025)}
.action-prompt{margin:20px auto 0;max-width:580px;padding:18px;border-radius:24px;background:var(--sage);text-align:center;font-size:19px;font-weight:700}
.music-note{font-size:64px;line-height:1;color:var(--lavender)}
.color-dot{width:92px;height:92px;border-radius:48% 52% 46% 54% / 54% 46% 54% 46%;background:var(--swatch);box-shadow:inset 8px 8px 18px oklch(0.99 0.006 80 / .2),inset -8px -8px 18px oklch(0.3 0.04 40 / .08)}
.choice-btn .color-dot{width:112px;height:112px}
.letter{font-family:BabySerif,Georgia,serif;font-size:72px;line-height:1}
.letter-card{min-height:190px}.letter-card .word{font-size:20px;font-weight:700}
.picture-svg{width:96px;height:96px}
.word-builder{max-width:680px;margin:20px auto 0;padding:24px;border-radius:var(--radius);background:var(--paper);text-align:center;box-shadow:var(--shadow)}
.word-builder img{width:140px;height:140px;margin:0 auto 8px;object-fit:contain}
.spelling-slots{min-height:74px;display:flex;justify-content:center;gap:9px;margin:18px 0}
.spelling-slot{width:62px;height:66px;display:grid;place-items:center;border:3px dashed var(--line);border-radius:16px;font-family:BabySerif,Georgia,serif;font-size:38px}
.spelling-slot.filled{border-style:solid;background:var(--pale-lavender)}
.letter-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.letter-tile{width:60px;height:60px;border-radius:17px;background:var(--peach);font-family:BabySerif,Georgia,serif;font-size:34px;box-shadow:0 5px 0 oklch(0.76 0.07 55)}
.letter-tile:disabled{opacity:.3;box-shadow:none}
.shape-icon{display:block;width:min(100px,100%);height:auto;aspect-ratio:1;flex:none;justify-self:center;background:var(--shape-color,var(--lavender))}
.shape-circle{border-radius:50%}.shape-square{border-radius:0}.shape-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}
.shape-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%)}
.shape-heart{clip-path:polygon(50% 92%,8% 52%,4% 30%,14% 10%,34% 5%,50% 22%,66% 5%,86% 10%,96% 30%,92% 52%)}
.shape-oval{width:min(82px,100%);aspect-ratio:3/4;border-radius:50%}
.round-prompt{min-height:1.5em;margin:14px 0 0;text-align:center;font-size:20px;font-weight:700}
.premium-hero{background:var(--ink);color:var(--paper)}
.premium-hero p{color:oklch(0.87 0.02 70)}
.premium-hero .eyebrow{color:var(--gold)}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.price-card{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.price-card.featured{background:var(--pale-lavender);border:3px solid var(--lavender)}
.price{font-family:BabySerif,Georgia,serif;font-size:45px;margin:14px 0 4px}
.price-card ul,.feature-list{display:grid;gap:12px;margin-top:18px;list-style:none}
.price-card li,.feature-list li{position:relative;padding-left:25px;line-height:1.45}
.price-card li::before,.feature-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.demo-box{margin-top:24px;padding:24px;border-radius:var(--radius);background:var(--sage);text-align:center}
.demo-box p{max-width:680px;margin:10px auto 0;line-height:1.5}
.report-card{margin-top:22px;padding:24px;border-radius:var(--radius);background:var(--paper)}
.report-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.report-stat{padding:18px 10px;border-radius:20px;background:var(--cream);text-align:center}
.report-stat strong{display:block;font-family:BabySerif,Georgia,serif;font-size:35px}.report-stat small{color:var(--muted)}
.notice{margin-top:18px;padding:14px 18px;border-radius:18px;background:var(--pale-lavender);line-height:1.5;text-align:center}
.site-footer{margin-top:30px;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}
.toast{position:fixed;z-index:80;left:50%;bottom:22px;transform:translateX(-50%);width:calc(100% - 32px);max-width:480px;padding:14px 18px;border-radius:18px;background:var(--ink);color:var(--paper);box-shadow:var(--shadow);text-align:center}
.confetti-piece{position:fixed;z-index:70;left:var(--x);top:42%;width:11px;height:11px;pointer-events:none;background:var(--c);clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);animation:celebrate .9s ease-out forwards}
@keyframes celebrate{to{transform:translate(var(--dx),var(--dy)) rotate(220deg);opacity:0}}
@keyframes softPulse{50%{transform:translateY(-5px) scale(1.025)}}
@media(max-width:760px){
  .page{padding:14px 14px 36px}.topbar{margin-bottom:16px}.brand{font-size:23px}.brand img{width:34px;height:43px}
  .top-actions .btn-text{display:none}.soft-btn{padding:10px 13px}
  .hero{min-height:190px;padding:23px 20px;gap:8px}.hero-art{width:120px;height:140px}.hero-art>img{width:115px;height:135px}
  .hero p{font-size:15px}.app-grid{grid-template-columns:1fr;gap:14px}.app-card{min-height:220px;padding:20px}.app-illustration{height:92px}.app-illustration img{height:90px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.song-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .premium-banner{grid-template-columns:1fr;padding:22px}.premium-banner .soft-btn{width:100%}
  .price-grid{grid-template-columns:1fr}.game-tabs{margin-top:18px}.tab-btn{font-size:14px}
}
@media(max-width:390px){.brand{font-size:20px}.hero h1{font-size:35px}.hero-art{width:100px}.hero-art>img{width:95px}.choice-btn{min-height:145px}.choice-btn .color-dot{width:90px;height:90px}.report-stats{gap:7px}.report-stat{padding:14px 5px}}
@media(min-width:900px){.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.learn-card{min-height:220px}.learn-card img{height:125px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- Дополнения пакета english-games ---- */
.theme-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.theme-chip{position:relative;min-height:46px;padding:9px 15px;border:1px solid var(--line);border-radius:16px;background:var(--paper);font-weight:700;font-size:15px;transition:transform .18s ease,background .18s ease}
.theme-chip:hover{transform:translateY(-2px)}
.theme-chip[aria-pressed="true"]{color:var(--paper);background:var(--green);border-color:var(--green)}
.theme-chip .lock{position:absolute;top:-7px;right:-5px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font-size:11px}
.theme-chip .mini{font-weight:400;font-size:12px;color:var(--muted)}
.theme-chip[aria-pressed="true"] .mini{color:oklch(0.95 0.02 120)}
.flashcard{margin:18px auto 0;max-width:520px;padding:26px 22px 22px;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);text-align:center}
.flashcard img{width:230px;height:230px;margin:0 auto 10px;object-fit:contain;cursor:pointer;transition:transform .18s ease}
.flashcard img:hover{transform:scale(1.04)}
.flashcard .word-en{font-family:BabySerif,Georgia,serif;font-size:44px;line-height:1.1}
.flashcard .word-ru{margin-top:5px;color:var(--muted);font-size:17px}
.flashcard .tap-hint{margin-top:12px;color:var(--muted);font-size:13px}
.card-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.card-nav .icon-btn{font-size:22px}
.card-counter{min-width:86px;text-align:center;color:var(--muted);font-weight:700}
.quiz-hear{margin:16px auto 0;display:flex;justify-content:center}
.quiz-hear .primary-btn{font-size:18px}
.quiz-progress{margin-top:10px;text-align:center;color:var(--muted);font-size:14px;font-weight:700}
.result-box{margin:22px auto 0;max-width:520px;padding:26px;border-radius:var(--radius);background:var(--sage);text-align:center}
.result-box strong{font-family:BabySerif,Georgia,serif;font-size:34px;display:block;margin-bottom:8px}
.letter-strip{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}
.letter-btn{position:relative;width:44px;height:46px;border-radius:14px;background:var(--paper);border:1px solid var(--line);font-family:BabySerif,Georgia,serif;font-size:22px;transition:transform .15s ease}
.letter-btn:hover{transform:translateY(-2px)}
.letter-btn[aria-pressed="true"]{background:var(--lavender);color:var(--paper);border-color:var(--lavender)}
.letter-btn .lock{position:absolute;top:-6px;right:-4px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font-size:9px}
.sound-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.home-task{margin-top:24px;padding:22px;border-radius:var(--radius);background:var(--peach)}
.home-task h3{margin-bottom:8px}
.home-task p{line-height:1.5}
.code-form{margin-top:18px;padding:24px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
.code-form label{display:block;margin-bottom:9px;font-weight:700}
.code-row{display:flex;gap:9px;flex-wrap:wrap}
.code-row input{flex:1;min-width:190px;min-height:54px;padding:12px 16px;border:2px solid var(--line);border-radius:16px;font:inherit;font-size:19px;letter-spacing:.08em;text-transform:uppercase;background:var(--cream)}
.code-row input:focus{outline:none;border-color:var(--lavender)}
.trial-banner{margin-top:18px;padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-radius:var(--radius);background:var(--gold);color:var(--ink)}
.trial-banner p{font-weight:700}
.hub-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;padding:28px 30px;border-radius:40px 46px 36px 48px;background:var(--pale-lavender);overflow:hidden}
.hub-hero img{width:100%;height:230px;object-fit:cover;border-radius:26px}
.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.pay-note{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.5}
.faq{margin-top:26px;display:grid;gap:12px}
.faq details{padding:16px 20px;border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin-top:9px;color:var(--muted);line-height:1.5}
.print-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.print-links a{padding:9px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-weight:700;font-size:14px}
.print-links a:hover{background:var(--blue)}
@media(max-width:760px){
  .hub-hero{grid-template-columns:1fr;padding:22px 20px}.hub-hero img{height:180px}
  .report-grid{grid-template-columns:repeat(2,1fr)}
  .flashcard img{width:190px;height:190px}.flashcard .word-en{font-size:37px}
  .letter-btn{width:40px;height:43px;font-size:19px}
}
 .account-form{display:grid;gap:12px;max-width:520px}.account-form label{display:grid;gap:6px;font-weight:700}.account-form input{width:100%;min-height:44px;padding:10px;border:1px solid #bda98e;border-radius:12px;font:inherit}.account-form .button-row{display:flex;flex-wrap:wrap;gap:8px}