:root{--color-bg: #f8fafc;--color-text: #1e293b;--color-primary: #3b82f6;--color-secondary: #8b5cf6;--color-border: #e2e8f0;--d-pink: #fca5a5;--d-yellow: #fde047;--d-orange: #fdba74;--d-blue: #93c5fd;--d-green: #86efac;--d-grey: #f1f5f9;--color-query: #ef4444;--color-key: #22c55e;--color-value: #3b82f6;--color-accent: #f59e0b;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "Fira Code", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-md: .5rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--max-width: 1200px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3{line-height:1.2;font-weight:700;margin-bottom:var(--spacing-md)}h1{font-size:2.5rem;color:var(--color-text)}h2{font-size:1.8rem;margin-top:var(--spacing-xl)}h3{font-size:1.4rem;color:var(--color-text);margin-bottom:.5rem}p{margin-bottom:var(--spacing-md)}code{font-family:var(--font-mono);background:var(--color-border);padding:.1em .3em;border-radius:.2em;font-size:.9em}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-md)}.section{background:#fff;border-radius:var(--radius-md);padding:var(--spacing-xl);margin:var(--spacing-xl) 0;box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}.visualization-box{background:#f8fafc;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);margin:var(--spacing-md) 0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}nav{background:#fff;border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}nav .container{display:flex;justify-content:space-between;align-items:center;height:64px}.logo{font-weight:800;font-size:1.25rem;color:var(--color-primary);text-decoration:none}.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:5px}.hamburger span{display:block;width:25px;height:3px;background-color:var(--color-text);border-radius:2px}.nav-links{display:flex;gap:var(--spacing-md)}.nav-links a{text-decoration:none;color:var(--color-text);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);transition:all .2s}.nav-links a:hover,.nav-links a.active{background:var(--color-primary);color:#fff}@media(max-width:768px){.hamburger{display:flex}.nav-links{position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:1rem;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);display:none}.nav-links.open{display:flex}}.diagram-context{background:#fff;border:2px solid var(--color-text);padding:1rem;border-radius:8px;margin-bottom:2rem;display:flex;align-items:center;gap:1.5rem;box-shadow:var(--shadow-md);flex-wrap:wrap}@media(max-width:600px){.diagram-context{flex-direction:column;align-items:stretch;gap:.8rem;text-align:left}.diagram-explanation{border-left:none!important;border-top:3px solid var(--color-primary);padding-left:0!important;padding-top:.5rem}.visual-part{justify-content:flex-start!important}}.diagram-mini-block{padding:.5rem 1rem;border:2px solid black;border-radius:4px;font-weight:700;text-align:center;box-shadow:2px 2px #0003;font-size:.9rem;white-space:nowrap}.d-pink{background:var(--d-pink)}.d-yellow{background:var(--d-yellow)}.d-orange{background:var(--d-orange)}.d-blue{background:var(--d-blue)}.d-green{background:var(--d-green)}.diagram-explanation{font-size:.95rem;color:#475569;border-left:3px solid var(--color-primary);padding-left:1rem;line-height:1.4}