/* PROTOTYPE — Obsidian window demo for Variant A. Pie panel uses the UI v2 tokens (--pa-*, on .a-root);
   Obsidian chrome is the Border theme (dark) as captured in sketches/012-chat-redesign-full/_snapshot. */
.a-root .a-copy--demo { inset: 0; background: var(--pa-canvas); display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 40px; align-items: center; padding: 84px 40px 40px 56px; }
.a-root .dm-side h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: -.03em; margin: 10px 0 8px; color: var(--pa-ink); font-weight: 700; }
.a-root .dm-side .dm-note { font-size: var(--pa-fs-sm); color: var(--pa-ink-3); margin: 0 0 22px; }
.a-root .dm-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.a-root .dm-step { position: relative; padding: 9px 10px 9px 26px; border-radius: var(--pa-r-s); cursor: pointer; transition: background var(--pa-dur-1) var(--pa-ease); pointer-events: auto; }
.a-root .dm-step:hover { background: var(--pa-tint-1); }
.a-root .dm-step::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: var(--pa-line); }
.a-root .dm-step:first-child::before { top: 18px; } .a-root .dm-step:last-child::before { bottom: calc(100% - 18px); }
.a-root .dm-step::after { content: ""; position: absolute; left: 8px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--pa-ink-3); box-shadow: 0 0 0 3px var(--pa-canvas); }
.a-root .dm-step.on::after { background: var(--pa-st-running); animation: pa-sonar 1.2s var(--pa-ease) infinite; }
.a-root .dm-step b { display: flex; align-items: center; gap: 8px; font-size: var(--pa-fs-md); font-weight: 500; color: var(--pa-ink-2); }
.a-root .dm-step.on b { color: var(--pa-ink); font-weight: 600; }
.a-root .dm-step b em { font: 600 10px var(--pa-font-mono); font-style: normal; padding: 1px 6px; border-radius: var(--pa-r-xs); background: var(--pa-tint-2); color: var(--pa-ink-3); }
.a-root .dm-step b em.pro { background: color-mix(in oklch, var(--pa-st-attention) 16%, transparent); color: var(--pa-st-attention); }
.a-root .dm-step p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: var(--pa-fs); line-height: 1.5; color: var(--pa-ink-2); transition: max-height var(--pa-dur-3) var(--pa-ease), opacity var(--pa-dur-3) var(--pa-ease), margin var(--pa-dur-3); }
.a-root .dm-step.on p { max-height: 90px; opacity: 1; margin-top: 4px; }
.a-root .dm-replay { margin-top: 16px; pointer-events: auto; cursor: pointer; }

.a-root .dm-stage { position: relative; height: 100%; min-width: 0; }
/* the window is laid out at its authored size, out of flow, then scaled to the stage (fitDemo) */
.a-root .dm-win { --win-w: 1240px; --win-h: 740px; width: var(--win-w); height: var(--win-h); position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--k, 1));
  background: #262e2f; border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in oklch, var(--pa-ink) 14%, transparent);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5); font: var(--pa-fs)/1.5 var(--pa-font-ui); color: var(--pa-ink); pointer-events: auto; text-align: left; }
.a-root .dm-ic { width: 16px; height: 16px; flex: none; display: block; }

/* chrome */
.a-root .dm-titlebar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12px; color: var(--pa-ink-3); border-bottom: 1px solid var(--pa-line); }
.a-root .dm-titlebar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .a-root .dm-titlebar i:nth-child(2) { background: #febc2e; } .a-root .dm-titlebar i:nth-child(3) { background: #28c840; }
.a-root .dm-titlebar span { margin: 0 auto; transform: translateX(-30px); }
.a-root .dm-body { display: grid; grid-template-columns: 44px 232px minmax(0, 1fr) 390px; height: calc(100% - 34px); }
.a-root .dm-ribbon { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 14px; color: var(--pa-ink-3); border-right: 1px solid var(--pa-line); }
.a-root .dm-explorer { background: var(--pa-canvas); border-right: 1px solid var(--pa-line); padding: 8px 6px; overflow: hidden; }
.a-root .dm-exh { display: flex; gap: 14px; justify-content: center; color: var(--pa-ink-3); padding: 4px 0 12px; }
.a-root .dm-tr { display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px calc(6px + var(--d) * 14px); border-radius: var(--pa-r-xs); color: var(--pa-ink-2); font-size: 13px; white-space: nowrap; }
.a-root .dm-tr span { overflow: hidden; text-overflow: ellipsis; }
.a-root .dm-tr .car { width: 12px; height: 12px; flex: none; color: var(--pa-ink-3); }
.a-root .dm-tr.on { background: var(--pa-tint-3); color: var(--pa-ink); }
.a-root .dm-tr.new { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transition: all var(--pa-dur-3) var(--pa-ease); }
.a-root .dm-tr.new.on { opacity: 1; max-height: 30px; padding-top: 3px; padding-bottom: 3px; }
.a-root .dm-tr em { margin-left: auto; font: 600 9.5px var(--pa-font-ui); font-style: normal; padding: 1px 5px; border-radius: var(--pa-r-xs); background: color-mix(in oklch, var(--pa-st-done) 18%, transparent); color: var(--pa-st-done); }

.a-root .dm-editor { background: var(--pa-canvas); display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--pa-line); }
.a-root .dm-tabs { display: flex; gap: 2px; padding: 6px 8px 0; background: #262e2f; border-bottom: 1px solid var(--pa-line); }
.a-root .dm-tabs span { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12.5px; color: var(--pa-ink-3); border-radius: 8px 8px 0 0; max-width: 220px; }
.a-root .dm-tabs span .dm-ic { width: 12px; height: 12px; }
.a-root .dm-tabs span.on { background: var(--pa-canvas); color: var(--pa-ink); }
.a-root .dm-tabs span.add { padding: 6px 8px; }
.a-root .dm-crumb { font-size: 12px; color: var(--pa-ink-3); padding: 10px 36px 0; }
.a-root .dm-doc-wrap { flex: 1; overflow: hidden; padding: 18px 36px; position: relative; }
.a-root .dm-doc { max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--pa-ink-2); position: relative; }
.a-root .dm-doc h1 { font-size: 28px; line-height: 1.2; color: var(--pa-ink); margin: 0 0 14px; letter-spacing: -.01em; }
.a-root .dm-doc h2 { font-size: 18px; color: var(--pa-ink); margin: 22px 0 6px; padding-left: 10px; border-left: 3px solid var(--pa-st-attention); line-height: 1.3; }
.a-root .dm-doc p, .a-root .dm-doc ul, .a-root .dm-doc ol { margin: 0 0 8px; }
.a-root .dm-doc ul, .a-root .dm-doc ol { padding-left: 20px; }
.a-root .dm-doc b { color: var(--pa-ink); }
.a-root .dm-doc code { font: 13px var(--pa-font-mono); background: var(--pa-tint-2); padding: 1px 5px; border-radius: 4px; }
.a-root .dm-doc sup { color: var(--pa-link); font-size: 11px; }
.a-root .dm-props { display: grid; gap: 2px; margin: 0 0 14px; padding: 6px 0 10px; border-bottom: 1px solid var(--pa-line); font-size: 13px; }
.a-root .dm-props div { display: grid; grid-template-columns: 110px 1fr; }
.a-root .dm-props span { color: var(--pa-ink-3); } .a-root .dm-props b { font-weight: 400; color: var(--pa-link); }
.a-root .dm-wl { color: var(--pa-link); text-decoration: none; }
.a-root .dm-mut { color: var(--pa-ink-3); }
.a-root .dm-src { list-style: none; padding: 0 !important; font-size: 13.5px; }
.a-root .dm-src li { display: flex; gap: 10px; padding: 3px 0; } .a-root .dm-src li b { font: 600 11px var(--pa-font-mono); color: var(--pa-st-done); width: 14px; }
.a-root .dm-src li.x { color: var(--pa-ink-3); text-decoration: line-through; } .a-root .dm-src li.x b { color: var(--pa-st-error); text-decoration: none; }
.a-root .dm-empty { height: 380px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--pa-ink-3); }
.a-root .dm-empty .dm-ic { width: 28px; height: 28px; }
.a-root .dm-swap { transition: opacity var(--pa-dur-3) var(--pa-ease); }
.a-root .dm-swap.b { position: absolute; inset: 0; opacity: 0; }
.a-root .dm-swap.b.on { opacity: 1; } .a-root .dm-swap.a:has(+ .dm-swap.b.on) { opacity: 0; }
.a-root .dm-hl { transition: background var(--pa-dur-3); border-radius: 3px; } .a-root .dm-hl.on { background: var(--pa-sel, rgba(40,150,164,.4)); color: var(--pa-ink); }
.a-root .dm-sel { transition: background var(--pa-dur-2); } .a-root .dm-sel.on { background: rgba(40,150,164,.4); color: var(--pa-ink); }
.a-root .dm-del.on { background: color-mix(in oklch, var(--pa-st-error) 13%, transparent); text-decoration: line-through; display: none; }
.a-root .dm-add { display: none; } .a-root .dm-add.on { display: inline; background: color-mix(in oklch, var(--pa-st-done) 15%, transparent); color: var(--pa-ink); }

/* editor popup (012 · 9) */
.a-root .dm-pop { position: absolute; left: -6px; right: -20px; top: 150px; padding: 10px; border-radius: var(--pa-r-m); background: var(--pa-float-bg); border: 1px solid var(--pa-line); box-shadow: var(--pa-shadow-float); font-size: 14px;
  opacity: 0; transform: translateY(6px) scale(.985); transition: opacity var(--pa-dur-2) var(--pa-ease), transform var(--pa-dur-2) var(--pa-ease); }
.a-root .dm-pop.on { opacity: 1; transform: none; }
.a-root .dm-pop .seg { display: flex; gap: 2px; align-items: center; margin-bottom: 8px; }
.a-root .dm-pop .seg span { padding: 4px 10px; border-radius: var(--pa-r-xs); color: var(--pa-ink-2); font-size: 13px; } .a-root .dm-pop .seg span.on { background: var(--pa-tint-3); color: var(--pa-ink); }
.a-root .dm-pop .seg .dm-ic { margin-left: auto; color: var(--pa-ink-3); }
.a-root .dm-pop .in { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--pa-r-s); background: var(--pa-tint-2); color: var(--pa-ink); }
.a-root .dm-pop .in .dm-ic { color: var(--pa-ink-3); } .a-root .dm-pop .in span { flex: 1; min-height: 1.5em; }
.a-root .dm-pop .in b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--pa-r-s); background: var(--pa-accent); color: #fff; }
.a-root .dm-pop .out { margin: 10px 2px 0 !important; color: var(--pa-ink); opacity: 0; transition: opacity var(--pa-dur-3); } .a-root .dm-pop .out.on { opacity: 1; }
.a-root .dm-pop s { color: var(--pa-ink-3); } .a-root .dm-pop ins { text-decoration: none; background: color-mix(in oklch, var(--pa-st-done) 15%, transparent); color: var(--pa-st-done); }
.a-root .dm-pop .ft { display: flex; gap: 14px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--pa-ink-2); opacity: 0; transition: opacity var(--pa-dur-3); }
.a-root .dm-pop .ft.on { opacity: 1; } .a-root .dm-pop .ft span:not(.pa-btn) { display: flex; gap: 6px; align-items: center; } .a-root .dm-pop .ft i { flex: 1; }

/* Pie panel (012) */
.a-root .dm-pane { background: var(--pa-canvas); display: flex; flex-direction: column; min-width: 0; }
.a-root .dm-ph { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-bottom: 1px solid var(--pa-line); color: var(--pa-ink-3); }
.a-root .dm-ph i { flex: 1; }
.a-root .dm-ptab { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pa-r-s); background: var(--pa-tint-2); color: var(--pa-ink); font-size: var(--pa-fs-sm); max-width: 200px; white-space: nowrap; }
.a-root .dm-ptab .dm-ic { width: 12px; height: 12px; color: var(--pa-ink-3); }
.a-root .dm-pt { flex: 1; overflow: hidden; padding: 16px 14px 8px; display: flex; flex-direction: column; }
.a-root .dm-pt [data-at]:not(.pa-row2) { opacity: 0; transform: translateY(6px); transition: opacity var(--pa-dur-2) var(--pa-ease), transform var(--pa-dur-2) var(--pa-ease); }
.a-root .dm-pt [data-at].on { opacity: 1; transform: none; }
.a-root .dm-pt .gone { display: none; }
.a-root .dm-u { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0 0 18px; }
.a-root .dm-ub { max-width: 86%; padding: 8px 12px; background: var(--pa-accent-tint); border-radius: var(--pa-r-m); font-size: var(--pa-fs-md); color: var(--pa-ink); }
.a-root .dm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--pa-r-xs); background: var(--pa-tint-2); color: var(--pa-ink-2); font-size: var(--pa-fs-xs); }
.a-root .dm-chip .dm-ic { width: 12px; height: 12px; }
.a-root .dm-bh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--pa-fs); }
.a-root .dm-bh b { font-weight: 600; } .a-root .dm-bh > span:last-child { color: var(--pa-ink-3); font-size: var(--pa-fs-sm); }
.a-root .dm-think { font-size: var(--pa-fs-sm); margin: 0 0 6px; }
.a-root .dm-pt .pa-rail { margin: 0 0 10px; }
.a-root .dm-pt .pa-row2 { font-size: 12px; }
.a-root .dm-ans { font-size: var(--pa-fs-md); line-height: 1.6; color: var(--pa-ink); }
.a-root .dm-ans p { margin: 0 0 8px; } .a-root .dm-ans .dm-gap { color: var(--pa-ink-2); }
.a-root .dm-ans h4 { font-size: var(--pa-fs-xs); color: var(--pa-ink-3); margin: 10px 0 4px; font-weight: 600; }
.a-root .dm-ans ul { margin: 0; padding-left: 18px; font-size: var(--pa-fs); color: var(--pa-ink-2); } .a-root .dm-ans li { margin-bottom: 3px; }
.a-root .dm-files { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--pa-fs-sm); color: var(--pa-ink-2); }
.a-root .dm-files .dm-ic { width: 14px; height: 14px; }
.a-root .p { font-style: normal; color: var(--pa-st-done); } .a-root .m { font-style: normal; color: var(--pa-st-error); }
.a-root .dm-next { font-size: var(--pa-fs-xs); color: var(--pa-ink-3); margin: 6px 0 0 !important; }
.a-root .dm-diff { border: 1px solid var(--pa-line); border-radius: var(--pa-r-m); overflow: hidden; margin: 2px 0 10px; }
.a-root .dm-diff .hd { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font: 12px var(--pa-font-mono); color: var(--pa-ink-2); background: var(--pa-tint-1); }
.a-root .dm-diff .hd .dm-ic { width: 13px; height: 13px; } .a-root .dm-diff .hd em:first-of-type { margin-left: auto; }
.a-root .dm-diff pre { margin: 0; padding: 6px 0; font: 11.5px/1.6 var(--pa-font-mono); white-space: pre-wrap; }
.a-root .dm-diff pre span { display: block; padding: 0 10px; }
.a-root .dm-diff pre .m { background: color-mix(in oklch, var(--pa-st-error) 13%, transparent); color: var(--pa-ink); }
.a-root .dm-diff pre .p { background: color-mix(in oklch, var(--pa-st-done) 15%, transparent); color: var(--pa-ink); }
.a-root .dm-ok { display: flex; align-items: center; gap: 6px; font-size: var(--pa-fs-sm); color: var(--pa-st-done); }
.a-root .dm-ok .dm-ic { width: 14px; height: 14px; }
.a-root .dm-bg { border: 1px solid var(--pa-line); border-radius: var(--pa-r-m); padding: 8px 10px; margin: 0 0 10px; font-size: var(--pa-fs-sm); }
.a-root .dm-bg p { margin: 0 0 4px; color: var(--pa-ink-3); }
.a-root .dm-bg div { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--pa-ink); }
.a-root .dm-bg .pa-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pa-st-running); animation: pa-breathe 1.6s ease-in-out infinite; }
.a-root .dm-bg small { margin-left: auto; color: var(--pa-ink-3); font-family: var(--pa-font-mono); }
.a-root .dm-tick { font-style: normal; font-size: 10px; color: var(--pa-st-done); }
.a-root .dm-bg div:has(.dm-tick.on) .pa-dot { background: var(--pa-st-done); animation: none; }
@keyframes pa-breathe { 50% { opacity: .35; } }
.a-root .dm-mh { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: var(--pa-fs-xs); color: var(--pa-ink-3); margin-bottom: 10px; }
.a-root .dm-mh .dm-ic, .a-root .dm-scan .dm-ic { width: 13px; height: 13px; }
.a-root .dm-scan { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--pa-r-s); background: var(--pa-tint-1); font-size: var(--pa-fs-sm); margin-bottom: 12px; }
.a-root .dm-scan em { margin-left: auto; font: var(--pa-fs-xs) var(--pa-font-mono); font-style: normal; color: var(--pa-ink-3); }
.a-root .dm-home .dm-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--pa-r-s); background: var(--pa-tint-2); margin-bottom: 12px; }
.a-root .dm-home .dm-seg span { flex: 1; text-align: center; padding: 4px 0; font-size: var(--pa-fs-xs); color: var(--pa-ink-2); border-radius: var(--pa-r-xs); }
.a-root .dm-home .dm-seg span.on { background: var(--pa-canvas); color: var(--pa-ink); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.a-root .dm-cap { font-size: var(--pa-fs-xs); color: var(--pa-ink-3); margin: 6px 0 8px; }
.a-root .dm-rel { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--pa-r-s); }
.a-root .dm-rel:hover { background: var(--pa-tint-2); }
.a-root .dm-rel .dm-ic { width: 15px; height: 15px; color: var(--pa-ink-3); }
.a-root .dm-rel span { flex: 1; min-width: 0; font-size: var(--pa-fs); } .a-root .dm-rel small { display: block; font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); }
.a-root .dm-rel i { width: 42px; height: 3px; border-radius: 99px; background: var(--pa-tint-3); position: relative; overflow: hidden; }
.a-root .dm-rel i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--pa-st-running); border-radius: inherit; }
.a-root .dm-proj h3 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.02em; }
.a-root .dm-proj .lead { font-size: 15px; line-height: 1.6; color: var(--pa-ink-2); margin: 0 0 14px; }
.a-root .dm-proj .lead b { color: var(--pa-ink); } .a-root .dm-proj .r { color: var(--pa-st-error); } .a-root .dm-proj .o { color: var(--pa-st-attention); }
.a-root .dm-proj .cta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: var(--pa-fs-xs); }
.a-root .dm-proj .acc { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--pa-line); font-size: var(--pa-fs); }
.a-root .dm-proj .acc em { font: var(--pa-fs-xs) var(--pa-font-mono); font-style: normal; color: var(--pa-ink-3); }
.a-root .dm-proj .acc span { margin-left: auto; color: var(--pa-ink-3); font-size: var(--pa-fs-xs); } .a-root .dm-proj .acc .dm-ic { width: 13px; height: 13px; color: var(--pa-ink-3); }

.a-root .dm-pc { padding: 8px 10px; }
.a-root .dm-comp { border: 1px solid var(--pa-line); background: var(--pa-tint-1); border-radius: var(--pa-r-m); padding: 8px 10px; }
.a-root .dm-comp p { margin: 6px 0 10px; color: var(--pa-ink-3); font-size: var(--pa-fs-md); }
.a-root .dm-cbar { display: flex; align-items: center; gap: 12px; color: var(--pa-ink-3); }
.a-root .dm-cbar i { flex: 1; }
.a-root .dm-model { display: flex; align-items: center; gap: 4px; font-size: var(--pa-fs-xs); color: var(--pa-ink-2); } .a-root .dm-model .dm-ic { width: 11px; height: 11px; }
.a-root .dm-cbar b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--pa-r-s); background: var(--pa-accent); color: #fff; }
.a-root .dm-cbar b .dm-ic { width: 14px; height: 14px; }
.a-root .dm-ask { border: 1px solid var(--pa-accent-line, rgba(40,150,164,.5)); background: var(--pa-accent-tint); border-radius: var(--pa-r-m); padding: 10px 12px; margin-bottom: 8px; font-size: var(--pa-fs);
  opacity: 0; transform: translateY(8px); transition: opacity var(--pa-dur-2) var(--pa-ease), transform var(--pa-dur-2) var(--pa-ease); }
.a-root .dm-ask.on { opacity: 1; transform: none; } .a-root .dm-ask.gone { display: none; }
.a-root .dm-ask p { margin: 0 0 8px; } .a-root .dm-ask label { display: flex; align-items: center; gap: 8px; color: var(--pa-ink-2); font-size: var(--pa-fs-sm); }
.a-root .dm-ask label i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--pa-ink-3); }
.a-root .dm-ask div { display: flex; justify-content: flex-end; gap: 8px; margin-top: -22px; }
.a-root .dm-press.pressed { transform: scale(.94); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pa-accent) 40%, transparent); }
.a-root .dm-pf { display: flex; align-items: center; gap: 12px; padding: 6px 12px 8px; font-size: var(--pa-fs-xs); color: var(--pa-ink-3); }
.a-root .dm-pf span { display: flex; align-items: center; gap: 5px; } .a-root .dm-pf .dm-ic { width: 12px; height: 12px; }
.a-root .dm-meter { margin-left: auto; width: 42px; height: 3px; border-radius: 99px; background: var(--pa-tint-3); } .a-root .dm-meter b { display: block; height: 100%; width: 8%; border-radius: inherit; background: var(--pa-st-running); transition: width 2s var(--pa-ease); }

@media (max-width: 860px) {
  .a-root .a-copy--demo { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 72px 12px 76px; }
  .a-root .dm-side { min-width: 0; overflow: hidden; }
  .a-root .dm-stage { flex: 1; min-height: 0; height: auto; }
  .a-root .dm-side h2, .a-root .dm-side .dm-note, .a-root .dm-side .a-kicker, .a-root .dm-replay { display: none; }
  .a-root .dm-steps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .a-root .dm-step { flex: none; padding: 6px 10px; background: var(--pa-tint-1); }
  .a-root .dm-step::before, .a-root .dm-step::after, .a-root .dm-step p { display: none; }
  .a-root .dm-step.on { background: var(--pa-accent-tint); }
  .a-root .dm-step b { font-size: var(--pa-fs-sm); white-space: nowrap; }
  .a-root .dm-win { --win-w: 400px; --win-h: 720px; }
  .a-root .dm-win .dm-body { grid-template-columns: 1fr; }
  .a-root .dm-win .dm-ribbon, .a-root .dm-win .dm-explorer, .a-root .dm-win .dm-editor { display: none; }
}

/* Live voice (styles.css .pie-live-*) */
.a-root .dm-win.is-voice .dm-pt { padding: 0; }
.a-root .dm-voice { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 16px 16px;
  background: radial-gradient(120% 70% at 50% 38%, color-mix(in srgb, var(--pa-accent) 16%, var(--pa-canvas)) 0%, var(--pa-canvas) 62%); }
.a-root .dm-vhead { align-self: stretch; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font: 10px var(--pa-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-ink-2); }
.a-root .dm-vpill { display: flex; gap: 5px; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--pa-line); background: var(--pa-tint-2); letter-spacing: .04em; }
.a-root .dm-vpill i { width: 6px; height: 6px; border-radius: 50%; background: var(--pa-st-error); box-shadow: 0 0 8px var(--pa-st-error); animation: pa-breathe 1.4s infinite; }
.a-root .dm-vpill b { font-weight: 400; color: var(--pa-ink); }
.a-root .dm-vorb { position: relative; width: 260px; height: 260px; display: grid; place-items: center; margin: 22px 0 6px; }
.a-root .dm-vwave { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-root .dm-vav { position: relative; width: 150px; height: 150px; border-radius: 50%; padding: 4px; background: conic-gradient(var(--pa-accent), var(--pa-link), var(--pa-accent));
  box-shadow: 0 0 34px color-mix(in srgb, var(--pa-accent) 40%, transparent); }
.a-root .dm-vav .dm-vbust { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--pa-canvas); background-image: var(--bust, none), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pa-accent) 22%, var(--pa-canvas)), var(--pa-canvas) 70%); background-size: cover; background-position: center; }
.a-root .dm-vstate { position: relative; height: 18px; width: 100%; text-align: center; font: 10px var(--pa-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--pa-link); margin: 10px 0; }
.a-root .dm-vstate span { position: absolute; inset: 0; }
.a-root .dm-voice [data-at].gone { display: none; }
.a-root .dm-vbob { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 7px 12px; border-radius: 12px; font-size: 12px; border: 1px solid var(--pa-line); background: var(--pa-tint-1); margin-bottom: 8px; }
.a-root .dm-vbob .dm-ic { width: 14px; height: 14px; margin-top: 1px; }
.a-root .dm-vbob small { display: block; font: 11px var(--pa-font-mono); color: var(--pa-ink-3); }
.a-root .dm-vbob.run { color: var(--pa-st-attention); border-color: color-mix(in srgb, var(--pa-st-attention) 45%, transparent); }
.a-root .dm-vbob.run .dm-ic { animation: pa-spin 1.1s linear infinite; }
.a-root .dm-vbob.ok { color: var(--pa-st-done); border-color: color-mix(in srgb, var(--pa-st-done) 45%, transparent); }
.a-root .dm-vcaps { width: 100%; min-height: 96px; text-align: center; margin-top: auto; }
.a-root .dm-vcaps .you { color: var(--pa-ink-2); font-size: 12.5px; min-height: 18px; margin: 0 0 4px; }
.a-root .dm-vcaps .live { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--pa-ink); margin: 0; }
.a-root .dm-vctl { display: flex; gap: 20px; margin-top: 14px; }
.a-root .dm-vctl div { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 9px var(--pa-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pa-ink-2); }
.a-root .dm-vctl b { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--pa-ink); background: var(--pa-tint-1); border: 1px solid var(--pa-line); }
.a-root .dm-vctl b .dm-ic { width: 20px; height: 20px; }
.a-root .dm-vctl .end b { color: var(--pa-st-error); border-color: color-mix(in srgb, var(--pa-st-error) 60%, transparent); background: color-mix(in srgb, var(--pa-st-error) 10%, var(--pa-tint-1)); }

/* chapter rail would sit on top of the window */
.a-root.a-demo-on .a-rail { opacity: 0; pointer-events: none; }
.a-root .a-rail { transition: opacity var(--pa-dur-2) var(--pa-ease); }

/* Home (012 · 6, 015 kiểu 3 "Chữ lớn") */
.a-root .dm-hello h3 { font-size: 26px; line-height: 1.15; letter-spacing: -.025em; margin: 18px 0 6px; color: var(--pa-ink); font-weight: 700; }
.a-root .dm-hello h3 span { color: var(--pa-ink-3); }
.a-root .dm-hello h3 em { font-style: normal; color: var(--pa-link); }
.a-root .dm-hsub { font-size: var(--pa-fs-sm); color: var(--pa-ink-2); margin: 0 0 14px; } .a-root .dm-hsub b { color: var(--pa-ink); }
.a-root .dm-cards { display: flex; gap: 8px; margin: 0 -14px 16px 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.a-root .dm-card { flex: none; width: 148px; padding: 10px; border-radius: var(--pa-r-m); border: 1px solid var(--pa-line); background: var(--pa-tint-1); display: flex; flex-direction: column; gap: 8px; }
.a-root .dm-card p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--pa-fs-xs); color: var(--pa-ink-3); }
.a-root .dm-card p .dm-ic { width: 26px; height: 26px; padding: 5px; border-radius: var(--pa-r-xs); background: var(--pa-accent-tint); color: var(--pa-link); }
.a-root .dm-card b { font-weight: 500; font-size: var(--pa-fs); line-height: 1.35; min-height: 2.7em; color: var(--pa-ink); }
.a-root .dm-card code { font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); }
.a-root .dm-card.pick.on { border-color: color-mix(in oklch, var(--pa-accent) 50%, transparent); background: var(--pa-accent-tint); transition: background 0.3s 1.6s, border-color 0.3s 1.6s, opacity var(--pa-dur-2), transform var(--pa-dur-2); }
.a-root .dm-seg2 { display: flex; gap: 2px; margin-bottom: 6px; }
.a-root .dm-seg2 span { padding: 5px 10px; border-radius: var(--pa-r-s); font-size: var(--pa-fs-sm); color: var(--pa-ink-3); } .a-root .dm-seg2 span.on { background: var(--pa-tint-2); color: var(--pa-ink); }
.a-root .dm-recent { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: var(--pa-fs); color: var(--pa-ink); }
.a-root .dm-recent .dm-ic { width: 14px; height: 14px; color: var(--pa-ink-3); }
.a-root .dm-recent span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-root .dm-recent em { font: var(--pa-fs-xs) var(--pa-font-mono); font-style: normal; color: var(--pa-ink-3); }
.a-root .dm-comp.focus { border-color: color-mix(in oklch, var(--pa-accent) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--pa-accent) 40%, transparent); }

/* undo line + sheet ("File đã sửa", sketch 018 kiểu 2 as shipped in v5.3) */
.a-root .dm-fxl { display: flex; align-items: center; gap: 6px; margin: 8px 0; padding: 7px 10px; border-radius: var(--pa-r-s); background: var(--pa-tint-1); font-size: var(--pa-fs-sm); color: var(--pa-ink-2); }
.a-root .dm-fxl .dm-ic { width: 13px; height: 13px; } .a-root .dm-fxl b { font-weight: 500; color: var(--pa-ink); } .a-root .dm-fxl i { margin-left: auto; font-style: normal; color: var(--pa-ink-3); }
.a-root .dm-fx { border: 1px solid var(--pa-line); border-radius: var(--pa-r-m); background: var(--pa-float-bg); box-shadow: var(--pa-shadow-float); font-size: var(--pa-fs-sm); overflow: hidden; }
.a-root .dm-fx .hd { display: flex; gap: 8px; align-items: baseline; padding: 9px 12px 6px; } .a-root .dm-fx .hd span { color: var(--pa-ink-3); font-size: var(--pa-fs-xs); }
.a-root .dm-fx .r { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--pa-line); }
.a-root .dm-fx .r .dm-ic { width: 13px; height: 13px; color: var(--pa-ink-3); }
.a-root .dm-fx .r span { flex: 1; min-width: 0; color: var(--pa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-root .dm-fx .r small { display: block; font: var(--pa-fs-xs) var(--pa-font-mono); color: var(--pa-ink-3); }
.a-root .dm-fx .r u { text-decoration: none; font-size: var(--pa-fs-xs); padding: 3px 8px; border-radius: var(--pa-r-xs); background: var(--pa-tint-2); color: var(--pa-ink-2); }
.a-root .dm-fx .f { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--pa-line); font-size: var(--pa-fs-xs); color: var(--pa-ink-3); } .a-root .dm-fx .f b { margin-left: auto; font-weight: 500; }
.a-root .dm-fx .done { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--pa-line); color: var(--pa-st-done); }
.a-root .dm-fx .done .dm-ic { width: 14px; height: 14px; }
.a-root .dm-fx:has(.done.on) .r { opacity: .35; text-decoration: line-through; }
.a-root .dm-doc .dm-del { display: inline; } .a-root .dm-doc .dm-del.on { display: none; }

/* wide scenes: explorer collapsed so the board / canvas gets the room it has in the real app */
.a-root .dm-win.is-wide .dm-body { grid-template-columns: 44px 0 minmax(0, 1fr) 390px; }
.a-root .dm-win.is-wide .dm-explorer { visibility: hidden; }
.a-root .dm-win.is-wide .dm-doc { max-width: none; }
/* Pie Tasks board */
.a-root .dm-board { font-size: 12.5px; }
.a-root .dm-board .bh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .a-root .dm-board .bh b { font-size: 18px; color: var(--pa-ink); } .a-root .dm-board .bh span { color: var(--pa-ink-3); font-size: 12px; }
.a-root .dm-board .bf { display: flex; gap: 4px; align-items: center; margin-bottom: 12px; } .a-root .dm-board .bf i { flex: 1; }
.a-root .dm-board .bf span { padding: 3px 9px; border-radius: 999px; background: var(--pa-tint-1); color: var(--pa-ink-2); font-size: 11.5px; } .a-root .dm-board .bf span.on { background: var(--pa-accent-tint); color: var(--pa-link); } .a-root .dm-board .bf span.r { color: var(--pa-st-error); }
.a-root .dm-board .lanes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.a-root .dm-board .lane { background: var(--pa-tint-1); border-radius: var(--pa-r-m); padding: 8px; min-height: 420px; }
.a-root .dm-board .lane > p { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 600; color: var(--pa-ink); }
.a-root .dm-board .lane > p i { width: 8px; height: 8px; border-radius: 3px; } .a-root .dm-board .lane > p em { margin-left: auto; font-style: normal; color: var(--pa-ink-3); font-weight: 400; }
.a-root .dm-board .card { padding: 8px 9px; border-radius: var(--pa-r-s); background: #262e2f; border: 1px solid var(--pa-line); margin-bottom: 6px; }
.a-root .dm-board .card b { display: block; font-weight: 500; color: var(--pa-ink); line-height: 1.35; margin-bottom: 6px; }
.a-root .dm-board .card small { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--pa-ink-3); font-size: 11px; }
.a-root .dm-board .card u { text-decoration: none; padding: 1px 6px; border-radius: 999px; background: var(--pa-tint-2); color: var(--pa-ink-2); }
.a-root .dm-board .card.late { border-color: color-mix(in oklch, var(--pa-st-error) 45%, transparent); background: color-mix(in oklch, var(--pa-st-error) 9%, #262e2f); } .a-root .dm-board .card.late small { color: var(--pa-st-error); }
.a-root .dm-board .card .chip { display: inline-block; font: 600 9.5px var(--pa-font-mono); padding: 1px 5px; border-radius: 4px; background: color-mix(in oklch, var(--pa-st-done) 18%, transparent); color: var(--pa-st-done); margin-bottom: 5px; }
.a-root .dm-board .card.new { opacity: 0; transform: translateY(-8px) scale(.96); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: hidden; transition: all var(--pa-dur-3) var(--pa-ease); }
.a-root .dm-board .card.new.on { opacity: 1; transform: none; max-height: 120px; padding: 8px 9px; margin-bottom: 6px; box-shadow: 0 0 0 2px color-mix(in oklch, var(--pa-accent) 55%, transparent); }
/* Mermaid (rendered, Obsidian dark) */
.a-root .dm-mmd { margin: 10px 0 12px; padding: 12px; border-radius: var(--pa-r-m); background: var(--pa-tint-1); opacity: 0; transition: opacity var(--pa-dur-3); } .a-root .dm-mmd.on { opacity: 1; }
.a-root .mmd { width: 100%; height: auto; display: block; }
.a-root .mmd rect, .a-root .mmd .dia { fill: #262e2f; stroke: #2cb5be; stroke-width: 1.4; }
.a-root .mmd text { fill: #d3ddde; font: 13px -apple-system, Inter, sans-serif; text-anchor: middle; } .a-root .mmd text.s { font-size: 11px; fill: #b8c5c7; }
.a-root .mmd .e { fill: none; stroke: #b8c5c7; stroke-width: 1.4; }
.a-root .dm-mmd .n, .a-root .dm-mmd .e { opacity: 0; } .a-root .dm-mmd.on .n, .a-root .dm-mmd.on .e { animation: dm-in .35s var(--pa-ease) forwards; animation-delay: var(--d); }
@keyframes dm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.a-root .dm-code { font: 11.5px/1.55 var(--pa-font-mono); color: var(--pa-ink-3); background: var(--pa-tint-1); border-radius: var(--pa-r-s); padding: 8px 10px; margin: 0; white-space: pre-wrap; }
/* Excalidraw canvas: a real exported diagram, panned top → bottom like scrolling the canvas */
/* the canvas covers the whole editor body: lift its containing block up to .dm-doc-wrap */
.a-root .dm-doc:has(.dm-exc), .a-root .dm-swap.b:has(.dm-exc) { position: static; }
.a-root .dm-exc { position: absolute; inset: 0; overflow: hidden; background: #FAF8F4; opacity: 0; transition: opacity var(--pa-dur-3); }
.a-root .dm-exc.on { opacity: 1; }
.a-root .dm-exc img { display: block; width: 100%; max-width: 760px; margin: 0 auto; height: auto; }
.a-root .dm-exc.on img { animation: dm-pan 9s 0.6s ease-in-out forwards; }
@keyframes dm-pan { to { transform: translateY(calc(-100% + 600px)); } }
.a-root .dm-win.is-wide .dm-doc-wrap { padding-top: 14px; }