:root{--color-background: #fff9ec;--color-surface: #fff9ec;--color-surface-dim: #e0dac7;--color-surface-container-lowest: #ffffff;--color-surface-container-low: #faf3e0;--color-surface-container: #f4eedb;--color-surface-container-high: #efe8d5;--color-surface-container-highest: #e9e2d0;--color-on-surface: #1e1c10;--color-on-surface-variant: #414943;--color-outline: #717972;--color-outline-variant: #c0c9c1;--color-surface-tint: #36684e;--color-primary: #0f442d;--color-on-primary: #ffffff;--color-primary-container: #2a5c43;--color-on-primary-container: #9dd2b3;--color-primary-fixed: #b9efce;--color-primary-fixed-dim: #9dd2b3;--color-secondary: #8e4e14;--color-on-secondary: #ffffff;--color-secondary-container: #ffab69;--color-on-secondary-container: #783d01;--color-tertiary: #731b04;--color-on-tertiary: #ffffff;--color-tertiary-container: #933219;--color-on-tertiary-container: #ffb4a2;--color-error: #ba1a1a;--color-on-error: #ffffff;--color-success: #0f442d;--color-on-success: #0f442d;--color-success-muted: #b9efce;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: 1rem;--radius-full: 9999px;--space-unit: 8px;--space-xs: 4px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-margin: 20px;--font-headline: "Lexend", system-ui, sans-serif;--font-body: "Plus Jakarta Sans", system-ui, sans-serif;--shadow-card: 0 4px 14px rgba(15, 68, 45, .12);--shadow-lift: 0 6px 20px rgba(15, 68, 45, .18);--shadow-press: inset 0 -3px 0 rgba(15, 68, 45, .35)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--color-background);color:var(--color-on-surface);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100dvh}.app-shell{min-height:100dvh;display:flex;justify-content:center;align-items:stretch;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:linear-gradient(180deg,var(--color-surface-container) 0%,var(--color-background) 40%)}.app-phone{width:100%;max-width:430px;min-height:100dvh;display:flex;flex-direction:column;background:var(--color-surface);box-shadow:var(--shadow-card)}.app-header{flex-shrink:0;padding:var(--space-sm) var(--space-margin) 0;padding-top:calc(var(--space-sm) + env(safe-area-inset-top))}.app-header-inner{display:grid;grid-template-columns:2rem 1fr 2rem;align-items:center;gap:var(--space-sm);min-height:2.5rem}.app-header-leading{display:flex;justify-content:flex-start}.app-header-title{margin:0;padding:0;font-family:var(--font-headline);font-size:.9375rem;font-weight:700;line-height:1.2;color:var(--color-primary);text-align:center}.app-header-settings{justify-self:end;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:var(--radius-md);background:transparent;color:var(--color-on-surface-variant);cursor:pointer}.app-header-settings:hover{background:var(--color-surface-container-low)}.app-header-icon{display:block;color:var(--color-primary)}.app-header-icon-muted{color:var(--color-on-surface-variant)}.app-header-rule{height:1px;margin-top:var(--space-sm);background:var(--color-outline-variant);opacity:.7}.app-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--space-md) var(--space-margin);padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom))}.headline-lg{font-family:var(--font-headline);font-size:1.75rem;font-weight:600;line-height:1.2;margin:0 0 var(--space-md);color:var(--color-primary)}.headline-md{font-family:var(--font-headline);font-size:1.25rem;font-weight:600;line-height:1.3;margin:0 0 var(--space-sm);color:var(--color-on-surface)}.body-md{font-family:var(--font-body);font-size:1rem;font-weight:400;line-height:1.5;margin:0 0 var(--space-md);color:var(--color-on-surface-variant)}.body-md small{font-size:.8125rem;color:var(--color-outline)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:14px 20px;border:none;border-radius:var(--radius-lg);font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.2;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--color-on-primary);box-shadow:var(--shadow-lift),var(--shadow-press);border-radius:var(--radius-lg)}.btn-primary:hover:not(:disabled){background:var(--color-primary-container)}.btn-primary:active:not(:disabled){box-shadow:var(--shadow-card)}.btn-secondary{background:var(--color-secondary-container);color:var(--color-on-secondary-container);box-shadow:0 4px #8e4e1459}.btn-secondary:hover:not(:disabled){filter:brightness(1.03)}.btn-secondary:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.btn-ghost{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-gold{background:linear-gradient(180deg,var(--color-secondary-container) 0%,#f4a261 100%);color:var(--color-on-secondary-container);font-weight:700;box-shadow:0 4px #8e4e1466}.btn-gold:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.card{background:var(--color-surface-container-low);border:none;border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:var(--shadow-card)}.loading-state,.error-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-lg)}.error-state .body-md{color:var(--color-error)}.spinner{width:40px;height:40px;border:3px solid var(--color-outline-variant);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:var(--space-md)}@keyframes spin{to{transform:rotate(360deg)}}.view-welcome{display:flex;flex-direction:column;flex:1;text-align:center}.welcome-hero{position:relative;margin-bottom:var(--space-md);overflow:hidden}.welcome-hero-img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;vertical-align:middle}.welcome-hero-badge{position:absolute;top:10px;right:10px;padding:6px 10px;border-radius:var(--radius-full);background:var(--color-tertiary-container);color:var(--color-on-primary);font-family:var(--font-headline);font-size:.625rem;font-weight:700;letter-spacing:.06em}.welcome-headline{text-align:center}.welcome-body{white-space:pre-wrap;text-align:center}.welcome-actions{margin-top:auto;margin-bottom:auto;padding-top:var(--space-lg);display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.btn-welcome-cta{background:var(--color-secondary-container);color:var(--color-on-secondary-container);font-weight:700;font-size:1.05rem;box-shadow:0 4px #8e4e1461;border-radius:var(--radius-lg)}.btn-welcome-cta:hover:not(:disabled){filter:brightness(1.03)}.btn-welcome-cta:active:not(:disabled){box-shadow:none;transform:translateY(3px)}.welcome-cta-icon{display:inline-flex;opacity:.95}.welcome-dots{display:flex;gap:8px;justify-content:center}.welcome-dot{width:8px;height:8px;border-radius:50%;background:var(--color-outline-variant);opacity:.6}.welcome-dot.is-active{background:var(--color-on-surface-variant);opacity:1}.view-question{display:flex;flex-direction:column;flex:1;min-height:0}.question-scroll{flex:1;min-height:0;overflow:visible;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-sm)}.view-question:has(.correct-cta--dock) .question-scroll{padding-bottom:calc(env(safe-area-inset-bottom) + 11rem)}.episode-row{margin-bottom:var(--space-sm);font-family:var(--font-headline);font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-secondary)}.progress-track{width:100%;height:10px;border-radius:var(--radius-full);background:var(--color-surface-container);overflow:hidden;margin-bottom:var(--space-md)}.progress-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-secondary-container) 0%,var(--color-tertiary-container) 100%);transition:width .35s ease}.video-wrap{padding:0;overflow:hidden;margin-bottom:var(--space-md);border-radius:var(--radius-lg)}.video-wrap.card{padding:0}.question-video{display:block;width:100%;height:250px;background:#1a1810;border-radius:var(--radius-lg)}.video-error{margin:0;padding:var(--space-md);color:var(--color-error)}.question-prompt{margin-bottom:var(--space-md);color:var(--color-on-secondary-container)}.choice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}.choice-row{width:100%;padding:12px;border:1px solid var(--color-outline-variant);border-radius:var(--radius-md);background:var(--color-surface-container-lowest);color:var(--color-on-surface);font-family:var(--font-body);font-size:1rem;line-height:1.35;cursor:pointer;box-shadow:var(--shadow-card);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.choice-row:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-lift)}.choice-row:disabled:not(.choice-row-correct):not(.choice-row-incorrect){cursor:not-allowed;opacity:.55;color:var(--color-on-surface-variant);background:var(--color-surface-container);border-color:var(--color-outline-variant);box-shadow:none;font-weight:400}.choice-text{flex:1}.choice-row-selected{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);background:var(--color-surface-container-low)}.choice-row-correct{background:var(--color-success-muted);color:var(--color-success);font-weight:600;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.choice-row-incorrect{background:#ba1a1a1a;color:var(--color-error);font-weight:600;border-color:var(--color-error);box-shadow:0 0 0 2px var(--color-error)}.choice-hint{margin:var(--space-md) 0 0;text-align:center;font-family:var(--font-headline);font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-secondary);opacity:.9}.correct-cta{padding:var(--space-md);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--color-success-muted) 0%,#a8e0c0 100%);border:1px solid rgba(15,68,45,.2);box-shadow:var(--shadow-card)}.correct-cta.correct-cta--dock{position:fixed;z-index:50;left:calc(50vw - (min(430px,100vw)/2));width:min(430px,100vw);bottom:0;box-sizing:border-box;padding-top:var(--space-md);padding-left:max(env(safe-area-inset-left),var(--space-margin));padding-right:max(env(safe-area-inset-right),var(--space-margin));padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom));border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none;box-shadow:0 -10px 28px #0f442d24;animation:correct-cta-dock-in .32s cubic-bezier(.22,1,.36,1) both}@keyframes correct-cta-dock-in{0%{transform:translateY(100%);opacity:.96}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.correct-cta--dock{animation:none}}.correct-cta-label{margin:0 0 var(--space-sm);font-family:var(--font-headline);font-size:1.125rem;font-weight:700;line-height:1.2;color:var(--color-primary);text-align:center;letter-spacing:.02em}.btn-next{margin-top:0}.welcome-hero.card{padding:0}.view-finish{display:flex;flex-direction:column;flex:1;gap:var(--space-md);text-align:center}.finish-headline{text-align:center;margin-bottom:0}.finish-headline--imperfect{color:var(--color-error)}.finish-rednote-link{text-decoration:none;width:100%;box-sizing:border-box}.finish-score{margin:0;font-family:var(--font-headline);font-size:1.25rem;font-weight:600;line-height:1.35;color:var(--color-primary);text-align:center}.finish-score strong{font-weight:800}.finish-subtitle{margin:0 0 var(--space-sm);font-family:var(--font-headline);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-on-surface-variant)}.finish-message{text-align:center}.btn-finish-primary{font-size:1.02rem}.finish-cta-icon{display:inline-flex;margin-left:2px}.btn-finish-secondary{background:var(--color-surface-container-low);color:var(--color-primary);border:2px solid var(--color-primary);font-weight:600;margin-top:auto}.reward-wrap{min-height:200px;display:flex;align-items:center;justify-content:center;position:relative}.reward-wrap .spinner{position:absolute}.reward-img{max-width:100%;height:auto;border-radius:var(--radius-lg);display:block}.reward-error{margin:0;color:var(--color-error)}.finish-again{margin-top:0}