:root{--accent:#007da5;--text-main:var(--ink);--text-muted:var(--muted);--bg-base:var(--surface)}.editor-intro:before{background-image:url('code-art-v1.png');inset:-8px -15px -25px 7%;background-size:100% auto;background-position:center;opacity:.48}[data-theme=dark] .editor-intro:before{opacity:.19}.editor-icon{background:linear-gradient(140deg,#b1adcc,#777297)}#snippetNote{margin-right:auto;font-size:12px;color:var(--muted)}.code-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid var(--line);border-radius:10px;overflow:hidden;scroll-margin-top:105px}.editor-pane{min-width:0;background:var(--wash)}.settings-pane{border-left:1px solid var(--line);min-width:0;background:var(--surface)}.pane-heading{min-height:56px;border-bottom:1px solid var(--line);padding:18px 22px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;gap:10px;background:var(--surface)}.pane-heading small{font-size:10px;font-weight:400;color:var(--muted)}.canvas-stage-wrapper{overflow:auto;max-width:100%;padding:24px;min-height:450px}.snippet-card{padding:48px;background:linear-gradient(135deg,#00d2ff,#3a7bd5);border-radius:10px;width:max-content;min-width:100%}.window-container{width:640px;min-width:640px;border-radius:10px;overflow:hidden;background:#1e1e1e;box-shadow:0 14px 30px #0004}.window-header{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:10px 18px;background:#252526;color:#d4d4d4;font:13px/1.5 Segoe UI,Arial,sans-serif}.window-controls{display:flex;gap:8px;align-items:center;color:#a1a1aa;min-width:60px}.window-spacer{width:60px}.dot{width:12px;height:12px;border-radius:50%}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.window-title{outline:none;min-width:30px;text-align:center;overflow-wrap:anywhere}.code-body-wrapper{display:flex;padding:22px 24px;background:#1e1e1e;align-items:flex-start;gap:18px}.line-numbers{font:14px/1.65 Consolas,monospace;color:#71717a;text-align:right;padding-right:14px;border-right:1px solid #ffffff14;user-select:none}.code-input-area{font:14px/1.65 Consolas,monospace;color:#e4e4e7;background:transparent;border:0;resize:none;outline:none;white-space:pre;overflow:auto;tab-size:4;min-width:0;flex:1;padding:0;margin:0;border-radius:0;box-shadow:none}.controls-content{padding:24px;display:flex;flex-direction:column;gap:28px}.panel-section{display:flex;flex-direction:column;gap:20px}.section-label{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.form-group{display:flex;flex-direction:column;gap:12px}.field-label{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.palette-btn{height:34px;min-height:34px;border-radius:5px;padding:0}.palette-btn.active{outline:2px solid var(--ink);outline-offset:2px}.custom-input,.custom-select{width:100%;min-width:0;font-size:12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px}input[type=range]{width:100%;accent-color:#777297}#codeExportStatus,.editor-note{font-size:12px;line-height:1.8;color:var(--muted);padding:0 24px;margin:0 0 18px}button{cursor:pointer;box-shadow:none}.site-header .theme-choice{width:78px;max-width:78px;margin:0;padding:10px 9px;font-size:11px;flex:none}@media(max-width:800px){.code-workspace{grid-template-columns:1fr}.settings-pane{border-left:0;border-top:1px solid var(--line)}.canvas-stage-wrapper{padding:18px;min-height:300px}#snippetNote{width:100%}.editor-intro:before{opacity:.28;background-size:auto 100%}}
.form-group:has(#lineNumbersToggle){flex-direction:row}.window-title{font-family:Segoe UI,Arial,sans-serif}