:root { --ink:#294f4b; --muted:#70857f; --paper:#fffdf8; --line:#ded6ba; --green:#419b72; --gold:#e8ad39; --coral:#ea796c; --shadow:0 20px 45px rgba(43,75,61,.11); --soft-shadow:0 9px 18px rgba(43,75,61,.08); font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif; color:var(--ink); 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% 10%,rgba(247,216,104,.25) 0 115px,transparent 116px),radial-gradient(circle at 95% 20%,rgba(110,183,215,.17) 0 155px,transparent 156px),radial-gradient(circle at 73% 94%,rgba(185,168,228,.14) 0 135px,transparent 136px),linear-gradient(125deg,#fcfaee,#f3faf4 53%,#fbf7ed); } body::before { content:""; position:fixed; z-index:-1; inset:0; opacity:.17; background-image:radial-gradient(#7fa68f 1px,transparent 1.2px); background-size:19px 19px; pointer-events:none; } button { font:inherit; } button:not(:disabled) { cursor:pointer; } button:focus-visible { outline:4px solid rgba(234,180,53,.65); outline-offset:4px; } h1,h2,h3,p { margin:0; }
.app { width:min(1120px,calc(100% - 32px)); min-height:100vh; margin:0 auto; }.page { padding:22px 0 62px; }.loading-card { width:min(440px,100%); margin:20vh auto; padding:35px; border:3px solid var(--line); border-radius:30px; background:var(--paper); box-shadow:var(--shadow); font-size:20px; font-weight:900; text-align:center; }
.topbar { min-height:55px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }.brand { display:flex; align-items:center; gap:10px; border:0; color:var(--ink); background:transparent; text-align:left; }.brand-box { position:relative; display:flex; width:51px; height:48px; align-items:center; justify-content:center; overflow:hidden; border:2px solid #bcd6c7; border-radius:15px; background:#e7f5e9; box-shadow:0 3px 0 #a7ceba; transform:rotate(-3deg); }.brand-box i,.brand-box b { display:grid; width:22px; height:29px; place-items:center; border-radius:7px; color:#fff; font-family:Georgia,serif; font-size:16px; font-style:normal; }.brand-box i { margin-right:-2px; background:#e97b6e; }.brand-box b { background:#e3b142; }.brand strong { display:block; font-size:22px; font-weight:1000; letter-spacing:-.5px; }.brand small { display:block; margin-top:1px; color:#789087; font-size:10px; font-weight:900; letter-spacing:.35px; text-transform:uppercase; }.top-actions { display:flex; align-items:center; gap:8px; }.collection-button,.sound-button { display:flex; align-items:center; min-height:48px; gap:8px; padding:7px 12px; border:2px solid #d4e5d8; border-radius:14px; color:#45675f; background:rgba(255,254,249,.88); box-shadow:0 4px 10px rgba(42,70,60,.04); font-size:11px; font-weight:900; text-align:left; }.collection-button>span:first-child,.sound-button>span:first-child { font-size:19px; }.collection-button small { display:block; color:#789087; font-size:9px; }.sound-button.is-on { border-color:#f0cf75; background:#fff8de; }.primary-button,.secondary-button { min-height:50px; padding:13px 19px; border:0; border-radius:15px; color:#fff; background:var(--green); box-shadow:0 7px 0 #267553,0 13px 20px rgba(47,126,91,.2); font-size:13px; font-weight:1000; transition:transform .15s ease,box-shadow .15s ease; }.primary-button span { margin-left:6px; font-size:17px; }.primary-button:hover { transform:translateY(-2px); box-shadow:0 9px 0 #267553,0 15px 24px rgba(47,126,91,.2); }.primary-button:active { transform:translateY(5px); box-shadow:0 2px 0 #267553; }.secondary-button { color:#37705d; border:2px solid #9dccaf; background:#f5fcf5; box-shadow:none; }.eyebrow { color:#4b8f74; font-family:Georgia,serif; font-size:12px; font-weight:900; letter-spacing:1.35px; }.hero { min-height:405px; display:grid; grid-template-columns:1.12fr .88fr; align-items:center; overflow:hidden; padding:49px 52px; border:2px solid #dce6d8; border-radius:39px; background:linear-gradient(119deg,#fffbed 0%,#edf8ef 56%,#edf5ff 100%); box-shadow:var(--soft-shadow); }.hero h1 { margin:10px 0 14px; font-size:clamp(43px,5vw,61px); line-height:1; letter-spacing:-2.2px; }.hero-copy>p:not(.eyebrow) { max-width:560px; color:#678078; font-size:16px; font-weight:700; line-height:1.55; }.hero-actions { display:flex; align-items:center; gap:17px; margin-top:26px; }.hero-actions small { color:#678078; font-size:12px; font-weight:800; }.hero-scene { position:relative; width:360px; height:247px; justify-self:center; }.work-card { position:absolute; top:35px; left:33px; display:grid; width:244px; min-height:151px; grid-template-columns:1fr 27px 1fr; align-items:center; padding:27px 20px 22px; border:8px solid rgba(255,255,255,.9); border-radius:21px; color:#315d52; background:repeating-linear-gradient(0deg,#fffdf7 0 25px,#cfe4ce 26px 28px); box-shadow:0 15px 23px rgba(44,72,61,.17); font-family:Georgia,serif; font-size:26px; font-weight:900; transform:rotate(3deg); }.work-card i { color:#d3a03b; font-style:normal; text-align:center; }.work-card b { color:#376f5b; }.work-card mark,.proof-chip mark,.feedback mark,.note-card b mark { padding:0 2px; border-radius:4px; color:#c2684f; background:#ffe196; }.work-card small { position:absolute; right:22px; bottom:9px; color:#5a9277; font-family:"Trebuchet MS",Arial,sans-serif; font-size:9px; }.tool { position:absolute; display:grid; width:58px; height:58px; place-items:center; border:5px solid #fffdf8; border-radius:50%; background:#dff0e3; box-shadow:0 8px 13px rgba(46,77,63,.1); font-size:27px; }.tool-one { top:0; right:21px; transform:rotate(14deg); }.tool-two { right:1px; bottom:19px; color:#6fa988; background:#eef8ef; }.bolt { position:absolute; left:4px; bottom:3px; color:#e9ae39; font-size:35px; transform:rotate(-13deg); }
.how,.levels { margin-top:45px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; }.section-heading h2 { margin-top:7px; font-size:clamp(32px,4vw,45px); letter-spacing:-1.4px; }.section-heading>p { max-width:375px; color:#70877f; font-size:13px; font-weight:800; line-height:1.4; text-align:right; }.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }.step-card { min-height:125px; display:grid; grid-template-columns:54px 42px 1fr; align-items:center; gap:11px; padding:20px 17px; border:2px solid #ded9c6; border-radius:23px; background:rgba(255,254,249,.89); box-shadow:0 7px 15px rgba(50,77,64,.05); }.step-number { display:grid; width:49px; height:49px; place-items:center; padding-bottom:2px; border:3px solid var(--accent); border-radius:50%; color:var(--accent); background:#fffdf7; font-family:Georgia,serif; font-size:27px; font-weight:900; line-height:1; }.step-icon { display:grid; width:39px; height:39px; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--accent) 13%,white); font-size:21px; }.step-card h3 { font-size:17px; }.step-card p { margin-top:4px; color:#72877f; font-size:12px; font-weight:700; line-height:1.35; }.rule-strip { display:grid; grid-template-columns:121px 1fr; gap:21px; align-items:center; margin-top:41px; padding:23px 28px; border:2px solid #ead18e; border-radius:25px; background:#fff9e4; box-shadow:0 9px 17px rgba(92,76,24,.06); }.rule-sign { min-height:94px; display:grid; place-items:center; padding:9px; border:7px solid #fffdf7; border-radius:18px; color:#3e8063; background:#b8dfbd; box-shadow:0 3px 0 #94c8a1; text-align:center; }.rule-sign b { font-size:15px; line-height:1.05; }.rule-sign span { margin-top:-4px; color:#d57457; font-size:27px; font-weight:900; }.rule-strip h2 { margin:5px 0 8px; font-size:22px; line-height:1.2; }.rule-strip p { color:#6d837c; font-size:13px; font-weight:700; }.rule-strip p b { color:#c0684d; }.levels-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:19px; }.level-card { min-height:258px; display:flex; flex-direction:column; padding:20px; border:3px solid color-mix(in srgb,var(--accent) 55%,white); border-radius:25px; color:var(--ink); background:linear-gradient(152deg,color-mix(in srgb,var(--accent) 14%,white),#fffdf8 66%); box-shadow:0 8px 16px rgba(45,72,61,.06); text-align:left; transition:transform .16s ease,box-shadow .16s ease; }.level-card:hover { transform:translateY(-5px); box-shadow:0 15px 25px rgba(45,72,61,.12); }.level-top,.level-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }.level-icon { font-size:28px; }.age-pill { padding:6px 9px; border-radius:99px; color:var(--accent); background:#fffefa; font-size:10px; font-weight:900; }.level-index { margin-top:16px; color:var(--accent); font-family:Georgia,serif; font-size:11px; font-weight:900; letter-spacing:1px; }.level-card>strong { margin-top:8px; font-size:23px; line-height:1.04; }.level-copy { margin-top:10px; color:#748981; font-size:12px; font-weight:700; line-height:1.38; }.level-bottom { margin-top:auto; color:#668077; font-size:11px; font-weight:900; }.stars { color:#e4ad35; font-size:16px; letter-spacing:1px; }
.game-page { padding-bottom:52px; }.game-head { min-height:50px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:12px; }.back-link,.text-button { border:0; color:#558277; 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:#7c918a; 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(255px,.73fr) minmax(0,1.27fr); gap:21px; margin-top:22px; }.word-card,.answer-card { border:2px solid #dce5d8; border-radius:29px; background:rgba(255,254,249,.95); box-shadow:var(--shadow); }.word-card { min-height:495px; 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%); }.word-emoji { display:grid; width:155px; height:155px; place-items:center; margin:26px 0 15px; border:9px solid rgba(255,255,255,.8); border-radius:50%; background:color-mix(in srgb,var(--accent) 21%,white); box-shadow:0 10px 18px rgba(48,73,62,.12); font-size:80px; }.sentence { min-height:43px; max-width:270px; color:#678078; font-size:14px; font-weight:800; line-height:1.4; }.focus-word { width:100%; margin:17px 0 12px; padding:13px 7px; border:2px dashed color-mix(in srgb,var(--accent) 55%,white); border-radius:16px; background:rgba(255,255,255,.68); }.target-word { color:#2e6255; font-family:Georgia,serif; font-size:33px; font-weight:900; letter-spacing:.5px; }.target-word mark { display:inline-grid; min-width:26px; place-items:center; padding:0 3px 2px; border-radius:5px; color:#c66f50; background:#ffe29a; }.word-card>small { width:100%; margin-top:auto; padding:10px; border-radius:13px; color:#688179; background:rgba(255,255,255,.65); font-size:11px; font-weight:800; line-height:1.35; }.answer-card { min-height:495px; padding:35px 42px; }.answer-card h1 { max-width:630px; margin:8px 0 10px; font-size:clamp(29px,3.5vw,41px); line-height:1.08; letter-spacing:-1.2px; }.answer-intro { color:#6c857e; font-size:14px; font-weight:700; line-height:1.43; }.proof-chip { display:inline-flex; align-items:center; gap:9px; margin-top:17px; padding:8px 12px; border:2px dashed #9fcdb0; border-radius:13px; background:#eff9ef; color:#5e8073; font-size:11px; font-weight:900; }.proof-chip b { color:#2c6956; font-family:Georgia,serif; font-size:18px; }.choices { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:21px; }.letter-choice { position:relative; min-height:122px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:13px; border:3px solid #cde1d2; border-radius:19px; color:#2e705a; background:#fff; box-shadow:0 6px 12px rgba(45,73,60,.07); transition:transform .16s ease,background .16s ease; }.letter-choice strong { display:grid; width:54px; height:54px; place-items:center; border-radius:15px; color:#2d6a55; background:#eaf6eb; font-family:Georgia,serif; font-size:33px; }.letter-choice small { margin-top:7px; color:#7c958d; font-size:10px; font-weight:800; }.choice-number { position:absolute; top:8px; left:9px; display:grid; width:25px; height:25px; place-items:center; padding-bottom:1px; border-radius:50%; color:#88a197; background:#ecf5ec; font-family:Georgia,serif; font-size:13px; font-weight:800; line-height:1; }.letter-choice:hover:not(:disabled) { border-color:#77bd93; background:#effaf0; transform:translateY(-3px); }.letter-choice.is-wrong { border-color:#efaaa1; background:#fff0ed; opacity:.78; }.letter-choice.is-wrong strong { color:#b8625d; background:#ffe2de; }.letter-choice.is-good { border-color:#5db587; background:#e6f7e9; }.letter-choice.is-good strong { color:#237653; background:#c9ebd0; }.letter-choice.is-hint { border-color:#e5b43e; background:#fff8d9; box-shadow:0 0 0 5px rgba(235,196,75,.16); }.letter-choice.is-hint strong { color:#9b741e; background:#ffedaf; }.feedback { min-height:72px; display:flex; align-items:flex-start; gap:10px; margin-top:20px; 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:50px; 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:51px 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>i { position:absolute; top:22px; right:48px; color:#e4b23f; font-size:22px; font-style:normal; letter-spacing:12px; transform:rotate(12deg); }.result-icon { display:grid; width:95px; height:95px; 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:46px; }.result h1 { margin:9px 0; 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:590px; 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:224px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:34px 49px; 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-count { position:relative; display:grid; width:146px; height:146px; 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:67px; }.book-count 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:#4a9f73; font-size:14px; }.notes { margin-top:37px; }.note-group+.note-group { margin-top:43px; }.notes-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px; }.notes-heading h2 { margin-top:5px; font-size:29px; letter-spacing:-.7px; }.notes-heading>b { color:#678178; font-size:13px; }.notes-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }.note-card { position:relative; min-height:195px; display:flex; flex-direction:column; align-items:center; overflow:hidden; padding:14px 10px; border:2px solid #e2e0d6; border-radius:20px; background:#f9f8f3; text-align:center; }.note-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; }.note-emoji { display:grid; height:68px; place-items:center; color:#aeb8b1; filter:grayscale(1); opacity:.55; font-size:38px; }.opened .note-emoji { filter:none; opacity:1; }.note-card strong,.note-card>b { min-height:24px; color:#99a39c; font-family:Georgia,serif; font-size:17px; }.opened strong,.opened>b { color:#2c6253; }.note-card i { min-height:17px; color:#a6b2aa; font-style:normal; font-weight:900; }.note-card small { margin-top:6px; color:#9ea9a2; font-size:10px; font-weight:800; line-height:1.28; }.opened small { color:#588573; }
@media (max-width:980px) { .hero { grid-template-columns:1fr .82fr; padding:42px 34px; }.hero h1 { font-size:45px; }.hero-scene { transform:scale(.84); transform-origin:center; margin-left:-19px; }.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; }.word-card { min-height:0; display:grid; grid-template-columns:110px 1fr; gap:15px; align-items:center; text-align:left; }.word-card>.eyebrow,.focus-word,.word-card>small { grid-column:1/-1; }.word-emoji { width:105px; height:105px; margin:0; font-size:56px; }.focus-word { margin:0; text-align:center; }.word-card>small { margin-top:0; text-align:center; }.answer-card { min-height:0; }.notes-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-box { width:44px; height:42px; border-radius:13px; }.brand-box i,.brand-box b { width:19px; height:25px; border-radius:6px; font-size:13px; }.brand strong { max-width:164px; overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }.brand small { font-size:8px; }.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 15px; 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-scene { width:285px; height:166px; margin:8px auto -5px; transform:scale(.67); transform-origin:top center; }.how,.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 { 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; }.rule-strip { grid-template-columns:86px 1fr; gap:13px; margin-top:31px; padding:17px 14px; border-radius:21px; }.rule-sign { min-height:80px; border-width:4px; }.rule-sign b { font-size:12px; }.rule-sign span { font-size:23px; }.rule-strip h2 { font-size:17px; }.rule-strip p { font-size:12px; }.levels-grid { grid-template-columns:1fr; gap:12px; margin-top:16px; }.level-card { min-height:205px; padding:19px; border-radius:21px; }.level-index { margin-top:11px; }.level-card>strong { font-size:23px; }.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; }.word-card { grid-template-columns:72px 1fr; gap:12px; padding:18px; border-radius:22px; }.word-emoji { width:72px; height:72px; border-width:5px; font-size:38px; }.sentence { min-height:0; font-size:13px; }.focus-word { padding:10px; border-radius:13px; }.target-word { font-size:29px; }.word-card>small { font-size:10px; }.answer-card { padding:25px 18px; border-radius:22px; }.answer-card h1 { margin:8px 0 11px; font-size:28px; }.answer-intro { font-size:13px; }.proof-chip { margin-top:14px; }.choices { gap:9px; margin-top:17px; }.letter-choice { min-height:99px; border-radius:16px; }.letter-choice strong { width:44px; height:44px; border-radius:12px; font-size:27px; }.letter-choice small { font-size:9px; }.feedback { margin-top:18px; font-size:12px; }.game-actions { margin-top:12px; }.result { margin-top:24px; padding:38px 19px 30px; border-radius:26px; }.result>i { 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-count { display:none; }.notes-heading { flex-direction:column; align-items:flex-start; gap:5px; }.notes-heading h2 { font-size:24px; }.notes-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.note-card { min-height:180px; }.note-emoji { height:59px; font-size:35px; } }