.sp-system-states__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:calc(var(--section-space-l) * 1.3889);align-items:end}.sp-system-states__intro .sp-page-heading{margin-bottom:0}.sp-system-states__intro h1{max-width:13ch}.sp-system-states__legend{border-top:1px solid var(--pd-line-strong)}.sp-system-states__legend div{display:grid;grid-template-columns:34px 1fr;gap:calc(var(--space-s) * 0.9);padding-block:calc(var(--space-xs) * 1.1111);border-bottom:1px solid var(--pd-line)}.sp-system-states__legend span{font:calc(var(--text-xs) * 0.75) var(--pd-mono);color:var(--pd-ember)}.sp-system-states__legend p{font-size:calc(var(--text-s) * 0.9286);color:var(--pd-muted)}
.sp-system-states__workspace{padding-block:calc(var(--space-xl) * 1.037) calc(var(--section-space-l) * 0.8333);border-block:1px solid var(--pd-line);background:var(--base-ultra-dark)}.sp-system-states__layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:calc(var(--space-m) * 0.8)}.sp-system-states__tabs{display:flex;flex-direction:column;align-self:stretch;border:1px solid var(--pd-line);border-radius:var(--radius);padding:calc(var(--space-xs) * 0.5926);background:var(--base-ultra-dark)}.sp-system-states__tabs button{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:calc(var(--space-xs) * 0.8889);min-height:57px;text-align:left;padding:calc(var(--space-xs) * 0.6667) calc(var(--space-xs) * 0.8889);border-radius:calc(var(--radius) * 0.5714);background:transparent;color:var(--pd-muted);font-size:var(--text-xs);transition:background var(--pd-fast),color var(--pd-fast)}.sp-system-states__tabs button:hover{color:var(--pd-text);background:var(--base)}.sp-system-states__tabs button[aria-selected=true]{color:var(--pd-text);background:var(--base)}.sp-system-states__tabs button span{font:calc(var(--text-xs) * 0.75) var(--pd-mono);letter-spacing:calc(var(--h6-letter-spacing) * 0.6);color:var(--pd-ember)}
.sp-system-states__stage{min-height:590px;border:1px solid var(--base-dark);border-radius:calc(var(--radius) * 1.2857);background:var(--base-ultra-dark);overflow:hidden}.sp-system-states__panel{position:relative;min-height:590px;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(320px,1fr);gap:calc(var(--section-space-l) * 0.8333);align-items:center;padding:calc(var(--space-xl) * 1.2148)}
.sp-system-states__copy{max-width:600px}.sp-system-states__copy h2{font-size:calc(var(--h1) * 0.8421);line-height:var(--h1-line-height);max-width:12ch;margin:var(--space-s) 0 calc(var(--space-m) * 0.8)}.sp-system-states__copy>p:not(.sp-note):not(.sp-system-states__feedback){max-width:52ch;color:var(--neutral-light);font-size:calc(var(--text-s) * 1.0714);line-height:var(--text-line-height)}.sp-system-states__copy .sp-actions{margin-top:calc(var(--space-m) * 1.1333)}.sp-system-states__copy>.sp-note{margin-top:calc(var(--space-m) * 0.8);max-width:64ch}
.sp-system-states__code{font:var(--heading-font-weight) clamp(calc(var(--h1) * 1.3158),calc(var(--h1) * 2.7789),calc(var(--h1) * 2.6974))/var(--text-line-height) var(--pd-display);letter-spacing:calc(var(--h1-letter-spacing) * 2);color:var(--primary-dark);text-shadow:0 0 80px color-mix(in srgb,var(--primary) 30.9804%,transparent);user-select:none}.sp-system-states__code--word{font-size:calc(var(--h1) * 1.3684);writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center;letter-spacing:calc(var(--h1-letter-spacing) * 0.8889);color:var(--primary-semi-dark)}
.sp-system-states__seal,.sp-system-states__fault{display:grid;place-items:center;justify-self:center;width:clamp(150px,18vw,240px);aspect-ratio:1;border:1px solid var(--primary-semi-dark);border-radius:50%;background:radial-gradient(circle,var(--primary-dark) 0%,var(--primary-dark) 46%,transparent 68%);box-shadow:0 0 80px color-mix(in srgb,var(--primary) 23.9216%,transparent)}.sp-system-states__seal .pd-icon{width:55px;height:55px;color:var(--primary-light)}.sp-system-states__fault{border-style:dashed;background:radial-gradient(circle,var(--primary-dark),transparent 68%);box-shadow:none}.sp-system-states__fault .pd-icon{width:64px;height:64px;color:var(--primary-semi-light)}
.sp-system-states__pulse{position:relative;display:grid;place-items:center;justify-self:center;width:220px;aspect-ratio:1}.sp-system-states__pulse span{position:absolute;width:34%;aspect-ratio:1;border:1px solid var(--primary-hover);border-radius:50%;animation:sp-system-pulse 2.6s ease-out infinite}.sp-system-states__pulse span:nth-child(2){animation-delay:.85s}.sp-system-states__pulse span:nth-child(3){animation-delay:1.7s}.sp-system-states__pulse:after{content:'';width:15px;aspect-ratio:1;border-radius:50%;background:var(--pd-ember);box-shadow:0 0 30px var(--pd-red-glow)}
.sp-system-states__feedback{min-height:22px;margin-top:calc(var(--space-s) * 0.9);color:var(--pd-acid);font-size:var(--text-xs);line-height:var(--text-line-height)}.sp-system-states__help{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(280px,1fr) auto;gap:calc(var(--space-l) * 1.0667);align-items:end}.sp-system-states__help h2{font-size:var(--h2);max-width:11ch;margin-top:calc(var(--space-xs) * 0.6667)}.sp-system-states__help>p{max-width:55ch;color:var(--pd-muted);line-height:var(--text-line-height)}
@keyframes sp-system-pulse{0%{transform:scale(.25);opacity:0}20%{opacity:.8}100%{transform:scale(1.3);opacity:0}}
@media(max-width:940px){.sp-system-states__intro{grid-template-columns:1fr}.sp-system-states__legend{max-width:520px}.sp-system-states__layout{grid-template-columns:1fr}.sp-system-states__tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:auto}.sp-system-states__tabs button{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--space-xs) * 0.2963);text-align:center;min-width:120px}.sp-system-states__help{grid-template-columns:1fr 1fr}.sp-system-states__help .pd-button{justify-self:start}}
@media(max-width:700px){.sp-system-states__workspace{padding-block:calc(var(--space-l) * 1.2) calc(var(--space-xl) * 1.037)}.sp-system-states__workspace .sp-heading-row{align-items:start;flex-direction:column}.sp-system-states__panel{grid-template-columns:1fr;min-height:650px;gap:calc(var(--space-l) * 0.8889)}.sp-system-states__code,.sp-system-states__seal,.sp-system-states__fault,.sp-system-states__pulse{justify-self:start}.sp-system-states__code--word{writing-mode:initial;transform:none}.sp-system-states__help{grid-template-columns:1fr;gap:calc(var(--space-m) * 0.8667)}}
@media(max-width:470px){.sp-system-states__panel{padding:var(--space-m) calc(var(--space-s) * 1.1)}.sp-system-states__copy .sp-actions{align-items:stretch;flex-direction:column}.sp-system-states__copy .pd-button{justify-content:center;width:100%}.sp-system-states__stage,.sp-system-states__panel{min-height:700px}}
@media(prefers-reduced-motion:reduce){.sp-system-states__pulse span{animation:none;opacity:.34}.sp-system-states__pulse span:nth-child(1){transform:scale(.45)}.sp-system-states__pulse span:nth-child(2){transform:scale(.8)}.sp-system-states__pulse span:nth-child(3){transform:scale(1.2)}}