.diagram{color:var(--color-text);font-size:var(--fs-caption);line-height:var(--lh-caption);overflow-wrap:break-word;hyphens:auto;--diagram-phone:9.5rem;--diagram-desktop:16rem}.diagram--stack{gap:var(--space-12);flex-direction:column;display:flex}.diagram--columns{gap:var(--space-12);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.diagram__wide{grid-column:1/-1}.diagram--aside{gap:var(--space-12) 0;grid-template-columns:minmax(0,1fr) auto;display:grid}.diagram--aside>:not(.diagram__wide,.diagram__beside){grid-column:1}.diagram--subtle{background-color:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-lg);justify-content:center;min-block-size:16.25rem;padding:clamp(1rem,.8rem + .91vw,1.5rem);container-type:inline-size}.diagram--elevated{padding:var(--space-24);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);container-type:inline-size}.diagram--l{gap:var(--space-16);padding:clamp(1rem,.69rem + 1.36vw,1.75rem)}.diagram-card{padding:var(--space-12);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.diagram__head{justify-content:space-between;align-items:center;gap:var(--space-4) var(--space-12);color:var(--color-text-muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-caps);flex-wrap:wrap;display:flex}.diagram__head--bold{font-weight:var(--fw-bold)}.diagram__signal{align-items:center;gap:var(--space-8);color:var(--color-accent-strong);display:flex}.diagram__dot{background-color:var(--color-accent);border-radius:50%;flex:none;block-size:8px;inline-size:8px}.diagram__grid{gap:var(--space-8);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.diagram__grid--loose{gap:var(--space-12)}.diagram__module{padding:var(--space-12);background-color:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-heading);font-weight:var(--fw-bold);text-align:center}.diagram__module--dashed{border-style:dashed}.diagram__module--centered{align-items:center;gap:var(--space-8);flex-direction:column;display:flex}.diagram__module--l{padding:var(--space-16);font-size:var(--fs-small);line-height:var(--lh-small)}.diagram__sub{color:var(--color-text-muted);font-weight:var(--fw-semibold);margin-block-start:var(--space-4);display:block}.diagram__sub--flush{margin:0}.diagram__card{gap:var(--space-8);padding:var(--space-16) var(--space-12);background:linear-gradient(180deg, var(--color-surface), var(--color-surface-subtle));border:1px solid var(--color-border-strong);border-radius:var(--radius-md);flex-direction:column;display:flex}.diagram__card-title{color:var(--color-text-heading);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-bold)}.diagram__card-text{color:var(--color-text-muted)}.diagram__lane{padding:var(--space-20);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.diagram__lane-items{gap:var(--space-8);color:var(--color-text-heading);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-semibold);flex-direction:column;margin-block-start:var(--space-12);display:flex}.diagram__lane-item{padding:var(--space-8) var(--space-12);background-color:var(--color-surface-subtle);border-radius:var(--radius-sm)}.diagram__connector{block-size:var(--space-24);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.diagram__connector>span{border-inline-start:2px solid var(--color-accent);margin-inline-start:calc(50% - 1px)}.diagram__connector--long{block-size:var(--space-32)}.diagram__connector--2{grid-template-columns:repeat(2,minmax(0,1fr));block-size:1.75rem}.diagram__connector--2>span{border-block-end:2px solid var(--color-accent)}.diagram__connector--2>:first-child{border-inline:0 solid var(--color-accent);border-inline-end-width:2px;border-end-end-radius:var(--radius-md);margin-inline:50% 0}.diagram__connector--2>:last-child{border-end-start-radius:var(--radius-md);margin-inline:0 50%}.diagram__grid--loose,.diagram__grid--loose+.diagram__connector{grid-template-columns:minmax(0,1fr)}.diagram__grid--loose+.diagram__connector>:not(:nth-child(2)){display:none}@container (width>=21rem){.diagram__grid--loose,.diagram__grid--loose+.diagram__connector{grid-template-columns:repeat(3,minmax(0,1fr))}.diagram__grid--loose+.diagram__connector>:not(:nth-child(2)){display:revert}}.diagram__line{block-size:var(--space-16);border-inline-start:2px solid var(--color-accent);place-self:center}.diagram__bar{padding:var(--space-12) var(--space-16);background-color:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-heading);font-weight:var(--fw-bold);text-align:center;text-transform:uppercase;letter-spacing:var(--ls-caps)}.diagram__bar--s{padding:var(--space-8)}.diagram__bar--l{padding:var(--space-16) var(--space-20);border-radius:var(--radius-lg)}.diagram__bar--split{justify-content:space-between;align-items:center;gap:var(--space-4) var(--space-12);text-align:start;flex-wrap:wrap;display:flex}.diagram__bar-text{color:var(--color-text-muted);font-weight:var(--fw-semibold);text-transform:none;letter-spacing:normal}.diagram__bar--l .diagram__bar-text{font-size:var(--fs-small);line-height:var(--lh-small)}.diagram__chips{justify-content:center;gap:var(--space-8);flex-wrap:wrap;display:flex}.diagram__chip{padding:var(--space-8);border:1px dashed var(--color-border-strong);border-radius:var(--radius-sm);color:var(--color-text);font-weight:var(--fw-bold);white-space:nowrap;justify-content:center;align-items:center;display:inline-flex}.diagram__chip--wide{padding-inline:var(--space-16)}.diagram__beside{grid-column:1/-1;grid-template-columns:subgrid;align-items:center;row-gap:var(--space-8);display:grid}.diagram__beside>:last-child{grid-column:1;position:relative}.diagram__beside>:last-child:before{content:"";block-size:var(--space-8);border-inline-start:2px solid var(--color-accent);position:absolute;inset-block-end:100%;inset-inline-start:calc(50% - 1px)}@container (width>=26rem){.diagram__beside>:last-child{grid-column:2;margin-inline-start:var(--space-16)}.diagram__beside>:last-child:before{inline-size:var(--space-16);border-inline-start:0;border-block-start:2px solid var(--color-accent);block-size:auto;inset-block:calc(50% - 1px) auto;inset-inline:auto 100%}}.diagram__caption{max-inline-size:none;color:var(--color-text-muted);font-weight:var(--fw-semibold);text-align:center;text-transform:uppercase;letter-spacing:var(--ls-caps)}.diagram__pair{align-items:center;gap:var(--space-12);grid-template-columns:minmax(0,1fr);display:grid}@container (width>=22rem){.diagram__pair{grid-template-columns:minmax(0, var(--diagram-desktop)) auto var(--diagram-phone);justify-content:center}}.diagram__link{align-items:center;gap:var(--space-4);color:var(--color-accent-strong);font-weight:var(--fw-bold);text-align:center;text-transform:uppercase;letter-spacing:var(--ls-caps);flex-direction:column;display:flex}.diagram__link:before,.diagram__link:after{content:"";border-block-start:2px solid var(--color-accent);inline-size:1.75rem}.diagram__link--top:after{display:none}.diagram__device{text-align:start;flex-direction:column;padding:0;display:flex;overflow:hidden}.diagram__browser-bar{gap:var(--space-4);block-size:var(--space-16);padding:var(--space-4) var(--space-8);background-color:var(--color-border);display:flex}.diagram__browser-bar>span{background-color:var(--color-border-strong);border-radius:50%;block-size:8px;inline-size:8px}.diagram__browser-bar>:first-child{background-color:var(--color-accent)}.diagram__phone{inline-size:100%;max-inline-size:var(--diagram-phone);border-radius:var(--radius-lg);justify-self:center}.diagram__notch{block-size:var(--space-16);place-items:center;display:grid}.diagram__notch:before{content:"";border-radius:var(--radius-xs);background-color:var(--color-border-strong);block-size:4px;inline-size:1.75rem}.diagram__screen{gap:var(--space-8);padding:var(--space-12);flex-direction:column;display:flex}.diagram__row{justify-content:space-between;gap:var(--space-4) var(--space-8);color:var(--color-text-muted);font-weight:var(--fw-semibold);flex-wrap:wrap;display:flex}.diagram__value{color:var(--color-text-heading);white-space:nowrap;font-variant-numeric:tabular-nums}.diagram__qr{gap:var(--space-4);padding:var(--space-12);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);grid-template-columns:repeat(5,8px);grid-auto-rows:8px;display:grid}.diagram__qr>span{background-color:var(--color-text-heading)}.diagram__qr>.diagram__qr-gap{background-color:#0000}.diagram__dots{justify-content:center;gap:var(--space-4);display:flex}