@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{--viz-space-1: 4px;--viz-space-2: 8px;--viz-space-3: 12px;--viz-space-4: 16px;--viz-space-5: 20px;--viz-space-6: 24px}:root{--viz-bg: #fafbfc;--viz-bg-alt: #f0f4f8;--viz-grid: #e2e8f0;--viz-line: #2563eb;--viz-accent: #0369a1;--viz-text: #1e293b;--viz-muted: #64748b;--viz-card-bg: rgba(240, 244, 248, .8);--viz-hover-bg: rgba(37, 99, 235, .06);--viz-icon-bg: rgba(3, 105, 161, .08);--viz-badge-bg: rgba(5, 150, 105, .08);--viz-blue: #2563eb;--viz-green: #059669;--viz-purple: #7c3aed;--viz-orange: #ea580c;--viz-red: #dc2626;--viz-yellow: #ca8a04;--viz-glow: rgba(37, 99, 235, .2);--viz-accent-glow: rgba(3, 105, 161, .25);--viz-blue-glow: rgba(37, 99, 235, .2);--viz-green-glow: rgba(5, 150, 105, .3);--viz-purple-glow: rgba(124, 58, 237, .3);--viz-orange-glow: rgba(234, 88, 12, .3);--viz-red-glow: rgba(220, 38, 38, .3);--viz-yellow-glow: rgba(202, 138, 4, .3);--viz-blue-bg: rgba(37, 99, 235, .08);--viz-green-bg: rgba(5, 150, 105, .08);--viz-purple-bg: rgba(124, 58, 237, .08);--viz-orange-bg: rgba(234, 88, 12, .08);--viz-red-bg: rgba(220, 38, 38, .08);--viz-yellow-bg: rgba(202, 138, 4, .08);--viz-header-bg: linear-gradient( 180deg, rgba(37, 99, 235, .08) 0%, rgba(37, 99, 235, .02) 100% );--viz-footer-bg: #f0f4f8;--viz-tag-bg: rgba(37, 99, 235, .06);--viz-tag-border: rgba(37, 99, 235, .2)}.dark{--viz-bg: #0a1628;--viz-bg-alt: #152238;--viz-grid: #152238;--viz-line: #3b82f6;--viz-accent: #22d3ee;--viz-text: #e2e8f0;--viz-muted: #94a3b8;--viz-card-bg: rgba(21, 34, 56, .6);--viz-hover-bg: rgba(59, 130, 246, .1);--viz-icon-bg: rgba(34, 211, 238, .1);--viz-badge-bg: rgba(16, 185, 129, .1);--viz-blue: #3b82f6;--viz-green: #10b981;--viz-purple: #a78bfa;--viz-orange: #fb923c;--viz-red: #ef4444;--viz-yellow: #fbbf24;--viz-glow: rgba(59, 130, 246, .5);--viz-accent-glow: rgba(34, 211, 238, .4);--viz-blue-glow: rgba(59, 130, 246, .5);--viz-green-glow: rgba(16, 185, 129, .5);--viz-purple-glow: rgba(167, 139, 250, .4);--viz-orange-glow: rgba(251, 146, 60, .4);--viz-red-glow: rgba(239, 68, 68, .4);--viz-yellow-glow: rgba(251, 191, 36, .4);--viz-blue-bg: rgba(59, 130, 246, .1);--viz-green-bg: rgba(16, 185, 129, .1);--viz-purple-bg: rgba(167, 139, 250, .1);--viz-orange-bg: rgba(251, 146, 60, .1);--viz-red-bg: rgba(239, 68, 68, .1);--viz-yellow-bg: rgba(251, 191, 36, .1);--viz-header-bg: linear-gradient( 180deg, rgba(59, 130, 246, .15) 0%, rgba(59, 130, 246, .05) 100% );--viz-footer-bg: rgba(21, 34, 56, .8);--viz-tag-bg: rgba(59, 130, 246, .1);--viz-tag-border: rgba(59, 130, 246, .3)}.viz-font-sans{font-family:IBM Plex Sans,system-ui,sans-serif}.viz-font-mono{font-family:JetBrains Mono,monospace}.old-hash-flow{position:relative;margin:var(--viz-space-6) 0;padding:var(--viz-space-6) var(--viz-space-5) var(--viz-space-5);font-family:IBM Plex Sans,system-ui,sans-serif;background:var(--viz-bg);border:1px solid var(--viz-line);overflow:hidden}.old-hash-flow:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--viz-grid) 1px,transparent 1px),linear-gradient(90deg,var(--viz-grid) 1px,transparent 1px);background-size:20px 20px;opacity:.5;pointer-events:none}.ohf-header{position:relative;display:flex;align-items:center;gap:var(--viz-space-3);margin-bottom:var(--viz-space-5);padding-bottom:14px;border-bottom:1px solid var(--viz-grid)}.ohf-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--viz-blue-bg);border:1px solid var(--viz-blue);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}.ohf-icon svg{width:14px;height:14px;color:var(--viz-blue)}.ohf-title{margin:0;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--viz-blue)}.ohf-badge{margin-left:auto;font-family:JetBrains Mono,monospace;font-size:9px;font-weight:700;letter-spacing:2px;color:var(--viz-red);background:var(--viz-red-bg);border:1px solid var(--viz-red);padding:2px 8px}.ohf-content{position:relative;display:flex;gap:var(--viz-space-6)}.ohf-timeline{flex:1;position:relative;padding-left:32px}.ohf-rail{position:absolute;top:0;bottom:0;left:13px;width:2px;background:linear-gradient(180deg,var(--viz-blue) 0%,var(--viz-blue) 12%,var(--viz-green) 12%,var(--viz-green) 37%,var(--viz-orange) 37%,var(--viz-orange) 87%,var(--viz-red) 87%,var(--viz-red) 100%);opacity:.6}.ohf-step{position:relative;display:grid;grid-template-columns:28px 1fr;gap:var(--viz-space-4);padding:var(--viz-space-2) 0;opacity:0;transform:translate(-10px);animation:ohf-step-in .4s ease forwards}@keyframes ohf-step-in{to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.ohf-step{opacity:1;transform:none;animation:none}}.ohf-node{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--viz-bg);border:2px solid var(--viz-line);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700;transition:all .25s ease;z-index:2}.ohf-node--prerender{border-color:var(--viz-blue);color:var(--viz-blue)}.ohf-node--hash{border-color:var(--viz-green);color:var(--viz-green)}.ohf-node--render{border-color:var(--viz-orange);color:var(--viz-orange)}.ohf-node--problem{border-color:var(--viz-red);color:var(--viz-red)}.ohf-step:hover .ohf-node{transform:scale(1.1)}.ohf-step:hover .ohf-node--prerender{background:var(--viz-blue);color:var(--viz-bg)}.ohf-step:hover .ohf-node--hash{background:var(--viz-green);color:var(--viz-bg)}.ohf-step:hover .ohf-node--render{background:var(--viz-orange);color:var(--viz-bg)}.ohf-step:hover .ohf-node--problem{background:var(--viz-red);color:var(--viz-bg)}.ohf-card{position:relative;padding:10px 14px;background:var(--viz-card-bg);border:1px solid var(--viz-grid);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));transition:all .25s ease}.ohf-card--prerender{border-left:2px solid var(--viz-blue)}.ohf-card--hash{border-left:2px solid var(--viz-green)}.ohf-card--render{border-left:2px solid var(--viz-orange)}.ohf-card--problem{border-left:2px solid var(--viz-red);background:var(--viz-red-bg)}.ohf-step:hover .ohf-card{background:var(--viz-hover-bg)}.ohf-step:hover .ohf-card--problem{background:#dc26261a}.dark .ohf-step:hover .ohf-card--problem{background:#ef444426}.ohf-step-header{display:flex;align-items:center;gap:var(--viz-space-2);margin-bottom:var(--viz-space-1)}.ohf-step-title{margin:0;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;color:var(--viz-text)}.ohf-phase-tag{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:600;letter-spacing:.5px;padding:2px 6px;border-radius:2px;text-transform:uppercase}.ohf-phase-tag--prerender{color:var(--viz-blue);background:var(--viz-blue-bg);border:1px solid var(--viz-blue)}.ohf-phase-tag--hash{color:var(--viz-green);background:var(--viz-green-bg);border:1px solid var(--viz-green)}.ohf-phase-tag--render{color:var(--viz-orange);background:var(--viz-orange-bg);border:1px solid var(--viz-orange)}.ohf-phase-tag--problem{color:var(--viz-red);background:var(--viz-red-bg);border:1px solid var(--viz-red)}.ohf-step-desc{margin:0;font-size:11px;line-height:1.6;color:var(--viz-muted);transition:color .25s ease}.ohf-step:hover .ohf-step-desc{color:var(--viz-text)}.ohf-code-ref{display:inline-block;margin-top:var(--viz-space-1);font-family:JetBrains Mono,monospace;font-size:9px;color:var(--viz-muted);background:var(--viz-bg-alt);padding:2px 6px;border-radius:2px;opacity:0;transition:opacity .25s ease}.ohf-step:hover .ohf-code-ref{opacity:1}.ohf-hash-panel{flex:0 0 280px;position:relative;padding:var(--viz-space-4);background:var(--viz-card-bg);border:1px solid var(--viz-green);border-radius:4px}.ohf-hash-title{margin:0 0 var(--viz-space-3);padding-bottom:var(--viz-space-2);border-bottom:1px solid var(--viz-grid);font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--viz-green)}.ohf-hash-section{margin:var(--viz-space-2) 0 var(--viz-space-1);font-family:JetBrains Mono,monospace;font-size:9px;font-weight:600;color:var(--viz-text)}.ohf-hash-item{display:flex;align-items:flex-start;gap:var(--viz-space-2);padding:var(--viz-space-1) 0;font-size:10px;line-height:1.5;color:var(--viz-muted)}.ohf-hash-num{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:9px;font-weight:700;color:var(--viz-green);background:var(--viz-green-bg);border:1px solid var(--viz-green);border-radius:50%}.ohf-hash-text{flex:1}.ohf-divider{height:1px;background:var(--viz-grid);margin:var(--viz-space-2) 0}.ohf-warning{display:flex;align-items:center;gap:var(--viz-space-2);margin-top:var(--viz-space-4);padding:var(--viz-space-3);background:var(--viz-red-bg);border:1px solid var(--viz-red);border-radius:4px;font-size:11px;color:var(--viz-text)}.ohf-warning-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--viz-red)}.ohf-legend{position:relative;display:flex;flex-wrap:wrap;gap:var(--viz-space-4);margin-top:var(--viz-space-4);padding-top:var(--viz-space-3);border-top:1px solid var(--viz-grid)}.ohf-legend-item{display:flex;align-items:center;gap:6px;font-family:JetBrains Mono,monospace;font-size:10px;color:var(--viz-muted)}.ohf-legend-dot{width:8px;height:8px;border-radius:50%}.ohf-legend-dot--prerender{background:var(--viz-blue)}.ohf-legend-dot--hash{background:var(--viz-green)}.ohf-legend-dot--render{background:var(--viz-orange)}.ohf-legend-dot--problem{background:var(--viz-red)}