:root{--bg-color:#fffff8;--text-color:#111;--link-color:#0066cc;--code-bg:#f5f5f5;--border-color:#ddd;--button-bg:#f0f0f0;--button-hover-bg:#e0e0e0;--shadow-color:rgba(0, 0, 0, 0.1)}[data-theme=dark]{--bg-color:#1a1a1a;--text-color:#e0e0e0;--link-color:#66b3ff;--code-bg:#2d2d2d;--border-color:#444;--button-bg:#333;--button-hover-bg:#555;--shadow-color:rgba(255, 255, 255, 0.1)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-color:#1a1a1a;--text-color:#e0e0e0;--link-color:#66b3ff;--code-bg:#2d2d2d;--border-color:#444;--button-bg:#333;--button-hover-bg:#555;--shadow-color:rgba(255, 255, 255, 0.1)}}body{background-color:var(--bg-color);color:var(--text-color);margin-top:50px;transition:background-color .3s ease,color .3s ease}a{color:var(--link-color)}pre,code{background-color:var(--code-bg)}.top-controls{position:fixed;top:20px;right:20px;z-index:1000}.btn-group{display:inline-flex;background:var(--button-bg);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;box-shadow:0 2px 4px var(--shadow-color)}.btn{padding:8px 16px;font-size:14px;cursor:pointer;color:var(--text-color);background:0 0;border:none;border-right:1px solid var(--border-color);text-decoration:none;transition:background-color .2s;font-family:inherit;display:flex;align-items:center;gap:8px;white-space:nowrap}.btn:last-child{border-right:none}.btn:hover{background:var(--button-hover-bg)}.site-logo{width:24px;height:24px;margin-right:8px;position:absolute;top:10px;left:10px}.split-container{display:flex;gap:20px;height:calc(100vh - 100px);margin-top:20px}.article-pane{flex:1;overflow-y:auto;padding-right:20px}.example-pane{flex:1;position:sticky;top:20px;height:calc(100vh - 100px)}.example-pane iframe{width:100%;height:100%;border:1px solid var(--border-color);border-radius:4px;background:#fff}@media(max-width:768px){.split-container{flex-direction:column;height:auto}.article-pane{padding-right:0}.example-pane{position:relative;height:500px;top:0}}