/* Grand Complication: companion (pairs with companion.js) */
.gcc, .gcc-think {
  --gcc-ink: #14161D;
  --gcc-blue: #1F3C96;
  --gcc-enamel: #FDFCF9;
  --gcc-plate: #EEECE6;
  --gcc-rule: #D8D5CC;
  --gcc-serif: var(--serif, "Bodoni Moda", "Didot", "Bodoni 72", serif);
  --gcc-sans: var(--sans, "Jost", "Futura", "Century Gothic", sans-serif);
  --gcc-ease: cubic-bezier(.16, 1, .3, 1);
  color: var(--gcc-ink);
  font-family: var(--gcc-sans);
}
.gcc button { font: inherit; color: inherit; }
.gcc-hit {
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gcc-hit:focus-visible { outline: 1.5px solid var(--gcc-blue); outline-offset: 3px; border-radius: 8px; }
.gcc.is-hidden { display: none !important; }
.gcc.is-paused svg * { animation-play-state: paused !important; }

/* ---------- the figure: ink by default, colour on reach ---------- */
.gcc-fig { position: relative; display: block; width: 100%; height: 100%; }
.gcc-fig > span { position: absolute; inset: 0; display: block; transition: opacity .35s ease; }
.gcc-fig svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gcc-fig-col { opacity: 0; }
.gcc-fig.no-ink .gcc-fig-col { opacity: 1; }
.gcc-fig.no-ground .c-ground { display: none; }
.gcc-hit:hover .gcc-fig-col, .gcc-hit:focus-visible .gcc-fig-col,
.gcc.is-open .gcc-fig-col, .gcc.is-color .gcc-fig-col, .gcc.is-lean .gcc-fig-col, .gcc.is-up .gcc-fig-col { opacity: 1; }
.gcc-hit:hover .gcc-fig-ink, .gcc-hit:focus-visible .gcc-fig-ink,
.gcc.is-open .gcc-fig-ink, .gcc.is-color .gcc-fig-ink, .gcc.is-lean .gcc-fig-ink, .gcc.is-up .gcc-fig-ink { opacity: 0; }
.gcc-pause.is-lean .gcc-fig-col { opacity: 0; } .gcc-pause.is-lean .gcc-fig-ink { opacity: 1; }
.gcc-pause.is-lean .gcc-hit:hover .gcc-fig-col, .gcc-pause.is-lean .gcc-hit:focus-visible .gcc-fig-col { opacity: 1; }

/* ---------- thought bubble: enamel paper, cloud tail of small circles ---------- */
.gcc-think {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: max-content; max-width: min(256px, calc(100vw - 20px));
  padding: 14px 18px 11px;
  background: var(--gcc-enamel);
  border: 1px solid var(--gcc-rule);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgb(20 22 29 / .06), 0 12px 30px -12px rgb(20 22 29 / .24);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.gcc-think.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease; }
.gcc-think .gcc-q { margin: 0; font: italic 400 15px/1.38 var(--gcc-serif); color: var(--gcc-ink); text-wrap: pretty; }
.gcc-think .gcc-by {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .6em;
  margin: 10px 0 0; padding-top: 8px; border-top: .5px solid var(--gcc-rule);
  font: 500 8px/1.3 var(--gcc-sans); letter-spacing: .2em; text-transform: uppercase;
}
.gcc-by-name { color: var(--gcc-blue); }
.gcc-by-series { color: rgb(20 22 29 / .5); }
.gcc-by-series::before { content: "\00B7"; margin-right: .6em; color: rgb(20 22 29 / .35); }
.gcc-hide {
  margin-left: auto; padding: 2px 0 2px 8px; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: rgb(20 22 29 / .4);
}
.gcc-hide:hover { color: var(--gcc-blue); }
.gcc-hide:focus-visible { outline: 1.5px solid var(--gcc-blue); outline-offset: 2px; border-radius: 2px; }
.gcc-think.is-wide { max-width: min(400px, calc(100vw - 20px)); }
.gcc-think.is-short { padding: 8px 15px 7px; border-radius: 18px; }
.gcc-think.is-short .gcc-by { display: none; }
.gcc-think.is-short .gcc-q { font-size: 14px; }
.gcc-puff { position: absolute; display: block; background: var(--gcc-enamel); border: 1px solid var(--gcc-rule); border-radius: 50%; }
.gcc-puff-1 { width: 11px; height: 11px; }
.gcc-puff-2 { width: 6px; height: 6px; }
/* bubble to the right of the character */
.gcc-think[data-tail="left"] .gcc-puff-1 { left: -15px; top: calc(var(--ty, 24px) - 2px); }
.gcc-think[data-tail="left"] .gcc-puff-2 { left: -25px; top: calc(var(--ty, 24px) + 8px); }
/* bubble to the left of the character */
.gcc-think[data-tail="right"] .gcc-puff-1 { right: -15px; top: calc(var(--ty, 24px) - 2px); }
.gcc-think[data-tail="right"] .gcc-puff-2 { right: -25px; top: calc(var(--ty, 24px) + 8px); }
/* bubble above the character */
.gcc-think[data-tail="down"] .gcc-puff-1 { top: calc(100% + 4px); left: calc(var(--tx, 30px) - 2px); }
.gcc-think[data-tail="down"] .gcc-puff-2 { top: calc(100% + 15px); left: calc(var(--tx, 30px) - 8px); }
/* bubble below the character */
.gcc-think[data-tail="up"] .gcc-puff-1 { bottom: calc(100% + 4px); left: calc(var(--tx, 30px) - 2px); }
.gcc-think[data-tail="up"] .gcc-puff-2 { bottom: calc(100% + 15px); left: calc(var(--tx, 30px) + 2px); }

/* ================= reserve: left-margin reading gauge ================= */
.gcc-reserve {
  position: fixed; top: 0; bottom: 0; left: 0; width: 72px; z-index: 40;
  pointer-events: none; display: none;
}
@media (min-width: 1100px) { .gcc-reserve { display: block; } }
.gcc-label {
  position: absolute; top: 56px; left: 0; width: 72px; text-align: center;
  font: 500 7.5px/1 var(--gcc-sans); letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  color: rgb(20 22 29 / .55);
}
.gcc-label::after { content: ""; display: block; width: 18px; margin: 6px auto 0; border-top: .5px solid rgb(20 22 29 / .35); }
.gcc-scale { position: absolute; left: 0; width: 72px; }
.gcc-channel {
  position: absolute; left: 34.5px; top: 0; bottom: 0; width: 3px;
  border-left: 1px solid rgb(20 22 29 / .32); border-right: 1px solid rgb(20 22 29 / .12); background: var(--gcc-plate);
}
.gcc-fill { position: absolute; left: 35.5px; width: 1px; bottom: 0; top: 0; background: var(--gcc-blue); }
.gcc-tick { position: absolute; right: 39px; width: 3px; height: 0; border-top: 1px solid rgb(20 22 29 / .38); }
.gcc-tick.is-major { width: 7px; border-top-color: rgb(20 22 29 / .7); }
.gcc-num {
  position: absolute; left: 41px; transform: translateY(-52%);
  font: 400 8px/1 var(--gcc-serif); font-variant-numeric: lining-nums tabular-nums; color: rgb(20 22 29 / .55);
}
.gcc-index { position: absolute; top: 0; left: 21px; width: 30px; height: 0; border-top: 1.5px solid var(--gcc-blue); will-change: transform; }
.gcc-index::before {
  content: ""; position: absolute; left: -3px; top: -3.75px;
  border: 3px solid transparent; border-left: 4px solid var(--gcc-blue); transform: rotate(180deg);
}
.gcc-sprite { position: absolute; top: 0; left: 7px; width: 58px; height: 72px; pointer-events: auto; will-change: transform; }
.gcc-sprite .gcc-fig { transition: transform .25s var(--gcc-ease); }
.gcc-sprite:hover .gcc-fig { transform: translateY(-1px); }
.gcc-duty {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap;
  font: 500 8px/1 var(--gcc-sans); letter-spacing: .2em; text-transform: uppercase; color: rgb(20 22 29 / .6);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.gcc-sprite:hover .gcc-duty, .gcc-sprite:focus-visible .gcc-duty { opacity: 1; transform: translate(0, -50%); }
.gcc.is-open .gcc-duty { opacity: 0; }
.gcc-toggle {
  position: absolute; left: 0; bottom: 14px; width: 72px; padding: 4px 6px; border: 0; background: none; cursor: pointer;
  pointer-events: auto; font: 500 7.5px/1.35 var(--gcc-sans) !important; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(20 22 29 / .45) !important; transition: color .2s;
}
.gcc-toggle:hover { color: var(--gcc-blue) !important; }
.gcc-reserve.is-hidden { display: none; }
@media (min-width: 1100px) {
  .gcc-reserve.is-hidden { display: block !important; }
  .gcc-reserve.is-hidden .gcc-rail, .gcc-reserve.is-hidden .gcc-sprite { display: none; }
}

/* ================= window: the day-window aperture ================= */
.gcc-window { position: absolute; inset: 0; display: block; border-radius: inherit; }
.gcc-win { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; display: block; }
.gcc-win .gcc-fig { transition: transform .3s var(--gcc-ease); }
.gcc-win:hover .gcc-fig { transform: translateY(-4%); }
.gcc-window.is-open .gcc-win .gcc-fig { transform: translateY(28%); opacity: .35; }
.gcc-win-day {
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  font: 500 7px/1 var(--gcc-sans); letter-spacing: .28em; text-indent: .28em; color: rgb(20 22 29 / .6);
  pointer-events: none; white-space: nowrap;
}
.gcc-pop {
  position: fixed; z-index: 65; width: 76px; height: 96px; pointer-events: none;
  opacity: 0; transform: translateY(14px) scale(.42); transform-origin: 50% 36%;
  transition: transform .45s var(--gcc-ease), opacity .2s ease;
}
.gcc-pop.is-up { opacity: 1; transform: translateY(-62px) scale(1); }
.gcc-pop.is-up .gcc-fig-col { opacity: 1; } .gcc-pop.is-up .gcc-fig-ink { opacity: 0; }

/* ================= footer: sitting on the rule ================= */
.gcc-footer {
  position: absolute; bottom: 100%; z-index: 5; display: block; width: 46px; height: 58px;
  margin-bottom: -2px; opacity: 0; transform: translateX(-32px);
}
.gcc-foot { display: block; width: 100%; height: 100%; }
.gcc-footer.is-arriving { animation: gcc-arrive .95s var(--gcc-ease) forwards; }
.gcc-footer.is-here { opacity: 1; transform: none; }
.gcc-footer.is-here .gcc-foot .gcc-fig { animation: gcc-wave .7s ease .05s 1; transform-origin: 50% 100%; }
@keyframes gcc-arrive {
  0% { opacity: 0; transform: translateX(-32px); }
  15% { opacity: 1; }
  20% { transform: translate(-24px, -3px); } 35% { transform: translate(-18px, 0); }
  50% { transform: translate(-11px, -3px); } 65% { transform: translate(-5px, 0); }
  80% { transform: translate(-1px, -2px); } 100% { opacity: 1; transform: none; }
}
@keyframes gcc-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 55% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }

/* ================= corner + pause: peeking up from the bottom-left edge ================= */
.gcc-corner {
  --h: 76px;
  position: fixed; left: 18px; bottom: 0; z-index: 60; width: calc(var(--h) * .794); height: var(--h);
  transform: translateY(100%); transition: transform .45s var(--gcc-ease);
  pointer-events: none;
}
.gcc-corner .gcc-peek { display: block; width: 100%; height: 100%; pointer-events: auto; transform-origin: 30% 100%; transition: transform .35s var(--gcc-ease); }
.gcc-corner.is-tucked { transform: translateY(104%); }
.gcc-corner.is-tucked .gcc-peek { pointer-events: none; }
.gcc-corner.is-peek { transform: translateY(calc(100% - var(--h) * .47)); }
.gcc-corner.is-lean { transform: translateY(calc(100% - var(--h) * .74)); }
.gcc-corner.is-lean .gcc-peek { transform: rotate(5deg); }
.gcc-corner.is-up { transform: translateY(-8px); }
.gcc-pause { left: 22px; }
@media (max-width: 640px) { .gcc-corner { --h: 64px; left: 12px; } }

/* ================= sidekick: perched beside the header sticker ================= */
.gcc-side {
  position: absolute; z-index: 55; width: 33px; height: 42px; pointer-events: none;
  opacity: 0; transform: translateY(12px) scale(.6); transform-origin: 30% 100%;
  transition: transform .4s var(--gcc-ease), opacity .2s ease;
}
.gcc-side.is-up { opacity: 1; transform: none; pointer-events: auto; }
.gcc-sidebtn { display: block; width: 100%; height: 100%; }


/* ================= edges: visits from the top (hanging upside down) or bottom (peeking up) ================= */
.gcc-edge {
  --h: 72px;
  position: fixed; z-index: 60; left: 16px; width: calc(var(--h) * .794); height: var(--h);
  pointer-events: none; visibility: hidden;
  transition: transform .35s cubic-bezier(.55, 0, .75, .2), visibility 0s linear .35s;
}
.gcc-edge .gcc-edgebtn { display: block; width: 100%; height: 100%; pointer-events: auto; }
.gcc-edge[data-edge="bottom"] { bottom: 0; transform: translateY(104%); }
.gcc-edge[data-edge="top"] { top: 0; transform: translateY(-104%); }
.gcc-edge[data-edge="top"] .gcc-fig { transform: rotate(180deg); }
.gcc-edge.is-in { visibility: visible; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.gcc-edge.is-in[data-edge="bottom"] { transform: translateY(34%); }
.gcc-edge.is-in[data-edge="top"] { transform: translateY(-10%); }
.gcc-edge.is-in[data-edge="bottom"]:hover, .gcc-edge.is-open[data-edge="bottom"] { transform: translateY(14%); }
.gcc-edge.is-in[data-edge="top"]:hover, .gcc-edge.is-open[data-edge="top"] { transform: translateY(-2%); }
.gcc-edge.is-in .gcc-fig { transition: transform .3s var(--gcc-ease); }
.gcc-edge.is-in[data-edge="top"] .gcc-hit:hover .gcc-fig { transform: rotate(174deg); }
@media (max-width: 640px) { .gcc-edge { --h: 60px; } }

/* ================= edges: the footer runner ================= */
.gcc-runner { position: absolute; left: 0; z-index: 4; width: 44px; height: 56px; will-change: transform; }
.gcc-runner-lean { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .25s ease; }
.gcc-runbtn { display: block; width: 100%; height: 100%; }
.gcc-runner.is-running[data-dir="r"] .gcc-runner-lean { transform: rotate(6deg); }
.gcc-runner.is-running[data-dir="l"] .gcc-runner-lean { transform: rotate(-6deg); }
.gcc-runner.is-running .gcc-fig { animation: gcc-hop .3s ease-in-out infinite alternate; }
.gcc-runner.is-running .c-leg-l { animation: gcc-stride .3s ease-in-out infinite alternate; }
.gcc-runner.is-running .c-leg-r { animation: gcc-stride .3s ease-in-out infinite alternate-reverse; }
@keyframes gcc-hop { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes gcc-stride { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@media (max-width: 640px) { .gcc-runner { width: 38px; height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .gcc-edge, .gcc-edge.is-in { transition: none !important; }
  .gcc-runner.is-running .gcc-fig, .gcc-runner.is-running .c-leg-l, .gcc-runner.is-running .c-leg-r { animation: none !important; }
}


/* ================= the footer meadow actor (edges mode) ================= */
.gcc-stage { position: absolute; inset: 0; pointer-events: none !important; z-index: 4; }
.gcc-stage.is-hidden { display: none; }
.gcc-actor { position: absolute; left: 0; width: 48px; height: 60px; will-change: transform; z-index: 1; }
.gcc-actor-shadow { position: absolute; left: 16%; right: 16%; bottom: -1px; height: 5px; border-radius: 50%;
  background: rgb(20 22 29 / .42); transform-origin: 50% 50%; }
/* a faint paper band along the lane (never a blob around the character) */
.gcc-stage-band { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; pointer-events: none;
  background: linear-gradient(180deg, rgb(246 245 241 / 0), rgb(246 245 241 / .4) 55%, rgb(246 245 241 / .12)); }
/* the whole lower meadow is clickable: click to send the character running */
.gcc-stage-hit { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: auto; cursor: pointer; }
.gcc-actor-hop { position: absolute; inset: 0; will-change: transform; }
.gcc-actor-btn { display: block; width: 100%; height: 100%; pointer-events: auto; }
.gcc-actor-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gcc-actor-btn:focus-visible { outline-offset: 6px; }
.gcc-blades { position: absolute; left: 0; bottom: 0; z-index: 2; overflow: visible; pointer-events: none; }
.gcc-blades .gb { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) { .gcc-blades .gb { animation: gcc-sway 3.2s ease-in-out infinite alternate; } }
@keyframes gcc-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.gcc-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.gcc-fx > span { position: absolute; display: block; }
.gcc-dust { bottom: 4px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: #FDFCF9; border: 1px solid rgb(31 60 150 / .55); }
.gcc-pebble { width: 6px; height: 5px; margin-left: -3px; border-radius: 50% 45% 50% 40%; background: #8E95A3; border: 1px solid #14161D; }
.gcc-crow { width: 34px; height: 20px; }
.gcc-wind { width: 40px; height: 8px; }
.gcc-sparkle { width: 16px; height: 16px; }
.gcc-flame { width: 16px; height: 22px; margin-left: -8px; transform-origin: 50% 100%; }
.gcc-fx svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gcc-fx > span { filter: drop-shadow(0 0 1.5px #FDFCF9) drop-shadow(0 0 3px rgb(246 245 241 / .9)); }
@media (max-width: 640px) { .gcc-actor { width: 38px; height: 48px; } .gcc-stage-band { height: 58px; } }

/* ================= character switcher ================= */
.gcc-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 9px/1.3 var(--gcc-sans, "Jost", sans-serif); letter-spacing: .2em; text-transform: uppercase; color: rgb(20 22 29 / .6); }
.gcc-switch-name { color: #1F3C96; }
.gcc-switch-list { display: inline-flex; gap: 4px; }
.gcc-switch-btn { width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: rgb(253 252 249 / .85); cursor: pointer; overflow: hidden; position: relative; transition: border-color .2s, transform .2s; }
.gcc-switch-btn img { position: absolute; left: 50%; top: 1px; width: 32px; height: auto; transform: translateX(-50%); max-width: none; }
.gcc-switch-btn:hover { transform: translateY(-2px); border-color: rgb(20 22 29 / .3); }
.gcc-switch-btn.is-on { border-color: #1F3C96; box-shadow: 0 0 0 1px #1F3C96 inset; }
.gcc-switch-btn:focus-visible { outline: 1.5px solid #1F3C96; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .gcc *, .gcc, .gcc-think { transition-duration: 0s !important; animation: none !important; }
  .gcc-footer.is-arriving, .gcc-footer.is-here { opacity: 1; transform: none; }
  .gcc-sprite:hover .gcc-fig, .gcc-win:hover .gcc-fig { transform: none; }
}