/* Homepage character picker (Shane approved 23 Oct 2026; ported from mockups/char-picker-20261023/).
   Replaces the six-card character row in #characters. Markup: handoff-build/build.py (PICKER_HTML). Behaviour: js/picker.js.
   Layers: assets/picker-20261023c/ + js/picker-layers-20261023c.js. Uses site.css tokens, .h-sec/.g headline, hball.css end mark. */
.pk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage intro" "stage list";grid-template-rows:auto 1fr;column-gap:48px;row-gap:22px;align-items:start}
.pk-intro{grid-area:intro;align-self:end}
.pk-intro .eyebrow{margin:0 0 12px}
.pk .pk-h{font-size:clamp(32px,3.3vw,42px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.pk .pk-br{display:block}
.pk .pk-lead{font-size:18px;line-height:1.5;margin:14px 0 0;max-width:540px}
.pk-stagewrap{grid-area:stage;align-self:center;position:relative}
.pk-list{grid-area:list}
.pk-stage{position:relative;width:100%;max-width:600px;aspect-ratio:1/1;margin:0 auto;perspective:1100px}
/* floating: the ground shadow sits clearly below the ball (ball bottom is at ~71% of the stage) with a visible gap */
.pk-stage .sh{position:absolute;left:50%;top:76.5%;width:42%;height:6.4%;margin-left:-21%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,29,31,.30) 0%,rgba(29,29,31,.16) 55%,rgba(29,29,31,0) 100%);filter:blur(5px);pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
.pk-stage .lay{position:absolute;inset:0;pointer-events:none}
.pk-stage .lay img[hidden]{display:none}
.pk-stage .lay img{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.pk-stage .lay img.full{inset:0;width:100%;height:100%}
.pk-spin{will-change:transform,filter}
.pk-spin .chg{position:absolute;inset:0;display:none}
.pk-spin .chg.on{display:block}
.pk-spin .chg img.pc{will-change:transform,opacity}
.pk-xf{opacity:0}
.pk-cap{text-align:center;margin:-6px 0 0;position:relative;min-height:84px;will-change:opacity,transform}
.pk-cap .nm{margin:0;font-size:14px;font-weight:600;color:var(--link)}
.pk-cap .er{margin:2px 0 0;font-size:26px;letter-spacing:-.6px;font-weight:800;line-height:1.25}
.pk-cap .ds{margin:6px auto 0;max-width:30em;font-size:16px;line-height:1.45;color:var(--muted)}
.pk-cap .ds:empty{display:none}
.pk-cap .er.prompt{font-size:22px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
/* list */
.pk-list .pk-lh{margin:0 0 10px;font-size:15px;line-height:1.4;font-weight:600;color:var(--muted);letter-spacing:0}
.pk-list ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pk .ch{width:100%;display:grid;grid-template-columns:1fr;gap:2px;align-items:center;text-align:left;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--hairline);border-radius:16px;padding:11.5px 18px;cursor:pointer;font:inherit;line-height:1.4;min-height:44px;position:relative}
.pk .ch:hover{border-color:#8E8A82}
.pk .ch .t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.pk .ch .n{font-size:17px;font-weight:800;letter-spacing:-.2px}
.pk .ch .e{font-size:14px;font-weight:700;color:var(--link)}
/* selected: soft red-to-orange gradient border, 3px, rounded via padding-box/border-box backgrounds.
   Stops are slightly muted so 0-90% stays >=3:1 on the page ground and on white; only the last yellow tip is lighter.
   Non-colour cues: 3px edge vs 1px unselected, plus the raised shadow. */
.pk .ch[aria-pressed="true"]{border:3px solid transparent;padding:9.5px 16px;
  background:linear-gradient(var(--surface,#fff),var(--surface,#fff)) padding-box,
             linear-gradient(100deg,#C8102E 0%,#EF2E27 30%,#E66726 70%,#D6731F 90%,#FDCB29 100%) border-box;
  box-shadow:0 8px 22px rgba(29,29,31,.13),0 1px 3px rgba(29,29,31,.08)}
.pk .ch[aria-pressed="true"]:hover{border-color:transparent}
/* focus ring is blue so it never reads as the red/orange selected edge */
.pk .ch:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}
@media (forced-colors:active){.pk .ch[aria-pressed="true"]{border:3px solid Highlight}}
@media (max-width:820px){
  .pk{grid-template-columns:1fr;grid-template-areas:"intro" "stage" "list";grid-template-rows:auto;row-gap:10px}
  .pk-intro{text-align:center}
  .pk .pk-h{font-size:clamp(28px,8vw,40px)}
  .pk .pk-br{display:inline}
  .pk .pk-lead{font-size:16px;margin:10px auto 0}
  .pk-stagewrap{position:sticky;top:0;z-index:2;background:var(--ground);padding:0 var(--pk-gut,32px) 8px;border-bottom:1px solid var(--hairline);margin:0 calc(-1 * var(--pk-gut,32px))}
  .pk-stage{max-width:270px}
  .pk-cap{min-height:65px;margin-top:-14px}
  .pk-cap .nm{font-size:13px}
  .pk-cap .er{font-size:19px}
  .pk-cap .er.prompt{font-size:18px}
  .pk-cap .ds{font-size:14px;margin-top:3px}
  .pk .ch{padding:11.5px 15px}
  .pk .ch[aria-pressed="true"]{padding:9.5px 13px}
  .pk-list .pk-lh{font-size:14px}
}
@media (max-width:640px){.pk-stagewrap{--pk-gut:20px}}
@media (max-width:820px) and (max-height:700px){.pk-stage{max-width:210px}}