:root{--primary-50: oklch(97% .015 190);--primary-100: oklch(94% .03 190);--primary-200: oklch(89% .05 190);--primary-300: oklch(80% .07 190);--primary-400: oklch(70% .08 190);--primary-500: oklch(58% .08 190);--primary-600: oklch(50% .07 190);--primary-700: oklch(42% .06 190);--primary-800: oklch(32% .05 190);--primary-900: oklch(22% .03 190);--neutral-50: oklch(98% 0 0);--neutral-100: oklch(96% 0 0);--neutral-200: oklch(92% 0 0);--neutral-300: oklch(85% 0 0);--neutral-400: oklch(70% 0 0);--neutral-500: oklch(55% 0 0);--neutral-600: oklch(45% 0 0);--neutral-700: oklch(35% 0 0);--neutral-800: oklch(25% 0 0);--neutral-900: oklch(18% 0 0);--primary-color: var(--primary-500);--primary-hover: var(--primary-600);--primary-content: oklch(98.5% 0 0);--bg-app: oklch(96.5% 0 0);--bg-surface: oklch(98.5% 0 0);--bg-surface-solid: oklch(98.5% 0 0);--bg-surface-hover: oklch(96% 0 0);--bg-surface-active: oklch(94% 0 0);--bg-panel: oklch(97.5% 0 0);--bg-inset: oklch(96.5% 0 0);--text-primary: oklch(18% 0 0);--text-secondary: oklch(45% 0 0);--text-tertiary: oklch(62% 0 0);--text-on-primary: oklch(98.5% 0 0);--text-muted: oklch(72% 0 0);--border-color: oklch(88% 0 0);--border-light: oklch(93% 0 0);--border-strong: oklch(82% 0 0);--success-bg: oklch(96% .02 155);--success-text: oklch(45% .1 155);--warning-bg: oklch(96% .02 80);--warning-text: oklch(52% .1 65);--warning-500: oklch(58% .12 55);--error-bg: oklch(96% .02 25);--error-text: oklch(50% .12 25);--info-bg: oklch(96% .02 240);--info-text: oklch(45% .1 240);--font-sans: "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-heading: "Plus Jakarta Sans", "Noto Sans SC", system-ui, sans-serif;--font-body: "Plus Jakarta Sans", "Noto Sans SC", system-ui, sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--shadow-xs: 0 1px 2px oklch(0% 0 0 / .03);--shadow-sm: 0 1px 3px oklch(0% 0 0 / .04), 0 1px 2px oklch(0% 0 0 / .02);--shadow-md: 0 4px 8px oklch(0% 0 0 / .04), 0 2px 4px oklch(0% 0 0 / .02);--shadow-lg: 0 10px 25px oklch(0% 0 0 / .06), 0 4px 10px oklch(0% 0 0 / .03);--shadow-xl: 0 20px 50px oklch(0% 0 0 / .07), 0 8px 20px oklch(0% 0 0 / .04);--glass-bg: oklch(100% 0 0 / .6);--glass-bg-strong: oklch(100% 0 0 / .85);--glass-border: oklch(0% 0 0 / .06);--glass-shadow: 0 1px 3px oklch(0% 0 0 / .04), 0 1px 2px oklch(0% 0 0 / .02);--glass-blur: 12px;--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--transition-fast: all .15s var(--ease-out-quart);--transition: all .25s var(--ease-out-quart);--transition-slow: all .4s var(--ease-out-quart);--focus-ring: 0 0 0 2px var(--primary-300);--bg-code: oklch(22% .01 260);--text-code: oklch(90% 0 0);--text-code-muted: oklch(60% 0 0);--overlay-bg: oklch(16% .01 70 / .4);--overlay-bg-strong: oklch(10% .01 285 / .85);--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;--space-16: 64px}[data-theme=dark]{--primary-50: oklch(22% .02 190);--primary-100: oklch(25% .03 190);--primary-200: oklch(30% .04 190);--primary-300: oklch(38% .06 190);--primary-400: oklch(50% .07 190);--primary-500: oklch(62% .09 190);--primary-600: oklch(55% .08 190);--primary-700: oklch(65% .07 190);--primary-800: oklch(75% .05 190);--primary-900: oklch(85% .03 190);--neutral-50: oklch(18% 0 0);--neutral-100: oklch(20% 0 0);--neutral-200: oklch(25% 0 0);--neutral-300: oklch(30% 0 0);--neutral-400: oklch(40% 0 0);--neutral-500: oklch(55% 0 0);--neutral-600: oklch(65% 0 0);--neutral-700: oklch(75% 0 0);--neutral-800: oklch(85% 0 0);--neutral-900: oklch(92% 0 0);--primary-content: oklch(16% 0 0);--bg-app: oklch(14% .005 260);--bg-surface: oklch(19% .005 260);--bg-surface-solid: oklch(19% .005 260);--bg-surface-hover: oklch(24% .008 260);--bg-surface-active: oklch(27% .008 260);--bg-panel: oklch(17% .005 260);--bg-inset: oklch(13% .005 260);--text-primary: oklch(93% 0 0);--text-secondary: oklch(70% 0 0);--text-tertiary: oklch(50% 0 0);--text-on-primary: oklch(98% 0 0);--text-muted: oklch(40% 0 0);--border-color: oklch(27% .005 260);--border-light: oklch(22% .005 260);--border-strong: oklch(34% .008 260);--success-bg: oklch(20% .03 155);--success-text: oklch(65% .12 155);--warning-bg: oklch(20% .03 80);--warning-text: oklch(68% .12 65);--warning-500: oklch(65% .12 55);--error-bg: oklch(20% .03 25);--error-text: oklch(65% .14 25);--info-bg: oklch(20% .03 240);--info-text: oklch(65% .12 240);--shadow-xs: 0 1px 2px oklch(0% 0 0 / .12);--shadow-sm: 0 1px 3px oklch(0% 0 0 / .16), 0 1px 2px oklch(0% 0 0 / .1);--shadow-md: 0 4px 8px oklch(0% 0 0 / .18), 0 2px 4px oklch(0% 0 0 / .1);--shadow-lg: 0 10px 25px oklch(0% 0 0 / .25), 0 4px 10px oklch(0% 0 0 / .12);--shadow-xl: 0 20px 50px oklch(0% 0 0 / .3), 0 8px 20px oklch(0% 0 0 / .15);--glass-bg: oklch(18% 0 0 / .55);--glass-bg-strong: oklch(18% 0 0 / .82);--glass-border: oklch(100% 0 0 / .06);--glass-shadow: 0 1px 3px oklch(0% 0 0 / .15), 0 1px 2px oklch(0% 0 0 / .1);--focus-ring: 0 0 0 2px var(--primary-400);--bg-code: oklch(12% .008 260);--text-code: oklch(88% 0 0);--text-code-muted: oklch(50% 0 0);--overlay-bg: oklch(0% 0 0 / .6);--overlay-bg-strong: oklch(0% 0 0 / .88);color-scheme:dark}html.theme-transitioning,html.theme-transitioning *,html.theme-transitioning *:before,html.theme-transitioning *:after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease!important}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;height:100%}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}body{font-family:var(--font-sans);background:var(--bg-app);color:var(--text-primary);line-height:1.65;height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;font-kerning:normal;font-variant-numeric:tabular-nums}#app{height:100%;display:flex;flex-direction:column}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;max-height:0}to{opacity:1;max-height:600px}}@media (max-width: 960px){html{font-size:15px}}@media (max-width: 640px){html{font-size:14px}}.page-transition{animation:fadeIn .35s var(--ease-out-expo) forwards}.text-h1{font-size:2rem;font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--text-primary)}.text-h2{font-size:1.5rem;font-weight:700;line-height:1.3;letter-spacing:-.02em}.text-h3{font-size:1.1rem;font-weight:600;line-height:1.4;letter-spacing:-.01em}.text-body{font-size:.94rem;line-height:1.65;color:var(--text-primary);max-width:65ch}.text-sm{font-size:.84rem;line-height:1.6;color:var(--text-secondary)}.text-xs{font-size:.72rem;line-height:1.5;color:var(--text-tertiary);letter-spacing:.01em}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary-600);color:var(--text-on-primary);padding:9px 22px;border-radius:var(--radius-sm);border:none;font-weight:600;font-size:.85rem;letter-spacing:.01em;cursor:pointer;transition:background .15s var(--ease-out-quart),transform .1s var(--ease-out-quart)}.btn-primary:hover{background:var(--primary-700)}.btn-primary:active{transform:translateY(1px)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--text-primary);padding:9px 22px;border-radius:var(--radius-sm);border:1px solid var(--border-color);font-weight:500;font-size:.85rem;cursor:pointer;transition:border-color .15s var(--ease-out-quart),color .15s var(--ease-out-quart)}.btn-secondary:hover{border-color:var(--neutral-400)}.btn-secondary:active{transform:translateY(1px)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}