/* Tracking screens (live HUD, setup, summary).
   Live screen: the camera fills the whole screen edge to edge, and a thin HUD is drawn over it, the way
   pro shot-tracking apps do it: round voice button top left, small clock top centre, translucent half-court
   shot map flush to the top right, MAKES / ATTEMPTS in heavy condensed white numerals at the bottom centre,
   atom (Shot Science) bottom left, a small settings glyph under the voice button, red STOP bottom right. No panels, no side column. */
#track{--hud-in:max(16px,env(safe-area-inset-left,0px));--hud-in-r:max(16px,env(safe-area-inset-right,0px));--hud-btn:52px;
  --hud-lime:#c8ff2e;--hud-teal:#2de2d0;--hud-orange:#ff6a1a;--hud-red:#e3283c;
  --hud-num:"Big Shoulders Display","Archivo Narrow","Arial Narrow",system-ui,sans-serif;--hud-cap:"Archivo",system-ui,sans-serif}
#track .tk-stage{inset:0;right:0}
/* full bleed in landscape (crop, never letterbox); the tracker reads object-fit to map taps and drawings */
@media (orientation:landscape){ #track video{object-fit:cover} }

/* very light top and bottom shade so white HUD type reads on a bright sky or a white garage door */
.hud-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.34))}

/* ---------- round corner buttons ---------- */
.hud-btn{position:absolute;width:var(--hud-btn);height:var(--hud-btn);border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  background:transparent;color:#fff;z-index:3}
.hud-btn svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.25));overflow:visible}
.hud-btn:active{transform:scale(.94)}
.hud-mute{left:var(--hud-in);top:14px}
/* every corner glyph sits in the same dark translucent disc so it reads on a bright sky or a white garage door */
.hud-mute,.hud-gear,.hud-atom{background:rgba(24,24,26,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hud-mute svg,.hud-gear svg,.hud-atom svg{filter:none}
.hud-mute .spk{fill:currentColor;stroke:none}
.hud-mute .off{display:none}
.hud-mute[aria-pressed="false"] .on{display:none}
.hud-mute[aria-pressed="false"] .off{display:inline}
.hud-gear{position:relative}
.hud-gear[aria-expanded="true"]{background:rgba(60,60,64,.75)}

/* ---------- top centre: clock, drill name, status ---------- */
.hud-top{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;z-index:2}
.hud-timer{font:600 11px/1 var(--hud-cap);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:rgba(255,255,255,.92);background:rgba(0,0,0,.26);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:4px;padding:3px 5px 2px}
.hud-drill,.hud-status{font:700 10px/1 var(--hud-cap);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap}
.hud-status{color:rgba(255,255,255,.75);font-weight:600;letter-spacing:.14em}

/* ---------- top right: live half-court shot map ---------- */
/* a floating line drawing: thin white court lines on a barely-there tint, no card, no shadow, not attached to the edge */
.hud-map{position:absolute;top:10px;right:var(--hud-in-r);width:120px;height:79px;z-index:2;pointer-events:none;overflow:hidden;
  background:rgba(0,0,0,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:6px}
.hud-map.shift{right:auto;left:calc(var(--hud-in) + var(--hud-btn) + 12px)}
.hud-map svg{display:block;width:100%;height:100%}
.hud-map .crt{fill:none;stroke:rgba(255,255,255,.88);stroke-width:1;vector-effect:non-scaling-stroke}
.hud-map .crt .dot{stroke-dasharray:1.5 2.5;stroke-linecap:round;stroke-opacity:.8}
/* a spot is green when most shots from there went in, red when most missed; the latest spot wears a white ring */
.hud-map .sp circle{fill:#ff3b30;stroke:none}
.hud-map .sp.mk circle{fill:#20c95a}
.hud-map .sp text{font:700 7px/1 var(--hud-cap);fill:#fff;text-anchor:middle;dominant-baseline:central}
.hud-map .sp.last circle{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.hud-map .sp.new{animation:spIn .5s cubic-bezier(.2,1.6,.4,1);transform-box:fill-box;transform-origin:center}
@keyframes spIn{0%{transform:scale(0)}100%{transform:scale(1)}}

/* ---------- bottom centre: MAKES / ATTEMPTS, or one big stat after a shot ---------- */
.hud-score{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);pointer-events:none;z-index:2;text-align:center;color:#fff}
.hud-count{display:flex;align-items:flex-end;justify-content:center;gap:0}
.hud-n{display:flex;flex-direction:column;align-items:center;min-width:72px}
.hud-n span{font:700 clamp(38px,12.5vh,96px)/.86 var(--hud-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.3);display:inline-block}
.hud-n small,.hud-stat small{font:700 9px/1 var(--hud-cap);letter-spacing:.18em;text-transform:uppercase;margin-top:7px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.hud-n span.tick{animation:hudTick .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes hudTick{0%{transform:translateY(32%);opacity:0}100%{transform:none;opacity:1}}
.hud-slash{display:block;width:1.5px;height:clamp(46px,14.5vh,108px);background:#fff;transform:rotate(17deg);margin:0 10px 2px;border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,.25)}
.hud-stat{display:flex;flex-direction:column;align-items:center;animation:hudSwap .35s ease-out}
.hud-stat b{font:900 clamp(44px,15.5vh,120px)/.86 var(--hud-num);font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hud-stat b sup{font-size:.42em;vertical-align:top;position:relative;top:.12em;margin-left:.04em}
.hud-stat.lime b{color:#fff}
.hud-stat small{font-size:11px;font-stretch:72%;letter-spacing:.06em;margin-top:8px}
@keyframes hudSwap{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

/* "+1" floaters rise off the makes numeral and fade */
.hud-floats{position:absolute;inset:0;pointer-events:none;z-index:4}
/* heavy condensed italic numeral with a thin dark keyline and a hard drop shadow, popped in then floated up */
.hud-float{position:absolute;transform:translate(-50%,-50%);font:900 italic 62px/1 var(--hud-num);letter-spacing:-.02em;color:#fff;
  -webkit-text-stroke:1.5px rgba(0,0,0,.45);paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.38),0 6px 18px rgba(0,0,0,.5),0 0 22px rgba(255,106,26,.35);
  animation:hudFloat 1.4s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes hudFloat{0%{opacity:0;transform:translate(-50%,-10%) scale(.4) skewX(-6deg)}12%{opacity:1;transform:translate(-50%,-55%) scale(1.18) skewX(-6deg)}
  22%{transform:translate(-50%,-70%) scale(1) skewX(-6deg)}62%{opacity:1}100%{opacity:0;transform:translate(-50%,-230%) scale(.96) skewX(-6deg)}}

/* what the coach said, as a subtitle (only while the voice is off, so a muted session still gets the tip) */
.hud-caption{position:absolute;left:50%;bottom:calc(clamp(38px,12.5vh,96px) + 44px);transform:translateX(-50%);max-width:min(64%,560px);text-align:center;
  font:600 15px/1.3 var(--hud-cap);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.6);pointer-events:none;z-index:2;white-space:pre-line}
.hud-caption span{background:rgba(0,0,0,.42);padding:2px 8px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- bottom left: the atom. Top left, under the voice button: a small settings glyph. Its tray holds the parent's fix buttons (Make / Miss / Undo),
   Set rim and Debug, so the screen itself carries nothing but the counter and STOP. ---------- */
.hud-left{position:absolute;left:var(--hud-in);bottom:14px;display:flex;align-items:center;gap:12px;z-index:3}
/* settings sit quietly under the voice button (top left) so the bottom-left corner holds the atom alone */
.hud-tl{position:absolute;left:calc(var(--hud-in) + 7px);top:calc(14px + var(--hud-btn) + 10px);z-index:3}
.hud-tl .hud-gear{width:38px;height:38px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:.8}
.hud-tl .hud-gear svg{width:58%;height:58%;stroke-width:1.8;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.hud-tl .hud-gear[aria-expanded="true"]{opacity:1}
.hud-tray{position:absolute;left:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:2px;padding:10px 8px 6px;border-radius:14px;min-width:204px;
  background:rgba(18,18,20,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tray-h{margin:0 8px 8px;font:700 10px/1 var(--hud-cap);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hud-pad{display:flex;gap:6px;margin:0 0 8px;padding:0 0 10px;border-bottom:1px solid rgba(255,255,255,.12)}
.hud-tray .hud-pad button{flex:1;min-height:58px;border-radius:10px;border:0;padding:8px 4px 7px;background:rgba(255,255,255,.08);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit}
.hud-pad svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hud-pad small{font:700 11px/1 var(--hud-cap);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.hud-tray .hud-pad button:active{background:rgba(255,255,255,.26)}
.hud-tray .hud-pad button:disabled{opacity:.35}
.hud-tray > button{min-height:44px;border-radius:10px;padding:8px 10px;border:0;background:transparent;color:#fff;font:600 14px/1 var(--hud-cap);text-align:left;white-space:nowrap}
.hud-tray > button:active{background:rgba(255,255,255,.12)}
.hud-tray > button[aria-pressed="true"]{color:var(--hud-teal)}

/* ---------- bottom right: STOP ---------- */
.hud-stop{position:absolute;right:var(--hud-in-r);bottom:16px;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--hud-red);color:#fff;
  font:800 13px/1 var(--hud-num);letter-spacing:.02em;text-transform:uppercase;box-shadow:0 1px 6px rgba(0,0,0,.25);z-index:3}
.hud-stop:active{transform:scale(.94)}

.lv-debug-off{position:absolute;right:calc(var(--hud-in-r) + 140px);top:10px;border:0;background:#fff;color:#111;border-radius:999px;padding:6px 12px;font:700 13px/1 var(--hud-cap);min-height:36px;z-index:3}

@media (orientation:portrait){
  .hud-n span,.hud-stat b{font-size:clamp(38px,14vw,84px)}
  .hud-slash{height:clamp(44px,16vw,92px)}
  .hud-score{bottom:84px}
  .hud-caption{bottom:calc(clamp(44px,17vw,96px) + 120px);max-width:88%}
  .hud-map{width:108px;height:69px}
}

/* ================= Setup: start screen, mark the rim, "All set" ================= */
/* Start screen: three picture steps, readable at arm's length by a kid or a parent in a hurry. */
#track .tk-start{padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));place-items:center;
  background:radial-gradient(circle at 50% 30%,#1d2740,#06090f 75%)}
#track .su-start{max-width:920px;width:100%;gap:10px}
#track .su-title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:#fff;font-size:clamp(2rem,10vh,3.4rem);line-height:1;letter-spacing:.02em}
#track .su-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;counter-reset:su;text-align:center;color:#fff}
#track .su-steps li{counter-increment:su;position:relative;background:#141b29;border:2px solid #2b3549;border-radius:18px;padding:10px 10px 12px;
  display:flex;flex-direction:column;align-items:center;gap:4px}
#track .su-steps li::before{content:counter(su);position:absolute;left:-8px;top:-8px;width:40px;height:40px;border-radius:50%;background:#e2611f;color:#fff;
  font-family:var(--font-display);font-weight:900;font-size:1.7rem;line-height:40px;box-shadow:0 3px 0 rgba(0,0,0,.4)}
#track .su-steps svg{width:100%;height:clamp(64px,25vh,120px);overflow:visible}
#track .su-steps .svl{font:700 15px "Atkinson Hyperlegible",system-ui,sans-serif;fill:#ffcf6e}
#track .su-steps .svn{font:900 15px system-ui,sans-serif;fill:#111;text-anchor:middle}
#track .su-steps b{font-family:var(--font-display);font-weight:900;font-size:clamp(1.3rem,6.6vh,1.8rem);line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.01em}
#track .su-steps span{font-size:clamp(.95rem,4.4vh,1.1rem);color:#c9d1e3;line-height:1.2}
#track .su-steps em{font-style:normal;color:#ffb020;font-weight:700}
#track .su-actions{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
#track .su-go-btn{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,7vh,1.9rem);letter-spacing:.03em;
  padding:10px 44px;min-height:60px;box-shadow:0 4px 0 #8f3510}
#track .su-cancel{color:#fff;border-color:rgba(255,255,255,.7);min-height:52px;padding:8px 22px}
#track .su-err{color:#ffb6ae;margin:0;font-weight:700}
#track .su-err:empty{display:none}
#track .su-private{margin:0;color:#8d97ab}

/* While marking the rim the picture gets the whole screen; score and buttons wait. */
/* "ready" (the All set card) already has the live layout, so Make / Miss work the moment the rim is marked. */
#track[data-mode="setup"] :is(.hud-shade,.hud-btn,.hud-top,.hud-map,.hud-score,.hud-floats,.hud-caption,.hud-left,.hud-tl,.hud-stop),
#track[data-mode="ready"] :is(.hud-score,.hud-caption,.hud-map){display:none}

.su-banner{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 24px);
  box-sizing:border-box;background:rgba(10,14,22,.9);border:3px solid #ffb020;border-radius:22px;padding:10px 16px 10px 12px;pointer-events:none;
  box-shadow:0 6px 24px rgba(0,0,0,.45)}
.su-rimpic{width:clamp(84px,24vh,124px);flex:0 0 auto}
.su-dot circle{fill:#3a4357;stroke:#000;stroke-width:2.5}
.su-dot text{font:900 14px system-ui,sans-serif;fill:#c9d1e3;text-anchor:middle}
.su-banner[data-step="1"] .su-dot-l circle,.su-banner[data-step="2"] .su-dot-r circle{fill:#ffb020}
.su-banner[data-step="1"] .su-dot-l text,.su-banner[data-step="2"] .su-dot-r text{fill:#111}
.su-banner[data-step="2"] .su-dot-l circle{fill:#3fdc8a}
.su-banner[data-step="2"] .su-dot-l text{fill:#06301a}
.su-banner[data-step="1"] .su-dot-l,.su-banner[data-step="2"] .su-dot-r{animation:suPulse 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes suPulse{50%{transform:scale(1.3)}}
.su-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.su-step{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#ffcf6e;font-size:clamp(.95rem,4.6vh,1.2rem);line-height:1}
.su-msg{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:#fff;font-size:clamp(1.9rem,11vh,3.1rem);line-height:.95;letter-spacing:.01em}
.su-msg em{font-style:normal;color:#ffb020}
.su-hint{font-size:clamp(.95rem,4.6vh,1.15rem);color:#d5dbe8;line-height:1.2}
.su-redo{pointer-events:auto;align-self:center;min-height:52px;border-radius:999px;background:#1a202c;border:2px solid rgba(255,255,255,.8);color:#fff;
  font-weight:700;font-size:1rem;padding:8px 16px;white-space:nowrap}
.su-back{position:absolute;left:10px;top:10px;min-height:48px;border-radius:999px;background:rgba(10,14,22,.82);border:1px solid rgba(255,255,255,.35);color:#fff;
  font-weight:700;font-size:1rem;padding:8px 16px;z-index:2}
.su-loupe{position:absolute;width:132px;height:132px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px #000,0 8px 24px rgba(0,0,0,.6);pointer-events:none;z-index:4}

/* "All set": big green card on the side away from the hoop; the marked rim glows green on the picture. */
.su-ready{position:absolute;inset:0;display:grid;place-items:center;z-index:3;background:radial-gradient(circle at 50% 50%,rgba(22,163,74,.0),rgba(22,163,74,.28))}
.su-ready.warn{background:radial-gradient(circle at 50% 50%,rgba(255,198,51,0),rgba(255,198,51,.22))}
.tk-stage[data-hoop="right"] .su-ready,.tk-stage[data-hoop="left"] .su-ready{grid-template-columns:1fr 1fr}
.tk-stage[data-hoop="right"] .su-ready-card{grid-column:1;max-width:92%}
.tk-stage[data-hoop="left"] .su-ready-card{grid-column:2;max-width:92%}
.su-ready-card{background:#16a34a;color:#fff;border-radius:28px;padding:16px 30px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;
  max-width:min(54%,460px);box-sizing:border-box;box-shadow:0 8px 0 rgba(0,0,0,.35),0 12px 40px rgba(0,0,0,.4);animation:suIn .45s cubic-bezier(.2,1.4,.4,1)}
.su-ready.warn .su-ready-card{background:#ffc633;color:#1a1200;max-width:min(60%,500px)}
@keyframes suIn{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.su-check{width:clamp(48px,18vh,84px);height:auto}
.su-check circle{fill:#fff}
.su-check path{fill:none;stroke:#16a34a;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.su-check .bang,.su-ready.warn .su-check .tick{display:none}
.su-ready.warn .su-check .bang{display:inline;stroke:#1a1200}
.su-ready-big{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,18vh,5.4rem);line-height:.9;letter-spacing:.01em}
.su-ready.warn .su-ready-big{font-size:clamp(2rem,12vh,3.6rem)}
.su-ready-sub{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,9vh,2.7rem);line-height:1}
.su-ready.warn .su-ready-sub{font-family:var(--font-body);text-transform:none;font-size:clamp(1.05rem,5.4vh,1.35rem);font-weight:700;line-height:1.2}
.su-ready-note{font-size:clamp(.9rem,4.2vh,1.05rem);font-weight:700;opacity:.92}
.su-ready-note:empty{display:none}
.su-ready-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.su-ready-btns button{min-height:52px;border-radius:999px;font-weight:700;font-size:1.05rem;padding:8px 18px;border:2px solid #1a1200}
.su-fix{background:#1a1200;color:#fff}
.su-go{background:transparent;color:#1a1200}

/* Saved rim from last time: a quick check, gone after a few seconds. */
.su-check-chip{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(10,14,22,.88);
  border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 5px 5px 16px;white-space:nowrap;z-index:2}
.su-check-chip span{font-weight:700;font-size:1rem}
.su-check-chip button{min-height:44px;border-radius:999px;border:0;background:#ffb020;color:#111;font-weight:700;font-size:1rem;padding:6px 14px}
.tk-stage[data-hoop="right"] .su-check-chip{left:34%}
.tk-stage[data-hoop="left"] .su-check-chip{left:66%}

@media (orientation:portrait){
  #track .su-steps{grid-template-columns:1fr;gap:12px;padding-left:10px;box-sizing:border-box}
  #track .su-steps li{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto;text-align:left;column-gap:12px;align-items:center;padding:10px 12px}
  #track .su-steps svg{grid-row:1 / span 2;height:auto}
  #track .su-steps b{align-self:end}
  #track .su-steps span{align-self:start}
  #track .su-title{font-size:2.6rem}
  #track[data-mode="setup"] .tk-stage{bottom:env(safe-area-inset-bottom,0px)}
  .su-banner{bottom:60px;flex-wrap:wrap;justify-content:center;text-align:center}
  .su-msg{font-size:clamp(1.8rem,9vw,2.6rem)}
  .su-step,.su-hint{font-size:1.05rem}
  .su-ready,.tk-stage[data-hoop] .su-ready{grid-template-columns:1fr;justify-items:center;align-items:end;padding:0 0 70px}
  .su-ready-card,.su-ready.warn .su-ready-card,.tk-stage[data-hoop] .su-ready-card{grid-column:1;max-width:92%}
  .su-ready-big{font-size:clamp(2.6rem,15vw,4.4rem)}
  .su-ready-sub{font-size:clamp(1.4rem,8vw,2.2rem)}
  .su-check-chip,.tk-stage[data-hoop] .su-check-chip{left:50%;white-space:normal;max-width:92%}
}

/* ---------- after Stop: session results ----------
   1. .sr  result card over the dimmed last camera frame: dark translucent card, title + time, four columns
      (stars, accuracy, average arc, average release time) with thin light numerals, tiny spaced caps labels and
      TARGET lines, then a gray and an orange button. Close X in the top right corner.
   2. .rp  report pages, white, read with the phone upright: session header with thin orange bars, a swipeable
      shot chart / zone chart card, Shot Science averages, the fix for next time and its drill. */
#tkSummary[hidden]{display:none}
#tkSummary:not([hidden]){display:block;padding:0;background:#000;overflow:hidden;place-items:initial;z-index:20}
#tkSummary{--sr-orange:#f2581f;--sr-cap:"Archivo",system-ui,sans-serif;--sr-num:"Archivo",system-ui,sans-serif}
#tkSummary [hidden]{display:none!important}
#tkSummary button{font-family:var(--sr-cap);-webkit-tap-highlight-color:transparent;cursor:pointer}
#tkSummary svg{display:block}

.sr{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--sr-cap);overflow:hidden}
.sr-bg{position:absolute;inset:-12px;background:#16181c center/cover no-repeat;filter:saturate(.75) brightness(.62) blur(.6px)}
.sr-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
.sr-x{position:absolute;top:12px;right:var(--hud-in-r,16px);width:38px;height:38px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  background:rgba(40,40,42,.72);color:#fff;z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sr-x svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* compact HUD card: ~45% of the landscape screen wide, small caps, slim buttons */
.sr-card{position:relative;z-index:1;width:min(338px,calc(100vw - 2 * var(--hud-in,16px) - 100px));box-sizing:border-box;margin-top:48px;
  background:rgba(22,22,24,.9);border-radius:4px;padding:10px 10px 10px;box-shadow:0 8px 30px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:srIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes srIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
.sr-av{position:absolute;left:50%;top:-16px;width:32px;height:32px;margin-left:-16px;border-radius:50%;background:#2b2d33;border:1.5px solid rgba(255,255,255,.9);
  display:grid;place-items:center;font:700 13px/1 var(--sr-cap);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.sr-head{display:flex;flex-direction:column;gap:4px;padding:1px 2px 8px;border-bottom:1px solid rgba(255,255,255,.14);min-height:26px}
.sr-head b{font:700 11.5px/1.1 var(--sr-cap);max-width:36%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-head span{display:flex;align-items:center;gap:3px;font:500 8.5px/1 var(--sr-cap);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.sr-head svg{width:8.5px;height:8.5px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sr-pill{position:absolute;right:10px;top:10px;max-width:calc(50% - 30px);box-sizing:border-box;display:flex;align-items:center;gap:3px;background:#38383c;border-radius:3px;padding:4px 6px;font:600 7.5px/1 var(--sr-cap);color:#fff;white-space:nowrap}
.sr-pill svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:9px 0 10px}
.sr-col{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 3px;min-width:0}
.sr-col+.sr-col{border-left:1px solid rgba(255,255,255,.16)}
.sr-col small{font:700 6.5px/1 var(--sr-cap);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.sr-col>b{display:flex;align-items:flex-start;justify-content:center;margin-top:13px;font:300 23px/.9 var(--sr-num);font-stretch:92%;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#fff}
.sr-col>b .u{font-size:.86em;letter-spacing:-.02em}
.sr-col>b sup{font-size:.56em;line-height:1;margin-left:.02em}
.sr-col>b.none{color:rgba(255,255,255,.4)}
.sr-frac{font:500 8.5px/1 var(--sr-cap);margin-top:3px;font-variant-numeric:tabular-nums}
.sr-col em{margin-top:auto;padding-top:9px;font:800 6px/1.15 var(--sr-cap);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.sr-col:not(:first-child)>b:not(:has(+.sr-frac)){margin-bottom:11px}
.sr-stars{display:flex;gap:3px;margin-top:14px}
.sr-stars i{width:14px;height:14px}
.sr-stars svg{width:100%;height:100%;fill:#6a6a70;stroke:none}
.sr-stars i.got svg{fill:var(--sr-orange);animation:srStar .5s both}
.sr-stars i:nth-child(1) svg{animation-delay:.45s}.sr-stars i:nth-child(2) svg{animation-delay:.7s}.sr-stars i:nth-child(3) svg{animation-delay:.95s}
@keyframes srStar{0%{transform:scale(.2);opacity:0}65%{transform:scale(1.28);opacity:1}100%{transform:scale(1)}}
.sr-col.score em{color:rgba(255,255,255,.8)}
.sr-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sr-b{height:32px;border:0;border-radius:3px;background:#46464b;color:#fff;font:700 10.5px/1 var(--sr-cap)!important;display:flex;align-items:center;justify-content:center;gap:5px}
.sr-b.sr-go{background:var(--sr-orange)}
.sr-b svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sr-b.sr-go svg{fill:currentColor;stroke:none}
.sr-empty .sr-head{border:0;padding-bottom:12px}.sr-empty .sr-head b{max-width:none}.sr-empty .sr-btns{grid-template-columns:1fr}
.sr-empty .sr-head span{font-size:11px;line-height:1.3}

/* ---- report (white) ---- */
.rp{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;color:#111;font-family:var(--sr-cap);padding-bottom:env(safe-area-inset-bottom,0px)}
.rp>*{max-width:560px;margin-left:auto;margin-right:auto}
.rp-who{position:relative;display:flex;align-items:center;gap:14px;padding:calc(18px + env(safe-area-inset-top,0px)) 16px 6px}
.rp-av{width:62px;height:62px;border-radius:50%;flex:0 0 auto;background:#222;color:#fff;display:grid;place-items:center;font:600 25px/1 var(--sr-cap);box-shadow:0 0 0 2px #fff,0 0 0 3px #e4e4e6}
.rp-who>div:not(.rp-av){flex:1;min-width:0}
.rp-who b{display:block;font:700 20px/1.2 var(--sr-cap);letter-spacing:-.01em;margin-bottom:2px}
.rp-who span{display:flex;align-items:center;gap:4px;font:400 13px/1.45 var(--sr-cap);color:#6e6e73}
.rp-who svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.rp-x{align-self:flex-start;width:30px;height:30px;border:0;border-radius:50%;background:#f1f1f2;color:#555;display:grid;place-items:center;padding:0}
.rp-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.rp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px 16px 18px}
.rp-pl{display:flex;align-items:baseline;justify-content:space-between;gap:4px;white-space:nowrap}
.rp-pl>span{font:400 13px/1 var(--sr-cap);color:#333}
.rp-pl b{font:700 25px/1 var(--sr-cap);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rp-bar{display:block;height:4px;border-radius:2px;background:#e4e4e6;margin-top:6px;overflow:hidden}
.rp-bar i{display:block;height:100%;background:var(--sr-orange);border-radius:2px;transform-origin:left;animation:rpBar .9s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes rpBar{from{transform:scaleX(0)}}
.rp-pct small{display:block;text-align:right;font:500 13px/1 var(--sr-cap);color:#444;margin-top:5px;font-variant-numeric:tabular-nums}
.rp-box{margin:0 16px;border:1px solid #e6e6e8;border-radius:6px;overflow:hidden;background:#fff}
.rp-car{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rp-car::-webkit-scrollbar{display:none}
.rp-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.rp-hs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 0 10px}
.rp-h{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.rp-h+.rp-h{border-left:1px solid #e6e6e8}
.rp-h b{font:400 22px/1 var(--sr-num);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#111;white-space:nowrap}
.rp-h small{font:700 8.5px/1.25 var(--sr-cap);letter-spacing:.12em;text-transform:uppercase;color:#6e6e73;text-align:center;padding:0 2px;white-space:nowrap}
.rp-cw{background:#fff;padding:0 12px}
.rp-court{width:100%;height:auto}
.rp-court .cl path,.rp-court .cl circle{fill:none;stroke:#cfcfd3;stroke-width:.045}
.rp-court .cl>path:first-child{stroke:#dcdce0}
.rp-court .cl .dash{stroke-dasharray:.2 .2}
.rp-court .cl .bb{stroke:#b4b4b8;stroke-width:.08}
.rp-court .mk{fill:#e8352b;transform-box:fill-box;transform-origin:center;animation:rpPt .35s both;animation-delay:calc(.35s + var(--k) * 38ms)}
.rp-court .ms{fill:none;stroke:#1d2a5c;stroke-width:.085;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:rpPt .35s both;animation-delay:calc(.35s + var(--k) * 38ms)}
@keyframes rpPt{from{transform:scale(0);opacity:0}70%{transform:scale(1.35);opacity:1}to{transform:scale(1)}}
/* zones: pale tints with white gutters; only the best (orange) and worst (blue) zone are full colour */
.rp-zones .zn{stroke:#fff;stroke-width:.16;stroke-linejoin:round;animation:rpZn .5s both;animation-delay:calc(.15s + var(--k) * 110ms)}
.rp-zones .zn.none{fill:#f6f6f7}.rp-zones .zn.cool{fill:#ebebed}.rp-zones .zn.warm{fill:#fbd6be}.rp-zones .zn.hot{fill:#f0601e}.rp-zones .zn.cold{fill:#4f6eaf}
.rp-zones .gut{stroke:#fff;stroke-width:.16;fill:none}
.rp-zones .zn.out{fill:#fbfbfc;stroke:#d9d9dd;stroke-width:.05;stroke-dasharray:.16 .14;animation:none}
@keyframes rpZn{from{opacity:0}}
.rp-zones .hp path{stroke:#fff;stroke-width:.1;fill:none}.rp-zones .hp circle{fill:none;stroke:#fff;stroke-width:.07}
.rp-zones text{text-anchor:middle;font-family:var(--sr-cap)}
.rp-zones .p{font-size:.66px;font-weight:600;letter-spacing:-.01em}.rp-zones .f{font-size:.4px;font-weight:500}
.rp-zones .zl text{fill:#8a8a8f}.rp-zones .zl.none text{fill:#c2c2c6}.rp-zones .zl.warm text{fill:#5a5a5e}.rp-zones .zl.hot text,.rp-zones .zl.cold text{fill:#fff}
.rp-dots{display:flex;justify-content:center;gap:5px;padding:9px 0 10px}
.rp-dots i{width:5px;height:5px;border-radius:50%;background:#d6d6d9;cursor:pointer}.rp-dots i.on{background:#8a8a8f}
.rp-note{margin:8px 16px 0;font:700 8px/1.3 var(--sr-cap);letter-spacing:.12em;text-transform:uppercase;color:#a0a0a5;text-align:center}.rp-note:empty{display:none}
/* media row: picture tiles with small orange caps labels */
.rp-reel{list-style:none;display:flex;gap:8px;margin:14px 0 0;padding:0 16px;overflow-x:auto;scrollbar-width:none;max-width:none}
.rp-reel::-webkit-scrollbar{display:none}
.rp-tile{flex:0 0 132px;min-width:0}
.rp-ti{position:relative;height:74px;border-radius:3px;overflow:hidden;background:#24262b}
.rp-chip{position:absolute;right:4px;top:4px;background:rgba(0,0,0,.66);color:#fff;font:700 8px/1 var(--sr-cap);font-style:normal;letter-spacing:.04em;padding:3px 4px;border-radius:2px;font-variant-numeric:tabular-nums}
.rp-ti img{width:100%;height:100%;object-fit:cover;display:block}
.rp-tile small{display:block;margin-top:6px;font:800 8.5px/1 var(--sr-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--sr-orange)}
.rp-tile b{display:block;margin-top:3px;font:700 13px/1.2 var(--sr-cap);color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-tile span{display:block;margin-top:2px;font:700 8.5px/1 var(--sr-cap);letter-spacing:.08em;text-transform:uppercase;color:#7a7a7f}
.rp-tile.ms small{color:#1d2a5c}
.rp-sec{padding:16px 16px 2px;border-top:1px solid #efeff1;margin-top:16px}
.rp-k{display:flex;align-items:center;gap:7px;margin:0 0 12px;font:800 10px/1 var(--sr-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--sr-orange)}
.rp-k svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rp-k svg .nuc{fill:currentColor;stroke:none}
.rp-scs{grid-template-columns:repeat(4,minmax(0,1fr));padding:2px 0 12px}
.rp-sc b sup{font-size:.5em;line-height:1;margin-left:.02em}
.rp-sc b .u{font-size:.62em;letter-spacing:0}
.rp-sc b.none{color:#c4c4c8}
.rp-fix{padding:0 0 4px}
.rp-fix>b{display:block;font:700 17px/1.2 var(--sr-cap);color:#111}
.rp-fix>p{margin:4px 0 0;font:400 13px/1.35 var(--sr-cap);color:#444}
.rp-drill{display:flex;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #efeff1}
.rp-dimg{position:relative;flex:0 0 132px;height:74px;border-radius:3px;overflow:hidden;background:#222}
.rp-dimg img,.rp-dimg svg{width:100%;height:100%;object-fit:cover;display:block}
.rp-dimg span{position:absolute;right:5px;top:5px;background:rgba(0,0,0,.66);color:#fff;font:700 8px/1 var(--sr-cap);letter-spacing:.06em;text-transform:uppercase;padding:3px 4px;border-radius:2px}
.rp-dtx{flex:1;min-width:0}
.rp-dtx small{display:block;font:800 8.5px/1 var(--sr-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--sr-orange)}
.rp-dtx b{display:block;font:700 13px/1.2 var(--sr-cap);margin:3px 0 3px;color:#111}
.rp-dtx span{display:block;font:400 12px/1.3 var(--sr-cap);color:#555}
.rp-end{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 16px calc(40px + env(safe-area-inset-bottom,0px))}
.rp-end .sr-b{height:40px;font-size:13px!important}

/* ================= Shot Science =================
   Live: one number (with its tiny spaced-caps label) takes the counter's place a moment after each shot.
   Panel: the shot's six numbers over the dimmed live picture, huge white condensed numerals in a 3 x 2 grid,
   the one to work on outlined in orange-red, one plain coaching line under them, shot dots at the bottom.
   Explainer: full orange card with a line drawing, this shot's value, what it means and the goal. */
.hud-stat{pointer-events:auto;cursor:pointer}
.hud-stat b{display:flex;align-items:flex-start;justify-content:center}
.hud-stat b .u,.ss-t b .u,.ssi-big b .u{font-size:.4em;line-height:1;align-self:flex-end;margin:0 0 .04em .04em;letter-spacing:0}
.hud-stat b sup,.ss-t b sup,.ssi-big b sup{font-size:.4em;line-height:1;vertical-align:baseline;position:static;margin:.02em 0 0 .05em}
.hud-atom{position:relative;background:rgba(28,28,30,.55)}
.hud-atom svg{width:66%;height:66%}
.hud-atom svg{stroke-width:1.7}
.hud-atom .nuc{fill:currentColor;stroke:none}
.hud-atom:disabled{opacity:.45}

#track.ss-open .hud-score,#track.ss-open .hud-map,#track.ss-open .hud-top,#track.ss-open .hud-mute,#track.ss-open .hud-left,#track.ss-open .hud-tl,#track.ss-open .overlay,
#track.ss-open .hud-caption,#track.ss-open .hud-stop,#track.ss-open .hud-floats,#track.ss-open .hud-shade{visibility:hidden}
/* even ~64% black (and muted colour) over the whole frame so every numeral sits on the same calm, dark surface; the ball-arc trail
   (canvas overlay) is hidden while the panel is up so nothing crosses the numbers */
.ss{position:absolute;inset:0;z-index:6;background:rgba(6,6,8,.64);color:#fff;animation:ssFade .28s ease-out;
  -webkit-backdrop-filter:saturate(.3) brightness(.92);backdrop-filter:saturate(.3) brightness(.92)}
@keyframes ssFade{0%{opacity:0}100%{opacity:1}}
.ss-h{position:absolute;top:calc(3vh + 8px);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
.ss-h span{font:700 11px/1 var(--hud-cap);font-stretch:80%;letter-spacing:.1em;color:rgba(255,255,255,.82)}
.ss-h em{font:600 8.5px/1 var(--hud-cap);font-style:normal;letter-spacing:.18em;color:rgba(255,255,255,.46)}
.ss-x{position:absolute;right:var(--hud-in-r);top:14px;width:52px;height:52px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  background:rgba(38,38,40,.78);color:#fff;z-index:2}
.ss-x svg,.ss-nav svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ss-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:72px;border:0;background:none;color:#fff;padding:0;display:grid;place-items:center;z-index:2}
.ss-nav svg{width:28px;height:28px;stroke-width:1.8}
.ss-prev{left:calc(var(--hud-in) + 30px)}
.ss-next{right:calc(var(--hud-in-r) + 30px)}
/* 3 x 2 grid on fixed columns; each tile hugs its numeral + label with 12px on every side, so the selection
   outline frames value and label evenly, and the labels of a row share one line */
.ss-grid{--num:clamp(38px,16.5vh,68px);--tile:clamp(100px,33vh,136px);--col:clamp(128px,42vh,176px);position:absolute;left:50%;top:calc(50% - 4px);transform:translate(-50%,-50%);
  display:grid;grid-template-columns:repeat(3,var(--col));justify-content:center;justify-items:center;align-items:center;row-gap:clamp(10px,5vh,26px);--pad:clamp(9px,3vh,13px)}
.ss-t{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:calc(var(--num) * 1.9);padding:var(--pad) calc(var(--pad) + 4px) calc(var(--pad) - 1px);margin:0;
  border:2px solid transparent;border-radius:2px;background:transparent;color:#fff;font:inherit;cursor:pointer;opacity:0;
  animation:ssIn .42s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:var(--d,0ms);box-sizing:border-box;-webkit-tap-highlight-color:transparent}
@keyframes ssIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.ss-t.hi{border-color:#f0532d;background:transparent}
.ss-t:focus{outline:none}.ss-t:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
/* numerals on one box height: digits sit on the bottom line, ° ″ ′ hang from the top line, s / MPH sit on the baseline */
.ss-t b{display:flex;align-items:flex-start;justify-content:center;height:calc(var(--num) * .8);font:900 var(--num)/.8 var(--hud-num);letter-spacing:0;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ss-t b .n{display:flex;align-items:flex-start;height:100%}
.ss-t b.word{display:flex;align-items:flex-end;justify-content:center;font-size:calc(var(--num) * .46);line-height:.88;white-space:normal;text-align:center;max-width:none;text-transform:uppercase}
.ss-t b.none{color:rgba(255,255,255,.55)}
.ss-t>span{margin-top:calc(var(--num) * .2);font:700 clamp(9px,2.6vh,11px)/.8 var(--hud-cap);font-stretch:72%;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap}
.ss-t b sup,.ss-t b .u{font-family:var(--hud-num)}
.ss-t b sup{font-size:.36em;font-weight:800;line-height:1;margin:.03em 0 0 .04em}
.ss-t b .u{font-size:.4em;line-height:.8;align-self:flex-end;margin:0 0 0 .03em}
/* feet / inch marks: slanted wedges (true prime shapes, not typewriter quotes) at ~30% of the digit height */
.pm{display:inline-flex;align-self:flex-start;margin:.035em .03em 0 .035em}
.pm svg{height:.25em;width:auto;fill:currentColor;overflow:visible}
.pm .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ss-tip{position:absolute;left:50%;bottom:calc(3vh + 20px);transform:translateX(-50%);margin:0;width:min(70%,560px);text-align:center;
  font:700 clamp(10px,3vh,12px)/1.2 var(--hud-cap);font-stretch:72%;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.ss-dots{position:absolute;bottom:calc(2.4vh + 6px);left:0;right:0;display:flex;justify-content:center;gap:5px;pointer-events:none}
.ss-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}
.ss-dots i.on{background:#f0532d}

/* explainer card: each metric has its own colour; full screen in portrait, a tight portrait card in landscape */
.ssi{position:absolute;inset:0;z-index:7;background:rgba(0,0,0,.6);display:grid;place-items:center;animation:ssFade .2s ease-out}
.ssi-card{--c:#ec8a2c;position:relative;box-sizing:border-box;height:calc(100% - 20px);aspect-ratio:.86;max-width:calc(100% - 32px);background:var(--c);color:#fff;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;padding:0 22px 26px;animation:ssiIn .32s cubic-bezier(.2,.9,.3,1)}
.ssi[data-k="shotType"] .ssi-card{--c:#d2462f}
.ssi[data-k="releaseTime"] .ssi-card{--c:#ec8a2c}
.ssi[data-k="releaseAngle"] .ssi-card{--c:#1d4c9c}
.ssi[data-k="legAngle"] .ssi-card{--c:#4a2c8a}
.ssi[data-k="mph"] .ssi-card{--c:#1b4d5b}
.ssi[data-k="releaseHeightIn"] .ssi-card{--c:#7c2344}
@keyframes ssiIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
.ssi-x{background:none;top:4px;right:4px;width:40px;height:40px}
.ssi-art{flex:0 0 auto;align-self:stretch;margin:0 -22px;height:30%;min-height:0}
.ssi-art svg{display:block;width:100%;height:100%;overflow:hidden}
.ssi-art .trail{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:1 9;stroke-linecap:round;opacity:.9;animation:ssDash 1.2s ease-out both}
@keyframes ssDash{0%{stroke-dashoffset:300;opacity:0}100%{stroke-dashoffset:0;opacity:.9}}
.ssi-art .skin{fill:#f4ede6}
.ssi-art .skin-sh{fill:rgba(60,30,10,.16)}
.ssi-art .finger,.ssi-art .thumb{fill:none;stroke:#f4ede6;stroke-width:10;stroke-linecap:round}
.ssi-art .sleeve,.ssi-art .short,.ssi-art .shoe{fill:#18181b}
.ssi-art .sole{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round}
.ssi-art .ball circle{fill:#18181b}
.ssi-art .ball path{fill:none;stroke:var(--c);stroke-width:2}
.ssi-art .mark{fill:#fff}
.ssi-art .mark-l{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round;opacity:.9}
.ssi-art .mark-s{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.ssi-body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;min-height:0}
.ssi-big b{display:flex;align-items:flex-start;justify-content:center;font:900 clamp(48px,17vh,120px)/.8 var(--hud-num);letter-spacing:0}
.ssi-big b sup{font-size:.36em;line-height:1;margin:.03em 0 0 .04em;font-weight:800}
.ssi-big b .u{font-size:.4em;line-height:.8;align-self:flex-end;margin-left:.03em}
.ssi-big b.word{font-size:clamp(32px,10vh,64px);line-height:.86;text-transform:uppercase;display:block;max-width:6em}
.ssi-big b.none{opacity:.6}
.ssi-label{margin-top:9px;font:800 clamp(12px,3.6vh,17px)/1 var(--hud-cap);font-stretch:72%;letter-spacing:.03em;text-transform:uppercase}
.ssi-what{margin:10px 0 0;max-width:19em;font:500 clamp(12px,3.6vh,16px)/1.3 var(--hud-cap);font-stretch:88%;color:#fff}
.ssi hr{width:34px;border:0;border-top:1px solid rgba(255,255,255,.6);margin:10px 0 9px}
.ssi-target{margin:0;max-width:22em;font:500 clamp(11px,3.2vh,14px)/1.3 var(--hud-cap);font-stretch:88%;color:#fff}
.ssi-target b{font-weight:800}
.ssi-dots{bottom:12px}
.ssi-dots i{background:rgba(255,255,255,.5)}
.ssi-dots i.on{background:#fff}

@media (orientation:portrait){
  .ss-grid{--num:clamp(38px,14vw,62px);--pad:clamp(9px,3vw,13px);--col:clamp(130px,44vw,190px);grid-template-columns:repeat(2,var(--col));top:47%}
  .ss-prev,.ss-next{top:auto;bottom:10vh;transform:none}
  .ssi{background:none}
  .ssi-card{height:100%;width:100%;max-width:none;aspect-ratio:auto;border-radius:0;padding:0 28px calc(44px + env(safe-area-inset-bottom,0px))}
  .ssi-x{top:max(10px,env(safe-area-inset-top,0px));right:10px;width:48px;height:48px}
  .ssi-art{height:30%;margin:0 -28px}
  .ssi-big b{font-size:clamp(64px,26vw,120px)}
  .ssi-big b.word{font-size:clamp(40px,14vw,72px)}
  .ssi-label{margin-top:14px;font-size:clamp(16px,5vw,21px)}
  .ssi-what{margin-top:16px;font-size:clamp(15px,4.4vw,18px)}
  .ssi hr{margin:18px 0 14px}
  .ssi-target{font-size:clamp(13px,3.8vw,15px)}
  .ssi-dots{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}