.demo-note:has(.demo-doku-editor) { background: transparent; padding: 0; border: 0; }
.demo-doku-editor { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--bg-surface); }
.demo-doku-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.demo-doku-toolbar button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); }
.demo-doku-toolbar button:hover, .demo-doku-toolbar [aria-pressed=true] { background: var(--primary-light); color: var(--primary); }
.demo-doku-toolbar svg { width: 15px; height: 15px; }
.demo-doku-toolbar > span { width: 1px; height: 18px; margin: 0 5px; background: var(--border-color); }
.demo-doku-content { min-height: 240px; max-height: 390px; overflow-y: auto; padding: 12px; line-height: 1.6; font-size: 13px; overflow-wrap: anywhere; }
.demo-doku-content:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.demo-doku-content p, .demo-doku-history p { margin: 0 0 10px; }
.demo-doku-content ul, .demo-doku-content ol, .demo-doku-history ul, .demo-doku-history ol { padding-left: 22px; margin: 0 0 10px; }
.demo-doku-sketch { margin: 10px 12px; }
.demo-doku-sketch img { display: block; width: 100%; max-width: 560px; height: auto; border: 1px solid #e2dfd5; border-radius: 6px; background: #fffdf6; }
.demo-doku-sketch figcaption { margin-top: 4px; font-size: 11px; color: var(--text-secondary); }