:root{color-scheme:light;--bg: #f7f4ee;--surface: #fffdf9;--surface-strong: #ffffff;--ink: #20313c;--muted: #5f6f77;--brand: #2f6f6b;--brand-dark: #245854;--accent: #d67f3d;--accent-soft: #fff0df;--success: #2b8454;--line: #dfe5e1;--shadow: 0 16px 36px rgba(32, 49, 60, .09);--radius: 20px;--radius-sm: 14px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Segoe UI,Trebuchet MS,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#ffffffc7,#ffffffc7),linear-gradient(135deg,#f3f0e8,#eef4f1)}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer}button:focus-visible,.text-button:focus-visible{outline:3px solid rgba(47,111,107,.28);outline-offset:3px}.app-shell{position:relative;min-height:100vh;padding:18px}.app-shell__backdrop{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(32,49,60,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(32,49,60,.03) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 90%);mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 90%)}.app-shell__header,.app-shell__main{position:relative;z-index:1}.app-shell__header{max-width:1120px;margin:0 auto 18px;padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:#fffdf9cc;border:1px solid rgba(223,229,225,.9);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-shell__brand{min-width:0}.app-shell__title,.app-shell__subtitle,.app-shell__microcopy{display:block;margin:0}.app-shell__title{font-size:1.2rem;font-weight:800}.app-shell__subtitle{margin-top:4px;font-size:.95rem;font-weight:700}.app-shell__microcopy{margin-top:4px;color:var(--muted);font-size:.92rem}.app-shell__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.profile-selector{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px;border:1px solid rgba(47,111,107,.14);border-radius:16px;background:#f7f9f7e0}.profile-selector__label{font-size:.82rem;font-weight:800;color:var(--muted);padding-inline:4px 2px}.profile-selector__controls{display:inline-flex;align-items:center;gap:8px}.profile-selector__button{min-height:42px;min-width:84px;padding:10px 12px;border:1px solid transparent;border-radius:12px;background:#eef2ef;color:var(--ink);font-weight:800;cursor:pointer;transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease}.profile-selector__button:hover{transform:translateY(-1px);background:#e5ebe7}.profile-selector__button:focus-visible{outline:3px solid rgba(47,111,107,.28);outline-offset:3px}.profile-selector__button--active,.profile-selector__button--active:hover{background:#d9efea;box-shadow:inset 0 0 0 1px #2f6f6b2e}.app-shell__main{max-width:1120px;margin:0 auto}.home-screen,.screen,.reward-screen{display:grid;gap:18px}.home-screen{grid-template-columns:1.2fr .8fr;align-items:stretch}.home-screen__hero,.home-screen__panel,.reading-card,.reward-screen__card,.panel,.stat-card,.level-card{background:var(--surface);border:1px solid rgba(223,229,225,.9);border-radius:var(--radius);box-shadow:var(--shadow)}.home-screen__hero{padding:28px;display:grid;align-content:center;gap:20px;min-height:440px}.home-screen__mascot{width:92px;height:92px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(180deg,#fff7ea,#f5ead9);font-size:3rem}.home-screen__copy h1{margin:0;font-size:clamp(2.3rem,6vw,4.1rem);line-height:1.02}.home-screen__lead{max-width:34rem;margin:12px 0 0;font-size:1.1rem;line-height:1.6;color:var(--muted)}.home-screen__panel{padding:22px;display:grid;align-content:space-between;gap:22px}.home-screen__stats{display:flex;justify-content:space-between;align-items:center;padding:18px;border-radius:var(--radius-sm);background:var(--accent-soft)}.home-screen__stats strong{font-size:1.7rem}.home-screen__mission{display:grid;gap:10px;padding:18px;border-radius:var(--radius-sm);border:1px solid rgba(47,111,107,.12);background:linear-gradient(180deg,#f8fcfb,#f2f8f4)}.home-screen__mission strong{font-size:1.2rem}.home-screen__mission p{margin:0;color:var(--muted);line-height:1.5}.home-screen__mission-badge{justify-self:start;padding:6px 10px;border-radius:999px;background:#edf6f1;color:var(--brand-dark);font-size:.8rem;font-weight:800}.stack{display:grid;gap:12px}.row{display:flex;gap:12px;flex-wrap:wrap}.primary-button,.secondary-button{min-height:58px;padding:14px 18px;border-radius:18px;font-weight:800;transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease}.primary-button{background:var(--brand);color:#fff;box-shadow:0 12px 24px #2f6f6b2e}.primary-button:hover{transform:translateY(-1px);background:var(--brand-dark)}.secondary-button{background:#eef2ef;color:var(--ink)}.secondary-button:hover{transform:translateY(-1px);background:#e5ebe7}.secondary-button--small{min-height:46px;padding-inline:14px;border-radius:14px}.read-aloud-button{min-height:56px;width:fit-content;padding-inline:16px;gap:8px}.read-aloud-button:before{content:"🔊"}.audio-unavailable{opacity:.62;cursor:not-allowed}.text-button{background:transparent;color:var(--brand);padding:0;font-weight:800}.eyebrow{margin:0 0 10px;font-size:.88rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}.screen__header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.screen__header h2{margin:0;font-size:1.7rem}.level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.level-card{padding:20px;display:grid;gap:10px;text-align:left;min-height:168px;transition:transform .14s ease,border-color .14s ease}.level-card:hover{transform:translateY(-1px);border-color:#2f6f6b40}.level-card--active{border-color:#2f6f6b73;background:#f4fbf8}.level-card__number{font-size:2rem;font-weight:900;color:var(--brand)}.level-card__title{font-size:1.15rem;font-weight:800}.level-card__description{color:var(--muted)}.level-card__badge{justify-self:start;padding:6px 10px;border-radius:999px;background:#edf6f1;color:var(--brand-dark);font-size:.8rem;font-weight:800}.level-card__hint{justify-self:start;padding:6px 10px;border-radius:999px;background:#fff2dd;color:#9e5c00;font-size:.8rem;font-weight:800}.reading-screen{display:grid;gap:18px}.reading-card{padding:20px;display:grid;gap:20px}.reading-card--success{border-color:#2b845447}.reading-card--help{border-color:#d67f3d57;background:linear-gradient(180deg,#fffdf8,#fff8ee)}.reading-card--skip{border-color:#5f6f773d;background:linear-gradient(180deg,#fffdfb,#f8f6f2)}.reading-card--question{border-color:#2f6f6b52;background:linear-gradient(180deg,#fbfffe,#f4fbf8)}.reading-card--question-success{border-color:#2b845457;background:linear-gradient(180deg,#f5fff8,#eef9f1)}.reading-card--question-retry{border-color:#d67f3d57;background:linear-gradient(180deg,#fffaf3,#fff5ea)}.reading-card__top{display:flex;justify-content:space-between;align-items:center;gap:14px}.progress-bar{display:grid;gap:8px;width:100%}.progress-bar__steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.progress-bar__steps:before{content:"";position:absolute;left:20px;right:20px;top:50%;height:3px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(90deg,#2f6f6b38,#d67f3d2e)}.progress-bar__step{position:relative;display:grid;place-items:center}.progress-bar__step-dot{position:relative;z-index:1;width:100%;min-height:34px;display:grid;place-items:center;border-radius:999px;border:1px solid #d9e3de;background:#f6f8f7;color:var(--muted);font-weight:800;font-size:.82rem}.progress-bar__step--active .progress-bar__step-dot{border-color:#2f6f6b38;background:linear-gradient(180deg,#2f6f6b,#72b98a);color:#fff;box-shadow:0 8px 16px #2f6f6b24}.progress-bar__track{height:14px;border-radius:999px;background:#e7ece8;overflow:hidden}.progress-bar__fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#7fca9b);transition:width .2s ease}.progress-bar__label{font-weight:800;color:var(--muted)}.star-counter{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 14px;border-radius:999px;background:#fff6df;color:#b86d00;font-weight:900;transition:transform .14s ease,box-shadow .14s ease}.star-counter__icon{font-size:1.1rem}.star-counter--pulse{transform:translateY(-1px) scale(1.03);box-shadow:0 10px 18px #b86d0024;animation:star-bump .42s ease}.reading-card__body{display:grid;gap:16px}.reading-card__badge{justify-self:start;padding:7px 12px;border-radius:999px;background:#edf6f1;color:var(--brand-dark);font-size:.82rem;font-weight:900}.reading-card__type{justify-self:start;margin-top:-8px;color:var(--muted);font-size:.9rem;font-weight:700}.reading-card__text{margin:0;font-size:clamp(2rem,7vw,3.6rem);line-height:1.08;font-weight:900;letter-spacing:0;color:var(--ink);white-space:pre-line}.clickable-text{display:inline}.clickable-word{display:inline;margin:0;padding:.02em .08em;border:0;border-radius:.2em;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.11em;text-underline-offset:.12em}.clickable-word:hover{color:var(--brand-dark);background:#2f6f6b14;text-decoration-color:currentColor}.clickable-word:focus-visible{outline:3px solid rgba(47,111,107,.28);outline-offset:2px;background:#2f6f6b14;color:var(--brand-dark);text-decoration-color:currentColor}.clickable-word:active{background:#2f6f6b24}.reading-card__hint{display:grid;gap:10px;padding:14px 16px;border-radius:16px;background:#fff8ee;border:1px solid rgba(214,127,61,.18)}.reading-card__hint-label{margin:0;color:#9e5c00;font-size:.9rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.reading-card__syllables,.reading-card__feedback,.reward-screen__copy,.panel__row p,.stat-card span{margin:0;color:var(--muted)}.reading-card__syllables{padding:14px 16px;border-radius:16px;background:#f5f8f6;font-size:1.15rem;font-weight:800}.reading-card__feedback{padding:12px 14px;border-radius:16px;background:#edf9f0;color:var(--success);font-weight:800}.reading-card--swipeable{touch-action:pan-y;cursor:grab;transform-origin:center center;backface-visibility:hidden;will-change:transform}.reading-card--swipeable:active{cursor:grabbing}.reading-card--swiping{border-color:#2f6f6b6b;box-shadow:0 24px 48px #20313c29,0 0 0 3px #2f6f6b14;z-index:2}.reading-card__swipe-hint,.swipe-hint{margin:0;padding:10px 12px;border-radius:14px;background:#f5f8f6;border:1px dashed rgba(47,111,107,.22);color:var(--muted);font-size:.92rem;font-weight:700}.comprehension-card{display:grid;gap:clamp(22px,4vw,30px);padding:clamp(24px,5vw,40px);background:linear-gradient(180deg,#fff,#f6fbf7);border:1px solid rgba(47,111,107,.16);border-radius:calc(var(--radius) + 4px);box-shadow:0 18px 42px #20313c1c,0 0 0 1px #ffffff73 inset}.comprehension-card__header{display:grid;gap:10px;max-width:44rem}.comprehension-card__header h2,.comprehension-card__question h3{margin:0}.comprehension-card__header h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.02}.comprehension-card__lead{margin:0;color:var(--muted);line-height:1.55;font-size:1.02rem}.comprehension-question{display:grid;gap:18px;padding:24px;border-radius:22px;background:linear-gradient(180deg,#fefcf7,#f1f8f4);border:1px solid rgba(47,111,107,.14);box-shadow:0 12px 26px #20313c14}.comprehension-card__question{display:grid;gap:20px;padding:26px;border-radius:24px;background:linear-gradient(180deg,#fdfcf8,#f1f8f4);border:1px solid rgba(47,111,107,.14);box-shadow:0 14px 28px #20313c14}.comprehension-card__question h3{color:var(--ink);font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.04;font-weight:900;letter-spacing:0;max-width:18ch}.comprehension-options,.comprehension-card__actions{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.comprehension-option,.comprehension-card__option{min-height:84px;padding:16px 18px;text-align:center;line-height:1.15;font-size:1.08rem}.comprehension-feedback,.comprehension-card__feedback{margin:0;padding:12px 14px;border-radius:16px;background:#edf9f0;color:var(--success);font-weight:800}.comprehension-card__reward{display:grid;place-items:center;gap:10px;min-height:132px;padding:18px;border-radius:24px;background:radial-gradient(circle at top,#ffffffeb,#fff9),linear-gradient(180deg,#fff7e6,#f4fbf6);border:1px solid rgba(47,111,107,.16);box-shadow:0 14px 26px #20313c14,inset 0 0 0 1px #ffffff80;text-align:center}.comprehension-card__reward-symbol{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:999px;background:#ffffffe6;font-size:2.35rem;filter:drop-shadow(0 8px 14px rgba(32,49,60,.1));animation:reward-pop .9s ease-in-out 1}.comprehension-card__reward-label{color:var(--brand-dark);font-size:1.18rem;font-weight:900;line-height:1.15}.comprehension-card__footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}.back-to-reading-button{min-height:52px}.reading-card__question-feedback{padding:12px 14px;border-radius:16px;background:#f5f8f6;color:var(--brand-dark);font-weight:800}.reading-card__question{display:grid;gap:14px;padding:18px;border-radius:18px;background:#f7f6f2}.reading-card__question-label{margin:0;font-weight:900;font-size:1.05rem}.reading-card__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.reward-screen{place-items:center;min-height:68vh}.reward-screen__card{position:relative;width:min(100%,720px);padding:28px;text-align:center;overflow:hidden;display:grid;gap:16px}.reward-screen__card h2{margin:0;font-size:clamp(2rem,5vw,3rem)}.reward-screen__chest{position:relative;width:124px;height:96px;margin:0 auto}.reward-screen__chest-body{position:absolute;inset:30px 14px 6px;display:grid;place-items:center;border-radius:16px 16px 12px 12px;background:linear-gradient(180deg,#d78a4a,#b86529);box-shadow:inset 0 4px #ffffff29;font-size:2.15rem}.reward-screen__chest-lid{position:absolute;top:12px;left:16px;right:16px;height:28px;border-radius:16px 16px 10px 10px;background:linear-gradient(180deg,#f1b15e,#d67f3d);box-shadow:inset 0 3px #ffffff38,0 10px 16px #20313c14}.reward-screen__chest-lock{position:absolute;left:50%;bottom:18px;width:18px;height:18px;transform:translate(-50%);border-radius:50%;border:3px solid #fff6e1;background:#9e5c00}.reward-screen__chest-spark{position:absolute;right:14px;top:2px;color:var(--accent);font-size:1rem;animation:sparkle 1.6s ease-in-out infinite}.reward-screen__summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reward-screen__summary-item{display:grid;gap:6px;padding:14px;border-radius:16px;background:#f7f6f2;text-align:left}.reward-screen__summary-item span{color:var(--muted);font-size:.88rem;font-weight:700}.reward-screen__summary-item strong{color:var(--ink);font-size:1.05rem}.reward-screen__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.reward-screen__badge{padding:7px 11px;border-radius:999px;background:#edf6f1;color:var(--brand-dark);font-size:.82rem;font-weight:800}.reward-screen__confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-20px;width:10px;height:18px;border-radius:3px;opacity:.9;animation:confetti-drop 1.9s linear infinite}.confetti--0{left:10%;background:#ef8864}.confetti--1{left:28%;background:#5db58a;animation-delay:.2s}.confetti--2{left:60%;background:#f4c550;animation-delay:.4s}.confetti--3{left:82%;background:#6389d8;animation-delay:.1s}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stat-card{padding:18px;display:grid;gap:8px}.stat-card strong{font-size:1.35rem}.two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.panel{padding:18px}.panel h3{margin:0 0 14px;font-size:1.05rem}.panel__list{display:grid;gap:12px}.panel__row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}.panel__row--stacked{align-items:flex-start}.panel__row:first-child{border-top:0;padding-top:0}.panel__row strong{display:block}.panel__row span{text-align:right;color:var(--muted)}.panel__empty{margin:0;color:var(--muted);line-height:1.6}.panel__form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.panel__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.field{display:grid;gap:8px}.field span{font-size:.92rem;font-weight:800;color:var(--muted)}.field__input{width:100%;min-height:50px;padding:12px 14px;border:1px solid rgba(47,111,107,.18);border-radius:14px;background:#fff;color:var(--ink);font:inherit}.field__input:focus-visible{outline:3px solid rgba(47,111,107,.28);outline-offset:3px}@keyframes confetti-drop{0%{transform:translateY(0) rotate(0)}to{transform:translateY(160vh) rotate(220deg)}}@keyframes star-bump{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.08)}to{transform:translateY(-1px) scale(1.03)}}@keyframes sparkle{0%,to{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-2px) scale(1.15);opacity:1}}@keyframes reward-pop{0%{transform:scale(.72) rotate(-8deg);opacity:0}18%{transform:scale(1.08) rotate(5deg);opacity:1}45%{transform:scale(1) rotate(0)}70%{transform:scale(1.04) rotate(-2deg)}to{transform:scale(1) rotate(0)}}@media(max-width:940px){.home-screen,.two-column,.stats-grid,.panel__form-grid,.level-grid,.reading-card__actions,.comprehension-options,.comprehension-card__actions{grid-template-columns:1fr}.app-shell__header,.screen__header{flex-direction:column;align-items:stretch}.app-shell__actions{justify-content:flex-start}}@media(max-width:640px){.app-shell{padding:12px}.app-shell__header,.home-screen__hero,.home-screen__panel,.reading-card,.reward-screen__card,.comprehension-card,.panel,.stat-card,.level-card{border-radius:18px}.home-screen__hero{min-height:auto;padding:22px}.reading-card__text{font-size:clamp(1.9rem,11vw,2.8rem)}.swipe-hint,.reading-card__swipe-hint{font-size:.88rem}.comprehension-card{gap:18px;padding:20px}.comprehension-card__question{gap:16px;padding:20px;border-radius:20px}.comprehension-card__question h3{max-width:none;font-size:clamp(1.7rem,9vw,2.5rem)}.comprehension-card__actions{gap:12px;grid-template-columns:1fr}.comprehension-card__option,.comprehension-option{min-height:72px;padding:14px 16px}.comprehension-card__reward{min-height:112px;padding:16px;border-radius:20px}.comprehension-card__reward-symbol{width:60px;height:60px;font-size:2rem}.comprehension-card__reward-label{font-size:1.04rem}.home-screen__lead{font-size:1rem}.reward-screen__summary{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.confetti,.star-counter--pulse,.reward-screen__chest-spark,.comprehension-card__reward-symbol{animation:none!important}.read-aloud-button,.clickable-word{transition:none!important}}