@layer components{@scope(.flow){:scope{max-width:var(--pm-measure);padding-block:var(--pm-space-12);gap:var(--pm-space-4);flex-direction:column;margin-inline:auto;display:flex}h1{font-size:var(--pm-text-2xl)}h2{font-size:var(--pm-text-xl);margin-top:var(--pm-space-6)}.flow__lede{color:var(--pm-text-muted);font-size:var(--pm-text-lg)}p,li{color:var(--pm-text-muted)}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__nodes{gap:var(--pm-space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr));padding:0;list-style:none;display:grid}.flow__node{align-items:center;gap:var(--pm-space-2);min-height:var(--pm-touch);padding:var(--pm-space-3) var(--pm-space-2);border:var(--pm-hairline) solid var(--pm-border);cursor:pointer;text-align:center;flex-direction:column;transition:border-color .3s;display:flex}.flow__node input{width:var(--pm-hairline);height:var(--pm-hairline);opacity:0;pointer-events:none;position:absolute}.flow__node:hover{border-color:var(--pm-accent)}.flow__node:has(input:checked){border-color:var(--pm-accent)}.flow__node:has(input:focus-visible){outline:calc(var(--pm-hairline) * 2) solid var(--pm-accent);outline-offset:calc(var(--pm-hairline) * 2)}.flow__icon{aspect-ratio:1;border:var(--pm-hairline) solid var(--pm-border);width:2.75rem;color:var(--pm-text-muted);place-items:center;display:grid}.flow__icon svg{width:55%;height:55%}.flow__node:has(input:checked) .flow__icon{border-color:var(--pm-accent);background:var(--pm-accent-strong);color:var(--pm-accent-contrast)}.flow__n{font-family:var(--pm-font-mono);font-size:var(--pm-text-sm);color:var(--pm-text-muted)}.flow__label{font-family:var(--pm-font-heading);font-size:var(--pm-text-sm);text-transform:uppercase;letter-spacing:var(--pm-tracking-label);color:var(--pm-text)}.flow__panel{gap:var(--pm-space-2);padding-top:var(--pm-space-4);border-top:var(--pm-hairline) solid var(--pm-border);display:none}:is(:scope:has(.flow__nodes>li:first-child input:checked) .flow__panel:first-of-type,:scope:has(.flow__nodes>li:nth-child(2) input:checked) .flow__panel:nth-of-type(2),:scope:has(.flow__nodes>li:nth-child(3) input:checked) .flow__panel:nth-of-type(3),:scope:has(.flow__nodes>li:nth-child(4) input:checked) .flow__panel:nth-of-type(4)){flex-direction:column;display:flex}.flow__step-n{font-family:var(--pm-font-mono);font-size:var(--pm-text-2xl);color:var(--pm-accent);line-height:1}.flow__panel h3{font-size:var(--pm-text-lg)}.flow__unhappy b{color:var(--pm-accent-strong);font-weight:600}@container (width>=34rem){.flow__icon{width:3.25rem}.flow__node{padding:var(--pm-space-4) var(--pm-space-3)}}}}