@layer components{ec-training-stripes{--focus:var(--paper);max-inline-size:var(--max);margin-inline:auto;display:block}.stripes-explorer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,7vw,7rem);display:grid}.stripes-diagram{min-inline-size:0}.stripes-instruction{color:var(--muted);text-align:center;margin:0 0 2.5rem;font-size:.8rem}.stripe-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,2vw,1.8rem);padding-inline:10%;display:grid}.stripe-control{color:var(--paper);cursor:pointer;background:0 0;border:0;min-inline-size:0;padding:0;transform:skew(-17deg)}.stripe-slab{background:var(--red);block-size:clamp(12rem,25vw,23rem);transition:transform .24s,background-color .24s;display:block}.stripe-control[aria-pressed=true] .stripe-slab{background:var(--paper);transform:translateY(-.8rem)}.stripe-name{letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere;margin-block-start:1.6rem;font-size:clamp(.7rem,1.1vw,.9rem);font-weight:800;display:block;transform:skew(17deg)}.stripe-control[aria-pressed=true] .stripe-name{text-underline-offset:.5rem;text-decoration:underline;text-decoration-thickness:2px}.stripe-control:focus-visible{outline-color:var(--paper);outline-offset:.7rem}.stripes-reset{color:var(--paper);font:700 .75rem/1.3 var(--sans);cursor:pointer;background:0 0;border:1px solid #777;margin:2.2rem auto 0;padding:.8rem 1.1rem;display:block}.stripes-reset[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:var(--paper)}.stripe-detail{border-block-start:1px solid #555;flex-direction:column;justify-content:center;min-block-size:28rem;min-inline-size:0;padding-block:2rem;display:flex}.stripe-detail-kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin:0 0 1rem;font-size:.7rem;font-weight:800}.stripe-detail h3{font:clamp(2.5rem, 5vw, 5rem)/.98 var(--display);text-transform:uppercase;overflow-wrap:anywhere;margin:0 0 1.4rem}.stripe-detail-body{color:var(--paper);max-inline-size:42ch;margin:0;font-size:1.05rem;line-height:1.75}.stripe-practice{color:var(--muted);margin:1.8rem 0 0;font-size:.8rem;line-height:1.8}.stripes-signature{text-align:center;max-inline-size:30rem;margin:1.5rem auto 0;font-size:.85rem;line-height:1.6}.training-equilibrium{max-inline-size:var(--max);color:var(--muted);text-align:center;border-block-start:1px solid #555;margin:1.5rem auto 0;padding-block-start:1rem;font-size:.85rem;line-height:1.7}@media (width<=900px){.stripes-explorer{grid-template-columns:minmax(0,1fr);gap:2rem}.stripes-diagram{inline-size:100%;max-inline-size:34rem;margin-inline:auto}.stripe-detail{min-block-size:22rem;padding-block:1.5rem}.stripe-detail-body{max-inline-size:60ch}}@media (prefers-reduced-motion:reduce){.stripe-slab{transition:none}.stripe-control[aria-pressed=true] .stripe-slab{transform:none}}}