:root{--token-color-coral: #ff6b6b;--token-color-coral-dark: #e85d5d;--token-color-mint: #4ecdc4;--token-color-yellow: #ffe66d;--token-space-1: .25rem;--token-space-2: .5rem;--token-space-3: .75rem;--token-space-4: 1rem;--token-space-5: 1.25rem;--token-space-6: 1.5rem;--token-space-8: 2rem;--token-space-10: 2.5rem;--token-space-12: 3rem;--token-space-16: 4rem;--token-font-family-sans: "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--token-font-family-display: "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--token-font-family-mono: "SF Mono", Monaco, monospace;--token-font-size-xs: .75rem;--token-font-size-sm: .875rem;--token-font-size-base: 1rem;--token-font-size-lg: 1.125rem;--token-font-size-xl: 1.25rem;--token-font-size-2xl: 1.5rem;--token-font-weight-normal: 400;--token-font-weight-medium: 500;--token-font-weight-semibold: 600;--token-font-weight-bold: 700;--token-line-height-tight: 1.25;--token-line-height-normal: 1.5;--token-line-height-relaxed: 1.75;--token-radius-sm: 4px;--token-radius-md: 8px;--token-radius-lg: 12px;--token-radius-xl: 16px;--token-radius-full: 9999px;--token-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--token-shadow-md: 0 4px 6px rgba(0, 0, 0, .07);--token-shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--token-shadow-dark-sm: 0 1px 2px rgba(0, 0, 0, .3);--token-shadow-dark-md: 0 4px 6px rgba(0, 0, 0, .4);--token-shadow-dark-lg: 0 10px 15px rgba(0, 0, 0, .5);--token-duration-fast: .15s;--token-duration-normal: .3s;--token-duration-slow: .5s;--token-ease-out: cubic-bezier(0, 0, .2, 1);--token-ease-out-expo: cubic-bezier(.19, 1, .22, 1)}:root{--font-body: var(--token-font-family-sans);--font-display: var(--token-font-family-display);--font-mono: var(--token-font-family-mono);--text-xs: var(--token-font-size-xs);--text-sm: var(--token-font-size-sm);--text-base: var(--token-font-size-base);--text-lg: var(--token-font-size-lg);--text-xl: var(--token-font-size-xl);--text-2xl: var(--token-font-size-2xl);--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-normal: var(--token-font-weight-normal);--font-medium: var(--token-font-weight-medium);--leading-tight: var(--token-line-height-tight);--leading-normal: var(--token-line-height-normal);--leading-relaxed: var(--token-line-height-relaxed);--leading-snug: 1.375;--tracking-tight: -.025em;--tracking-wide: .025em;--tracking-wider: .05em;--space-1: var(--token-space-1);--space-2: var(--token-space-2);--space-3: var(--token-space-3);--space-4: var(--token-space-4);--space-5: var(--token-space-5);--space-6: var(--token-space-6);--space-8: var(--token-space-8);--space-10: var(--token-space-10);--space-12: var(--token-space-12);--space-16: var(--token-space-16);--space-20: 5rem;--space-32: 8rem;--radius-sm: var(--token-radius-sm);--radius-md: var(--token-radius-md);--radius-full: var(--token-radius-full);--shadow-sm: var(--token-shadow-sm);--shadow-md: var(--token-shadow-md);--shadow-lg: var(--token-shadow-lg);--transition-fast: var(--token-duration-fast);--transition-slow: var(--token-duration-slow);--ease-out-expo: var(--token-ease-out-expo);--size-max: 1440px}:root,[data-theme=light]{--accent-primary: var(--token-color-coral);--accent-secondary: var(--token-color-mint);--bg-primary: #faf8f5;--bg-secondary: rgba(255, 255, 255, .6);--bg-card: rgba(255, 255, 255, .6);--bg-hover: #f5f3f0;--card-bg: rgba(255, 255, 255, .85);--text-primary: #1a1a1a;--text-secondary: #444444;--text-muted: #4b4b4b;--text-tertiary: var(--text-muted);--text-inverse: #ffffff;--border-light: rgba(0, 0, 0, .08);--border-medium: var(--border-light);--border-strong: #a8a6a3;--border-color: var(--border-medium);--sidebar-bg: var(--bg-hover);--stage-bg: var(--bg-primary);--btn-bg: rgba(0, 0, 0, .05);--btn-hover-bg: rgba(0, 0, 0, .1);--accent-color: var(--accent-secondary);--accent-contrast: #0a0a0a;--accent-primary-light: rgba(255, 107, 107, .1);--accent-link: #b42318;--danger: #b42318;--status-ok: #0f766e;--shadow-color: rgba(0, 0, 0, .1);--category-mechanics: #1d4ed8;--category-electromagnetism: #b45309;--category-method: #7c3aed;--category-optics: #0f766e;--category-thermal: #c2410c;--category-modern: #9333ea;--category-experimental: #475569;--difficulty-level-1-text: #1d4ed8;--difficulty-level-1-bg: rgba(59, 130, 246, .1);--difficulty-level-2-text: #b45309;--difficulty-level-2-bg: rgba(245, 158, 11, .1);--difficulty-level-3-text: #7c3aed;--difficulty-level-3-bg: rgba(139, 92, 246, .1);--mobile-accent-text: #cc2f2f}[data-theme=dark]{--accent-primary: var(--token-color-coral);--accent-secondary: var(--token-color-mint);--bg-primary: #0f172a;--bg-secondary: rgba(30, 41, 59, .6);--bg-card: rgba(30, 41, 59, .8);--bg-hover: rgba(255, 255, 255, .1);--card-bg: rgba(30, 30, 30, .85);--text-primary: #fafafa;--text-secondary: #b0b8c4;--text-muted: #8a94a6;--text-tertiary: #7a8494;--text-inverse: #0a0a0a;--border-light: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .2);--border-color: var(--border-medium);--sidebar-bg: #0a0f1a;--stage-bg: var(--bg-primary);--btn-bg: rgba(255, 255, 255, .1);--btn-hover-bg: rgba(255, 255, 255, .15);--accent-color: var(--accent-secondary);--accent-contrast: #0a0a0a;--accent-primary-light: rgba(255, 107, 107, .15);--accent-link: #ff9b91;--danger: #ffb4ab;--status-ok: #5eead4;--shadow-color: rgba(0, 0, 0, .3);--shadow-sm: var(--token-shadow-dark-sm);--shadow-md: var(--token-shadow-dark-md);--shadow-lg: var(--token-shadow-dark-lg);--category-mechanics: #60a5fa;--category-electromagnetism: #fbbf24;--category-method: #a78bfa;--category-optics: #2dd4bf;--category-thermal: #fb923c;--category-modern: #d8b4fe;--category-experimental: #cbd5e1;--difficulty-level-1-text: #60a5fa;--difficulty-level-1-bg: rgba(96, 165, 250, .15);--difficulty-level-2-text: #fbbf24;--difficulty-level-2-bg: rgba(251, 191, 36, .15);--difficulty-level-3-text: #c4b5fd;--difficulty-level-3-bg: rgba(196, 181, 253, .15);--mobile-accent-text: var(--token-color-coral)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;height:100%;background-color:var(--bg-primary);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-normal);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-primary);transition:background-color var(--transition-slow),color var(--transition-slow);min-height:100vh;height:100%}#app{height:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--text-primary);color:var(--bg-primary)}.container{width:100%;max-width:var(--size-max);margin:0 auto;padding:0 var(--space-8)}.section{position:relative;padding:var(--space-32) 0}.link{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-medium);transition:border-color var(--transition-fast)}.link:hover{border-color:var(--text-primary)}.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-6);transition:all var(--transition-fast)}.card:hover{border-color:var(--border-medium);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media not (min-width:768px){.container{padding:0 var(--space-5)}.section{padding:var(--space-20) 0}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--token-color-coral-dark, #e85d5d);outline-offset:2px}.dot-grid{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.3;background-image:radial-gradient(circle,var(--text-muted) 1px,transparent 1px);background-size:32px 32px}.skip-link{position:fixed;top:0;left:var(--space-4);z-index:200;padding:var(--space-3) var(--space-4);background:var(--text-primary);color:var(--bg-primary);text-decoration:none;transform:translateY(-120%);transition:transform var(--transition-fast)}.skip-link:focus{transform:translateY(var(--space-2))}.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:#fafafacc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-light)}[data-theme=dark] .site-header{background:#0a0a0acc}.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between}.logo{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-medium);color:var(--text-primary);text-decoration:none}.nav{display:flex;gap:var(--space-10)}.nav-toggle{display:none}.nav a{font-size:var(--text-base);font-weight:var(--font-medium);color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast)}.nav a:hover{color:var(--text-primary)}.theme-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-light);border-radius:var(--radius-full);color:var(--text-secondary);font-size:var(--text-lg);cursor:pointer;transition:all var(--transition-fast)}.theme-toggle:hover{border-color:var(--text-primary);color:var(--text-primary)}.app-loading-fallback{padding:120px 0;text-align:center}.app-loading-text{color:var(--text-secondary)}.section-label{display:block;font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-muted);margin-bottom:var(--space-4)}.site-footer{padding:var(--space-8) 0;border-top:1px solid var(--border-light);text-align:center}.footer-inner p{font-size:var(--text-sm);color:var(--text-muted)}.experiments-section{position:relative;padding:calc(72px + var(--space-10)) 0 clamp(5rem,10vw,8rem);background:var(--bg-primary)}.section-header{max-width:600px;margin-bottom:var(--space-12);opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}.section-header.visible{opacity:1;transform:translateY(0)}.section-title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--font-medium);color:var(--text-primary);margin-bottom:var(--space-3)}.section-desc{font-size:var(--text-lg);color:var(--text-secondary)}.filter-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-10);opacity:0;transform:translateY(20px);transition:opacity .8s .1s var(--ease-out-expo),transform .8s .1s var(--ease-out-expo)}.directory-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:var(--space-4);margin-bottom:var(--space-4);opacity:0;transform:translateY(20px);transition:opacity .8s .05s var(--ease-out-expo),transform .8s .05s var(--ease-out-expo)}.directory-tools.visible{opacity:1;transform:translateY(0)}.search-field,.chapter-field{display:flex;flex-direction:column;gap:var(--space-2)}.search-label{color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--font-medium);letter-spacing:var(--tracking-wide)}.search-input-wrap{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:var(--space-4);color:var(--text-muted);font-size:var(--text-xl);line-height:1;pointer-events:none}.search-input-wrap input,.chapter-field select{width:100%;min-height:44px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);font:inherit}.search-input-wrap input{padding:0 var(--space-12) 0 var(--space-10)}.search-input-wrap input::placeholder{color:var(--text-muted)}.search-input-wrap input:focus,.chapter-field select:focus{border-color:var(--text-primary);outline:2px solid var(--text-primary);outline-offset:1px}.search-clear{position:absolute;right:var(--space-2);width:36px;height:36px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:var(--text-xl)}.search-clear:hover{background:var(--bg-hover);color:var(--text-primary)}.chapter-field select{padding:0 var(--space-4)}.directory-status{min-height:1.5rem;margin:0 0 var(--space-5);color:var(--text-muted);font-size:var(--text-sm)}.filter-bar.visible{opacity:1;transform:translateY(0)}.filter-btn{min-height:44px;padding:var(--space-2) var(--space-5);background:transparent;border:1px solid var(--border-light);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.filter-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}.filter-btn.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-primary)}.experiments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.experiment-card{position:relative;display:flex;flex-direction:column;padding:var(--space-6);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);text-decoration:none;color:inherit;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo),border-color var(--transition-fast),box-shadow var(--transition-fast)}.experiment-card.visible{opacity:1;transform:translateY(0)}.experiment-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg)}.card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6)}.card-number{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-muted)}.difficulty{font-size:var(--text-xs);font-weight:var(--font-medium);padding:4px 10px;border-radius:var(--radius-full)}.difficulty.level-1{background:var(--difficulty-level-1-bg);color:var(--difficulty-level-1-text)}.difficulty.level-2{background:var(--difficulty-level-2-bg);color:var(--difficulty-level-2-text)}.difficulty.level-3{background:var(--difficulty-level-3-bg);color:var(--difficulty-level-3-text)}.card-content{flex:1;margin-bottom:var(--space-6)}.card-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-medium);color:var(--text-primary);margin-bottom:var(--space-2);transition:color var(--transition-fast)}.experiment-card:hover .card-title{color:var(--text-secondary)}.card-desc{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-tertiary)}.card-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding-top:var(--space-4);border-top:1px solid var(--border-light)}.card-category{font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.card-chapter{max-width:65%;color:var(--text-muted);font-size:var(--text-xs);text-align:right}.card-arrow{font-size:var(--text-lg);color:var(--text-muted);transition:transform var(--transition-fast),color var(--transition-fast)}.experiment-card:hover .card-arrow{transform:translate(4px);color:var(--text-primary)}.card-border{position:absolute;inset:-1px;border:2px solid transparent;border-radius:var(--radius-md);pointer-events:none;transition:border-color var(--transition-fast)}.directory-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-12);border:1px dashed var(--border-strong);color:var(--text-secondary)}.directory-empty strong{color:var(--text-primary);font-size:var(--text-lg)}.empty-reset{min-height:44px;padding:0 var(--space-4);border:1px solid var(--border-medium);border-radius:var(--radius-md);background:transparent;color:var(--text-primary);cursor:pointer;font:inherit}.experiment-card:hover .card-border{border-color:var(--text-primary)}@media(max-width:1024px){.experiments-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.nav{display:none;position:absolute;top:calc(100% + var(--space-2));right:var(--space-4);z-index:20;flex-direction:column;align-items:stretch;min-width:150px;padding:var(--space-2);background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.nav.is-open{display:flex}.nav a{min-height:var(--touch-min, 44px);display:flex;align-items:center;padding:0 var(--space-3)}.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min, 44px);height:var(--touch-min, 44px);border:1px solid var(--border-color);background:transparent;color:var(--text-primary);cursor:pointer}.experiments-section{padding:calc(72px + var(--space-6)) 0 var(--space-20)}.directory-tools,.experiments-grid{grid-template-columns:1fr}.section-title{font-size:var(--text-3xl)}}