/* MakersMCP: one screen, light and dark, in 26 languages. The visitor's system picks the
   theme until the button at the top right sets data-theme on <html>, which site.js
   remembers. Right-to-left pages (ar, he, fa) need logical sides: no left or right here. */
:root {
  color-scheme: light dark;
  --bg: #f6f5f1;
  --fg: #131312;
  --muted: #5f5e59;
  /* The lightest of this grey that small text can be: 4.6:1 on --bg, 5:1 on --card. */
  --faint: #706f6a;
  --line: rgba(19, 19, 18, 0.1);
  --card: #ffffff;
  --card-hover: #fbfaf7;
  --dot: rgba(19, 19, 18, 0.07);
  --accent: #1a6b45;
  --btn-bg: #131312;
  --btn-fg: #f6f5f1;
  --hole: #e4dbcd;
  --hole-in: #f2ece3;
  --floor: #dcd2c2;
  --wall: #cbbda6;
  --wall-shade: rgba(70, 48, 22, 0.26);
  --lip: rgba(255, 255, 255, 0.95);
  --rim-line: rgba(19, 19, 18, 0.1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

/* The two dark blocks are the same: the system's dark, and dark picked with the button. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #110e0c;
    --fg: #f5ede3;
    --muted: #c2b2a2;
    --faint: #93826f;
    --line: rgba(245, 237, 227, 0.12);
    --card: #1a1613;
    --card-hover: #211c18;
    --dot: rgba(245, 237, 227, 0.08);
    --accent: #4caf7d;
    --btn-bg: #f5ede3;
    --btn-fg: #110e0c;
    --hole: #040302;
    --hole-in: #0b0907;
    --floor: #171412;
    --wall: #020101;
    --wall-shade: rgba(0, 0, 0, 0.65);
    --lip: rgba(245, 237, 227, 0.09);
    --rim-line: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #110e0c;
  --fg: #f5ede3;
  --muted: #c2b2a2;
  --faint: #93826f;
  --line: rgba(245, 237, 227, 0.12);
  --card: #1a1613;
  --card-hover: #211c18;
  --dot: rgba(245, 237, 227, 0.08);
  --accent: #4caf7d;
  --btn-bg: #f5ede3;
  --btn-fg: #110e0c;
  --hole: #040302;
  --hole-in: #0b0907;
  --floor: #171412;
  --wall: #020101;
  --wall-shade: rgba(0, 0, 0, 0.65);
  --lip: rgba(245, 237, 227, 0.09);
  --rim-line: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] { color-scheme: light; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--fg);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Top bar */
.top, .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.mark { width: 22px; height: 22px; fill: var(--fg); }
.mark .lit { fill: var(--accent); }

.gh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.gh:hover { background: var(--card-hover); }

.end { position: relative; display: flex; align-items: center; gap: 8px; }

/* Light or dark: a moon in light, a sun in dark */
.theme {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.theme:hover { background: var(--card-hover); }
.theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
.gh svg { width: 16px; height: 16px; fill: currentColor; }
.gh .count {
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

/* Layers: the peepholes (0) open only where the page (1) is empty, the offer bar (2) is
   fixed above the page, and the header (3) is above both, so the open language list
   hangs over the headline, the sign-in card and the bar. */
.hero, .foot { position: relative; z-index: 1; }
.top { position: relative; z-index: 3; }

/* Hero */
.hero {
  align-self: center;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px var(--gutter);
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  /* A headline that breaks keeps its lines even, not one word alone below. */
  text-wrap: balance;
}
h1 span { color: var(--accent); }

/* The second line of the headline is handwritten, with a drawn underline */
h1 .hand {
  position: relative;
  display: inline-block;
  font-family: var(--hand, Kalam, cursive);
  font-weight: var(--hand-weight, 700);
  font-size: 1.02em;
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(-2deg);
  transform-origin: left center;
}
h1 .hand::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.03em;
  inset-inline-end: 0.12em;
  bottom: -0.04em;
  height: 0.15em;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 70 5 160 3 297 9' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 70 5 160 3 297 9' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

[dir="rtl"] h1 .hand { transform: rotate(2deg); transform-origin: right center; }
[dir="rtl"] h1 .hand::after { transform: scaleX(-1); }

.lede {
  margin: 22px 0 0;
  max-width: 640px;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; fill: currentColor; }

.cmd {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}
.cmd .prompt { color: var(--faint); }

em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* The kits, by field */
.kits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.kits li > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 14px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.kits b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.kits span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.kits span a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.kits span a:hover { color: var(--accent); border-color: var(--accent); }
.kits .later > div { background: transparent; border-style: dashed; }
.kits .later span { font-family: var(--sans); font-size: 13.5px; }
.kits em { font-size: 10px; padding: 1px 5px; }

.note {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--faint);
}

/* Footer: only the GitHub link, on the right */
.foot {
  justify-content: flex-end;
  font-size: 12px;
  color: var(--faint);
}
.foot a { text-decoration: none; color: var(--muted); }
.foot a:hover { color: var(--fg); }

/* The language menu: the language's round flag and code, then every language with its
   flag and its own name (assets/flags.css). The list hangs from the end of the bar, so
   it stays on screen on a phone. It is as wide as the longest name needs (Bahasa
   Indonesia, in bold on its own page); on a phone too narrow for that, a name breaks
   onto a second line inside its cell. */
.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 11px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: var(--card-hover); }
.lang summary .flag { width: 17px; height: 17px; }

.langs {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 4px;
  width: 352px;
  max-width: calc(100vw - 2 * var(--gutter));
  max-height: calc(100svh - 90px);
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 14px 40px rgba(40, 28, 14, 0.14);
}
.langs a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
.langs a:hover { background: var(--bg); }
.langs a[aria-current] { color: var(--accent); font-weight: 600; }

/* The offer of the visitor's own language, at the bottom, in that language. One line
   where it fits; where the words and the buttons do not fit side by side with room for
   the words (a narrow phone, a long language), the buttons go under the words. */
.offer {
  position: fixed;
  z-index: 2;
  inset-inline: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0 auto;
  padding-block: 7px;
  padding-inline: 16px 7px;
  border: 1px solid var(--line);
  /* Half a one-line bar's height: a pill on one line, rounded corners on more. */
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 14px 40px rgba(40, 28, 14, 0.14);
  font-size: 14px;
  line-height: 1.35;
}
.offer[hidden] { display: none; }
.offer p { flex: 1 1 8em; margin: 0; color: var(--muted); }
.offer-act { display: flex; flex: none; align-items: center; gap: 10px; margin-inline-start: auto; }
.offer-go {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.offer-x {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--faint);
  cursor: pointer;
}
.offer-x:hover { color: var(--fg); background: var(--bg); }
.offer-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .langs, :root:not([data-theme="light"]) .offer { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
}
:root[data-theme="dark"] .langs, :root[data-theme="dark"] .offer { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }

/* Scripts Geist does not have come from the system's own face. Joined scripts and the
   ones without capitals lose the tight tracking, and tall marks get room. */
:lang(ar) h1, :lang(fa) h1, :lang(he) h1, :lang(th) h1, :lang(hi) h1,
:lang(ja) h1, :lang(ko) h1, :lang(zh) h1 { letter-spacing: 0; }
:lang(ar) h1, :lang(fa) h1, :lang(th) h1, :lang(hi) h1 { line-height: 1.3; }
:lang(vi) h1, :lang(ja) h1, :lang(ko) h1, :lang(zh) h1 { line-height: 1.15; }
:lang(ar) .lede, :lang(fa) .lede, :lang(th) .lede, :lang(hi) .lede { line-height: 1.7; }
:lang(ja) h1, :lang(zh) h1 { word-break: auto-phrase; }
/* Armenian is the one script whose system faces differ a lot (a serif on macOS): the
   page loads Noto Sans Armenian for it (.tools/build-i18n.py BODY_FONT). */
:lang(hy) { --sans: "Geist", "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif; }
:lang(ko) h1, :lang(ko) .lede { word-break: keep-all; }

/* Not found */
.missing h1 { font-size: clamp(56px, 10vw, 120px); }
.missing .lede { margin-top: 14px; }

/* Smaller screens keep it to one screen too. The width sets the layout: two columns of
   cards below 900px, a phone's sizes below 560px. Then the height takes over, step by step
   at every width: the cards become chips, the headline follows the height, the gaps get
   smaller, and on the shortest phones the chips go. Each step starts where the page
   without it no longer fits in the longest language, which is why a narrow phone takes a
   step sooner than a wide one. check-pages.mjs measures every language at each step's
   edge, from a 320x568 phone up. */
@media (max-width: 900px) {
  .kits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .kits .later { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .top, .foot { padding-top: 12px; padding-bottom: 12px; }
  .top .brand { flex: none; }
  .gh { padding: 6px 10px; font-size: 13px; }
  .theme { width: 32px; height: 32px; }
  .lang summary { height: 32px; padding: 0 9px 0 8px; font-size: 12px; gap: 5px; }
  .lang summary .flag { width: 16px; height: 16px; }
  /* The header is shorter here, so the list may reach further down: on a 320x568 phone
     it shows every language without scrolling. */
  .langs { max-height: calc(100svh - 72px); }
  .offer { font-size: 13px; padding-inline-start: 14px; }
  .theme svg { width: 15px; height: 15px; }
  .eyebrow { margin-bottom: 12px; }
  /* Narrower than 334px (a 320 phone, a folded 280 one) it follows the width, or the
     longest handwritten line (Thai) breaks onto two. */
  h1 { font-size: min(34px, 10.2vw); }
  .lede { margin-top: 14px; font-size: 15px; line-height: 1.5; }
  /* The button and the command keep their words on one line; when both do not fit
     side by side (most languages but English), the command goes under the button. */
  .actions { margin-top: 20px; gap: 8px; }
  .btn, .cmd { white-space: nowrap; }
  .btn { padding: 10px 13px; font-size: 14px; gap: 7px; }
  .cmd { padding: 9px 10px; font-size: 12px; gap: 7px; }
  .cmd .prompt { display: none; }
  .kits { gap: 8px; margin-top: 24px; }
  .kits li > div { padding: 10px 11px 11px; gap: 3px; }
  .kits b { font-size: 14px; }
  .kits span { font-size: 12px; }
  .note { margin-top: 12px; font-size: 12.5px; }
  .foot { font-size: 11px; }
}

@media (max-width: 430px) {
  .gh .gh-word { display: none; }
  .gh .count { padding-inline-start: 6px; }
  .gh { gap: 6px; }
}

/* Too short for the cards below desktop width: the fields become a row of chips, the lede
   already names them. A phone up to 820px high (880px up to 380px wide), a tablet or half
   a screen up to 880px. */
@media (max-width: 380px) and (max-height: 880px), (max-width: 560px) and (max-height: 820px),
  (min-width: 561px) and (max-width: 900px) and (max-height: 880px) {
  .kits { display: flex; flex-wrap: wrap; margin-top: 22px; }
  .kits li > div { flex-direction: row; padding: 7px 13px; border-radius: 999px; }
  .kits span { display: none; }
}

/* Windows up to 880px high wider than a phone (a 1920x1080 screen at 125%, a 13-inch
   MacBook, a 1366x768 or 1280x800 screen, all less the browser's own bars; a tablet; half
   a screen): the headline follows the height and the gaps get smaller, so every language
   fits one screen there too, the ones whose headline takes two lines (Polish, Greek,
   Russian...) included. At 6.2vw the longest headlines (Russian, Ukrainian) stay on one
   line in a narrow window. */
@media (max-height: 880px) and (min-width: 561px) {
  .top, .foot { padding-top: 12px; padding-bottom: 12px; }
  .eyebrow { margin-bottom: 12px; }
  h1 { font-size: clamp(40px, min(6.2vw, 10vh), 84px); }
  .lede { margin-top: 14px; }
  .actions { margin-top: 20px; }
  .note { margin-top: 12px; }
  :lang(ar) h1, :lang(fa) h1, :lang(th) h1, :lang(hi) h1 { line-height: 1.2; }
  :lang(ar) .lede, :lang(fa) .lede, :lang(th) .lede, :lang(hi) .lede { line-height: 1.6; }
}
@media (max-height: 880px) and (min-width: 901px) {
  .lede { font-size: 17px; }
  .kits { margin-top: 24px; }
  .kits li > div { padding: 11px 12px 12px; gap: 4px; }
}

/* Shorter still, smaller gaps again: a window up to 620px high (a 1920x1080 screen at
   150%, less the browser's bars), a phone up to 660px (360x640), 680px when narrower than
   375px. */
@media (max-height: 620px) and (min-width: 561px), (max-height: 660px) and (max-width: 560px),
  (max-height: 680px) and (max-width: 374px) {
  .top, .foot { padding-top: 8px; padding-bottom: 8px; }
  .hero { padding-block: 4px; }
  .eyebrow { margin-bottom: 8px; }
  .lede { margin-top: 10px; }
  .actions { margin-top: 14px; }
  .kits { margin-top: 14px; }
  .note { margin-top: 8px; }
}
@media (max-height: 620px) and (min-width: 901px) {
  .kits { margin-top: 16px; }
  .kits li > div { padding: 8px 12px 9px; }
}

/* The shortest phones have no room for the chips, and the lede names the fields: up to
   600px high (320x568, a 375x667 phone less Safari's bars), 630px up to 399px wide, 700px
   when narrower than 360px. */
@media (max-height: 600px) and (max-width: 560px), (max-height: 630px) and (max-width: 399px),
  (max-height: 700px) and (max-width: 359px) {
  .kits { display: none; }
}

/* Armenian words run long in Noto Sans Armenian: its headline is a size smaller. */
:lang(hy) h1 { font-size: clamp(36px, 5.6vw, 74px); }
@media (max-height: 880px) and (min-width: 561px) {
  :lang(hy) h1 { font-size: clamp(36px, min(5.6vw, 8.8vh), 74px); }
}
@media (max-width: 560px) {
  :lang(hy) h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Peepholes: a round hole opens in an empty part of the page, a little maker stacks a
   block in it, and it closes again. peek.js picks the place; one life is --life long. */
.peeks { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.peek {
  --life: 5.6s;
  --body: #ff9a76;
  --body-hi: #ffc9b2;
  --fur-dark: #e0745a;
  --feet: #e06a49;
  --carry: var(--accent);
  position: absolute;
  width: var(--d, 124px);
  height: var(--d, 124px);
}

/* Carved into the page: the far wall shows as a band at the top with its shadow on the
   floor below it, and the near edge of the page catches the light. The rim grows with
   the hole, outside its clip. */
.peek .rim, .peek .hole { position: absolute; inset: 0; border-radius: 50%; }
.peek .rim {
  box-shadow: 0 1.5px 0 var(--lip), 0 0 0 1px var(--rim-line);
  transform: scale(0);
  animation: pk-rim var(--life) ease-in-out both;
}
.peek .hole {
  overflow: hidden;
  background: radial-gradient(circle at 50% 64%, var(--hole-in), var(--hole) 76%);
  box-shadow:
    inset 0 calc(var(--d, 124px) * 0.1) 0 0 var(--wall),
    inset 0 calc(var(--d, 124px) * 0.17) calc(var(--d, 124px) * 0.1) calc(var(--d, 124px) * -0.02) var(--wall-shade),
    inset 0 0 0 1px var(--rim-line);
  clip-path: circle(0% at 50% 50%);
  animation: pk-hole var(--life) ease-in-out both;
}
.peek.c2 { --body: #5ec4b6; --body-hi: #a6e7dc; --fur-dark: #43a395; --feet: #3e9f92; }
.peek.c3 { --body: #b19cf5; --body-hi: #ddd2fe; --fur-dark: #937be6; --feet: #8b74d6; }
.peek.dark-block { --carry: var(--fg); }
.peek svg { display: block; width: 100%; height: 100%; }
.peek.flip svg { transform: scaleX(-1); }

.peek .floor { fill: var(--floor); }
.peek .blk { fill: var(--accent); }
.peek .blk.alt { fill: var(--fg); }
.peek .carry { fill: var(--carry); }
.peek .fur { fill: none; stroke: var(--body); stroke-width: 1.3; stroke-linecap: round; }
.peek .fur-in { fill: none; stroke: var(--fur-dark); stroke-width: 0.7; stroke-linecap: round; opacity: 0.45; }
.peek .feet { fill: var(--feet); }
.peek .eye { fill: #fff; }
.peek .glint { fill: #fff; }
.peek .hat { fill: #f6c445; }
.peek .brim { fill: #e0a92a; }
.peek .ink { fill: #2a1d16; }
.peek .smile { fill: none; stroke: #2a1d16; stroke-width: 1.2; stroke-linecap: round; }
.peek .cheek { fill: #ff5f6d; opacity: 0.45; }
.peek .arm { fill: none; stroke: var(--body); stroke-width: 3.4; stroke-linecap: round; }
.peek .shadow { fill: rgba(0, 0, 0, 0.18); }
.peek .spark { fill: #f6c445; }

.peek .walker, .peek .carrier, .peek .arms-up, .peek .arms-down, .peek .spark, .peek .eyes {
  animation-duration: var(--life);
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
.peek .walker { animation-name: pk-walk; }
.peek .carrier { animation-name: pk-carry; transform-box: fill-box; transform-origin: 50% 100%; }
.peek .arms-up { animation-name: pk-arms-up; }
.peek .arms-down { animation-name: pk-arms-down; }
.peek .spark { animation-name: pk-spark; transform-box: fill-box; transform-origin: center; }
.peek .eyes { animation-name: pk-blink; transform-box: fill-box; transform-origin: center; }

@keyframes pk-rim {
  0% { transform: scale(0); }
  9% { transform: scale(1); }
  90% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes pk-hole {
  0% { clip-path: circle(0% at 50% 50%); }
  9% { clip-path: circle(50% at 50% 50%); }
  90% { clip-path: circle(50% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}

/* The maker walks in with a bob, stops by the stack, then hops twice and wiggles */
@keyframes pk-walk {
  0%, 6% { transform: translate(-62px, 0); }
  10% { transform: translate(-55px, -1.6px); }
  14% { transform: translate(-48px, 0); }
  18% { transform: translate(-41px, -1.6px); }
  22% { transform: translate(-34px, 0); }
  26% { transform: translate(-27px, -1.6px); }
  30% { transform: translate(-20px, 0); }
  34% { transform: translate(-13px, -1.6px); }
  38% { transform: translate(-6px, 0); }
  42%, 62% { transform: translate(0, 0); }
  66% { transform: translate(0, -7px); }
  70% { transform: translate(0, 0); }
  73% { transform: translate(0, -4px); }
  76% { transform: translate(0, 0) rotate(0deg); }
  79% { transform: translate(0, 0) rotate(-7deg); }
  82% { transform: translate(0, 0) rotate(7deg); }
  85%, 100% { transform: translate(0, 0) rotate(0deg); }
}
.peek .walker { transform-box: fill-box; transform-origin: 50% 100%; }

/* The block rides above its head, then goes up onto the stack and lands */
@keyframes pk-carry {
  0%, 6% { transform: translate(-85px, -8px); }
  10% { transform: translate(-78px, -9.6px); }
  14% { transform: translate(-71px, -8px); }
  18% { transform: translate(-64px, -9.6px); }
  22% { transform: translate(-57px, -8px); }
  26% { transform: translate(-50px, -9.6px); }
  30% { transform: translate(-43px, -8px); }
  34% { transform: translate(-36px, -9.6px); }
  38% { transform: translate(-29px, -8px); }
  42% { transform: translate(-23px, -8px); }
  47% { transform: translate(-23px, -12px); }
  53% { transform: translate(-12px, -19px); }
  58% { transform: translate(0, -2px); }
  60% { transform: translate(0, 0) scale(1.06, 0.88); }
  63%, 100% { transform: translate(0, 0) scale(1, 1); }
}

@keyframes pk-arms-up { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes pk-arms-down { 0%, 52% { opacity: 0; } 53%, 100% { opacity: 1; } }

@keyframes pk-spark {
  0%, 60% { transform: scale(0) rotate(0deg); opacity: 0; }
  66% { transform: scale(1.25) rotate(45deg); opacity: 1; }
  76% { transform: scale(0.9) rotate(90deg); opacity: 1; }
  82%, 100% { transform: scale(0) rotate(120deg); opacity: 0; }
}

@keyframes pk-blink {
  0%, 30%, 33%, 86%, 89%, 100% { transform: scaleY(1); }
  31.5%, 87.5% { transform: scaleY(0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .peeks { display: none; }
}