:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#1f2937;background-color:#f5f7fb;line-height:1.5}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f8fbff,#eef2ff)}#root{min-height:100vh}.page-shell{width:min(760px,92%);margin:0 auto;padding:2rem 0 3rem}.page-header{position:relative;margin-bottom:1rem;padding:1.7rem 1.5rem 1.35rem 14.75rem;background:linear-gradient(135deg,#fff,#eef4ff);border:1px solid #dbeafe;border-radius:18px;box-shadow:0 12px 30px #2563eb1f;overflow:visible}.page-header-copy{position:relative;z-index:1}.brand-title{display:flex;align-items:center;justify-content:flex-start;gap:.65rem}.hero-sparky-peek{position:absolute;left:.4rem;top:50%;transform:translateY(-50%);width:225px;max-width:38vw;height:auto;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(22,101,52,.22));pointer-events:none}.page-header h1{margin:0;color:#1d4ed8;font-size:2.2rem}.page-header p{margin-top:.4rem;color:#4b5563}.install-link-row{margin-top:.3rem}.install-link-row a{color:#1d4ed8;font-weight:600;text-decoration:none}.install-link-row a:hover{text-decoration:underline}.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:1.25rem;box-shadow:0 10px 25px #1e40af12;margin-bottom:1rem}label{display:block;margin-top:.85rem;margin-bottom:.35rem;font-weight:600}input,textarea,select,button{width:100%;font:inherit}input,textarea,select{border:1px solid #d1d5db;border-radius:10px;padding:.65rem .75rem;background:#fff}button{margin-top:1rem;border:none;border-radius:10px;padding:.75rem .9rem;background-color:#2563eb;color:#fff;font-weight:700;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.7}.story-sections{display:grid;gap:.8rem}.story-section{border:1px solid #e5e7eb;border-radius:10px;padding:.85rem;background:#f9faff}.story-section h3{margin:0 0 .35rem;color:#1e3a8a;font-size:1rem}.story-section p{margin:0}.progress-text{margin-top:0;margin-bottom:.45rem;color:#1e3a8a;font-weight:700}.words-practiced-text{margin-top:-.2rem;margin-bottom:.55rem;color:#334155;font-size:.9rem;font-weight:600}.quest-type-text{margin-top:0;margin-bottom:.35rem;color:#334155;font-size:.95rem;text-transform:capitalize}.progress-track{width:100%;height:10px;border-radius:999px;background:#dbeafe;margin-bottom:.9rem;overflow:hidden}.progress-fill{height:100%;background:#2563eb;transition:width .22s ease}.challenge-word{margin-top:0;margin-bottom:.6rem;font-size:1.1rem;font-weight:700;color:#1d4ed8}.word-highlight{background:#fde68a;padding:0 .15rem;border-radius:4px}.feedback-text{margin-bottom:0;font-weight:600}.inline-feedback{margin-top:.55rem;margin-bottom:.1rem}.feedback-text.success{color:#14532d}.feedback-text.error{color:#b91c1c}.completion-text{margin-top:0;margin-bottom:.8rem;color:#1e3a8a;font-weight:700}.completion-panel{border:1px solid #bfdbfe;background:#eff6ff;border-radius:12px;padding:.9rem;margin-top:.7rem}.completion-reward{text-align:center;padding-bottom:.75rem}.completion-star{font-size:2.5rem;line-height:1;margin-bottom:.25rem}.completion-star-icon{display:inline-block;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 32% 32%,#fef9c3,#facc15 56%,#ca8a04);box-shadow:0 0 0 3px #fef3c7,0 10px 18px #ca8a0459}.completion-title{margin:0 0 .3rem;color:#1e3a8a;font-size:1.35rem}.completion-name{margin:0 0 .15rem;font-size:1.05rem;color:#1d4ed8;font-weight:700}.completion-story-name{margin:0 0 .4rem;color:#334155;font-size:.9rem;font-style:italic}.completion-xp{display:inline-flex;align-items:center;gap:.35rem;background:#16a34a;color:#fff;font-size:.95rem;font-weight:700;padding:.3rem .9rem;border-radius:999px;margin-bottom:.6rem}.parent-summary{text-align:left;border:1px solid #bfdbfe;background:#fff;border-radius:10px;padding:.65rem .75rem;margin-top:.8rem}.parent-summary h4{margin:0 0 .3rem;color:#1e3a8a;font-size:.95rem}.parent-summary p{margin:.18rem 0;color:#334155;font-size:.88rem;font-weight:600}.hearts-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}.hearts-label{font-size:.9rem;font-weight:600;color:#1e3a8a}.hearts-display{display:inline-flex;gap:.3rem}.energy-heart{width:16px;height:16px;border-radius:50%;border:2px solid #9ca3af;background:transparent}.energy-heart.filled{border-color:#e11d48;background:#fb7185;box-shadow:0 0 0 2px #ffe4e6}.energy-heart.empty{border-color:#6b7280;background:#e5e7eb}.xp-badge{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;background:#16a34a;color:#fff;font-size:.8rem;font-weight:700;padding:.2rem .55rem;border-radius:999px}.streak-badge{display:inline-flex;align-items:center;font-size:.8rem;font-weight:700;color:#854d0e;background:#fef3c7;border:1px solid #fcd34d;border-radius:999px;padding:.2rem .55rem}.xp-icon{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fef9c3,#facc15 60%,#ca8a04);box-shadow:0 0 0 2px #ffffff47}.secondary-button{background:#0f172a}.sound-icon{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:#22d3ee;box-shadow:0 0 0 3px #22d3ee3d}.secondary-button .btn-sparky-icon{width:24px;height:24px;object-fit:cover;border-radius:50%;vertical-align:middle;margin-right:6px}.letter-boxes{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0 14px}.letter-box{width:42px;height:42px;border:2px solid #d1d5db;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;background:#fff}.letter-box-revealed{border-color:#16a34a;background:#dcfce7;color:#15803d}.letter-box-space{width:18px}.choice-prompt{font-weight:600;margin-bottom:4px;color:#374151}.choice-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:12px 0}.unscramble-answer{border:2px dashed #93c5fd;background:#eff6ff;color:#1e3a8a;border-radius:10px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;letter-spacing:.06rem;margin:8px 0 2px;padding:.35rem .6rem}.choice-button{padding:16px 28px;font-size:1.15rem;font-weight:700;border:2.5px solid #7c3aed;border-radius:14px;background:#fff;color:#7c3aed;cursor:pointer;min-width:110px;transition:background .15s,color .15s}.choice-button:hover,.choice-button:active{background:#7c3aed;color:#fff}.loading-text{margin:0;color:#1e3a8a;font-weight:600}.error-card{border-color:#fecaca;background:#fff1f2}.error-text{color:#b91c1c;margin-top:.75rem;margin-bottom:0}@media(max-width:640px){.page-header{padding:10rem 1rem 1rem;text-align:center}.page-header-copy{position:static}.brand-title{justify-content:center}.hero-sparky-peek{left:50%;bottom:auto;top:-1.1rem;transform:translate(-50%);width:210px;max-width:62vw}.page-header h1{font-size:1.9rem}.card{padding:1rem}}.word-report-list{list-style:none;padding:0;margin:10px 0}.word-report-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid #e5e7eb}.word-report-word{font-weight:600;color:#1e3a8a}.word-status-badge{font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:12px}.word-status-badge.mastered{background:#dcfce7;color:#15803d}.word-status-badge.developing{background:#fef9c3;color:#854d0e}.word-status-badge.needs-practice{background:#fee2e2;color:#b91c1c}.word-status-badge.not-started{background:#f3f4f6;color:#6b7280}.accuracy-metrics{display:flex;gap:10px;justify-content:space-between;margin:10px 0 14px}.accuracy-stat{display:flex;flex-direction:column;align-items:center;flex:1;background:#f0f9ff;border-radius:8px;padding:8px 4px}.accuracy-stat-value{font-size:1.25rem;font-weight:800;color:#1e3a8a}.accuracy-stat-label{font-size:.72rem;color:#6b7280;text-align:center;margin-top:2px}.practice-next{background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:8px 12px;margin:10px 0}.practice-next h5{margin:0 0 4px;color:#92400e;font-size:.85rem}.practice-next p{margin:0;color:#78350f;font-weight:600}.trend-section{margin:14px 0 8px}.trend-section h5{margin:0 0 6px;color:#374151;font-size:.85rem}.trend-row{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid #e5e7eb;font-size:.82rem}.trend-date{color:#9ca3af;min-width:64px}.trend-title{flex:1;color:#374151;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trend-score{font-weight:700;color:#1e3a8a;min-width:30px;text-align:right}.copy-summary-btn{display:block;width:100%;margin-top:12px;padding:10px;background:#0d9488;color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .15s}.copy-summary-btn:hover{background:#0f766e}