:root{--bg-gradient-1: #f0f4f8;--bg-gradient-2: #e2e8f0;--bg-card: #ffffff;--text-primary: #1a202c;--text-secondary: #4a5568;--text-muted: #718096;--shadow: rgba(0, 0, 0, .1);--border: #e2e8f0;--link-color: #667eea;--code-bg: #f7fafc;--spacing-xs: clamp(.2rem, .3vw, .25rem);--spacing-sm: clamp(.4rem, .6vw, .5rem);--spacing-md: clamp(.6rem, .9vw, .75rem);--spacing-base: clamp(.8rem, 1.2vw, 1rem);--spacing-lg: clamp(1.2rem, 1.8vw, 1.5rem);--spacing-xl: clamp(1.6rem, 2.4vw, 2rem);--spacing-2xl: clamp(2.4rem, 3.6vw, 3rem);--font-size-xs: clamp(.7rem, .8vw, .8rem);--font-size-sm: clamp(.8rem, .9vw, .875rem);--font-size-base: clamp(.85rem, 1vw, .95rem);--font-size-md: clamp(.9rem, 1.05vw, 1rem);--font-size-lg: clamp(.95rem, 1.1vw, 1.0625rem);--font-size-xl: clamp(1rem, 1.2vw, 1.125rem);--font-size-2xl: clamp(1.1rem, 1.4vw, 1.25rem);--font-size-3xl: clamp(1.3rem, 1.7vw, 1.5rem);--font-size-4xl: clamp(1.6rem, 2.2vw, 2rem);--font-size-5xl: clamp(2rem, 2.8vw, 2.5rem);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--radius-full: 50%;--header-height: clamp(2.7rem, 3.6vw, 3.42rem);--topics-bar-height: var(--header-height);--sidebar-width: clamp(250px, 20vw, 300px);--container-max-width: min(1400px, 95vw);--theme-button-size: clamp(35px, 3vw, 40px);--sidebar-top-offset: clamp(80px, 8vw, 100px);--sidebar-max-height-offset: clamp(100px, 10vw, 120px);--scrollbar-width: clamp(6px, .6vw, 8px);--sidebar-mobile-max-height: clamp(28rem, 35vw, 32rem);--border-width-thin: clamp(1.5px, .2vw, 2px);--border-width-medium: clamp(2.5px, .3vw, 3px);--border-width-thick: clamp(3.5px, .4vw, 4px);--border-width-base: 1px;--code-padding-inline: .4rem;--code-padding-block: .2rem;--z-index-header: 100;--z-index-topics: 99;--transition-fast: .2s;--transition-base: .3s;--opacity-hover: .8;--opacity-active: .9;--scale-hover: 1.1;--translate-hover: -1px;--line-height-tight: 1.6;--line-height-base: 1.8;--gap-xs: clamp(.4rem, .6vw, .5rem);--gap-sm: clamp(.8rem, 1.2vw, 1rem);--gap-md: clamp(1.6rem, 2.4vw, 2rem);--shadow-sm: 0 2px 8px var(--shadow);--shadow-md: 0 4px 12px var(--shadow);--breakpoint-md: 768px}html.dark-mode{--bg-gradient-1: #2d3748;--bg-gradient-2: #1a202c;--bg-card: #2d3748;--text-primary: #f7fafc;--text-secondary: #e2e8f0;--text-light-mode-primary: #1a202c;--text-muted: #a0aec0;--shadow: rgba(0, 0, 0, .3);--border: #4a5568;--link-color: #90cdf4;--code-bg: #1a202c}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-1),var(--bg-gradient-2));min-height:100vh;color:var(--text-primary);transition:background var(--transition-base) ease;padding-top:calc(var(--header-height) + var(--topics-bar-height))}.header{padding:var(--spacing-base) clamp(var(--spacing-base),2vw,var(--spacing-lg));background:var(--bg-card);box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:var(--z-index-header)}.header h1{font-size:var(--font-size-3xl);color:var(--text-primary)}.header a{color:var(--link-color);text-decoration:none;font-weight:500;margin-right:var(--spacing-base)}.header a:hover{text-decoration:underline}.header-actions{display:flex;align-items:center;gap:var(--gap-sm)}.theme-button{background:transparent;border:var(--border-width-thin) solid var(--border);border-radius:var(--radius-full);width:var(--theme-button-size);height:var(--theme-button-size);font-size:var(--font-size-2xl);transition:all var(--transition-base) ease}.theme-button:hover{transform:scale(var(--scale-hover))}@media(max-width:768px){.header{transition:transform var(--transition-base) ease,opacity var(--transition-base) ease}.header.header-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}}.topics-container{background:var(--bg-card);box-shadow:var(--shadow-sm);padding:var(--spacing-md) clamp(var(--spacing-base),2vw,var(--spacing-lg));position:fixed;top:var(--header-height);left:0;right:0;height:var(--topics-bar-height);z-index:var(--z-index-topics);overflow-x:auto;overflow-y:hidden;display:flex;align-items:center}.topics-bar{display:flex;flex-wrap:nowrap;gap:var(--gap-xs);align-items:center;justify-content:center;max-width:var(--container-max-width);margin:0 auto;min-width:max-content}.topic-button{background:var(--code-bg);border:var(--border-width-thin) solid var(--border);border-radius:var(--radius-xl);padding:var(--spacing-sm) var(--spacing-base);font-size:var(--font-size-sm);color:var(--text-secondary);transition:all var(--transition-fast) ease;font-weight:500;white-space:nowrap;flex-shrink:0}.topic-button:hover{background:var(--border);color:var(--text-primary);transform:translateY(var(--translate-hover))}.topic-button.active{background:var(--link-color);border-color:var(--link-color);color:#fff}.topic-button.active:hover{background:var(--link-color);opacity:var(--opacity-active)}.topics-container{scrollbar-width:none;-ms-overflow-style:none}.topics-container::-webkit-scrollbar{height:0;background:transparent}.topics-container:hover{scrollbar-width:thin}.topics-container:hover::-webkit-scrollbar{height:var(--scrollbar-width)}.topics-container:hover::-webkit-scrollbar-track{background:var(--code-bg);border-radius:var(--radius-sm)}.topics-container:hover::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-sm)}.topics-container:hover::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){.topics-container{transition:transform var(--transition-base) ease,opacity var(--transition-base) ease}.topics-container.topics-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}}.sidebar{position:fixed;left:var(--spacing-base);top:calc(var(--header-height) + var(--topics-bar-height) + var(--spacing-base));width:var(--sidebar-width);z-index:50}.sidebar-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:clamp(var(--spacing-base),1.5vw,var(--spacing-lg));box-shadow:var(--shadow-md);max-height:calc(100vh - var(--header-height) - var(--topics-bar-height) - var(--spacing-2xl));overflow-y:auto}.sidebar-card h2{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-base);color:var(--text-primary)}.blog-list{list-style:none}.blog-list-item{padding:var(--spacing-md);margin-bottom:var(--spacing-sm);border-radius:var(--radius-md);transition:all var(--transition-fast) ease;border-left:var(--border-width-medium) solid transparent}.blog-list-item:hover,.blog-list-item.active{background:var(--code-bg);border-left-color:var(--link-color)}.blog-list-item h3{font-size:var(--font-size-base);color:var(--text-primary);margin-bottom:var(--spacing-xs)}.blog-list-item .date{font-size:var(--font-size-xs);color:var(--text-muted)}.sidebar-card::-webkit-scrollbar{width:var(--scrollbar-width)}.sidebar-card::-webkit-scrollbar-track{background:var(--code-bg);border-radius:var(--radius-sm)}.sidebar-card::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-sm)}.sidebar-card::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.main-container{display:flex;margin:0;padding:var(--spacing-base) var(--spacing-base);padding-left:calc(var(--sidebar-width) + var(--spacing-xl));gap:var(--gap-sm)}.content{flex:1;min-width:0;max-width:100%}.blog-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-2xl) clamp(var(--spacing-base),2vw,var(--spacing-lg));box-shadow:var(--shadow-md)}.loading{text-align:center;padding:var(--spacing-2xl);color:var(--text-secondary);font-size:var(--font-size-xl)}.error{text-align:center;padding:var(--spacing-2xl);color:#e53e3e;font-size:var(--font-size-xl)}.blog-content{text-align:left;max-width:70ch;margin:0 auto}.blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4,.blog-content h5,.blog-content h6{scroll-margin-top:calc(var(--sidebar-top-offset) + var(--topics-bar-height))}.blog-content h1{font-size:var(--font-size-5xl);margin-bottom:var(--spacing-sm);color:var(--text-primary);text-align:left}.blog-content h2{font-size:var(--font-size-4xl);margin-top:var(--spacing-xl);margin-bottom:var(--spacing-base);color:var(--text-primary);text-align:left}.blog-content h3{font-size:var(--font-size-3xl);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-md);color:var(--text-primary);text-align:left}.blog-content p{margin-bottom:var(--spacing-lg);line-height:var(--line-height-base);color:var(--text-secondary);font-size:var(--font-size-lg);text-align:left}.blog-content a{color:var(--link-color);text-decoration:none;border-bottom:var(--border-width-base) solid var(--link-color)}.blog-content a:hover{opacity:var(--opacity-hover)}.blog-content code{background:var(--code-bg);padding:var(--code-padding-block) var(--code-padding-inline);border-radius:var(--radius-sm);font-family:Courier New,Courier,monospace;font-size:clamp(.85em,.95vw,.9em);color:var(--text-primary)}.blog-content blockquote{border-left:var(--border-width-thick) solid var(--link-color);padding-left:var(--spacing-lg);margin:var(--spacing-lg) 0;color:var(--text-muted);font-style:italic}.blog-content ul,.blog-content ol{margin-bottom:var(--spacing-lg);padding-left:var(--spacing-xl);color:var(--text-secondary)}.blog-content li{margin-bottom:var(--spacing-sm);line-height:var(--line-height-tight)}.blog-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:var(--spacing-lg) 0}.blog-content hr{border:none;border-top:var(--border-width-thin) solid var(--border);margin:var(--spacing-xl) 0}.blog-meta{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:var(--border-width-thin) solid var(--border);color:var(--text-muted);font-size:var(--font-size-base)}@media(max-width:768px){.main-container{flex-direction:column;padding:var(--spacing-lg) var(--spacing-base);padding-left:var(--spacing-base)}.sidebar{position:static;width:100%;left:auto;top:auto}.sidebar-card{max-height:var(--sidebar-mobile-max-height);overflow-y:auto}.blog-card{padding:var(--spacing-xl) clamp(var(--spacing-base),2vw,var(--spacing-lg))}}.blog-content pre{background:var(--code-bg);padding:var(--spacing-lg);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--spacing-lg);border:var(--border-width-base) solid var(--border);text-align:left;direction:ltr}.blog-content pre code{background:none;padding:0;text-align:left;display:block;white-space:pre}.blog-content pre code.hljs,.blog-content pre .hljs{text-align:left;direction:ltr}.blog-content .mermaid{background:transparent;padding:var(--spacing-lg);text-align:center;margin:var(--spacing-xl) 0;display:flex;justify-content:center;align-items:center}.blog-content .mermaid svg{max-width:100%;height:auto;background:transparent;text-align:center}.blog-content .mermaid svg .node rect,.blog-content .mermaid svg .node circle,.blog-content .mermaid svg .node ellipse,.blog-content .mermaid svg .node polygon,.blog-content .mermaid svg .node path,.blog-content .mermaid svg .node{fill:transparent!important}.blog-content .mermaid svg .node rect text,.blog-content .mermaid svg .node circle text,.blog-content .mermaid svg .node ellipse text,.blog-content .mermaid svg .node polygon text,.blog-content .mermaid svg .node path text,.blog-content .mermaid svg .node text{color:var(--text-primary)!important}html.dark-mode .blog-content .mermaid svg .node rect,html.dark-mode .blog-content .mermaid svg .node circle,html.dark-mode .blog-content .mermaid svg .node ellipse,html.dark-mode .blog-content .mermaid svg .node polygon,html.dark-mode .blog-content .mermaid svg .node path,html.dark-mode .blog-content .mermaid svg .node{fill:transparent!important}html.dark-mode .blog-content .mermaid svg .node rect text,html.dark-mode .blog-content .mermaid svg .node circle text,html.dark-mode .blog-content .mermaid svg .node ellipse text,html.dark-mode .blog-content .mermaid svg .node polygon text,html.dark-mode .blog-content .mermaid svg .node path text,html.dark-mode .blog-content .mermaid svg .node text{color:var(--text-primary)!important}.blog-content .mermaid svg .edgeLabel text,.blog-content .mermaid svg .edgeLabel p text{color:var(--text-primary)!important}html.dark-mode .blog-content .mermaid svg .edgeLabel p{background-color:transparent!important}html.dark-mode .blog-content .mermaid svg .nodeLabel p,html.dark-mode .blog-content .mermaid svg .nodeLabel{fill:transparent!important}html.dark-mode .blog-content .mermaid svg marker path{fill:var(--text-muted)!important;stroke:var(--text-muted)!important}html.dark-mode .blog-content .mermaid svg path,html.dark-mode .blog-content .mermaid svg line,html.dark-mode .blog-content .mermaid svg .edgePath path,html.dark-mode .blog-content .mermaid svg .flowchart-link{stroke:var(--text-muted)!important}.blog-content .mermaid svg .note rect,.blog-content .mermaid svg .note path{fill:var(--code-bg)!important;stroke:var(--border)!important}.blog-content .mermaid svg .noteText,.blog-content .mermaid svg .note text,.blog-content .mermaid svg .messageText{fill:var(--text-primary)!important}html.dark-mode .blog-content .mermaid svg .note rect,html.dark-mode .blog-content .mermaid svg .note path{fill:var(--code-bg)!important;stroke:var(--border)!important}html.dark-mode .blog-content .mermaid svg .noteText,html.dark-mode .blog-content .mermaid svg .note text{fill:var(--text-primary)!important}.blog-content .graphviz-container{background:transparent!important;padding:var(--spacing-lg);text-align:center;margin:var(--spacing-xl) 0;display:flex;justify-content:center;align-items:center;overflow-x:auto}.blog-content .graphviz-container svg{max-width:100%;height:auto;fill:transparent!important;background:transparent!important;text-align:center}.blog-content .graphviz-container svg>g{fill:transparent!important;background:transparent!important}.blog-content .graphviz-container svg>rect{fill:transparent!important;background:transparent!important}.blog-content .graphviz-container svg text{fill:var(--text-primary)!important}.blog-content .graphviz-container svg .node rect,.blog-content .graphviz-container svg .node circle,.blog-content .graphviz-container svg .node ellipse,.blog-content .graphviz-container svg .node polygon{fill:transparent!important;stroke:var(--text-muted)}.blog-content .graphviz-container svg .graph{fill:transparent!important;background:transparent!important}.blog-content .graphviz-container svg .edge path,.blog-content .graphviz-container svg .edge line{stroke:var(--text-muted)!important;fill:none}.blog-content .graphviz-container svg .edge polygon{fill:var(--text-muted)!important;stroke:var(--text-muted)!important}html.dark-mode .blog-content .graphviz-container svg,html.dark-mode .blog-content .graphviz-container svg>g{fill:transparent!important;background:transparent!important}html.dark-mode .blog-content .graphviz-container svg text{fill:var(--text-light-mode-primary)!important}html.dark-mode .blog-content .graphviz-container svg .node rect,html.dark-mode .blog-content .graphviz-container svg .node circle,html.dark-mode .blog-content .graphviz-container svg .node ellipse,html.dark-mode .blog-content .graphviz-container svg .node polygon{fill:transparent!important;stroke:var(--text-muted)}html.dark-mode .blog-content .graphviz-container svg .edge path,html.dark-mode .blog-content .graphviz-container svg .edge line{stroke:var(--text-muted)!important;fill:none}html.dark-mode .blog-content .graphviz-container svg .edge polygon{fill:var(--text-muted)!important;stroke:var(--text-muted)!important}.blog-content .graphviz-error{background:var(--code-bg);border:var(--border-width-base) solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-lg);margin:var(--spacing-xl) 0;color:var(--text-secondary);text-align:center}.ts-executable-block{margin:var(--spacing-xl) 0;border:var(--border-width-base) solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);overflow:hidden}.ts-code-display{position:relative;background:var(--code-bg);border-bottom:var(--border-width-base) solid var(--border)}.ts-code-display pre{margin:0;padding:var(--spacing-lg);overflow-x:auto;background:transparent}.ts-code-display code{background:transparent;padding:0;font-size:clamp(.85em,.95vw,.9em)}.ts-controls{padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-card);border-bottom:var(--border-width-base) solid var(--border);display:flex;align-items:center;gap:var(--spacing-md)}.ts-run-button{padding:var(--spacing-sm) var(--spacing-lg);background:var(--link-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:opacity var(--transition-base)}.ts-run-button:hover:not(:disabled){opacity:var(--opacity-hover)}.ts-run-button:disabled{opacity:.6;cursor:not-allowed}.ts-output-container{padding:var(--spacing-lg);background:var(--bg-card);border-top:var(--border-width-base) solid var(--border);min-height:2rem}.ts-output-content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.ts-output-item{padding:var(--spacing-sm);background:var(--code-bg);border-radius:var(--radius-sm);font-family:Courier New,Courier,monospace;font-size:var(--font-size-sm);white-space:pre-wrap;word-wrap:break-word;color:var(--text-primary)}.ts-output-item:empty{display:none}.ts-error{padding:var(--spacing-md);background:#e53e3e1a;border-left:var(--border-width-thick) solid #e53e3e;border-radius:var(--radius-sm);color:#e53e3e;font-family:Courier New,Courier,monospace;font-size:var(--font-size-sm);white-space:pre-wrap;word-wrap:break-word}.ts-diagnostics{padding:var(--spacing-md);background:#ffc1071a;border-left:var(--border-width-thick) solid #ffc107;border-radius:var(--radius-sm);color:var(--text-primary);margin-bottom:var(--spacing-md)}.ts-diagnostics strong{display:block;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.ts-diagnostics pre{margin:0;padding:0;background:transparent;font-family:Courier New,Courier,monospace;font-size:var(--font-size-sm);white-space:pre-wrap;word-wrap:break-word}