/* One shared progress value lights the rail and the five setup steps. */
.setup{--setup-progress:.055;--setup-blue:#408CFF;margin:0 calc(24 * var(--layout-unit, 1px)) calc(80 * var(--layout-unit, 1px));padding:calc(74 * var(--layout-unit, 1px)) calc(44 * var(--layout-unit, 1px)) calc(84 * var(--layout-unit, 1px));border-radius:calc(20 * var(--layout-unit, 1px));color:#F1F5FF;background:radial-gradient(ellipse at 40% 105%,#10284B 0,transparent 65%),#090D14;font-family:"Geist",Arial,sans-serif;overflow:hidden}
.setup-inner{max-width:calc(1140 * var(--layout-unit, 1px));margin:auto}
.setup h2{max-width:calc(760 * var(--layout-unit, 1px));font:400 clamp(calc(36 * var(--layout-unit, 1px)),4.1vw,calc(60 * var(--layout-unit, 1px)))/1.06 "Geist",Arial,sans-serif;letter-spacing:-.055em;margin-bottom:calc(60 * var(--layout-unit, 1px))}
.setup h2 span{display:block}
.setup-slider{position:relative;height:calc(44 * var(--layout-unit, 1px));margin:0 calc(11 * var(--layout-unit, 1px)) calc(28 * var(--layout-unit, 1px))}
.setup-rail,.setup-fill{position:absolute;left:0;right:0;top:calc(18 * var(--layout-unit, 1px));height:calc(8 * var(--layout-unit, 1px));border-radius:calc(8 * var(--layout-unit, 1px));pointer-events:none}
.setup-rail{background:#17263D;box-shadow:inset 0 calc(1 * var(--layout-unit, 1px)) calc(1 * var(--layout-unit, 1px)) #FFFFFF08}
.setup-fill{right:auto;width:calc(var(--setup-progress)*100%);background:linear-gradient(90deg,#2666F2,#4DABFF 55%,#D9F1FF);box-shadow:0 0 calc(16 * var(--layout-unit, 1px)) #408CFF70,0 0 calc(34 * var(--layout-unit, 1px)) #408CFF26}
.setup-knob{position:absolute;top:calc(11 * var(--layout-unit, 1px));left:calc(var(--setup-progress)*100%);width:calc(22 * var(--layout-unit, 1px));height:calc(22 * var(--layout-unit, 1px));transform:translateX(-50%);border-radius:50%;background:#FFF;box-shadow:0 0 0 calc(6 * var(--layout-unit, 1px)) #D4EBFF12,0 0 calc(20 * var(--layout-unit, 1px)) #91C7FFA0;pointer-events:none}
.setup-slider input{position:absolute;inset:0 calc(-11 * var(--layout-unit, 1px));width:calc(100% + calc(22 * var(--layout-unit, 1px)));height:calc(44 * var(--layout-unit, 1px));margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.setup-slider:focus-within{outline:calc(2 * var(--layout-unit, 1px)) solid #A9D6FF;outline-offset:calc(8 * var(--layout-unit, 1px));border-radius:calc(12 * var(--layout-unit, 1px))}
.setup-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:calc(24 * var(--layout-unit, 1px));padding:0}
.setup-steps>li{display:grid;grid-template-rows:subgrid;grid-row:span 4}
.setup-step{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-items:start;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;cursor:pointer;color:#8996AC;transition:color .3s}
.setup-step:focus-visible{outline:calc(2 * var(--layout-unit, 1px)) solid #A9D6FF;outline-offset:calc(8 * var(--layout-unit, 1px));border-radius:calc(3 * var(--layout-unit, 1px))}
.setup-number{display:block;font-size:calc(14 * var(--layout-unit, 1px));line-height:1;margin-bottom:calc(18 * var(--layout-unit, 1px));font-variant-numeric:tabular-nums;color:#7C8BA3;transition:color .3s}
.setup-step strong{display:block;font-size:calc(17 * var(--layout-unit, 1px));line-height:1.3;font-weight:500;margin-bottom:calc(12 * var(--layout-unit, 1px))}
.setup-step .setup-description{display:block;font-size:calc(14 * var(--layout-unit, 1px));line-height:1.65;max-width:calc(220 * var(--layout-unit, 1px));color:#8190A7;transition:color .3s}
.setup-step[data-reached="true"]{color:#F1F5FF}
.setup-step[data-reached="true"] .setup-number{color:#B8DCFF}
.setup-step[data-reached="true"] .setup-description{color:#B4C1D4}
.setup-step[aria-current="step"] .setup-number{color:#F1F8FF}
@media(max-width:1100px){.setup{padding:56px 28px 64px}.setup-steps{column-gap:18px}.setup-step strong{font-size:15px}.setup-step .setup-description{display:block;font-size:13px}}
@media(max-width:760px){.setup{margin:0 12px 48px;padding:38px 24px 42px}.setup h2{font-size:clamp(32px,7vw,44px);margin-bottom:30px}.setup-slider{margin-bottom:26px}.setup-steps{grid-template-columns:1fr;grid-template-rows:none;gap:0}.setup-steps>li{display:block;grid-row:auto}.setup-steps li+li{border-top:1px solid #A6CCFF12}.setup-step{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;grid-row:auto;column-gap:15px;padding:18px 0}.setup-number{grid-column:1;grid-row:1 / 3;margin:3px 0 0}.setup-step strong{grid-column:2;font-size:16px;margin-bottom:6px}.setup-step .setup-description{grid-column:2;font-size:14px;max-width:440px}.setup-step:focus-visible{outline-offset:4px}}
@media(prefers-reduced-motion:reduce){.setup-step,.setup-number,.setup-step .setup-description{transition:none}}

.setup-title-line{display:block}.setup-phrase{white-space:nowrap}
@media(max-width:760px){.setup-title-line{display:inline}.setup-phrase{white-space:normal}}

/* White ink on the existing navy field; artwork shares the text column grid. */
.setup-art{display:block;width:100%;height:calc(190 * var(--layout-unit, 1px));margin:0 0 calc(18 * var(--layout-unit, 1px));pointer-events:none;align-self:center;opacity:.26;transition:opacity .35s ease}
.setup-art canvas{display:block;width:calc(200 * var(--layout-unit, 1px));height:calc(200 * var(--layout-unit, 1px));max-width:100%;object-fit:contain;margin:auto;image-rendering:pixelated}
@media(min-width:761px) and (max-width:1100px){.setup-art{height:156px}.setup-art canvas{height:164px}}
@media(max-width:760px){
  .setup{padding-block:30px 32px}
  .setup h2{margin-bottom:22px}
  .setup-slider{margin-bottom:12px}
  .setup-step{grid-template-columns:90px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;padding:12px 0}
  .setup-art{grid-column:1;grid-row:1 / 4;width:90px;height:112px;margin:0}
  .setup-art canvas{width:112px;height:112px;max-width:none;margin-left:-11px}
  .setup-number{grid-column:2;grid-row:1;margin:0 0 6px}
  .setup-step strong{grid-column:2;grid-row:2}
  .setup-step .setup-description{grid-column:2;grid-row:3;font-size:13px;line-height:1.5}
}
@media(max-width:380px){.setup-step{grid-template-columns:67px minmax(0,1fr);column-gap:12px}.setup-art{width:67px;height:90px}.setup-art canvas{width:89.6px;height:89.6px}}

.setup-step[data-reached="true"] .setup-art{opacity:1}
@media(min-width:681px) and (max-width:760px){.setup-art canvas{transform:scale(.8)}}
@media(min-width:761px) and (max-width:1200px){.setup-art canvas{transform:scale(.64)}}
@media(prefers-reduced-motion:reduce){.setup-art{transition:none}}