:root{--ink: #1b1b22;--ink-soft: #4a4a55;--ink-faint: #6e6b78;--paper: #f6f5f1;--card: #ffffff;--line: #e7e4dd;--line-strong: #d7d3c9;--accent: #5b5bd6;--accent-soft: #ecebfb;--accent-ink: #3a36b8;--sidebar: #17171f;--sidebar-soft: #23232f;--sidebar-line: #2c2c3a;--sidebar-text: #d9d8e4;--sidebar-faint: #93919f;--ok: #1f9d57;--warn: #a14a23;--radius: 12px;--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, monospace;--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{display:grid;grid-template-columns:264px 1fr;height:100vh;overflow:hidden}.editor-item:focus-visible,.btn:focus-visible,.head-docs:focus-visible,.mobile-select:focus-visible,.embed-btn:focus-visible,.demo-btn:focus-visible,.embed-build-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sidebar{background:var(--sidebar);color:var(--sidebar-text);display:flex;flex-direction:column;padding:22px 16px 14px;border-right:1px solid var(--sidebar-line);overflow-y:auto}.brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:650;letter-spacing:-.01em;color:#fff}.brand-mark{color:var(--accent);font-size:16px;transform:translateY(-1px)}.brand-sub{margin:6px 2px 18px;font-size:11.5px;color:var(--sidebar-faint);letter-spacing:.01em}.editor-list{display:flex;flex-direction:column;gap:3px;flex:1}.editor-item{text-align:left;width:100%;border:1px solid transparent;background:transparent;color:var(--sidebar-text);padding:9px 11px;border-radius:9px;cursor:pointer;display:flex;flex-direction:column;gap:2px;font-family:inherit;transition:background .14s ease,border-color .14s ease}.editor-item:hover{background:var(--sidebar-soft)}.editor-item.active{background:var(--sidebar-soft);border-color:var(--sidebar-line)}.editor-item.active .editor-item-name{color:#fff}.editor-item-name{font-size:13.5px;font-weight:580;display:flex;align-items:center;gap:7px}.editor-item.active .editor-item-name:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #5b5bd638}.editor-item:not(.active) .editor-item-name:before{content:"";width:5px;height:5px;border-radius:50%;background:#3a3a48}.editor-item-base{font-size:11px;color:var(--sidebar-faint);padding-left:12px}.sidebar-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--sidebar-line);font-size:11px;color:var(--sidebar-faint);font-family:var(--mono)}.stage{display:flex;flex-direction:column;overflow:hidden}.stage-head{padding:22px 30px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fdfdfb,var(--paper))}.head-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.head-title{margin:0;font-size:22px;font-weight:680;letter-spacing:-.02em}.badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);letter-spacing:.01em}.badge-base{background:#efece4;color:var(--ink-soft)}.head-docs{margin-left:auto;font-size:12.5px;color:var(--accent-ink);text-decoration:none;font-weight:550;border:1px solid var(--line-strong);padding:5px 11px;border-radius:8px;background:#fff;transition:border-color .14s ease}.head-docs:hover{border-color:var(--accent)}.head-tagline{margin:9px 0 0;color:var(--ink-soft);font-size:14px;max-width:70ch;line-height:1.5}.chips{margin-top:13px;display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:11.5px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);padding:3px 9px;border-radius:7px}.panels{flex:1;display:grid;grid-template-columns:1fr 400px;gap:18px;padding:18px 30px 26px;overflow:hidden;min-height:0}.right-col{display:flex;flex-direction:column;gap:18px;min-height:0}.panel-output{flex:1 1 auto;min-height:0}.panel-notes{flex:0 0 auto}.notes-area{width:100%;height:118px;box-sizing:border-box;border:0;resize:none;outline:none;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink);background:#fff;padding:12px 14px}.notes-area:focus{outline:2px solid var(--accent);outline-offset:-2px}.notes-area::placeholder{color:var(--ink-faint)}.panel{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:0}.panel-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);background:#fbfbf9;flex-shrink:0}.panel-label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}.panel-label em{font-style:normal;color:var(--accent-ink);text-transform:none;letter-spacing:0}.panel-meta{font-size:11.5px;color:var(--ink-faint);font-family:var(--mono)}.panel-actions{display:flex;align-items:center;gap:10px}.char-count{font-size:11px;color:var(--ink-faint);font-family:var(--mono)}.btn{font-family:inherit;font-size:11.5px;font-weight:550;color:var(--ink-soft);background:#fff;border:1px solid var(--line-strong);padding:4px 10px;border-radius:7px;cursor:pointer;transition:all .14s ease}.btn:hover{border-color:var(--accent);color:var(--accent-ink)}.btn.copied{color:var(--ok);border-color:var(--ok)}.btn:disabled{opacity:.4;cursor:default}.btn:disabled:hover{border-color:var(--line-strong);color:var(--ink-soft)}.editor-host{flex:1;overflow:auto;padding:6px;min-height:0}.editor-host [contenteditable]:focus{outline:none}.output{flex:1;margin:0;overflow:auto;padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.6;color:#2a2a33;white-space:pre-wrap;word-break:break-word;background:#fcfcfa;min-height:0}.output code{font-family:inherit}.host-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:240px;gap:10px;color:var(--ink-faint);text-align:center;padding:30px}.host-state .spinner{width:22px;height:22px;border:2.5px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}.host-state.error{color:var(--warn)}.host-state.error pre{font-family:var(--mono);font-size:11.5px;text-align:left;background:#fbf1ec;border:1px solid #f0d6c8;border-radius:8px;padding:12px 14px;max-width:100%;overflow:auto;white-space:pre-wrap;color:#a14a23}@keyframes spin{to{transform:rotate(360deg)}}.mobile-bar{display:none;align-items:center;gap:10px;padding:10px 16px;background:var(--sidebar);color:#fff;border-bottom:1px solid var(--sidebar-line)}.mobile-bar .brand-mark{color:var(--accent);font-size:15px}.mobile-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sidebar-faint)}.mobile-select{flex:1;font-family:inherit;font-size:13px;padding:8px 10px;border-radius:8px;border:1px solid var(--sidebar-line);background:var(--sidebar-soft);color:#fff}@media(max-width:1100px){.panels{grid-template-columns:1fr;grid-template-rows:auto;overflow:auto}.right-col{flex-direction:column}.panel-editor{min-height:52vh}.panel-output{min-height:30vh}}@media(max-width:820px){#app{grid-template-columns:1fr}.sidebar{display:none}.mobile-bar{display:flex}.stage-head{padding:16px 18px 14px}.panels{padding:14px 16px 20px}}.demo-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:4px 4px 12px}.demo-btn{font-family:inherit;font-size:12px;padding:5px 10px;border:1px solid var(--line-strong);background:#fff;border-radius:7px;cursor:pointer;color:var(--ink-soft);transition:all .12s ease}.demo-btn:hover{border-color:var(--accent);color:var(--accent-ink)}.demo-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.demo-surface{border:1px solid var(--line);border-radius:8px;padding:14px 16px;min-height:240px;margin:0 4px 4px;outline:none;background:#fff;line-height:1.6}.demo-surface:focus,.demo-surface:focus-within{border-color:var(--accent)}.ProseMirror,.tiptap{min-height:260px;padding:14px 16px;outline:none;line-height:1.6}.ProseMirror:focus,.tiptap:focus{outline:none}.ProseMirror ul,.tiptap ul,.demo-surface ul{list-style:disc;padding-left:1.5em}.ProseMirror ol,.tiptap ol,.demo-surface ol{list-style:decimal;padding-left:1.5em}.ProseMirror p,.tiptap p{margin:.5em 0}.ProseMirror-menubar{border-top-left-radius:8px;border-top-right-radius:8px}.embed-node{border:1px solid var(--line);border-radius:10px;background:#fcfcfa;margin:12px 0;overflow:hidden}.embed-node.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.embed-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--line);background:#fff}.embed-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}.embed-btn{font-family:inherit;font-size:11.5px;font-weight:550;color:var(--ink-soft);background:#fff;border:1px solid var(--line-strong);padding:3px 10px;border-radius:7px;cursor:pointer}.embed-btn:hover{border-color:var(--accent);color:var(--accent-ink)}.embed-preview{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px 12px;min-height:80px}.embed-preview svg{max-width:100%;height:auto}.embed-preview>div{width:100%}.embed-preview.embed-error{align-items:flex-start;font-family:var(--mono);font-size:12px;color:var(--warn);white-space:pre-wrap}.embed-empty{font-size:12.5px;color:var(--ink-faint)}.embed-source{display:block;width:100%;box-sizing:border-box;min-height:150px;border:0;border-top:1px solid var(--line);outline:none;resize:vertical;padding:12px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink);background:#fff}.embed-actions{display:flex;gap:6px}.embed-source:focus,.embed-build-csvbox:focus{outline:2px solid var(--accent);outline-offset:-2px}.embed-kroki{max-width:100%;height:auto}.embed-build{border-bottom:1px solid var(--line);background:#fbfbf9;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.embed-build-row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft)}.embed-build-select{font-family:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;color:var(--ink)}.embed-build-csv{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--line-strong)}.embed-build-csvbox{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;border:1px solid var(--line-strong);border-radius:7px;outline:none;padding:8px 10px;font-family:var(--mono);font-size:12px;line-height:1.45;color:var(--ink);background:#fff}.embed-build-csv .embed-btn{align-self:flex-start}.editor-host h1{font-size:1.7em}.editor-host h2{font-size:1.4em}.editor-host h3{font-size:1.2em}.editor-host blockquote{border-left:3px solid var(--line-strong);margin-left:0;padding-left:14px;color:var(--ink-soft)}.editor-host pre{background:#f3f2ee;border-radius:8px;padding:10px 12px;overflow:auto}.editor-host code{font-family:var(--mono)}