@layer components{.spotlight{padding-block:var(--space-section-y);position:relative}.spotlight--paper-deep{background:var(--brand-paper-deep)}.spotlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}.spotlight-preview{background:var(--paper-tint);border-radius:var(--radius-xl);border:1px solid var(--line);box-shadow:var(--shadow-2);padding:var(--space-7) var(--space-6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);min-height:380px;position:relative}.spotlight-preview svg{width:100%;max-width:420px;height:auto}[data-rainbow-scope] .spot-band-1{stroke:var(--rainbow-1)}[data-rainbow-scope] .spot-band-2{stroke:var(--rainbow-2)}[data-rainbow-scope] .spot-band-3{stroke:var(--rainbow-3)}[data-rainbow-scope] .spot-band-4{stroke:var(--rainbow-4)}[data-rainbow-scope] .spot-band-5{stroke:var(--rainbow-5)}.spotlight-palettes{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.spotlight-pills-label{font-family:var(--font-body);font-size:var(--fs-3xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--muted)}.spotlight-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}.spotlight-pills button{width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:var(--radius-pill);background:var(--line);box-shadow:var(--shadow-1);cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}.spotlight-pills button:hover{transform:scale(1.1)}.spotlight-pills button[aria-pressed=true]{border-color:var(--ink-deep);transform:scale(1.15)}.spotlight-copy h2{font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);max-width:14ch}.spotlight-copy p{font-size:var(--fs-lg);max-width:42ch;margin-top:var(--space-3)}.spotlight-steps{list-style:none;padding:0;margin:var(--space-5) 0;display:grid;gap:var(--space-2);counter-reset:step}.spotlight-steps li{display:grid;grid-template-columns:32px 1fr;gap:var(--space-3);align-items:baseline;font-size:var(--fs-md)}.spotlight-steps li:before{content:counter(step,decimal-leading-zero);counter-increment:step;font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500;color:var(--brand-champagne)}@media(max-width:800px){.spotlight-grid{grid-template-columns:1fr;gap:var(--space-7)}}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/section-storybook-spotlight.css.map */