/* stepper widget: a small Macintosh window, one step at a time. Selectors are all under .w-stepper. */
.w-stepper{display:grid;gap:12px}
.w-stepper-win{border:3px solid var(--ink);border-radius:8px;background:var(--paper-hi);box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.w-stepper-bar{padding:6px 10px;text-align:center;border-bottom:3px solid var(--ink);background:repeating-linear-gradient(180deg,var(--ink) 0 2px,var(--paper-hi) 2px 5px)}
.w-stepper-bar span{padding:0 10px;background:var(--paper-hi);font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.w-stepper-body{display:grid;gap:14px;padding:14px}
.w-stepper-tabs{display:flex;flex-wrap:wrap;gap:8px}
.w-stepper-tab{position:relative;flex:1 1 90px;min-height:48px;padding:0 10px 6px;font:600 14px var(--sans);color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:8px;cursor:pointer;overflow:hidden;transition:transform var(--t-fast) var(--ease-snap)}
.w-stepper-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--warm);transform:scaleX(0);transform-origin:left;transition:transform var(--t-story) var(--ease)}
.w-stepper-tab:nth-child(2)::after{background:var(--spark)}.w-stepper-tab:nth-child(3)::after{background:var(--go)}.w-stepper-tab:nth-child(4)::after{background:var(--water)}.w-stepper-tab:nth-child(5)::after{background:var(--water-deep)}.w-stepper-tab:nth-child(6)::after{background:var(--ink2)}
.w-stepper-tab.seen::after{transform:scaleX(1)}
.w-stepper-tab[aria-selected=true]{background:var(--ink);color:var(--paper-hi)}
.w-stepper-tab:active{transform:scale(.96)}
.w-stepper-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.w-stepper-step h3{display:flex;align-items:center;gap:10px;font-size:26px}
.w-stepper-n{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border:3px solid var(--ink);border-radius:50%;background:var(--spark);font:700 16px var(--sans)}
.w-stepper-step p{margin-top:6px}
.w-stepper-art{margin:10px 0 0;max-width:340px}
.w-stepper-art svg{width:100%;height:auto;display:block}
.w-stepper:not(.is-live) .w-stepper-body{padding-top:14px}
.w-stepper-next{justify-self:start;padding:0 20px;font:700 15px var(--sans);color:var(--ink);background:var(--card);border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.w-stepper-next:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (prefers-reduced-motion:no-preference){.w-stepper-step.go{animation:w-stepper-in var(--t-base) var(--ease)}}
@keyframes w-stepper-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.w-stepper-tab,.w-stepper-tab::after{transition:none}}