@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap";@import"https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.0.18/index.min.css";:root{--color-primary: #3B82F6;--color-primary-hover: #2563EB;--color-secondary: #F97316;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-blue: #3B82F6;--color-orange: #F97316;--color-green: #10B981;--color-purple: #8B5CF6;--color-pink: #EC4899;--color-yellow: #F59E0B;--color-bg: #F8FAFC;--color-bg-secondary: #F1F5F9;--color-text: #1E293B;--color-text-secondary: #64748B;--color-border: #E2E8F0;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--font-family: "Nunito", "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-family-dyslexia: "OpenDyslexic", var(--font-family);--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1);--shadow-md: 0 4px 12px 0 rgb(0 0 0 / .08);--shadow-lg: 0 8px 24px 0 rgb(0 0 0 / .1);--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.25rem;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out}[data-theme=high-contrast]{--color-bg: #000000;--color-text: #ffffff;--color-border: #ffffff}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh;font-family:var(--font-family);font-size:18px;line-height:1.6;color:var(--color-text);background:linear-gradient(to bottom,#eff6ff,#fff7ed);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}*:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.2;color:var(--color-text)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}p{margin:0;line-height:1.6}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{font-family:inherit;font-size:1.125rem;font-weight:700;padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-lg);background:var(--color-primary);color:#fff;cursor:pointer;transition:all var(--transition-base);min-height:56px;box-shadow:var(--shadow-md)}button:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media(max-width:640px){h1{font-size:2rem}h2{font-size:1.5rem}}.support-button{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:none;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:1rem;display:inline-flex;align-items:center;gap:.5rem}.support-button--default{background:linear-gradient(135deg,var(--color-purple) 0%,var(--color-indigo) 100%);color:#fff}.support-button--default:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.support-button--subtle{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.support-button--subtle:hover{background:var(--color-bg-secondary);color:var(--color-text)}.support-button--prominent{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff;font-size:1.125rem;padding:var(--spacing-md) var(--spacing-xl);box-shadow:0 4px 12px #ee5a6f4d}.support-button--prominent:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ee5a6f66}.support-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.support-modal{background:var(--color-bg);border-radius:var(--radius-xl);padding:var(--spacing-xl);max-width:500px;width:100%;box-shadow:0 20px 60px #0000004d;position:relative;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.support-modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:none;border:none;font-size:2rem;color:var(--color-text-secondary);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all .2s ease}.support-modal-close:hover{background:var(--color-bg-secondary);color:var(--color-text)}.support-modal h2{margin:0 0 var(--spacing-md) 0;color:var(--color-text);font-size:1.75rem}.support-modal p{color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--spacing-lg)}.support-amounts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.support-amount-btn{padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:1.125rem;font-weight:700;cursor:pointer;transition:all .2s ease}.support-amount-btn:hover{border-color:var(--color-purple);background:var(--color-purple);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.support-amount-btn--custom{grid-column:1 / -1;background:linear-gradient(135deg,var(--color-purple) 0%,var(--color-indigo) 100%);color:#fff;border-color:transparent}.support-amount-btn--custom:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0003}.support-note{font-size:.875rem;color:var(--color-text-secondary);text-align:center;margin:0;font-style:italic}@media(max-width:480px){.support-modal{padding:var(--spacing-lg)}.support-amounts{grid-template-columns:1fr}.support-amount-btn--custom{grid-column:1}}.mascot-container{position:fixed;bottom:2rem;right:2rem;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-md)}.mascot{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--color-blue) 0%,var(--color-teal) 100%);border:4px solid white;box-shadow:0 6px 20px #00000026;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);cursor:pointer}.mascot:hover{transform:scale(1.1) rotate(5deg)}.mascot.bounce{animation:mascotBounce .5s ease-out}.mascot-face{font-size:3rem;line-height:1;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.mascot-celebrating{background:linear-gradient(135deg,var(--color-yellow) 0%,var(--color-orange) 100%);animation:celebrate 1s ease-in-out infinite}.mascot-encouraging{background:linear-gradient(135deg,var(--color-green) 0%,var(--color-teal) 100%)}.mascot-thinking{background:linear-gradient(135deg,var(--color-indigo) 0%,var(--color-purple) 100%)}.mascot-bubble{position:relative;background:#fff;border:3px solid var(--color-primary);border-radius:var(--radius-xl);padding:var(--spacing-md) var(--spacing-lg);box-shadow:0 4px 12px #0000001a;max-width:200px;animation:fadeInUp .3s ease-out}.mascot-bubble:after{content:"";position:absolute;bottom:-12px;right:30px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid white}.mascot-bubble:before{content:"";position:absolute;bottom:-16px;right:27px;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:15px solid var(--color-primary)}.mascot-message{font-size:1rem;font-weight:700;color:var(--color-text);text-align:center;line-height:1.4}@keyframes mascotBounce{0%,to{transform:translateY(0) scale(1)}25%{transform:translateY(-15px) scale(1.1)}50%{transform:translateY(-7px) scale(1.05)}75%{transform:translateY(-10px) scale(1.08)}}@keyframes celebrate{0%,to{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.mascot-container{bottom:1rem;right:1rem}.mascot{width:60px;height:60px}.mascot-face{font-size:2rem}.mascot-bubble{max-width:150px;padding:var(--spacing-sm) var(--spacing-md)}.mascot-message{font-size:.875rem}}@media(prefers-reduced-motion:reduce){.mascot.bounce,.mascot-celebrating,.mascot-bubble{animation:none}}.app-layout{min-height:100vh;display:flex;flex-direction:column}.main-nav{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);background:#fff;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.main-nav .logo{font-size:1.5rem;font-weight:700;color:var(--color-primary);transition:all var(--transition-base)}.main-nav .logo:hover{color:var(--color-primary-hover)}.nav-links{display:flex;gap:var(--spacing-lg)}.nav-links a{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);transition:all var(--transition-base);display:flex;align-items:center;font-weight:600;color:var(--color-text-secondary)}.nav-links a:hover{color:var(--color-primary);background:var(--color-bg-secondary)}.main-content{flex:1;padding:var(--spacing-xl);max-width:1200px;width:100%;margin:0 auto}.footer{padding:var(--spacing-xl);text-align:center;background:#fff;border-top:1px solid var(--color-border);color:var(--color-text-secondary);font-size:1rem;font-weight:600}.home{text-align:center}.home h1{margin-bottom:var(--spacing-md)}.home p{color:var(--color-text-secondary);margin-bottom:var(--spacing-2xl);font-size:1.125rem}.track-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}.track-card{padding:var(--spacing-2xl);background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-base);text-align:center;box-shadow:var(--shadow-md);min-height:200px;display:flex;flex-direction:column;justify-content:center;cursor:pointer}.track-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.track-card h2{color:var(--color-text);margin-bottom:var(--spacing-md);font-size:1.75rem}.track-card p{color:var(--color-text);font-size:1.125rem;font-weight:600}.not-found{text-align:center;padding:var(--spacing-2xl)}.not-found h1{margin-bottom:var(--spacing-md);color:var(--color-error)}.not-found p{margin-bottom:var(--spacing-xl);color:var(--color-text-secondary)}.not-found a{display:inline-block;padding:var(--spacing-md) var(--spacing-xl);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-weight:500;transition:background-color var(--transition-fast)}.not-found a:hover{background-color:var(--color-primary-hover)}@media(max-width:640px){.main-content{padding:var(--spacing-md)}.track-selection{grid-template-columns:1fr}.main-nav{padding:var(--spacing-sm) var(--spacing-md)}}.toast{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:0 4px 12px #00000026;background:var(--color-bg);border-left:4px solid;min-width:300px;max-width:500px;cursor:pointer;transition:all .3s ease;animation:slideIn .3s ease;position:relative}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast:hover{transform:translate(-4px);box-shadow:0 6px 16px #0003}.toast--success{border-left-color:var(--color-success);background:#22c55e1a}.toast--error{border-left-color:var(--color-error, #ef4444);background:#ef44441a}.toast--info{border-left-color:var(--color-blue);background:#3b82f61a}.toast--warning{border-left-color:var(--color-orange);background:#f973161a}.toast-icon{font-size:1.25rem;flex-shrink:0}.toast-message{flex:1;color:var(--color-text);font-weight:500;line-height:1.4}.toast-close{background:none;border:none;font-size:1.5rem;color:var(--color-text-secondary);cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s ease;flex-shrink:0}.toast-close:hover{background:#0000001a;color:var(--color-text)}@media(max-width:480px){.toast-container{top:var(--spacing-md);right:var(--spacing-md);left:var(--spacing-md)}.toast{min-width:auto;max-width:100%}}.toast-container{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:10000;display:flex;flex-direction:column;gap:var(--spacing-sm);pointer-events:none}.toast-container>*{pointer-events:auto}@media(max-width:480px){.toast-container{top:var(--spacing-md);right:var(--spacing-md);left:var(--spacing-md)}}.error-boundary{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);background:var(--color-bg)}.error-boundary-content{max-width:600px;text-align:center;padding:var(--spacing-xl);background:var(--color-bg-secondary);border-radius:var(--radius-xl);box-shadow:0 4px 12px #0000001a}.error-boundary-content h1{font-size:2rem;margin-bottom:var(--spacing-md);color:var(--color-text)}.error-boundary-content p{font-size:1.125rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);line-height:1.6}.error-details{margin:var(--spacing-lg) 0;text-align:left;background:var(--color-bg);border-radius:var(--radius-md);padding:var(--spacing-md)}.error-details summary{cursor:pointer;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);-webkit-user-select:none;user-select:none}.error-details summary:hover{color:var(--color-purple)}.error-stack{font-family:Courier New,monospace;font-size:.875rem;color:var(--color-error);white-space:pre-wrap;word-break:break-all;overflow-x:auto;padding:var(--spacing-sm);background:#0000000d;border-radius:var(--radius-sm);margin-top:var(--spacing-sm)}.error-actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;margin-top:var(--spacing-lg)}.error-button{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:120px}.error-button--primary{background:linear-gradient(135deg,var(--color-purple) 0%,var(--color-indigo) 100%);color:#fff}.error-button--primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.error-button--secondary{background:var(--color-bg);color:var(--color-text);border:2px solid var(--color-border)}.error-button--secondary:hover{background:var(--color-bg-secondary);border-color:var(--color-purple)}