:root{--primary-green: #4F5E47;--light-green: #7A8C6F;--accent-green: #5A6B52;--pale-green: #f0f2ef;--dark-green: #3D4A38;--bg-white: #fefffe;--bg-gray: #fafbfa;--text-primary: #2f3532;--text-secondary: #5f6662;--border-color: #dfe3e0;--shadow-sm: 0 1px 3px rgba(61, 74, 56, .08);--shadow-md: 0 4px 6px rgba(61, 74, 56, .1);--shadow-lg: 0 10px 20px rgba(61, 74, 56, .12);--code-bg: #fafff7;--code-text: #eff2f0;--code-border: #c3e9d6;--radius: 8px;--radius-lg: 12px;--transition: all .2s cubic-bezier(.4, 0, .2, 1);--transition-fast: all .15s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--primary-green: #7A8C6F;--light-green: #8fa998;--accent-green: #5A6B52;--pale-green: #1d2521;--dark-green: #a8bfb0;--bg-white: #131815;--bg-gray: #1a1f1c;--text-primary: #dfe3e0;--text-secondary: #a8b5ad;--border-color: #3D4A38;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .5);--code-bg: #0f1412;--code-text: #dfe3e0;--code-border: #3D4A38}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif;background:var(--bg-white);color:var(--text-primary);line-height:1.6;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}.header{position:fixed;top:0;left:0;right:0;height:64px;background:var(--bg-white);border-bottom:1px solid var(--border-color);z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fefffef2;box-shadow:0 1px 3px #2d5a3d0d;transition:var(--transition)}[data-theme=dark] .header{background:#0d1711f2}.header-content{max-width:1440px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:12px;color:var(--primary-green);text-decoration:none;cursor:pointer}.logo-icon{width:36px;height:36px;display:block;transition:var(--transition)}.logo:hover .logo-icon{transform:rotate(-5deg) scale(1.05)}@keyframes logoPulse{0%,to{opacity:1}50%{opacity:.7}}.logo-icon.loading{animation:logoPulse 2s ease-in-out infinite}.logo h1{font-size:32px;font-weight:700;letter-spacing:-.5px}h1 .letter:nth-child(1){color:#8a9d7f}h1 .letter:nth-child(2){color:#6a7b62}h1 .letter:nth-child(3){color:#5f6e57}h1 .letter:nth-child(4){color:#4d5a48}.header-nav{display:flex;gap:8px;align-items:center}.nav-link{padding:8px 16px;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius);transition:var(--transition);font-size:14px;font-weight:500}.nav-link:hover{background:var(--pale-green);color:var(--primary-green)}.nav-link:has(svg){display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;aspect-ratio:1;padding:4px}.theme-toggle{--toggle-width: 50px;--toggle-height: 27px;--toggle-padding: 4px;--knob-size: calc(var(--toggle-height) - var(--toggle-padding) * 2);--knob-travel: calc(var(--toggle-width) - var(--knob-size) - var(--toggle-padding) * 2);position:relative;width:var(--toggle-width);height:var(--toggle-height);background:var(--pale-green);border:2px solid var(--border-color);border-radius:calc(var(--toggle-height) / 2);cursor:pointer;transition:var(--transition);display:flex;align-items:center;padding:0;overflow:hidden}.theme-toggle:hover{opacity:.8;border-color:var(--accent-green)}.theme-toggle .icon{position:absolute;width:14px;height:14px;color:var(--text-secondary);transition:var(--transition);pointer-events:none}.theme-toggle .moon{right:6px;opacity:0}.theme-toggle .sun{left:6px;opacity:0}[data-theme=dark] .theme-toggle .moon,[data-theme=light] .theme-toggle .sun{opacity:1}.toggle-knob{position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--primary-green);border-radius:50%;right:calc(var(--toggle-padding) / 2);transition:var(--transition);box-shadow:0 2px 4px #0003}[data-theme=dark] .toggle-knob{right:calc(var(--knob-travel) + var(--toggle-padding) / 2);background:var(--light-green)}.home-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:48px;text-align:center}.home-logo{width:120px;height:120px;margin-bottom:32px}.home-title{font-size:64px;font-weight:700;color:var(--primary-green);margin-bottom:16px;letter-spacing:-1px}.home-subtitle{font-size:24px;color:var(--text-secondary);margin-bottom:48px;max-width:600px}.home-buttons{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}.home-button{padding:16px 32px;font-size:18px;font-weight:600;border-radius:var(--radius-lg);text-decoration:none;transition:var(--transition);display:inline-block}.home-button.primary{background:var(--primary-green);color:#fff}.home-button.primary:hover{background:var(--light-green);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.home-button.secondary{background:var(--pale-green);color:var(--primary-green);border:2px solid var(--border-color)}.home-button.secondary:hover{background:var(--bg-gray);border-color:var(--accent-green);transform:translateY(-2px)}@media (max-width: 768px){.home-title{font-size:48px}.home-subtitle{font-size:18px}.home-buttons{flex-direction:column;width:100%;max-width:300px}.home-button{width:100%}}.container{margin-top:64px;display:flex;margin-left:auto;margin-right:auto;height:calc(100dvh - 64px);overflow:hidden}.sidebar{width:280px;background:var(--bg-gray);border-right:1px solid var(--border-color);padding:24px;position:relative;height:100%;overflow-y:auto;overflow-x:hidden;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--accent-green) var(--pale-green);transition:var(--transition)}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:var(--pale-green);border-radius:4px}.sidebar::-webkit-scrollbar-thumb{background:var(--accent-green);border-radius:4px;border:1px solid var(--pale-green)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--light-green)}.nav-section{margin-bottom:32px}.nav-section h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:12px;padding-left:8px}.nav-section ul{list-style:none}.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--text-primary);text-decoration:none;border-radius:var(--radius);transition:var(--transition);font-size:14px;margin-bottom:4px;position:relative;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.sidebar-link:active{transform:scale(.98);background:var(--pale-green)}.sidebar-link svg{width:18px;height:18px;color:var(--text-secondary);transition:var(--transition)}.sidebar-link:hover{background:var(--pale-green);transform:translate(2px)}.sidebar-link:hover svg{color:var(--light-green)}.sidebar-link.active{background:var(--pale-green);color:var(--primary-green);font-weight:500}.sidebar-link.active svg{color:var(--primary-green)}.sidebar-link.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--primary-green);border-radius:0 2px 2px 0}.header-list{list-style:none;margin-top:4px;padding-left:0;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}.sidebar-link.active+.header-list,.sidebar-link.has-headers.active~.header-list,li:has(.sidebar-link.active) .header-list{max-height:1000px}.header-list li{margin-bottom:0}.header-link{display:block;padding:6px 12px 6px 36px;color:var(--text-secondary);text-decoration:none;font-size:13px;border-radius:var(--radius);transition:var(--transition);position:relative;margin-bottom:2px}.header-list li.header-level-3 .header-link{padding-left:48px;font-size:12px}.header-link:hover{background:var(--pale-green);color:var(--primary-green);transform:translate(2px)}.header-link.active{color:var(--primary-green);font-weight:500;background:var(--pale-green)}.header-link.active:before{content:"";position:absolute;left:28px;top:50%;transform:translateY(-50%);width:4px;height:4px;background:var(--primary-green);border-radius:50%}.header-list li.header-level-3 .header-link.active:before{left:40px}.content{flex:1;padding:48px;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}html,body{height:100%;overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.content-wrapper{max-width:900px;margin:0 auto;opacity:1;transform:translateY(0);transition:opacity .15s ease,transform .15s ease}.content-wrapper.fade-out{opacity:0;transform:translateY(-5px);pointer-events:none}.content-wrapper.fade-in{animation:contentFadeIn .2s ease forwards}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.markdown-content{color:var(--text-primary);line-height:1.8;padding-bottom:80vh}.markdown-content h1{font-size:36px;font-weight:700;margin-bottom:24px;color:var(--primary-green);letter-spacing:-.5px;border-bottom:2px solid var(--border-color);padding-bottom:12px}.markdown-content h2{font-size:28px;font-weight:600;margin-top:40px;margin-bottom:20px;color:var(--primary-green);letter-spacing:-.3px}.markdown-content h3{font-size:20px;font-weight:600;margin-top:32px;margin-bottom:16px;color:var(--dark-green)}.markdown-content p{margin-bottom:16px;font-size:16px;line-height:1.8}.markdown-content ul,.markdown-content ol{margin-bottom:16px;padding-left:28px}.markdown-content li{margin-bottom:8px;font-size:16px}.markdown-content code{background:var(--pale-green);color:var(--dark-green);padding:2px 6px;border-radius:4px;font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:14px}.markdown-content pre{background:var(--code-bg)!important;transition:var(--transition);padding:20px;border-radius:var(--radius-lg);overflow-x:auto;margin:24px 0;box-shadow:var(--shadow-md);border:1px solid var(--code-border);position:relative}.markdown-content pre::-webkit-scrollbar{height:8px}.markdown-content pre::-webkit-scrollbar-track{margin:0 var(--radius-lg)}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--accent-green);border-radius:var(--radius-lg);border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:var(--light-green);border:2px solid transparent;background-clip:content-box}.markdown-content pre code{background:none;color:inherit;padding:0;font-size:14px;line-height:1.6}.markdown-content blockquote{border-left:4px solid var(--accent-green);padding-left:20px;margin:20px 0;color:var(--text-secondary);font-style:italic}.markdown-content table{width:100%;border-collapse:collapse;margin:24px 0;box-shadow:var(--shadow-sm);border-radius:var(--radius);overflow:hidden}.markdown-content th{background:var(--pale-green);color:var(--dark-green);padding:12px 16px;text-align:left;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.markdown-content td{padding:12px 16px;border-bottom:1px solid var(--border-color);font-size:15px}.markdown-content tr:last-child td{border-bottom:none}.markdown-content tr:hover{background:var(--bg-gray)}.markdown-content a{color:var(--light-green);text-decoration:none;border-bottom:1px solid transparent;transition:var(--transition)}.markdown-content a:hover{border-bottom-color:var(--light-green)}.markdown-content hr{border:none;height:1px;background:var(--border-color);margin:32px 0}.markdown-content strong{font-weight:600;color:var(--dark-green)}.markdown-content em{font-style:italic;color:var(--text-secondary)}.loading{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-secondary);opacity:0;animation:fadeIn .3s ease forwards}.loading svg{width:32px;height:32px;color:var(--accent-green);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.playground-wrapper{display:flex;flex-direction:column;height:100%}.playground-header{padding:16px 24px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;background:var(--bg-gray)}.playground-title{font-size:18px;font-weight:600;color:var(--primary-green);margin:0}.run-button{padding:6px;background:var(--primary-green);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;width:32px;height:32px}.run-button:hover{background:var(--light-green);transform:translateY(-1px);box-shadow:var(--shadow-md)}.run-button:active{transform:translateY(0)}.run-button:disabled{background:var(--text-secondary);cursor:not-allowed;transform:none}.playground-container{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;overflow:hidden}.playground-panel{display:flex;flex-direction:column;height:100%;border-right:1px solid var(--border-color)}.playground-panel:last-child{border-right:none}.playground-label{font-weight:600;padding:8px 16px;background:var(--pale-green);color:var(--dark-green);font-size:14px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;min-height:50px}#code-editor-container{flex:1;overflow:hidden}.playground-output{flex:1;padding:16px;background:var(--code-bg);font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-size:14px;white-space:pre-wrap;overflow-y:auto;line-height:1.6;color:var(--text-primary)}.output-error{color:#f48771}.output-success{color:#4ec9b0}.cm-editor{height:100%;font-size:14px}.cm-scroller{font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace}@media (max-width: 768px){.container{position:relative}.sidebar{position:fixed;top:64px;left:0;transform:translate(-100%);width:280px;height:calc(100dvh - 64px);transition:transform .3s ease;z-index:50;box-shadow:var(--shadow-lg)}.sidebar.open{transform:translate(0)}.content{padding:24px;width:100%}.header-nav .nav-link:has(svg){display:none}.sidebar.open:after{content:"";position:fixed;inset:64px 0 0 280px;background:#0000004d;z-index:-1}.playground-container{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.playground-panel{border-right:none;border-bottom:1px solid var(--border-color)}.playground-panel:last-child{border-bottom:none}}