:root{--color-primary-50: #FDFBF7;--color-primary-100: #F5F1EA;--color-primary-200: #E8E2D8;--color-primary-300: #D8CFC4;--color-primary-400: #Cfb997;--color-primary-500: #a39171;--color-primary-600: #8a7860;--color-primary-700: #5a5a5a;--color-primary-800: #2C2A25;--color-primary-900: #1a1916;--color-bg-outer: var(--color-primary-50);--color-bg-inner: #FFFFFF;--color-bg-card: #FFFFFF;--color-bg-reading: var(--color-primary-50);--color-bg-app: var(--color-bg-outer);--color-text-primary: var(--color-primary-800);--color-text-secondary: var(--color-primary-700);--color-text-muted: #6A645A;--color-accent: var(--color-primary-500);--color-accent-hover: var(--color-primary-500);--color-accent-light: #dcd3c1;--color-accent-dark: var(--color-primary-600);--color-border-subtle: rgba(163, 145, 113, .06);--color-border-light: #e5e0d8;--color-border-default: rgba(163, 145, 113, .12);--color-border-medium: #d2c9b8;--color-border-highlight: rgba(255, 255, 255, .6);--color-glass-bg: rgba(253, 251, 247, .65);--color-glass-border: rgba(0, 0, 0, .06);--color-success: #7d9a7d;--color-warning: #b8a86b;--color-error: #c97d7d;--color-white: #FFFFFF;--color-black: #000000}:root{--font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Heiti TC", "PMingLiu", system-ui, sans-serif;--font-serif: "Songti TC", "PMingLiu", "BiauKai", "Kaiti TC", Georgia, serif;--font-display: var(--font-serif);--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.0625rem;--text-xl: 1.125rem;--text-xs-sm: .6875rem;--text-1point5xl: 1.5rem;--text-icon-sm: 1.75rem;--text-icon-lg: 2.25rem;--text-2xl: 1.25rem;--text-3xl: 1.5625rem;--text-4xl: 1.953125rem;--text-5xl: 2.44140625rem;--text-6xl: 3.0517578125rem;--text-hero: 2.441rem;--text-reading: 1.125rem;--line-height-tight: 1.3;--line-height-snug: 1.4;--line-height-normal: 1.5;--line-height-relaxed: 1.7;--line-height-loose: 1.9;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700}:root{--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;--space-20: 80px;--reading-padding-x: 24px;--page-padding-x: 20px;--container-max-width: 1100px;--content-max-width: 720px;--reading-max-width: 72ch;--reading-paragraph-space: 1.5em;--reading-text-indent: 2em}:root{--shadow-xs: 0 2px 8px -2px rgba(163, 145, 113, .1);--shadow-sm: 0 8px 30px -12px rgba(163, 145, 113, .15), 0 4px 12px -4px rgba(163, 145, 113, .1);--shadow-md: 0 12px 40px -12px rgba(163, 145, 113, .2), 0 6px 16px -4px rgba(163, 145, 113, .15);--shadow-lg: 0 16px 48px -12px rgba(163, 145, 113, .22), 0 8px 20px -4px rgba(163, 145, 113, .18);--shadow-float: var(--shadow-md);--shadow-hover: var(--shadow-md);--shadow-card: var(--shadow-sm);--shadow-card-hover: var(--shadow-md)}:root{--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 28px;--radius-full: 9999px}:root{--ease-elastic: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.2, .8, .2, 1);--t-fast: .15s;--t-normal: .25s;--t-slow: .4s;--t-silent: .6s ease-out}:root{--button-min-height: 44px;--button-min-width: 44px;--button-padding-x: 20px;--button-padding-y: 12px;--button-radius: var(--radius-lg);--input-height: 48px;--input-radius: var(--radius-md);--card-radius: var(--radius-lg);--card-padding: var(--space-5);--nav-height: 64px;--nav-safe-area: env(safe-area-inset-bottom, 0px);--footer-height: 72px}:root{--bg-outer: var(--color-bg-outer);--bg-base: var(--color-bg-inner);--bg-card: var(--color-bg-card);--bg-reading: var(--color-bg-reading);--bg-app: var(--color-bg-app);--text-main: var(--color-text-primary);--text-dark: var(--color-text-primary);--text-sub: var(--color-text-secondary);--accent: var(--color-accent);--accent-hover: var(--color-accent-hover);--accent-light: var(--color-accent-light);--accent-dark: var(--color-accent-dark);--border-subtle: var(--color-border-subtle);--border-light: var(--color-border-light);--border-default: var(--color-border-default);--border-medium: var(--color-border-medium);--glass-bg: var(--color-glass-bg);--glass-border: var(--color-glass-border);--shadow-xs: var(--shadow-xs);--shadow-sm: var(--shadow-sm);--shadow-md: var(--shadow-md);--shadow-lg: var(--shadow-lg);--shadow-float: var(--shadow-float);--shadow-hover: var(--shadow-hover);--shadow-card: var(--shadow-card);--shadow-card-hover: var(--shadow-card-hover);--font-serif: var(--font-serif);--font-sans: var(--font-sans);--text-xs: var(--text-xs);--text-sm: var(--text-sm);--text-base: var(--text-base);--text-lg: var(--text-lg);--text-xl: var(--text-xl);--text-2xl: var(--text-2xl);--text-3xl: var(--text-3xl);--text-hero: var(--text-hero);--font-normal: var(--font-normal);--font-medium: var(--font-medium);--font-semibold: var(--font-semibold);--font-bold: var(--font-bold);--spacing-1: var(--space-1);--spacing-2: var(--space-2);--spacing-3: var(--space-3);--spacing-4: var(--space-4);--spacing-5: var(--space-5);--spacing-6: var(--space-6);--spacing-8: var(--space-8);--spacing-10: var(--space-10);--spacing-12: var(--space-12);--ease-elastic: var(--ease-elastic);--ease-smooth: var(--ease-smooth);--t-fast: var(--t-fast);--t-normal: var(--t-normal);--t-slow: var(--t-slow);--t-silent: var(--t-silent);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 28px;--radius-full: 9999px;--color-border-light: var(--color-border-subtle);--color-border: var(--color-border-default)}[data-theme=night]{--color-bg-outer: #121210;--color-bg-inner: #1a1a18;--color-bg-card: #1e1e1c;--color-bg-reading: #1e1e1c;--color-bg-app: #121210;--color-text-primary: #E8E6E0;--color-text-secondary: #a8a49c;--color-text-muted: #6b6560;--color-accent: #d4a574;--color-accent-hover: #c49464;--color-accent-light: #4a4035;--color-accent-dark: #b8895a;--color-border-subtle: rgba(255, 255, 255, .04);--color-border-light: #2a2a28;--color-border-default: rgba(255, 255, 255, .08);--color-border-medium: rgba(255, 255, 255, .12);--color-border-highlight: rgba(255, 255, 255, .08);--color-success: #6b856b;--color-warning: #a89060;--color-error: #b87070;--bg-outer: #121210;--bg-base: #1a1a18;--text-dark: #E8E6E0;--text-muted: #6b6560;--text-sub: #a8a49c;--color-border-light: rgba(255, 255, 255, .06);--color-border: rgba(255, 255, 255, .1)}[data-theme=sepia]{--color-bg-outer: #F5F0E8;--color-bg-inner: #FAF6EF;--color-bg-card: #FAF6EF;--color-bg-reading: #F5F0E8;--color-bg-app: #F5F0E8;--color-text-primary: #4A4538;--color-text-secondary: #6B5F4F;--color-text-muted: #8B8070;--color-accent: #8B7355;--color-accent-hover: #7a6248;--color-accent-light: #d5c9b5;--color-accent-dark: #6d573f;--color-border-subtle: rgba(74, 69, 56, .06);--color-border-light: #e8e0d0;--color-border-default: rgba(74, 69, 56, .12);--color-border-medium: rgba(74, 69, 56, .2);--color-border-highlight: rgba(255, 255, 255, .5);--color-success: #6d7a6d;--color-warning: #a09055;--color-error: #b06565;--bg-outer: #F5F0E8;--bg-base: #FAF6EF;--text-dark: #4A4538;--text-muted: #8B8070;--text-sub: #6B5F4F;--color-border-light: rgba(74, 69, 56, .06);--color-border: rgba(74, 69, 56, .1)}:root{--page-padding-x: 20px}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{font-size:16px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}body{font-family:var(--font-sans);background:var(--bg-outer);color:var(--text-dark);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0;overflow-x:hidden;position:relative;min-height:100vh}.content-wrapper{width:100%;max-width:1100px;margin:0 auto;padding:0 var(--page-padding-x)}@media(min-width:640px){.content-wrapper{padding:0 var(--spacing-8)}}@media(min-width:1024px){.content-wrapper{padding:0 var(--spacing-10)}}.main{flex:1;padding-bottom:80px}@media(min-width:1024px){.main{padding-bottom:100px}}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.footer-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;background:#ffffffe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 -4px 20px #00000014;border-top:1px solid var(--color-border-light)}.footer-nav-inner{display:flex;justify-content:space-around;align-items:center;width:100%;max-width:1100px}@media(min-width:1024px){.footer-nav{position:fixed;bottom:0;padding:12px 32px;background:#fffffff2}.footer-nav-inner{max-width:800px}.footer-tab{flex-direction:row;gap:8px;padding:12px 20px}.footer-tab svg{width:20px;height:20px}.footer-tab span{font-size:14px}}.footer-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 12px;background:transparent;border:none;border-radius:12px;color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.2,.8,.2,1);min-width:60px;min-height:52px;text-decoration:none}.footer-tab svg{width:24px;height:24px;transition:transform .2s}.footer-tab span{font-size:10px;letter-spacing:.3px}.footer-tab:active{transform:scale(.92);background:#a391711f}.footer-tab.active{color:var(--accent)}.footer-tab.active svg{transform:scale(1.1)}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:var(--color-white);padding:8px 16px;z-index:1000;transition:top .2s;font-weight:600;text-decoration:none;border-radius:0 0 8px}.skip-link:focus{top:0;outline:2px solid var(--accent);outline-offset:2px}a{color:inherit;text-decoration:none}.btn-press{transition:all .2s cubic-bezier(.2,.8,.2,1)}.btn-press:active{transform:scale(.98);box-shadow:0 2px 4px #0000001a}.scroll-snap{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.scroll-snap>*{scroll-snap-align:start}@keyframes page-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-enter{animation:page-enter var(--t-silent) forwards}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}