.tandem-state{text-align:center;width:100%;min-height:340px;font-family:var(--type-family-ui);flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,2.5rem);display:flex;overflow:hidden}.tandem-state--standalone{border:1px solid var(--line);background:var(--surface-raised);border-radius:1rem;max-width:760px;margin-inline:auto;box-shadow:0 14px 40px #0003}.tandem-state__visual{place-items:center;width:200px;height:142px;display:grid}.tandem-state__visual[hidden]{display:none}.tandem-state--illustration-hidden{min-height:260px}.tandem-state-illustration{width:184px;height:132px;color:var(--ink);position:relative}.tandem-state-illustration__plane{border:1px solid var(--line-strong);background:var(--paper);border-radius:18px;position:absolute;inset:18px 21px 13px 15px;overflow:hidden;transform:rotate(-4deg)}.tandem-state-illustration__rail{border-right:1px solid var(--line);background:color-mix(in srgb, var(--surface-raised) 48%, transparent);flex-direction:column;align-items:center;gap:7px;width:28px;height:100%;padding-top:15px;display:flex}.tandem-state-illustration__rail span{border:1px solid var(--muted-soft);background:var(--surface-raised);border-radius:50%;width:5px;height:5px}.tandem-state-illustration__panel{border:1px solid var(--ink);background:var(--surface-raised);border-radius:14px;grid-template-columns:42px 1fr;align-items:center;gap:12px;padding:13px;display:grid;position:absolute;inset:24px 29px 20px 36px;box-shadow:4px 5px #0000003d}.tandem-state-illustration__glyph{width:42px;height:42px;color:var(--blue);background:#e7eeff;border-radius:11px;place-items:center;display:grid}.tandem-state-illustration__glyph svg{fill:none;stroke:currentColor;stroke-width:1.8px;width:21px;height:21px}.tandem-state-illustration__lines{gap:7px;display:grid}.tandem-state-illustration__lines span{background:var(--line-strong);border-radius:999px;height:5px}.tandem-state-illustration__lines span:nth-child(2){width:82%}.tandem-state-illustration__lines span:nth-child(3){width:58%}.tandem-state-illustration__path{background:var(--muted-soft);transform-origin:0;height:1px;position:absolute}.tandem-state-illustration__path--in{width:38px;top:102px;left:1px;transform:rotate(-28deg)}.tandem-state-illustration__path--out{width:36px;top:28px;right:2px;transform:rotate(151deg)}.tandem-state-illustration__node{border:1px solid var(--ink);border-radius:50%;place-items:center;display:grid;position:absolute}.tandem-state-illustration__node--start{background:var(--blue);width:10px;height:10px;box-shadow:0 0 0 4px var(--surface-raised);bottom:17px;left:0}.tandem-state-illustration__node--action{background:var(--signal);width:28px;height:28px;color:var(--action-ink);top:2px;right:0;box-shadow:2px 2px #00000047}.tandem-state-illustration__node--action svg{stroke-width:1.8px;width:14px;height:14px}.tandem-state-illustration[data-state-illustration=filtered] .tandem-state-illustration__node--action{color:var(--blue);background:#e7eeff}.tandem-state-illustration[data-state-illustration=error] .tandem-state-illustration__glyph{color:#9f2f29;background:#ffe7e3}.tandem-state-illustration[data-state-illustration=error] .tandem-state-illustration__node--start,.tandem-state-illustration[data-state-illustration=error] .tandem-state-illustration__node--action{color:#9f2f29;background:#ffe7e3;border-color:#9f2f29}.tandem-state-illustration[data-state-illustration=error] .tandem-state-illustration__path--out{width:16px}.tandem-state__copy{min-width:0;max-width:520px}.tandem-state__copy h1,.tandem-state__copy h2,.tandem-state__copy h3{color:var(--ink);font-family:var(--type-family-ui);font-size:1.25rem;font-weight:var(--type-weight-medium);letter-spacing:0;margin:0;line-height:1.35}.tandem-state__copy p{color:var(--muted);font-size:.9375rem;font-weight:var(--type-weight-regular);margin:.45rem 0 0;line-height:1.5}.tandem-state__action{justify-content:center;margin-top:.15rem;display:flex}.tandem-state--compact{gap:.8rem;min-height:218px;padding:1.5rem 1rem}.tandem-state--compact .tandem-state__visual{width:116px;height:82px}.tandem-state--compact .tandem-state-illustration{transform-origin:50%;width:112px;height:80px;transform:scale(.61)}.tandem-state--compact .tandem-state__copy{max-width:390px}.tandem-state--compact .tandem-state__copy h1,.tandem-state--compact .tandem-state__copy h2,.tandem-state--compact .tandem-state__copy h3{font-size:.9375rem;line-height:1.4}.tandem-state--compact .tandem-state__copy p{margin-top:.25rem;font-size:.8125rem;line-height:1.4}.tandem-state--compact .tandem-state__action{margin-top:.15rem}.tandem-state--compact.tandem-state--illustration-hidden{min-height:152px}@media (width<=480px){.tandem-state{min-height:310px;padding-block:2rem}.tandem-state--illustration-hidden{min-height:230px}.tandem-state--compact{min-height:210px;padding-block:1.25rem}.tandem-state--compact.tandem-state--illustration-hidden{min-height:146px}}