:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--bg-code: #0d1117;--text-primary: #e8e8ed;--text-secondary: #a0a0b0;--text-muted: #606070;--accent: #e94560;--accent-light: #ff6b8a;--accent-glow: rgba(233, 69, 96, .3);--border: rgba(255, 255, 255, .08);--border-active: rgba(233, 69, 96, .5);--code-keyword: #ff79c6;--code-string: #f1fa8c;--code-function: #50fa7b;--code-variable: #8be9fd;--code-comment: #6272a4;--sidebar-width: 280px;--header-height: 64px;--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--shadow: 0 8px 32px rgba(0, 0, 0, .3)}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #f0f1f3;--bg-code: #f6f8fa;--text-primary: #1a1a2e;--text-secondary: #4a4a5a;--text-muted: #8a8a9a;--border: rgba(0, 0, 0, .08);--border-active: rgba(233, 69, 96, .4);--code-keyword: #d63384;--code-string: #0a7c42;--code-function: #0550ae;--code-variable: #953800;--code-comment: #6e7781;--shadow: 0 8px 32px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:80px}.hero{content-visibility:visible}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.7;-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-light)}a[class*=btn]:hover,a[class*=link][class*=footer]:hover,button[class*=btn]:hover{color:inherit}code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-code);padding:2px 6px;border-radius:4px;color:var(--accent)}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border);position:fixed;top:0;left:0;bottom:0;z-index:100;transition:background-color .3s,border-color .3s,transform .3s ease;display:flex;flex-direction:column}.sidebar-header{position:sticky;top:0;padding:20px 24px;border-bottom:1px solid var(--border);background:var(--bg-secondary);z-index:10;flex-shrink:0;display:flex;flex-direction:column;gap:8px}.logo{display:flex;align-items:center;gap:12px}.logo-image{width:44px;height:44px;min-width:44px;min-height:44px;object-fit:contain;aspect-ratio:1 / 1}.logo-pink{display:block;filter:drop-shadow(0 2px 4px rgba(233,69,96,.3))}.logo-gray{display:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}[data-theme=light] .logo-pink{display:none}[data-theme=light] .logo-gray{display:block}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;color:#fff}.logo-text-group{display:flex;flex-direction:column;gap:0;line-height:1.1}.logo-text{font-size:1.4rem;font-weight:700;background:linear-gradient(90deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-tagline{font-size:.7rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}[data-theme=light] .logo-text{background:linear-gradient(90deg,#1a1a2e,#2a2a3e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=light] .logo-tagline{color:#6a6a6a}.version-badge{font-size:.65rem;background:var(--bg-tertiary);padding:3px 10px;border-radius:20px;color:var(--text-muted);align-self:flex-start}.sidebar-nav{padding:12px 0;overflow-y:auto;flex:1}.sidebar-nav::-webkit-scrollbar{width:4px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.nav-section{margin-bottom:6px}.nav-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:16px 20px 8px;display:flex;align-items:center;gap:8px}.nav-section-title:before{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%;opacity:.6}.nav-link{display:flex;align-items:center;padding:9px 20px 9px 28px;color:var(--text-secondary);font-size:.88rem;transition:all .2s ease;position:relative;margin:2px 12px 2px 8px;border-radius:8px;text-decoration:none;background:none;border:none;cursor:pointer;text-align:left;width:calc(100% - 20px);font-family:inherit}.nav-link:before{content:"";position:absolute;left:12px;width:6px;height:6px;border-radius:50%;background:transparent;border:1.5px solid var(--border);transition:all .2s ease}.nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-link:hover:before{border-color:var(--accent);background:#e9456033}.nav-link.active{color:var(--accent);background:#e945601a;font-weight:500}.nav-link.active:before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px #e9456066}.nav-link.active:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--accent);border-radius:3px 0 0 3px}.nav-section.collapsed .nav-link{display:none}.sidebar-current-section{font-size:.7rem;color:var(--accent);padding:8px 20px;background:#e945600d;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;margin-top:auto}.sidebar-current-section:before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.main-content{margin-left:var(--sidebar-width);flex:1;min-height:100vh;overflow-x:hidden;width:calc(100% - var(--sidebar-width))}.header{height:var(--header-height);background:#0a0a0ff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:fixed;top:0;left:var(--sidebar-width);right:0;z-index:50;display:flex;align-items:center;padding:0 32px;justify-content:space-between;transition:background-color .3s,border-color .3s,left .3s;contain:layout style}[data-theme=light] .header{background:#fffffff2}.search-box{display:flex;align-items:center;gap:12px;background:var(--bg-tertiary);padding:10px 16px;border-radius:10px;min-width:280px;border:1px solid var(--border);transition:all .2s}.search-box:focus-within{border-color:var(--accent)}.search-box svg{color:var(--text-muted);flex-shrink:0}.search-input{background:none;border:none;outline:none;color:var(--text-primary);font-size:.95rem;width:100%}.search-input::placeholder{color:var(--text-muted)}.header-actions{display:flex;gap:12px;align-items:center;min-width:200px;min-height:40px;contain:layout}.theme-toggle{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:10px;background:var(--bg-tertiary);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;contain:layout}.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}.btn{padding:10px 20px;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;display:flex;align-items:center;gap:8px;min-height:40px;contain:layout}.btn-primary{background:var(--accent);color:#fff!important}.btn-primary:hover{background:var(--accent-light);box-shadow:0 4px 20px var(--accent-glow);color:#fff!important}.btn-primary .btn-text,.btn-primary .btn-icon{color:#fff!important}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{color:var(--text-primary);border-color:var(--text-muted)}.page-content{max-width:900px;margin:0 auto;padding:48px 32px;padding-top:calc(var(--header-height) + 32px);width:100%;box-sizing:border-box}.page-title{font-size:2.5rem;font-weight:700;margin-bottom:16px;color:var(--text-primary)}.page-description{font-size:1.2rem;color:var(--text-secondary);margin-bottom:48px;line-height:1.8}.section{margin-bottom:56px;overflow-x:hidden;contain:layout style}.section-title{font-size:1.5rem;font-weight:600;margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid var(--border)}.section-sanskrit{font-size:.85rem;color:var(--accent);margin-bottom:20px;font-style:italic;opacity:.9}.section-content{color:var(--text-secondary);line-height:1.8}.section-content p{margin-bottom:16px}.code-block{background:var(--bg-code);border-radius:12px;margin:24px 0;overflow:hidden;border:1px solid var(--border)}.code-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.code-language{font-size:.8rem;color:var(--text-muted);font-weight:500}.code-copy{padding:6px 12px;font-size:.8rem;background:var(--bg-secondary);border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.code-copy:hover{color:var(--text-primary);background:var(--bg-primary)}.code-content{padding:20px;overflow-x:auto;font-family:var(--font-mono);font-size:.9rem;line-height:1.6;max-height:400px;overflow-y:auto}.code-content pre{margin:0;white-space:pre;transform:translateZ(0);will-change:auto}.intro-section{position:relative}.intro-header{text-align:center;max-width:720px;margin:0 auto 48px}.intro-title{font-size:2.5rem;margin-bottom:20px}.title-accent{background:linear-gradient(135deg,var(--accent),var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-subtitle{font-size:1.15rem;line-height:1.8;color:var(--text-secondary)}.intro-comparison{display:flex;align-items:center;justify-content:center;gap:24px;margin:48px 0;flex-wrap:wrap}.comparison-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px 32px;min-width:280px}.comparison-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.comparison-badge{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:20px}.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}.badge-old{background:#80808033;color:var(--text-secondary)}.badge-new{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff}.badge-success{background:#10b98126;color:#10b981}.badge-warning{background:#f59e0b26;color:#f59e0b}.badge-error{background:#ef444426;color:#ef4444}.comparison-title{font-weight:600;color:var(--text-primary)}.comparison-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.flow-step{background:var(--bg-primary);border:1px solid var(--border);padding:8px 14px;border-radius:8px;font-size:.85rem;color:var(--text-secondary);white-space:nowrap}.flow-highlight{background:linear-gradient(135deg,#e945601a,#ff6b811a);border-color:var(--accent);color:var(--accent);font-weight:500}.flow-arrow{color:var(--text-muted);font-size:.9rem}.flow-arrow-fast{color:var(--accent);font-weight:700;animation:pulse-arrow 1.5s ease-in-out infinite}@keyframes pulse-arrow{0%,to{opacity:1;transform:translate(0)}50%{opacity:.6;transform:translate(3px)}}.comparison-vs{font-weight:700;font-size:1.1rem;color:var(--text-muted);padding:12px}.comparison-drutix{border-color:#e945604d;background:linear-gradient(135deg,#e9456008,#ff6b8108)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:32px 0}.feature-grid-enhanced{gap:20px}.feature-card{background:var(--bg-secondary);border-radius:16px;padding:28px;border:1px solid var(--border);transition:all .3s}.feature-grid-premium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}@media (max-width: 900px){.feature-grid-premium{grid-template-columns:repeat(2,1fr)}}@media (max-width: 550px){.feature-grid-premium{grid-template-columns:1fr;gap:12px}}.feature-card-enhanced{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:14px;padding:18px;transition:all .25s ease;cursor:default;opacity:0;transform:translateY(30px) scale(.95);filter:blur(4px)}.feature-card-enhanced.in-view{animation:feature-card-enter .6s cubic-bezier(.22,1,.36,1);animation-delay:var(--delay, 0s);animation-fill-mode:forwards}@keyframes feature-card-enter{0%{opacity:0;transform:translateY(30px) scale(.95);filter:blur(4px)}60%{filter:blur(0)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}.feature-card-enhanced:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .3s cubic-bezier(.22,1,.36,1)}.feature-card-enhanced:hover:before{transform:scaleY(1)}.feature-card-glow{display:none}.feature-card:hover{border-color:var(--border-active);transform:translateY(-2px);box-shadow:var(--shadow)}.feature-card-enhanced:hover{border-color:#e945604d;background:var(--bg-tertiary)}.feature-card-enhanced .feature-icon-enhanced{opacity:0;transform:scale(.5) rotate(-10deg)}.feature-card-enhanced.in-view .feature-icon-enhanced{animation:icon-pop .5s cubic-bezier(.34,1.56,.64,1);animation-delay:calc(var(--delay, 0s) + .2s);animation-fill-mode:forwards}@keyframes icon-pop{0%{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.feature-card-enhanced .feature-content{opacity:0;transform:translate(15px)}.feature-card-enhanced.in-view .feature-content{animation:content-slide .5s ease-out;animation-delay:calc(var(--delay, 0s) + .15s);animation-fill-mode:forwards}@keyframes content-slide{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}.feature-card-enhanced .metric-value{opacity:0;transform:translateY(10px)}.feature-card-enhanced.in-view .metric-value{animation:metric-count .6s ease-out;animation-delay:calc(var(--delay, 0s) + .35s);animation-fill-mode:forwards}@keyframes metric-count{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feature-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff}.feature-icon-enhanced{width:40px;height:40px;min-width:40px;margin-bottom:0;flex-shrink:0;transition:all .2s ease;border-radius:10px;box-shadow:0 2px 8px #e9456040}.feature-card-enhanced:hover .feature-icon-enhanced{transform:scale(1.05)}.feature-content{flex:1;min-width:0}.feature-title{font-size:.95rem;font-weight:600;margin-bottom:4px;color:var(--text-primary);letter-spacing:-.01em}.feature-description{color:var(--text-muted);font-size:.82rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feature-metric{display:flex;align-items:baseline;gap:4px;margin-top:8px}.metric-value{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.metric-unit{font-size:.75rem;color:var(--text-muted)}.feature-metric{padding-top:0;border-top:none}.feature-card-enhanced .feature-metric{margin-top:6px}.feature-card-enhanced .metric-value{font-size:.95rem;font-weight:700;color:var(--accent)}@media (max-width: 768px){.intro-comparison{flex-direction:column}.comparison-card{width:100%;min-width:unset}.comparison-vs{transform:rotate(90deg);padding:8px}.intro-title{font-size:2rem}}.api-table{width:100%;border-collapse:collapse;margin:24px 0}.api-table th,.api-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}.api-table th{font-weight:600;color:var(--text-primary);background:var(--bg-secondary)}.api-table td{color:var(--text-secondary)}.api-table code{font-size:.85em}.callout{padding:20px 24px;border-radius:12px;margin:24px 0;border-left:4px solid;display:flex;gap:16px}.callout-icon{flex-shrink:0;margin-top:2px}.callout-body{flex:1}.callout-info{background:#61dafb1a;border-color:#61dafb}.callout-info .callout-icon{color:#61dafb}.callout-warning{background:#f1c40f1a;border-color:#f1c40f}.callout-warning .callout-icon{color:#f1c40f}.callout-tip{background:#50fa7b1a;border-color:#50fa7b}.callout-tip .callout-icon{color:#50fa7b}.callout-title{font-weight:600;margin-bottom:8px;color:var(--text-primary)}.callout-content{color:var(--text-secondary)}.quick-start-header{text-align:center;margin-bottom:48px}.quick-start-subtitle{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:12px auto 0;line-height:1.6}.quick-start-options{display:flex;gap:16px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}.quick-start-option{display:flex;align-items:center;gap:10px;padding:14px 24px;background:var(--bg-secondary);border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s;font-weight:500}.quick-start-option:hover,.quick-start-option.active{border-color:var(--accent);background:#e9456014}.quick-start-option.active{box-shadow:0 0 0 3px #e9456026}.quick-start-option-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--accent)}.quick-start-cli{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:32px;margin-bottom:48px;text-align:center}.quick-start-cli-title{font-size:1.2rem;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.quick-start-cli-desc{color:var(--text-muted);margin-bottom:20px;font-size:.95rem}.quick-start-cli-command{display:inline-flex;align-items:center;gap:12px;background:var(--bg-tertiary);padding:16px 24px;border-radius:10px;font-family:JetBrains Mono,monospace;font-size:1rem;color:var(--text-primary);border:1px solid var(--border)}.quick-start-cli-command .prompt{color:var(--accent);user-select:none}.quick-start-divider{display:flex;align-items:center;gap:16px;margin:32px 0;color:var(--text-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:1px}.quick-start-divider:before,.quick-start-divider:after{content:"";flex:1;height:1px;background:var(--border)}.quick-start-steps{counter-reset:step;list-style:none;padding:0;position:relative}.quick-start-steps:before{content:"";position:absolute;left:18px;top:40px;bottom:40px;width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent-light),transparent);border-radius:2px}.quick-start-step{position:relative;padding-left:64px;margin-bottom:40px;opacity:0;transform:translate(-20px)}.quick-start-step.in-view{animation:step-reveal .5s ease-out forwards;animation-delay:var(--step-delay, 0s)}@keyframes step-reveal{to{opacity:1;transform:translate(0)}}.quick-start-step:last-child{margin-bottom:0}.quick-start-step:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;color:#fff;box-shadow:0 4px 12px #e945604d;z-index:1}.step-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.step-title{font-size:1.15rem;font-weight:600;color:var(--text-primary);margin:0}.step-badge{font-size:.7rem;padding:3px 8px;background:#e945601a;color:var(--accent);border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.step-description{color:var(--text-muted);font-size:.9rem;margin-bottom:16px;line-height:1.5}.step-content{color:var(--text-secondary)}.step-content .code-block{margin:0}.quick-start-footer{margin-top:48px;padding:24px;background:linear-gradient(135deg,#e9456014,#e9456005);border:1px solid rgba(233,69,96,.2);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.quick-start-footer-text{flex:1;min-width:200px}.quick-start-footer-title{font-weight:600;color:var(--text-primary);margin-bottom:4px}.quick-start-footer-desc{color:var(--text-muted);font-size:.9rem}.quick-start-footer-link{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--accent);color:#fff;border-radius:8px;font-weight:500;text-decoration:none;transition:all .2s}.quick-start-footer-link:hover{background:var(--accent-light);color:#fff!important;transform:translateY(-1px)}@media (max-width: 768px){.quick-start-steps:before{left:14px}.quick-start-step{padding-left:48px}.quick-start-step:before{width:30px;height:30px;font-size:.85rem}.quick-start-footer{flex-direction:column;text-align:center}}.hero{position:relative;text-align:center;padding:80px 32px 60px;overflow:hidden;min-height:90vh;display:flex;flex-direction:column;justify-content:center}.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(233,69,96,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(233,69,96,.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 20%,transparent 70%)}[data-theme=light] .hero-grid{background-image:linear-gradient(rgba(233,69,96,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(233,69,96,.06) 1px,transparent 1px)}.hero-spotlight{position:absolute;top:-40%;left:50%;transform:translate(-50%);width:140%;height:100%;background:conic-gradient(from 180deg at 50% 70%,transparent 0deg,rgba(233,69,96,.08) 60deg,rgba(233,69,96,.15) 180deg,rgba(233,69,96,.08) 300deg,transparent 360deg);animation:spotlight-rotate 20s linear infinite}[data-theme=light] .hero-spotlight{background:conic-gradient(from 180deg at 50% 70%,transparent 0deg,rgba(233,69,96,.04) 60deg,rgba(233,69,96,.08) 180deg,rgba(233,69,96,.04) 300deg,transparent 360deg)}@keyframes spotlight-rotate{0%{transform:translate(-50%) rotate(0)}to{transform:translate(-50%) rotate(360deg)}}.hero-gradient-orb{position:absolute;top:5%;left:50%;transform:translate(-50%);width:800px;height:500px;background:radial-gradient(ellipse at center,rgba(233,69,96,.2) 0%,transparent 60%);filter:blur(60px);animation:orb-pulse 6s ease-in-out infinite}[data-theme=light] .hero-gradient-orb{background:radial-gradient(ellipse at center,rgba(233,69,96,.12) 0%,transparent 60%)}@keyframes orb-pulse{0%,to{opacity:1;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.05)}}.hero-content{position:relative;z-index:1}.hero-logo-wrapper{position:relative;display:inline-block;margin-bottom:40px;animation:logo-entrance 1s cubic-bezier(.16,1,.3,1) forwards;width:140px;height:140px;contain:layout}@keyframes logo-entrance{0%{opacity:0;transform:scale(.5) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}.hero-logo-glow{position:absolute;inset:-30px;background:radial-gradient(circle,rgba(233,69,96,.4) 0%,transparent 70%);filter:blur(30px);animation:logo-glow 3s ease-in-out infinite}[data-theme=light] .hero-logo-glow{background:radial-gradient(circle,rgba(233,69,96,.25) 0%,transparent 70%)}@keyframes logo-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.hero-logo{position:relative;width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 10px 40px rgba(233,69,96,.3));animation:logo-float 4s ease-in-out infinite;animation-delay:1s;aspect-ratio:1 / 1}.hero-logo-pink{display:block}.hero-logo-dark,[data-theme=light] .hero-logo-pink{display:none}[data-theme=light] .hero-logo-dark{display:block;filter:drop-shadow(0 10px 40px rgba(0,0,0,.15))}@keyframes logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-title{font-size:4.5rem;font-weight:800;margin-bottom:28px;color:var(--text-primary);line-height:1.1;letter-spacing:-.03em;animation:title-entrance .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.3s;opacity:0}@keyframes title-entrance{0%{opacity:0;transform:translateY(40px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.hero-title-line{color:var(--text-primary)}.hero-title-accent{position:relative;color:var(--accent);background:linear-gradient(135deg,#e94560,#ff6b8a,#e94560);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-flow 3s ease infinite}.hero-title-brand{display:inline-block;background:linear-gradient(135deg,#e94560,#c93d5c,#e94560 60%,#ff6b8a);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-flow 4s ease infinite}@keyframes gradient-flow{0%{background-position:0% center}50%{background-position:100% center}to{background-position:0% center}}.hero-subtitle{font-size:1.3rem;color:var(--text-secondary);max-width:640px;margin:0 auto 48px;line-height:1.8;animation:subtitle-entrance .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.5s;opacity:0}@keyframes subtitle-entrance{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-actions{display:flex;gap:16px;justify-content:center;animation:actions-entrance .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.7s;opacity:0}@keyframes actions-entrance{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn-shine{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-weight:600;overflow:hidden}.btn-shine:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease;z-index:1;pointer-events:none}.btn-shine:hover:before{left:100%}.btn-text{position:relative;z-index:2;color:inherit;pointer-events:none}.btn-icon{position:relative;z-index:2;display:flex;align-items:center;transition:transform .3s ease;color:inherit;pointer-events:none}.btn-shine:hover .btn-icon{transform:translate(4px)}.btn-shine:hover .btn-text,.btn-shine:hover .btn-icon{color:#fff}.btn-outline{padding:14px 28px;background:transparent;border:2px solid var(--border);color:var(--text-primary);font-weight:600;border-radius:8px;transition:all .3s ease}.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:#e945600d}.stats-bar{display:flex;justify-content:center;align-items:center;gap:0;padding:48px 32px;margin-top:60px;position:relative;animation:stats-entrance .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.9s;opacity:0}@keyframes stats-entrance{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.stats-bar:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:90%;max-width:900px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--border) 20%,var(--border) 80%,transparent 100%)}.stat-item{text-align:center;padding:0 48px}.stat-divider{width:1px;height:50px;background:var(--border)}.stat-value{font-size:2.8rem;font-weight:800;background:linear-gradient(135deg,var(--accent) 0%,#ff6b8a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.stat-label{font-size:.85rem;color:var(--text-muted);margin-top:8px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}@media (max-width: 768px){.hero{padding:60px 20px 40px;min-height:auto}.hero-logo{width:100px;height:100px}.hero-logo-wrapper{margin-bottom:28px;width:100px;height:100px}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.05rem;padding:0 10px}.stats-bar{flex-wrap:wrap;gap:24px;padding:32px 16px}.stat-divider{display:none}.stat-item{flex:0 0 45%;padding:16px}.stat-value{font-size:2rem}.hero-spotlight{display:none}}.footer{text-align:center;padding:48px 24px;color:var(--text-muted);border-top:1px solid var(--border);margin-top:64px;background:linear-gradient(180deg,transparent,rgba(233,69,96,.02));min-height:120px;contain:layout style}.footer-main{font-size:1rem;color:var(--text-secondary);margin-bottom:12px}.footer-drutix{font-weight:700;background:linear-gradient(135deg,var(--accent),#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-author{color:var(--accent);text-decoration:none;font-weight:600;transition:all .2s ease;position:relative}.footer-author:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--accent);transition:width .3s ease}.footer-author:hover{color:var(--accent-light)!important}.footer-author:hover:after{width:100%}.footer-copyright{font-size:.85rem;color:var(--text-muted);margin-top:8px}.footer-heart{color:var(--accent);vertical-align:middle;margin:0 4px}.scroll-to-top{position:fixed;bottom:32px;right:32px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#d63850);color:#fff;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;overflow:visible;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #e9456066,0 2px 8px #0003}.scroll-to-top:before{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid rgba(233,69,96,.2);border-top-color:var(--accent);transform:rotate(calc(var(--scroll-progress, 0) * 3.6deg - 90deg));transition:transform .1s linear}.scroll-to-top:after{content:"";position:absolute;inset:-8px;border-radius:50%;background:var(--accent);opacity:0;z-index:-1;animation:scroll-pulse 2s ease-in-out infinite}@keyframes scroll-pulse{0%,to{opacity:0;transform:scale(1)}50%{opacity:.15;transform:scale(1.1)}}.scroll-to-top:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px #e9456080,0 4px 12px #00000040}.scroll-to-top:active{transform:translateY(-2px) scale(1)}.scroll-to-top-icon{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:transform .3s ease}.scroll-to-top:hover .scroll-to-top-icon{transform:translateY(-2px)}.scroll-to-top-trail{display:none}.scroll-percent{font-size:.6rem;font-weight:700;color:#ffffffe6;margin-top:2px;letter-spacing:.5px}.scroll-to-top.visible{animation:scroll-btn-enter .4s cubic-bezier(.34,1.56,.64,1)}@keyframes scroll-btn-enter{0%{opacity:0;transform:translateY(30px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}.scroll-to-top.hiding{animation:scroll-btn-exit .3s ease forwards}@keyframes scroll-btn-exit{to{opacity:0;transform:translateY(30px) scale(.5)}}@media (max-width: 768px){.scroll-to-top{bottom:24px;right:20px;width:52px;height:52px;box-shadow:0 4px 20px #e9456080,0 2px 10px #0000004d}.scroll-to-top:before{inset:-3px;border-width:2px}.scroll-to-top-icon svg{width:20px;height:20px}.scroll-percent{font-size:.55rem}}@media (max-width: 480px){.scroll-to-top{bottom:calc(20px + env(safe-area-inset-bottom,0px));right:16px;width:50px;height:50px}}@media (display-mode: standalone){.scroll-to-top{bottom:calc(28px + env(safe-area-inset-bottom,0px));right:20px;width:54px;height:54px;box-shadow:0 6px 24px #e9456080,0 3px 12px #0000004d}}.project-structure-header{text-align:center;margin-bottom:40px}.project-structure-subtitle{color:var(--text-secondary);font-size:1.05rem;max-width:600px;margin:12px auto 0}.project-structure-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:40px}@media (max-width: 900px){.project-structure-layout{grid-template-columns:1fr}}.file-tree-container{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;overflow:hidden}.file-tree-header{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.file-tree-dots{display:flex;gap:6px}.file-tree-dot{width:12px;height:12px;border-radius:50%}.file-tree-dot.red{background:#ff5f57}.file-tree-dot.yellow{background:#ffbd2e}.file-tree-dot.green{background:#28c840}.file-tree-title{font-size:.85rem;color:var(--text-muted);margin-left:auto;font-family:var(--font-mono)}.file-tree{padding:16px 20px;font-family:var(--font-mono);font-size:.85rem;line-height:1.8;overflow-x:auto}.file-tree-item{display:flex;align-items:center;gap:8px;padding:4px 8px;margin:2px 0;border-radius:6px;transition:all .2s;cursor:default}.file-tree-item:hover{background:var(--bg-tertiary)}.file-tree-item.folder{color:var(--accent)}.file-tree-item.file{color:var(--text-secondary)}.file-tree-item.config{color:#10b981}.file-tree-item.entry{color:#f59e0b}.file-tree-icon{width:16px;height:16px;flex-shrink:0}.file-tree-indent{padding-left:20px}.file-tree-indent-2{padding-left:40px}.file-tree-comment{color:var(--text-muted);font-size:.8rem;margin-left:auto}.folder-cards{display:flex;flex-direction:column;gap:12px}.folder-card{display:flex;align-items:flex-start;gap:14px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;transition:all .2s;opacity:0;transform:translate(20px)}.folder-card.in-view{animation:folder-card-enter .4s ease-out forwards}@keyframes folder-card-enter{to{opacity:1;transform:translate(0)}}.folder-card:hover{border-color:var(--accent);background:var(--bg-tertiary)}.folder-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.folder-card-icon.components{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}.folder-card-icon.pages{background:linear-gradient(135deg,#3b82f6,#60a5fa)}.folder-card-icon.stores{background:linear-gradient(135deg,#10b981,#34d399)}.folder-card-icon.services{background:linear-gradient(135deg,#f59e0b,#fbbf24)}.folder-card-icon.styles{background:linear-gradient(135deg,#ec4899,#f472b6)}.folder-card-icon.types{background:linear-gradient(135deg,#6366f1,#818cf8)}.folder-card-content{flex:1;min-width:0}.folder-card-title{font-weight:600;font-size:.95rem;color:var(--text-primary);display:flex;align-items:center;gap:8px;margin-bottom:4px}.folder-card-path{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);background:var(--bg-tertiary);padding:2px 8px;border-radius:4px}.folder-card-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.key-files-section{margin-top:40px}.key-files-title{font-size:1.2rem;font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:10px}.key-files-title:before{content:"";width:4px;height:24px;background:var(--accent);border-radius:2px}.key-files-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.key-file-card{display:flex;align-items:flex-start;gap:12px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;transition:all .2s}.key-file-card:hover{border-color:var(--accent);transform:translateY(-2px)}.key-file-icon{width:36px;height:36px;border-radius:8px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}.key-file-info{flex:1;min-width:0}.key-file-name{font-family:var(--font-mono);font-size:.9rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.key-file-desc{font-size:.82rem;color:var(--text-muted);line-height:1.4}.key-file-badge{font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase}.key-file-badge.entry{background:#f59e0b26;color:#f59e0b}.key-file-badge.config{background:#10b98126;color:#10b981}.key-file-badge.root{background:#8b5cf626;color:#8b5cf6}.props-section-header{text-align:center;margin-bottom:40px}.props-section-subtitle{color:var(--text-secondary);font-size:1.05rem;max-width:650px;margin:12px auto 0}.concept-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:32px}.concept-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .2s;opacity:0;transform:translateY(20px)}.concept-card.in-view{animation:concept-card-enter .5s ease-out forwards}@keyframes concept-card-enter{to{opacity:1;transform:translateY(0)}}.concept-card:hover{border-color:var(--accent);transform:translateY(-2px)}.concept-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.concept-card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.concept-card-icon.props{background:linear-gradient(135deg,#3b82f6,#60a5fa)}.concept-card-icon.children{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}.concept-card-icon.refs{background:linear-gradient(135deg,#10b981,#34d399)}.concept-card-icon.events{background:linear-gradient(135deg,#f59e0b,#fbbf24)}.concept-card-title{font-size:1.15rem;font-weight:600;color:var(--text-primary)}.concept-card-desc{color:var(--text-secondary);font-size:.9rem;line-height:1.6;margin-bottom:16px}.concept-card-example{background:var(--bg-tertiary);border-radius:10px;padding:14px;font-family:var(--font-mono);font-size:.82rem;color:var(--text-primary);overflow-x:auto}.concept-card-example .keyword{color:#c678dd}.concept-card-example .type{color:#e5c07b}.concept-card-example .string{color:#98c379}.concept-card-example .comment{color:var(--text-muted)}.props-diagram{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:32px;margin:32px 0}.props-diagram-title{font-size:1rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:24px;text-align:center}.props-flow{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.props-flow-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 24px;background:var(--bg-tertiary);border-radius:12px;border:1px solid var(--border)}.props-flow-item.highlight{border-color:var(--accent);background:#e9456014}.props-flow-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.props-flow-value{font-family:var(--font-mono);font-size:.9rem;font-weight:600;color:var(--text-primary)}.props-flow-arrow{color:var(--accent);font-size:1.5rem;font-weight:700}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:24px 0}.comparison-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:hidden}.comparison-item-header{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.comparison-item-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem}.comparison-item-icon.if{background:#3b82f6}.comparison-item-icon.show{background:#8b5cf6}.comparison-item-icon.for{background:#10b981}.comparison-item-icon.index{background:#f59e0b}.comparison-item-name{font-weight:600;font-family:var(--font-mono);font-size:.95rem}.comparison-item-body{padding:16px 18px}.comparison-item-desc{color:var(--text-secondary);font-size:.88rem;margin-bottom:12px;line-height:1.5}.comparison-item-tags{display:flex;gap:8px;flex-wrap:wrap}.comparison-tag{font-size:.7rem;padding:4px 10px;border-radius:20px;font-weight:500;text-transform:uppercase;letter-spacing:.3px}.comparison-tag.behavior{background:#3b82f626;color:#3b82f6}.comparison-tag.usecase{background:#10b98126;color:#10b981}.comparison-tag.perf{background:#f59e0b26;color:#f59e0b}.search-container{position:relative}.search-trigger{display:flex;align-items:center;gap:12px;background:var(--bg-tertiary);padding:10px 16px;border-radius:10px;min-width:280px;border:1px solid var(--border);cursor:pointer;transition:all .2s;color:var(--text-muted);font-size:.95rem}.search-trigger:hover{border-color:var(--border-active);background:var(--bg-secondary)}.search-trigger svg{flex-shrink:0}.search-placeholder{flex:1;text-align:left}.search-shortcut{display:flex;align-items:center;gap:2px;background:var(--bg-secondary);padding:4px 8px;border-radius:6px;font-size:.75rem;font-family:inherit;border:1px solid var(--border)}.search-shortcut span{font-size:.8rem}.search-modal-overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;z-index:9999;animation:overlay-enter .15s ease}@keyframes overlay-enter{0%{opacity:0}to{opacity:1}}.search-modal{background:var(--bg-primary);border-radius:16px;width:100%;max-width:600px;max-height:70vh;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px #0000004d;animation:modal-enter .2s ease}@keyframes modal-enter{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.search-modal-header{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--border)}.search-modal-header svg{color:var(--text-muted);flex-shrink:0}.search-modal-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:1.1rem}.search-modal-input::placeholder{color:var(--text-muted)}.search-results-container{max-height:400px;overflow-y:auto}.search-results{padding:8px}.search-result-item{display:block;padding:14px 16px;border-radius:10px;cursor:pointer;transition:all .15s;text-decoration:none}.search-result-item:hover,.search-result-item.selected{background:var(--bg-secondary)}.search-result-item.selected{background:#e945601a;border:1px solid rgba(233,69,96,.2)}.search-result-title{font-weight:600;color:var(--text-primary);margin-bottom:4px}.search-result-item.selected .search-result-title{color:var(--accent)}.search-result-section{font-size:.85rem;color:var(--text-muted)}.search-no-results{padding:40px 20px;text-align:center;color:var(--text-secondary)}.search-no-results strong{color:var(--text-primary)}.search-hint{font-size:.9rem;color:var(--text-muted);margin-top:8px}.search-hints{padding:30px 20px;text-align:center;color:var(--text-secondary)}.search-shortcuts-help{display:flex;justify-content:center;gap:24px;margin-top:20px}.shortcut-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted)}.shortcut-item kbd{background:var(--bg-secondary);padding:4px 8px;border-radius:6px;font-size:.8rem;font-family:inherit;border:1px solid var(--border);min-width:24px;text-align:center}@media (max-width: 768px){.search-trigger{min-width:auto;padding:10px}.search-placeholder,.search-shortcut{display:none}.search-modal{margin:16px;max-height:calc(100vh - 100px)}.search-modal-overlay{padding-top:10vh}.search-shortcuts-help{flex-wrap:wrap;gap:12px}}.lifecycle-demo{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin:24px 0}.lifecycle-controls{display:flex;gap:12px;margin-bottom:20px}.lifecycle-btn{padding:10px 20px;border-radius:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.lifecycle-btn:hover{border-color:var(--accent);background:var(--bg-tertiary)}.lifecycle-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.lifecycle-btn-primary:hover{background:var(--accent-light);border-color:var(--accent-light);color:#fff!important}.lifecycle-content{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width: 768px){.lifecycle-content{grid-template-columns:1fr}}.lifecycle-child-container{min-height:150px}.lifecycle-child{background:var(--bg-primary);border:2px solid var(--accent);border-radius:10px;padding:16px;animation:lifecycle-mount .3s ease}@keyframes lifecycle-mount{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.lifecycle-child-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.lifecycle-badge{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600}.mount-count{font-size:.85rem;color:var(--text-muted)}.lifecycle-child-content p{margin:0 0 12px;font-size:1rem}.lifecycle-placeholder{background:var(--bg-primary);border:2px dashed var(--border);border-radius:10px;padding:40px;text-align:center;color:var(--text-muted)}.lifecycle-logs{background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;overflow:hidden}.lifecycle-logs-header{background:var(--bg-tertiary);padding:10px 16px;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--border)}.lifecycle-logs-content{padding:12px 16px;max-height:200px;overflow-y:auto;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.8rem}.lifecycle-logs-empty{color:var(--text-muted);font-style:italic;margin:0}.lifecycle-log-item{padding:6px 0;border-bottom:1px solid var(--border);color:var(--text-secondary)}.lifecycle-log-item:last-child{border-bottom:none}.lifecycle-legend{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}.legend-title{font-weight:600;margin-bottom:12px;font-size:.9rem}.legend-items{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media (max-width: 768px){.legend-items{grid-template-columns:1fr}}.legend-item{font-size:.85rem}.legend-item code{background:#e945601a;color:var(--accent);padding:2px 6px;border-radius:4px;font-size:.8rem}.legend-desc{color:var(--text-muted);margin-left:4px}.router-demo{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:24px 0}.router-demo-nav{display:flex;gap:0;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.router-demo-nav a{padding:12px 20px;color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:.9rem;border-bottom:2px solid transparent;transition:all .2s}.router-demo-nav a:hover{color:var(--text-primary);background:var(--bg-secondary)}.router-demo-nav a.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--bg-secondary)}.router-demo-view{padding:24px;min-height:200px}.route-content h3{margin:0 0 12px;font-size:1.3rem;color:var(--text-primary)}.route-content p{margin:0 0 12px;color:var(--text-secondary)}.route-code{margin-top:16px;padding:12px;background:var(--bg-tertiary);border-radius:8px;font-family:SF Mono,Monaco,Courier New,monospace}.route-code code{color:var(--accent);font-size:.85rem}.user-list{list-style:none;padding:0;margin:16px 0}.user-list li{margin:8px 0}.user-list a{color:var(--accent);text-decoration:none;padding:8px 12px;display:inline-block;background:var(--bg-tertiary);border-radius:6px;transition:all .2s}.user-list a:hover{background:var(--accent);color:#fff}.user-card{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-tertiary);border-radius:10px;margin:16px 0}.user-avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600}.user-info{display:flex;flex-direction:column;gap:4px}.user-info strong{font-size:1.1rem;color:var(--text-primary)}.user-info span{font-size:.85rem;color:var(--text-muted)}.router-btn{padding:10px 20px;border-radius:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;margin-top:12px}.router-btn:hover{border-color:var(--accent);color:var(--accent)}.settings-notice{background:#e945601a;border:1px solid rgba(233,69,96,.3);border-radius:8px;padding:16px;margin:16px 0}.settings-notice strong{color:var(--accent);display:block;margin-bottom:8px}.settings-notice p{margin:0;font-size:.9rem}.code-example{background:var(--bg-tertiary);padding:16px;border-radius:8px;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.8rem;overflow-x:auto;color:var(--text-secondary);margin:12px 0}.router-demo-code{border-top:1px solid var(--border);background:var(--bg-primary)}.router-demo-code .code-header{padding:12px 24px;font-weight:600;font-size:.9rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.router-demo-code .code-block{margin:0;padding:16px 24px;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.8rem;line-height:1.6;overflow-x:auto;color:var(--text-secondary);white-space:pre}.data-binding-demo{margin:24px 0}.binding-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}.binding-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.1rem}.binding-badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.binding-badge.one-way{background:#3b82f626;color:#3b82f6}.binding-badge.two-way{background:#22c55e26;color:#22c55e}.binding-badge.interpolation{background:#a855f726;color:#a855f7}.binding-desc{color:var(--text-secondary);margin:0 0 20px;font-size:.95rem}.binding-example{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:20px}.binding-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}.binding-row label{font-weight:500}.value-display{padding:8px 16px;background:var(--bg-tertiary);border-radius:6px;font-family:SF Mono,Monaco,monospace;color:var(--accent)}.binding-btn{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s}.binding-btn:hover{background:var(--accent-light);color:#fff!important}.binding-code{margin-top:20px;background:var(--bg-tertiary);border-radius:8px;overflow:hidden}.binding-code pre{margin:0;padding:16px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;line-height:1.6;color:var(--text-secondary);overflow-x:auto}.two-way-demo{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media (max-width: 768px){.two-way-demo{grid-template-columns:1fr}}.form-side .form-group{margin-bottom:16px}.form-side label{display:block;font-weight:500;margin-bottom:6px;font-size:.9rem}.form-side input[type=text],.form-side input[type=email],.form-side textarea,.form-side select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.9rem;transition:border-color .2s}.form-side input:focus,.form-side textarea:focus,.form-side select:focus{outline:none;border-color:var(--accent)}.checkbox-group{display:flex;align-items:center;gap:8px}.checkbox-group input{width:auto!important}.checkbox-group label{margin:0;font-weight:400}.radio-group{display:flex;gap:16px}.radio-label{display:flex;align-items:center;gap:6px;font-weight:400!important;cursor:pointer}.radio-label input{width:auto}.preview-side h5{margin:0 0 12px;color:var(--text-primary)}.form-preview{background:var(--bg-tertiary);border-radius:8px;padding:16px;min-height:150px}.preview-item{padding:8px 0;border-bottom:1px solid var(--border);font-size:.9rem}.preview-item:last-child{border-bottom:none}.preview-empty{color:var(--text-muted);font-style:italic}.interpolation-examples{display:flex;flex-direction:column;gap:12px}.interp-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-tertiary);border-radius:8px}.interp-item code{font-family:SF Mono,Monaco,monospace;font-size:.8rem;color:var(--text-secondary);flex:1}.interp-arrow{color:var(--text-muted)}.interp-result{font-weight:600;color:var(--accent);min-width:100px}.signals-demo{margin:24px 0}.signal-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}.signal-title{margin:0 0 8px;font-size:1.1rem;color:var(--text-primary)}.signal-subtitle{margin:0 0 16px;font-size:.85rem;color:var(--text-muted)}.counter-demo{text-align:center;padding:20px;background:var(--bg-primary);border-radius:8px}.counter-display{margin-bottom:20px}.count-value{font-size:4rem;font-weight:700;color:var(--accent);font-family:SF Mono,Monaco,monospace}.counter-controls{display:flex;justify-content:center;gap:12px;margin-bottom:16px}.counter-btn{width:50px;height:50px;border:2px solid var(--border);border-radius:50%;background:var(--bg-secondary);color:var(--text-primary);font-size:1.5rem;font-weight:600;cursor:pointer;transition:all .2s}.counter-btn:hover{border-color:var(--accent);color:var(--accent)}.counter-btn.reset{width:auto;padding:0 20px;border-radius:25px;font-size:.9rem}.computed-display{color:var(--text-secondary);font-size:1rem}.computed-value{color:var(--accent);font-weight:600;font-family:SF Mono,Monaco,monospace}.signal-code{margin-top:20px;background:var(--bg-tertiary);border-radius:8px}.signal-code pre{margin:0;padding:16px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;line-height:1.6;color:var(--text-secondary);overflow-x:auto}.computed-demo{padding:20px;background:var(--bg-primary);border-radius:8px}.name-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}@media (max-width: 480px){.name-inputs{grid-template-columns:1fr}}.input-group label{display:block;font-weight:500;margin-bottom:6px;font-size:.9rem}.input-group input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.9rem}.input-group input:focus{outline:none;border-color:var(--accent)}.computed-result{padding:12px 16px;background:var(--bg-tertiary);border-radius:8px;text-align:center;font-size:1.1rem}.computed-result strong{color:var(--accent)}.array-demo{padding:20px;background:var(--bg-primary);border-radius:8px}.add-item-form{display:flex;gap:12px;margin-bottom:16px}.add-item-form input{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary)}.add-item-form input:focus{outline:none;border-color:var(--accent)}.add-btn{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer}.add-btn:hover{background:var(--accent-light);color:#fff!important}.items-list{list-style:none;padding:0;margin:0 0 16px}.items-list li{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-secondary);border-radius:8px;margin-bottom:8px}.items-list .remove-btn{padding:6px 12px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:all .2s}.items-list .remove-btn:hover{border-color:#ef4444;color:#ef4444}.item-count{text-align:center;color:var(--text-secondary)}.item-count strong{color:var(--accent)}.effects-demo{margin:24px 0}.effect-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}.effect-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.1rem}.effect-badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;background:#f59e0b26;color:#f59e0b}.effect-desc{color:var(--text-secondary);margin:0 0 20px;font-size:.95rem}.effect-example{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:20px}.effect-code{margin-top:20px;background:var(--bg-tertiary);border-radius:8px}.effect-code pre{margin:0;padding:16px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;line-height:1.6;color:var(--text-secondary);overflow-x:auto}.search-demo{max-width:400px}.search-input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;transition:border-color .2s}.search-input:focus{outline:none;border-color:var(--accent)}.search-status{margin-top:8px;font-size:.85rem;color:var(--text-muted)}.search-status.searching{color:#f59e0b}.search-status.no-results{color:#ef4444}.search-status.found{color:#22c55e}.search-results{margin-top:12px;display:flex;flex-direction:column;gap:8px}.search-result-item{padding:10px 14px;background:var(--bg-tertiary);border-radius:6px;font-size:.9rem;animation:fadeSlideIn .2s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.autosave-demo{max-width:500px}.autosave-textarea{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.95rem;resize:vertical;font-family:inherit;transition:border-color .2s}.autosave-textarea:focus{outline:none;border-color:var(--accent)}.save-status{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.status-dot.typing{background:#f59e0b;animation:pulse 1s infinite}.status-dot.saving{background:#3b82f6;animation:pulse .5s infinite}.status-dot.saved{background:#22c55e}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.side-effects-demo{display:flex;flex-direction:column;gap:20px}.side-effect-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.side-effect-item label{font-weight:500;min-width:120px}.effect-value{padding:6px 14px;background:var(--bg-tertiary);border-radius:6px;font-family:SF Mono,Monaco,monospace;color:var(--accent)}.effect-hint{font-size:.8rem;color:var(--text-muted)}.theme-preview{padding:8px 16px;border-radius:6px;font-size:.9rem;transition:all .3s}.theme-preview.light{background:#f8fafc;color:#1e293b;border:1px solid #e2e8f0}.theme-preview.dark{background:#1e293b;color:#f8fafc;border:1px solid #334155}.theme-btn{padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:background .2s}.theme-btn:hover{background:var(--accent-light);color:#fff!important}.effect-log-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px}.effect-log-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bg-tertiary);border-bottom:1px solid var(--border);font-weight:600;font-size:.9rem}.clear-log-btn{padding:6px 12px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:all .2s}.clear-log-btn:hover{border-color:var(--accent);color:var(--accent)}.effect-log{padding:16px 20px;max-height:200px;overflow-y:auto;font-family:SF Mono,Monaco,monospace;font-size:.8rem}.log-empty{color:var(--text-muted);font-style:italic;margin:0}.log-item{padding:6px 0;color:var(--text-secondary);border-bottom:1px solid var(--border)}.log-item:last-child{border-bottom:none}.effect-note{background:#a855f71a;border:1px solid rgba(168,85,247,.3);border-radius:8px;padding:16px}.effect-note p{margin:0;font-size:.9rem}.effect-note code{background:#a855f726;color:#a855f7;padding:2px 6px;border-radius:4px}.store-demo{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:24px 0}.store-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:0}@media (max-width: 768px){.store-layout{grid-template-columns:1fr}}.store-products{padding:20px;border-right:1px solid var(--border)}.store-products h5{margin:0 0 16px;font-size:1rem}.product-list{display:flex;flex-direction:column;gap:10px}.product-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-primary);border-radius:8px}.product-info{display:flex;flex-direction:column;gap:2px}.product-name{font-weight:500}.product-price{font-size:.85rem;color:var(--accent)}.add-to-cart-btn{padding:6px 14px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.85rem;cursor:pointer;transition:background .2s}.add-to-cart-btn:hover{background:var(--accent-light);color:#fff!important}.store-cart{padding:20px;display:flex;flex-direction:column}.cart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.cart-header h5{margin:0;font-size:1rem}.cart-count{font-size:.85rem;color:var(--text-muted)}.cart-items{flex:1;min-height:150px}.cart-empty{text-align:center;color:var(--text-muted);padding:40px}.cart-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-primary);border-radius:8px;margin-bottom:8px}.cart-item-info{display:flex;flex-direction:column;gap:2px}.cart-item-name{font-weight:500}.cart-item-price{font-size:.85rem;color:var(--text-muted)}.cart-item-controls{display:flex;align-items:center;gap:8px}.qty-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:4px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-size:1rem}.qty-btn:hover{border-color:var(--accent)}.qty-value{min-width:24px;text-align:center}.remove-item-btn{padding:4px 10px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);font-size:.8rem;cursor:pointer}.remove-item-btn:hover{border-color:#ef4444;color:#ef4444}.cart-footer{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.cart-total{font-size:1.1rem}.cart-total strong{color:var(--accent);margin-left:8px}.clear-cart-btn{padding:8px 16px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;transition:all .2s}.clear-cart-btn:hover{border-color:#ef4444;color:#ef4444}.store-log-section{border-top:1px solid var(--border)}.store-log-header{padding:12px 20px;background:var(--bg-tertiary);font-weight:600;font-size:.9rem;border-bottom:1px solid var(--border)}.store-log{padding:16px 20px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;max-height:120px;overflow-y:auto}.store-log-empty{color:var(--text-muted);margin:0}.store-log-item{padding:4px 0;color:var(--text-secondary)}.store-code{border-top:1px solid var(--border);background:var(--bg-tertiary)}.store-code pre{margin:0;padding:16px 20px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto;color:var(--text-secondary)}.control-flow-demo{margin:24px 0}.cf-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}.cf-title{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:1.1rem}.cf-badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.cf-badge.if{background:#3b82f626;color:#3b82f6}.cf-badge.for{background:#22c55e26;color:#22c55e}.cf-badge.switch{background:#a855f726;color:#a855f7}.cf-badge.combined{background:#f59e0b26;color:#f59e0b}.cf-example{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:20px}.cf-btn{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:background .2s}.cf-btn:hover{background:var(--accent-light);color:#fff!important}.cf-code{margin-top:20px;background:var(--bg-tertiary);border-radius:8px}.cf-code pre{margin:0;padding:16px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;line-height:1.6;color:var(--text-secondary);overflow-x:auto}.if-show-content{margin-top:16px}.shown-content{padding:20px;background:#22c55e1a;border:1px solid rgba(34,197,94,.3);border-radius:8px;animation:fadeIn .3s ease}.shown-content p{margin:0 0 8px}.shown-content p:last-child{margin:0}.for-input-row{display:flex;gap:12px;margin-bottom:16px}.for-input-row input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary)}.for-input-row input:focus{outline:none;border-color:var(--accent)}.for-list{list-style:none;padding:0;margin:0 0 12px}.for-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-secondary);border-radius:8px;margin-bottom:8px;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.for-index{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-size:.8rem;font-weight:600}.for-name{flex:1}.for-remove{width:24px;height:24px;border:none;background:transparent;color:var(--text-muted);font-size:1.2rem;cursor:pointer;border-radius:4px;transition:all .2s}.for-remove:hover{background:#ef44441a;color:#ef4444}.for-count{text-align:center;color:var(--text-muted);font-size:.9rem}.switch-tabs{display:flex;gap:0;margin-bottom:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden}.switch-tab{flex:1;padding:12px;border:none;background:var(--bg-secondary);color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s}.switch-tab:not(:last-child){border-right:1px solid var(--border)}.switch-tab:hover{background:var(--bg-tertiary)}.switch-tab.active{background:var(--accent);color:#fff}.switch-content .tab-content{padding:20px;background:var(--bg-secondary);border-radius:8px;animation:fadeIn .2s ease}.switch-content h4{margin:0 0 8px}.switch-content p{margin:0;color:var(--text-secondary)}.role-selector{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.role-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:all .2s}.role-btn:hover{border-color:var(--accent)}.role-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.role-content{min-height:150px}.role-view{padding:20px;border-radius:8px;animation:fadeIn .3s ease}.role-view.guest{background:#64748b1a;border:1px solid rgba(100,116,139,.3)}.role-view.user{background:#3b82f61a;border:1px solid rgba(59,130,246,.3)}.role-view.admin{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3)}.role-icon{font-size:2rem;display:block;margin-bottom:8px}.role-view h4{margin:0 0 8px}.role-view p{margin:0 0 12px;color:var(--text-secondary)}.role-view ul{margin:0;padding-left:20px}.role-view li{margin:4px 0;color:var(--text-secondary)}.forms-demo{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:24px 0}.forms-layout{display:grid;grid-template-columns:1fr 1fr}@media (max-width: 768px){.forms-layout{grid-template-columns:1fr}}.demo-form{padding:24px;border-right:1px solid var(--border)}.demo-form h4{margin:0 0 20px;font-size:1.2rem}.form-success{padding:12px 16px;background:#22c55e1a;border:1px solid rgba(34,197,94,.3);border-radius:8px;color:#22c55e;margin-bottom:16px;animation:fadeIn .3s ease}.form-field{margin-bottom:16px}.form-field label{display:block;font-weight:500;margin-bottom:6px;font-size:.9rem}.form-field input[type=text],.form-field input[type=email],.form-field input[type=password],.form-field input[type=number]{width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.95rem;transition:border-color .2s}.form-field input:focus{outline:none;border-color:var(--accent)}.form-field input.error{border-color:#ef4444}.field-error{display:none;color:#ef4444;font-size:.8rem;margin-top:4px}.form-field.checkbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.form-field.checkbox input{width:auto}.form-field.checkbox label{margin:0;font-weight:400}.form-field.checkbox .field-error{width:100%}.form-actions{display:flex;gap:12px;margin-top:24px}.submit-btn{flex:1;padding:12px 24px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s}.submit-btn:hover:not(:disabled){background:var(--accent-light);color:#fff!important}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn{padding:12px 24px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.reset-btn:hover{border-color:var(--text-primary);color:var(--text-primary)}.forms-code{padding:24px;background:var(--bg-tertiary)}.forms-code h5{margin:0 0 16px;font-size:1rem}.forms-code pre{margin:0;font-family:SF Mono,Monaco,monospace;font-size:.75rem;line-height:1.5;color:var(--text-secondary);overflow-x:auto}.security-demo{margin:24px 0}.security-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}.security-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.1rem}.security-badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.security-badge.xss{background:#ef444426;color:#ef4444}.security-badge.validation{background:#3b82f626;color:#3b82f6}.security-badge.comparison{background:#22c55e26;color:#22c55e}.security-desc{color:var(--text-secondary);margin:0 0 20px;font-size:.95rem}.security-example{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:20px}.xss-demo{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media (max-width: 768px){.xss-demo{grid-template-columns:1fr}}.xss-input-section label{display:block;font-weight:500;margin-bottom:8px}.xss-input-section textarea{width:100%;padding:12px;border:2px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-family:SF Mono,Monaco,monospace;font-size:.9rem;resize:vertical}.xss-input-section textarea:focus{outline:none;border-color:var(--accent)}.xss-buttons{display:flex;gap:10px;margin-top:12px}.attack-btn{padding:8px 16px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#ef4444;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.attack-btn:hover{background:#ef444433}.xss-output-section{display:flex;flex-direction:column;gap:12px}.output-box{padding:12px;border-radius:8px}.output-box.dangerous{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.output-box.safe{background:#22c55e1a;border:1px solid rgba(34,197,94,.3)}.output-box.escaped{background:var(--bg-tertiary);border:1px solid var(--border)}.output-label{font-size:.75rem;font-weight:600;text-transform:uppercase;margin-bottom:6px;opacity:.8}.output-content{font-size:.9rem;word-break:break-all}.output-content.mono{font-family:SF Mono,Monaco,monospace;font-size:.8rem}.validation-demo{display:flex;flex-direction:column;gap:16px}.validation-field{display:flex;flex-direction:column;gap:6px}.validation-field label{font-weight:500;font-size:.9rem}.validation-field input{padding:10px 14px;border:2px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.95rem;transition:border-color .2s}.validation-field input:focus{outline:none;border-color:var(--accent)}.validation-result{font-size:.85rem;min-height:20px}.validation-result.valid{color:#22c55e}.validation-result.invalid{color:#ef4444}.comparison-table-wrapper{overflow-x:auto}.security-table{width:100%;border-collapse:collapse;font-size:.9rem}.security-table th,.security-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}.security-table th{background:var(--bg-tertiary);font-weight:600;font-size:.85rem}.security-table th.drutix-col{background:#e9456026;color:var(--accent)}.security-table td.yes{color:#22c55e;font-weight:500}.security-table td.no{color:#ef4444}.security-table td.partial{color:#f59e0b}.security-table tr:hover td{background:var(--bg-secondary)}.table-note{margin-top:12px;font-size:.8rem;color:var(--text-muted);font-style:italic}.computed-demo{margin:24px 0}.computed-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}.computed-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.1rem}.computed-badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.computed-badge.calc{background:#3b82f626;color:#3b82f6}.computed-badge.memo{background:#a855f726;color:#a855f7}.computed-desc{color:var(--text-secondary);margin:0 0 20px;font-size:.95rem}.cart-calculator{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:20px}@media (max-width: 768px){.cart-calculator{grid-template-columns:1fr}}.cart-inputs{display:flex;flex-direction:column;gap:16px}.cart-input-group label{display:block;font-weight:500;margin-bottom:8px;font-size:.9rem}.stepper{display:flex;align-items:center;gap:12px}.stepper button{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.stepper button:hover{border-color:var(--accent);background:#e945601a}.stepper span{min-width:80px;text-align:center;font-size:1.1rem;font-weight:600}.discount-buttons{display:flex;gap:8px}.discount-btn{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s}.discount-btn:hover{border-color:var(--accent)}.discount-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.cart-computed{display:flex;flex-direction:column;gap:12px}.computed-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--border)}.computed-row:last-child{border-bottom:none}.computed-value{font-weight:600;font-family:SF Mono,Monaco,monospace;transition:color .3s}.computed-row.discount-row .computed-value{color:#22c55e}.computed-row.tax-row .computed-value{color:#f59e0b}.computed-row.total-row{border-top:2px solid var(--border);padding-top:16px;margin-top:8px}.computed-row.total-row span:first-child{font-weight:600;font-size:1.1rem}.computed-value.total{font-size:1.3rem;color:var(--accent)}.dep-chain-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.dep-chain-section h5{margin:0 0 16px;font-size:.95rem}.dep-chain{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;background:var(--bg-tertiary);border-radius:8px}.chain-item{padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;font-family:SF Mono,Monaco,monospace;font-size:.85rem}.chain-item.arrow{background:transparent;border:none;color:var(--accent);font-size:1.2rem;padding:2px}.memo-demo{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:20px}.memo-inputs{display:flex;gap:20px;margin-bottom:16px}.memo-field{flex:1}.memo-field label{display:block;font-weight:500;margin-bottom:6px;font-size:.9rem}.memo-field input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:1rem}.memo-actions{display:flex;gap:12px;margin-bottom:20px}.memo-btn{padding:10px 20px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s}.memo-btn.same{background:var(--accent);color:#fff}.memo-btn.same:hover{background:var(--accent-light);color:#fff!important}.memo-btn.new{background:#3b82f626;color:#3b82f6}.memo-btn.new:hover{background:#3b82f640}.memo-btn.reset{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border)}.memo-btn.reset:hover{border-color:var(--text-primary);color:var(--text-primary)}.memo-results{display:flex;gap:24px;margin-bottom:16px}.memo-stat{flex:1;padding:16px;background:var(--bg-secondary);border-radius:8px;text-align:center}.memo-stat-label{font-size:.85rem;color:var(--text-muted);margin-bottom:4px}.memo-stat-value{font-size:1.5rem;font-weight:700;color:var(--accent);font-family:SF Mono,Monaco,monospace}.memo-explanation{padding:12px 16px;background:#a855f71a;border-radius:8px;font-size:.9rem;color:var(--text-secondary)}.memo-explanation p{margin:0}.computed-code{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px;overflow:hidden}.computed-code pre{margin:0;padding:20px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;line-height:1.6;color:var(--text-secondary);overflow-x:auto}.migration-guide{margin:24px 0}.migration-tabs{display:flex;gap:0;margin-bottom:24px;background:var(--bg-secondary);border-radius:12px;padding:4px}.migration-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:none;background:transparent;color:var(--text-secondary);font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s}.migration-tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.migration-tab.active{background:var(--accent);color:#fff}.tab-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:700;font-size:.85rem}.tab-icon.react{background:#61dafb;color:#20232a}.tab-icon.vue{background:#42b883;color:#fff}.tab-icon.angular{background:#dd0031;color:#fff}.migration-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px}.migration-content h4{margin:0 0 24px;font-size:1.2rem}.migration-section{margin-bottom:32px}.migration-section h5{margin:0 0 16px;font-size:1rem;color:var(--text-primary)}.code-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width: 900px){.code-comparison{grid-template-columns:1fr}}.code-before,.code-after{border-radius:8px;overflow:hidden}.code-label{padding:8px 12px;background:var(--bg-tertiary);font-size:.8rem;font-weight:600;color:var(--text-muted)}.code-label.drutix{background:#e9456026;color:var(--accent)}.code-comparison pre{margin:0;padding:16px;background:var(--bg-primary);font-family:SF Mono,Monaco,monospace;font-size:.75rem;line-height:1.5;overflow-x:auto;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px}.migration-table{margin-top:32px}.migration-table h5{margin:0 0 16px}.migration-table table{width:100%;border-collapse:collapse}.migration-table th,.migration-table td{padding:12px;text-align:left;border-bottom:1px solid var(--border)}.migration-table th{background:var(--bg-tertiary);font-weight:600;font-size:.85rem}.migration-table code{background:#e945601a;padding:2px 6px;border-radius:4px;font-size:.85rem}.starter-templates{margin:24px 0}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}@media (max-width: 900px){.template-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 500px){.template-grid{grid-template-columns:1fr}}.template-card{background:var(--bg-secondary);border:2px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;transition:all .2s;text-align:center}.template-card:hover{border-color:var(--accent);transform:translateY(-2px)}.template-card.active{border-color:var(--accent);background:#e945600d}.template-icon{font-size:2.5rem;margin-bottom:12px}.template-card h4{margin:0 0 8px;font-size:1rem}.template-card p{margin:0;font-size:.85rem;color:var(--text-muted);line-height:1.4}.template-details{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:24px}@media (max-width: 900px){.template-details{grid-template-columns:1fr}}.template-info h4{margin:0 0 12px;font-size:1.2rem}.template-info>p{color:var(--text-secondary);margin:0 0 20px}.template-info h5{margin:0 0 12px;font-size:.95rem}.feature-list{list-style:none;padding:0;margin:0 0 24px}.feature-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem}.feature-check{color:#22c55e;font-weight:700}.command-box{display:flex;align-items:center;gap:12px;background:var(--bg-tertiary);padding:12px 16px;border-radius:8px}.command-box code{flex:1;font-family:SF Mono,Monaco,monospace;font-size:.85rem;color:var(--accent)}.copy-command-btn{padding:6px 12px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.8rem;font-weight:500;cursor:pointer;transition:background .2s}.copy-command-btn:hover{background:var(--accent-light);color:#fff!important}.preview-mockup{background:var(--bg-primary);border:1px solid var(--border);border-radius:12px;overflow:hidden;min-height:300px}.preview-mockup.ecommerce .mockup-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.mockup-logo{font-weight:700;color:var(--accent)}.mockup-nav{display:flex;gap:16px;font-size:.85rem;color:var(--text-secondary)}.product-grid-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px}.product-card-preview{background:var(--bg-secondary);border-radius:8px;overflow:hidden}.product-image{height:80px;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%)}.product-info{padding:12px}.product-name{height:12px;background:var(--bg-tertiary);border-radius:4px;margin-bottom:8px;width:80%}.product-price{font-weight:600;color:var(--accent);font-size:.9rem}.preview-mockup.dashboard{display:flex}.mockup-sidebar{width:120px;background:var(--bg-secondary);padding:16px 0;border-right:1px solid var(--border)}.sidebar-item{padding:10px 16px;font-size:.8rem;color:var(--text-muted)}.sidebar-item.active{color:var(--accent);background:#e945601a;border-left:3px solid var(--accent)}.mockup-main{flex:1;padding:16px}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat-card{background:var(--bg-secondary);padding:12px;border-radius:8px;text-align:center}.stat-value{font-size:1.1rem;font-weight:700;color:var(--accent)}.stat-label{font-size:.7rem;color:var(--text-muted)}.chart-placeholder{display:flex;align-items:flex-end;gap:8px;height:100px;padding:16px;background:var(--bg-secondary);border-radius:8px}.chart-bar{flex:1;background:linear-gradient(to top,var(--accent),var(--accent-light));border-radius:4px 4px 0 0}.preview-mockup.blog .blog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.blog-title{font-weight:700;font-size:1.1rem}.blog-nav{display:flex;gap:16px;font-size:.85rem;color:var(--text-secondary)}.blog-content{padding:20px}.blog-post-preview{margin-bottom:20px}.post-image{height:60px;background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);border-radius:8px;margin-bottom:12px}.post-meta{font-size:.75rem;color:var(--text-muted);margin-bottom:6px}.blog-post-preview h3{margin:0 0 6px;font-size:.95rem}.blog-post-preview p{margin:0;font-size:.8rem;color:var(--text-secondary)}.preview-mockup.saas .saas-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border)}.saas-logo{font-weight:700;color:var(--accent)}.saas-nav{display:flex;align-items:center;gap:16px;font-size:.85rem}.saas-cta{padding:6px 14px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.8rem;font-weight:500}.saas-hero{text-align:center;padding:30px 20px 20px}.saas-hero h2{margin:0 0 8px;font-size:1.3rem}.saas-hero p{margin:0;color:var(--text-secondary);font-size:.9rem}.pricing-cards{display:flex;gap:12px;padding:0 20px 20px;justify-content:center}.pricing-card{flex:1;max-width:100px;padding:16px 12px;background:var(--bg-secondary);border-radius:8px;text-align:center}.pricing-card.featured{background:var(--accent);color:#fff}.plan-name{font-size:.75rem;margin-bottom:4px}.plan-price{font-weight:700;font-size:.85rem}.pricing-card.featured .plan-name,.pricing-card.featured .plan-price{color:#fff}.template-structure{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px}.template-structure h4{margin:0 0 16px}.structure-tree{margin:0;padding:16px;background:var(--bg-tertiary);border-radius:8px;font-family:SF Mono,Monaco,monospace;font-size:.8rem;line-height:1.6;overflow-x:auto}.mobile-menu-toggle{display:none;width:40px;height:40px;border:none;background:transparent;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s}.mobile-menu-toggle:hover{background:var(--bg-tertiary)}.hamburger{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px}.hamburger span{display:block;width:100%;height:2px;background:var(--text-primary);border-radius:2px;transition:all .3s}.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-logo{display:none;font-weight:700;font-size:1.2rem;color:var(--text-primary)}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);z-index:99;opacity:0;transition:opacity .3s}.mobile-overlay.visible{display:block;opacity:1}.sidebar-close{display:none;position:absolute;top:20px;right:20px;width:28px;height:28px;border:none;background:var(--bg-tertiary);border-radius:6px;font-size:1.1rem;color:var(--text-secondary);cursor:pointer;transition:all .2s;line-height:1;z-index:20;padding:0}.sidebar-close:hover{background:var(--accent);color:#fff}@media (max-width: 1024px){:root{--sidebar-width: 280px}.main-content{padding:32px 24px;max-width:100%;margin-left:0}.hero-grid,.template-grid{grid-template-columns:repeat(2,1fr)}.mobile-menu-toggle{display:flex;align-items:center;justify-content:center;order:-1}.mobile-logo{display:block;flex:1;text-align:center}.sidebar{transform:translate(-100%);width:var(--sidebar-width);z-index:200}.sidebar.mobile-open{transform:translate(0)}.sidebar-close{display:flex;align-items:center;justify-content:center}.header{left:0;padding:0 20px;gap:12px}}@media (max-width: 768px){:root{--header-height: 56px}.main-content{padding:24px 16px}.header{padding:0 16px;gap:8px}.search-container{flex:0}.search-trigger{min-width:auto;padding:8px}.search-placeholder,.search-shortcut{display:none}.header-actions{gap:8px;min-width:120px}.github-text{display:none}.github-btn{padding:8px 10px;min-width:40px;min-height:40px}.get-started-btn{padding:8px 12px;font-size:.85rem;min-height:36px}.page-content{padding:32px 16px;padding-top:calc(var(--header-height) + 24px)}.section-title{font-size:1.5rem}.hero{padding:40px 16px}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.hero-buttons{flex-direction:column;gap:12px}.hero-grid{grid-template-columns:1fr;gap:12px}.stats-bar{flex-wrap:wrap;gap:16px}.stat-item{flex:1 1 40%;min-width:100px}.code-block{border-radius:8px}.code-block pre{font-size:.75rem;padding:12px}.api-table{display:block;overflow-x:auto}.api-table th,.api-table td{padding:8px 12px;font-size:.85rem}.feature-grid{grid-template-columns:1fr;gap:16px}.feature-card{padding:20px}.template-grid,.template-details{grid-template-columns:1fr}.migration-tabs{flex-wrap:wrap}.migration-tab{flex:1 1 30%;padding:10px 12px;font-size:.85rem}.code-comparison{grid-template-columns:1fr}.callout{padding:16px}.callout-body{font-size:.9rem}.scroll-to-top-btn{bottom:16px;right:16px;width:44px;height:44px}}@media (max-width: 480px){.page-content{padding:16px 12px;padding-top:calc(var(--header-height) + 16px)}.hero{padding:32px 12px}.hero-title{font-size:1.6rem}.hero-subtitle{font-size:.9rem}.section-title{font-size:1.3rem}.btn{padding:10px 16px;font-size:.85rem}.get-started-btn{display:none}.cart-calculator{grid-template-columns:1fr}.stepper{flex-wrap:wrap;justify-content:center}.store-layout{grid-template-columns:1fr}.store-products{border-right:none;border-bottom:1px solid var(--border)}.stats-row{grid-template-columns:repeat(2,1fr)}.pricing-cards{flex-direction:column}.pricing-card{max-width:100%}.lifecycle-controls{flex-direction:column}.signals-demo,.effects-demo{padding:16px}.xss-demo,.forms-layout{grid-template-columns:1fr}.demo-form{border-right:none;border-bottom:1px solid var(--border)}}@media (max-width: 400px){.page-content{padding:12px 8px;padding-top:calc(var(--header-height) + 12px)}.code-block{margin:16px -8px;border-radius:0;border-left:none;border-right:none}.code-content{padding:12px 10px;font-size:.75rem;line-height:1.5;max-height:300px;-webkit-overflow-scrolling:touch}.code-content pre{font-size:.72rem;tab-size:2}.code-content code{font-size:inherit;word-break:break-word}.code-header{padding:10px 12px;font-size:.75rem}.hero{padding:24px 8px}.hero-title{font-size:1.4rem}.hero-subtitle{font-size:.85rem}.hero-buttons{flex-direction:column;gap:10px}.hero-buttons .btn{width:100%;justify-content:center}.section{margin-bottom:40px}.section-title{font-size:1.2rem}.feature-card-enhanced{padding:16px}.feature-card-title{font-size:.9rem}.feature-card-description{font-size:.8rem}.signals-demo,.effects-demo,.store-demo,.control-flow-demo,.forms-demo,.security-demo,.computed-demo,.router-demo{padding:12px;margin:16px -8px;border-radius:0;border-left:none;border-right:none}.comparison-table{font-size:.7rem}.comparison-table th,.comparison-table td{padding:8px 6px}.footer{padding:32px 12px;font-size:.85rem}.quick-start-content{padding:16px 12px}.step-badge{width:28px;height:28px;font-size:.8rem}.file-tree-item{padding:6px 8px;font-size:.75rem}.folder-card{padding:12px}.folder-card-title{font-size:.85rem}.error-overlay-demo{margin:16px -8px;border-radius:0}.mock-overlay{font-size:.8rem}.i18n-demo{padding:12px}.lang-btn{padding:6px 10px;font-size:.75rem}.motion-demo,.http-demo,.hydration-demo{padding:12px}}.error-overlay-demo{background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);overflow:hidden}.error-overlay-demo .demo-header{padding:20px 24px;border-bottom:1px solid var(--border)}.error-overlay-demo .demo-title{display:flex;align-items:center;gap:12px;margin-bottom:8px}.error-overlay-demo .demo-title h3{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.error-overlay-demo .demo-icon{display:flex;color:var(--accent)}.error-overlay-demo .demo-subtitle{color:var(--text-secondary);font-size:.9rem}.error-overlay-demo .demo-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--bg-tertiary)}.error-overlay-demo .demo-tab{padding:12px 20px;background:transparent;border:none;color:var(--text-secondary);font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}.error-overlay-demo .demo-tab:hover{color:var(--text-primary);background:#ffffff08}.error-overlay-demo .demo-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--bg-secondary)}.error-overlay-demo .demo-content{padding:24px}.error-overlay-demo .tab-panel{animation:fadeIn .2s ease}.error-overlay-demo .code-example{background:var(--bg-code);border-radius:8px;overflow:hidden;margin-bottom:16px}.error-overlay-demo .code-header{padding:10px 16px;background:#ffffff08;border-bottom:1px solid var(--border);font-size:.8rem;color:var(--text-secondary)}.error-overlay-demo .code-block{margin:0;padding:16px;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.6}.error-overlay-demo .demo-action{display:flex;align-items:center;gap:16px;margin-top:20px}.error-overlay-demo .btn-demo{padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.error-overlay-demo .btn-demo:hover{background:var(--accent-light);transform:translateY(-1px);color:#fff}.error-overlay-demo .action-hint{color:var(--text-muted);font-size:.85rem}.error-overlay-demo .config-grid{display:grid;gap:12px}.error-overlay-demo .config-item{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;padding:12px 16px;background:var(--bg-tertiary);border-radius:8px;align-items:start}.error-overlay-demo .config-label{font-family:var(--font-mono);font-size:.85rem;color:var(--accent);font-weight:500}.error-overlay-demo .config-value{font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary)}.error-overlay-demo .config-desc{grid-column:1 / -1;font-size:.8rem;color:var(--text-muted);margin-top:4px}.error-overlay-demo .aliases-intro{margin-bottom:20px}.error-overlay-demo .aliases-intro p{color:var(--text-secondary);margin-bottom:12px}.error-overlay-demo .sanskrit-meaning{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:var(--bg-tertiary);border-radius:6px;font-size:.9rem}.error-overlay-demo .sanskrit-meaning strong{color:var(--accent)}.error-overlay-demo .aliases-table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:.9rem}.error-overlay-demo .aliases-table th,.error-overlay-demo .aliases-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}.error-overlay-demo .aliases-table th{background:var(--bg-tertiary);color:var(--text-secondary);font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}.error-overlay-demo .aliases-table code{font-family:var(--font-mono);font-size:.85rem;padding:2px 6px;background:var(--bg-code);border-radius:4px}.error-overlay-demo .aliases-table code.sanskrit{color:var(--accent);background:#e945601a}.mock-overlay-container{position:fixed;bottom:20px;right:20px;z-index:9999;animation:slideIn .3s cubic-bezier(.16,1,.3,1)}.mock-overlay{width:480px;max-width:calc(100vw - 40px);background:#1a1a2e;border:1px solid var(--accent);border-radius:12px;box-shadow:0 25px 50px -12px #00000080,0 0 60px #e9456026;overflow:hidden;font-family:var(--font-mono);font-size:13px}.mock-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:linear-gradient(135deg,#e94560,#c23a51);color:#fff}.mock-type{display:flex;align-items:center;gap:8px;font-weight:600}.mock-icon{display:flex}.mock-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:none;border-radius:4px;color:#fff;font-size:14px;cursor:pointer}.mock-close:hover{background:#fff3}.mock-content{padding:16px}.mock-error-name{color:#f87171;font-size:14px;margin-bottom:6px}.mock-error-msg{color:#e4e4e7;margin-bottom:12px}.mock-code-frame{background:#0f0f1a;border-radius:6px;overflow:hidden;margin-bottom:12px}.mock-file{padding:8px 12px;background:#16162a;color:#60a5fa;font-size:11px;border-bottom:1px solid #2a2a4a}.mock-code{margin:0;padding:12px;font-size:12px;line-height:1.5;color:#e4e4e7;overflow-x:auto}.mock-hint{padding:10px 12px;background:#22c55e1a;border:1px solid rgba(34,197,94,.2);border-radius:6px;font-size:12px;color:#d1d5db}.mock-hint strong{color:#22c55e}.mock-footer{display:flex;gap:8px;padding:12px 16px;background:#16162a;border-top:1px solid #2a2a4a}.mock-btn{padding:6px 12px;background:#2a2a4a;border:none;border-radius:6px;color:#e4e4e7;font-family:inherit;font-size:12px;cursor:pointer}.mock-btn:hover{background:#3a3a5a}.mock-btn.dismiss{margin-left:auto;background:#ef444426;color:#f87171}.mock-btn.dismiss:hover{background:#ef444440}.error-overlay-demo .features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.error-overlay-demo .feature-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--bg-tertiary);border-radius:8px}.error-overlay-demo .feature-icon{display:flex;color:#fff;flex-shrink:0}.error-overlay-demo .feature-text{display:flex;flex-direction:column;gap:2px}.error-overlay-demo .feature-text strong{font-size:.85rem;color:var(--text-primary)}.error-overlay-demo .feature-text span{font-size:.8rem;color:var(--text-muted)}@media (max-width: 768px){.error-overlay-demo .features-grid{grid-template-columns:1fr}.mock-overlay-container{bottom:10px;right:10px;left:10px}.mock-overlay{width:100%}.error-overlay-demo .config-item{grid-template-columns:1fr}}.i18n-demo{background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);overflow:hidden}.i18n-demo .demo-header{padding:20px 24px;border-bottom:1px solid var(--border)}.i18n-demo .demo-title{display:flex;align-items:center;gap:12px;margin-bottom:8px}.i18n-demo .demo-title h3{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.i18n-demo .demo-icon{display:flex;color:var(--accent)}.i18n-demo .demo-subtitle{color:var(--text-secondary);font-size:.9rem}.i18n-selector{padding:20px 24px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.selector-label{font-size:.85rem;color:var(--text-secondary);margin-bottom:12px}.i18n-lang-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.i18n-lang-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s}.i18n-lang-btn:hover{border-color:var(--accent);background:#e945600d}.i18n-lang-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.lang-abbr{font-size:.75rem;font-weight:700;padding:2px 6px;background:#ffffff1a;border-radius:4px;letter-spacing:.5px}.i18n-lang-btn.active .lang-abbr{background:#fff3}.current-lang{font-size:.85rem;color:var(--text-muted)}.current-lang strong{color:var(--accent)}.i18n-preview{padding:24px;background:var(--bg-primary);border-bottom:1px solid var(--border);transition:direction .3s}.preview-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}.preview-nav{display:flex;gap:24px;flex-wrap:wrap}.preview-nav span{color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:color .2s}.preview-nav span:hover{color:var(--accent)}.preview-content{text-align:center;padding:32px 0}.preview-content h2{font-size:2rem;color:var(--text-primary);margin-bottom:8px}.preview-content h3{font-size:1.2rem;color:var(--accent);margin-bottom:16px}.preview-content p{color:var(--text-secondary);margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto}.preview-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.preview-btn{padding:10px 24px;border-radius:8px;font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary)}.preview-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.preview-btn:hover{transform:translateY(-2px)}.preview-footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.preview-meta{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--text-secondary)}.meta-separator{color:var(--border)}.preview-date{font-size:.8rem;color:var(--text-muted)}.i18n-code{padding:24px;background:var(--bg-code);border-bottom:1px solid var(--border)}.i18n-code .code-header{font-size:.8rem;color:var(--text-secondary);margin-bottom:12px}.i18n-code .code-block{margin:0;padding:16px;background:var(--bg-primary);border-radius:8px;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.6}.i18n-features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:20px 24px}.i18n-features .feature-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--bg-tertiary);border-radius:8px}.i18n-features .feature-icon{display:flex;color:#fff;flex-shrink:0}.i18n-features .feature-text{display:flex;flex-direction:column;gap:2px}.i18n-features .feature-text strong{font-size:.85rem;color:var(--text-primary)}.i18n-features .feature-text span{font-size:.8rem;color:var(--text-muted)}.motion-demo{background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);overflow:hidden}.motion-demo .demo-header{padding:20px 24px;border-bottom:1px solid var(--border)}.motion-demo .demo-title{display:flex;align-items:center;gap:12px;margin-bottom:8px}.motion-demo .demo-title h3{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.motion-demo .demo-icon{display:flex;color:var(--accent)}.motion-demo .demo-subtitle{color:var(--text-secondary);font-size:.9rem}.motion-selector{padding:20px 24px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.anim-type-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.anim-type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:inherit;cursor:pointer;transition:all .2s;min-width:80px}.anim-type-btn:hover{border-color:var(--accent)}.anim-type-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.anim-icon{display:flex;align-items:center;justify-content:center}.anim-name{font-size:.8rem}.spring-controls{padding:16px 24px;background:var(--bg-code);border-bottom:1px solid var(--border)}.spring-control{margin-bottom:12px}.spring-control:last-child{margin-bottom:0}.spring-control label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px}.spring-control input[type=range]{width:100%;accent-color:var(--accent)}.motion-preview{padding:24px;display:flex;flex-direction:column;align-items:center;gap:24px;border-bottom:1px solid var(--border)}.preview-stage{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:var(--bg-code);border-radius:12px;overflow:hidden}.anim-target{width:120px;height:120px;background:linear-gradient(135deg,var(--accent) 0%,#ff6b8a 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px #e945604d}.target-content{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff}.target-icon{display:flex}.anim-fade{animation:anim-fade 1s ease}@keyframes anim-fade{0%{opacity:0}50%{opacity:1}to{opacity:0}}.anim-scale{animation:anim-scale 1s ease}@keyframes anim-scale{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.anim-slide{animation:anim-slide 1s ease}@keyframes anim-slide{0%{transform:translate(0)}25%{transform:translate(50px)}75%{transform:translate(-50px)}to{transform:translate(0)}}.anim-rotate{animation:anim-rotate 1s ease}@keyframes anim-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.anim-bounce{animation:anim-bounce 1s ease}@keyframes anim-bounce{0%,to{transform:translateY(0)}25%{transform:translateY(-30px)}50%{transform:translateY(0)}75%{transform:translateY(-15px)}}.anim-spring{animation:anim-spring 1s cubic-bezier(.68,-.55,.265,1.55)}@keyframes anim-spring{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}.play-btn{padding:12px 32px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s}.play-btn:hover{background:var(--accent-light);transform:translateY(-2px);color:#fff}.play-btn.disabled{opacity:.6;cursor:not-allowed}.easing-section{padding:24px;border-bottom:1px solid var(--border)}.easing-section h4{font-size:.9rem;color:var(--text-secondary);margin-bottom:16px}.easing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px}.easing-item{display:flex;flex-direction:column;align-items:center;gap:8px}.easing-preview{width:100%;height:40px;background:var(--bg-code);border-radius:6px;position:relative;overflow:hidden}.easing-dot{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--accent);border-radius:50%;animation:easing-move 2s infinite}.easing-linear .easing-dot{animation-timing-function:linear}.easing-ease .easing-dot{animation-timing-function:ease}.easing-ease-in .easing-dot{animation-timing-function:ease-in}.easing-ease-out .easing-dot{animation-timing-function:ease-out}.easing-ease-in-out .easing-dot{animation-timing-function:ease-in-out}.easing-spring .easing-dot{animation-timing-function:cubic-bezier(.68,-.55,.265,1.55)}@keyframes easing-move{0%,to{left:4px}50%{left:calc(100% - 16px)}}.easing-name{font-size:.75rem;color:var(--text-muted)}.motion-code{padding:24px;background:var(--bg-code);border-bottom:1px solid var(--border)}.motion-code .code-header{font-size:.8rem;color:var(--text-secondary);margin-bottom:12px}.motion-code .code-block{margin:0;padding:16px;background:var(--bg-primary);border-radius:8px;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.6}.motion-features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:20px 24px}.motion-features .feature-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--bg-tertiary);border-radius:8px}.motion-features .feature-icon{display:flex;color:#fff;flex-shrink:0}.motion-features .feature-text{display:flex;flex-direction:column;gap:2px}.motion-features .feature-text strong{font-size:.85rem;color:var(--text-primary)}.motion-features .feature-text span{font-size:.8rem;color:var(--text-muted)}.http-demo{background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);overflow:hidden}.http-demo .demo-header{padding:20px 24px;border-bottom:1px solid var(--border)}.http-demo .demo-title{display:flex;align-items:center;gap:12px;margin-bottom:8px}.http-demo .demo-title h3{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.http-demo .demo-icon{display:flex;color:var(--accent)}.http-demo .demo-subtitle{color:var(--text-secondary);font-size:.9rem}.http-samples{padding:16px 24px;background:var(--bg-tertiary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}.samples-label{font-size:.85rem;color:var(--text-muted)}.sample-btn{padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-family:inherit;font-size:.8rem;cursor:pointer;transition:all .2s}.sample-btn:hover{border-color:var(--accent);color:var(--accent)}.http-builder{padding:24px;border-bottom:1px solid var(--border)}.method-selector{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.method-btn{padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.method-btn.method-get{color:#22c55e}.method-btn.method-post{color:#3b82f6}.method-btn.method-put{color:#f59e0b}.method-btn.method-patch{color:#8b5cf6}.method-btn.method-delete{color:#ef4444}.method-btn.active{background:currentColor;color:#fff!important;border-color:currentColor}.method-btn.method-get.active{background:#22c55e;border-color:#22c55e}.method-btn.method-post.active{background:#3b82f6;border-color:#3b82f6}.method-btn.method-put.active{background:#f59e0b;border-color:#f59e0b}.method-btn.method-patch.active{background:#8b5cf6;border-color:#8b5cf6}.method-btn.method-delete.active{background:#ef4444;border-color:#ef4444}.url-input-wrapper{display:flex;gap:12px}.url-input{flex:1;padding:12px 16px;background:var(--bg-code);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:var(--font-mono);font-size:.9rem}.url-input:focus{outline:none;border-color:var(--accent)}.send-btn{padding:12px 24px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.send-btn:hover{background:var(--accent-light);color:#fff}.request-body-section{margin-top:16px}.request-body-section label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px}.body-input{width:100%;padding:12px 16px;background:var(--bg-code);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:var(--font-mono);font-size:.85rem;resize:vertical}.body-input:focus{outline:none;border-color:var(--accent)}.http-response{border-bottom:1px solid var(--border)}.response-tabs{display:flex;gap:0;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.http-tab{padding:12px 20px;background:transparent;border:none;color:var(--text-secondary);font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}.http-tab:hover{color:var(--text-primary)}.http-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--bg-secondary)}.response-panel{padding:24px;min-height:200px;background:var(--bg-code)}.response-placeholder{color:var(--text-muted);text-align:center;padding:40px}.response-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.status-badge{padding:4px 12px;border-radius:4px;font-family:var(--font-mono);font-size:.85rem;font-weight:600}.status-badge.success{background:#22c55e26;color:#22c55e}.status-badge.redirect{background:#3b82f626;color:#3b82f6}.status-badge.error{background:#ef444426;color:#ef4444}.response-time{font-size:.85rem;color:var(--text-muted)}.response-body{margin:0;padding:16px;background:var(--bg-primary);border-radius:8px;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;max-height:300px;overflow-y:auto}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:40px auto}@keyframes spin{to{transform:rotate(360deg)}}.http-mock-note{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#3b82f61a;border-bottom:1px solid var(--border);font-size:.85rem;color:#60a5fa}.http-mock-note .note-icon{display:flex;flex-shrink:0}.http-code{padding:24px;background:var(--bg-code);border-bottom:1px solid var(--border)}.http-code .code-header{font-size:.8rem;color:var(--text-secondary);margin-bottom:12px}.http-code .code-block{margin:0;padding:16px;background:var(--bg-primary);border-radius:8px;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.6}.http-features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:20px 24px}.http-features .feature-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--bg-tertiary);border-radius:8px}.http-features .feature-icon{display:flex;color:#fff;flex-shrink:0}.http-features .feature-text{display:flex;flex-direction:column;gap:2px}.http-features .feature-text strong{font-size:.85rem;color:var(--text-primary)}.http-features .feature-text span{font-size:.8rem;color:var(--text-muted)}.hydration-demo{background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);overflow:hidden}.hydration-demo .demo-header{padding:20px 24px;border-bottom:1px solid var(--border)}.hydration-demo .demo-title{display:flex;align-items:center;gap:12px;margin-bottom:8px}.hydration-demo .demo-title h3{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.hydration-demo .demo-icon{display:flex;color:var(--accent)}.hydration-demo .demo-subtitle{color:var(--text-secondary);font-size:.9rem}.hydration-intro{padding:24px;border-bottom:1px solid var(--border)}.intro-card{display:flex;gap:16px;padding:20px;background:var(--bg-tertiary);border-radius:12px;margin-bottom:20px}.intro-icon{display:flex;color:var(--accent);flex-shrink:0}.intro-content h4{font-size:1rem;color:var(--text-primary);margin-bottom:8px}.intro-content p{font-size:.9rem;color:var(--text-secondary);line-height:1.6}.hydration-benefits{display:flex;flex-wrap:wrap;gap:12px}.benefit-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-code);border-radius:8px;font-size:.85rem;color:var(--text-primary)}.benefit-icon{display:flex;color:var(--accent)}.hydration-steps-container{padding:24px;border-bottom:1px solid var(--border)}.steps-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.steps-header h4{font-size:1rem;color:var(--text-primary)}.step-controls{display:flex;gap:8px}.step-control-btn{padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-family:inherit;font-size:.8rem;cursor:pointer;transition:all .2s}.step-control-btn:hover{border-color:var(--accent);color:var(--accent)}.hydration-steps{display:flex;justify-content:space-between;margin-bottom:24px;position:relative}.hydration-steps:before{content:"";position:absolute;top:16px;left:32px;right:32px;height:2px;background:var(--border);z-index:0}.hydration-step{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;z-index:1}.step-number{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:2px solid var(--border);border-radius:50%;font-size:.85rem;font-weight:600;color:var(--text-muted);transition:all .3s}.hydration-step.active .step-number{background:var(--accent);border-color:var(--accent);color:#fff}.hydration-step.completed .step-number{background:#22c55e;border-color:#22c55e;color:#fff}.step-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.hydration-step.active .step-label{color:var(--accent)}.step-content{display:grid;grid-template-columns:1fr 1fr;gap:24px}.step-info h4{font-size:1.1rem;color:var(--text-primary);margin-bottom:12px}.step-info p{font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}.step-code{margin:0;padding:16px;background:var(--bg-code);border-radius:8px;font-family:var(--font-mono);font-size:.8rem;line-height:1.5;overflow-x:auto}.step-visual{display:flex;align-items:center;justify-content:center;min-height:200px}.visual-state{width:100%;animation:fadeIn .3s ease}.visual-server{display:flex;flex-direction:column;align-items:center;gap:16px}.server-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 32px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:12px;color:#fff}.server-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.server-icon{display:flex}.render-arrow{display:flex;color:var(--text-muted);animation:bounce-down 1s ease infinite}@keyframes bounce-down{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.html-output{padding:12px 20px;background:var(--bg-code);border-radius:8px;font-family:var(--font-mono);font-size:.8rem;color:var(--code-string)}.visual-browser{width:100%}.browser-frame{background:var(--bg-tertiary);border-radius:12px;overflow:hidden;border:1px solid var(--border)}.browser-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.browser-dots{display:flex;gap:6px}.browser-dots span{width:10px;height:10px;border-radius:50%;background:var(--border)}.browser-dots span:nth-child(1){background:#ef4444}.browser-dots span:nth-child(2){background:#f59e0b}.browser-dots span:nth-child(3){background:#22c55e}.browser-url{flex:1;padding:6px 12px;background:var(--bg-code);border-radius:6px;font-size:.8rem;color:var(--text-muted)}.browser-content{padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:120px}.counter-preview{display:flex;align-items:center;gap:16px;padding:16px 24px;background:var(--bg-secondary);border-radius:8px}.counter-value{font-size:2rem;font-weight:700;color:var(--text-primary);min-width:40px;text-align:center;transition:transform .15s ease}.counter-value.pulse{animation:value-pulse .3s ease}@keyframes value-pulse{0%{transform:scale(1)}50%{transform:scale(1.3);color:var(--accent)}to{transform:scale(1)}}.counter-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:1.5rem;font-weight:600;border:none;cursor:pointer;transition:all .2s}.counter-btn.disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed}.counter-btn.active{background:var(--accent);color:#fff}.counter-btn.active:hover{transform:scale(1.1)}.static-badge{padding:4px 12px;background:#f59e0b26;color:#f59e0b;border-radius:4px;font-size:.75rem;font-weight:600}.loading-indicator{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted)}.loading-indicator .loading-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.hydrated-badge{padding:4px 12px;background:#22c55e26;color:#22c55e;border-radius:4px;font-size:.75rem;font-weight:600}.counter-preview.interactive{animation:pulse-border .5s ease;box-shadow:0 0 0 2px #22c55e4d}@keyframes pulse-border{0%{box-shadow:0 0 #22c55e80}to{box-shadow:0 0 0 8px #22c55e00}}.step-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.nav-btn{padding:10px 20px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:.9rem;cursor:pointer;transition:all .2s}.nav-btn:hover:not(:disabled){border-color:var(--accent)}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.nav-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.nav-btn.primary:hover:not(:disabled){background:var(--accent-light)}.step-counter{font-size:.85rem;color:var(--text-muted)}.hydration-concepts{padding:24px}.hydration-concepts h4{font-size:1rem;color:var(--text-primary);margin-bottom:16px}.concepts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.concept-card{padding:16px;background:var(--bg-tertiary);border-radius:8px}.concept-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.concept-icon{display:flex;color:var(--accent)}.concept-card strong{font-size:.9rem;color:var(--text-primary)}.concept-card p{font-size:.8rem;color:var(--text-muted);line-height:1.5}@media (max-width: 768px){.step-content,.concepts-grid{grid-template-columns:1fr}.hydration-steps{flex-wrap:wrap;gap:12px;justify-content:center}.hydration-steps:before{display:none}.intro-card{flex-direction:column;text-align:center}.hydration-benefits{justify-content:center}}@media (max-width: 768px){.i18n-features,.motion-features,.http-features{grid-template-columns:1fr}.i18n-lang-buttons{flex-direction:column}.i18n-lang-btn{width:100%;justify-content:center}.preview-content h2{font-size:1.5rem}.anim-type-buttons{justify-content:center}.url-input-wrapper{flex-direction:column}.method-selector{justify-content:center}.http-samples{flex-direction:column;align-items:flex-start}.easing-grid{grid-template-columns:repeat(2,1fr)}}:root{--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px)}@media (display-mode: standalone){body{padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left);padding-right:var(--safe-area-right)}.header{padding-top:calc(12px + var(--safe-area-top));height:calc(var(--header-height) + var(--safe-area-top))}.sidebar{padding-top:calc(20px + var(--safe-area-top));padding-bottom:calc(20px + var(--safe-area-bottom))}.page-content{padding-top:calc(var(--header-height) + var(--safe-area-top) + 24px);padding-bottom:calc(40px + var(--safe-area-bottom))}.header .github-btn{display:none}}@media (display-mode: fullscreen){.header{padding-top:var(--safe-area-top)}}@media (display-mode: minimal-ui){body{padding-top:var(--safe-area-top)}}@media (pointer: coarse){.nav-link{min-height:44px;display:flex;align-items:center}.btn,button{min-height:44px;min-width:44px}.feature-card:hover{transform:none}.nav-link:hover:before{opacity:0}}html,body{overscroll-behavior:none}.sidebar-nav,.page-content{-webkit-overflow-scrolling:touch}.pwa-install-banner{position:fixed;bottom:20px;left:20px;right:20px;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:1px solid rgba(233,69,96,.3);border-radius:16px;padding:16px 20px;display:none;align-items:center;gap:16px;z-index:9999;box-shadow:0 8px 32px #0006;animation:slideUp .3s ease-out;backdrop-filter:blur(10px)}.pwa-install-banner.show{display:flex}.pwa-install-content{flex:1}.pwa-install-title{font-weight:600;font-size:1rem;margin-bottom:4px;color:var(--text-primary)}.pwa-install-desc{font-size:.875rem;color:var(--text-secondary)}.pwa-install-btn{padding:10px 24px;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s}.pwa-install-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px #e9456066}.pwa-install-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:8px;font-size:1.5rem;line-height:1;border-radius:50%;transition:background .2s,color .2s}.pwa-install-close:hover{background:#ffffff1a;color:var(--text-primary)}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.pwa-update-notification{position:fixed;top:calc(20px + var(--safe-area-top, 0px));left:50%;transform:translate(-50%);background:var(--accent);color:#fff;padding:12px 20px;border-radius:12px;display:flex;align-items:center;gap:12px;z-index:10000;box-shadow:0 4px 20px #0000004d;animation:fadeIn .3s ease-out}.pwa-update-notification button{background:#fff;color:var(--accent);border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.875rem}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.offline-indicator{position:fixed;top:calc(var(--header-height) + var(--safe-area-top, 0px));left:0;right:0;background:#f44;color:#fff;padding:8px 16px;text-align:center;font-size:.875rem;font-weight:500;z-index:9998;display:none}.offline-indicator.show{display:block}@media (max-width: 768px){.pwa-install-banner{flex-direction:column;text-align:center;gap:12px;bottom:calc(16px + var(--safe-area-bottom, 0px));left:16px;right:16px}.pwa-install-btn{width:100%}.pwa-install-close{position:absolute;top:8px;right:8px}}@media (orientation: landscape) and (display-mode: standalone){.sidebar{padding-left:calc(20px + var(--safe-area-left))}.page-content{padding-right:calc(40px + var(--safe-area-right))}}.di-visualizer-demo{--di-bg: var(--bg-secondary);--di-border: var(--border);--di-node-bg: var(--bg-tertiary, rgba(255, 255, 255, .03));--di-node-border: var(--border);--di-edge: rgba(233, 69, 96, .25);--di-text: var(--text-primary);--di-text-muted: var(--text-muted);background:var(--di-bg);border:1px solid var(--di-border);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #00000026}[data-theme=light] .di-visualizer-demo{--di-bg: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);--di-border: rgba(233, 69, 96, .2);--di-node-bg: rgba(0, 0, 0, .02);--di-node-border: rgba(0, 0, 0, .1);--di-edge: rgba(233, 69, 96, .35);box-shadow:0 8px 32px #00000014}.di-demo-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#e9456014;border-bottom:1px solid rgba(233,69,96,.2)}.di-demo-title{display:flex;align-items:center;gap:10px}.di-demo-logo{width:28px;height:28px;background:linear-gradient(135deg,#e94560,#ff6b6b);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff}.di-demo-name{font-weight:600;font-size:13px;color:var(--text-primary)}.di-demo-sanskrit{font-size:10px;color:var(--text-muted)}.di-demo-badge{padding:4px 10px;background:#4ecdc426;border:1px solid rgba(78,205,196,.3);border-radius:12px;font-size:10px;color:#4ecdc4;font-weight:500}.di-demo-tabs{display:flex;border-bottom:1px solid var(--di-border);padding:0 12px}.di-demo-tab{padding:10px 16px;font-size:11px;font-weight:500;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s ease}.di-demo-tab:hover{color:var(--text-primary)}.di-demo-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.di-demo-toolbar{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--di-border)}.di-demo-filter{flex:1;background:var(--di-node-bg);border:1px solid var(--di-node-border);border-radius:6px;padding:6px 10px;color:var(--di-text);font-size:11px;font-family:inherit;outline:none}.di-demo-filter:focus{border-color:#e9456066}.di-demo-filter::placeholder{color:var(--text-muted)}.di-demo-layout-btn{padding:6px 10px;font-size:10px;background:var(--di-node-bg);border:1px solid var(--di-node-border);border-radius:6px;color:var(--di-text-muted);cursor:pointer;transition:all .2s ease}.di-demo-layout-btn:hover{background:#e9456026;border-color:#e945604d;color:var(--accent)}.di-demo-layout-btn.active{background:#e9456033;border-color:var(--accent);color:var(--accent)}.di-demo-content{padding:16px;min-height:280px;max-height:400px;overflow:auto;display:flex;justify-content:center}.di-graph-container{position:relative;min-height:260px;width:100%;max-width:450px;margin:0 auto}.di-nodes-container{position:relative;width:100%}.di-node{position:absolute;width:140px;background:var(--di-node-bg);border:1px solid var(--di-node-border);border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .2s ease}.di-node:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:8px 0 0 8px;background:var(--node-color, #e94560)}.di-node:hover{background:var(--bg-hover, rgba(255, 255, 255, .06));border-color:#e9456066;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}[data-theme=light] .di-node:hover{background:#e945600d;box-shadow:0 4px 12px #00000014}.di-node.selected{border-color:var(--accent);background:#e945601a;box-shadow:0 0 0 2px #e9456033}.di-node-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.di-node-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:700}.di-node-name{font-weight:600;font-size:11px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.di-node-meta{display:flex;gap:8px;font-size:9px;color:var(--text-muted)}.di-node-scope{padding:2px 6px;background:#ffffff14;border-radius:4px}.di-node-count{display:flex;align-items:center;gap:3px}.di-count-dot{width:4px;height:4px;background:#4ecdc4;border-radius:50%}.di-list-container{display:flex;flex-direction:column;gap:4px}.di-list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#ffffff05;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.di-list-item:hover{background:#ffffff0d;border-color:#ffffff1a}.di-list-item.selected{background:#e945601a;border-color:#e945604d}.di-list-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.di-list-info{flex:1;min-width:0}.di-list-name{font-weight:500;font-size:12px;color:var(--text-primary)}.di-list-type,.di-list-deps{font-size:10px;color:var(--text-muted)}.di-details{border-top:1px solid rgba(255,255,255,.1);padding:12px 16px;background:#0003}.di-details-title{font-weight:600;font-size:12px;color:var(--text-primary);margin-bottom:10px;display:flex;align-items:center;gap:8px}.di-details-type{color:var(--text-muted);font-weight:400;font-size:10px}.di-details-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:11px}.di-details-label{color:var(--text-muted)}.di-details-value{color:var(--text-primary)}.di-details-tags{display:flex;flex-wrap:wrap;gap:4px}.di-details-tag{padding:2px 8px;background:#e9456026;border:1px solid rgba(233,69,96,.3);border-radius:4px;font-size:10px;color:var(--accent)}.di-details-none{color:var(--text-muted);font-style:italic}.di-demo-footer{padding:10px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.di-demo-stats{display:flex;gap:16px;font-size:10px;color:var(--text-muted)}.di-demo-stat-value{color:var(--accent);font-weight:600}.di-demo-live{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-muted)}.di-demo-live-dot{width:6px;height:6px;background:#4ecdc4;border-radius:50%;animation:di-pulse 2s ease-in-out infinite}@keyframes di-pulse{0%,to{opacity:1}50%{opacity:.4}}.di-demo-usage{border-top:1px solid rgba(255,255,255,.1);padding:16px;background:#0003}.di-demo-usage-title{font-size:11px;font-weight:600;color:var(--text-primary);margin-bottom:10px}.di-demo-code{background:var(--bg-code);border-radius:8px;padding:12px;font-size:10px;line-height:1.5;color:var(--text-secondary);overflow-x:auto;margin:0;font-family:var(--font-mono)}@media (max-width: 480px){.di-demo-content{min-height:200px;max-height:300px}.di-node{width:120px;padding:8px 10px}.di-node-name{font-size:10px}.di-demo-toolbar{flex-wrap:wrap}.di-demo-filter{width:100%;flex:auto}}