.pq-demo{--pq-bg:light-dark(#faf9f6,#171714);--pq-panel:light-dark(#fff,#1f1f1b);--pq-border:light-dark(#d9d6cc,#383830);--pq-muted:light-dark(#686459,#a09e91);--pq-ink:light-dark(#292820,#eeede5);--pq-accent:light-dark(#a85b20,#eaa36d);color:var(--pq-ink);background:var(--pq-bg);border:1px solid var(--pq-border);color-scheme:light;border-radius:8px;margin:0;font:14px/1.5 system-ui,sans-serif;transition:border-color .25s,box-shadow .25s;overflow:hidden;container-type:inline-size}.pq-demo[data-running=true]{border-color:color-mix(in srgb, var(--pq-accent) 60%, var(--pq-border));box-shadow:0 0 12px color-mix(in srgb, var(--pq-accent) 18%, transparent)}.dark .pq-demo{color-scheme:dark}.pq-demo *{box-sizing:border-box}.pq-demo button{font:inherit;cursor:pointer}.pq-demo button:focus-visible,.pq-scroll:focus-visible{outline:2px solid var(--pq-accent);outline-offset:-3px}.pq-toolbar{border-bottom:1px solid var(--pq-border);justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;display:flex}.pq-modes{flex-wrap:wrap;gap:4px;display:flex}.pq-modes button{color:var(--pq-muted);background:0 0;border:1px solid #0000;border-radius:4px;padding:7px 12px}.pq-modes button[aria-pressed=true]{color:var(--pq-accent);background:light-dark(#fff0df,#2b2821);border-color:light-dark(#c39165,#69513c)}.pq-modes span{margin-left:12px;font:11px ui-monospace,monospace}.pq-example,.pq-step{color:var(--pq-muted);letter-spacing:.08em;font:10px ui-monospace,monospace}.pq-scroll{overflow-x:auto}.pq-demo svg{width:100%;min-width:660px;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;display:block}.pq-demo svg text{fill:var(--pq-ink)}.pq-demo svg.pq-simple-mobile{min-width:0;display:none}.pq-demo svg.pq-topology-mobile,.pq-demo svg.pq-lock-mobile,.pq-demo svg.pq-failure-mobile{min-width:0;max-height:75svh}@container (width<=640px){.pq-demo svg.pq-simple-desktop{display:none}.pq-demo svg.pq-simple-mobile{max-height:75svh;display:block}}.pq-demo svg .pq-label{fill:var(--pq-muted);letter-spacing:1.4px;font-size:10px}.pq-demo svg .pq-small{fill:var(--pq-muted);font-size:10px}.pq-node-title{letter-spacing:.4px;font-size:11px;font-weight:600}.pq-demo svg.pq-simple .pq-label,.pq-demo svg.pq-simple .pq-small,.pq-demo svg.pq-lock-demo .pq-label,.pq-demo svg.pq-lock-demo .pq-small,.pq-demo svg.pq-lock-demo .pq-success-text,.pq-demo svg.pq-lock-demo .pq-error-text,.pq-demo svg.pq-lock-demo .pq-job-status,.pq-demo svg.pq-failure-demo .pq-label,.pq-demo svg.pq-failure-demo .pq-small,.pq-demo svg.pq-failure-demo .pq-error-text,.pq-demo svg.pq-failure-demo .pq-success-text,.pq-demo svg.pq-failure-demo .pq-job-status,.pq-demo svg.pq-failure-demo .pq-lock text,.pq-demo svg.pq-topology .pq-label,.pq-demo svg.pq-topology .pq-small,.pq-demo svg.pq-topology .pq-job-status{font-size:14px}.pq-demo svg.pq-simple .pq-node-title,.pq-demo svg.pq-lock-demo .pq-node-title,.pq-demo svg.pq-failure-demo .pq-node-title,.pq-demo svg.pq-topology .pq-node-title{font-size:15px}.pq-node,.pq-store{fill:var(--pq-panel);stroke:var(--pq-border);transition:stroke .3s,fill .3s}.pq-store{stroke:light-dark(#b1ad9f,#555347)}.pq-node-active{stroke:light-dark(#b66f34,#a47950)}.pq-wire{fill:none;stroke:light-dark(#a6a092,#636055);stroke-width:1px;stroke-dasharray:3 5;color:light-dark(#77705e,#8d8878)}.pq-wire-active{stroke:var(--pq-accent);color:var(--pq-accent)}.pq-divider{stroke:var(--pq-border)}.pq-orange{fill:var(--pq-accent)}.pq-green{fill:light-dark(#527438,#a5bb8c)}.pq-red{fill:light-dark(#ae4032,#e39a8a)}.pq-demo svg .pq-error-text{fill:light-dark(#ae4032,#e39a8a);font-size:10px}.pq-node-error{stroke:light-dark(#bb5848,#ce8375)}.pq-lock{color:var(--pq-muted)}.pq-lock-held{color:var(--pq-accent)}.pq-lock rect,.pq-lock path{fill:none;stroke:currentColor;transition:stroke .25s}.pq-lock-held>rect:first-child{fill:light-dark(#fff0df,#30291f)}.pq-demo svg .pq-lock text{fill:currentColor;font-size:10px}.pq-demo svg .pq-success-text{fill:light-dark(#42662b,#b1c69a);font-size:10px}.pq-failure-signal .pq-packet rect{fill:light-dark(#fff0ec,#352321);stroke:light-dark(#bb5848,#ce8375)}.pq-demo svg .pq-failure-signal text{fill:light-dark(#ae4032,#e39a8a)}.pq-muted-dot{fill:light-dark(#8c8779,#77766b)}.pq-job rect{fill:light-dark(#f2f0e9,#292923);stroke:light-dark(#c5c0b1,#4c4b40);transition:stroke .3s,fill .3s}.pq-job{transition:opacity .3s}.pq-job-processing rect,.pq-job-delivering rect,.pq-job-acknowledging rect{stroke:light-dark(#b66f34,#bb8959);fill:light-dark(#fff0df,#30291f)}.pq-job-complete rect{stroke:light-dark(#81996b,#536348);fill:light-dark(#edf4e5,#242b21)}.pq-job-error rect{stroke:light-dark(#bb5848,#ce8375);fill:light-dark(#fff0ec,#352321)}.pq-demo svg .pq-job-complete .pq-job-status{fill:light-dark(#42662b,#b1c69a)}.pq-job-status{font-size:10px}.pq-packet rect{fill:light-dark(#fff0df,#30271d);stroke:var(--pq-accent)}.pq-demo svg .pq-packet text{fill:light-dark(#914c18,#f3c69e);font-size:10px}.pq-ack rect{fill:light-dark(#edf4e5,#242b21);stroke:light-dark(#527438,#a5bb8c)}.pq-demo svg .pq-ack text{fill:light-dark(#42662b,#b1c69a)}.pq-phases{border-block:1px solid var(--pq-border);background:light-dark(#f2f0e9,#1c1c18);grid-template-columns:repeat(4,1fr);display:grid}.pq-phases>div{border-right:1px solid var(--pq-border);color:var(--pq-muted);text-align:center;text-transform:uppercase;padding:12px 16px;font:11px ui-monospace,monospace}.pq-phases>div:last-child{border-right:0}.pq-phases span{opacity:.6;margin-right:8px}.pq-phases [aria-current=step]{color:var(--pq-accent);box-shadow:inset 0 2px var(--pq-accent);background:light-dark(#fff0df,#2b251e)}.pq-narration{color:light-dark(#514d42,#cbc9bc);min-height:76px;padding:23px 28px}.pq-controls{justify-content:center;align-items:center;gap:12px;padding:0 24px 22px;display:flex}.pq-controls>div{gap:6px;display:flex}.pq-controls button{border:1px solid var(--pq-border);color:var(--pq-ink);background:0 0;border-radius:4px;min-width:76px;padding:7px 13px;font-size:12px}.pq-controls .pq-play{background:light-dark(#eeece4,#292923)}.pq-controls button:hover:not(:disabled){border-color:var(--pq-muted)}.pq-controls button:disabled{opacity:.3;cursor:default}.pq-demo figcaption{border-top:1px solid var(--pq-border);color:light-dark(#514d42,#cbc9bc);background:light-dark(#f2f0e9,#1c1c18);margin:0;padding:18px 28px;font-size:12px}.pq-demo figcaption span{color:var(--pq-muted);margin-top:5px;display:block}@media (width<=600px){.pq-toolbar{padding:12px}.pq-example{display:none}.pq-phases>div{padding:12px 4px;font-size:10px}.pq-phases span{margin-right:3px}.pq-narration{min-height:106px;padding:20px}.pq-controls{flex-wrap:wrap;padding:0 16px 20px}.pq-demo figcaption{padding:18px 20px}}@media (prefers-reduced-motion:reduce){.pq-demo,.pq-demo *{transition:none}}