/* /demo — compose → mint → talk, live. Uses the site's global tokens (--accent/--ink/--paper…) +
   a few realm hues (shared with /compose). Everything namespaced dm-. Theme-aware. */
.dm-wrap{
  /* self-contained tokens — the site does NOT expose these as global custom properties
     (main.css only defines --primary/--secondary; accents are hardcoded hex), so define them here. */
  --accent:#c96442; --accent-deep:#a04d2f; --ink:#1c1712; --body:#4c453b; --muted:#8c8375;
  --rule:#e4dece; --card:#fffdf9; --paper:#faf8f3;
  --cm-coding:#c96442; --cm-home:#3f7d9a; --cm-self:#4f6f9a; --cm-hobby:#c99a3f; --cm-world:#2f7d72; --cm-ref:#8a5a8f;
  --dm-good:#2f7d72; --dm-warn:#b57634;
  --dm-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 70px; line-height:1.55;
}
@media (prefers-color-scheme:dark){.dm-wrap{--accent:#e08159;--accent-deep:#e8926c;--ink:#f2ede2;--body:#b6ac9c;--muted:#847a6a;--rule:#2d2820;--card:#201b14;--paper:#16130e;--cm-home:#6cb2d0;--cm-self:#7f9fce;--cm-hobby:#e0b95f;--cm-world:#4fb0a0;--cm-ref:#b98cbe;--cm-coding:#e08159;--dm-good:#4fb0a0;--dm-warn:#d19a5b;}}
:root[data-theme="dark"] .dm-wrap{--accent:#e08159;--accent-deep:#e8926c;--ink:#f2ede2;--body:#b6ac9c;--muted:#847a6a;--rule:#2d2820;--card:#201b14;--paper:#16130e;--cm-home:#6cb2d0;--cm-self:#7f9fce;--cm-hobby:#e0b95f;--cm-world:#4fb0a0;--cm-ref:#b98cbe;--cm-coding:#e08159;--dm-good:#4fb0a0;--dm-warn:#d19a5b;}
:root[data-theme="light"] .dm-wrap{--accent:#c96442;--accent-deep:#a04d2f;--ink:#1c1712;--body:#4c453b;--muted:#8c8375;--rule:#e4dece;--card:#fffdf9;--paper:#faf8f3;--cm-home:#3f7d9a;--cm-self:#4f6f9a;--cm-hobby:#c99a3f;--cm-world:#2f7d72;--cm-ref:#8a5a8f;--cm-coding:#c96442;--dm-good:#2f7d72;--dm-warn:#b57634;}
.dm-wrap *{box-sizing:border-box;}

.dm-eyebrow{font-family:var(--dm-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:10px;margin:0 0 14px;}
.dm-eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);}
.dm-wrap h1{font-weight:800;letter-spacing:-.02em;text-wrap:balance;font-size:clamp(27px,4.4vw,44px);line-height:1.05;margin:0 0 13px;color:var(--ink);}
.dm-wrap h1 em{font-style:normal;color:var(--accent);}
.dm-lede{font-size:clamp(15px,1.5vw,17.5px);color:var(--body);max-width:64ch;margin:0;}
.dm-lede strong{color:var(--ink);font-weight:650;}

.dm-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 4px;}
.dm-presets .lbl{font-family:var(--dm-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:2px;}
.dm-preset{font-family:var(--dm-mono);font-size:12px;padding:7px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--body);cursor:pointer;transition:all .14s;}
.dm-preset:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-1px);}

.dm-board{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;margin-top:22px;align-items:start;}
@media (max-width:900px){.dm-board{grid-template-columns:1fr;}}

.dm-catalog{display:flex;flex-direction:column;gap:15px;}
.dm-realm{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:14px 15px 13px;box-shadow:0 1px 2px rgba(60,45,25,.05);}
.dm-realm .rh{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.dm-realm .rh .sw{width:11px;height:11px;border-radius:3px;flex:none;}
.dm-realm .rh .rn{font-family:var(--dm-mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink);}
.dm-realm .rh .rp{margin-left:auto;font-family:var(--dm-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.dm-pkrow{display:flex;flex-wrap:wrap;gap:7px;}
.dm-pk{font-size:12.5px;padding:6px 12px 6px 9px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .13s;font:inherit;user-select:none;}
.dm-pk .bx{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--muted);flex:none;display:grid;place-items:center;font-size:10px;color:transparent;transition:all .13s;}
.dm-pk .ct{font-family:var(--dm-mono);font-size:10px;color:var(--muted);}
.dm-pk:hover{border-color:var(--pick,var(--accent));}
.dm-pk[aria-pressed="true"]{border-color:var(--pick,var(--accent));background:color-mix(in srgb,var(--pick,var(--accent)) 13%,var(--card));}
.dm-pk[aria-pressed="true"] .bx{background:var(--pick,var(--accent));border-color:var(--pick,var(--accent));color:#fff;}
.dm-pk[aria-pressed="true"] .ct{color:var(--ink);}

.dm-panel{position:sticky;top:18px;background:var(--card);border:1px solid var(--rule);border-radius:18px;box-shadow:0 1px 2px rgba(60,45,25,.06),0 12px 34px rgba(80,55,25,.08);overflow:hidden;}
.dm-phead{background:var(--accent);color:#fff;padding:15px 18px;}
.dm-phead .t{font-family:var(--dm-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.9;}
.dm-phead .big{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:2px;}
.dm-phead .big small{font-size:14px;font-weight:600;opacity:.9;}
.dm-pbody{padding:16px 18px 18px;}
.dm-kv{display:flex;align-items:baseline;gap:8px;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--rule);}
.dm-kv .k{font-family:var(--dm-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:none;width:70px;}
.dm-kv .v{color:var(--ink);}
.dm-kv .v.g{color:var(--dm-good);font-weight:600;}
.dm-pill{font-family:var(--dm-mono);font-size:10px;padding:1px 8px;border-radius:999px;margin:0 3px 3px 0;display:inline-block;background:color-mix(in srgb,var(--dm-good) 12%,var(--card));color:var(--dm-good);border:1px solid color-mix(in srgb,var(--dm-good) 28%,transparent);}
.dm-pill.miss{background:color-mix(in srgb,var(--dm-warn) 12%,var(--card));color:var(--dm-warn);border-color:color-mix(in srgb,var(--dm-warn) 30%,transparent);}
.dm-empty{color:var(--muted);font-style:italic;font-size:12.5px;}
.dm-pipe{margin:13px 0 0;display:flex;flex-wrap:wrap;gap:6px;}
.dm-stg{font-family:var(--dm-mono);font-size:10.5px;padding:5px 9px;border-radius:7px;border:1px dashed var(--rule);color:var(--muted);transition:all .2s;}
.dm-stg.run{border-style:solid;border-color:var(--accent);color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 8%,var(--card));}
.dm-stg.ok{border-style:solid;border-color:var(--dm-good);color:var(--dm-good);background:color-mix(in srgb,var(--dm-good) 8%,var(--card));}
.dm-btn{width:100%;margin-top:14px;border:none;border-radius:11px;padding:12px 15px;font:inherit;font-weight:650;font-size:14.5px;cursor:pointer;transition:all .14s;}
.dm-btn.primary{background:var(--accent);color:#fff;}
.dm-btn.primary:hover{background:var(--accent-deep);}

/* mode toggle */
.dm-modes{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:4px;margin:24px 0 2px;}
.dm-mode{font-family:var(--dm-mono);font-size:12.5px;padding:8px 16px;border:none;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:all .14s;}
.dm-mode.on{background:var(--accent);color:#fff;}
.dm-mode:not(.on):hover{color:var(--accent-deep);}

/* document import */
.dm-doc{margin-top:20px;max-width:760px;}
.dm-drop{border:2px dashed var(--rule);border-radius:16px;padding:26px 20px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5;cursor:pointer;transition:all .15s;background:var(--card);}
.dm-drop small{opacity:.8;font-size:12px;}
.dm-drop:hover,.dm-drop.over{border-color:var(--accent);color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 6%,var(--card));}
.dm-drop b{color:var(--ink);}
.dm-doctext{width:100%;margin-top:12px;min-height:150px;resize:vertical;font:inherit;font-size:14px;line-height:1.55;padding:14px 16px;border:1px solid var(--rule);border-radius:14px;background:var(--card);color:var(--ink);outline:none;transition:border-color .14s;}
.dm-doctext:focus{border-color:var(--accent);}
.dm-docmeta{font-family:var(--dm-mono);font-size:11.5px;color:var(--muted);margin:8px 2px 0;min-height:16px;}
.dm-doc .dm-btn{max-width:300px;margin-top:14px;}

/* runner */
.dm-runner{margin-top:34px;border-top:1px solid var(--rule);padding-top:26px;}
.dm-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.dm-rname{font-family:var(--dm-mono);font-size:16px;font-weight:600;color:var(--ink);}
.dm-rname::before{content:"▸ ";color:var(--accent);}
.dm-rpacks{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;}
.dm-off{font-family:var(--dm-mono);font-size:11px;color:var(--dm-good);margin:6px 0 14px;display:inline-flex;gap:6px;align-items:center;}
.dm-chat{display:flex;flex-direction:column;gap:13px;padding:6px 0;min-height:120px;}
.dm-msg{max-width:82%;}
.dm-msg.u{align-self:flex-end;}
.dm-msg .bub{padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.5;}
.dm-msg.u .bub{background:var(--accent);color:#fff;border-bottom-right-radius:5px;}
.dm-msg.a .bub{background:var(--card);border:1px solid var(--rule);color:var(--ink);border-bottom-left-radius:5px;}
.dm-msg.a.abstain .bub{background:color-mix(in srgb,var(--dm-warn) 8%,var(--card));border-color:color-mix(in srgb,var(--dm-warn) 26%,transparent);}
.dm-cite{font-family:var(--dm-mono);font-size:10.5px;color:var(--muted);margin-top:6px;}
.dm-cite b{color:var(--dm-good);}
.dm-cite.ab b{color:var(--dm-warn);}
.dm-mono{font-family:var(--dm-mono);}
.dm-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 14px;}
.dm-sg{font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--body);cursor:pointer;transition:all .13s;}
.dm-sg:hover{border-color:var(--accent);color:var(--accent-deep);}
.dm-sg.trap{border-style:dashed;}
.dm-composer{display:flex;gap:9px;}
.dm-composer input{flex:1;font:inherit;font-size:15px;padding:12px 15px;border:1px solid var(--rule);border-radius:13px;background:var(--card);color:var(--ink);outline:none;transition:border-color .14s;}
.dm-composer input:focus{border-color:var(--accent);}
.dm-composer button{border:none;background:var(--accent);color:#fff;font:inherit;font-weight:650;padding:0 20px;border-radius:13px;cursor:pointer;transition:background .14s;}
.dm-composer button:hover{background:var(--accent-deep);}

.dm-foot{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);color:var(--muted);font-size:13px;max-width:74ch;}
.dm-foot strong{color:var(--body);}
.dm-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:11px;font-family:var(--dm-mono);font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:all .25s;z-index:99;max-width:calc(100vw - 32px);text-align:center;}
.dm-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion:reduce){.dm-wrap *{transition:none!important;}}