:root{--token-color-coral: #FF6B6B;--token-color-coral-light: #FF8E72;--token-color-coral-dark: #E85D5D;--token-color-mint: #4ECDC4;--token-color-mint-light: #95E1D3;--token-color-mint-dark: #3DBDB5;--token-color-yellow: #FFE66D;--token-color-salmon: #FFA07A;--token-color-slate-900: #0f172a;--token-color-slate-800: #1e293b;--token-color-slate-700: #334155;--token-color-slate-600: #475569;--token-color-slate-500: #64748b;--token-color-slate-400: #94a3b8;--token-color-slate-300: #cbd5e1;--token-color-slate-200: #e2e8f0;--token-color-slate-100: #f1f5f9;--token-color-slate-50: #f8fafc;--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: "Satoshi", "Noto Sans SC", system-ui, sans-serif;--token-font-family-display: "Clash Display", 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);--token-z-base: 0;--token-z-dropdown: 100;--token-z-sticky: 200;--token-z-fixed: 300;--token-z-modal: 400;--token-z-tooltip: 500;--token-sidebar-width: 320px;--token-sidebar-min-width: 280px;--token-sidebar-max-width: 960px;--token-resizer-width: 8px;--token-toolbar-height: 48px;--token-header-height: 64px}: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);--font-semibold: var(--token-font-weight-semibold);--font-bold: var(--token-font-weight-bold);--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-normal: 0;--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-24: 6rem;--space-32: 8rem;--radius-sm: var(--token-radius-sm);--radius-md: var(--token-radius-md);--radius-lg: var(--token-radius-lg);--radius-xl: var(--token-radius-xl);--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-normal: var(--token-duration-normal);--transition-slow: var(--token-duration-slow);--ease-out: var(--token-ease-out);--ease-out-expo: var(--token-ease-out-expo);--size-max: 1440px;--size-content: 768px}: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: #555555;--text-muted: #888888;--text-tertiary: #999999;--text-inverse: #ffffff;--border-light: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .08);--border-strong: #a8a6a3;--border-color: var(--border-medium);--shadow-color: rgba(0, 0, 0, .1);--category-mechanics: #3b82f6;--category-electromagnetism: #d97706;--category-method: #7c3aed;--difficulty-level-1-text: #2563eb;--difficulty-level-1-bg: rgba(59, 130, 246, .1);--difficulty-level-2-text: #d97706;--difficulty-level-2-bg: rgba(245, 158, 11, .1);--difficulty-level-3-text: #7c3aed;--difficulty-level-3-bg: rgba(139, 92, 246, .1)}[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);--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;--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: #a78bfa;--difficulty-level-3-bg: rgba(167, 139, 250, .15)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;height:100%;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)}.dot-grid{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;background-image:radial-gradient(circle,var(--text-muted) 1px,transparent 1px);background-size:24px 24px}.display-xl{font-family:var(--font-display);font-size:var(--text-6xl);font-weight:var(--font-medium);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-secondary)}.display-lg{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--text-primary)}.display-md{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--text-primary)}.text-body{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-secondary)}.text-label{font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-muted)}.container{width:100%;max-width:var(--size-max);margin:0 auto;padding:0 var(--space-8)}.section{position:relative;padding:var(--space-32) 0}.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);background:var(--accent-primary);color:var(--text-inverse);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-medium);text-decoration:none;border-radius:var(--radius-full);border:none;cursor:pointer;transition:all var(--transition-fast)}.btn-primary:hover{opacity:.85;transform:translateY(-1px)}.btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);background:transparent;color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-medium);text-decoration:none;border:1px solid var(--border-strong);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.btn-outline:hover{background:var(--text-primary);color:var(--bg-primary)}.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)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .8s var(--ease-out-expo) forwards}.animate-fade-in-up{animation:fadeInUp 1s var(--ease-out-expo) forwards}@media(max-width:767px){.container{padding:0 var(--space-5)}.section{padding:var(--space-20) 0}.display-xl{font-size:var(--text-4xl)}.display-lg{font-size:var(--text-3xl)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}[role=separator]:focus-visible{outline:2px solid var(--accent-color, #4ecdc4);outline-offset:2px}button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--accent-color, #4ecdc4);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}.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 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)}.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(72px + var(--space-16)) 0 var(--space-16);overflow:hidden}.hero-inner{display:flex;flex-direction:column;gap:var(--space-12)}.hero-main{max-width:900px}.hero-title{margin-bottom:var(--space-6)}.hero-title .line{display:block;font-family:var(--font-display);font-size:clamp(4rem,12vw,9rem);font-weight:var(--font-medium);line-height:.95;letter-spacing:-.03em}.hero-title .line-1{color:var(--text-secondary);animation:slide-up 1s var(--ease-out-expo) forwards;opacity:0;transform:translateY(60px)}.hero-title .line-2{color:var(--text-primary);animation:slide-up 1s .1s var(--ease-out-expo) forwards;opacity:0;transform:translateY(60px)}@keyframes slide-up{to{opacity:1;transform:translateY(0)}}.hero-subtitle,.hero-experiments,.hero-tags,.hero-cta{animation:fade-in-home 1s ease forwards;opacity:0}.hero-subtitle{font-size:var(--text-lg);color:var(--text-tertiary);letter-spacing:.05em;text-transform:uppercase;animation-delay:.3s}.hero-experiments{display:flex;flex-direction:column;gap:var(--space-1);max-width:600px;animation-delay:.5s}.hero-tags{display:flex;flex-wrap:wrap;gap:var(--space-3);animation-delay:.6s}.hero-cta{display:flex;align-items:center;gap:var(--space-6);animation-delay:.7s}@keyframes fade-in-home{to{opacity:1}}.exp-item{display:flex;align-items:baseline;gap:var(--space-6);padding:var(--space-4) 0;border-bottom:1px solid var(--border-light);text-decoration:none;color:inherit;transition:all var(--transition-fast);position:relative}.exp-item:before{content:"";position:absolute;inset:0 -20px;background:var(--bg-secondary);opacity:0;transition:opacity var(--transition-fast);z-index:-1;border-radius:var(--radius-md)}.exp-item:hover:before{opacity:1}.exp-item:hover .exp-name{color:var(--text-primary)}.exp-number{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted);width:40px;flex-shrink:0}.exp-name{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-medium);color:var(--text-secondary);transition:color var(--transition-fast);flex:1}.exp-desc{font-size:var(--text-base);color:var(--text-tertiary);text-align:right}.tag{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);padding:var(--space-2) var(--space-4);border:1px solid var(--border-light);border-radius:var(--radius-full);transition:all var(--transition-fast)}.tag:hover{border-color:var(--text-primary);color:var(--text-primary)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-4) var(--space-8);background:var(--text-primary);color:var(--bg-primary);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-medium);text-decoration:none;border-radius:var(--radius-full);border:none;cursor:pointer;transition:all var(--transition-fast)}.btn-primary:hover{opacity:.85;transform:translateY(-2px)}.btn-text{font-size:var(--text-base);font-weight:var(--font-medium);color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast)}.btn-text:hover{color:var(--text-primary)}.side-label{position:fixed;right:var(--space-8);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--font-medium);letter-spacing:var(--tracking-wider);color:var(--text-muted);z-index:10;pointer-events:none}.app-loading-fallback{padding:120px 0;text-align:center}.app-loading-text{color:var(--text-secondary)}.about-section{padding:var(--space-32) 0;background:var(--bg-secondary)}.about-inner{max-width:680px;margin:0 auto;text-align:center}.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)}.about-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:var(--font-medium);line-height:1.1;color:var(--text-primary);margin-bottom:var(--space-6)}.about-text{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-secondary)}.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:var(--space-32) 0;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;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)}.filter-bar.visible{opacity:1;transform:translateY(0)}.filter-btn{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;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-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)}.experiment-card.hovered .card-border{border-color:var(--text-primary)}@media(max-width:1024px){.side-label{display:none}.hero-title .line{font-size:clamp(3rem,10vw,5rem)}.exp-desc{display:none}.experiments-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.nav{display:none}.hero-experiments{max-width:100%}.exp-item{gap:var(--space-4)}.exp-name{font-size:var(--text-xl)}.hero-cta{flex-direction:column;align-items:flex-start}.experiments-section{padding:var(--space-20) 0}.experiments-grid{grid-template-columns:1fr}.section-title{font-size:var(--text-3xl)}}