:root {
  color-scheme:light;
  --ink:#294f4b;
  --muted:#6b817d;
  --paper:#fffdf7;
  --line:#ddd5b9;
  --green:#56a77b;
  --green-dark:#347e61;
  --yellow:#f3be4d;
  --coral:#ec776c;
  --purple:#8370ba;
  --shadow:0 18px 42px rgba(43, 72, 65, .11);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  min-width:320px;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  background:
    radial-gradient(circle at 7% 10%, rgba(243,190,77,.18) 0 110px, transparent 111px),
    radial-gradient(circle at 95% 19%, rgba(110,166,213,.13) 0 154px, transparent 155px),
    radial-gradient(circle at 83% 87%, rgba(86,167,123,.11) 0 185px, transparent 186px),
    linear-gradient(90deg, rgba(41,79,75,.045) 1px, transparent 1px),
    linear-gradient(rgba(41,79,75,.045) 1px, transparent 1px),
    #f8f8f1;
  background-size:auto,auto,auto,30px 30px,30px 30px,auto;
  font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;
}
button { font:inherit; }
button:focus-visible { outline:4px solid rgba(243,190,77,.8); outline-offset:4px; }
.app { width:min(1120px,calc(100% - 32px)); min-height:100vh; margin:0 auto; padding:18px 0 48px; }
.loading-card { width:min(430px,100%); margin:25vh auto 0; padding:38px; border:2px solid var(--line); border-radius:32px; background:var(--paper); box-shadow:var(--shadow); font-size:19px; font-weight:900; text-align:center; }
.loading-card span { display:inline-block; margin-right:6px; color:var(--coral); font-family:Georgia,serif; font-size:50px; font-weight:900; transform:translateY(-3px); }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:62px; margin-bottom:22px; }
.brand,.top-button,.back-button,.secondary-button,.hint-button { border:0; color:var(--ink); cursor:pointer; }
.brand { display:flex; align-items:center; gap:11px; padding:0; background:transparent; text-align:left; }
.brand-mark { position:relative; display:grid; place-items:center; width:55px; height:52px; overflow:hidden; border:2px solid #d7cc9f; border-radius:16px; background:#fffdf7; box-shadow:0 6px 14px rgba(54,75,64,.08); }
.brand-mark i { position:absolute; top:-15px; left:12px; color:#ec776c; font-family:Georgia,serif; font-size:49px; font-style:normal; font-weight:900; transform:rotate(-8deg); }
.brand-mark b { position:relative; z-index:1; color:#438b69; font-family:Georgia,serif; font-size:23px; }
.brand-mark em { position:absolute; right:6px; bottom:5px; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:#fff; background:#f0b944; font-size:11px; font-style:normal; font-weight:900; line-height:1; transform:translateY(-1px); }
.brand strong,.brand small,.top-button b,.top-button small { display:block; }
.brand strong { font-size:21px; line-height:1.12; }
.brand small { margin-top:3px; color:var(--muted); font-size:11px; }
.top-actions { display:flex; gap:10px; }
.top-button { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 14px; border:2px solid #ddd3ad; border-radius:16px; background:rgba(255,253,247,.95); box-shadow:0 5px 14px rgba(49,77,67,.06); text-align:left; }
.top-button:hover { box-shadow:0 8px 18px rgba(49,77,67,.11); transform:translateY(-1px); }
.top-button b { font-size:12px; }.top-button small { margin-top:2px; color:var(--muted); font-size:10px; }

.eyebrow { display:block; margin:0 0 9px; color:#438b6d; font-family:Georgia,serif; font-size:12px; font-weight:900; letter-spacing:.16em; line-height:1.35; text-transform:uppercase; }
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; min-height:430px; overflow:hidden; padding:48px 44px; border:2px solid #d9cfaa; border-radius:38px; background:linear-gradient(128deg,rgba(234,250,241,.96),rgba(255,250,236,.96) 55%,rgba(240,239,255,.94)); box-shadow:var(--shadow); }
.hero::before { position:absolute; z-index:-1; top:-95px; right:-70px; width:300px; height:300px; border:45px solid rgba(92,159,202,.12); border-radius:50%; content:""; }.hero::after { position:absolute; z-index:-1; bottom:-110px; left:48%; width:220px; height:220px; border-radius:50%; background:rgba(243,190,77,.1); content:""; }
.hero h1,.section-heading h2,.result-card h1,.dictionary-hero h1 { margin:0; color:var(--ink); font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:-.045em; }
.hero h1 { max-width:610px; font-size:clamp(43px,5vw,64px); line-height:1.01; }.hero-copy > p { max-width:560px; margin:21px 0 27px; color:var(--muted); font-size:17px; font-weight:700; line-height:1.55; }
.primary-button,.secondary-button,.hint-button { min-height:49px; padding:12px 19px; border-radius:15px; font-weight:900; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.primary-button { border:0; color:#fff; background:var(--green-dark); box-shadow:0 9px 20px rgba(52,126,97,.25); cursor:pointer; }.primary-button:hover { box-shadow:0 12px 25px rgba(52,126,97,.3); transform:translateY(-2px); }
.secondary-button,.hint-button { border:2px solid #d9cfaa; background:var(--paper); }.secondary-button:hover,.hint-button:hover:not(:disabled) { background:#fff8e6; transform:translateY(-2px); }.hint-button:disabled { cursor:default; opacity:.72; }

.hero-scene { position:relative; justify-self:end; width:min(100%,410px); height:300px; }.hero-ray { position:absolute; top:4px; left:184px; width:52px; height:210px; background:linear-gradient(180deg,rgba(241,188,71,.63),rgba(241,188,71,0)); clip-path:polygon(36% 0,64% 0,100% 100%,0 100%); transform:rotate(7deg); }
.hero-card { position:absolute; border:3px solid; border-radius:25px; box-shadow:0 18px 30px rgba(45,64,62,.14); }.hero-card--back { right:26px; top:39px; display:flex; gap:7px; padding:30px 28px; border-color:#adcbbd; background:#e6f5ec; transform:rotate(-6deg); }.hero-card--back span { display:grid; place-items:center; width:62px; height:70px; border:2px solid rgba(54,91,88,.16); border-radius:15px; color:#71968a; background:#fffdf7; font-family:Georgia,serif; font-size:24px; font-weight:900; }.hero-card--back span:nth-child(2) { color:#fff; background:#58a87d; box-shadow:0 0 0 7px rgba(88,168,125,.16); }
.hero-card--front { right:9px; bottom:5px; display:grid; justify-items:center; width:275px; padding:23px 25px 20px; border-color:#e3bd64; background:#fffdf7; transform:rotate(2deg); }.hero-card--front small { color:#bb8521; font-family:Georgia,serif; font-size:10px; font-weight:900; letter-spacing:.13em; }.hero-card--front strong { margin-top:6px; font-family:Georgia,serif; font-size:39px; letter-spacing:.08em; }.hero-card--front strong span { text-decoration:underline 3px #e97568; text-underline-offset:8px; }.hero-card--front i { position:absolute; top:-29px; color:#e97568; font-family:Georgia,serif; font-size:74px; font-style:normal; font-weight:900; }.hero-card--front b { margin-top:16px; padding:7px 10px; border-radius:999px; color:#fff; background:#58a87d; font-size:10px; letter-spacing:.08em; }.hero-spark { position:absolute; color:#e9af35; font-size:28px; }.hero-spark--one { top:30px; left:55px; }.hero-spark--two { right:5px; bottom:100px; color:#75a1cc; font-size:21px; }

.section { margin-top:48px; }.section-heading { margin-bottom:18px; }.section-heading--split { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }.section-heading h2 { font-size:clamp(34px,4vw,48px); line-height:1; }.section-heading > p { max-width:390px; margin:0 0 5px; color:var(--muted); font-size:13px; font-weight:800; line-height:1.5; text-align:right; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.steps article { display:grid; grid-template-columns:60px 1fr; align-items:center; min-height:120px; padding:18px; border:2px solid #e1dcc8; border-radius:24px; background:rgba(255,253,247,.95); }.steps article > span,.dictionary-number,.syllable-number { display:grid; place-items:center; border-radius:50%; font-family:Georgia,serif; font-weight:900; line-height:1; }.steps article > span { width:48px; height:48px; padding-bottom:1px; color:#fff; background:var(--green); box-shadow:0 0 0 7px #e3f4ea; font-size:24px; }.steps article:nth-child(2) > span { background:#e7ae39; box-shadow:0 0 0 7px #fff0c8; }.steps article:nth-child(3) > span { background:var(--purple); box-shadow:0 0 0 7px #ece6fa; }.steps strong { display:block; font-size:17px; }.steps p { margin:5px 0 0; color:var(--muted); font-size:12px; font-weight:700; line-height:1.45; }
.levels-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.level-card { position:relative; display:flex; flex-direction:column; min-height:370px; padding:24px; overflow:hidden; border:3px solid color-mix(in srgb,var(--accent) 54%,white); border-radius:30px; color:var(--ink); background:color-mix(in srgb,var(--accent) 14%,#fffdf7); box-shadow:0 13px 28px rgba(49,77,67,.08); text-align:left; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }.level-card::after { position:absolute; top:-45px; right:-40px; width:155px; height:155px; border:24px solid color-mix(in srgb,var(--accent) 17%,transparent); border-radius:50%; content:""; }.level-card:hover { box-shadow:0 18px 36px rgba(49,77,67,.14); transform:translateY(-5px); }.level-card__top { display:flex; align-items:center; justify-content:space-between; }.level-icon { display:grid; place-items:center; width:63px; height:63px; border-radius:19px; background:rgba(255,255,255,.78); font-size:32px; }.age-pill { display:inline-flex; align-items:center; min-height:31px; padding:5px 11px; border-radius:999px; color:color-mix(in srgb,var(--accent,var(--green)) 75%,#244f49); background:rgba(255,255,255,.84); font-size:12px; font-weight:900; }.level-card .eyebrow { margin:23px 0 6px; color:var(--accent); }.level-card > strong { font-size:27px; letter-spacing:-.025em; }.level-description { margin-top:9px; color:var(--muted); font-size:14px; font-weight:700; line-height:1.48; }.word-demo { position:relative; display:flex; gap:6px; margin:20px 0; }.word-demo i,.word-demo b { padding:7px 9px; border-radius:8px; font-size:13px; font-style:normal; }.word-demo i { color:var(--muted); background:rgba(255,255,255,.65); }.word-demo b { color:#fff; background:var(--accent); }.word-demo em { position:absolute; top:-20px; left:49px; color:var(--coral); font-family:Georgia,serif; font-size:36px; font-style:normal; font-weight:900; }.level-card__foot { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 12px; margin-top:auto; padding-top:15px; border-top:1px solid color-mix(in srgb,var(--accent) 27%,transparent); color:var(--muted); font-size:11px; }.level-card__foot b { color:var(--ink); }.level-card__foot .stars { justify-self:end; }.level-card__foot em { grid-column:1/-1; color:var(--accent); font-size:14px; font-style:normal; font-weight:900; }.stars { color:#d59c27; font-size:16px; letter-spacing:.05em; }

.dictionary-preview { padding:30px; border:2px solid #e1dcc8; border-radius:32px; background:rgba(255,255,255,.46); }.dictionary-preview__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }.dictionary-card { position:relative; min-width:0; min-height:245px; padding:12px; border:2px solid #ddd9ca; border-radius:21px; background:rgba(255,253,247,.96); box-shadow:0 8px 18px rgba(49,77,67,.06); text-align:center; }.dictionary-card.is-opened { border-color:color-mix(in srgb,var(--accent) 55%,white); }.dictionary-number { position:absolute; z-index:2; top:9px; left:9px; width:28px; height:28px; padding-bottom:1px; border:2px solid #ddd7c2; background:#fff; color:#766f67; font-size:12px; }.dictionary-picture { position:relative; display:grid; place-items:center; height:118px; margin-bottom:11px; overflow:hidden; border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 17%,#fff),#eef0ee); }.dictionary-picture::after { position:absolute; inset:0; background:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.38)); content:""; }.dictionary-picture span { font-size:47px; filter:grayscale(1); opacity:.27; }.dictionary-card.is-opened .dictionary-picture span { filter:none; opacity:1; }.dictionary-picture i { position:absolute; z-index:1; top:-17px; left:52%; color:#ec776c; font-family:Georgia,serif; font-size:45px; font-style:normal; font-weight:900; opacity:0; }.dictionary-card.is-opened .dictionary-picture i { opacity:1; }.dictionary-card strong { display:-webkit-box; overflow:hidden; font-family:Georgia,serif; font-size:16px; line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.dictionary-card small { display:block; margin-top:7px; color:var(--accent); font-size:9px; font-weight:900; }.dictionary-card--compact { min-height:205px; padding:9px; }.dictionary-card--compact .dictionary-picture { height:90px; }.dictionary-card--compact .dictionary-picture span { font-size:37px; }.dictionary-card--compact .dictionary-picture i { top:-15px; font-size:37px; }.accent-mark { color:#ec776c; font-weight:900; }
.adult-note { display:flex; align-items:center; gap:14px; margin-top:26px; padding:18px 22px; border:2px solid #dcd6bf; border-radius:22px; background:rgba(255,250,232,.88); }.adult-note > span { font-size:30px; }.adult-note b { font-size:14px; }.adult-note p { margin:3px 0 0; color:var(--muted); font-size:12px; font-weight:700; }

.game-toolbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; margin-bottom:12px; }.back-button { justify-self:start; padding:10px 0; background:transparent; color:var(--muted); font-size:12px; font-weight:900; }.back-button:hover { color:var(--ink); }.game-toolbar > div { text-align:center; }.game-toolbar > div span { display:block; font-size:13px; font-weight:800; }.game-toolbar > div strong { display:block; margin-top:2px; color:var(--accent); font-size:11px; }.game-toolbar > .age-pill { justify-self:end; border:2px solid #e0dcc9; }.progress-track { height:9px; overflow:hidden; margin-bottom:18px; border-radius:999px; background:#e9e7dc; }.progress-track span { display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .3s ease; }
.game-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr); gap:20px; align-items:stretch; }.rescue-card,.guide-card { min-width:0; min-height:590px; border:2px solid #ded8bc; border-radius:32px; box-shadow:var(--shadow); }.rescue-card { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:35px 38px; background:linear-gradient(145deg,#fffdf7 42%,color-mix(in srgb,var(--accent) 11%,#fffdf7)); }.rescue-card::before { position:absolute; top:-62px; right:-49px; width:220px; height:220px; border:34px solid color-mix(in srgb,var(--accent) 13%,transparent); border-radius:50%; content:""; }.rescue-card::after { position:absolute; bottom:-65px; left:-40px; width:180px; height:180px; border-radius:50%; background:color-mix(in srgb,var(--accent) 8%,transparent); content:""; }.rescue-card__top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--muted); font-size:12px; font-weight:900; }.task-number { padding:8px 11px; border-radius:9px; color:#fff; background:var(--accent); font-family:Georgia,serif; font-size:11px; letter-spacing:.12em; }.context { position:relative; z-index:1; max-width:430px; margin:52px auto 24px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(21px,2.4vw,29px); font-weight:600; line-height:1.36; text-align:center; }.word-shield { position:relative; z-index:1; width:min(100%,500px); margin:auto auto 0; padding:26px 22px 24px; border:2px dashed color-mix(in srgb,var(--accent) 54%,white); border-radius:28px; background:rgba(255,255,255,.72); box-shadow:0 10px 22px rgba(49,77,67,.05); }.word-shield__caption { display:block; margin-bottom:18px; color:var(--accent); font-family:Georgia,serif; font-size:11px; font-weight:900; letter-spacing:.13em; text-align:center; }.syllables { display:grid; grid-template-columns:repeat(var(--count),minmax(0,1fr)); gap:9px; }.syllable-button { position:relative; display:grid; grid-template-columns:25px 1fr 17px; align-items:center; gap:4px; min-width:0; min-height:74px; padding:10px 9px; border:2px solid #dcd7c8; border-radius:17px; color:var(--ink); background:#fff; cursor:pointer; transition:transform .16s ease,border .16s ease,box-shadow .16s ease,opacity .16s ease; }.syllable-button:hover:not(:disabled) { border-color:var(--accent); box-shadow:0 7px 15px rgba(49,77,67,.09); transform:translateY(-3px); }.syllable-button:disabled { cursor:default; }.syllable-number { width:22px; height:22px; padding-bottom:1px; color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,white); font-size:11px; }.syllable-button strong { overflow:hidden; font-family:Georgia,serif; font-size:clamp(18px,2.6vw,27px); letter-spacing:.02em; text-overflow:ellipsis; white-space:nowrap; text-align:center; }.syllable-button i { color:#a9b6af; font-family:Georgia,serif; font-size:20px; font-style:normal; font-weight:900; text-align:center; }.syllable-button.is-wrong { border-color:#e7b3ac; background:#fff1ef; color:#a55e55; opacity:.5; }.syllable-button.is-wrong i { color:#d37268; }.syllable-button.is-correct { border-color:#62b486; background:#effbf3; box-shadow:0 0 0 5px rgba(98,180,134,.14); }.syllable-button.is-correct .syllable-number { color:#fff; background:#56a77b; }.syllable-button.is-correct i { color:#e66f65; font-size:31px; transform:translateY(-8px); }.word-line { display:flex; align-items:center; gap:8px; margin-top:20px; color:var(--muted); font-size:9px; font-weight:800; text-align:center; }.word-line span { height:1px; flex:1; background:#ded9c8; }.word-line b { font-weight:800; }.word-spell { position:relative; z-index:1; min-height:31px; margin-top:25px; color:var(--muted); font-size:13px; font-weight:800; text-align:center; }.word-spell.is-visible { color:#377d5d; }.word-spell strong { padding-left:3px; font-family:Georgia,serif; font-size:24px; letter-spacing:.05em; }
.guide-card { display:flex; flex-direction:column; padding:32px; background:linear-gradient(155deg,#fffdf8 40%,color-mix(in srgb,var(--accent) 8%,#fffdf8)); }.guide-card .eyebrow { color:var(--accent); }.guide-card h1 { margin:0 0 16px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(24px,2.7vw,32px); line-height:1.22; letter-spacing:-.02em; }.ear-note { display:grid; grid-template-columns:43px 1fr; gap:10px; align-items:center; padding:13px; border:2px solid #e2dece; border-radius:18px; background:rgba(255,255,255,.64); }.ear-note span { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; background:color-mix(in srgb,var(--accent) 15%,white); font-size:22px; }.ear-note p { margin:0; color:var(--muted); font-size:12px; font-weight:800; line-height:1.45; }.feedback { display:grid; grid-template-columns:32px 1fr; align-items:center; min-height:76px; margin-top:16px; padding:12px 14px; border:2px solid; border-radius:17px; }.feedback > span { font-size:21px; }.feedback p { margin:0; font-size:11px; font-weight:800; line-height:1.45; }.feedback--neutral { border-color:#e2dece; background:#faf9f3; color:var(--muted); }.feedback--wrong { border-color:#f1b2aa; background:#fff0ed; color:#98514a; }.feedback--hint { border-color:#e8c768; background:#fff8dc; color:#85671d; }.feedback--success { border-color:#92cbaa; background:#ecfbf2; color:#347858; }.game-actions { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:14px; }.game-actions > * { flex:1 1 0; }.keyboard-note { margin:12px 0 0; color:#87938f; font-size:10px; font-weight:700; text-align:center; }kbd { display:inline-grid; place-items:center; min-width:20px; height:20px; padding-bottom:1px; border:1px solid #d4cfbd; border-radius:5px; background:#fff; box-shadow:0 2px 0 #d4cfbd; font-family:inherit; font-size:10px; }
.result-card { position:relative; width:min(760px,100%); margin:68px auto 0; padding:54px 50px; overflow:hidden; border:3px solid color-mix(in srgb,var(--accent) 48%,white); border-radius:38px; background:linear-gradient(145deg,#fffdf7,color-mix(in srgb,var(--accent) 12%,white)); box-shadow:var(--shadow); text-align:center; }.result-card::before,.result-card::after { position:absolute; width:150px; height:150px; border:25px solid color-mix(in srgb,var(--accent) 16%,transparent); border-radius:50%; content:""; }.result-card::before { top:-75px; left:-75px; }.result-card::after { right:-75px; bottom:-75px; }.result-icon { display:grid; place-items:center; width:96px; height:96px; margin:0 auto 23px; padding-bottom:19px; border-radius:28px; color:#ec776c; background:#fff; box-shadow:0 12px 27px rgba(49,77,67,.12); font-family:Georgia,serif; font-size:82px; font-weight:900; transform:rotate(-3deg); }.result-card .eyebrow { color:var(--accent); }.result-card h1 { font-size:clamp(38px,6vw,57px); }.result-card > p { max-width:570px; margin:17px auto 0; color:var(--muted); font-size:16px; font-weight:700; line-height:1.55; }.result-stars { margin:24px 0; color:#dfa835; font-size:47px; letter-spacing:.12em; }.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:28px; }.result-stats div { padding:15px; border:2px solid rgba(218,211,187,.82); border-radius:18px; background:rgba(255,255,255,.66); }.result-stats strong,.result-stats span { display:block; }.result-stats strong { font-size:26px; }.result-stats span { margin-top:3px; color:var(--muted); font-size:10px; font-weight:800; }.result-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.dictionary-hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; margin-bottom:30px; padding:30px 34px; border:2px solid #dcd5b8; border-radius:30px; background:linear-gradient(120deg,#f0fff6,#fff9ed 55%,#f4efff); box-shadow:var(--shadow); }.dictionary-hero .back-button { align-self:start; }.dictionary-hero .eyebrow { margin-bottom:5px; }.dictionary-hero h1 { font-size:clamp(35px,5vw,52px); }.dictionary-hero p { margin:10px 0 0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.5; }.dictionary-meter { display:grid; place-items:center; width:100px; height:100px; border-radius:50%; background:conic-gradient(var(--green) var(--progress),#e4e1d5 0); }.dictionary-meter span { display:grid; place-items:center; width:75px; height:75px; border-radius:50%; background:#fffdf7; font-size:18px; font-weight:900; }.dictionary-group { margin-top:28px; }.dictionary-group__heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0 5px; }.dictionary-group__heading > div { display:flex; align-items:center; gap:9px; }.dictionary-group__heading span { font-size:26px; }.dictionary-group__heading h2 { margin:0; font-size:28px; letter-spacing:-.03em; }.dictionary-group__heading strong { padding:7px 11px; border-radius:999px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,white); font-size:12px; }.dictionary-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.dictionary-grid .dictionary-card { min-height:280px; }.dictionary-grid .dictionary-picture { height:135px; }

@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:25px; padding:40px; }.hero-scene { justify-self:center; }.steps,.levels-grid { grid-template-columns:1fr; }.level-card { min-height:300px; }.dictionary-preview__grid { grid-template-columns:repeat(3,1fr); }.game-layout { grid-template-columns:1fr; }.rescue-card,.guide-card { min-height:auto; }.guide-card { min-height:420px; }.dictionary-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:650px) { .app { width:min(100% - 20px,1120px); padding-top:10px; }.topbar { align-items:flex-start; }.brand-mark { width:46px; height:44px; }.brand-mark i { top:-16px; left:10px; font-size:43px; }.brand-mark b { font-size:19px; }.brand strong { font-size:16px; }.brand small { display:none; }.top-actions { gap:6px; }.top-button { min-width:44px; min-height:44px; justify-content:center; padding:7px; }.top-button > span:last-child { display:none; }.hero { min-height:0; padding:34px 22px; border-radius:28px; }.hero h1 { font-size:38px; }.hero-copy > p { font-size:15px; }.hero-scene { width:100%; height:260px; transform:scale(.88); transform-origin:center; }.section { margin-top:38px; }.section-heading--split { flex-direction:column; align-items:flex-start; gap:10px; }.section-heading h2 { font-size:35px; }.section-heading > p { text-align:left; }.steps article { grid-template-columns:54px 1fr; }.level-card { min-height:340px; padding:21px; }.dictionary-preview { padding:20px 14px; }.dictionary-preview__grid { grid-template-columns:repeat(2,1fr); }.adult-note { align-items:flex-start; }.game-toolbar { grid-template-columns:auto 1fr auto; gap:8px; }.game-toolbar .back-button { width:34px; overflow:hidden; font-size:0; white-space:nowrap; }.game-toolbar .back-button::after { font-size:20px; content:"←"; }.game-toolbar > .age-pill { padding:4px 8px; font-size:10px; }.rescue-card { padding:25px 18px; border-radius:25px; }.rescue-card__top { align-items:flex-start; flex-direction:column; gap:7px; }.context { margin:35px auto 19px; font-size:24px; }.word-shield { padding:21px 12px; }.syllables { gap:6px; }.syllable-button { grid-template-columns:20px 1fr 13px; min-height:68px; padding:8px 6px; }.syllable-number { width:19px; height:19px; font-size:9px; }.syllable-button strong { font-size:20px; }.syllable-button i { font-size:15px; }.syllable-button.is-correct i { font-size:25px; }.word-line b { font-size:8px; }.guide-card { min-height:0; padding:25px 18px; border-radius:25px; }.guide-card h1 { font-size:26px; }.game-actions { align-items:stretch; flex-direction:column; }.keyboard-note { display:none; }.result-card { margin-top:30px; padding:40px 20px; border-radius:30px; }.result-stars { font-size:38px; }.result-stats { grid-template-columns:1fr; }.result-actions { flex-direction:column; }.dictionary-hero { grid-template-columns:1fr auto; gap:16px; padding:24px 20px; }.dictionary-hero .back-button { grid-column:1/-1; }.dictionary-meter { width:76px; height:76px; }.dictionary-meter span { width:57px; height:57px; font-size:14px; }.dictionary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dictionary-grid .dictionary-card { min-height:255px; }.dictionary-grid .dictionary-picture { height:112px; } }
@media (max-width:380px) { .hero h1 { font-size:34px; }.dictionary-preview__grid,.dictionary-grid { grid-template-columns:1fr; }.syllable-button strong { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }