/* Layout: one narrow column, centered on the screen. Four numbers over a 200-square waffle, and nothing else. */
/* Colors: light-dark(light, dark). The scheme follows the system, unless the theme button set data-theme. */
:root {
  color-scheme: light dark;
  --bg: light-dark(oklch(0.985 0.005 150), oklch(0.2 0.014 160));
  --surface: light-dark(oklch(0.962 0.009 150), oklch(0.245 0.017 160));
  --fg: light-dark(oklch(0.23 0.02 155), oklch(0.94 0.01 150));
  --muted: light-dark(oklch(0.48 0.02 155), oklch(0.7 0.02 150));
  --line: light-dark(oklch(0.89 0.012 150), oklch(0.33 0.02 160));
  --accent: light-dark(oklch(0.55 0.15 142), oklch(0.74 0.16 142));
  --s-world: light-dark(oklch(0.6 0.16 142), oklch(0.7 0.16 142));
  --s-bitcoin: light-dark(oklch(0.7 0.16 55), oklch(0.75 0.15 55));
  --s-gold: light-dark(oklch(0.8 0.12 92), oklch(0.85 0.11 92));
  --s-stocks: light-dark(oklch(0.56 0.13 255), oklch(0.7 0.11 255));
  --font-body:
    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.55 var(--font-body);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The page fills the screen, so the content sits in the middle */
.page {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Header */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.mark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mark span {
  color: var(--accent);
}
.theme {
  appearance: none;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme:hover {
  color: var(--fg);
  background: var(--surface);
}
.theme svg {
  width: 16px;
  height: 16px;
}
.theme .icon-sun {
  display: none;
}
.theme[aria-pressed="true"] .icon-sun {
  display: block;
}
.theme[aria-pressed="true"] .icon-moon {
  display: none;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding-block: 48px 64px;
}

/* Numbers */
.hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero > * {
  margin: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.75rem, 10vw, 4rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.split .n {
  text-decoration-line: underline;
  text-decoration-color: var(--c);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
  transition: opacity 0.18s ease;
}
.split .n.dim {
  opacity: 0.25;
}
.split .sep {
  color: var(--line);
  font-weight: 400;
  padding-inline: 0.14em;
}
.meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Waffle */
.waffle {
  display: block;
  width: 100%;
  height: auto;
}
.waffle rect[data-id] {
  fill: var(--c);
  transition: opacity 0.18s ease;
}
.waffle rect.dim {
  opacity: 0.16;
}

/* 404 page */
.lede {
  font-size: 1.125rem;
  max-width: 42ch;
  text-wrap: pretty;
}
.intro {
  color: var(--muted);
  max-width: 60ch;
}
.back {
  font: 500 0.9375rem/1.4 var(--font-mono);
  color: var(--accent);
  text-underline-offset: 0.2em;
}
.back:hover {
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .waffle rect,
  .split .n {
    transition: none;
  }
}