@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700;800&display=swap";:root{--bg-primary:#faf9f6;--bg-secondary:#f4f1ea;--bg-elevated:#fff;--text-primary:#191816;--text-secondary:#5c574f;--text-muted:#9e978e;--accent-primary:#d97757;--accent-secondary:#b85f43;--accent-light:#faf1ed;--danger:#dc2626;--danger-light:#fef2f2;--success:#059669;--success-light:#ecfdf5;--warning:#d97706;--info:#2563eb;--border-color:#e6e1d8;--shadow-sm:0 2px 4px #d9775705;--shadow-md:0 12px 24px -4px #d977570f, 0 4px 12px -2px #00000005;--shadow-lg:0 24px 38px -8px #d977571a, 0 12px 20px -6px #00000008;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:5rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--card-padding-x:var(--space-xl);--card-padding-y:var(--space-xl);--card-large-padding-x:var(--space-3xl);--card-large-padding-y:var(--space-2xl)}body.dark{--bg-primary:#0c0c0e;--bg-secondary:#141418;--bg-elevated:#1b1b22;--text-primary:#faf9f6;--text-secondary:#9e978e;--text-muted:#6b655f;--accent-primary:#e08568;--accent-secondary:#d97757;--accent-light:#2a1c18;--danger:#ef4444;--danger-light:#2d1818;--success:#10b981;--success-light:#0d2619;--warning:#f59e0b;--info:#3b82f6;--border-color:#2d2d38;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 12px 28px -4px #00000080, 0 4px 12px -2px #0000004d;--shadow-lg:0 24px 48px -8px #000000b3, 0 12px 24px -6px #00000080}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;min-height:100vh;font-family:Fira Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;transition:background-color .3s,color .3s;overflow-x:hidden}a{color:inherit;text-decoration:none;transition:all .2s}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-family:Fira Code,monospace;font-weight:700;line-height:1.2}h1{letter-spacing:-.03em;font-size:clamp(2.2rem,5vw,3.5rem)}h2{letter-spacing:-.02em;font-size:clamp(1.6rem,4vw,2.1rem)}h3{font-size:clamp(1.2rem,3vw,1.45rem)}.card{background:var(--bg-elevated);padding:var(--card-padding-y) var(--card-padding-x);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));opacity:0;width:100%;height:4px;transition:opacity .3s;position:absolute;top:0;left:0}.card-hover:hover{box-shadow:var(--shadow-md);border-color:#d977574d;transform:translateY(-4px)}.card-hover:hover:before{opacity:1}.btn{border-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--space-sm);cursor:pointer;padding:.75rem 1.5rem;font-family:Fira Code,monospace;font-size:.95rem;font-weight:600;transition:all .2s cubic-bezier(.2,.8,.2,1);display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);box-shadow:0 4px 14px #d9775740;color:#fff!important}.btn-primary:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 6px 20px #d9775759}.btn-primary:active{transform:translateY(0)}.btn-outline{border:2px solid var(--border-color);color:var(--text-primary);background:0 0}.btn-outline:hover{background:var(--accent-light);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px)}.container{max-width:1200px;padding:0 var(--space-xl);margin:0 auto}@media (width<=640px){.container{padding:0 var(--space-md)}:root{--card-padding-x:var(--space-md);--card-padding-y:var(--space-md);--card-large-padding-x:var(--space-md);--card-large-padding-y:var(--space-lg)}}.header-nav-container{align-items:center;gap:var(--space-lg);display:flex}.header-nav-divider{background:var(--border-color);width:1px;height:24px}.header-nav-links{gap:var(--space-xs);display:flex}@media (width<=768px){.header-nav-container{justify-content:center;gap:var(--space-md);flex-wrap:wrap;width:100%;margin-top:.5rem}.header-nav-divider{display:none}.header-nav-links{flex-wrap:wrap;justify-content:center}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.5s cubic-bezier(.16,1,.3,1) forwards fadeIn}@keyframes textShine{0%{background-position:0%}to{background-position:200%}}.logo-text{background:linear-gradient(to right, var(--text-primary) 20%, var(--accent-primary) 40%, var(--accent-secondary) 60%, var(--text-primary) 80%);color:#0000;background-size:200%;-webkit-background-clip:text;background-clip:text;font-family:Fira Code,monospace;transition:transform .3s;animation:6s linear infinite textShine;display:inline-block}.logo-text:hover{transform:scale(1.02)}.prose{color:var(--text-secondary);font-size:1.1rem;line-height:1.8}.prose h2{color:var(--text-primary);border-bottom:1px solid var(--border-color);letter-spacing:-.02em;margin-top:3rem;margin-bottom:1.25rem;padding-bottom:.5rem;font-size:1.65rem}.prose h3{color:var(--text-primary);margin-top:2.2rem;margin-bottom:1rem;font-size:1.35rem;font-weight:600}.prose p{margin-bottom:1.5rem}.prose strong{color:var(--text-primary);font-weight:600}.prose ul,.prose ol{margin-bottom:1.5rem;padding-left:1.5rem}.prose li{margin-bottom:.5rem}.prose code{background:var(--bg-secondary);border-radius:var(--radius-sm);color:var(--accent-primary);border:1px solid var(--border-color);padding:.2em .4em;font-family:Fira Code,monospace;font-size:.85em}.prose pre{border-radius:var(--radius-md);box-shadow:var(--shadow-md);background:#1c1817;border:1px solid #ffffff0d;margin-bottom:2rem;padding:1.25rem;overflow-x:auto}body.dark .prose pre{border-color:var(--border-color);background:#0c0c0e}.prose pre code{color:#e2e8f0;background:0 0;border:none;padding:0;font-size:.9em;line-height:1.6}.clay-btn{border-radius:var(--radius-lg);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;border:2px solid #0000;justify-content:center;align-items:center;padding:.875rem 1.5rem;font-family:Fira Code,monospace;font-size:1rem;font-weight:800;transition:all .15s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;position:relative}.clay-btn-primary{background-color:var(--accent-primary);border-color:var(--accent-secondary);box-shadow:0 4px 0 var(--accent-secondary);border-bottom-width:5px;color:#fff!important}.clay-btn-primary:active{box-shadow:0 0px 0 var(--accent-secondary);border-bottom-width:1px;transform:translateY(4px)}.clay-btn-secondary{background-color:var(--bg-elevated);border:2px solid var(--border-color);box-shadow:0 4px 0 var(--border-color);border-bottom-width:5px;color:var(--text-primary)!important}.clay-btn-secondary:active{box-shadow:0 0px 0 var(--border-color);border-bottom-width:2px;transform:translateY(4px)}.clay-btn-success{background-color:var(--success);border-color:#047857;border-bottom-width:5px;box-shadow:0 4px #047857;color:#fff!important}.clay-btn-success:active{border-bottom-width:1px;transform:translateY(4px);box-shadow:0 0 #047857}.clay-card{background:var(--bg-elevated);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg);cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom-width:6px;transition:all .15s}.clay-card:hover{border-color:var(--accent-primary);transform:translateY(-2px)}.clay-card:active{border-bottom-width:3px;transform:translateY(2px)}.clay-card.selected{border-bottom-width:6px;transform:translateY(0);border-color:var(--accent-primary)!important;background-color:var(--accent-light)!important}.mascot-container{align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl);display:flex}@media (width<=640px){.mascot-container{text-align:center;gap:var(--space-md);flex-direction:column}}.mascot-bubble{background:var(--bg-elevated);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);color:var(--text-primary);box-shadow:var(--shadow-sm);flex-grow:1;font-size:1.1rem;font-weight:500;animation:4s ease-in-out infinite float;position:relative}.mascot-bubble:before{content:"";background:var(--bg-elevated);border-left:2px solid var(--border-color);border-bottom:2px solid var(--border-color);width:16px;height:16px;position:absolute;top:50%;left:-10px;transform:translateY(-50%)rotate(45deg)}@media (width<=640px){.mascot-bubble:before{border-left:2px solid var(--border-color);border-bottom:none;border-top:2px solid var(--border-color);top:-10px;left:50%;transform:translate(-50%)rotate(45deg)}}.mascot-svg{animation:3s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.onboarding-progress-container{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);background:var(--bg-primary);border-bottom:1px solid var(--border-color);display:flex}.onboarding-progress-track{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:999px;flex-grow:1;height:16px;position:relative;overflow:hidden}.onboarding-progress-bar{background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));border-radius:999px;height:100%;transition:width .3s cubic-bezier(.4,0,.2,1);position:relative}.onboarding-progress-bar:after{content:"";background:#ffffff40;border-radius:999px;height:4px;position:absolute;top:2px;left:4px;right:4px}.option-badge{background:var(--bg-secondary);width:48px;height:48px;color:var(--text-secondary);border:2px solid var(--border-color);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-family:Fira Code,monospace;font-weight:700;transition:all .2s;display:flex}.clay-card.selected .option-badge{background:var(--accent-primary);color:#fff;border-color:var(--accent-secondary);box-shadow:inset 0 -3px #00000026}.feedback-drawer{padding:var(--space-lg) var(--space-xl);z-index:1000;border-top:2px solid #0000;transition:transform .3s cubic-bezier(.16,1,.3,1);position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -8px 24px #00000014}.feedback-drawer.open{transform:translateY(0)}.feedback-drawer.correct{background:var(--success-light);border-color:var(--success);color:var(--success)}.feedback-drawer.incorrect{background:var(--danger-light);border-color:var(--danger);color:var(--danger)}.fade-in-slide-up{animation:.5s cubic-bezier(.16,1,.3,1) forwards fadeInSlideUp}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bento-grid{gap:var(--space-lg);margin:var(--space-xl) 0;grid-template-columns:repeat(12,1fr);display:grid}@media (width<=900px){.bento-grid{grid-template-columns:repeat(6,1fr)}}@media (width<=600px){.bento-grid{gap:var(--space-md);flex-direction:column;display:flex}}.bento-card{border-radius:var(--radius-lg);border:1px solid var(--border-color);background:var(--bg-elevated);padding:var(--card-padding-y) var(--card-padding-x);flex-direction:column;justify-content:space-between;transition:all .3s cubic-bezier(.2,.8,.2,1);display:flex}.bento-card:hover{box-shadow:var(--shadow-md);border-color:#d9775740;transform:translateY(-4px)}.theme-switch-btn{border:1px solid var(--border-color);width:40px;height:40px;color:var(--text-secondary);background:var(--bg-elevated);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.theme-switch-btn:hover{background:var(--accent-light);color:var(--accent-primary);border-color:var(--accent-primary);transform:scale(1.05)}.glow-orb{filter:blur(80px);z-index:0;pointer-events:none;opacity:.3;border-radius:50%;position:absolute}body.dark .glow-orb{opacity:.15}.glow-orb-primary{background:radial-gradient(circle, var(--accent-primary) 0%, #d9775700 70%)}.glow-orb-success{background:radial-gradient(circle, var(--success) 0%, #05966900 70%)}.glass-card{-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-lg);background:#ffffff73;border:1px solid #ffffff80;box-shadow:0 8px 32px #d977570a}body.dark .glass-card{-webkit-backdrop-filter:blur(16px);background:#1b1b2280;border:1px solid #ffffff0d;box-shadow:0 8px 32px #0000004d}.gradient-text{background:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glow-button{transition:all .3s;position:relative}.glow-button:hover{transform:translateY(-1px);box-shadow:0 0 20px #d9775766}.pulse-glow{animation:3s infinite alternate pulseGlow}@keyframes pulseGlow{0%{filter:drop-shadow(0 0 2px #d9775733)}to{filter:drop-shadow(0 0 15px #d9775799)}}