workflow-demo { display: block; margin-top: 32px; }
.wf-shell { border: 1px solid var(--line-strong); border-radius: var(--r-shell); padding: 28px; background: var(--shell); color: var(--text); }
.wf-connection { display:flex; align-items:center; gap:16px; min-height:28px; margin-bottom:24px; font-size:15px; color:var(--body-copy,var(--text)); }
.wf-connection[hidden] { display:none; }
.wf-workspace { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; }
.wf-order,.wf-queue { border:1px solid var(--line-strong); border-radius:16px; padding:24px; background:var(--surface); }
.wf-kicker { font:12px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.wf-order>strong { display:block; font-size:26px; line-height:1.25; margin:12px 0 24px; }
.wf-order .btn { width:100%; justify-content:center; margin-top:22px; padding:14px 12px; font-size:13px; }
.wf-order details { font-size:15px; line-height:1.5; }
.wf-order summary { cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.wf-order [data-products] { margin-top:18px; }
.wf-product { display:flex; align-items:center; gap:12px; justify-content:space-between; border-top:1px solid var(--line); padding:12px 0; }
.wf-product small { display:block; }
.wf-product select { width:48px; padding:8px; }
.wf-connector { display:flex; flex-direction:column; align-items:center; color:var(--accent); height:40px; line-height:16px; }
.wf-connector span { display:block; height:22px; width:1px; background:var(--accent); }
.wf-queue p { font-size:var(--fs-card-copy); line-height:1.65; color:var(--body-copy,var(--text)); }
.wf-queue p { margin-top:10px; }
.wf-board { min-width:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
.wf-board-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:20px; border-bottom:1px solid var(--line); }
.wf-board h3 { font-size:20px; font-weight:500; }
.wf-board-head p { font-size:13px; color:var(--accent); }
.wf-board ol { list-style:none; padding:0; margin:0; }
.wf-row { display:grid; grid-template-columns:minmax(95px,.9fr) minmax(130px,1.4fr) 115px; align-items:center; gap:12px; min-height:104px; padding:18px 20px; border-bottom:1px solid var(--line); transition:background .3s; }
.wf-row:last-child { border-bottom:0; }
.wf-target b,.wf-result b { display:block; font-size:16px; font-weight:500; line-height:1.4; }
.wf-target>span,.wf-result>span { display:block; font-size:var(--fs-card-copy); line-height:1.5; color:var(--body-copy,var(--text)); margin-top:5px; }
.wf-select>span { display:block; font-size:11px; margin-bottom:5px; color:var(--body-copy,var(--text)); }
.wf-select select,.wf-product select { max-width:100%; font:12px var(--mono); border:1px solid var(--line-strong); border-radius:8px; background:var(--bg-2); color:var(--text); cursor:pointer; }
.wf-select select { width:100%; padding:9px 4px; }
.wf-row[data-tone="done"] [data-status] { color:light-dark(#15803d,#70de9b); }
.wf-row[data-tone="inflight"] { background:color-mix(in srgb,var(--accent) 7%,transparent); }
.wf-row[data-tone="inflight"] [data-status]::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:8px; animation:wf-pulse .8s infinite alternate; }
.wf-row[data-tone="pending"] [data-status],.wf-row[data-tone="dead"] [data-status] { color:light-dark(#885700,#ffd184); }
.wf-result .wf-countdown { color:light-dark(#885700,#ffd184); font-size:14px; font-variant-numeric:tabular-nums; }
.wf-result .wf-countdown[hidden] { display:none; }
.wf-error { border:1px solid var(--line-strong); padding:16px; border-radius:10px; font-size:var(--fs-card-copy); margin-top:20px; }
.wf-reconnect { font:inherit; color:var(--accent); background:transparent; border:0; text-decoration:underline; cursor:pointer; }
.wf-shell button:disabled,.wf-shell select:disabled { opacity:.55; cursor:not-allowed; }
.wf-shell :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@keyframes wf-pulse { to { opacity:.25; } }
@media(max-width:1000px) { .wf-workspace { grid-template-columns:230px minmax(0,1fr); gap:18px; } .wf-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:16px; gap:10px; } .wf-select { grid-column:1/-1; display:flex; gap:12px; align-items:center; } .wf-select>span { margin:0; } .wf-select select { width:auto; padding:7px; } }
@media(max-width:720px) { .wf-shell { padding:18px; } .wf-workspace { grid-template-columns:1fr; } .wf-order,.wf-queue { padding:20px; } .wf-queue { display:none; } .wf-connector { height:32px; } .wf-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .wf-connection { align-items:flex-start; flex-direction:column; gap:10px; } .wf-result b,.wf-target b { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { .wf-row { transition:none; } .wf-row[data-tone="inflight"] [data-status]::before { animation:none; } }

.workflow-proof { margin-top:28px; padding:4px 0 4px 24px; border-left:2px solid var(--accent); }
.workflow-proof h3 { font-size:24px; line-height:1.3; font-weight:600; }
.workflow-proof p { margin-top:14px; max-width:85ch; font-size:17px; line-height:1.65; color:var(--body-copy,var(--text)); }
.workflow-proof details { margin-top:20px; }
.workflow-proof summary { font-size:17px; font-weight:500; cursor:pointer; }
.workflow-proof summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.workflow-mcp-address { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:16px; }
.workflow-mcp-address code { font:14px/1.6 var(--mono); overflow-wrap:anywhere; user-select:all; }
.workflow-proof .workflow-proof-note { font-size:15px; }
@media(max-width:640px) { .workflow-proof { padding-left:18px; } .workflow-proof h3 { font-size:22px; } }