:root{--color-primary: #0D9488;--color-primary-hover: #14B8A6;--color-primary-active: #0F766E;--color-primary-soft: #CCFBF1;--color-primary-subtle: #F0FDFA;--color-accent: #FB7185;--color-accent-soft: #FFE4E6;--color-ink: #0F172A;--color-ink-muted: #475569;--color-ink-subtle: #94A3B8;--color-ink-faint: #CBD5E1;--color-canvas: #FFFFFF;--color-surface-soft: #F8FAFC;--color-surface-card: #F1F5F9;--color-surface-elevated: #FFFFFF;--color-hairline: #E2E8F0;--color-hairline-soft: #F1F5F9;--color-success: #10B981;--color-success-soft: #D1FAE5;--color-warning: #F59E0B;--color-warning-soft: #FEF3C7;--color-error: #EF4444;--color-error-soft: #FEE2E2;--color-info: #3B82F6;--color-warning-strong: #B45309;--color-warning-line: #FDE68A;--color-error-strong: #DC2626;--shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, .04);--shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .04);--shadow-md: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);--shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, .1), 0 4px 8px -4px rgba(15, 23, 42, .06);--shadow-xl: 0 24px 48px -8px rgba(15, 23, 42, .12), 0 8px 16px -8px rgba(15, 23, 42, .08);--font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-text: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;--space-xxs: 4px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-section: 80px;--radius-btn: 12px;--radius-card: 16px;--radius-pill: 9999px;--z-base: 0;--z-sticky: 100;--z-dropdown: 200;--z-modal: 300;--z-toast: 400;--ease-smooth: cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-text);font-size:16px;line-height:1.5;color:var(--color-ink);background:var(--color-canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,svg{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}ul{list-style:none}::selection{background:var(--color-primary-soft);color:var(--color-primary-active)}.display-hero{font-family:var(--font-display);font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-1.5px}.display-lg{font-family:var(--font-display);font-size:36px;font-weight:600;line-height:1.15;letter-spacing:-1px}.display-md{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.title-lg{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.3px}.title-md{font-size:18px;font-weight:600;line-height:1.4}.title-sm{font-size:16px;font-weight:600;line-height:1.4}.body-lg{font-size:18px;font-weight:400;line-height:1.6;color:var(--color-ink-muted)}.body{font-size:16px;font-weight:400;line-height:1.6;color:var(--color-ink-muted)}.body-sm{font-size:14px;font-weight:400;line-height:1.5;color:var(--color-ink-muted)}.caption{font-size:13px;font-weight:500;line-height:1.4;color:var(--color-ink-subtle)}.micro{font-size:12px;font-weight:400;line-height:1.3;color:var(--color-ink-subtle)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.container{max-width:1200px;margin:0 auto;padding:0 24px}.container-narrow{max-width:720px;margin:0 auto;padding:0 24px}.container-app{max-width:1040px;margin:0 auto;padding:0 24px}.section{padding:var(--space-section) 0}.section-eyebrow{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:13px;font-weight:500;color:var(--color-primary);background:var(--color-primary-subtle);border:1px solid var(--color-primary-soft);border-radius:var(--radius-pill);padding:5px 14px}.section-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-primary)}.section-head{max-width:640px}.section-head.center{margin-left:auto;margin-right:auto;text-align:center}.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-smooth),transform .6s var(--ease-smooth)}.reveal.in{opacity:1;transform:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);background:var(--color-primary);color:var(--color-canvas);font-size:14px;font-weight:500;border-radius:var(--radius-btn);padding:10px 20px;transition:background .15s ease,transform .1s ease;min-height:44px}.btn-primary:hover{background:var(--color-primary-hover)}.btn-primary:active{background:var(--color-primary-active);transform:scale(.97)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);background:var(--color-surface-card);color:var(--color-ink);font-size:14px;font-weight:500;border-radius:var(--radius-btn);padding:10px 20px;border:1px solid var(--color-hairline);transition:background .15s ease,transform .1s ease;min-height:44px}.btn-secondary:hover{background:var(--color-hairline)}.btn-secondary:active{transform:scale(.97)}.btn-ghost{display:inline-flex;align-items:center;gap:var(--space-xxs);background:transparent;color:var(--color-ink-muted);font-size:14px;font-weight:500;border-radius:var(--radius-btn);padding:10px 16px;min-height:44px}.btn-ghost:hover{background:var(--color-surface-card);color:var(--color-ink)}.btn-timer{background:var(--color-primary);color:var(--color-canvas);font-size:16px;font-weight:600;border-radius:var(--radius-pill);padding:16px 48px;min-width:180px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);transition:background .15s ease,transform .1s ease}.btn-timer:hover{background:var(--color-primary-hover)}.btn-timer:active{transform:scale(.97)}.btn-timer.active{background:var(--color-error)}.btn-timer.active:hover{background:var(--color-error-strong)}.badge-streak{display:inline-flex;align-items:center;gap:var(--space-xxs);background:var(--color-accent-soft);color:var(--color-accent);font-size:13px;font-weight:500;border-radius:var(--radius-pill);padding:4px 12px}.badge-status{font-size:12px;font-weight:500;border-radius:6px;padding:3px 10px;display:inline-flex;align-items:center;gap:6px;background:var(--color-surface-card);color:var(--color-ink-muted)}.badge-status.success{background:var(--color-success-soft);color:var(--color-success)}.badge-status.warning{background:var(--color-warning-soft);color:var(--color-warning-strong)}.badge-status.error{background:var(--color-error-soft);color:var(--color-error)}.card{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-card);padding:var(--space-lg)}.card-timer{background:var(--color-primary-subtle);border:1px solid var(--color-primary-soft);border-radius:24px;padding:40px 32px;box-shadow:var(--shadow-md);text-align:center}.card-stats{background:var(--color-surface-soft);border:1px solid var(--color-hairline-soft);border-radius:var(--radius-card);padding:20px 24px}.card-reminder{background:var(--color-warning-soft);border:1px solid var(--color-warning-line);border-left:4px solid var(--color-warning);border-radius:var(--radius-btn);padding:16px 20px}.progress-ring{width:120px;height:120px;position:relative;margin:0 auto}.progress-ring svg{transform:rotate(-90deg)}.progress-ring-track{stroke:var(--color-primary-soft);stroke-width:8;fill:none}.progress-ring-fill{stroke:var(--color-primary);stroke-width:8;fill:none;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease-smooth)}.progress-ring-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring-lg{width:160px;height:160px}.switch{position:relative;width:44px;height:26px;flex-shrink:0;display:inline-block}.switch input{opacity:0;width:0;height:0}.switch .track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-ink-faint);border-radius:var(--radius-pill);transition:background .2s var(--ease-smooth)}.switch .thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--color-canvas);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease-smooth)}.switch input:checked+.track{background:var(--color-primary)}.switch input:checked+.track+.thumb{transform:translate(18px)}.input{background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-btn);padding:10px 14px;font-family:var(--font-text);font-size:16px;color:var(--color-ink);transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.input::placeholder{color:var(--color-ink-subtle)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}.input-sm{padding:8px 12px;font-size:14px;min-height:40px}.field-label{font-size:13px;font-weight:500;color:var(--color-ink-muted);margin-bottom:6px;display:block}.progress-bar{height:4px;background:var(--color-primary-soft);border-radius:var(--radius-pill);overflow:hidden;width:100%}.progress-bar>span{display:block;height:100%;background:var(--color-primary);border-radius:var(--radius-pill);transition:width .6s var(--ease-smooth)}.heatmap-wrap{width:100%}.heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.heatmap-cell{aspect-ratio:1;border-radius:8px;background:var(--color-surface-card);transition:transform .12s ease;cursor:default}.heatmap-cell.empty{background:transparent}.heatmap-cell.warn{background:var(--color-warning-soft)}.heatmap-cell.ok{background:var(--color-success-soft)}.heatmap-cell.full{background:var(--color-primary)}.heatmap-cell.today{box-shadow:0 0 0 2px var(--color-primary)}.heatmap-cell:not(.empty):hover{transform:scale(1.12)}.heatmap-legend{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-xs);margin-top:var(--space-md)}.heatmap-legend .sw{width:12px;height:12px;border-radius:4px}.heatmap-legend span{font-size:12px;color:var(--color-ink-subtle)}.heatmap-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}.heatmap-weekdays span{text-align:center;font-size:12px;color:var(--color-ink-subtle)}.top-nav{position:sticky;top:0;z-index:var(--z-sticky);background:#ffffffd9;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}.top-nav.scrolled{border-bottom-color:var(--color-hairline);box-shadow:var(--shadow-xs)}.nav-inner{height:56px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:var(--space-sm);font-weight:600;letter-spacing:-.3px;color:var(--color-ink)}.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;color:var(--color-canvas)}.nav-links{display:flex;align-items:center;gap:var(--space-xs)}.nav-links a{font-size:14px;font-weight:500;color:var(--color-ink-muted);padding:8px 14px;border-radius:var(--radius-btn);transition:color .15s ease,background .15s ease}.nav-links a:hover{color:var(--color-ink);background:var(--color-surface-card)}.nav-links a.router-link-active{color:var(--color-primary)}.nav-actions{display:flex;align-items:center;gap:var(--space-sm)}.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-btn);color:var(--color-ink)}.nav-toggle:hover{background:var(--color-surface-card)}.nav-pill-group{background:var(--color-surface-card);border-radius:var(--radius-pill);padding:4px;display:inline-flex;gap:2px}.nav-pill{padding:8px 16px;border-radius:var(--radius-pill);font-size:14px;font-weight:500;color:var(--color-ink-muted);transition:all .15s ease}.nav-pill.router-link-active{background:var(--color-canvas);color:var(--color-ink);box-shadow:var(--shadow-xs)}.mobile-menu{display:none;background:var(--color-canvas);border-bottom:1px solid var(--color-hairline);padding:var(--space-md) 24px calc(var(--space-md) + 88px);position:fixed;top:56px;left:0;right:0;z-index:var(--z-sticky);box-shadow:var(--shadow-lg)}.mobile-menu.open{display:block;animation:slideDown .2s var(--ease-smooth)}.mobile-menu a{display:block;padding:14px 8px;font-size:16px;font-weight:500;color:var(--color-ink);border-bottom:1px solid var(--color-hairline-soft)}.mobile-menu .btn-primary{margin-top:var(--space-md);width:100%}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media (max-width: 768px){.nav-links{display:none}.nav-toggle{display:inline-flex}}@media (max-width: 640px){.nav-actions .btn-secondary{display:none}}[data-theme=dark]{--color-primary: #2dd4bf;--color-primary-hover: #5eead4;--color-primary-active: #14b8a6;--color-primary-soft: #134e4a;--color-primary-subtle: #0b3a39;--color-accent: #fb7185;--color-accent-soft: #4c1d2b;--color-ink: #f1f5f9;--color-ink-muted: #cbd5e1;--color-ink-subtle: #94a3b8;--color-ink-faint: #475569;--color-canvas: #0f172a;--color-surface-soft: #111c33;--color-surface-card: #1e293b;--color-surface-elevated: #1e293b;--color-hairline: #334155;--color-hairline-soft: #1e293b;--color-success: #34d399;--color-success-soft: #064e3b;--color-warning: #fbbf24;--color-warning-soft: #78350f;--color-warning-strong: #fbbf24;--color-warning-line: rgba(251, 191, 36, .25);--color-error: #f87171;--color-error-soft: #7f1d1d;--color-error-strong: #fca5a5;--color-info: #60a5fa;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px -1px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, .6), 0 4px 8px -4px rgba(0, 0, 0, .4);--shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .5);color-scheme:dark}