/* Homing Pigeon tokens. Light scheme first, dark overrides below. */
:root {
  color-scheme: light dark;

  /* color */
  --c-bg: #c0c0c0;            /* page ground, Windows-95 gray, dotted tile sits on top */
  --c-bg-dot: #a8a8a8;        /* dot in the background tile */
  --c-fg: #000000;            /* body text */
  --c-muted: #3a3a3a;         /* secondary text, footer line */
  --c-line: #404040;          /* dark edge of a bevel */
  --c-line-hi: #ffffff;       /* light edge of a bevel */
  --c-surface: #c0c0c0;       /* window body */
  --c-surface-2: #dcdcdc;     /* inset panel inside a window */
  --c-title: #000080;         /* window title bar */
  --c-title-fg: #ffffff;      /* title bar text */
  --c-accent: #6a1fc9;        /* tagline, the word Yes, inline emphasis */
  --c-accent-fg: #ffffff;     /* text on accent */
  --c-link: #000080;
  --c-link-visited: #5a1a8a;
  --c-focus: #000080;         /* 3px dashed focus ring */
  --c-code-bg: #000000;       /* code blocks stay black in both schemes */
  --c-code-fg: #5bff6a;
  --c-code-muted: #9a9a9a;    /* $ prompt, comments */
  --c-bubble-bg: #ffffff;     /* sample text message */
  --c-bubble-fg: #000000;
  --c-counter: #5bff6a;       /* counter digits */
  --c-badge-1: #000000;       /* 88x31 badge grounds */
  --c-badge-2: #000080;
  --c-badge-3: #800000;
  --c-badge-4: #008080;
  --c-rainbow: linear-gradient(90deg,#c6008f,#b87a00,#0a7a1f,#0062b8,#6a1fc9);          /* rules */
  --c-chrome: linear-gradient(180deg,#a0006f 0%,#8a5a00 30%,#0a6a1f 55%,#004f99 78%,#5a14b0 100%); /* H1 fill */
  --c-chrome-shadow: #ffffff; /* H1 drop shadow */

  /* type */
  --font: Verdana, Geneva, "DejaVu Sans", sans-serif;
  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-mono: "Courier New", Courier, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;   /* 12 badges, footer */
  --fs-sm: 0.875rem;  /* 14 code, h2 in display face */
  --fs-md: 1rem;      /* 16 body */
  --fs-lg: 1.25rem;   /* 20 lede */
  --fs-xl: 1.5rem;    /* 24 h2 in display face at desktop */
  --fs-hero: clamp(1.75rem, 1rem + 4vw, 3.25rem); /* h1, display face */
  --fw-normal: 400;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --lh-display: 1.6;  /* Press Start 2P needs air */

  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --radius: 0;        /* nothing is rounded */
  --col-max: 960px;
  --border: 3px;      /* bevel width */
  --border-thin: 2px; /* inset code and panels */

  /* motion */
  --t-fast: 120ms;
  --t-slow: 4s;       /* star twinkle period */
  --ease: steps(2, end); /* everything snaps, nothing eases */
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #000000;
    --c-bg-dot: #ffffff;
    --c-fg: #e6e6e6;
    --c-muted: #b0b0b0;
    --c-line: #404040;
    --c-line-hi: #ffffff;
    --c-surface: #c0c0c0;   /* windows stay gray on the black sky */
    --c-surface-2: #dcdcdc;
    --c-title: #000080;
    --c-title-fg: #ffffff;
    --c-accent: #ffe14a;
    --c-accent-fg: #000000;
    --c-link: #8fd3ff;
    --c-link-visited: #d8b4ff;
    --c-focus: #ffe14a;
    --c-code-bg: #000000;
    --c-code-fg: #5bff6a;
    --c-code-muted: #9a9a9a;
    --c-bubble-bg: #ffffff;
    --c-bubble-fg: #000000;
    --c-counter: #5bff6a;
    --c-rainbow: linear-gradient(90deg,#ff5ad9,#ffe14a,#5bff6a,#48c6ff,#b15bff);
    --c-chrome: linear-gradient(180deg,#ff5ad9 0%,#ffe14a 30%,#5bff6a 55%,#48c6ff 78%,#b15bff 100%);
    --c-chrome-shadow: #5a2a8a;
  }
}

/* Site styles. No JS needed. */
@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--fw-normal) var(--fs-md)/var(--lh-body) var(--font);
  color: var(--c-fg);
  background: radial-gradient(circle, var(--c-bg-dot) 0.8px, transparent 1.2px) 0 0/14px 14px var(--c-bg);
  text-wrap: pretty;
}
@media (prefers-color-scheme: dark) {
  body { background: radial-gradient(circle, var(--c-bg-dot) 0.8px, transparent 1.2px) 0 0/90px 70px var(--c-bg); }
}
/* second star layer, decorative, animated when motion is allowed */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle,#ffe14a 0.8px,transparent 1.3px) 37px 23px/170px 130px,
              radial-gradient(circle,#48c6ff 0.9px,transparent 1.4px) 110px 61px/210px 160px;
  display: none;
}
@media (prefers-color-scheme: dark) { .sky { display: block; } }
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
  .sky { animation: twinkle var(--t-slow) var(--ease) infinite; }
}

a { color: var(--c-link); }
a:visited { color: var(--c-link-visited); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px dashed var(--c-focus); outline-offset: 2px; }

h1, h2, h3, p, ul, ol, pre, figure { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: var(--fw-normal); line-height: var(--lh-display); }
h1 {
  font-size: var(--fs-hero);
  line-height: 1.15;
  background: var(--c-chrome);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 var(--c-chrome-shadow));
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h2 { font-size: var(--fs-sm); }
@media (min-width: 720px) { h2 { font-size: 1.125rem; } }
h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
strong { font-weight: var(--fw-bold); }
code, pre, kbd { font-family: var(--font-mono); }

.wrap { max-width: var(--col-max); margin: 0 auto; padding: var(--sp-4) var(--sp-3) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 720px) { .wrap { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-5); } }

/* hero */
.hero { display: grid; gap: var(--sp-3); align-items: center; }
@media (min-width: 720px) { .hero { grid-template-columns: 1fr minmax(260px, 420px); gap: var(--sp-4); } }
.hero-text { display: flex; flex-direction: column; gap: var(--sp-3); }
.lede { font-size: var(--fs-lg); max-width: 36em; }
.tagline { font-family: var(--font-display); font-size: var(--fs-xs); line-height: var(--lh-display); color: var(--c-accent); }
@media (min-width: 720px) { .tagline { font-size: var(--fs-sm); } }
.pigeon { width: min(100%, 400px); height: auto; display: block; image-rendering: pixelated; justify-self: center; }
@media (min-width: 720px) { .pigeon { justify-self: end; } }

/* rainbow rule */
.rule { height: 6px; border: 2px solid; border-color: var(--c-line-hi) var(--c-line) var(--c-line) var(--c-line-hi); background: var(--c-rainbow); }

/* window */
.win { background: var(--c-surface); color: #000; border: var(--border) solid; border-color: var(--c-line-hi) var(--c-line) var(--c-line) var(--c-line-hi); padding: 4px; }
.win-title { background: var(--c-title); color: var(--c-title-fg); padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.win-title h2 { color: inherit; }
.win-btns { display: flex; gap: 3px; flex: none; }
.win-btns span { width: 14px; height: 12px; background: var(--c-surface); border: 1px solid; border-color: var(--c-line-hi) var(--c-line) var(--c-line) var(--c-line-hi); }
.win-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.win-body a { color: #000080; }
.win-body a:visited { color: #5a1a8a; }
.win-body :focus-visible { outline-color: #000080; }

/* two-up row: code window + counter panel */
.row { display: grid; gap: var(--sp-3); align-items: start; }
@media (min-width: 720px) { .row { grid-template-columns: 1fr 300px; gap: var(--sp-4); } }

/* code */
pre {
  background: var(--c-code-bg); color: var(--c-code-fg);
  border: var(--border-thin) inset #808080;
  padding: var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere;
  position: relative;
}
pre .p { color: var(--c-code-muted); user-select: none; }
.win-body > pre { margin: 0; }
pre.has-copy { padding-top: 2.5rem; }
.copy { /* injected by JS only */
  position: absolute; top: 6px; right: 6px;
  font: var(--fw-bold) var(--fs-xs)/1 var(--font); color: #000;
  background: var(--c-surface); border: 2px solid; border-color: var(--c-line-hi) var(--c-line) var(--c-line) var(--c-line-hi);
  padding: 4px 8px; cursor: pointer;
}
.copy:active { border-color: var(--c-line) var(--c-line-hi) var(--c-line-hi) var(--c-line); }

/* counter panel */
.panel { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; text-align: center; padding: var(--sp-3) var(--sp-2); }
.counter { display: flex; gap: 2px; background: #000; padding: 4px; border: var(--border-thin) inset #808080; }
.counter span::before { content: "0"; }
.counter span { font: var(--fw-bold) 1.375rem/1 var(--font-mono); color: var(--c-counter); background: #111; padding: 2px 4px; }

/* 88x31 badges */
.badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.badge { display: grid; place-items: center; width: 88px; height: 31px; color: #fff; text-decoration: none; font: var(--fw-normal) 8px/1 var(--font-display); border: 2px solid; border-color: var(--c-line-hi) var(--c-line) var(--c-line) var(--c-line-hi); }
.badge:visited { color: #fff; }
.badge:hover { text-decoration: underline; }
.badge.b1 { background: var(--c-badge-1); color: #ffe14a; }
.badge.b2 { background: var(--c-badge-2); }
.badge.b3 { background: var(--c-badge-3); }
.badge.b4 { background: var(--c-badge-4); }

/* faq and lists */
.qa { display: flex; flex-direction: column; gap: var(--sp-2); }
.yes { color: var(--c-accent); }
.win-body .yes { color: #6a1fc9; }
ol, ul { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--sp-2); }
blockquote { margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-bubble-bg); color: var(--c-bubble-fg); border: var(--border-thin) inset #808080; font-family: var(--font-mono); }
.sample { background: var(--c-bubble-bg); color: var(--c-bubble-fg); border: var(--border-thin) inset #808080; padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-1); }
.small { font-size: var(--fs-sm); color: var(--c-muted); }
.win-body .small { color: #3a3a3a; }

/* footer */
footer { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; text-align: center; font-size: var(--fs-sm); color: var(--c-muted); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); justify-content: center; }

/* document pages: terms, privacy, thanks, 404 */
.doc { max-width: 680px; }
.doc .win-body { gap: var(--sp-3); }
.doc h2 { font-family: var(--font); font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: var(--lh-tight); }
.doc h1 { font-size: clamp(1.25rem, 1rem + 2vw, 2rem); }
.home { font-family: var(--font-display); font-size: var(--fs-xs); line-height: var(--lh-display); }
.sky-title { margin-bottom: var(--sp-3); }
.thanks-pigeon { margin: 0 auto; }
.nb { white-space: nowrap; }