@layer components{@scope(.flow){:scope{max-width:var(--pm-container);padding-block:var(--pm-space-12);gap:var(--pm-space-4);flex-direction:column;margin-inline:auto;display:flex;container:flow/inline-size}h1{max-width:20ch;font-size:var(--pm-text-3xl)}h2{font-size:var(--pm-text-xl);margin-top:var(--pm-space-6);text-transform:uppercase}.flow__lede{color:var(--pm-text-muted);font-size:var(--pm-text-lg)}p,li{color:var(--pm-text-muted)}:scope>p,:scope>ul,:scope>ol{max-width:var(--pm-measure)}ol,ul{padding-left:var(--pm-space-6);gap:var(--pm-space-3);flex-direction:column;display:flex}.flow__machine{gap:var(--pm-space-6);padding:var(--pm-space-6);margin-block:var(--pm-space-6);flex-direction:column;display:flex;container-type:inline-size}.flow__machine>h2{font-size:var(--pm-text-sm);text-transform:uppercase;letter-spacing:var(--pm-tracking-label);color:var(--pm-text-muted);margin-top:0}.flow__states{gap:var(--pm-space-3);display:grid}.flow__state{gap:var(--pm-space-2);padding:var(--pm-space-4);border:var(--pm-hairline) solid var(--pm-border);flex-direction:column;display:flex}.flow__state>span,.flow__actions li>span{font-family:var(--pm-font-mono);font-size:var(--pm-text-sm);color:var(--pm-text-muted)}.flow__state h3,.flow__actions h3{font-size:var(--pm-text-lg)}.flow__claim{font-family:var(--pm-font-mono);color:var(--pm-accent-strong);text-align:center}.flow__terminals{gap:var(--pm-space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));padding:0;list-style:none;display:grid}.flow__terminals li{gap:var(--pm-space-1);padding-top:var(--pm-space-3);border-top:var(--pm-hairline) solid var(--pm-border);flex-direction:column;display:flex}.flow__terminals b{color:var(--pm-text)}.flow__terminals span{font-size:var(--pm-text-sm);color:var(--pm-text-muted)}.flow__actions{gap:var(--pm-space-4);margin-block:var(--pm-space-6);flex-direction:column;display:flex}.flow__actions>h2{margin-top:0}.flow__actions>ol{gap:var(--pm-space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));padding:0;list-style:none;display:grid}.flow__actions li{gap:var(--pm-space-2);padding:var(--pm-space-4);flex-direction:column;display:flex}@container (inline-size>=34rem){.flow__states{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}}}}