:root{--primary:#6366f1;--primary-hover:#4f46e5;--primary-active:#4338ca;--primary-subtle:#eef2ff;--primary-light:#c7d2fe;--primary-container:#818cf8;--on-primary:#fff;--secondary:#f59e0b;--secondary-hover:#d97706;--secondary-subtle:#fffbeb;--secondary-light:#fcd34d;--on-secondary:#fff;--star-filled:#f59e0b;--star-empty:#e2e8f0;--tertiary:#10b981;--tertiary-subtle:#ecfdf5;--on-tertiary:#fff;--error:#ef4444;--error-subtle:#fef2f2;--background:#faf9f7;--background-alt:#f3f2ee;--surface:#fff;--surface-hover:#faf9f7;--surface-active:#f3f2ee;--surface-container-low:#f3f2ee;--surface-container:#e7e4de;--surface-container-high:#d4d0c8;--surface-container-highest:#94a3b8;--outline:#e7e4de;--outline-variant:#f3f2ee;--on-surface:#1a1918;--on-surface-variant:#5c5856;--on-surface-muted:#9c9690;--surface-container-lowest:var(--surface);--surface-variant:var(--surface-container);--ghost-border:var(--outline);--status-want-read-bg:var(--primary-subtle);--status-want-read-text:var(--primary);--status-reading-bg:#eff6ff;--status-reading-text:#3b82f6;--status-completed-bg:var(--tertiary-subtle);--status-completed-text:var(--tertiary);--status-abandoned-bg:#f1f5f9;--status-abandoned-text:#94a3b8;--chart-1:#6366f1;--chart-2:#ec4899;--chart-3:#14b8a6;--chart-4:#f59e0b;--chart-5:#8b5cf6;--chart-6:#06b6d4;--chart-7:#f97316;--chart-8:#10b981;--gradient-cta:linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);--font-body:var(--font-inter), "Inter", system-ui, -apple-system, sans-serif;--font-headline:var(--font-dm-serif), "DM Serif Display", Georgia, serif;--display-lg-size:3rem;--display-lg-line-height:1.1;--display-md-size:2.25rem;--display-md-line-height:1.2;--headline-lg-size:1.875rem;--headline-lg-line-height:1.25;--headline-md-size:1.5rem;--headline-md-line-height:1.3;--headline-sm-size:1.25rem;--headline-sm-line-height:1.4;--title-lg-size:1.125rem;--title-md-size:1rem;--title-sm-size:.875rem;--body-lg-size:1rem;--body-md-size:.875rem;--body-sm-size:.75rem;--label-lg-size:.875rem;--label-md-size:.75rem;--label-sm-size:.625rem;--label-tracking:.04em;--shadow-xs:0 1px 2px #0000000d;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 6px #0000000a, 0 2px 4px #00000008;--shadow-lg:0 8px 16px #0000000f, 0 2px 4px #00000008;--shadow-xl:0 16px 32px #00000014, 0 4px 8px #0000000a;--shadow-cover:0 8px 24px #00000026, 0 2px 6px #00000014;--shadow-focus:0 0 0 3px #6366f140;--space-0_5:2px;--space-1:4px;--space-1_5:6px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--duration-color:.1s;--duration-shadow:.2s;--duration-modal-enter:.25s;--duration-modal-exit:.15s;--duration-progress:.4s;--duration-celebration:.4s;--duration-shimmer:1.5s;--ease:ease;--ease-in:ease-in;--ease-out:ease-out;--ease-celebration:cubic-bezier(.34, 1.56, .64, 1);--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;--header-h:72px;--content-max:1280px;--page-padding-mobile:16px;--page-padding:24px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background:var(--background);color:var(--on-surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;font:inherit;background:0 0;border:none}img{max-width:100%;display:block}ul,ol{list-style:none}h1{font-family:var(--font-headline);color:var(--on-surface);font-weight:400;line-height:1.2}h2,h3,h4,h5,h6{font-family:var(--font-body);color:var(--on-surface);font-weight:700;line-height:1.2}p{color:var(--on-surface-variant);line-height:1.7}input,textarea,select{font-family:var(--font-body);color:var(--on-surface);outline:none;font-size:1rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-variant);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--on-surface-variant)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--surface-container) 25%, var(--surface-container-high) 50%, var(--surface-container) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s linear infinite shimmer}