:root{
  --radius-control:var(--radius);
  --radius-surface:var(--radius);
  --hover-transition:color var(--transition-state),background-color var(--transition-state),border-color var(--transition-state);
  --disabled-opacity:0.45;
  --shell-width:1180px;
  --content-width:680px;
  --row-height:40px;
}

[data-theme="light"]{
  --text-dim:#3D3D3D;
  --danger:#A03028;
  --teal:#087581;--violet:#6B5D91;
  --code-bg:var(--shade-on-light);--code-edge:transparent;
  --code-emphasis:var(--ink);--code-body:var(--text-dim);--code-recede:var(--stone);
  --shade-hairline:#DDDDDD;
  --surface-float:var(--surface-page);--float-hairline:var(--hairline);
  --surface-panel:#FFFFFF;--surface-panel-head:#F2F2F2;--panel-edge:#DADADA;--panel-shade:#F4F4F4;
  --control-edge:#ADADAD;--control-fill:#EDEDED;--control-fill-hover:#E0E0E0;
  --highlight:var(--text-body);
}
[data-theme="dark"]{
  --text-dim:var(--muted-strong);
  --danger:#E0756A;
  --teal:#5BC8D0;--violet:#AFA3CF;
  --code-bg:var(--panel);--code-edge:var(--hairline-on-dark);
  --code-emphasis:var(--paper);--code-body:var(--text-dim);--code-recede:var(--muted-on-dark);
  --shade-hairline:#303030;
  --surface-float:var(--surface-card);--float-hairline:#3A3A3A;
  --surface-panel:#191919;--surface-panel-head:#202020;--panel-edge:#333333;--panel-shade:#232323;
  --control-edge:#555555;--control-fill:#2A2A2A;--control-fill-hover:#343434;
  --highlight:#F3F6F8;
}
:root{--surface-shade-2:color-mix(in srgb,var(--surface-shade) 96.5%,var(--text-body));}

*,*::before,*::after{box-sizing:border-box;}
h1,h2,h3,p,dl,dd,ul{margin:0;}
button,input{font:inherit;color:inherit;border-radius:var(--radius-control);}
button,.btn,a{transition:var(--hover-transition);}
::selection{background:var(--accent-glyph);}
:focus-visible{outline:2px solid var(--text-body);outline-offset:1px;}

.caps{
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-body);
}
.fact{font-family:var(--font-mono);font-size:var(--text-mono-meta);color:var(--text-dim);}
.note{font-size:var(--text-small);line-height:var(--leading-small);color:var(--text-dim);}
.dim{color:var(--text-dim);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  max-width:var(--shell-width);
  margin:0 auto;
  padding:0 24px;
}
.top,.foot{position:sticky;z-index:1;background:var(--surface-page);}
.top{
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0 14px;
  border-bottom:1px solid var(--hairline);
}
.wordmark{
  font-size:24px;
  font-weight:500;
  letter-spacing:var(--track-wordmark);
  line-height:var(--leading-heading);
}
.wordmark a{
  display:inline-flex;
  align-items:baseline;
  gap:0.38em;
  color:var(--text-body);
  text-decoration:none;
}
.wordmark svg{
  width:1.15em;
  height:1.15em;
  flex:none;
  stroke:var(--text-body);
  transform:translateY(calc(1.15em / 2 - 0.343em));
}
.wordmark svg .hub{fill:var(--accent);stroke:none;}
.theme-toggle{
  display:inline-flex;
  padding:4px;
  border:0;
  background:none;
  color:var(--text-muted);
  cursor:pointer;
}
.theme-toggle:hover{color:var(--text-body);}
.theme-toggle svg{width:22.4px;height:22.4px;}
[data-theme="dark"] .theme-toggle .moon,
[data-theme="light"] .theme-toggle .sun{display:none;}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:40px;
  width:100%;
  max-width:var(--content-width);
  padding:32px 0 48px;
}
.main.centered{margin-inline:auto;}
.main.wide{max-width:1040px;gap:24px;}
.section{display:flex;flex-direction:column;gap:14px;}
.intro{max-width:600px;font-size:16px;}
.intro-emphasis{color:var(--text-body);font-weight:500;}
.page-head{display:flex;align-items:center;gap:20px;}
.main>.section>h2.title{margin-bottom:12px;font-size:32px;}
.stage-title{margin-top:16px;font-size:18px;}
.title{
  font-size:20px;
  font-weight:500;
  letter-spacing:var(--track-heading);
  line-height:var(--leading-heading);
}

.foot{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:baseline;
  gap:24px;
  bottom:0;
  padding:14px 0;
  border-top:1px solid var(--hairline);
}
.signature{
  font-size:16px;
  font-weight:500;
  letter-spacing:var(--track-wordmark);
  white-space:nowrap;
}
.bracket{color:var(--accent);font-weight:700;}
.credit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:var(--text-mono-micro);
  color:var(--text-muted);
  text-decoration:none;
}
.credit:hover{color:var(--text-body);}
.credit svg{width:14px;height:14px;}
.foot .quiet-link{justify-self:end;font-family:var(--font-mono);font-size:var(--text-mono-meta);}

.quiet-link{
  color:var(--text-body);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:1px;
}
.quiet-link:hover{color:var(--accent-on-hover);}
.main .quiet-link{align-self:flex-start;font-size:var(--text-small);font-weight:500;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:var(--row-height);
  padding:0 16px;
  font-family:var(--font-sans);
  font-size:var(--text-small);
  font-weight:500;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  background:transparent;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}
.btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed;}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn-icon{width:var(--row-height);padding:0;justify-content:center;}
.btn-primary{background:var(--accent);color:var(--paper);}
[data-theme="dark"] .btn-primary{color:var(--ink);}
.btn-primary:not(:disabled):hover{background:var(--accent-on-hover);}
.btn-secondary{border-color:var(--control-edge);color:var(--text-body);}
.btn-secondary:not(:disabled):hover{border-color:var(--text-body);}
a.btn-secondary:hover{color:var(--text-body);}

.field{
  height:var(--row-height);
  min-width:0;
  padding:0 10px;
  font-family:var(--font-mono);
  font-size:var(--text-mono-meta);
  background:var(--surface-page);
  color:var(--text-body);
  border:1px solid var(--hairline);
}
.field::placeholder{color:var(--text-muted);}
.field:focus{outline:1px solid var(--text-muted);outline-offset:-1px;border-color:var(--text-muted);}
.field:disabled{opacity:var(--disabled-opacity);cursor:not-allowed;}

.panel{
  --surface-shade:var(--panel-shade);
  display:flex;
  flex-direction:column;
  background:var(--surface-panel);
  border:1px solid var(--panel-edge);
  border-radius:var(--radius-surface);
  overflow:hidden;
}
.panel-head{
  padding:8px 16px;
  font-size:var(--text-mono-meta);
  line-height:20px;
  background:var(--surface-panel-head);
  border-bottom:1px solid var(--panel-edge);
}
.panel-body{display:flex;flex-direction:column;gap:18px;padding:16px;}
.card{display:flex;flex-direction:column;gap:18px;padding:24px;background:var(--surface-card);border-radius:var(--radius-surface);}
.columns{display:grid;width:1040px;grid-template-columns:656px 336px;justify-content:space-between;gap:40px;}
.transfer-row{width:auto;grid-template-columns:minmax(0,1fr) 240px;align-items:start;}

.accounts{display:flex;flex-direction:column;}
.account{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:16px;padding:12px 16px;}
.account+.account{border-top:1px solid var(--hairline);}
.credits{display:flex;flex-direction:column;gap:12px;}
.credits .btn{width:100%;justify-content:center;}
.credit-actions{display:flex;gap:8px;}
.credit-actions form{flex:1;}
.credit-actions .btn{padding:0 12px;}
.figure{
  font-size:20px;
  font-weight:500;
  letter-spacing:var(--track-heading);
  line-height:var(--leading-heading);
  font-variant-numeric:tabular-nums;
}

.details{padding-bottom:4px;}
.details .facts{border-top:0;line-height:20px;}
.details .facts div{grid-template-columns:100px minmax(0,1fr);padding:6px 16px;}
.details .facts div:last-child{border-bottom:0;}
.details .amount dd{color:var(--text-body);font-weight:500;}

.balances{justify-content:center;padding:16px;}
.changes>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;}
.changes>div:first-child{padding-top:0;}
.changes>div:last-child{padding-bottom:0;}
.changes>div+div{border-top:1px solid var(--hairline);}
:is(.changes,.account) dt{font-family:var(--font-mono);font-size:18px;color:var(--text-muted);}
:is(.changes,.account) dd{display:flex;align-items:baseline;gap:12px;font-family:var(--font-mono);}
:is(.changes,.account) .figure{letter-spacing:0;}
.changes .before{color:var(--text-dim);}
.changes .arrow{font-size:18px;color:var(--text-muted);}
.changes dd:has(> .spinner){align-self:center;}
.changes .spinner{width:20px;height:20px;}

.details-head{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.details-head h3{font-size:inherit;flex:none;}
.pill{
  padding:0 10px;
  font-family:var(--font-mono);
  font-weight:500;
  line-height:18px;
  text-align:right;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:10px;
  font-size: 11px;
}

.transfer-form{display:flex;flex-direction:column;align-items:stretch;gap:12px;}
.transfer-form .field{font-size:13px;}
.transfer-form label{display:flex;align-items:center;gap:12px;}
.transfer-form .amount{flex-direction:column;align-items:stretch;gap:8px;}
.transfer-form .btn{justify-content:center;height:auto;margin-top:12px;padding:12px 24px;font-size:14px;}
.history-panel .table,.transfers{border-top:0;}
.history-panel .table :is(th,td):first-child,.transfers :is(th,td):first-child{padding-left:16px;}
.scenarios{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;padding:0;border:0;min-width:0;}
.scenarios legend{margin-bottom:8px;padding:0;}
.scenarios label{gap:8px;padding:8px 12px;border:1px solid var(--panel-edge);border-radius:var(--radius-control);cursor:pointer;}
.scenarios label:has(:checked){border-color:var(--control-edge);}
.scenarios input{margin:0;accent-color:var(--accent);cursor:inherit;}
.scenarios:disabled{opacity:var(--disabled-opacity);}
.scenarios:disabled label{cursor:not-allowed;}
.error{font-size:var(--text-small);line-height:var(--leading-small);color:var(--danger);}

.facts,.table{
  font-family:var(--font-mono);
  font-size:var(--text-mono-meta);
  line-height:var(--leading-code);
  border-top:1px solid var(--hairline);
}
.facts div{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:18px;
  padding:6px 12px;
}
.facts div{border-bottom:1px solid var(--hairline);}
.facts dd{color:var(--text-dim);}
.facts code{font-size:inherit;}
.facts .linked{display:flex;justify-content:space-between;align-items:baseline;gap:18px;}
.facts .quiet-link{font-size:inherit;font-weight:500;letter-spacing:0.04em;}
.table{width:100%;border-collapse:collapse;}
.table th,.table td{
  padding:6px 12px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--hairline);
}
.table th{font-size:var(--text-mono-micro);}
.table td{color:var(--text-dim);}
.table td:first-child{color:var(--text-body);}
.transfers{table-layout:fixed;}
.transfers th:nth-child(1){width:320px;}
.transfers th:nth-child(2){width:120px;}
.transfers tbody tr{position:relative;}
.transfers tbody tr:last-child td{border-bottom:0;}
.transfers tbody tr:hover td{background:var(--surface-shade);}
.transfers a{color:var(--text-body);text-decoration:none;transition:none;}
.transfers a::after{content:"";position:absolute;inset:0;}
.history-panel{width:1040px;margin-top:24px;}
.history{width:100%;table-layout:fixed;}
.history th:nth-child(1){width:124px;}
.history th:nth-child(2){width:290px;}
.history td{vertical-align:baseline;}
.history td:first-child{font-size:12px;color:var(--text-dim);}
:is(.history,.playback-entry) .label{color:var(--text-body);}
:is(.history,.playback-entry) .meta{display:block;color:var(--text-body);}
:is(.history,.playback-entry) .meta ~ .label,.history .continues .label{color:var(--text-muted);}
.history tr:has(+ .continues) td{border-bottom:0;padding-bottom:0;}
.history .continues td{padding-top:0;}
:is(.history,.playback) [data-observation="NackRequested"] .label{color:var(--danger);}
:is(.history,.playback) [data-observation="DuplicateSuppressed"] .label{color:var(--teal);font-weight:500;}
:is(.history,.playback) [data-observation="DeliveryWaiting"] .label{color:var(--danger);}
:is(.history,.playback) [data-observation="DeliveryResumed"] .label{color:var(--teal);}
.history [data-playback="current"] td{background:var(--surface-shade);}
[data-theme="light"] .history [data-playback="current"] td{background:var(--paper);}
.history [data-playback="unplayed"] td{opacity:var(--disabled-opacity);}

.playback-entry{
  font-family:var(--font-mono);
  font-size:var(--text-mono-meta);
  line-height:var(--leading-code);
  color:var(--text-dim);
}
.playback-note:empty{display:none;}
.playback{
  display:grid;
  grid-template-columns:656px 336px;
  justify-content:space-between;
  gap:14px 40px;
  width:1040px;
}
.playback-stage{display:contents;}
.playback-stage > [data-diagram]{
  grid-column:1;
  grid-row:1;
  box-sizing:content-box;
  padding:16px 28px;
  background:var(--surface-page);
  border-radius:var(--radius-surface);
  box-shadow:0 1px 2px rgb(0 0 0 / .3),0 3px 10px rgb(0 0 0 / .25);
}
[data-theme="light"] .playback-stage > [data-diagram]{--surface-page:#F4F4F4;box-shadow:0 1px 2px rgb(0 0 0 / .06),0 2px 8px rgb(0 0 0 / .06);}
[data-theme="dark"] .playback-stage > [data-diagram]{
  --surface-page:var(--surface-panel);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .05),0 1px 2px rgb(0 0 0 / .3),0 3px 10px rgb(0 0 0 / .25);
}
.playback-controls{grid-column:1;grid-row:2;}
.playback-details{grid-column:2;grid-row:1;}
.playback-wait{grid-column:1;grid-row:1;}
.playback-details{display:flex;flex-direction:column;padding-top:48px;gap:14px;text-align:center;}
.timeline{padding:0 6px;}
.timeline-track{position:relative;height:12px;}
.timeline-track::before,.timeline-progress{content:"";position:absolute;left:0;top:50%;height:1px;background:var(--text-muted);transform:translateY(-50%);}
.timeline-track::before{right:0;}
.timeline-progress{height:2px;background:var(--highlight);}
.timeline-tick{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--highlight);transform:translate(-50%,-50%);}
.timeline-tick[data-playback="unplayed"]{background:var(--text-muted);}
.timeline-tick[data-playback="current"]{width:11px;height:11px;}
.playback-controls{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:24px;}
.playback-buttons{display:flex;gap:12px;}
.playback-controls .btn-secondary{background:var(--control-fill);}
.playback-controls .btn-secondary:not(:disabled):hover{border-color:var(--text-body);background:var(--control-fill-hover);}
[data-control="play"] svg{display:none;}
[data-state="pause"] [data-icon="pause"],[data-state="play"] [data-icon="play"],[data-state="replay"] [data-icon="replay"]{display:block;}
.diagram-views{display:flex;margin:0;padding:0;border:0;min-width:0;}
.diagram-views input{position:absolute;opacity:0;pointer-events:none;}
.diagram-views label{display:flex;align-items:center;height:var(--row-height);padding:0 14px;border:1px solid var(--panel-edge);margin-left:-1px;color:var(--text-dim);cursor:pointer;transition:var(--hover-transition);}
.diagram-views label:first-of-type{margin-left:0;border-radius:var(--radius-control) 0 0 var(--radius-control);}
.diagram-views label:last-of-type{border-radius:0 var(--radius-control) var(--radius-control) 0;}
.diagram-views:not(:disabled) label:hover{color:var(--text-body);}
.diagram-views:disabled label{opacity:var(--disabled-opacity);cursor:not-allowed;}
.diagram-views label:has(:checked){position:relative;z-index:1;border-color:var(--control-edge);background:var(--control-fill);color:var(--text-body);font-weight:500;}
.diagram-views label:has(:focus-visible){outline:2px solid var(--text-body);outline-offset:2px;z-index:2;}

.diagram-glyphs{position:absolute;width:0;height:0;overflow:hidden;}
[data-diagram]{display:none;}
html:not([data-view]) [data-diagram="overview"],
html[data-view="overview"] [data-diagram="overview"],
html[data-view="detailed"] [data-diagram="detailed"],
html[data-view="sequence"] [data-diagram="sequence"]{display:block;}

.diagram{font-family:var(--font-mono);font-size:var(--text-mono-meta);}
.diagram text{text-anchor:middle;dominant-baseline:central;}
.diagram [data-edge],.diagram [data-route]{fill:none;stroke:var(--text-muted);stroke-width:1;opacity:.55;}
.diagram .trace{fill:none;stroke:var(--highlight);stroke-width:2;stroke-linecap:butt;stroke-dasharray:0 1;}
.diagram .trace[data-tone="teal"]{stroke:var(--teal);}
.diagram .head{fill:none;stroke:var(--highlight);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.diagram .head.envelope rect{fill:var(--surface-page);stroke:var(--highlight);}
.diagram .head.token{fill:var(--highlight);stroke:none;}
.diagram [data-park]{fill:none;stroke:none;}
[data-node]{color:var(--text-muted);}
[data-node] rect,[data-node] .pipe,[data-node] .slots{fill:none;stroke:currentColor;transition:stroke 220ms ease-out;}
[data-node] text{fill:currentColor;transition:fill 220ms ease-out;}
[data-node] use{transition:color 220ms ease-out;}
[data-node][data-lit]{color:var(--highlight);}
.diagram .caption{font-size:var(--text-mono-micro);fill:var(--text-muted);}
.diagram .slots{stroke-width:1;opacity:.6;}
.diagram .request{text-anchor:start;}
.diagram .no-consumer{fill:var(--danger);}
.diagram:not([data-no-consumer]) .no-consumer{display:none;}
.diagram .fail{fill:none;stroke:var(--danger);stroke-width:2;stroke-linecap:butt;}
.diagram .fail-line{stroke-dasharray:0 1;}
.diagram .fail-bar{visibility:hidden;}

[data-diagram="detailed"] .name{text-anchor:start;}
[data-diagram="detailed"] .balance{text-anchor:start;font-weight:500;fill:var(--text-dim);}
[data-diagram="detailed"] [data-lit] .balance{fill:var(--highlight);}
[data-diagram="detailed"][data-no-consumer] [data-route="broker>bank-b"]{stroke:var(--danger);stroke-dasharray:3 3;opacity:1;}
.sm-edge{fill:none;stroke:var(--text-muted);stroke-width:1;opacity:.6;}
[data-sm][hidden]{display:none;}
[data-sm] circle{fill:var(--surface-page);stroke:var(--text-muted);transition:fill 220ms,stroke 220ms;}
[data-sm] text{font-size:var(--text-mono-micro);fill:var(--text-muted);}
[data-sm] .side{text-anchor:start;}
[data-sm][data-visited] circle{fill:var(--text-dim);stroke:var(--text-dim);}
[data-sm][data-visited] text{fill:var(--text-dim);}
[data-sm][data-current] circle{fill:var(--highlight);stroke:var(--highlight);r:5;}
[data-sm][data-current] text{fill:var(--highlight);}

.playback-stage > .seq{padding-inline:16px;}
.seq{width:624px;font-family:var(--font-mono);font-size:var(--text-mono-meta);}
.seq text{text-anchor:middle;dominant-baseline:central;}
.seq-head,.seq-body{display:block;}
.seq-window{position:relative;height:264px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);}
.seq-body{transition:transform 450ms cubic-bezier(.4,0,.2,1);}
.seq .lifeline{stroke:var(--text-muted);stroke-dasharray:2 4;opacity:.6;}
.seq .msg{transition:opacity 220ms;}
.seq .msg[data-state="unplayed"]{opacity:0;}
.seq .msg line{stroke:var(--text-muted);stroke-width:1;}
.seq .msg .chev{fill:none;stroke:var(--text-muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.seq .msg .via{fill:var(--surface-page);stroke:var(--text-muted);}
.seq .msg .dot{fill:var(--text-muted);}
.seq .msg text{font-size:var(--text-mono-micro);fill:var(--text-muted);}
.seq .msg .wait{fill:none;stroke-dasharray:3 3;}
.seq .msg .fail{fill:none;stroke-width:2;}
.seq .msg[data-state="current"] line{stroke:var(--highlight);stroke-width:2;}
.seq .msg[data-state="current"] .chev{stroke:var(--highlight);stroke-width:2;}
.seq .msg[data-state="current"] .via{stroke:var(--highlight);}
.seq .msg[data-state="current"] .dot{fill:var(--highlight);}
.seq .msg[data-state="current"] text{fill:var(--highlight);}
.seq .msg :is(line,path,rect,circle)[data-tone="teal"]{stroke:var(--teal);}
.seq .msg text[data-tone="teal"]{fill:var(--teal);}
.seq .msg :is(line,path,rect,circle)[data-tone="danger"]{stroke:var(--danger);}
.seq .msg text[data-tone="danger"]{fill:var(--danger);}
.seq .msg[data-state="played"] [data-tone]{opacity:.55;}

.playback-wait{
  position:relative;
  height:352px;
  overflow:hidden;
}
.playback-wait .watermark{
  position:absolute;
  left:50%;
  top:50%;
  width:150px;
  height:150px;
  transform:translate(-50%,-50%);
  stroke:color-mix(in srgb, var(--text-body) 6%, transparent);
}
.playback-wait .watermark circle{fill:var(--accent-frame);stroke:none;}
.playback-wait .spinner{position:absolute;inset:0;width:36px;height:36px;margin:auto;}
.playback-wait .fact{position:absolute;top:calc(50% + 32px);left:0;right:0;margin:0;text-align:center;}
.spinner{
  position:relative;
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid var(--hairline);
  border-top-color:var(--text-body);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.outcome{
  display:flex;
  align-items:baseline;
  gap:24px;
  margin-top:16px;
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:var(--text-mono-meta);
  line-height:var(--leading-code);
  background:var(--surface-panel-head);
  border-top:1px solid var(--panel-edge);
}
.outcome h4{margin:0;flex:none;font-size:var(--text-mono-micro);color:var(--text-dim);}
.outcome ul{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:4px;margin:0;padding:0;list-style:none;}
.outcome li{white-space:nowrap;color:var(--text-dim);}
.outcome li+li::before{content:"·";margin-right:14px;}
.outcome .name{color:var(--text-muted);}
.outcome b{font-weight:500;color:var(--text-body);}

.about{
  display:inline-flex;
  margin-left:6px;
  padding:0;
  border:0;
  background:none;
  color:var(--text-muted);
  vertical-align:-2px;
  cursor:pointer;
}
.about:hover,.about:focus-visible{color:var(--text-body);}
.about svg{width:14px;height:14px;}

.float{
  --hairline:var(--float-hairline);
  max-width:360px;
  padding:12px 14px;
  border:1px solid var(--text-muted);
  border-radius:var(--radius-surface);
  background:var(--surface-float);
  font-family:var(--font-sans);
}
@supports (position-area:bottom){
  .float{inset:auto;margin:6px 0 0;position-area:bottom span-right;}
}