@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap";:root{--color-bg-primary: #fdfbf7;--color-text-primary: #2d2a26;--color-text-secondary: #666;--color-accent-primary: #FFB347;--color-accent-secondary: #FFD1DC;--color-accent-tertiary: #AEC6CF;--color-danger: #FF6961;--color-success: #77DD77;--color-card-bg: #ffffff;--color-surface: #ffffff;--color-surface-sunken: #f5f5f5;--color-border: #e0e0e0;--color-text-tertiary: #999;--color-primary: #FFB347;--font-main: "Outfit", sans-serif;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 32px;--radius-lg: 24px;--radius-md: 12px;--shadow-card: 0 10px 30px rgba(0, 0, 0, .08);--shadow-card-hover: 0 20px 40px rgba(0, 0, 0, .12)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden;line-height:1.5;font-size:clamp(.875rem,2vw,1rem)}#root{width:100%;max-width:600px;padding:var(--spacing-md);margin:0 auto}@media(min-width:768px){#root{max-width:720px;padding:var(--spacing-lg)}body{font-size:1rem}}@media(min-width:1025px){#root{max-width:800px;padding:var(--spacing-lg)}}@media(orientation:landscape)and (max-height:600px){#root{padding:var(--spacing-sm)}.flashcard-container{max-height:300px!important}}.btn-reset{background:none;border:none;cursor:pointer;font-family:inherit}.card-base{background:var(--color-card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-slide-in{animation:slideIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*:focus{outline:none}*:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px;border-radius:4px}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--color-accent-primary);outline-offset:3px}.progress-bar{width:100%;height:8px;background:var(--color-surface-sunken, #f0f0f0);border-radius:4px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary));border-radius:4px;transition:width .3s ease}@keyframes celebrate{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.celebrate{animation:celebrate .4s ease}.touch-target{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.speaking{animation:pulse 1s ease-in-out infinite}.stage-selector-container{margin-bottom:var(--spacing-md)}.stage-tabs-scroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-accent-primary) var(--color-surface-sunken);padding:8px 0;margin:0 -4px}.stage-tabs-scroll::-webkit-scrollbar{height:6px}.stage-tabs-scroll::-webkit-scrollbar-track{background:var(--color-surface-sunken);border-radius:3px}.stage-tabs-scroll::-webkit-scrollbar-thumb{background:var(--color-accent-primary);border-radius:3px}.stage-tab{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:10px 16px;border:2px solid var(--color-border);border-radius:20px;background:var(--color-surface);color:var(--color-text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;scroll-snap-align:center;white-space:nowrap}.stage-tab:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.stage-tab.active{border-color:var(--color-accent-primary);background:var(--color-accent-primary);color:#fff;font-weight:600}.stage-tab.phonics{border-color:var(--color-accent-tertiary)}.stage-tab.phonics.active{background:var(--color-accent-tertiary);border-color:var(--color-accent-tertiary)}.stage-tab.words{border-color:#7d7}.stage-tab.words.active{background:#7d7;border-color:#7d7}.stage-tab.sight-words{border-color:var(--color-accent-secondary)}.stage-tab.sight-words.active{background:var(--color-accent-secondary);border-color:var(--color-accent-secondary)}.stage-icon{font-size:1rem;line-height:1}.stage-tab.complete .stage-icon{color:var(--color-success)}.stage-tab.complete.active .stage-icon{color:#fff}.stage-tab.in-progress .stage-icon{color:var(--color-accent-primary)}.stage-tab.in-progress.active .stage-icon{color:#fff}.stage-tab.locked .stage-icon{color:var(--color-text-tertiary);opacity:.5}.stage-title{font-size:.85rem}@media(min-width:768px){.stage-tabs-scroll{justify-content:center;flex-wrap:wrap;overflow-x:visible}.stage-tab{font-size:1rem}.stage-title{font-size:.9rem}}.session-summary-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.session-summary-card{max-width:500px;width:100%;padding:var(--spacing-lg);animation:slideIn .4s cubic-bezier(.34,1.56,.64,1)}.analytics-dashboard{width:100%;max-width:800px;margin:0 auto;padding:var(--spacing-md)}.analytics-dashboard .chart{position:relative}@media(max-width:480px){.total-stats{grid-template-columns:repeat(2,1fr)!important}.chart{height:120px!important}}@keyframes confettiFall{0%{transform:translateY(0) translate(0) rotate(0);opacity:1}to{transform:translateY(100vh) translate(calc(var(--velocity-x) * 100px)) rotate(calc(var(--rotation-speed) * 360deg));opacity:0}}.confetti-particle{border-radius:2px}.btn-reset:not(:disabled):hover{transform:scale(1.02);transition:transform .2s ease}.btn-reset:not(:disabled):active{transform:scale(.98);transition:transform .1s ease}.btn-reset{position:relative;overflow:hidden}.btn-reset:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff80;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-reset:active:after{width:300px;height:300px}.speaker-button.speaking{box-shadow:0 0 20px #ffb34799;transition:box-shadow .3s ease}.achievement-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease;cursor:pointer}.achievement-badge{background:var(--color-card-bg);padding:var(--spacing-lg);border-radius:20px;text-align:center;max-width:400px;border:4px solid;animation:bounceIn .6s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 10px 40px #0000004d}@keyframes bounceIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.achievement-icon{animation:rotate .8s ease-in-out}@keyframes rotate{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.onboarding-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10001;padding:var(--spacing-md)}.onboarding-card{background:var(--color-card-bg);padding:var(--spacing-xl);border-radius:20px;text-align:center;max-width:600px;width:100%;animation:slideIn .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 10px 40px #0000004d}.onboarding-icon{margin-bottom:16px;animation:bounceIn .8s ease}.settings-screen{width:100%;max-width:600px;margin:0 auto;padding:var(--spacing-md)}.settings-section{background:var(--color-card-bg);padding:var(--spacing-lg);border-radius:12px;margin-bottom:var(--spacing-md)}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-border)}.setting-item:last-child{border-bottom:none}.toggle-switch{position:relative;width:50px;height:26px;appearance:none;background:var(--color-border);border-radius:13px;cursor:pointer;transition:background .3s ease}.toggle-switch:checked{background:var(--color-accent-primary)}.toggle-switch:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .3s ease}.toggle-switch:checked:before{transform:translate(24px)}.btn-install{width:100%;padding:16px;border:none;border-radius:12px;background:var(--color-primary);color:#fff;font-weight:700;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;box-shadow:0 4px 15px #6a5acd4d;margin-top:8px}.btn-install:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 20px #6a5acd66}.btn-install:active{transform:translateY(0)}.flashcard-container{perspective:1200px;width:100%;max-width:440px;touch-action:none;margin:0 auto var(--spacing-lg);display:flex;align-items:center;justify-content:center}.flashcard{position:relative;width:100%;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),background-color .3s ease,border-color .3s ease;transform-style:preserve-3d;cursor:grab}.flashcard:active{cursor:grabbing}.flashcard.flip-entry{animation:flipIn .7s cubic-bezier(.175,.885,.32,1.275)}@keyframes flipIn{0%{transform:rotateY(-180deg) scale(.8);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}.flashcard.swiping-right{background-color:#4caf5026!important;border:4px solid var(--color-success)!important}.flashcard.swiping-left{background-color:#f4433626!important;border:4px solid var(--color-danger)!important}.swipe-label{position:absolute;top:32px;padding:8px 16px;border-radius:12px;font-weight:800;font-size:1.4rem;text-transform:uppercase;z-index:10;opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none}.swipe-label.right{right:32px;color:var(--color-success);border:4px solid var(--color-success);transform:rotate(-12deg)}.swipe-label.left{left:32px;color:var(--color-danger);border:4px solid var(--color-danger);transform:rotate(12deg)}.flashcard.swiping-right .swipe-label.right{opacity:1;transform:rotate(-12deg) scale(1.1)}.flashcard.swiping-left .swipe-label.left{opacity:1;transform:rotate(12deg) scale(1.1)}.card-pattern{position:relative;overflow:hidden;background-color:var(--color-card-bg)!important}.card-pattern:before{content:"";position:absolute;inset:0;opacity:.04;pointer-events:none;background-image:radial-gradient(var(--color-primary) 1.5px,transparent 1.5px);background-size:24px 24px;z-index:1}.phonetic-display{font-family:Inter,monospace;letter-spacing:1px;background:#0000000d;padding:2px 8px;border-radius:4px}.speaker-button.speaking{transform:scale(1.1);box-shadow:0 0 15px var(--color-accent-secondary)}.speaker-button:active{transform:scale(.95)}.app-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);width:100%}