
.sp-start{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px;border:1px solid #17191d;border-radius:6px;font-family:var(--sp-heading-font);font-weight:700;letter-spacing:.06em;min-height:48px}
.sp-start>span{color:#ff4b16}.sp-start small{font-family:var(--sp-body-font);font-size:.72rem;font-weight:400;letter-spacing:0}.sp-start:hover{background:#17191d;color:white}
.sl-experience{display:block;position:relative;background:#faf8f5;color:#17191d;scroll-margin-top:20px}
.sl-stage{padding-block:40px;position:relative}
.sl-dashboard{position:relative}.sl-counter{font:700 .85rem var(--sp-heading-font);letter-spacing:.12em;margin-top:18px!important}
.sl-progress{position:relative;display:flex;justify-content:space-between;gap:8px;margin-block:20px;max-width:320px}
.sl-track{position:absolute;left:16px;right:16px;top:16px;height:2px;background:#dedad4;overflow:hidden}
.sl-track span{display:block;background:#ff4b16;width:100%;height:100%;transform:scaleX(var(--sl-progress,0));transform-origin:left;transition:transform .45s ease}
.sl-step{display:flex;align-items:center;flex-direction:column;gap:6px;font:700 .72rem var(--sp-heading-font);position:relative;color:#625d56!important;min-width:44px}
.sl-lock{display:grid;place-items:center;width:34px;height:34px;background:#faf8f5;border:1px solid #d5cec5;border-radius:5px;transition:color .25s,border-color .25s}
.sl-shackle{transform-origin:7px 10px;transition:transform .35s ease}.sl-status{font-size:.55rem;letter-spacing:.08em}
.sl-step.is-complete{color:#17191d!important}.sl-step.is-complete .sl-lock{border-color:#ff4b16}.sl-step.is-complete .sl-shackle{transform:translateY(-2px) rotate(-28deg)}
.sl-step[aria-current=step]{color:#c5380d!important}.sl-step[aria-current=step] .sl-lock{background:#ff4b16;color:#17191d;border-color:#ff4b16}
.sl-toast{height:22px;font:700 .72rem var(--sp-heading-font);letter-spacing:.12em;color:#a52c0a}
.sl-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center;padding-block:40px}
.sl-copy{min-width:0;display:grid;justify-items:start;gap:20px}
.sl-copy h2{font-size:clamp(2rem,3.6vw,3.9rem);line-height:1.1;letter-spacing:-.04em;overflow-wrap:anywhere}
.sl-copy p{max-width:38ch;line-height:1.65;font-size:1rem}
.sl-image{min-width:0;overflow:hidden;border-radius:12px;aspect-ratio:3/2;background:#edeae6}
.sl-image img{display:block;width:100%;height:100%;object-fit:contain}
.sl-triggers{display:none}.sl-complete{font:700 .68rem var(--sp-heading-font);letter-spacing:.1em;visibility:hidden}
.sl-enhanced{height:320svh;--sl-stage-height:min(760px,calc(100svh - 40px))}
.sl-enhanced .sl-stage{position:sticky;top:20px;height:var(--sl-stage-height);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:48px;padding-block:24px}
.sl-enhanced .sl-dashboard{grid-column:1;grid-row:1}
.sl-enhanced .sl-panels{display:contents}
.sl-enhanced .sl-panel{display:contents;padding:0}
.sl-enhanced .sl-copy{grid-column:1;grid-row:2;align-self:center;visibility:hidden;opacity:0;transform:translateY(18px);transition:opacity .4s,transform .5s,visibility .5s;pointer-events:none}
.sl-enhanced .sl-image{grid-column:2;grid-row:1/4;align-self:center;visibility:hidden;opacity:0;transform:translateY(20px) scale(.97);transition:opacity .5s,transform .65s,visibility .65s;pointer-events:none}
.sl-enhanced .sl-panel[data-panel="1"] .sl-image{transform:translateX(24px) scale(.98)}
.sl-enhanced .sl-panel.is-active .sl-copy,.sl-enhanced .sl-panel.is-active .sl-image{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.sl-enhanced .sl-complete{grid-column:1;grid-row:3}
.sl-enhanced[data-all-unlocked] .sl-complete{visibility:visible}
.sl-enhanced .sl-triggers{display:grid;position:absolute;inset:0 0 var(--sl-stage-height);grid-auto-rows:1fr;pointer-events:none}
.sl-step.just-unlocked .sl-lock{animation:sl-pop .6s ease both}
.sl-toast.is-showing{animation:sl-notice .7s ease both}
.sl-complete.is-celebrating{animation:sl-pop .7s ease}
@keyframes sl-pop{0%{transform:scale(.8)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes sl-notice{0%,100%{opacity:0;transform:translateY(4px)}20%,75%{opacity:1;transform:none}}
.sp-pixel-overlay{position:fixed;inset:0;z-index:9999;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none;contain:strict}
.sp-pixel-overlay i{background:#ff4b16;opacity:0;animation:sp-pixel 600ms ease-in-out both;animation-delay:var(--delay)}
.sp-pixel-overlay i:nth-child(3n){background:#17191d}
@keyframes sp-pixel{0%,100%{opacity:0;transform:scale(.7)}40%,60%{opacity:1;transform:scale(1.02)}}
@media(min-width:1000px){.sl-progress{flex-direction:column;margin-block:18px;gap:10px}.sl-step{flex-direction:row;gap:12px;min-height:38px}.sl-track{left:16px;top:16px;bottom:16px;right:auto;width:2px;height:auto}.sl-track span{transform:scaleY(var(--sl-progress,0));transform-origin:top}.sl-counter{margin-top:12px!important}}
@media(max-width:799px){
.sl-panel{grid-template-columns:minmax(0,1fr);gap:24px}.sl-copy h2{font-size:clamp(1.6rem,6.5vw,2.6rem)}
.sl-enhanced{height:300svh;--sl-stage-height:calc(100svh - 24px)}
.sl-enhanced .sl-stage{top:12px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) 22px;gap:12px;padding-block:10px}
.sl-enhanced .sl-dashboard{grid-row:1;grid-column:1}
.sl-enhanced .sl-copy{grid-row:2;grid-column:1;align-self:start;gap:10px}
.sl-enhanced .sl-image{grid-row:3;grid-column:1;align-self:stretch;width:100%;height:100%;aspect-ratio:auto;max-height:42svh}
.sl-enhanced .sl-complete{grid-row:4;grid-column:1}
.sl-copy p{font-size:.9rem;line-height:1.45}.sl-progress{margin-block:10px;max-width:none}.sl-toast{height:16px;font-size:.6rem}
.sl-counter{margin-top:6px!important}.sl-dashboard .sp-kicker{font-size:.6rem}
.sl-copy .sp-button{min-height:44px;padding:8px 16px;font-size:.75rem}
.sp-pixel-overlay{grid-template-columns:repeat(6,1fr)}.sp-pixel-overlay i:nth-child(n+37){display:none}
}
@media(max-height:550px){.sl-enhanced{height:auto}.sl-enhanced .sl-stage{position:relative;top:0;height:auto;display:block}.sl-enhanced .sl-panel{display:grid;padding-block:28px}.sl-enhanced .sl-copy,.sl-enhanced .sl-image{visibility:visible;opacity:1;transform:none;pointer-events:auto}.sl-enhanced .sl-image{height:auto;aspect-ratio:3/2;max-height:none}.sl-enhanced .sl-triggers{display:none}}
@media(prefers-reduced-motion:reduce){.sp-pixel-overlay{display:none}.sl-experience *{animation:none!important;transition:none!important}}
