*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{line-height:1.6;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}ul,ol{list-style:none;padding:0}:root{--font-display: "Bricolage Grotesque", sans-serif;--font-body: "DM Sans", sans-serif;--font-accent: "Instrument Serif", serif;--font-mono: "Space Mono", monospace;--text-xs: clamp(.7rem, .65rem + .25vw, .8rem);--text-sm: clamp(.85rem, .8rem + .25vw, .95rem);--text-base: clamp(.95rem, .9rem + .25vw, 1.05rem);--text-lg: clamp(1.15rem, 1rem + .5vw, 1.35rem);--text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);--text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);--text-3xl: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);--text-4xl: clamp(3rem, 2rem + 4vw, 6rem);--space-2xs: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--space-4xl: 96px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px;--radius-xl: 20px;--radius-2xl: 28px;--radius-full: 9999px;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-overshoot: cubic-bezier(.34, 1.56, .64, 1);--ease-gentle-overshoot: cubic-bezier(.25, 1.1, .5, 1);--ease-spring: cubic-bezier(.175, .885, .32, 1.275);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--duration-entrance: .6s;--duration-long: .8s;--z-doodle: 1;--z-base: 0;--z-card: 10;--z-nav: 100;--z-switcher: 150;--z-modal: 200;--z-toast: 300;--z-offline: 400;--grid-size: 40px;--color-bg: #f5f5f5;--color-bg-alt: #eaeaff;--color-surface: #FFFFFF;--color-surface-alt: #f8f8ff;--color-primary: #4892ff;--color-primary-hover: #3a7ee8;--color-secondary: #fd6b44;--color-secondary-hover: #e55f3a;--color-tertiary: #0ad66c;--color-tertiary-hover: #08c060;--color-text: #3905c8;--color-text-secondary: #6040d0;--color-text-muted: #9985c8;--color-border: #c0b4e8;--color-border-light: #d4ccf0;--color-success: #0ad66c;--color-error: #FF3D3D;--color-highlight: #FFEA29;--color-highlight-soft: rgba(255, 234, 41, .4);--color-pink: #ff66bc;--color-shadow-primary: #3905c8;--color-shadow-accent: #4892ff;--color-shadow-green: #0ad66c;--color-grid-line: #eaeaff;--color-accent-pink: #ff66bc;--color-accent-green: #0ad66c;--color-accent-orange: #fd6b44;--color-accent-blue: #4892ff;--color-accent-purple: #CA74FF}@media(prefers-reduced-motion:reduce){:root{--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: 0ms;--duration-entrance: 0ms;--duration-long: 0ms}}body{--shadow-sm: 3px 3px 0 var(--color-shadow-primary);--shadow-md: 5px 5px 0 var(--color-shadow-primary);--shadow-lg: 7px 7px 0 var(--color-shadow-primary);--shadow-xl: 10px 10px 0 var(--color-shadow-primary);--shadow-accent: 5px 5px 0 var(--color-shadow-accent);--shadow-green: 5px 5px 0 var(--color-shadow-green);background-color:var(--color-bg)}.app-shell{min-height:-webkit-fill-available;min-height:100dvh;display:flex;flex-direction:column;background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-body);position:relative;overscroll-behavior-y:none;background-image:linear-gradient(var(--color-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid-line) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:center center}.skip-link{position:absolute;top:-100%;left:var(--space-md);padding:var(--space-sm) var(--space-md);background-color:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:700;text-transform:uppercase;border-radius:var(--radius-md);z-index:var(--z-modal)}.skip-link:focus{top:var(--space-md)}.offline-banner{position:fixed;top:0;left:0;right:0;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:var(--space-sm);background-color:var(--color-error);color:#fff;font-family:var(--font-display);font-weight:700;text-align:center;text-transform:uppercase;z-index:var(--z-offline)}.main-content{flex:1;padding-bottom:calc(72px + env(safe-area-inset-bottom));overflow-x:hidden;position:relative;z-index:1}@media(min-width:1024px){.main-content{padding-bottom:0}}.page{max-width:880px;margin-left:auto;margin-right:auto;padding-left:var(--space-md);padding-right:var(--space-md);padding-top:var(--space-xl);padding-bottom:var(--space-3xl);position:relative}@media(min-width:640px){.page{padding-left:var(--space-xl);padding-right:var(--space-xl)}}@media(min-width:1024px){.page{padding-left:var(--space-2xl);padding-right:var(--space-2xl);padding-top:var(--space-2xl);padding-bottom:var(--space-4xl)}}.game-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}@media(min-width:640px){.game-grid{grid-template-columns:repeat(2,1fr)}}.game-page{display:flex;flex-direction:column;min-height:100dvh;overscroll-behavior:none}.game-header{flex-shrink:0;height:52px;padding-top:env(safe-area-inset-top);display:flex;flex-direction:row;align-items:center;background-color:var(--color-surface);border-bottom:3px solid var(--color-text)}.game-slot{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-md)}@media(min-width:1024px){.game-slot{max-width:600px;margin-left:auto;margin-right:auto}}@media(max-height:500px)and (orientation:landscape){.bottom-nav{display:none}.game-header{height:36px}}.stats-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md)}@media(min-width:640px){.stats-grid{grid-template-columns:repeat(3,1fr)}}.page-enter{opacity:0;transform:translateY(16px)}.page-enter-active{opacity:1;transform:translateY(0);transition:opacity var(--duration-slow) var(--ease-gentle-overshoot),transform var(--duration-slow) var(--ease-gentle-overshoot)}.page-exit-active{opacity:0;transition:opacity var(--duration-fast) var(--ease-out)}:focus-visible{outline:3px solid var(--color-highlight);outline-offset:2px}.desktop-nav a,.game-pill,.game-card,.card-cta,.btn,.stat-widget,.mobile-menu__btn,.theme-swatch{position:relative}.btn,.game-pill,.game-card,.card-cta,.nav-tab,.mobile-menu__btn,.hero-eyebrow,.stat-widget,.site-logo,.auth-btn,.auth-btn--avatar,.section-divider__label{user-select:none;-webkit-user-select:none}.desktop-nav a:before,.game-pill:before,.game-card:before,.card-cta:before,.btn:before,.stat-widget:before,.mobile-menu__btn:before,.theme-swatch:before{content:"";position:absolute;inset:-12px;z-index:-1}.top-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-top:calc(var(--space-sm) + env(safe-area-inset-top));padding-left:var(--space-md);padding-right:var(--space-md);padding-bottom:var(--space-sm);position:sticky;top:0;z-index:var(--z-nav);background-color:var(--color-bg);border-bottom:3px solid var(--color-text)}@media(min-width:640px){.top-header{padding-left:var(--space-xl);padding-right:var(--space-xl)}}.site-logo{font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--color-text);position:relative;display:inline-flex;align-items:center;gap:var(--space-xs);transition:transform var(--duration-fast) var(--ease-spring)}.site-logo:hover{transform:rotate(-3deg) scale(1.05)}.site-logo .logo-dot{display:inline-block;width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-primary);flex-shrink:0}.logo-highlight{position:relative;display:inline-block;padding:0 6px}.logo-highlight:before{content:"";position:absolute;inset:15% -4px 5%;background-color:var(--color-highlight);z-index:-1;transform:rotate(-1.5deg) skew(-2deg);border-radius:4px 6px 3px 5px}.mobile-menu{position:relative;display:block}@media(min-width:1024px){.mobile-menu{display:none}}.mobile-menu__btn{font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--color-text);padding:4px 12px;border:2.5px solid var(--color-text);border-radius:var(--radius-full);background-color:var(--color-surface);cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring),background-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.mobile-menu__btn:hover{background-color:var(--color-highlight);box-shadow:4px 4px 0 var(--color-shadow-primary);transform:translate(-2px,-2px)}.mobile-menu__btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-shadow-primary)}.mobile-menu__dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:180px;flex-direction:column;gap:4px;background-color:var(--color-surface);border:2.5px solid var(--color-text);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-sm);z-index:var(--z-nav)}.mobile-menu.open .mobile-menu__dropdown{display:flex}.mobile-menu__dropdown a{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.02em;color:var(--color-text);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);text-decoration:none;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-out)}.mobile-menu__dropdown a:hover{background-color:var(--color-highlight)}.mobile-menu__dropdown a[aria-current=page]{background-color:var(--color-primary);color:#fff}.desktop-nav{display:none}@media(min-width:1024px){.desktop-nav{display:flex;flex-direction:row;align-items:center;gap:var(--space-xs);margin-left:auto}.desktop-nav a{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.02em;color:var(--color-text);padding:var(--space-xs) var(--space-md);border:2.5px solid transparent;border-radius:var(--radius-full);transition:transform var(--duration-fast) var(--ease-spring),background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.desktop-nav a:hover{background-color:var(--color-highlight);border-color:var(--color-text);box-shadow:5px 5px 0 var(--color-shadow-primary);transform:translate(-3px,-3px) rotate(-2deg)}.desktop-nav a:active{transform:translate(2px,2px) rotate(0);box-shadow:1px 1px 0 var(--color-shadow-primary)}.desktop-nav a[aria-current=page]{background-color:var(--color-primary);border-color:var(--color-text);box-shadow:5px 5px 0 var(--color-shadow-primary);color:#fff;transform:translate(-2px,-2px)}.desktop-nav a[aria-current=page]:hover{background-color:var(--color-highlight);color:var(--color-text);transform:translate(-3px,-3px) rotate(-2deg);box-shadow:7px 7px 0 var(--color-shadow-primary)}.desktop-nav a[aria-current=page]:active{transform:translate(2px,2px) rotate(0);box-shadow:1px 1px 0 var(--color-shadow-primary)}}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:space-around;height:68px;padding-bottom:env(safe-area-inset-bottom);background-color:var(--color-surface);border-top:3px solid var(--color-text);z-index:var(--z-nav);transition:transform var(--duration-normal) var(--ease-out)}.bottom-nav.hidden{transform:translateY(100%)}@media(min-width:1024px){.bottom-nav{display:none}}.nav-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:60px;min-height:44px;font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--color-text-muted);transition:color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-spring);position:relative}.nav-tab svg{width:22px;height:22px}.nav-tab:active{transform:scale(.92)}.nav-tab[aria-current=page]{color:var(--color-primary)}.nav-tab[aria-current=page]:after{content:"";position:absolute;top:-3px;left:50%;transform:translate(-50%);width:32px;height:5px;background-color:var(--color-primary);border-radius:0 0 4px 4px}.hero-section{text-align:center;padding:var(--space-2xl) 0 var(--space-xl);position:relative;z-index:2}@media(min-width:640px){.hero-section{padding:var(--space-3xl) 0 var(--space-2xl)}}.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text);background-color:var(--color-highlight);padding:var(--space-xs) var(--space-md);border:2.5px solid var(--color-text);border-radius:var(--radius-full);box-shadow:3px 3px 0 var(--color-shadow-primary);margin-bottom:var(--space-lg);transform:rotate(-2deg)}.hero-title{font-family:var(--font-display);font-size:clamp(1.8rem,8vw,3.2rem);font-weight:900;line-height:1;color:var(--color-text);letter-spacing:-.04em;margin-bottom:var(--space-lg);text-transform:uppercase;outline:none}.hero-title:focus-visible,.hero-title .highlight:focus-visible{outline:none}@media(min-width:640px){.hero-title{font-size:var(--text-4xl)}}.hero-title .highlight{position:relative;display:inline;color:var(--color-text)}.hero-subtitle{font-family:var(--font-body);font-size:var(--text-lg);color:var(--color-text-secondary);max-width:480px;margin:0 auto;line-height:1.5}.hero-section,.game-pills,.section-divider,.motivation-card{pointer-events:none}.hero-section a,.hero-section button,.hero-section .hero-eyebrow,.game-pills a,.section-divider *,.motivation-card *{pointer-events:auto}.doodle{position:absolute;pointer-events:none;z-index:var(--z-doodle);opacity:.6;color:var(--color-primary)}.doodle svg{display:block}.doodle--pink{color:var(--color-accent-pink)}.doodle--green{color:var(--color-accent-green)}.doodle--orange{color:var(--color-accent-orange)}.doodle--blue{color:var(--color-accent-blue)}.doodle--yellow{color:var(--color-highlight)}.doodle--primary{color:var(--color-primary)}.hero-illustration{position:absolute;pointer-events:none;z-index:var(--z-doodle)}.hero-illustration svg{display:block}.game-pills{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);margin-top:var(--space-xl);position:relative;z-index:2}@media(min-width:480px){.game-pills{flex-direction:row;flex-wrap:wrap;justify-content:center}}.game-pill{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-xl) var(--space-sm) var(--space-lg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--color-text);background-color:var(--color-surface);border:3px solid var(--color-text);border-radius:var(--radius-full);box-shadow:var(--shadow-md);cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out);position:relative;text-decoration:none}.game-pill:nth-child(1){transform:rotate(-3deg)}.game-pill:nth-child(2){transform:rotate(2deg)}.game-pill:hover{transform:translate(-3px,-3px) rotate(-4deg)!important;box-shadow:var(--shadow-xl);background-color:var(--color-highlight)}.game-pill:active{transform:translate(2px,2px) rotate(0)!important;box-shadow:1px 1px 0 var(--color-shadow-primary)}.game-pill .pill-arrow{margin-left:var(--space-xs);transition:transform var(--duration-fast) var(--ease-out)}.game-pill:hover .pill-arrow{transform:translate(4px)}.game-pill .pill-status{font-size:var(--text-xs);font-weight:700;color:var(--color-surface);background-color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:var(--radius-full)}.section-divider{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-3xl) 0 var(--space-xl);position:relative;z-index:2}.section-divider__line{flex:1;height:3px;background-color:var(--color-text)}.section-divider__label{font-family:var(--font-display);font-size:var(--text-sm);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;padding:var(--space-xs) var(--space-lg);background-color:var(--color-pink);border:2.5px solid var(--color-text);border-radius:var(--radius-full);box-shadow:3px 3px 0 var(--color-shadow-primary);white-space:nowrap;transform:rotate(-1deg)}.torn-edge{position:relative;overflow:hidden}.torn-edge:after{content:"";position:absolute;bottom:-2px;left:-2%;right:-2%;height:40px;background-color:var(--color-bg);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0 20C50 8 100 32 150 20S250 8 300 20S400 32 450 20S550 8 600 20S700 32 750 20S850 8 900 20S1000 32 1050 20S1150 8 1200 20V40H0Z' fill='white'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0 20C50 8 100 32 150 20S250 8 300 20S400 32 450 20S550 8 600 20S700 32 750 20S850 8 900 20S1000 32 1050 20S1150 8 1200 20V40H0Z' fill='white'/%3E%3C/svg%3E");mask-size:100% 100%;-webkit-mask-size:100% 100%;z-index:2}.colored-band{background-color:var(--color-primary);padding:var(--space-3xl) var(--space-md);position:relative;color:#fff}.colored-band--secondary{background-color:var(--color-text)}.game-card{background-color:var(--color-surface);border-radius:var(--radius-xl);border:3px solid var(--color-text);box-shadow:var(--shadow-md);cursor:pointer;touch-action:manipulation;overflow:hidden;transition:transform var(--duration-normal) var(--ease-spring),box-shadow var(--duration-normal) var(--ease-out)}.game-card:hover{transform:translate(-4px,-4px) rotate(-2deg);box-shadow:var(--shadow-xl)}.game-card:active{transform:translate(2px,2px) rotate(0);box-shadow:1px 1px 0 var(--color-shadow-primary)}.game-card:hover .card-body{background-color:var(--color-highlight)}.game-card--hero{max-width:75%;margin-left:auto;margin-right:auto}@media(max-width:639px){.game-card--hero{max-width:100%}}.card-illustration{width:100%;aspect-ratio:16 / 10;background-color:var(--color-bg-alt);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:3px solid var(--color-text);position:relative}.card-illustration:after{content:"";position:absolute;inset:0;opacity:.15;background-image:radial-gradient(var(--color-text) 1px,transparent 1px);background-size:16px 16px;pointer-events:none}.card-body{padding:var(--space-lg);display:flex;flex-direction:column;background-color:var(--color-surface)}.card-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;text-transform:uppercase;color:var(--color-text);line-height:1.05;letter-spacing:-.02em}.card-description{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-sm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}.card-cta{display:inline-block;margin-top:var(--space-md);align-self:flex-start;padding:var(--space-xs) var(--space-lg);background-color:var(--color-primary);color:#fff;font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:2.5px solid var(--color-text);border-radius:var(--radius-full);box-shadow:3px 3px 0 var(--color-shadow-primary);transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast) var(--ease-out)}.card-cta:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:5px 5px 0 var(--color-shadow-primary);background-color:var(--color-highlight);color:var(--color-text)}.card-cta:active{transform:translate(1px,1px) rotate(0);box-shadow:0 0 0 var(--color-shadow-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:var(--space-sm) var(--space-xl);border:3px solid var(--color-text);border-radius:var(--radius-full);box-shadow:var(--shadow-md);font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.02em;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast) var(--ease-out)}.btn:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:var(--shadow-lg);background-color:var(--color-highlight);color:var(--color-text)}.btn:active{transform:translate(2px,2px) rotate(0);box-shadow:1px 1px 0 var(--color-shadow-primary)}.btn--primary{background-color:var(--color-primary);color:#fff}.btn--secondary{background-color:var(--color-highlight);color:var(--color-text)}.btn--ghost{background-color:var(--color-surface);color:var(--color-text);border:3px solid var(--color-text);box-shadow:var(--shadow-md)}.btn--ghost:hover{background-color:var(--color-highlight);color:var(--color-text)}.btn--stats{background-color:#fd6b44;color:#fff}.btn--icon{padding:var(--space-sm);background-color:transparent;color:var(--color-text-secondary);border:2px solid transparent;box-shadow:none}.btn--icon:hover{color:var(--color-text);background-color:var(--color-highlight-soft);transform:none;box-shadow:none}.btn--icon:active{transform:scale(.92);box-shadow:none}.theme-switcher{display:none}@media(min-width:1024px){.theme-switcher{position:fixed;bottom:var(--space-md);right:var(--space-md);display:flex;flex-direction:row;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background-color:var(--color-surface);border:2.5px solid var(--color-text);border-radius:var(--radius-full);box-shadow:var(--shadow-md);z-index:var(--z-switcher)}}.theme-swatch{width:28px;height:28px;border-radius:var(--radius-full);border:2.5px solid transparent;cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring),border-color var(--duration-fast) var(--ease-out)}.theme-swatch:hover{transform:scale(1.2) rotate(10deg)}.theme-swatch.active{border-color:var(--color-text);transform:scale(1.1)}.theme-swatch--studio{background:linear-gradient(135deg,#eaeaff,#3905c8)}.theme-swatch--notebook{background:linear-gradient(135deg,#f0f0ff,#3905c8)}.theme-swatch--classic{background:linear-gradient(135deg,#f8f5ee,#c04a2b)}.theme-swatch--ink-highlight{background:linear-gradient(135deg,#f8f5ee,#2a3d8f)}.theme-swatch--field-notes{background:linear-gradient(135deg,#f8f5ee,#1a7a6a)}.theme-swatch--blackboard{background:linear-gradient(135deg,#2a2d2e,#d47a6a)}.theme-swatch--candy-shop{background:linear-gradient(135deg,#f8f5ee,#8a2abe)}.theme-swatch--neon-gel{background:linear-gradient(135deg,#f8f5ee,#30b840)}.font-switcher{display:none}@media(min-width:1024px){.font-switcher{position:fixed;bottom:calc(50px + var(--space-md));right:var(--space-md);display:flex;flex-direction:row;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background-color:var(--color-surface);border:2.5px solid var(--color-text);border-radius:var(--radius-full);box-shadow:var(--shadow-md);z-index:var(--z-switcher)}}.font-swatch{padding:2px 8px;border-radius:var(--radius-sm);border:2.5px solid transparent;cursor:pointer;font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);background:none;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-spring)}.font-swatch:hover{color:var(--color-text);transform:rotate(-3deg)}.font-swatch.active{border-color:var(--color-primary);color:var(--color-text)}.font-switcher__label{font-weight:700;font-size:var(--text-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.02em}.section-header{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--color-text)}.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:400px;margin-left:auto;margin-right:auto;padding:var(--space-2xl) var(--space-md)}.coming-soon__icon{width:100px;height:100px;margin-bottom:var(--space-lg)}.coming-soon__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;text-transform:uppercase;color:var(--color-text);line-height:1.05;letter-spacing:-.02em}.coming-soon__description{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-secondary);margin-top:var(--space-sm);line-height:1.5}.stat-widget{background-color:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-lg);border:3px solid var(--color-text);box-shadow:var(--shadow-md);transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast) var(--ease-out)}.stat-widget:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:var(--shadow-lg)}.stat-widget__label{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.stat-widget__value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;color:var(--color-text);line-height:1.1}.marquee-strip{overflow:hidden;background-color:var(--color-text);color:#fff;padding:var(--space-sm) 0;border-top:3px solid var(--color-text);position:relative;z-index:2;border-bottom:3px solid var(--color-text);white-space:nowrap;font-family:var(--font-display);font-size:var(--text-sm);font-weight:800;text-transform:uppercase;letter-spacing:.08em;pointer-events:none}.marquee-strip__inner{display:inline-block;animation:marquee 60s linear infinite}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@media(max-width:639px){.marquee-strip{margin-left:calc(-1 * var(--space-md));margin-right:calc(-1 * var(--space-md))}}@media(prefers-reduced-motion:reduce){.marquee-strip__inner{animation:none}}.motivation-card{display:flex;align-items:center;gap:var(--space-lg);margin:var(--space-2xl) 0;padding:var(--space-xl) var(--space-2xl);background-color:var(--color-text);color:var(--color-bg);border-radius:var(--radius-2xl);border:3px solid var(--color-text);position:relative;overflow:hidden;z-index:2}.motivation-card__text{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;font-style:italic;line-height:1.3}.motivation-card__star{flex-shrink:0;color:var(--color-highlight);animation:star-spin 8s linear infinite}.motivation-card__star svg{width:36px;height:36px}.site-footer{padding:var(--space-xl) var(--space-md);text-align:center;font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-text-muted);border-top:3px solid var(--color-border);margin-top:var(--space-3xl)}.site-footer a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;font-weight:600}.settings-row{display:flex;align-items:center;gap:var(--space-md);width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);border:2.5px solid transparent;cursor:pointer;background:none;text-align:left;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-spring)}.settings-row:hover{background-color:var(--color-highlight-soft);transform:translate(3px)}.settings-row.active{background-color:var(--color-highlight-soft);border-color:var(--color-text);box-shadow:3px 3px 0 var(--color-shadow-primary)}.star-burst{display:inline-block;color:var(--color-highlight);animation:star-spin 8s linear infinite}@keyframes star-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.star-burst,.motivation-card__star{animation:none}}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center;margin-top:var(--space-xl)}.hero-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}.hero-shape{position:absolute;pointer-events:auto;cursor:pointer;opacity:1}@media(max-width:639px){.hero-shape{scale:.55}.hero-shape:nth-child(n+5){display:none}}@media(min-width:640px)and (max-width:1023px){.hero-shape{scale:.65}.hero-shape:nth-child(n+8){display:none}}.nav-preview{display:none;position:fixed;top:0;left:0;z-index:calc(var(--z-nav) - 1);pointer-events:none;opacity:0;transition:opacity var(--duration-slow) var(--ease-out)}.nav-preview.visible{opacity:1}@media(min-width:1024px){.nav-preview{display:block}}.nav-preview__card{width:240px;background-color:var(--color-surface);border:3px solid var(--color-text);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}.nav-preview__img{width:100%;display:block}.nav-preview__label{display:none}.peek-wrapper{position:relative;display:inline-flex}.peek-wrapper>.peek-face{position:absolute;left:50%;top:50%;pointer-events:none;z-index:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1);transform:translate(-50%,-50%)}.peek-wrapper>.peek-target{position:relative;z-index:1}.peek-face.peeking{transform:translate(-50%,-50%) translate(var(--peek-x, 0px),var(--peek-y, 0px)) rotate(var(--peek-rot, 0deg))}@media(hover:none){.site-logo:hover{transform:none}.mobile-menu__btn:hover{background-color:var(--color-surface);box-shadow:none;transform:none}.mobile-menu__dropdown a:hover{background-color:transparent}.game-pill:hover{transform:none!important;box-shadow:var(--shadow-md);background-color:var(--color-surface)}.game-pill:nth-child(1):hover{transform:rotate(-3deg)!important}.game-pill:nth-child(2):hover{transform:rotate(2deg)!important}.game-pill:hover .pill-arrow{transform:none}.game-card:hover{transform:none;box-shadow:var(--shadow-md)}.game-card:hover .card-body{background-color:var(--color-surface)}.card-cta:hover{transform:none;box-shadow:3px 3px 0 var(--color-shadow-primary);background-color:var(--color-primary);color:#fff}.btn:hover{transform:none;box-shadow:var(--shadow-md)}.btn--primary:hover{background-color:var(--color-primary);color:#fff}.btn--secondary:hover{background-color:var(--color-highlight);color:var(--color-text)}.btn--ghost:hover{background-color:var(--color-surface);color:var(--color-text)}.btn--stats:hover{background-color:#fd6b44;color:#fff}.btn--icon:hover{color:var(--color-text-secondary);background-color:transparent;transform:none;box-shadow:none}.stat-widget:hover{transform:none;box-shadow:var(--shadow-md)}.settings-row:hover{background-color:transparent;transform:none}.auth-btn--avatar:hover{transform:none;box-shadow:none}.theme-swatch:hover{transform:none}}.auth-container{margin-left:var(--space-sm);display:flex;align-items:center}@media(max-width:1023px){.auth-container{position:absolute;top:calc(100% + var(--space-xs));right:var(--space-md);margin-left:0;z-index:1}.auth-container .auth-btn{font-size:var(--text-xs);padding:4px var(--space-sm);min-height:32px;box-shadow:2px 2px 0 var(--color-shadow-primary);background-color:var(--color-surface)}}.auth-btn{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;padding:var(--space-xs) var(--space-md)}.auth-btn--avatar{width:36px;height:36px;padding:0;border-radius:var(--radius-full);border:3px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);color:var(--color-text);background:var(--color-bg-card);cursor:pointer;overflow:hidden;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.auth-btn--avatar:hover{transform:translate(-2px,-2px) rotate(-3deg);box-shadow:var(--shadow-md)}.auth-avatar{width:100%;height:100%;border-radius:var(--radius-full);object-fit:cover}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;transition:opacity var(--duration-fast) var(--ease-out);padding:var(--space-lg)}.modal-overlay.active{opacity:1}.modal{background-color:var(--color-bg-alt);border:3px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-2xl);max-width:380px;width:100%;transform:scale(.9);transition:transform var(--duration-normal) var(--ease-overshoot);position:relative;overflow:hidden}.modal:after{content:"";position:absolute;inset:0;opacity:.15;background-image:radial-gradient(var(--color-text) 1px,transparent 1px);background-size:16px 16px;pointer-events:none;z-index:0}.modal>*{position:relative;z-index:1}.modal.active{transform:scale(1)}.modal .logo-highlight{z-index:1}.modal .logo-highlight:before{z-index:-1;opacity:1}.stagger-enter>*{opacity:0;transform:translateY(20px)}.stagger-enter.active>*:nth-child(1){opacity:1;transform:translateY(0);transition:opacity var(--duration-entrance) var(--ease-out),transform var(--duration-entrance) var(--ease-gentle-overshoot);transition-delay:0ms}.stagger-enter.active>*:nth-child(2){opacity:1;transform:translateY(0);transition:opacity var(--duration-entrance) var(--ease-out),transform var(--duration-entrance) var(--ease-gentle-overshoot);transition-delay:.1s}.stagger-enter.active>*:nth-child(3){opacity:1;transform:translateY(0);transition:opacity var(--duration-entrance) var(--ease-out),transform var(--duration-entrance) var(--ease-gentle-overshoot);transition-delay:.2s}.stagger-enter.active>*:nth-child(4){opacity:1;transform:translateY(0);transition:opacity var(--duration-entrance) var(--ease-out),transform var(--duration-entrance) var(--ease-gentle-overshoot);transition-delay:.3s}.stagger-enter.active>*:nth-child(5){opacity:1;transform:translateY(0);transition:opacity var(--duration-entrance) var(--ease-out),transform var(--duration-entrance) var(--ease-gentle-overshoot);transition-delay:.4s}.stagger-enter.active>*:nth-child(6){opacity:1;transform:translateY(0);transition:opacity var(--duration-entrance) var(--ease-out),transform var(--duration-entrance) var(--ease-gentle-overshoot);transition-delay:.5s}.fade-in-up{opacity:0;transform:translateY(24px)}.fade-in-up.active{opacity:1;transform:translateY(0);transition:opacity var(--duration-entrance) var(--ease-out),transform var(--duration-entrance) var(--ease-gentle-overshoot)}.scale-in{opacity:0;transform:scale(.88)}.scale-in.active{opacity:1;transform:scale(1);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-overshoot)}.wobble-in{opacity:0;transform:translateY(30px) rotate(-5deg)}.wobble-in.active{opacity:1;transform:translateY(0) rotate(0);transition:opacity var(--duration-long) var(--ease-out),transform var(--duration-long) var(--ease-overshoot)}.pop-in{opacity:0;transform:scale(.5)}.pop-in.active{opacity:1;transform:scale(1);transition:opacity var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-overshoot)}@keyframes celebrate{0%{transform:scale(1)}25%{transform:scale(1.08) rotate(2deg)}50%{transform:scale(.97) rotate(-1deg)}75%{transform:scale(1.03) rotate(1deg)}to{transform:scale(1) rotate(0)}}@keyframes float{0%,to{transform:var(--base-transform, none) translateY(0)}33%{transform:var(--base-transform, none) translateY(-6px) rotate(2deg)}66%{transform:var(--base-transform, none) translateY(3px) rotate(-1deg)}}.float-anim{animation:float 6s ease-in-out infinite;animation-fill-mode:backwards}@keyframes spin-once{0%{transform:var(--base-transform, none) rotate(0)}to{transform:var(--base-transform, none) rotate(360deg)}}.spin-briefly{animation:spin-once .5s cubic-bezier(.34,1.56,.64,1) forwards!important}@keyframes doodle-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}@keyframes doodle-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes squiggle-stretch{0%,to{transform:var(--base-transform, none) scaleY(1)}15%{transform:var(--base-transform, none) scaleY(.15)}25%{transform:var(--base-transform, none) scaleY(.15) scaleX(1.3)}35%{transform:var(--base-transform, none) scaleY(.3) scaleX(1.15)}40%{transform:var(--base-transform, none) scaleY(.1) scaleX(1.3)}50%{transform:var(--base-transform, none) scaleY(.25) scaleX(1.2)}65%{transform:var(--base-transform, none) scaleY(.8) scaleX(1.05)}80%{transform:var(--base-transform, none) scaleY(1.1) scaleX(.95)}}.squiggle-stretch{animation:squiggle-stretch .8s cubic-bezier(.34,1.56,.64,1) forwards!important}@media(prefers-reduced-motion:reduce){.stagger-enter>*,.stagger-enter.active>*,.stagger-enter.active>*:nth-child(1),.stagger-enter.active>*:nth-child(2),.stagger-enter.active>*:nth-child(3),.stagger-enter.active>*:nth-child(4),.stagger-enter.active>*:nth-child(5),.stagger-enter.active>*:nth-child(6){opacity:1;transform:none;transition:none}.fade-in-up,.fade-in-up.active,.scale-in,.scale-in.active,.wobble-in,.wobble-in.active,.pop-in,.pop-in.active{opacity:1;transform:none;transition:none}.celebrate,.float-anim{animation:none}.spin-briefly,.squiggle-stretch{animation:none!important}}