/* Generated from brand/tokens.json by web/build.py. Do not edit. */
:root {
  --u: calc(1rem / 16);
  --surface: #fbfcfc;
  --surface-edge: #c8d1d4;
  --surface-2: #eef2f3;
  --track: #e7ecee;
  --ink: #2a3236;
  --ink-2: #6b777c;
  --ink-3: #8a959a;
  --night: #2a3236;
  --lime: #7ed957;
  --lime-edge: #3f9a2a;
  --lime-ink: #2f7a1e;
  --lime-tint: #e3f6da;
  --coral: #ff6b5a;
  --coral-edge: #d9483a;
  --coral-tint: #ffe3df;
  --gold: #f5c542;
  --gold-edge: #c49a22;
  --gold-ink: #5a3d00;
  --gold-text: #b07f00;
  --orange: #ee9a5f;
  --orange-edge: #b9622a;
  --disabled: #e3e8ea;
  --disabled-edge: #c3cbce;
  --disabled-ink: #a7b1b5;
  --type-caption: calc(var(--u) * 10);
  --type-label: calc(var(--u) * 12);
  --type-body: calc(var(--u) * 14);
  --type-button: calc(var(--u) * 16);
  --type-heading: calc(var(--u) * 20);
  --type-title: calc(var(--u) * 28);
  --type-display: calc(var(--u) * 40);
  --type-hero: calc(var(--u) * 56);
  --type-jumbo: calc(var(--u) * 80);
  --space-tight: calc(var(--u) * 4);
  --space-item: calc(var(--u) * 8);
  --space-control: calc(var(--u) * 12);
  --space-block: calc(var(--u) * 16);
  --space-section: calc(var(--u) * 24);
  --size-grid: calc(var(--u) * 4);
  --size-tap: calc(var(--u) * 52);
  --size-hero-button: calc(var(--u) * 64);
  --size-edge: calc(var(--u) * 4);
  --size-max-radius: calc(var(--u) * 24);
  --weight-display: 700;
  --weight-semibold: 600;
  --weight-body: 500;
  --cap-height: 0.7;
}
/* M.E.A.T. website. Keep the Toy Kit's font, colours, artwork and plastic edges.
   The website adapts its spacing and type roles for scrolling pages:
   - Layout spacing uses 8 / 16 / 24 / 32px at the default root font size.
     --u stays 1/16 rem at every viewport, respecting user font preferences.
     The game's 4px plastic edge and small optical details are exceptions.
   - Type size / line height: page 40/48, section 28/32, subheading 20/24,
     body and controls 16/24, labels 12/16. Logo: 40/48 or 64/72.
   - Headings use weight 700, labels 600, sentences and fact values 500.
     Text uses normal line boxes; only game logo/control faces are trimmed.
   - The content grid has 4 / 8 / 12 columns, with 16-unit gutters. Cards span
     4 columns; the desktop hero and small screenshots span half the grid.
   - A plastic piece is a face on a 4-unit edge; pressed, it sinks three quarters
     of the edge. */

@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --space-control: var(--space-block);
  --space-layout: calc(var(--u) * 32);
  --type-body: calc(var(--u) * 16);
  --type-subheading: calc(var(--u) * 20);
  --type-heading: calc(var(--u) * 28);
  --type-title: calc(var(--u) * 40);
  --type-hero: calc(var(--u) * 64);
  --leading-label: calc(var(--u) * 16);
  --leading-body: calc(var(--u) * 24);
  --leading-heading: calc(var(--u) * 32);
  --leading-title: calc(var(--u) * 48);
  --leading-hero: calc(var(--u) * 72);
  --radius: var(--size-max-radius);
  --radius-inner: calc(var(--u) * 12);
  --edge: var(--size-edge);
  --group-gap: var(--space-section);
  --card-pad: var(--space-block);
  --layout-columns: 4;
  /* The personal best card's colours (game/ui/b3/mobile/front_end.gd). */
  --night-edge: #182529;
  --night-ink: #c7dfd4;
  /* The title screen's backdrop and the wash the menu lays over it (Toy.DIM,
     62% of a pale grey). --pale is that wash over the backdrop. */
  --backdrop: #84999c;
  --dim: #ecf0f1;
  --wash: color-mix(in srgb, var(--dim) 62%, transparent);
  --pale: color-mix(in srgb, var(--dim) 62%, var(--backdrop));
  /* Toy.draw_piece's soft shadow: 3 units below the piece, 2 in from each side. */
  --soft: 0 calc(var(--u) * 5) 0 calc(var(--u) * -2) rgba(41, 61, 69, .16);
  color-scheme: light;
}
@media (min-width: 700px) {
  :root {
    --group-gap: var(--space-layout);
    --card-pad: var(--space-layout);
    --layout-columns: 8;
  }
}
@media (min-width: 1000px) { :root { --layout-columns: 12; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-2);
  color: var(--ink);
  font-family: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-weight: var(--weight-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: var(--weight-display); }
h1 { font-size: var(--type-title); line-height: var(--leading-title); }
h2 { font-size: var(--type-heading); line-height: var(--leading-heading); }
h3 { font-size: var(--type-subheading); line-height: var(--leading-body); }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: calc(var(--u) * 2) solid var(--ink); outline-offset: calc(var(--u) * 2); }

.skip { position: absolute; left: var(--space-control); top: calc(var(--u) * -80); z-index: 10; padding: var(--space-control); border-radius: var(--radius-inner); background: var(--night); color: #fff; }
.skip:focus { top: var(--space-control); }

/* Page: one column of pieces, the safe-area margin at the edge. */
.page, .stack { display: flex; flex-direction: column; gap: var(--group-gap); }
.page { max-width: calc(var(--u) * 1232); margin: 0 auto; padding: var(--card-pad); }
.narrow .page { max-width: calc(var(--u) * 896); }

/* Pieces */
.piece {
  padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + var(--edge));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 calc(var(--edge) * -1) 0 var(--surface-edge), var(--soft);
}
.piece.night { background: var(--night); color: #fff; box-shadow: inset 0 calc(var(--edge) * -1) 0 var(--night-edge), var(--soft); }

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-tap);
  padding: 0 var(--space-section) var(--edge);
  border-radius: var(--radius);
  background: var(--surface-edge);
  box-shadow: var(--soft);
  color: var(--ink);
  font-weight: var(--weight-display);
  font-size: var(--type-button);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn::before { content: ""; position: absolute; z-index: -1; inset: 0 0 var(--edge); border-radius: inherit; background: var(--surface); }
.btn::before, .btn > * { transition: transform .06s ease-out; }
.btn:active { box-shadow: none; }
.btn:active::before, .btn:active > * { transform: translateY(calc(var(--edge) * .75)); }
.btn-label { display: block; text-box: trim-both cap alphabetic; }
.btn-primary { background: var(--lime-edge); color: #fff; }
.btn-primary::before { background: var(--lime); }
.btn-primary:hover::before { filter: brightness(1.04); }
/* White text on coloured plastic gets an edge-coloured outline (hardware_button.gd). */
.btn-primary .btn-label { -webkit-text-stroke: calc(var(--u) * 4) rgba(63, 154, 42, .55); paint-order: stroke fill; stroke-linejoin: round; }
.btn-hero { min-height: var(--size-hero-button); font-size: var(--type-subheading); }
.btn-icon { position: absolute; left: var(--space-section); top: calc(50% - var(--edge) / 2); translate: 0 -50%; width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: currentColor; }

/* Top bar (every page but the home page, whose hero carries the logo). */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-control); }
.home .topbar { display: none; }
.lockup { display: inline-flex; align-items: center; gap: var(--space-item); min-height: var(--size-tap); font-weight: var(--weight-display); font-size: var(--type-subheading); text-decoration: none; }
.chip { flex: none; width: 1.15em; height: auto; }
.lockup-name { display: block; text-box: trim-both cap alphabetic; }
.topnav { display: flex; gap: var(--space-item); }
.topnav a { display: inline-flex; align-items: center; min-height: var(--size-tap); padding: 0 var(--space-item); border-radius: var(--radius); font-weight: var(--weight-display); font-size: var(--type-button); text-transform: uppercase; text-decoration: none; }
.topnav a:hover { background: var(--track); }
.topnav a[aria-current] { background: var(--lime-tint); color: var(--lime-ink); }
@media (max-width: 409px) { .topbar .lockup-name { display: none; } }
@media (min-width: 700px) { .topnav a { padding: 0 var(--space-control); } }

/* Home: the title screen, over a chase. Stacked, the chase is a banner that
   fades into the piece; it stops growing on wide phones. */
.hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); background: var(--pale); }
.hero-art { position: relative; display: block; }
.hero-art::after { content: ""; position: absolute; inset: 75% 0 0; background: linear-gradient(transparent, var(--pale)); }
.hero-art img { width: 100%; height: auto; max-height: calc(var(--u) * 280); object-fit: cover; }
.hero-cols { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr)); gap: var(--space-block); padding: var(--card-pad); }
.hero-main { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; }
.hero-logo { display: flex; align-items: center; gap: var(--space-block); font-size: var(--type-display); line-height: var(--leading-title); }
.outlined { display: block; -webkit-text-stroke: calc(var(--u) * var(--outline, 4)) #fff; paint-order: stroke fill; stroke-linejoin: round; text-box: trim-both cap alphabetic; }
.hero-logo .outlined { --outline: 8; }
.hero-sub { margin-top: var(--space-block); font-weight: var(--weight-semibold); font-size: var(--type-body); }
.hero-pitch { margin-top: var(--space-control); font-size: var(--type-button); text-wrap: pretty; }
.hero-main .btn-hero { margin-top: var(--group-gap); }
.hero-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-control); margin-top: var(--space-control); }
.hero-nav .btn { padding-inline: var(--space-control); }
@media (max-width: 699px) {
  .hero-nav { gap: var(--space-item); }
  .hero-nav .btn { padding-inline: var(--space-item); }
}

/* From the width of a phone on its side the piece takes the picture's shape
   and the title block sits over its quiet left side, as the menu sits over
   the floor in the game. The wash covers the text and clears before the chase. */
@media (min-width: 800px) {
  .hero { display: flex; align-items: center; aspect-ratio: 2640 / 1200; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--wash) 38%, transparent 58%); }
  .hero-art { position: absolute; inset: 0; }
  .hero-art::after { content: none; }
  .hero-art img { height: 100%; max-height: none; }
  .hero-cols { width: 100%; }
  .hero-main { grid-column: span 4; }
  .hero-logo { font-size: var(--type-hero); line-height: var(--leading-hero); }
}
@media (min-width: 1000px) { .hero-main { grid-column: span 6; } }

.notice { display: flex; align-items: center; gap: var(--space-item); align-self: center; max-width: 100%; padding: var(--space-item) var(--space-block) var(--space-item) var(--space-item); border-radius: var(--radius); background: var(--night); color: #fff; font-size: var(--type-label); line-height: var(--leading-label); }
.notice img { flex: none; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; }
.notice strong { color: var(--coral); font-weight: var(--weight-display); text-transform: uppercase; }

/* Sections: a headline over its block, inside one piece. */
.section { display: flex; flex-direction: column; gap: var(--space-section); }
.lead { font-size: var(--type-body); max-width: 64ch; }
.small { color: var(--ink-2); font-weight: var(--weight-semibold); font-size: var(--type-label); line-height: var(--leading-label); text-transform: uppercase; }
.section a:not(.btn):not(.screen) { color: var(--lime-ink); text-underline-offset: .15em; }

.tiles { display: grid; grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr)); gap: var(--space-block); }
.tile { grid-column: span 4; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(calc(var(--u) * 48), auto) 1fr; align-content: start; align-items: center; gap: var(--space-control); padding: var(--space-block); border-radius: var(--radius-inner); background: var(--surface-2); }
.tile img { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.tile h3 { text-transform: uppercase; }
.tile p { grid-column: 1 / -1; align-self: start; }

/* Screenshots sit in a dark bezel, like the phone they came from. */
.screens { display: grid; grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr)); gap: var(--space-block); }
.screen { grid-column: 1 / -1; display: block; padding: var(--space-item) var(--space-item) calc(var(--space-item) + var(--edge)); border-radius: var(--radius); background: var(--night); box-shadow: inset 0 calc(var(--edge) * -1) 0 var(--night-edge), var(--soft); }
.screen img { width: 100%; height: auto; border-radius: calc(var(--radius) - var(--space-item)); }
@media (min-width: 700px) {
  .screen { grid-column: span 4; }
  .screens .wide { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .screen { grid-column: span 6; } }

.cta { display: grid; grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr)); gap: var(--space-section) var(--space-block); align-items: center; }
.cta > * { grid-column: 1 / -1; min-width: 0; }
.cta p { margin-top: var(--space-block); color: var(--night-ink); font-size: var(--type-body); max-width: calc(var(--u) * 520); }
@media (min-width: 1000px) {
  .cta > div { grid-column: span 8; }
  .cta > .btn { grid-column: span 4; }
}

/* About */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-section) var(--space-block); }
.facts > div { min-width: 0; }
.facts dt { color: var(--ink-2); font-weight: var(--weight-semibold); font-size: var(--type-label); line-height: var(--leading-label); text-transform: uppercase; }
.facts dd { margin-top: var(--space-item); font-weight: var(--weight-body); font-size: var(--type-body); }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.copy p + p { margin-top: var(--space-block); }

/* Long text shares the same type roles and 8px spacing rhythm as the About page. */
.prose > * + * { margin-top: var(--space-block); }
.prose > p, .prose > ul, .prose > ol { max-width: 64ch; }
.prose * + h2 { margin-top: var(--space-layout); }
.prose * + h3 { margin-top: var(--space-section); }
.prose h1 + *, .prose h2 + * { margin-top: var(--space-section); }
.prose h3 + *, .prose .overline + * { margin-top: var(--space-item); }
.prose ul, .prose ol { display: grid; gap: var(--space-control); padding-left: var(--space-block); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--lime-ink); text-underline-offset: .15em; }
.prose strong { font-weight: var(--weight-display); }
.prose code { padding: 0 var(--space-tight); border-radius: var(--size-grid); background: var(--surface-2); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.overline { color: var(--ink-2); font-weight: var(--weight-semibold); font-size: var(--type-label); line-height: var(--leading-label); text-transform: uppercase; }
.prose .overline a { color: inherit; }

/* Devlog list */
.posts { display: grid; gap: var(--space-control); }
.post h2 { margin-top: var(--space-item); }
.post h2 a { text-decoration: none; }
.post h2 a:hover { text-decoration: underline; }
.post p:last-child { margin-top: var(--space-section); }

.lost { align-items: flex-start; }

/* Footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-section); font-weight: var(--weight-semibold); font-size: var(--type-label); line-height: var(--leading-label); text-transform: uppercase; }
.footer p { padding: var(--space-control) 0; }
.footnav { display: flex; flex-wrap: wrap; gap: 0 var(--space-block); }
.footnav a { display: inline-flex; align-items: center; min-height: var(--size-tap); text-decoration: none; }
.footnav a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .btn::before, .btn > * { transition: none; } }