:root{--accent:#2563eb;--bg:#f8fafc;--fg:#0f172a;--line:#e2e8f0;--muted:#64748b}*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,sans-serif}button{font:inherit;border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 14px;cursor:pointer}button:hover{border-color:var(--accent);color:var(--accent)}input,textarea{font:inherit;border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%}.center-card{max-width:380px;margin:14vh auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:12px}.center-card form{display:flex;gap:8px}.page{max-width:760px;margin:0 auto;padding:28px 20px}.page header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.demo-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.demo-list li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:flex;gap:12px;align-items:center;cursor:pointer}.demo-list li:hover{border-color:var(--accent)}.demo-list .empty{cursor:default;color:var(--muted)}.badge{font-size:12px;border-radius:999px;padding:2px 10px;background:#f1f5f9;color:var(--muted)}.badge.published{background:#dcfce7;color:#166534}.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;margin-bottom:12px}.editor{display:grid;grid-template-columns:240px 1fr;height:100vh}.editor aside{background:#fff;border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.editor aside h2{font-size:16px}.editor main{padding:20px;overflow-y:auto}.steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}.steps li{border:1px solid var(--line);border-radius:6px;padding:8px 10px;display:flex;justify-content:space-between;cursor:pointer}.steps li.active{border-color:var(--accent);background:#eff6ff}.steps .x{border:none;padding:0 6px;color:var(--muted)}.upload{border:1px dashed var(--line);border-radius:6px;padding:10px;text-align:center;cursor:pointer;color:var(--muted)}.upload:hover{border-color:var(--accent);color:var(--accent)}.publish{background:var(--accent);color:#fff;border-color:var(--accent)}.publish:hover{color:#fff;opacity:.9}.share{font-size:13px;text-align:center}.canvas-wrap{max-width:1000px}.hint{color:var(--muted);font-size:13px;margin-bottom:10px}.canvas{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;-webkit-user-select:none;user-select:none}.canvas img{display:block;width:100%}.dom-note{padding:60px;color:var(--muted);text-align:center}.hotspot{position:absolute;border:2px solid var(--accent);background:#2563eb1a;border-radius:4px;pointer-events:none}.ann{display:flex;flex-direction:column;gap:8px;margin-top:12px}.ann .row{display:flex;gap:8px}.ghost{color:var(--muted)}.mini{display:flex;gap:2px}.mini .x[disabled]{opacity:.3;cursor:default}.gate{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}.gate input{width:auto}.spacer{flex:1}.hotspot.branch{border-style:dashed;background:#2563eb0d}.hotspot.branch.pending{border-color:#d97706}.mode-row{display:flex;gap:14px;align-items:center;margin-bottom:8px;font-size:13px;color:var(--muted)}.mode-row input{width:auto}.branch-form{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}.branch-form input,.branch-form select{width:auto;flex:1;min-width:120px}.branch-list,.chapter-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:4px;font-size:13px}.branch-list li,.chapter-list li{display:flex;justify-content:space-between;align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:6px;padding:5px 10px}.panel{border:1px solid var(--line);border-radius:6px;padding:8px 10px}.panel summary{cursor:pointer;font-size:13px;color:var(--muted)}.chapter-add{display:flex;flex-direction:column;gap:6px;margin-top:8px}