:root{--primary-bg: #0d1117;--secondary-bg: #161b22;--tertiary-bg: #21262d;--accent-color: #58a6ff;--accent-hover: #79c0ff;--text-primary: #e6edf3;--text-secondary: #8b949e;--border-color: #30363d;--code-bg: #161b22;--success-color: #3fb950;--warning-color: #d29922;--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-code: "JetBrains Mono", "Courier New", monospace;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--sidebar-width: 280px}body{font-family:var(--font-main);background-color:var(--primary-bg);color:var(--text-primary);line-height:1.6;overflow-x:hidden}.container{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background-color:var(--secondary-bg);border-right:1px solid var(--border-color);padding:var(--spacing-lg);display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto}.logo{margin-bottom:var(--spacing-xl);text-align:center}.logo-icon{font-family:var(--font-code);font-size:3rem;color:var(--accent-color);background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;margin-bottom:var(--spacing-sm)}.logo h1{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.25rem}.nav-menu{list-style:none;flex-grow:1}.nav-menu li{margin-bottom:var(--spacing-xs)}.nav-link{display:flex;align-items:center;padding:var(--spacing-sm);border-radius:8px;text-decoration:none;color:var(--text-secondary);transition:all .2s ease;font-weight:500}.nav-link:hover{background-color:var(--tertiary-bg);color:var(--text-primary)}.nav-link.active{background-color:var(--accent-color);color:#fff}.nav-icon{font-size:1.25rem;margin-right:var(--spacing-sm)}.nav-text{font-size:.95rem}.sidebar-footer{margin-top:auto;padding-top:var(--spacing-lg);text-align:center;color:var(--text-secondary);font-size:.85rem;border-top:1px solid var(--border-color)}.main-content{margin-left:var(--sidebar-width);flex:1;padding:var(--spacing-xl);max-width:1200px}#content-area{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h1{font-size:2.5rem;font-weight:700;margin-bottom:var(--spacing-md);color:var(--text-primary)}h2{font-size:2rem;font-weight:600;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md);color:var(--text-primary);border-bottom:2px solid var(--border-color);padding-bottom:var(--spacing-sm)}h3{font-size:1.5rem;font-weight:600;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm);color:var(--text-primary)}p{margin-bottom:var(--spacing-md);color:var(--text-secondary);font-size:1rem;line-height:1.7}ul,ol{margin-left:var(--spacing-lg);margin-bottom:var(--spacing-md);color:var(--text-secondary)}li{margin-bottom:var(--spacing-xs)}strong{color:var(--text-primary);font-weight:600}.code-container{position:relative;margin:var(--spacing-lg) 0}.code-header{display:flex;justify-content:space-between;align-items:center;background-color:var(--tertiary-bg);padding:var(--spacing-sm) var(--spacing-md);border-radius:8px 8px 0 0;border:1px solid var(--border-color);border-bottom:none}.code-title{font-family:var(--font-code);font-size:.9rem;color:var(--text-primary);font-weight:500}.copy-button{background-color:var(--accent-color);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-family:var(--font-main);font-size:.85rem;font-weight:500;transition:all .2s ease}.copy-button:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.copy-button:active{transform:translateY(0)}.copy-button.copied{background-color:var(--success-color)}pre{margin:0;padding:var(--spacing-md);background-color:var(--code-bg);border:1px solid var(--border-color);border-radius:0 0 8px 8px;overflow-x:auto;max-height:600px;overflow-y:auto}pre code{font-family:var(--font-code);font-size:.9rem;line-height:1.6;color:var(--text-primary)}pre code.hljs{background-color:transparent;padding:0}.hljs{background-color:var(--code-bg)}code{font-family:var(--font-code);background-color:var(--tertiary-bg);padding:.2rem .4rem;border-radius:4px;font-size:.9em;color:var(--accent-color)}pre code{background-color:transparent;padding:0}.intro-section{background:linear-gradient(135deg,var(--secondary-bg),var(--tertiary-bg));border:1px solid var(--border-color);border-radius:12px;padding:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md);margin:var(--spacing-lg) 0}.feature-card{background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:8px;padding:var(--spacing-md);transition:all .2s ease}.feature-card:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 12px #58a6ff1a}.feature-icon{font-size:2rem;margin-bottom:var(--spacing-sm)}.feature-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.feature-description{color:var(--text-secondary);font-size:.9rem;margin:0}.badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-size:.8rem;font-weight:500;margin-right:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.badge-primary{background-color:var(--accent-color);color:#fff}.badge-success{background-color:var(--success-color);color:#fff}.badge-warning{background-color:var(--warning-color);color:#fff}.alert{padding:var(--spacing-md);border-radius:8px;margin:var(--spacing-md) 0;border-left:4px solid}.alert-info{background-color:#58a6ff1a;border-color:var(--accent-color);color:var(--text-primary)}.alert-success{background-color:#3fb9501a;border-color:var(--success-color);color:var(--text-primary)}.alert-warning{background-color:#d299221a;border-color:var(--warning-color);color:var(--text-primary)}@media (max-width: 768px){:root{--sidebar-width: 70px}.sidebar{width:var(--sidebar-width);padding:var(--spacing-sm)}.logo h1,.nav-text,.sidebar-footer p{display:none}.logo-icon{font-size:2rem;margin-bottom:0}.nav-link{justify-content:center;padding:var(--spacing-sm)}.nav-icon{margin-right:0}.main-content{margin-left:var(--sidebar-width);padding:var(--spacing-md)}h1{font-size:2rem}h2{font-size:1.5rem}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--secondary-bg)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.code-diff-container{margin:var(--spacing-lg) 0}.code-diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.code-diff-column{min-width:0}.code-diff-pre{margin:0;padding:var(--spacing-md);background-color:var(--code-bg);border:1px solid var(--border-color);border-radius:0 0 8px 8px;overflow-x:auto;max-height:600px;overflow-y:auto}.code-diff-pre code{font-family:var(--font-code);font-size:.9rem;line-height:1.6;color:var(--text-primary);display:block}.code-line{display:block;white-space:pre;min-height:1.6em}.code-line.diff-removed{background-color:#ff646426;border-left:3px solid rgba(255,100,100,.6);padding:0 .5rem}.code-line.diff-added{background-color:#64ff6426;border-left:3px solid rgba(100,255,100,.6);padding:0 .5rem}@media (max-width: 768px){.code-diff-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#79c0ff}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-comment,.hljs-code,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}.game-demo-container{margin:2rem 0;border:2px solid #444;border-radius:8px;overflow:hidden;background:#1a1a1a}.game-demo-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#2a2a2a;border-bottom:1px solid #444}.game-demo-header h3{margin:0;color:#ffc107;font-size:1.2rem}.reset-button{padding:.5rem 1rem;background:#444;color:#e9ecef;border:1px solid #666;border-radius:4px;cursor:pointer;font-family:Courier New,monospace;transition:background .2s}.reset-button:hover{background:#555}.game-demo{position:relative;padding:1.5rem;background:#000;font-family:Courier New,monospace;font-size:16px;line-height:1;cursor:pointer;outline:none}.game-demo.focused{background:#0a0a0a;box-shadow:inset 0 0 10px #ffc1074d}.game-screen{margin-bottom:1rem}.game-row{height:20px;white-space:nowrap}.game-cell{display:inline-block;width:13px;text-align:center;font-weight:700}.game-info{padding:1rem;background:#1a1a1a;border-top:1px solid #333;color:#e9ecef;font-size:14px;line-height:1.6}.game-message{color:#17a2b8;font-weight:700;margin-top:.5rem}.game-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;color:#ffc107;font-size:1.2rem;font-weight:700;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.cave-prompt{text-align:center;padding:2rem;background:#000000e6;border:2px solid #17a2b8;border-radius:8px;font-size:1rem;line-height:1.5}.cave-prompt p{margin:0}.game-instructions{padding:1rem 1.5rem;background:#2a2a2a;border-top:1px solid #444;color:#adb5bd;font-size:.9rem;line-height:1.5}.game-instructions strong{color:#e9ecef}@media (max-width: 768px){.game-cell{width:10px;font-size:14px}.game-row{height:18px}}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:JetBrains Mono,Courier New,monospace}