@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fira+Code&display=swap";body>footer{text-align:center;opacity:.75;border-top:1px solid color-mix(in srgb, currentColor 20%, transparent);padding:24px;font-size:.85rem}body>footer a{color:inherit}:root{--ad-slot-width:160px}@media (width<=1200px){aside.ad{display:none}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-color:#f8fafc;--text-color:#0f172a;--text-secondary:#475569;--panel-bg:#fff;--border-color:#e2e8f0;--accent-color:#059669;--accent-gradient:linear-gradient(135deg, #059669, #0284c7);--checker-color:#e2e8f0;--code-bg:#f1f5f9;--header-bg:#ffffffd9;--accent-soft:#05966914;--accent-soft-hover:#05966929;--accent-border:#05966959;--gutter-bg:#f8fafc;--gutter-text:#94a3b8;--active-line-bg:#0f172a08;--active-gutter-bg:#0f172a0d;--active-gutter-text:#0f172a;--btn-secondary-bg:#fff;--btn-secondary-text:#334155;--btn-secondary-border:#cbd5e1;--btn-secondary-hover:#f1f5f9}html.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-color:#0b0f19;--text-color:#f3f4f6;--text-secondary:#9ca3af;--panel-bg:#111827;--border-color:#1f2937;--accent-color:#34d399;--accent-gradient:linear-gradient(135deg, #34d399, #38bdf8);--checker-color:#1f2937;--code-bg:#1f2937;--header-bg:#111827d9;--accent-soft:#34d3991f;--accent-soft-hover:#34d39933;--accent-border:#34d39959;--gutter-bg:#111827;--gutter-text:#6b7280;--active-line-bg:#94a3b80f;--active-gutter-bg:#94a3b81a;--active-gutter-text:#e5e7eb;--btn-secondary-bg:#1f2937;--btn-secondary-text:#e5e7eb;--btn-secondary-border:#374151;--btn-secondary-hover:#2d3748}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{background-color:var(--bg-color);color:var(--text-color);flex-direction:column;min-height:100vh;display:flex}header{background:var(--header-bg);border-bottom:1px solid var(--border-color);z-index:10;justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex;position:sticky;top:0}.header-spacer,.header-actions{flex:1}.header-actions{justify-content:flex-end;gap:.6rem;display:flex}header h1{letter-spacing:-.5px;background:var(--accent-gradient);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;font-size:1.75rem;font-weight:600}main{grid-template-columns:var(--ad-slot-width) minmax(0, 1500px) var(--ad-slot-width);flex:1;justify-content:center;gap:2rem;padding:2rem;display:grid}@media (width<=1200px){main{grid-template-columns:minmax(0,1500px)}}main>section{flex-direction:row;gap:2rem;display:flex}@media (width<=800px){main>section{flex-direction:column}}.panel{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:16px;flex-direction:column;flex:1;display:flex;overflow:hidden}#canvas{background-image:linear-gradient(45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-color) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;justify-content:center;align-items:center;padding:2rem;display:flex}#canvas svg{max-width:100%;max-height:100%}.cm-editor{flex:1;height:100%}.cm-scroller{font-family:Fira Code,monospace;font-size:.95rem}.cm-gutters{background-color:var(--gutter-bg)!important;border-right:1px solid var(--border-color)!important;color:var(--gutter-text)!important}.cm-activeLineGutter{background-color:var(--active-gutter-bg)!important;color:var(--active-gutter-text)!important}.cm-activeLine{background-color:var(--active-line-bg)!important}.primary-btn{background:var(--accent-soft);color:var(--accent-color);border:1px solid var(--accent-border);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;display:flex}.primary-btn:hover{background:var(--accent-soft-hover)}.icon-btn{cursor:pointer;background-color:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:1px solid var(--btn-secondary-border);border-radius:8px;justify-content:center;align-items:center;padding:.6rem;display:inline-flex}.icon-btn:hover{background-color:var(--btn-secondary-hover)}.icon-btn svg{display:block}html:not(.dark) #theme-toggle-btn .sun-icon,html.dark #theme-toggle-btn .moon-icon{display:none}.app-viewport{flex-direction:column;min-height:100vh;display:flex}.page-content{max-width:760px;color:var(--text-secondary);flex-direction:column;gap:1.75rem;margin:0 auto;padding:1.5rem 1.5rem 4rem;font-size:.95rem;line-height:1.7;display:flex}.page-content h2{color:var(--text-color);border-bottom:1px solid var(--border-color);margin-bottom:.6rem;padding-bottom:.4rem;font-size:1.15rem}.page-content ul{padding-left:1.25rem}.page-content li{margin-bottom:.4rem}.page-content p{margin-bottom:.6rem}.page-content strong{color:var(--text-color)}.page-content code{background-color:var(--code-bg);border:1px solid var(--border-color);border-radius:4px;padding:.1em .4em;font-size:.9em}