:root { --ink:#294f4b; --muted:#6c827d; --paper:#fffdf7; --line:#ded6b9; --green:#3d9d75; --gold:#f2bd46; --coral:#e9796a; --blue:#63aacf; --shadow:0 22px 45px rgba(51,79,67,.11); --soft-shadow:0 10px 21px rgba(51,79,67,.08); color:var(--ink); font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; } html,body { min-width:320px; overflow-x:hidden; } body { min-height:100vh; margin:0; background:radial-gradient(circle at 5% 9%,rgba(249,213,105,.28) 0 104px,transparent 105px),radial-gradient(circle at 97% 24%,rgba(119,188,214,.18) 0 150px,transparent 151px),radial-gradient(circle at 76% 96%,rgba(204,177,236,.17) 0 138px,transparent 139px),linear-gradient(125deg,#fbf9ed,#f5faf4 52%,#fff8ef); } body::before { content:""; position:fixed; z-index:-1; inset:0; opacity:.19; background-image:radial-gradient(#88ab9d 1px,transparent 1.2px); background-size:20px 20px; pointer-events:none; } button { font:inherit; } button:not(:disabled) { cursor:pointer; } button:focus-visible { outline:4px solid rgba(241,184,62,.62); outline-offset:4px; } h1,h2,h3,p { margin:0; }
.app { width:min(1120px,calc(100% - 32px)); min-height:100vh; margin:0 auto; }.page { padding:21px 0 63px; }.loading-card { width:min(430px,100%); margin:18vh auto; padding:40px 25px; border:3px solid var(--line); border-radius:30px; background:var(--paper); box-shadow:var(--shadow); color:var(--ink); font-size:20px; font-weight:900; text-align:center; }.loading-card span { margin-right:8px; color:var(--coral); font-size:32px; }

.topbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:24px; }.brand,.collection-button,.sound-button { color:var(--ink); border:0; background:transparent; }.brand { min-width:0; display:flex; align-items:center; gap:11px; padding:0; text-align:left; }.brand-mark { width:58px; height:52px; display:flex; align-items:center; justify-content:center; padding:5px; border:2px solid #d9c573; border-radius:16px; background:#fff9db; box-shadow:0 6px 12px rgba(63,80,64,.1); transform:rotate(-3deg); }.brand-mark i,.brand-mark b { display:grid; width:26px; height:32px; place-items:center; border-radius:8px; color:#fff; font-family:Georgia,serif; font-size:12px; font-style:normal; font-weight:800; }.brand-mark i { z-index:1; background:var(--coral); transform:rotate(-3deg); }.brand-mark b { margin-left:-5px; background:var(--blue); transform:rotate(5deg); }.brand strong { display:block; overflow:hidden; max-width:300px; font-size:24px; font-weight:1000; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }.brand small { display:block; margin-top:2px; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }.top-actions { display:flex; align-items:center; gap:9px; }.collection-button,.sound-button { min-height:47px; display:flex; align-items:center; gap:8px; padding:7px 12px; border:2px solid #d9e6d9; border-radius:15px; background:rgba(255,254,249,.84); box-shadow:0 5px 14px rgba(49,74,63,.06); font-size:12px; font-weight:900; }.collection-button>span:first-child,.sound-button>span:first-child { font-size:20px; }.collection-button>span:last-child { line-height:1.05; text-align:left; }.collection-button small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.sound-button { color:#658179; }.sound-button.is-on { color:#287557; border-color:#99cfad; background:#eff9f0; }

.eyebrow { display:block; color:#43836b; font-family:Georgia,serif; font-size:12px; font-weight:800; letter-spacing:1.45px; }.hero { position:relative; min-height:405px; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(365px,.97fr); align-items:center; gap:17px; overflow:hidden; padding:50px 52px; border:2px solid #d9e8d8; border-radius:37px; background:linear-gradient(120deg,#fefbf0,#ecf8ed 54%,#f3efff); box-shadow:var(--shadow); }.hero::before { content:""; position:absolute; top:-99px; left:44%; width:245px; height:245px; border-radius:50%; background:rgba(246,197,76,.19); }.hero::after { content:""; position:absolute; right:-93px; bottom:-114px; width:270px; height:270px; border:24px solid rgba(98,170,207,.13); border-radius:50%; }.hero-copy { position:relative; z-index:2; }.hero h1 { max-width:550px; margin:13px 0 12px; font-size:clamp(43px,5.15vw,59px); font-weight:1000; line-height:.98; letter-spacing:-2.4px; }.hero-copy>p:not(.eyebrow) { max-width:500px; color:var(--muted); font-size:17px; font-weight:700; line-height:1.5; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:27px; }.hero-actions small { color:#69837b; font-size:12px; font-weight:900; }.primary-button,.secondary-button { min-height:49px; padding:12px 19px; border-radius:15px; font-size:14px; font-weight:1000; transition:transform .16s ease,box-shadow .16s ease; }.primary-button { color:#fff; border:0; background:var(--green); box-shadow:0 8px 0 #287353,0 15px 22px rgba(38,115,78,.2); }.primary-button span { margin-left:7px; font-size:18px; }.primary-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 0 #287353,0 18px 24px rgba(38,115,78,.2); }.primary-button:active:not(:disabled) { transform:translateY(6px); box-shadow:0 3px 0 #287353; }.secondary-button { color:#317258; border:2px solid #9cd0af; background:#f9fff8; box-shadow:0 5px 0 #d1e8d6; }.secondary-button:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 #d1e8d6; }
.hero-notebook { position:relative; z-index:2; width:360px; height:285px; margin:0 auto; transform:rotate(2.5deg); }.notebook-back,.notebook-paper { position:absolute; width:247px; height:257px; border-radius:20px; box-shadow:0 17px 24px rgba(50,69,61,.18); }.notebook-back { top:12px; left:83px; background:#f4cf68; transform:rotate(8deg); }.notebook-paper { z-index:2; top:1px; left:52px; padding:28px 24px; border:5px solid #fffef7; background:linear-gradient(to right,#fffdf8 0 31px,#fde2dd 32px 34px,#fffdf8 35px); }.notebook-paper::after { content:""; position:absolute; inset:65px 19px 21px 38px; background:repeating-linear-gradient(to bottom,transparent 0 34px,#d7ebdc 35px 37px); }.notebook-paper>span,.notebook-paper>div,.notebook-paper>b { position:relative; z-index:1; }.notebook-paper>span { color:#d27f5d; font-family:Georgia,serif; font-size:11px; font-weight:800; letter-spacing:1.5px; }.notebook-paper>div { display:flex; justify-content:space-around; margin-top:24px; }.notebook-paper>b { display:block; margin:25px 0 0 7px; color:#5b9471; font-size:13px; transform:rotate(-3deg); }.hero-notebook .rule-tile { width:49px; min-height:70px; padding:7px 2px; border-radius:11px; box-shadow:0 5px 8px rgba(57,75,64,.09); }.hero-notebook .rule-tile b { font-size:17px; }.hero-notebook .rule-tile span { font-size:7px; }.hero-notebook .rule-tile i { display:none; }.hero-pencil { position:absolute; z-index:4; right:4px; bottom:19px; width:179px; height:28px; border-radius:10px 2px 2px 10px; background:linear-gradient(to right,#e57b68 0 15%,#f1ba43 15% 85%,#c98634 85% 91%,#f2d7a3 91%); box-shadow:0 5px 9px rgba(57,71,62,.16); transform:rotate(-43deg); }.hero-pencil::after { content:""; position:absolute; right:-19px; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:19px solid #f2d7a3; }.spark { position:absolute; z-index:5; font-style:normal; color:#e5ad31; }.spark.one { top:30px; left:14px; font-size:32px; }.spark.two { top:24px; right:2px; color:#62b485; font-size:22px; }

.how,.rules-section,.levels { margin-top:48px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }.section-heading h2 { margin-top:7px; font-size:clamp(31px,4vw,44px); line-height:1.05; letter-spacing:-1.4px; }.section-heading>p { max-width:370px; color:#6e8881; font-size:13px; font-weight:800; line-height:1.4; text-align:right; }.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:20px; }.step-card { min-height:132px; display:grid; grid-template-columns:46px 39px 1fr; align-items:center; gap:12px; padding:18px; border:2px solid #e0d9c4; border-radius:22px; background:rgba(255,254,249,.9); box-shadow:var(--soft-shadow); }.step-number { display:grid; width:43px; height:43px; place-items:center; padding-bottom:1px; border:3px solid var(--step); border-radius:50%; color:var(--step); font-family:Georgia,serif; font-size:25px; font-weight:800; line-height:1; }.step-icon { display:grid; width:37px; height:37px; place-items:center; border-radius:12px; background:#f0f7f0; font-size:20px; }.step-card h3 { font-size:17px; line-height:1.12; }.step-card p { margin-top:6px; color:#748a83; font-size:12px; font-weight:700; line-height:1.33; }.rules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:20px; }.rule-tile { position:relative; min-height:126px; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; padding:17px; border:2px solid #e5dbc1; border-radius:22px; background:#fffdf6; text-align:center; box-shadow:var(--soft-shadow); }.rule-tile::before { content:""; position:absolute; top:-38px; right:-27px; width:104px; height:104px; border-radius:50%; background:rgba(255,255,255,.62); }.rule-tile b,.rule-tile span,.rule-tile i { position:relative; z-index:1; }.rule-tile b { color:#344f4d; font-family:Georgia,serif; font-size:31px; letter-spacing:1px; white-space:nowrap; }.rule-tile b em { color:var(--coral); font-style:normal; }.rule-tile span { margin-top:7px; color:#647e76; font-size:12px; font-weight:800; }.rule-tile i { position:absolute; right:14px; bottom:12px; display:grid; width:25px; height:25px; place-items:center; padding-bottom:1px; border-radius:50%; color:#fff; background:var(--green); font-style:normal; font-weight:900; }.rule-tile.gold b em { color:#d59520; }.rule-tile.blue b em { color:#4e92bb; }.levels-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }.level-card { min-height:266px; position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; overflow:hidden; padding:22px; border:3px solid color-mix(in srgb,var(--accent) 55%,white); border-radius:25px; color:var(--ink); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,white),#fffdf7 65%); text-align:left; box-shadow:var(--soft-shadow); transition:transform .16s ease,box-shadow .16s ease; }.level-card::after { content:""; position:absolute; right:-36px; bottom:-46px; width:136px; height:136px; border:17px solid color-mix(in srgb,var(--accent) 15%,white); border-radius:50%; }.level-card:hover { transform:translateY(-4px); box-shadow:0 16px 27px rgba(45,73,60,.13); }.level-top,.level-footer { position:relative; z-index:1; display:flex; width:100%; align-items:center; justify-content:space-between; }.level-icon { font-size:34px; }.age-pill { padding:6px 9px; border-radius:12px; color:var(--accent); background:rgba(255,255,255,.7); font-size:11px; font-weight:900; }.level-index { position:relative; z-index:1; margin-top:16px; color:var(--accent); font-family:Georgia,serif; font-size:11px; font-weight:800; letter-spacing:1.3px; }.level-card>strong { position:relative; z-index:1; margin-top:7px; font-size:26px; letter-spacing:-.5px; }.level-rule { position:relative; z-index:1; margin-top:8px; color:var(--accent); font-size:14px; font-weight:1000; }.level-copy { position:relative; z-index:1; margin-top:8px; color:#6b857e; font-size:12px; font-weight:700; line-height:1.37; }.level-footer { margin-top:auto; padding-top:12px; color:#618077; font-size:12px; font-weight:900; }.stars { color:#e6b440; font-size:15px; letter-spacing:1px; }

.game-page { padding-bottom:50px; }.game-head { min-height:49px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:12px; }.back-link,.text-button { padding:5px 0; border:0; color:#558278; background:transparent; font-size:13px; font-weight:900; text-align:left; }.back-link:hover,.text-button:hover { text-decoration:underline; }.game-head>div { text-align:center; }.game-head>div span { display:block; font-size:17px; font-weight:1000; }.game-head>div small { display:block; margin-top:3px; color:#79918a; font-size:10px; font-weight:800; }.hint-button { justify-self:end; min-height:42px; padding:8px 12px; border:2px solid #eac66b; border-radius:13px; color:#8f6c1e; background:#fff8dc; font-size:12px; font-weight:900; }.hint-button:disabled { opacity:.45; cursor:default; }.progress-line { height:9px; overflow:hidden; border-radius:8px; background:#e1ece0; }.progress-line span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#65ba89,#eac44e); transition:width .25s ease; }.game-grid { display:grid; grid-template-columns:minmax(246px,.73fr) minmax(0,1.27fr); gap:21px; margin-top:22px; }.rule-card,.answer-card { border:2px solid #dce5d8; border-radius:29px; background:rgba(255,254,249,.95); box-shadow:var(--shadow); }.rule-card { min-height:498px; display:flex; flex-direction:column; align-items:center; padding:29px; text-align:center; background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,white),#fffdf8 57%); }.rule-big { margin:29px 0 11px; padding:13px 18px; border:3px dashed color-mix(in srgb,var(--accent) 65%,white); border-radius:18px; color:var(--accent); background:rgba(255,255,255,.67); font-family:Georgia,serif; font-size:34px; font-weight:800; }.rule-card p { color:#668078; font-size:15px; font-weight:800; line-height:1.45; }.rule-picture { display:grid; width:164px; height:164px; place-items:center; margin:25px 0 20px; border:9px solid rgba(255,255,255,.78); border-radius:50%; background:color-mix(in srgb,var(--accent) 19%,white); box-shadow:0 10px 18px rgba(48,73,62,.12); font-size:83px; }.rule-card>small { width:100%; margin-top:auto; padding:11px; border-radius:13px; color:#668178; background:rgba(255,255,255,.67); font-size:12px; font-weight:800; }.rule-card>small b { color:#3d725d; }.answer-card { min-height:498px; padding:36px 43px; }.answer-card h1 { max-width:620px; margin:8px 0 25px; font-size:clamp(30px,3.6vw,42px); line-height:1.08; letter-spacing:-1.25px; }.word-area { min-height:108px; display:flex; align-items:center; justify-content:center; overflow-x:auto; padding:17px 22px; border:2px dashed #cadbcf; border-radius:21px; background:#f5fbf4; }.word-mask { display:inline-flex; align-items:baseline; color:#2c5d53; font-family:Georgia,serif; font-size:45px; font-weight:800; letter-spacing:1px; white-space:nowrap; }.word-mask.medium { font-size:38px; }.word-mask.long { font-size:31px; letter-spacing:.4px; }.missing { display:inline-grid; min-width:44px; height:50px; place-items:center; margin:0 3px; border-bottom:5px solid #e49348; color:#d27c35; background:rgba(255,223,123,.19); line-height:1; }.missing.filled { border:0; border-radius:10px; color:#257757; background:#d9f1df; }.choose-copy { margin:25px 0 12px; color:#608078; font-size:14px; font-weight:900; }.choices { display:flex; flex-wrap:wrap; gap:13px; }.pair-choice { position:relative; display:grid; width:128px; height:77px; place-items:center; border:3px solid #cce1d2; border-radius:19px; color:#2f715a; background:#fff; box-shadow:0 6px 12px rgba(45,73,60,.07); transition:transform .16s ease,background .16s ease; }.pair-choice strong { font-family:Georgia,serif; font-size:31px; letter-spacing:1px; }.pair-choice small { position:absolute; right:8px; bottom:5px; color:#9cb2a6; font-size:10px; font-weight:900; }.pair-choice:hover:not(:disabled) { border-color:#76bd92; background:#effaf0; transform:translateY(-3px); }.pair-choice.is-wrong { border-color:#efaaa1; color:#ba635d; background:#fff0ed; opacity:.78; }.pair-choice.is-good { border-color:#5db587; color:#247756; background:#e5f7e9; }.pair-choice.is-hint { border-color:#e5b43e; color:#a47720; background:#fff8d9; box-shadow:0 0 0 5px rgba(235,196,75,.16); }.feedback { min-height:74px; display:flex; align-items:flex-start; gap:10px; margin-top:22px; padding:13px 15px; border-radius:16px; font-size:13px; line-height:1.35; }.feedback>b { display:grid; width:29px; height:29px; flex:0 0 auto; place-items:center; border-radius:50%; font-size:16px; }.feedback strong { font-size:14px; }.feedback p { margin-top:2px; font-weight:700; }.feedback.good { color:#287555; background:#e7f6e9; }.feedback.good>b { color:#fff; background:#4bae76; }.feedback.hint { color:#8c6b21; background:#fff8dc; }.feedback.hint>b { background:#f5dd7e; }.feedback.try { color:#a05853; background:#fff0ed; }.feedback.try>b { color:#fff; background:#e9867e; }.feedback.quiet { color:#647f76; background:#f0f7f0; }.feedback.quiet>b { color:#4b9270; background:#ddecdf; }.game-actions { min-height:49px; display:flex; align-items:end; justify-content:flex-end; margin-top:17px; }.game-actions .text-button { color:#a17b26; }

.result { position:relative; max-width:815px; overflow:hidden; margin:43px auto 0; padding:53px 42px 45px; border:3px solid color-mix(in srgb,var(--accent) 50%,white); border-radius:35px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 15%,white),#fffdf8 62%); box-shadow:var(--shadow); text-align:center; }.result::before { content:""; position:absolute; bottom:-112px; left:-82px; width:250px; height:250px; border:20px solid color-mix(in srgb,var(--accent) 14%,white); border-radius:50%; }.result>* { position:relative; z-index:1; }.result-confetti { position:absolute; top:23px; right:52px; color:#e4b23f; font-size:23px; font-style:normal; letter-spacing:12px; transform:rotate(12deg); }.result-icon { display:grid; width:96px; height:96px; place-items:center; margin:0 auto 15px; border:9px solid rgba(255,255,255,.78); border-radius:50%; background:color-mix(in srgb,var(--accent) 20%,white); font-size:47px; }.result h1 { margin:9px 0 9px; font-size:clamp(35px,5vw,51px); line-height:1.05; letter-spacing:-1.5px; }.result-stars { color:#e4b13c; font-size:42px; letter-spacing:7px; }.result>p { max-width:580px; margin:14px auto; color:#667f77; font-size:15px; font-weight:700; line-height:1.47; }.stats { display:flex; justify-content:center; gap:12px; margin:21px auto; }.stats span { display:flex; flex-direction:column; min-width:145px; padding:11px; border-radius:15px; color:#638078; background:rgba(255,255,255,.63); font-size:12px; font-weight:800; }.stats b { color:#2c6a55; font-size:24px; }.stats small { margin-top:2px; color:#7d948b; font-size:10px; }.result-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }.result-actions .text-button { padding:13px; }

.collection-hero { min-height:229px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:35px 50px; border:2px solid #e0e4d3; border-radius:30px; background:linear-gradient(120deg,#fffbea,#edf8ef 68%,#eef7ff); box-shadow:var(--soft-shadow); }.collection-hero .back-link { display:block; margin-bottom:20px; }.collection-hero h1 { margin:9px 0; font-size:clamp(34px,4.6vw,52px); letter-spacing:-1.5px; }.collection-hero p { max-width:600px; color:#678078; font-size:15px; font-weight:700; line-height:1.45; }.book-mark { position:relative; display:grid; width:148px; height:148px; flex:0 0 auto; place-items:center; border:10px solid rgba(255,255,255,.78); border-radius:50%; background:#d9eedc; box-shadow:0 11px 18px rgba(47,77,64,.1); font-size:68px; }.book-mark b { position:absolute; right:-8px; bottom:7px; display:grid; width:47px; height:47px; place-items:center; border:4px solid #fffdf7; border-radius:50%; color:#fff; background:#49a173; font-size:14px; }.notebook { margin-top:37px; }.notebook-group+.notebook-group { margin-top:43px; }.notebook-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px; }.notebook-heading h2 { margin-top:5px; font-size:29px; letter-spacing:-.7px; }.notebook-heading>b { color:#678178; font-size:13px; }.notebook-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }.notebook-card { position:relative; min-height:191px; display:flex; flex-direction:column; align-items:center; overflow:hidden; padding:14px 11px; border:2px solid #e2e0d6; border-radius:20px; background:#f9f8f3; text-align:center; }.notebook-card.opened { border-color:color-mix(in srgb,var(--accent) 52%,white); background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 11%,white),#fffdf8 70%); box-shadow:0 7px 14px rgba(47,75,61,.06); }.card-number { position:absolute; top:9px; left:9px; display:grid; width:28px; height:28px; place-items:center; padding-bottom:1px; border:2px solid #d8d7ca; border-radius:50%; color:#77817d; background:#fffefa; font-family:Georgia,serif; font-size:14px; font-weight:800; line-height:1; }.card-emoji { display:grid; height:80px; place-items:center; color:#aeb8b1; filter:grayscale(1); opacity:.55; font-size:44px; }.opened .card-emoji { filter:none; opacity:1; }.notebook-card strong { min-height:27px; color:#98a29b; font-family:Georgia,serif; font-size:18px; }.opened strong { color:#2c6253; }.notebook-card mark { padding:1px 2px; border-radius:4px; color:#c66e36; background:#ffe08d; }.notebook-card small { min-height:29px; margin-top:5px; color:#9ea9a2; font-size:10px; font-weight:800; line-height:1.28; }.opened small { color:#588573; }

@media (max-width:900px) { .hero { grid-template-columns:1fr .8fr; padding:42px 34px; }.hero h1 { font-size:45px; }.hero-notebook { transform:scale(.83) rotate(2.5deg); transform-origin:center; margin-left:-22px; }.section-heading>p { max-width:290px; }.steps-grid { grid-template-columns:1fr; }.step-card { min-height:104px; }.levels-grid { grid-template-columns:repeat(2,1fr); }.game-grid { grid-template-columns:1fr; }.rule-card { min-height:0; display:grid; grid-template-columns:auto 135px 1fr; align-items:center; gap:18px; text-align:left; }.rule-card>.eyebrow { grid-column:1/-1; }.rule-big { margin:0; }.rule-picture { width:124px; height:124px; margin:0; font-size:65px; }.rule-card>small { margin-top:0; grid-column:1/-1; }.answer-card { min-height:0; }.notebook-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:650px) { .app { width:min(1120px,calc(100% - 20px)); }.page { padding:12px 0 45px; }.topbar { align-items:flex-start; margin-bottom:19px; }.brand-mark { width:44px; height:43px; padding:4px; border-radius:13px; }.brand-mark i,.brand-mark b { width:20px; height:25px; border-radius:6px; font-size:9px; }.brand strong { max-width:176px; font-size:18px; }.brand small { font-size:9px; }.top-actions { gap:6px; }.collection-button,.sound-button { min-height:42px; padding:7px 9px; border-radius:12px; font-size:0; }.collection-button small { display:none; }.collection-button>span:first-child,.sound-button>span:first-child { font-size:18px; }.hero { display:block; min-height:0; padding:34px 25px 18px; border-radius:27px; }.eyebrow { font-size:10px; letter-spacing:1.05px; }.hero h1 { margin-top:8px; font-size:38px; letter-spacing:-1.25px; }.hero-copy>p:not(.eyebrow) { font-size:15px; }.hero-actions { gap:10px; margin-top:22px; }.hero-notebook { width:285px; min-height:186px; height:186px; margin:5px auto -8px; transform:scale(.66) rotate(2.5deg); transform-origin:top center; }.how,.rules-section,.levels { margin-top:32px; }.section-heading { display:block; }.section-heading h2 { font-size:31px; }.section-heading>p { max-width:none; margin-top:9px; font-size:12px; text-align:left; }.steps-grid,.rules-grid { gap:10px; margin-top:14px; }.step-card { grid-template-columns:40px 34px 1fr; gap:9px; padding:14px 12px; border-radius:18px; }.step-number { width:38px; height:38px; border-width:2px; font-size:21px; }.step-icon { width:32px; height:32px; font-size:18px; }.step-card h3 { font-size:16px; }.step-card p { margin-top:3px; font-size:12px; }.rules-grid { grid-template-columns:1fr; }.rule-tile { min-height:90px; flex-direction:row; justify-content:flex-start; gap:14px; padding:15px 21px; text-align:left; }.rule-tile span { margin:0; }.rule-tile i { right:15px; bottom:auto; top:31px; }.levels-grid { grid-template-columns:1fr; gap:12px; margin-top:16px; }.level-card { min-height:215px; padding:19px; border-radius:21px; }.level-index { margin-top:11px; }.level-card>strong { font-size:24px; }.game-head { grid-template-columns:1fr auto; gap:6px; }.game-head>div { grid-column:1/-1; grid-row:1; margin-bottom:8px; }.back-link { grid-column:1; grid-row:2; }.hint-button { grid-column:2; grid-row:2; padding:7px 9px; font-size:11px; }.game-grid { gap:14px; margin-top:14px; }.rule-card { display:grid; grid-template-columns:75px 1fr; gap:12px; padding:18px; border-radius:22px; }.rule-card>.eyebrow { grid-column:1/-1; }.rule-big { padding:9px; border-radius:13px; font-size:24px; }.rule-card p { font-size:13px; }.rule-picture { width:73px; height:73px; border-width:5px; font-size:39px; }.rule-card>small { font-size:11px; }.answer-card { padding:25px 18px; border-radius:22px; }.answer-card h1 { margin:8px 0 20px; font-size:29px; }.word-area { min-height:79px; padding:12px 8px; border-radius:16px; }.word-mask,.word-mask.medium,.word-mask.long { font-size:clamp(24px,8vw,32px)!important; }.missing { min-width:30px; height:38px; margin:0 1px; border-bottom-width:4px; }.choose-copy { margin-top:21px; }.choices { gap:9px; }.pair-choice { width:113px; height:64px; border-radius:16px; }.pair-choice strong { font-size:27px; }.feedback { margin-top:18px; font-size:12px; }.game-actions { margin-top:12px; }.result { margin-top:24px; padding:38px 19px 30px; border-radius:26px; }.result-confetti { top:14px; right:16px; font-size:17px; letter-spacing:8px; }.result-icon { width:78px; height:78px; font-size:37px; }.result h1 { font-size:35px; }.result-stars { font-size:33px; }.result>p { font-size:14px; }.stats span { min-width:119px; }.result-actions { gap:7px; }.collection-hero { min-height:0; padding:27px 22px; border-radius:24px; }.collection-hero h1 { font-size:35px; }.collection-hero p { font-size:14px; }.book-mark { display:none; }.notebook-heading { flex-direction:column; align-items:flex-start; gap:5px; }.notebook-heading h2 { font-size:24px; }.notebook-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.notebook-card { min-height:174px; }.card-emoji { height:69px; font-size:39px; } }