:root{--color-primary-700: #3d7899;--color-primary-600: #4a8cb0;--color-primary-500: #5e9dc0;--color-primary-400: #7fb3ce;--color-primary-300: #a4c9dc;--color-primary-200: #c6dcea;--color-primary-100: #dfeaf2;--color-primary-50: #f0f5f9;--color-accent-600: #b58a86;--color-accent-500: #c99a96;--color-accent-300: #e2c8c5;--color-accent-100: #f3e7e5;--color-neutral-900: #1b2530;--color-neutral-800: #2c3a47;--color-neutral-700: #3e4c5a;--color-neutral-600: #55636f;--color-neutral-500: #6b7a89;--color-neutral-400: #8d99a5;--color-neutral-300: #b4bfca;--color-neutral-200: #d3dbe3;--color-neutral-100: #e8edf2;--color-neutral-50: #f7f9fb;--color-success: #6f9e7c;--color-success-bg: #eef4ef;--color-warning: #c9a05a;--color-warning-bg: #f8f2e7;--color-danger: #b4706c;--color-danger-bg: #f7edec;--bg-page: #fbfcfd;--bg-surface: #ffffff;--bg-sunken: #f4f7fa;--bg-elevated:#ffffff;--text-primary: var(--color-neutral-900);--text-secondary: var(--color-neutral-600);--text-tertiary: var(--color-neutral-400);--text-inverse: #ffffff;--text-link: var(--color-primary-600);--border-hairline: #edf1f5;--border-default: var(--color-neutral-200);--border-strong: var(--color-neutral-300);--radius-xs: 6px;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 999px;--shadow-xs: 0 1px 2px rgba(27, 37, 48, .04);--shadow-sm: 0 2px 8px rgba(27, 37, 48, .05);--shadow-md: 0 6px 20px rgba(27, 37, 48, .07);--shadow-lg: 0 16px 40px rgba(27, 37, 48, .1);--shadow-focus: 0 0 0 3px rgba(94, 157, 192, .28);--font-xs: .75rem;--font-sm: .8125rem;--font-base: .9375rem;--font-md: 1.0625rem;--font-lg: 1.25rem;--font-xl: 1.5rem;--font-hero: clamp(3.5rem, 20vw, 5.5rem);--weight-light: 200;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--leading-tight: 1.2;--leading-normal: 1.6;--leading-relaxed: 1.8;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--page-max-width: 480px;--page-gutter: var(--space-5);--tap-target: 44px;--safe-bottom: env(safe-area-inset-bottom, 0px);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .12s;--duration-base: .22s;--duration-slow: .4s;--font-sans: -apple-system, BlinkMacSystemFont, "HarmonyOS Sans SC", "PingFang SC", "MiSans", "Source Han Sans SC", "Microsoft YaHei", system-ui, "Segoe UI", sans-serif;--font-mono: "SF Mono", "JetBrains Mono", Consolas, monospace}@media (prefers-color-scheme: dark){:root{--color-primary-600: #6fa8c8;--color-primary-500: #82b8d4;--color-primary-100: #24333f;--color-primary-50: #1a2530;--color-accent-500: #d3a8a4;--color-accent-100: #33262a;--bg-page: #0f1419;--bg-surface: #171e25;--bg-sunken: #121820;--bg-elevated:#1c242d;--text-primary: #e6edf3;--text-secondary: #a3b0bc;--text-tertiary: #6f7d8a;--text-inverse: #0f1419;--border-hairline: #1f272f;--border-default: #2a343e;--border-strong: #3a4650;--color-success: #85b392;--color-warning: #d4b078;--color-danger: #c98a86;--color-success-bg: #16211a;--color-warning-bg: #211d15;--color-danger-bg: #241a1a;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .32);--shadow-md: 0 6px 20px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .5)}}[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-height:100svh;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--font-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}h1,h2,h3,h4,p,figure{margin:0}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;min-height:var(--tap-target);-webkit-tap-highlight-color:transparent}a{color:var(--text-link);text-decoration:none}:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.page{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--page-gutter) calc(var(--space-12) + var(--safe-bottom))}.stack>*+*{margin-top:var(--space-4)}.card{background:var(--bg-surface);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-xs)}.text-title{font-size:var(--font-xl);font-weight:var(--weight-semibold);letter-spacing:-.01em;line-height:var(--leading-tight)}.text-section{font-size:var(--font-lg);font-weight:var(--weight-semibold);letter-spacing:-.01em}.text-body{font-size:var(--font-base);color:var(--text-primary)}.text-secondary{font-size:var(--font-sm);color:var(--text-secondary)}.text-tertiary{font-size:var(--font-xs);color:var(--text-tertiary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-5);min-height:var(--tap-target);border-radius:var(--radius-full);font-size:var(--font-base);font-weight:var(--weight-medium);transition:transform var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.btn-primary{background:var(--color-primary-600);color:var(--text-inverse);box-shadow:var(--shadow-sm)}.btn-primary:active{transform:scale(.97);background:var(--color-primary-700)}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-default)}.btn-ghost:active{background:var(--bg-sunken);transform:scale(.97)}.tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 10px;border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:var(--weight-medium);background:var(--color-primary-50);color:var(--color-primary-700)}.tag-accent{background:var(--color-accent-100);color:var(--color-accent-600)}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fade-up var(--duration-slow) var(--ease-out) both}@keyframes tap-confirm{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}.tap-confirm{animation:tap-confirm var(--duration-slow) var(--ease-spring)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.offline-banner{position:sticky;top:0;z-index:10;padding:var(--space-2) var(--page-gutter);background:var(--color-warning-bg);color:var(--color-warning);font-size:var(--font-xs);text-align:center}
