/* Harpoons graphics library: shared tokens and behaviour.
   Every graphic is a .hg element with a .hg-stage inside. The stage sets 1em to 10px at the
   graphic's design width (--hg-design, in tens of pixels), so a graphic scales like an image
   while its text stays real HTML. Colours come from the tokens below; add
   data-hg-theme="dark" to the graphic or any parent for the dark version. */

.hg {
  --hg-bg: #ffffff;
  --hg-surface: #f6f8f7;
  --hg-card: #ffffff;
  --hg-ink: #0f0e12;
  --hg-body: #4d4d4d;
  --hg-muted: #767676;
  --hg-faint: #b8b8b8;
  --hg-line: #e5e5e5;
  --hg-dot: 15, 14, 18;
  --hg-orange: #f05a24;
  --hg-orange-rgb: 240, 90, 36;
  --hg-amber: #fab413;
  --hg-amber-rgb: 250, 180, 19;
  --hg-orange-soft: rgba(240, 90, 36, 0.1);
  --hg-amber-soft: rgba(250, 180, 19, 0.16);
  --hg-shadow: 0 0.2em 1.6em rgba(15, 14, 18, 0.07);
  --hg-font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hg-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hg-ratio: 16 / 9;
  --hg-design: 96;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--hg-ratio);
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  background: var(--hg-bg);
  color: var(--hg-ink);
  font-family: var(--hg-font);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

.hg[data-hg-theme="dark"],
[data-hg-theme="dark"] .hg {
  --hg-bg: #0f0e12;
  --hg-surface: #16161a;
  --hg-card: #1c1c1e;
  --hg-ink: #ededef;
  --hg-body: #c8c8cc;
  --hg-muted: #8c8c92;
  --hg-faint: #4a4a50;
  --hg-line: #2c2c31;
  --hg-dot: 237, 237, 239;
  --hg-orange: #f28a59;
  --hg-orange-rgb: 242, 138, 89;
  --hg-orange-soft: rgba(242, 138, 89, 0.14);
  --hg-amber-soft: rgba(250, 180, 19, 0.14);
  --hg-shadow: 0 0.2em 1.6em rgba(0, 0, 0, 0.35);
}

.hg[data-hg-theme="light"] {
  --hg-bg: #ffffff;
  --hg-surface: #f6f8f7;
  --hg-card: #ffffff;
  --hg-ink: #0f0e12;
  --hg-body: #4d4d4d;
  --hg-muted: #767676;
  --hg-faint: #b8b8b8;
  --hg-line: #e5e5e5;
  --hg-dot: 15, 14, 18;
  --hg-orange: #f05a24;
  --hg-orange-rgb: 240, 90, 36;
  --hg-orange-soft: rgba(240, 90, 36, 0.1);
  --hg-amber-soft: rgba(250, 180, 19, 0.16);
  --hg-shadow: 0 0.2em 1.6em rgba(15, 14, 18, 0.07);
}

/* Sit on the page background instead of a solid panel. */
.hg.hg-clear {
  background: transparent;
}

.hg *,
.hg *::before,
.hg *::after {
  box-sizing: border-box;
}

.hg-stage {
  position: absolute;
  inset: 0;
  font-size: calc(100cqi / var(--hg-design));
}

.hg svg {
  display: block;
  overflow: visible;
}

.hg-mono {
  font-family: var(--hg-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* Small UI pieces shared by the product scenes. Rounded like the product itself. */
.hg-card {
  background: var(--hg-card);
  border: 1px solid var(--hg-line);
  border-radius: 1em;
  box-shadow: var(--hg-shadow);
}

.hg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.7em;
  border-radius: 99em;
  background: var(--hg-orange-soft);
  color: var(--hg-orange);
  font-family: var(--hg-mono);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hg-chip.is-amber {
  background: var(--hg-amber-soft);
  color: #b07a00;
}

[data-hg-theme="dark"] .hg-chip.is-amber,
.hg[data-hg-theme="dark"] .hg-chip.is-amber {
  color: var(--hg-amber);
}

.hg-chip.is-grey {
  background: color-mix(in srgb, var(--hg-muted) 14%, transparent);
  color: var(--hg-muted);
}

.hg-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.8em;
  height: 2.8em;
  border-radius: 0.7em;
  background: var(--hg-surface);
  border: 1px solid var(--hg-line);
  color: var(--hg-ink);
  font-size: 1.1em;
  font-weight: 400;
}

/* Playback. The runtime adds .is-paused until a graphic is on screen, and again when it
   leaves. Reduced motion shows each graphic's resting state, which is its key frame. */
.hg.is-paused *,
.hg.is-paused *::before,
.hg.is-paused *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hg *,
  .hg *::before,
  .hg *::after {
    animation: none !important;
    transition: none !important;
  }
}

.hg.is-still *,
.hg.is-still *::before,
.hg.is-still *::after {
  animation: none !important;
  transition: none !important;
}