/* ============================================================
   GLOBAL PRESENCE  ·  section #work  (modular - loaded after styles.css)
   A dotted world map (assets/world-map.svg, painted via CSS mask so the
   dots are themeable) with region pins, and a right-side panel of work
   that auto-rotates region -> region and pins on tap. Pure CSS, no JS,
   same radio + :checked + :has(...) mechanism as the "One partner" rotor.

   Coordinates: the map svg is a 210 x 100 grid. Each pin is positioned by
   the % of that grid (computed from the city's lat/lng via dotted-map's
   getPin), so pins stay locked to the dots at every width. The map box is
   pinned to the same 21/10 aspect ratio and the masked dots fill it 1:1,
   so nothing drifts on resize.

   Timing mirrors the "One partner" rotor exactly: 3.5s per item. With four
   cards that's a 14s loop (delays 0 / 3.5 / 7 / 10.5s) and the same fade
   window proportions as partner.css's rotorFade.
   ============================================================ */

/* Section accent: use the navbar's dark medical blue (--nav-dark) instead of
   the teal accent, so the pins/dots and the "Objective / What we did" labels
   read blue, not ocean-green. Scoped to #work; the rest of the site is
   unaffected. accent-mid / accent-soft stay (they are light borders/fills). */
#work{
  --accent:      var(--nav-dark);
  --accent-deep: var(--nav-dark);
}

.gp-rotor{position:relative;margin-top:clamp(8px,1.4vw,18px)}

.gp-grid{
  display:grid;grid-template-columns:1.35fr 0.85fr;
  gap:clamp(20px,3vw,44px);align-items:start;
}

/* ---------- left: dotted map ---------- */
.gp-map{
  position:relative;width:100%;aspect-ratio:21/10;
}
/* the dots themselves: the svg's alpha is the mask, background paints them */
.gp-dots{
  position:absolute;inset:0;
  background:var(--faint);
  -webkit-mask:url("assets/world-map.svg") center/100% 100% no-repeat;
  mask:url("assets/world-map.svg") center/100% 100% no-repeat;
  opacity:0.75;
}

/* ---------- pins (labels double as the rotor's radio triggers) ---------- */
/* PLACEMENT (rewritten from scratch): .gp-pin is a 14px box whose CENTRE sits
   exactly on the city coordinate (--x,--y), so the DOT is anchored to the
   coordinate. The pill label is absolutely positioned beside the dot and never
   shifts it (the old logic centred the whole dot+label box on the coordinate,
   so a wide label like "Los Angeles" shoved the dot off into the ocean). */
.gp-pin{
  position:absolute;left:var(--x);top:var(--y);
  width:14px;height:14px;
  transform:translate(-50%,-50%);
  cursor:pointer;z-index:2;
  -webkit-tap-highlight-color:transparent;
}
/* generous invisible tap target around the dot, without moving anything */
.gp-pin::before{content:"";position:absolute;inset:-11px;border-radius:50%}
/* a ringed, white-centred marker - reads as a clickable map pin / radio */
.gp-pin-dot{
  position:absolute;inset:0;border-radius:50%;
  background:var(--card);
  border:2px solid var(--accent);
  box-shadow:0 1px 4px oklch(0.255 0.024 230 / 0.28);
  transition:background .25s var(--ease),border-color .25s var(--ease),
             transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* the radar ring: a halo that pulses only while this pin is the live one,
   inviting a click. Hidden (opacity 0) otherwise. */
.gp-pin-dot::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;pointer-events:none;
}
/* label floats beside the dot: 8px to its right, vertically centred. */
.gp-pin-l{
  position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%);
  font-family:var(--sans);font-weight:600;
  font-size:clamp(0.72rem,0.95vw,0.84rem);letter-spacing:0.005em;
  color:var(--ink-soft);white-space:nowrap;
  padding:2px 8px;border-radius:999px;
  background:color-mix(in oklab,var(--card) 78%,transparent);
  border:1px solid color-mix(in oklab,var(--line) 80%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
/* .flip puts the label on the left of the dot instead */
.gp-pin.flip .gp-pin-l{left:auto;right:calc(100% + 8px)}
/* hover: fill + grow so the affordance is unmistakable */
.gp-pin:hover .gp-pin-dot{transform:scale(1.2);background:var(--accent);box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 18%,transparent)}
.gp-pin:hover .gp-pin-l{color:var(--accent-deep);border-color:var(--accent-mid)}

/* ---------- right: rotating work as three floating glass panes ----------
   Each region is three stacked liquid-glass panels (visual / heading /
   spec) with sharp corners. All four region-stacks share one grid cell so
   the stage auto-sizes to the tallest and the cross-fade never jumps. */
.gp-stage{display:grid}
.gp-card{
  grid-area:1/1;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;gap:clamp(15px,1.6vw,20px);
}

/* shared liquid-glass material: same frosted recipe as the hero .gpill
   search chips - neutral paper glass, lightly rounded, gently floating */
.gp-pane{
  position:relative;isolation:isolate;border-radius:10px;
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.9vw,22px);
  background:color-mix(in oklab,var(--paper) 38%,transparent);
  border:1px solid color-mix(in oklab,var(--white) 58%,transparent);
  box-shadow:0 10px 26px -14px oklch(0.255 0.024 230 / 0.45),
             inset 0 1px 0 oklch(1 0 0 / 0.5);
  -webkit-backdrop-filter:blur(11px) saturate(140%);backdrop-filter:blur(11px) saturate(140%);
  animation:gpFloat 6s var(--ease) infinite;
}
/* diagonal highlight so the glass reads even over a flat background */
.gp-pane::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,oklch(1 0 0 / 0.5),transparent 45%);
}
/* the three panes drift independently, like the hero search chips */
.gp-head{animation-duration:6.6s;animation-delay:-1s}
.gp-meta{animation-duration:7.2s;animation-delay:-2s}
@keyframes gpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* pane 1 - the openable visual */
.gp-visual{
  aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  padding:0;cursor:zoom-in;text-decoration:none;
}
.gp-visual.t-a{background:linear-gradient(150deg,oklch(0.965 0.018 222),var(--white))}
.gp-visual.t-b{background:linear-gradient(150deg,oklch(0.965 0.012 165),var(--white))}
.gp-visual.t-c{background:linear-gradient(150deg,oklch(0.965 0.013 205),var(--white))}
.gp-visual.t-d{background:linear-gradient(150deg,oklch(0.965 0.011 150),var(--white))}
.gp-visual:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.gp-visual .gp-mark{
  grid-area:1/1;
  font-family:var(--serif);font-weight:500;letter-spacing:0.02em;
  font-size:clamp(1.8rem,2.8vw,2.4rem);color:var(--accent-deep);
  transition:transform .3s var(--ease);
}
.gp-visual:hover .gp-mark{transform:scale(1.05)}
.gp-visual-top{
  grid-area:1/1;align-self:start;justify-self:stretch;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(10px,1.3vw,14px);
}
.gp-region{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-weight:600;font-size:0.72rem;letter-spacing:0.02em;
  text-transform:uppercase;color:var(--ink-soft);
  background:color-mix(in oklab,var(--white) 55%,transparent);
  border:1px solid color-mix(in oklab,var(--white) 60%,transparent);padding:4px 10px;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.5);
  -webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
}
.gp-region svg{width:12px;height:12px;color:var(--accent)}
.gp-index{font-family:var(--mono);font-size:0.74rem;color:var(--faint);letter-spacing:0.04em}
/* hover/focus affordance that the visual opens */
.gp-thumb-cta{
  grid-area:1/1;align-self:end;justify-self:end;margin:clamp(10px,1.3vw,14px);
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-weight:600;font-size:0.72rem;letter-spacing:0.015em;
  color:var(--accent-deep);
  background:color-mix(in oklab,var(--card) 82%,transparent);
  border:1px solid var(--accent-mid);padding:5px 11px;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transform:translateY(5px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.gp-thumb-cta svg{width:12px;height:12px}
.gp-visual:hover .gp-thumb-cta,
.gp-visual:focus-visible .gp-thumb-cta{opacity:1;transform:none}

/* pane 2 - category + heading */
.gp-k{
  font-family:var(--sans);font-weight:600;font-size:0.78rem;
  letter-spacing:0.02em;text-transform:uppercase;color:var(--accent-deep);
}
.gp-head h3{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.18rem,1.7vw,1.45rem);
  text-transform:uppercase;letter-spacing:0.01em;margin:6px 0 0;color:var(--ink);
}

/* pane 3 - objective / what we did spec sheet */
.gp-meta{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(8px,1vw,12px) clamp(13px,1.5vw,18px);margin:0;
}
.gp-meta dt{
  font-family:var(--mono);font-weight:600;font-size:0.64rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-deep);
  white-space:nowrap;padding-top:0.2em;
}
.gp-meta dd{
  margin:0;font-size:clamp(0.88rem,1vw,0.96rem);
  color:var(--ink-soft);line-height:1.5;
}

/* ---------- openable case visual: pure-CSS :target lightbox ---------- */
.gp-lb{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,64px);
  background:color-mix(in oklab,var(--ink) 60%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;cursor:zoom-out;text-decoration:none;
  transition:opacity .3s var(--ease);
}
.gp-lb:target{opacity:1;pointer-events:auto}
.gp-lb-panel{
  position:relative;width:min(880px,100%);
  background:var(--card);border:1px solid var(--line);
  overflow:hidden;box-shadow:var(--shadow-lg);
  transform:scale(.965) translateY(8px);
  transition:transform .3s var(--ease);
}
.gp-lb:target .gp-lb-panel{transform:none}
.gp-lb-hero{
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;width:100%;
}
.gp-lb-hero .gp-mark{
  font-family:var(--serif);font-weight:500;letter-spacing:0.02em;
  font-size:clamp(3rem,8vw,5rem);color:var(--accent-deep);
}
.gp-lb-cap{
  display:flex;flex-direction:column;gap:4px;
  padding:clamp(16px,2vw,24px);border-top:1px solid var(--line);
}
.gp-lb-cap strong{
  font-family:var(--serif);font-weight:600;letter-spacing:-0.015em;
  font-size:clamp(1.25rem,2.2vw,1.7rem);color:var(--ink);
}
.gp-lb-close{
  position:absolute;top:12px;right:12px;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  color:var(--ink);background:color-mix(in oklab,var(--card) 80%,transparent);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.gp-lb-close svg{width:18px;height:18px}
.gp-lb:hover .gp-lb-close{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent-mid)}

/* ---------- S3-backed media: 1:1 port of the genstudiox WorksSection ----------
   Assets: https://gsx-website-content.s3.us-east-2.amazonaws.com/uploads/{thumbnails|videos}/
   Per case: .gp-visual gets <img class="gp-thumb-img"> + <span class="gp-play">,
   and #lb-* uses .gp-lb--media holding <video class="gp-lb-video"> + caption. */
.gp-thumb-img{
  grid-area:1/1;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.gp-visual:hover .gp-thumb-img{transform:scale(1.05)}
.gp-visual:has(.gp-thumb-img) .gp-mark,
.gp-visual:has(.gp-thumb-img) .gp-thumb-cta{display:none}
/* play button: always visible so it works on touch as well as hover */
.gp-play{
  grid-area:1/1;place-self:center;z-index:2;pointer-events:none;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.gp-play svg{width:16px;height:16px;fill:#fff}

/* modal: black rounded-2xl panel shrink-wrapped to the video, caption fixed
   at the bottom of the screen, close top-right (reference exact). The scrim is
   the click-to-close backdrop; the panel stays interactive for the controls. */
/* no dimmed backdrop: the video just pops in over the section. The panel
   shadow carries the depth; the caption stacks under it in dark ink so it
   stays readable on the light section. */
.gp-lb--media{
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  flex-direction:column;gap:10px;padding:clamp(14px,3vw,28px);
}
.gp-lb-scrim{position:absolute;inset:0;cursor:zoom-out}
.gp-lb--media .gp-lb-panel{
  z-index:1;width:auto;max-width:none;cursor:auto;
  background:#000;border:none;border-radius:16px;
}
.gp-lb-video{
  display:block;border-radius:16px;background:#000;
  max-width:min(90vw,850px);
  /* reserve room for the controls bar, caption and padding so a 16:9 video
     (and its seek bar) always fits the viewport instead of running off-screen */
  max-height:calc(94vh - 96px);
}
/* image case (no video, no play button): the popup just shows the still,
   shrink-wrapped like the video. A touch wider since infographics carry detail. */
.gp-lb-img{
  display:block;border-radius:16px;
  width:auto;height:auto;max-width:min(92vw,1000px);max-height:calc(92vh - 96px);
}
/* portrait (9:16) video: force the PANEL (a plain div, so no <video>
   intrinsic-size ambiguity) to a 9:16 box sized by viewport height, and let
   the video fill it. height = min(viewport-fit, width-fit) keeps it on-screen
   in both axes; the chrome (caption + padding) lives in the remaining ~26vh. */
.gp-lb--portrait .gp-lb-panel{
  width:auto;
  aspect-ratio:9 / 16;
  height:min(74vh, calc(92vw * 16 / 9));
  max-width:92vw;max-height:none;
}
.gp-lb--portrait .gp-lb-video{
  display:block;width:100%;height:100%;object-fit:cover;
  max-width:none;max-height:none;
}
.gp-lb--media .gp-lb-close{
  width:40px;height:40px;top:12px;right:12px;
  background:rgba(0,0,0,.6);border:none;color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.gp-lb--media:hover .gp-lb-close{background:rgba(0,0,0,.8);color:#fff}
a.gp-lb-close{text-decoration:none}
.gp-lb-below{
  z-index:1;margin:0;text-align:center;display:flex;flex-direction:column;gap:4px;
}
.gp-lb-below strong{
  font-weight:700;letter-spacing:-0.01em;
  font-size:clamp(1.1rem,2vw,1.25rem);color:var(--ink);
}
.gp-lb-below span{font-size:0.75rem;letter-spacing:0.02em;color:var(--ink-soft)}

/* ---------- autoplay: cycle the 4 regions, 3.5s each (14s loop) ----------
   The cards (gpFade) and the map pins (gpPin / gpPinL / gpPing) run on the
   SAME 14s timeline with the SAME per-region delays, so they cycle in
   lockstep: each card and its pin light up together. The card fade ALSO
   toggles pointer-events, so the on-screen card's thumbnail is clickable from
   page load, while the faded-out cards (stacked in the same grid cell) never
   sit on top intercepting the click. The pointer-events windows never overlap
   between cards, so only one card is ever interactive at a time.

   Nothing here is paused on hover: pausing the cards and pins independently is
   what desynced them, so the cycle simply runs continuously. To dwell on one
   region the user clicks its pin (the manual/checked state below). */
.gp-rotor:not(:has(.gp-r:checked)) .gp-card{animation:gpFade 14s linear infinite}
.gp-rotor:not(:has(.gp-r:checked)) .gp-card-2{animation-delay:3.5s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-card-3{animation-delay:7s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-card-4{animation-delay:10.5s}
@keyframes gpFade{
  0%{opacity:0;pointer-events:none}
  1.5%{opacity:1;pointer-events:auto}
  23%{opacity:1;pointer-events:auto}
  26%{opacity:0;pointer-events:none}
  100%{opacity:0;pointer-events:none}
}

/* the live dot (and its label) light up for its 3.5s window, in sync */
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-1 .gp-pin-dot{animation:gpPin 14s linear infinite}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-2 .gp-pin-dot{animation:gpPin 14s linear infinite 3.5s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-3 .gp-pin-dot{animation:gpPin 14s linear infinite 7s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-4 .gp-pin-dot{animation:gpPin 14s linear infinite 10.5s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-1 .gp-pin-l{animation:gpPinL 14s linear infinite}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-2 .gp-pin-l{animation:gpPinL 14s linear infinite 3.5s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-3 .gp-pin-l{animation:gpPinL 14s linear infinite 7s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-4 .gp-pin-l{animation:gpPinL 14s linear infinite 10.5s}
/* the radar pulse on the live dot - two beats inside its window */
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-1 .gp-pin-dot::after{animation:gpPing 14s var(--ease) infinite}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-2 .gp-pin-dot::after{animation:gpPing 14s var(--ease) infinite 3.5s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-3 .gp-pin-dot::after{animation:gpPing 14s var(--ease) infinite 7s}
.gp-rotor:not(:has(.gp-r:checked)) .gp-pin-4 .gp-pin-dot::after{animation:gpPing 14s var(--ease) infinite 10.5s}

@keyframes gpPin{
  0%,25%,100%{background:var(--card);border-color:var(--accent);transform:scale(1);box-shadow:0 1px 4px oklch(0.255 0.024 230 / 0.28)}
  1.5%,23%{background:var(--accent-deep);border-color:var(--accent-deep);transform:scale(1.4);box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 22%,transparent)}
}
@keyframes gpPinL{
  0%,25%,100%{color:var(--ink-soft);border-color:color-mix(in oklab,var(--line) 80%,transparent)}
  1.5%,23%{color:var(--accent-deep);border-color:var(--accent-mid)}
}
@keyframes gpPing{
  0%,100%{opacity:0;transform:scale(.55)}
  1%{opacity:.55;transform:scale(.55)}
  11%{opacity:0;transform:scale(2.1)}
  13%{opacity:.45;transform:scale(.55)}
  23%{opacity:0;transform:scale(2.1)}
}

/* ---------- manual: a checked radio pins its region + dims the rest ---------- */
.gp-rotor:has(.gp-r:checked) .gp-card{opacity:0}
#gp-1:checked ~ .gp-grid .gp-card-1,
#gp-2:checked ~ .gp-grid .gp-card-2,
#gp-3:checked ~ .gp-grid .gp-card-3,
#gp-4:checked ~ .gp-grid .gp-card-4{opacity:1;pointer-events:auto;transition:opacity .45s var(--ease)}

/* checked-state active pin */
#gp-1:checked ~ .gp-grid .gp-pin-1 .gp-pin-dot,
#gp-2:checked ~ .gp-grid .gp-pin-2 .gp-pin-dot,
#gp-3:checked ~ .gp-grid .gp-pin-3 .gp-pin-dot,
#gp-4:checked ~ .gp-grid .gp-pin-4 .gp-pin-dot{
  background:var(--accent-deep);border-color:var(--accent-deep);transform:scale(1.4);
  box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 24%,transparent);
}
/* the pinned dot keeps a slow continuous radar pulse to confirm selection */
#gp-1:checked ~ .gp-grid .gp-pin-1 .gp-pin-dot::after,
#gp-2:checked ~ .gp-grid .gp-pin-2 .gp-pin-dot::after,
#gp-3:checked ~ .gp-grid .gp-pin-3 .gp-pin-dot::after,
#gp-4:checked ~ .gp-grid .gp-pin-4 .gp-pin-dot::after{
  border-color:var(--accent-deep);animation:gpPingLoop 2.2s var(--ease) infinite;
}
@keyframes gpPingLoop{0%{opacity:.5;transform:scale(.55)}70%,100%{opacity:0;transform:scale(2.2)}}
#gp-1:checked ~ .gp-grid .gp-pin-1 .gp-pin-l,
#gp-2:checked ~ .gp-grid .gp-pin-2 .gp-pin-l,
#gp-3:checked ~ .gp-grid .gp-pin-3 .gp-pin-l,
#gp-4:checked ~ .gp-grid .gp-pin-4 .gp-pin-l{color:var(--accent-deep);border-color:var(--accent-mid)}

/* keyboard focus ring on the pin (radios are visually hidden) */
.gp-r:focus-visible ~ .gp-grid .gp-pin[for="gp-1"] .gp-pin-dot,
.gp-r:focus-visible ~ .gp-grid .gp-pin[for="gp-2"] .gp-pin-dot,
.gp-r:focus-visible ~ .gp-grid .gp-pin[for="gp-3"] .gp-pin-dot,
.gp-r:focus-visible ~ .gp-grid .gp-pin[for="gp-4"] .gp-pin-dot{outline:2px solid var(--accent-deep);outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .gp-grid{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}
  .gp-map{order:-1}
}
@media (max-width:560px){
  .gp-pin-l{display:none}        /* dots only - labels would crowd a small map */
}

/* ---------- reduced motion: no cycling; show the first region statically ---------- */
@media (prefers-reduced-motion:reduce){
  .gp-rotor:not(:has(.gp-r:checked)) .gp-card{animation:none;opacity:0;pointer-events:none}
  .gp-rotor:not(:has(.gp-r:checked)) .gp-card-1{opacity:1;pointer-events:auto}
  .gp-pane{animation:none}
  .gp-rotor:not(:has(.gp-r:checked)) .gp-pin .gp-pin-dot,
  .gp-rotor:not(:has(.gp-r:checked)) .gp-pin .gp-pin-l,
  .gp-pin-dot::after{animation:none !important}
  .gp-rotor:not(:has(.gp-r:checked)) .gp-pin-1 .gp-pin-dot{background:var(--accent-deep);border-color:var(--accent-deep);transform:scale(1.4)}
}