@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #f9f6ed;
  --muted: #94a3b8;
  --muted-2: #6e8097;
  --navy: #08152a;
  --navy-2: #0d2039;
  --navy-3: #122a46;
  --line: rgba(170, 198, 227, .14);
  --lime: #b7eb62;
  --yellow: #f8c94b;
  --coral: #fa765f;
  --sky: #71c4ff;
  --purple: #9d8cff;
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--navy); }
body { color: var(--ink); font: 500 16px/1.45 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.app-shell { min-height: 100vh; display: flex; background: radial-gradient(circle at 79% 0%, rgba(38, 88, 139, .28), transparent 32rem), var(--navy); }
.sidebar { width: 244px; border-right: 1px solid var(--line); padding: 27px 18px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 12px 48px; font: 700 24px/1 'Space Grotesk', sans-serif; letter-spacing: -.05em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: var(--navy); font: 700 18px/1 'Space Grotesk', sans-serif; transform: rotate(-8deg); }
.nav { display: grid; gap: 7px; }
.nav-button { min-height: 48px; display: flex; align-items: center; gap: 13px; padding: 0 14px; border-radius: 14px; background: transparent; color: var(--muted); text-align: left; transition: .2s ease; }
.nav-button:hover, .nav-button.active { color: var(--ink); background: rgba(183, 235, 98, .11); }
.nav-button.active { box-shadow: inset 3px 0 var(--lime); }
.nav-icon { width: 20px; text-align: center; font-size: 19px; }
.side-footer { margin-top: auto; padding: 18px 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.side-footer strong { display: block; color: var(--ink); margin-bottom: 3px; }
.main { flex: 1; min-width: 0; padding: 25px clamp(22px, 4vw, 54px) 40px; }
.topbar { max-width: 1240px; margin: 0 auto 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-kicker { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.topbar h1 { margin: 0; font: 600 clamp(24px, 3vw, 32px)/1.1 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.streak-pill, .icon-button, .avatar-button { background: var(--navy-2); border: 1px solid var(--line); }
.streak-pill { display: flex; align-items: center; gap: 7px; padding: 10px 13px; border-radius: 13px; color: var(--yellow); font-weight: 700; }
.icon-button { width: 42px; height: 42px; border-radius: 13px; color: var(--muted); }
.avatar-button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); background: var(--lime); border: 3px solid rgba(255,255,255,.2); font-weight: 700; }
.content-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 22px; }
.stack { display: grid; gap: 22px; align-content: start; }
.card { background: rgba(13, 32, 57, .86); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 15px 35px rgba(0,0,0,.12); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px 24px 0; }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
.card h2, .card h3 { margin: 3px 0 0; font: 600 20px/1.15 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.quiet-button { background: transparent; color: var(--sky); font-size: 14px; }
.hero-card { position: relative; min-height: 236px; overflow: hidden; padding: 26px 27px; background: linear-gradient(112deg, #173554 0%, #102a47 56%, #21486c 100%); }
.hero-card:after { content: ''; position: absolute; inset: -80px -50px auto auto; width: 250px; height: 250px; border-radius: 50%; border: 1px solid rgba(113, 196, 255, .22); box-shadow: 0 0 0 24px rgba(113,196,255,.04), 0 0 0 48px rgba(113,196,255,.03); }
.hero-card-content { position: relative; z-index: 1; max-width: 68%; }
.hero-card .eyebrow { color: var(--lime); }
.hero-card h2 { margin: 10px 0 11px; font-size: clamp(25px, 3.1vw, 35px); }
.hero-card p { max-width: 410px; margin: 0 0 21px; color: #c1d0de; }
.primary-button { min-height: 48px; padding: 0 19px; border-radius: 13px; background: var(--lime); color: #0a1c2d; font-weight: 700; box-shadow: 0 8px 18px rgba(183,235,98,.13); transition: transform .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(183,235,98,.2); }
.secondary-button { min-height: 44px; padding: 0 16px; border-radius: 12px; background: rgba(255,255,255,.07); color: var(--ink); }
.character-art { position: absolute; z-index: 2; right: 32px; bottom: -6px; width: 145px; height: 178px; }
.character-art .cape { position: absolute; right: 2px; bottom: 0; width: 112px; height: 120px; background: #f36d5e; clip-path: polygon(27% 0, 79% 14%, 100% 100%, 0 100%); border-radius: 15px 70px 11px 11px; }
.character-art .body { position: absolute; bottom: 0; left: 21px; width: 84px; height: 99px; background: #facd58; border-radius: 38px 38px 15px 15px; border: 5px solid #071c32; }
.character-art .head { position: absolute; z-index: 2; top: 14px; left: 29px; width: 76px; height: 72px; background: #d99062; border-radius: 47% 47% 42% 42%; border: 5px solid #071c32; }
.character-art .hair { position: absolute; z-index: 3; top: 3px; left: 25px; width: 87px; height: 47px; background: #102034; border-radius: 48px 42px 18px 18px; transform: rotate(-4deg); }
.character-art .eye { position: absolute; z-index: 4; top: 43px; width: 7px; height: 9px; border-radius: 50%; background: #071c32; }
.character-art .eye.left { left: 48px; } .character-art .eye.right { left: 76px; }
.character-art .smile { position: absolute; z-index: 4; top: 61px; left: 51px; width: 27px; height: 13px; border-bottom: 4px solid #071c32; border-radius: 50%; }
.xp-row { margin-top: 20px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.progress-track { height: 8px; flex: 1; border-radius: 99px; background: rgba(6, 18, 32, .48); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--lime); }
.xp-row strong { color: var(--ink); font-size: 13px; }
.mission-card { padding-bottom: 22px; }
.mission-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px 24px 0; }
.mission-step { min-width: 0; padding: 14px 10px; border: 1px solid var(--line); border-radius: 15px; background: rgba(5,17,32,.28); }
.mission-step.done { border-color: rgba(183,235,98,.35); }
.step-icon { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 10px; border-radius: 10px; background: rgba(113,196,255,.14); color: var(--sky); }
.mission-step.done .step-icon { background: rgba(183,235,98,.15); color: var(--lime); }
.mission-step strong { display: block; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mission-step span { display: block; margin-top: 3px; color: var(--muted-2); font-size: 12px; }
.world-card { overflow: hidden; padding-bottom: 20px; }
.world-map { position: relative; height: 248px; margin: 22px 24px 0; border: 1px solid rgba(113,196,255,.16); border-radius: 16px; overflow: hidden; background: linear-gradient(155deg, #153c52, #112b43 53%, #16364c); }
.world-map:before, .world-map:after { content: ''; position: absolute; border: 1px solid rgba(183,235,98,.09); border-radius: 44% 56% 51% 49%; transform: rotate(20deg); }
.world-map:before { width: 380px; height: 150px; top: 20px; left: -70px; } .world-map:after { width: 300px; height: 140px; top: 100px; left: 130px; }
.world-label { position: absolute; top: 17px; left: 19px; z-index: 2; color: #b4d8e3; font-size: 12px; letter-spacing: .04em; }
.map-path { position: absolute; z-index: 1; left: 58px; top: 108px; width: 305px; border-top: 2px dashed rgba(183,235,98,.36); transform: rotate(-13deg); }
.map-node { position: absolute; z-index: 3; display: grid; place-items: center; width: 45px; height: 45px; border: 3px solid #577b87; border-radius: 50%; background: #153b52; color: var(--muted); font-weight: 700; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.map-node small { position: absolute; top: 49px; width: 82px; color: #aec8d0; font-size: 11px; font-weight: 500; text-align: center; }
.map-node.done { background: var(--lime); border-color: #d9ff9a; color: #11263c; } .map-node.current { width: 58px; height: 58px; border-color: var(--yellow); background: #f5a64c; color: #182940; box-shadow: 0 0 0 7px rgba(248,201,75,.16), 0 0 30px rgba(248,201,75,.36); }
.map-node.one { left: 30px; top: 149px; } .map-node.two { left: 112px; top: 102px; } .map-node.three { left: 203px; top: 83px; } .map-node.four { right: 25px; top: 46px; }
.world-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 24px; margin-top: 22px; }
.world-footer strong { display: block; font: 600 17px 'Space Grotesk', sans-serif; } .world-footer span { color: var(--muted); font-size: 13px; }
.mini-progress { display: flex; align-items: center; gap: 10px; min-width: 132px; color: var(--lime); font-size: 13px; }
.mini-progress .progress-track { max-width: 78px; }
.side-card { padding: 22px; }
.today-list { display: grid; gap: 3px; margin: 18px 0 0; }
.today-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.today-item:last-child { border-bottom: 0; }.check { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; border-radius: 7px; background: rgba(183,235,98,.14); color: var(--lime); font-size: 13px; }.check.pending { border: 1px solid rgba(148,163,184,.38); background: transparent; color: transparent; }.today-item strong { display: block; font-size: 14px; }.today-item span { display: block; color: var(--muted); font-size: 12px; }
.skill-bars { display: grid; gap: 17px; margin-top: 19px; }.skill-row { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; align-items: center; font-size: 13px; }.skill-row .bar { grid-column: 1 / -1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); }.skill-row .bar i { display: block; height: 100%; border-radius: inherit; background: var(--sky); }.skill-row:nth-child(2) .bar i { background: var(--coral); }.skill-row:nth-child(3) .bar i { background: var(--yellow); }.skill-row:nth-child(4) .bar i { background: var(--lime); }.skill-row em { color: var(--muted); font-style: normal; font-size: 12px; }
.streak-card { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: linear-gradient(105deg, rgba(248,201,75,.17), rgba(13,32,57,.86) 70%); }.streak-icon { font-size: 29px; }.streak-card strong { display: block; font: 600 20px 'Space Grotesk', sans-serif; }.streak-card span { color: var(--muted); font-size: 13px; }
.page { max-width: 1240px; margin: 0 auto; }.page-header { margin-bottom: 24px; }.page-header h2 { margin: 0 0 5px; font: 600 32px/1 'Space Grotesk', sans-serif; letter-spacing: -.05em; }.page-header p { margin: 0; color: var(--muted); }.progress-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.stat { padding: 18px; }.stat strong { display:block; font: 600 28px 'Space Grotesk', sans-serif; }.stat span { color: var(--muted); font-size: 13px; }.chart-card { padding: 22px; }.chart { height: 190px; display:flex; align-items:flex-end; gap: 10px; padding-top: 25px; }.chart-bar { flex:1; position:relative; min-width: 12px; background: var(--sky); border-radius: 7px 7px 3px 3px; opacity: .8; }.chart-bar:nth-child(2n) { background: var(--purple); }.chart-bar span { position:absolute; top:calc(100% + 8px); width:100%; color:var(--muted-2); text-align:center; font-size:10px; }.profile-card { display:flex; align-items:center; gap:18px; padding:24px; }.profile-orb { width:82px; height:82px; display:grid; place-items:center; border-radius:27px; background:var(--lime); color:var(--navy); font:700 32px 'Space Grotesk', sans-serif; }.profile-card h2 { margin-bottom:5px; }.profile-card p { margin:0; color:var(--muted); }.settings-list { padding: 6px 22px 10px; }.settings-row { display:flex; justify-content:space-between; align-items:center; min-height:60px; border-bottom:1px solid var(--line); }.settings-row span { color:var(--muted); }.toggle { width:46px; height:26px; padding:3px; border-radius:99px; background:var(--lime); text-align:left; }.toggle i { display:block; width:20px; height:20px; border-radius:50%; background:var(--navy); margin-left:17px; }
.auth-card { padding:22px; }.auth-form { display:grid; gap:10px; max-width:460px; margin-top:16px; }.auth-form input { width:100%; height:48px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#08192f; color:var(--ink); }.auth-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:4px; }.auth-status { min-height:21px; margin:0; color:var(--muted); font-size:13px; }.auth-status.good { color:var(--lime); }.auth-status.bad { color:var(--coral); }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:radial-gradient(circle at 50% 0%, rgba(38,88,139,.36), transparent 28rem), var(--navy); }.login-card { width:min(100%, 460px); padding:clamp(25px,6vw,42px); border:1px solid var(--line); border-radius:24px; background:rgba(13,32,57,.92); box-shadow:0 24px 60px rgba(0,0,0,.28); }.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:32px; font:700 25px/1 'Space Grotesk',sans-serif; letter-spacing:-.05em; }.login-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:11px; background:var(--lime); color:var(--navy); transform:rotate(-8deg); }.login-orb { width:70px; height:70px; display:grid; place-items:center; margin-bottom:20px; border-radius:23px; background:linear-gradient(135deg,var(--lime),var(--yellow)); color:var(--navy); font:700 30px 'Space Grotesk',sans-serif; }.login-card h1 { margin:0 0 10px; font:600 clamp(28px,7vw,38px)/1.05 'Space Grotesk',sans-serif; letter-spacing:-.05em; }.login-card > p { margin:0; color:var(--muted); }.login-form { display:grid; gap:11px; margin-top:25px; }.login-form label { color:#c8d5df; font-size:13px; font-weight:600; }.login-form input { width:100%; height:52px; margin-top:6px; padding:0 15px; border:1px solid var(--line); border-radius:13px; background:#08192f; color:var(--ink); }.login-form .primary-button { width:100%; margin-top:5px; }.login-link { margin:18px 0 0; color:var(--muted-2); font-size:12px; line-height:1.5; }.login-link strong { color:var(--muted); }
.signup-fields { display:grid; gap:11px; padding:14px 0 2px; border-top:1px solid var(--line); }.signup-fields[hidden] { display:none; }.signup-fields label { color:#c8d5df; font-size:13px; font-weight:600; }.signup-fields input { width:100%; height:52px; margin-top:6px; padding:0 15px; border:1px solid var(--line); border-radius:13px; background:#08192f; color:var(--ink); }.signup-actions { display:flex; gap:9px; flex-wrap:wrap; }.signup-actions .primary-button { flex:1; }.signup-actions .secondary-button { flex:0 0 auto; }
.session-shell { max-width: 760px; margin: 0 auto; }.session-top { display:flex; align-items:center; gap:15px; margin-bottom:30px; }.close-button { width:42px; height:42px; border-radius:13px; background:var(--navy-2); color:var(--muted); }.session-progress { flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,.1); }.session-progress i { display:block; height:100%; border-radius:inherit; background:var(--lime); transition:width .3s; }.session-count { color:var(--muted); font-size:13px; white-space:nowrap; }.game-card { padding: clamp(22px, 5vw, 44px); text-align:center; }.game-card .eyebrow { color: var(--lime); }.game-card h1 { margin:10px auto 8px; font:600 clamp(28px, 5vw, 44px)/1.05 'Space Grotesk', sans-serif; letter-spacing:-.05em; }.game-card .game-intro { max-width:480px; margin:0 auto 29px; color:var(--muted); }.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:480px; margin:0 auto 24px; }.choice { min-height:68px; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04); color:var(--ink); font-weight:600; }.choice:hover { border-color:var(--sky); background:rgba(113,196,255,.09); }.choice.selected { border-color:var(--lime); background:rgba(183,235,98,.15); }.choice.correct { border-color:var(--lime); background:rgba(183,235,98,.18); }.choice.wrong { border-color:var(--coral); background:rgba(250,118,95,.16); }.word-display { display:flex; justify-content:center; gap:10px; margin:20px 0 27px; flex-wrap:wrap; }.syllable { padding:13px 16px; border-radius:12px; color:var(--navy); background:var(--lime); font:600 21px 'Space Grotesk',sans-serif; }.reading-text { max-width:500px; margin:0 auto 25px; padding:22px; border-left:3px solid var(--lime); background:rgba(255,255,255,.04); color:#deebee; text-align:left; font-size:18px; line-height:1.7; }.answer-input { width:min(100%, 420px); height:56px; margin-bottom:16px; padding:0 17px; border:1px solid var(--line); border-radius:13px; background:#08192f; color:var(--ink); text-align:center; font-size:20px; }.feedback { min-height:24px; margin:12px 0 0; font-size:14px; }.feedback.good { color:var(--lime); }.feedback.bad { color:var(--coral); }.complete-card { padding:38px; text-align:center; }.trophy { font-size:58px; margin-bottom:10px; }.reward-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:27px 0; }.reward { padding:11px 16px; border-radius:12px; background:rgba(183,235,98,.13); color:var(--lime); font-weight:700; }
.bottom-nav { display:none; }
.install-banner { position:fixed; left:50%; bottom:22px; z-index:20; display:flex; align-items:center; gap:12px; width:min(calc(100% - 28px), 390px); padding:12px 13px; border:1px solid rgba(183,235,98,.28); border-radius:15px; background:#142b47; box-shadow:0 16px 35px rgba(0,0,0,.35); transform:translate(-50%, 160%); transition:transform .3s; }.install-banner.show { transform:translate(-50%,0); }.install-banner p { flex:1; margin:0; font-size:13px; }.install-banner strong { display:block; font-size:14px; }.install-banner button { padding:9px 11px; border-radius:10px; background:var(--lime); color:var(--navy); font-size:13px; font-weight:700; }.install-banner .dismiss { padding:8px; background:transparent; color:var(--muted); }
.toast { position:fixed; z-index:30; left:50%; bottom:28px; padding:12px 17px; border:1px solid var(--line); border-radius:12px; background:#173554; color:var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.3); transform:translate(-50%, 150%); transition:transform .25s; font-size:14px; }.toast.show { transform:translate(-50%,0); }

@media (max-width: 900px) { .sidebar { width:76px; padding-inline:12px; }.brand { margin-inline:auto; }.brand span, .nav-button span, .side-footer { display:none; }.nav-button { justify-content:center; padding:0; }.nav-button.active { box-shadow:inset 3px 0 var(--lime); }.content-grid { grid-template-columns:1fr; }.content-grid > .stack:last-child { display:grid; grid-template-columns:1fr 1fr; }.hero-card-content { max-width:72%; } }
@media (max-width: 650px) { .app-shell { display:block; padding-bottom:75px; }.sidebar { display:none; }.main { padding:18px 14px 26px; }.topbar { margin-bottom:21px; }.topbar h1 { font-size:24px; }.topbar-kicker { font-size:12px; }.top-actions { gap:7px; }.streak-pill { padding:9px 10px; font-size:13px; }.icon-button { display:none; }.content-grid { gap:15px; }.stack { gap:15px; }.content-grid > .stack:last-child { display:flex; gap:15px; }.card-head { padding:18px 17px 0; }.hero-card { min-height:285px; padding:22px 20px; }.hero-card-content { max-width:100%; }.hero-card h2 { max-width:250px; font-size:28px; }.hero-card p { max-width:260px; font-size:14px; }.character-art { right:12px; width:120px; height:147px; transform:scale(.86); transform-origin:bottom right; }.mission-list { grid-template-columns:repeat(2,1fr); padding:16px 17px 0; }.world-map { margin-inline:17px; }.world-footer { padding-inline:17px; }.today-item { padding:10px 0; }.side-card { padding:18px; }.streak-card { padding:16px 18px; }.bottom-nav { position:fixed; z-index:10; bottom:0; left:0; right:0; height:70px; display:flex; justify-content:space-around; align-items:center; border-top:1px solid var(--line); background:rgba(8,21,42,.95); backdrop-filter:blur(18px); }.bottom-nav .nav-button { display:grid; place-items:center; gap:2px; min-width:58px; min-height:52px; padding:4px; font-size:11px; color:var(--muted); }.bottom-nav .nav-button span { display:block; font-size:11px; }.bottom-nav .nav-button.active { box-shadow:none; color:var(--lime); }.page-header h2 { font-size:28px; }.progress-grid { grid-template-columns:1fr; }.stat-grid { grid-template-columns:repeat(3,1fr); gap:7px; }.stat { padding:13px 10px; }.stat strong { font-size:22px; }.stat span { font-size:11px; }.game-card { padding:24px 16px; }.game-card h1 { font-size:31px; }.choice-grid { gap:9px; }.choice { min-height:60px; }.reading-text { font-size:16px; }.complete-card { padding:30px 18px; } }