.ds{--ds-ok:var(--lightningcss-light,#1d7a46)var(--lightningcss-dark,#6fd39a);--ds-warn:var(--lightningcss-light,#a35f00)var(--lightningcss-dark,#fcbf5c);--ds-bad:var(--lightningcss-light,#c4302b)var(--lightningcss-dark,#ff8a85);border:1px solid var(--color-rule);background:var(--color-mist);font-family:var(--font-body);border-radius:14px;margin-block:2.5rem;padding:1.25rem;font-size:.9375rem;line-height:1.4;container-type:inline-size}.ds .ds-controls{flex-wrap:wrap;align-items:end;gap:1rem 1.5rem;display:flex}.ds .ds-choice{border:0;flex-wrap:wrap;gap:.375rem;margin:0;padding:0;display:flex}.ds .ds-choice legend{letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-soft);margin-bottom:.375rem;font-size:.75rem;font-weight:600}.ds .ds-choice input{opacity:0;pointer-events:none;position:absolute}.ds .ds-choice span{border:1px solid var(--color-rule);background:var(--color-raised);color:var(--color-ink);cursor:pointer;transition:background-color .15s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1)), border-color .15s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1)), color .15s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1));border-radius:999px;padding:.375rem .75rem;display:inline-block}.ds .ds-choice label:hover span{border-color:var(--color-ink-soft)}.ds .ds-choice input:checked+span{border-color:var(--color-navy);background:var(--color-navy);color:#fff}.ds .ds-choice input:focus-visible+span{outline:2px solid var(--color-amber);outline-offset:2px}.ds .ds-run{background:var(--color-amber);color:var(--color-navy);font:inherit;cursor:pointer;transition:transform .16s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1));border:0;border-radius:999px;margin-left:auto;padding:.5rem 1rem;font-weight:600}.ds .ds-run:active{transform:scale(.97)}.ds .ds-run:focus-visible{outline:2px solid var(--color-navy);outline-offset:2px}.ds .ds-stage{gap:2.5rem 3rem;margin-top:1.5rem;display:grid;position:relative}.ds .ds-stage[data-layout=dual]{grid-template-columns:repeat(3,1fr);grid-template-areas:"app db.""app queue consumers"}.ds .ds-stage[data-layout=outbox]{grid-template-columns:repeat(3,1fr);grid-template-areas:"app db relay"".consumers queue"}@container (width<=34rem){.ds .ds-stage[data-layout]{gap:1.75rem}.ds .ds-stage[data-layout=dual]{grid-template-columns:repeat(2,1fr);grid-template-areas:"app app""db queue"".consumers";gap:2.25rem 1rem}.ds .ds-stage[data-layout=outbox]{grid-template-columns:1fr;grid-template-areas:"app""db""relay""queue""consumers"}.ds .ds-run{margin-left:0}}.ds .ds-wires{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.ds .ds-wire{--wire:color-mix(in srgb, var(--color-ink-soft) 55%, transparent)}.ds .ds-wire line{stroke:var(--wire);stroke-width:1.5px;stroke-linecap:round;transition:stroke .2s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1))}.ds .ds-wire path{fill:var(--wire);transition:fill .2s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1))}.ds .ds-wire[data-state=active]{--wire:var(--color-amber)}.ds .ds-wire[data-state=failed]{--wire:var(--ds-bad)}.ds .ds-wire[data-state=failed] line{stroke-dasharray:4 4}.ds .ds-node{z-index:1;border:1px solid var(--color-rule);background:var(--color-raised);transition:border-color .2s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1)), box-shadow .2s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1));border-radius:10px;align-self:center;padding:.75rem .875rem;position:relative}.ds .ds-node[data-active=true]{border-color:var(--color-amber);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-amber) 30%, transparent)}.ds .ds-node[data-failed=true]{border-color:var(--ds-bad);box-shadow:0 0 0 3px color-mix(in srgb, var(--ds-bad) 25%, transparent)}.ds .ds-node h4{letter-spacing:normal;line-height:1.4;font-family:var(--font-body);color:var(--color-ink);margin:0;font-size:.9375rem;font-weight:600}.ds .ds-node .ds-detail{color:var(--color-ink-soft);margin:.125rem 0 0;font-size:.8125rem}.ds .ds-node dl{font-family:var(--font-mono);gap:.25rem;margin:.625rem 0 0;font-size:.75rem;display:grid}.ds .ds-node dl div{justify-content:space-between;gap:.75rem;display:flex}.ds .ds-node dt{color:var(--color-ink-soft)}.ds .ds-node dd{color:var(--color-ink);text-align:right;margin:0}.ds .ds-node dd[data-state=stored],.ds .ds-node dd[data-state=relayed],.ds .ds-node dd[data-state=received]{color:var(--ds-ok)}.ds .ds-node dd[data-state=pending]{color:var(--ds-warn)}.ds .ds-node dd[data-state=rolled-back]{color:var(--ds-bad)}.ds .ds-packet{z-index:2;background:var(--color-navy);color:#fff;font-family:var(--font-mono);white-space:nowrap;opacity:0;pointer-events:none;transition:background-color .15s var(--ease-out-strong,cubic-bezier(.23, 1, .32, 1));border-radius:999px;padding:.25rem .625rem;font-size:.75rem;position:absolute;top:0;left:0;box-shadow:0 4px 12px #0f1a3140}.ds .ds-packet[data-failed=true]{background:#c4302b}.ds .ds-output{font-size:inherit;line-height:inherit;color:inherit;text-align:left;border-top:1px solid var(--color-rule);margin-top:1.5rem;padding-top:1rem}.ds .ds-log{color:var(--color-ink-soft);margin:0;padding:0;font-size:.875rem;list-style:none}.ds .ds-log li{animation:ds-enter .24s var(--ease-drawer,cubic-bezier(.32, .72, 0, 1)) both;padding-left:1rem;position:relative}.ds .ds-log li+li{margin-top:.25rem}.ds .ds-log li::marker{content:none}.ds .ds-log li:before{content:"";background:var(--color-rule);border-radius:50%;width:.375rem;height:.375rem;position:absolute;top:.55em;left:0}.ds .ds-log li[data-tone=ok]:before{background:var(--ds-ok)}.ds .ds-log li[data-tone=warn]:before{background:var(--ds-warn)}.ds .ds-log li[data-tone=bad]:before{background:var(--ds-bad)}.ds .ds-log .ds-hint{padding-left:0;font-style:italic}.ds .ds-log .ds-hint:before{display:none}.ds .ds-verdict{min-height:1.4em;color:var(--color-ink);margin:.75rem 0 0;font-weight:600;display:block}.ds .ds-verdict[data-tone=ok]{color:var(--ds-ok)}.ds .ds-verdict[data-tone=warn]{color:var(--ds-warn)}.ds .ds-verdict[data-tone=bad]{color:var(--ds-bad)}@keyframes ds-enter{0%{opacity:0;transform:translateY(4px)}}@keyframes ds-fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.ds .ds-log li{animation-name:ds-fade}}