:root{--deep-ocean: #0F172A;--ocean: #0f2847;--ocean-light: #334155;--teal: #0d7377;--aqua: #14a3c7;--aqua-bright: #22d3ee;--light-aqua: #5ec6d8;--foam: #b8e8f0;--white: #f0f8ff;--pure-white: #ffffff;--coral: #ff6b6b;--gold: #ffd93d;--mint: #6bffc1;--lavender: #b8b8ff;--glass-bg: rgba(15, 23, 42, .6);--glass-bg-heavy: rgba(15, 23, 42, .85);--glass-border: rgba(34, 211, 238, .12);--glass-blur: blur(16px);--depth-raised: 0 2px 8px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);--depth-pressed: inset 0 2px 6px rgba(0, 0, 0, .4), inset 0 1px 2px rgba(0, 0, 0, .3);--shadow-elevation-1: 0 4px 12px rgba(0, 0, 0, .25), 0 1px 4px rgba(0, 0, 0, .15);--shadow-elevation-2: 0 8px 24px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);--cat-memory: #5e9eff;--cat-attention: #ff7e5e;--cat-flexibility: #a97eff;--cat-language: #5effa0;--cat-creativity: #ff5eb8;--cat-emotional: #ffe05e;--cat-navigation: #5ee8ff;--cat-coordination: #ff5e5e;--bg-primary: var(--deep-ocean);--bg-secondary: var(--ocean);--bg-card: rgba(15, 40, 71, .8);--text-primary: var(--white);--text-secondary: var(--foam);--text-muted: rgba(184, 232, 240, .6);--accent: var(--aqua);--success: var(--mint);--warning: var(--gold);--error: var(--coral);--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-dyslexia: "OpenDyslexic", var(--font-primary);--font-size-base: 16px;--font-size-sm: 14px;--font-size-xs: 12px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 40px;--font-scale: 1;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px rgba(20, 163, 199, .3);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--game-speed: 1}[data-font-scale=small]{--font-scale: .85}[data-font-scale=medium]{--font-scale: 1}[data-font-scale=large]{--font-scale: 1.2}[data-font-scale=xlarge]{--font-scale: 1.4}[data-dyslexia-font=true]{--font-primary: var(--font-dyslexia)}[data-high-contrast=true]{--bg-primary: #000000;--bg-secondary: #1a1a1a;--bg-card: #1a1a1a;--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-muted: #b0b0b0;--accent: #00d4ff}[data-colorblind=deuteranopia]{--cat-memory: #5e9eff;--cat-attention: #d4a017;--cat-flexibility: #a97eff;--cat-language: #5e9eff;--cat-creativity: #d4a017;--cat-emotional: #ffff5e;--cat-navigation: #5e9eff;--cat-coordination: #d4a017;--success: #5e9eff;--error: #d4a017}[data-colorblind=protanopia]{--cat-memory: #5e9eff;--cat-attention: #c4a000;--cat-flexibility: #a97eff;--cat-language: #5e9eff;--cat-creativity: #c4a000;--cat-emotional: #ffff5e;--cat-navigation: #5e9eff;--cat-coordination: #c4a000;--success: #5e9eff;--error: #c4a000}[data-colorblind=tritanopia]{--cat-memory: #ff6b6b;--cat-attention: #ff6b6b;--cat-flexibility: #ff9e5e;--cat-language: #5e9eff;--cat-creativity: #ff9e5e;--cat-emotional: #ff6b6b;--cat-navigation: #5e9eff;--cat-coordination: #ff9e5e;--success: #5e9eff;--error: #ff6b6b}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:calc(var(--font-size-base) * var(--font-scale));-webkit-text-size-adjust:100%}body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}img{max-width:100%;display:block}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--teal);border-radius:var(--radius-full)}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;transition:all var(--transition-normal);min-height:48px;min-width:48px}.btn-primary{background:linear-gradient(135deg,var(--teal),var(--aqua));color:var(--pure-white);box-shadow:var(--depth-raised),0 0 20px #14a3c740}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-elevation-2),0 0 30px #22d3ee66;background:linear-gradient(135deg,var(--teal),var(--aqua-bright))}.btn-primary:active{transform:translateY(1px);box-shadow:var(--depth-pressed),0 0 12px #14a3c733}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid rgba(94,198,216,.3)}.btn-secondary:hover{border-color:var(--aqua);background:#14a3c71a}.btn-ghost{color:var(--text-secondary)}.btn-ghost:hover{color:var(--text-primary);background:#ffffff0d}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--font-size-lg);min-height:56px}.card{background:var(--glass-bg);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-elevation-1)}.page{flex:1;padding:var(--space-lg);max-width:600px;margin:0 auto;width:100%}.input{width:100%;padding:var(--space-sm) var(--space-md);background:#ffffff0d;border:1px solid rgba(94,198,216,.2);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:var(--font-size-base);min-height:48px;transition:border-color var(--transition-fast)}.input:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px #14a3c733}.input::placeholder{color:var(--text-muted)}textarea.input{min-height:100px;resize:vertical}.bento-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.bento-wide{grid-column:span 2}.bento-tall{grid-row:span 2}@keyframes oceanShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.ocean-bg{background:linear-gradient(135deg,var(--deep-ocean) 0%,var(--ocean) 30%,var(--teal) 60%,var(--ocean) 80%,var(--deep-ocean) 100%);background-size:400% 400%;animation:oceanShift 20s ease infinite}@keyframes ripple{0%{transform:scale(0);opacity:.6}to{transform:scale(4);opacity:0}}.ripple-container{position:relative;overflow:hidden}.ripple-effect{position:absolute;border-radius:50%;background:#5ec6d866;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.float{animation:float 3s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px #14a3c733}50%{box-shadow:0 0 25px #14a3c780}}.pulse-glow{animation:pulseGlow 2s ease-in-out infinite}@keyframes wave{0%{transform:translate(0) translateZ(0) scaleY(1)}50%{transform:translate(-25%) translateZ(0) scaleY(.55)}to{transform:translate(-50%) translateZ(0) scaleY(1)}}.wave-decoration{position:fixed;bottom:0;left:0;width:200%;height:60px;background:linear-gradient(to top,rgba(13,115,119,.15),transparent);animation:wave 7s cubic-bezier(.36,.45,.63,.53) infinite;pointer-events:none;z-index:0}@keyframes bubbleRise{0%{transform:translateY(100%) scale(0);opacity:0}10%{opacity:.4;transform:translateY(90%) scale(1)}90%{opacity:.2}to{transform:translateY(-20%) scale(.5);opacity:0}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer{background:linear-gradient(90deg,#ffffff08 25%,#ffffff14,#ffffff08 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .4s ease-out}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scaleIn .3s ease-out}@keyframes progressFill{0%{width:0}}.progress-bar{height:6px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--aqua));border-radius:var(--radius-full);transition:width var(--transition-normal);animation:progressFill .5s ease-out}.stagger-children>*{opacity:0;animation:fadeInUp .4s ease-out forwards}.stagger-children>*:nth-child(1){animation-delay:0ms}.stagger-children>*:nth-child(2){animation-delay:50ms}.stagger-children>*:nth-child(3){animation-delay:.1s}.stagger-children>*:nth-child(4){animation-delay:.15s}.stagger-children>*:nth-child(5){animation-delay:.2s}.stagger-children>*:nth-child(6){animation-delay:.25s}.stagger-children>*:nth-child(7){animation-delay:.3s}.stagger-children>*:nth-child(8){animation-delay:.35s}@keyframes auroraShift{0%{background-position:0% 50%,50% 0%,100% 50%}25%{background-position:50% 100%,0% 50%,50% 0%}50%{background-position:100% 50%,50% 100%,0% 50%}75%{background-position:50% 0%,100% 50%,50% 100%}to{background-position:0% 50%,50% 0%,100% 50%}}.aurora-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 20% 40%,rgba(13,115,119,.15) 0%,transparent 70%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(20,163,199,.1) 0%,transparent 70%),radial-gradient(ellipse 70% 50% at 50% 80%,rgba(34,211,238,.08) 0%,transparent 70%);background-size:200% 200%,200% 200%,200% 200%;animation:auroraShift 25s ease-in-out infinite}@supports (animation-timeline: view()){.scroll-reveal{opacity:0;transform:translateY(20px);animation:fadeInUp .4s ease-out both;animation-timeline:view();animation-range:entry 10% entry 40%}}@keyframes microPop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes microShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@keyframes successPulse{0%{box-shadow:0 0 #6bffc166}50%{box-shadow:0 0 0 12px #6bffc100}to{box-shadow:0 0 #6bffc100}}@keyframes confettiPop{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.2) rotate(180deg);opacity:.8}to{transform:scale(0) rotate(360deg);opacity:0}}.micro-pop{animation:microPop .3s ease}.micro-shake{animation:microShake .4s ease}.success-pulse{animation:successPulse .8s ease-out}