/* ControlMole website. A cosy handheld game from 2005: everything is sized in
   art pixels (--u is one UI art pixel, which main.js snaps to whole device
   pixels), pictures scale by whole device pixels with nearest neighbour, and
   the colours are the app's MoleColors. */

@font-face {
  font-family: "WildWorld";
  src: url("assets/fonts/WildWorld.ttf") format("truetype");
  font-display: block;
}

:root {
  --paper: #e9e1cf; --paper-d: #e1d6bf;
  --cream: #fbf3e2; --cream-d: #e4d6ba;
  --ink: #17142b;
  --chestnut: #8c5433; --chestnut-d: #5c331d;
  --band: #e5483a; --band-d: #a92c35;
  --muted: #6e6680; --good: #5fae5a; --warn: #f0a02c;
  --sky: #cfe6ee; --sky-d: #c2dde8;
  --soil: #664735;
  --u: 4px;
  --t1: 16px; --t2: 24px; --t3: 32px; --t4: 48px; --t5: 64px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--u) * 18); }
body {
  margin: 0; background: var(--ink); color: var(--ink);
  font: var(--t2)/1.3 "WildWorld", ui-monospace, monospace;
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}
img.px, .sprite { image-rendering: pixelated; image-rendering: crisp-edges; }
img.px { display: block; max-width: none; }
a { color: inherit; }
em { font-style: normal; color: var(--band); }
h1, h2, h3, p { margin: 0; font-weight: normal; }
button { font: inherit; color: inherit; }
.wrap { width: min(var(--wrap), 100% - 32px); margin: 0 auto; position: relative; }

/* Pixel glyphs the Wild World font doesn't have: a stepped arrow and a bullet. */
.tri {
  display: inline-block; vertical-align: middle; flex: none;
  width: calc(var(--u) * 3); height: calc(var(--u) * 5); background: currentColor;
  clip-path: polygon(0 0, 33.4% 0, 33.4% 20%, 66.7% 20%, 66.7% 40%, 100% 40%, 100% 60%, 66.7% 60%, 66.7% 80%,
    33.4% 80%, 33.4% 100%, 0 100%);
}
.tri-l { transform: scaleX(-1); }
.sq { display: inline-block; vertical-align: middle; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); background: currentColor; margin: 0 var(--u); }

/* ------------------------------------------------------------ pixel box
   The app's PixelBox: 1u ink outline with notched corners, a lighter top
   row, a darker bottom row and a 1u ink depth row underneath. */
.pbox, .btn {
  --fill: var(--cream);
  --edge: var(--ink);
  --hl: color-mix(in srgb, var(--fill) 55%, white);
  --sh: color-mix(in srgb, var(--fill) 88%, var(--ink));
  --pad: calc(var(--u) * 5);
  position: relative;
  padding: calc(var(--u) + var(--pad)) calc(var(--u) + var(--pad)) calc(var(--u) * 2 + var(--pad));
  background:
    linear-gradient(var(--hl), var(--hl)) calc(var(--u) * 2) var(--u) / calc(100% - var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--sh), var(--sh)) calc(var(--u) * 2) calc(100% - var(--u) * 2) / calc(100% - var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--fill), var(--fill)) calc(var(--u) * 2) var(--u) / calc(100% - var(--u) * 4) calc(100% - var(--u) * 3) no-repeat,
    linear-gradient(var(--fill), var(--fill)) var(--u) calc(var(--u) * 2) / calc(100% - var(--u) * 2) calc(100% - var(--u) * 5) no-repeat,
    var(--edge);
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u),
    100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%,
    var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}

.btn {
  --fill: var(--band);
  --pad: calc(var(--u) * 3);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) + var(--pad) * .6) calc(var(--u) + var(--pad)) calc(var(--u) * 2 + var(--pad) * .6);
  border: 0; cursor: pointer; text-decoration: none; font-size: var(--t2); line-height: 1; color: var(--cream);
  -webkit-tap-highlight-color: transparent;
}
.btn-cream { --fill: var(--cream); color: var(--muted); }
.btn:hover { --fill: color-mix(in srgb, var(--band) 88%, white); }
.btn-cream:hover { --fill: #fffaf0; color: var(--ink); }
.btn:active {
  transform: translateY(var(--u));
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u),
    100% calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u)),
    var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 2), 0 calc(100% - var(--u) * 2), 0 var(--u), var(--u) var(--u));
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: var(--u) solid var(--warn); outline-offset: var(--u); }

/* ------------------------------------------------------------ speech bubble */
.bubble {
  --fill: var(--cream); --edge: var(--ink);
  --hl: color-mix(in srgb, var(--fill) 55%, white);
  --sh: color-mix(in srgb, var(--fill) 88%, var(--ink));
  --pad: calc(var(--u) * 4);
  position: relative; isolation: isolate;
  padding: calc(var(--u) * 9) calc(var(--u) + var(--pad)) calc(var(--u) * 2 + var(--pad));
  font-size: var(--t1); line-height: 1.35; color: var(--ink);
}
.bubble::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--hl), var(--hl)) calc(var(--u) * 2) var(--u) / calc(100% - var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--sh), var(--sh)) calc(var(--u) * 2) calc(100% - var(--u) * 2) / calc(100% - var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--fill), var(--fill)) calc(var(--u) * 2) var(--u) / calc(100% - var(--u) * 4) calc(100% - var(--u) * 3) no-repeat,
    linear-gradient(var(--fill), var(--fill)) var(--u) calc(var(--u) * 2) / calc(100% - var(--u) * 2) calc(100% - var(--u) * 5) no-repeat,
    var(--edge);
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u),
    100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%,
    var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}
.bubble::after {            /* stepped tail */
  content: ""; position: absolute; z-index: -1; left: calc(var(--u) * 10); bottom: calc(var(--u) * -4);
  width: calc(var(--u) * 6); height: calc(var(--u) * 5);
  background:
    linear-gradient(var(--cream), var(--cream)) var(--u) 0 / calc(var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--cream), var(--cream)) var(--u) var(--u) / calc(var(--u) * 3) var(--u) no-repeat,
    linear-gradient(var(--cream), var(--cream)) var(--u) calc(var(--u) * 2) / calc(var(--u) * 2) var(--u) no-repeat,
    var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% var(--u), calc(100% - var(--u)) var(--u), calc(100% - var(--u)) calc(var(--u) * 2),
    calc(100% - var(--u) * 2) calc(var(--u) * 2), calc(100% - var(--u) * 2) calc(var(--u) * 3),
    calc(100% - var(--u) * 3) calc(var(--u) * 3), calc(100% - var(--u) * 3) calc(var(--u) * 4),
    calc(100% - var(--u) * 4) calc(var(--u) * 4), calc(100% - var(--u) * 4) 100%, 0 100%);
}
.bubble b {
  position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 2.5);
  font-weight: normal; font-size: var(--t1); line-height: 1;
  color: var(--cream); background: var(--band);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.5) calc(var(--u) * .25);
  box-shadow: 0 0 0 var(--u) var(--ink);
}
.bubble span { display: block; min-height: 1.35em; }

/* ------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 2) max(16px, calc((100% - var(--wrap)) / 2));
  background: var(--cream);
  box-shadow: 0 var(--u) 0 var(--ink);
}
.brand { display: block; line-height: 0; }
.brand img { display: block; height: 56px; width: auto; }
.brand img.crisp { image-rendering: pixelated; }
.hero-logo { margin: 0 0 calc(var(--u) * -2) calc(var(--u) * -2); }
.nav-cta { font-size: var(--t1); }

/* ------------------------------------------------------------ store badges */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 4); }
.badge { display: block; line-height: 0; }
.badge img { display: block; height: 52px; width: auto; }
/* Google's badge has a transparent margin of 41 of its 250 px: crop it so
   both badges are the same height. */
.badge .badge-google { height: calc(52px * 250 / 168); margin: calc(52px * -41 / 250 * 250 / 168); }
.badge:hover { transform: translateY(calc(var(--u) * -1)); }
/* The App Store badge is greyed out with a Soon tag until the iPhone version
   is live; it opens the waitlist sheet instead. */
button.badge { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.badge-soon { position: relative; }
.badge-soon img { opacity: 0.45; filter: grayscale(1); }
.badge-soon b { position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * -3); padding: var(--u) calc(var(--u) * 2); background: var(--band); color: var(--cream); font-size: var(--t1); font-weight: normal; line-height: 1; box-shadow: 0 0 0 2px var(--ink); }

/* ------------------------------------------------------------ sky + hero */
.sky {
  --c1: var(--sky); --c2: var(--sky-d); --cell: calc(var(--u) * 12);
  position: relative; overflow: hidden; overflow: clip;
  background-color: var(--c1);
  background-image: conic-gradient(var(--c2) 25%, transparent 0 50%, var(--c2) 0 75%, transparent 0);
  background-size: calc(var(--cell) * 2) calc(var(--cell) * 2);
}
.sky { padding: calc(var(--u) * 16) 0 calc(var(--u) * 20); }
.clouds { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero { z-index: 1; }
.cloud { position: absolute; left: 0; will-change: transform; }

.hero { width: min(1240px, 100% - 32px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--u) * 6); align-items: center; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 6); }
h1 { font-size: var(--t5); line-height: 1.05; color: var(--ink); }
/* A soft sky-coloured edge round the hero text, so a passing cloud never eats a letter. */
.hero-copy h1, .hero-copy .lede, .hero-copy .fine, .hero-copy .link-btn {
  text-shadow: calc(var(--u) / 2) 0 var(--sky), calc(var(--u) / -2) 0 var(--sky), 0 calc(var(--u) / 2) var(--sky), 0 calc(var(--u) / -2) var(--sky);
}
.lede { font-size: var(--t2); line-height: 1.35; max-width: 30ch; color: var(--ink); }
.fine { font-size: var(--t1); color: var(--muted); margin-top: calc(var(--u) * -2); }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--t1); color: var(--band-d);
  display: inline-flex; align-items: center; gap: calc(var(--u) * 2);
}
.link-btn:hover { color: var(--band); }

.hero-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-bubble { max-width: min(380px, 100%); align-self: center; margin-bottom: calc(var(--u) * 6); z-index: 3; }
.hero-bubble::after { left: calc(50% - var(--u) * 3); }
.island { position: relative; will-change: transform; }
.island-mole { position: absolute; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------ underground
   Past the turf the page digs down: each section is a stratum of earth,
   darker the deeper you go, with a stepped edge where one meets the next. */
.turf { height: 63px; margin-top: -1px; background: url("assets/3d/grass_edge.png") repeat-x 0 0 / auto 100%; image-rendering: pixelated; position: relative; z-index: 3; }
.underground { position: relative; overflow: hidden; overflow: clip; background: var(--soil); }
.layer {
  --c1: var(--soil); --c2: #6b4b38; --prev: var(--soil); --cell: calc(var(--u) * 16);
  position: relative; padding: calc(var(--u) * 24) 0;
  background-color: var(--c1);
  background-image: conic-gradient(var(--c2) 25%, transparent 0 50%, var(--c2) 0 75%, transparent 0);
  background-size: calc(var(--cell) * 2) calc(var(--cell) * 2);
  color: var(--cream);
}
.layer + .layer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 4);
  background:
    linear-gradient(90deg, var(--prev) 50%, transparent 0) 0 0 / calc(var(--u) * 24) calc(var(--u) * 2) repeat-x,
    linear-gradient(90deg, var(--prev) 25%, transparent 0 62%, var(--prev) 0 75%, transparent 0) calc(var(--u) * 4) calc(var(--u) * 2) / calc(var(--u) * 24) calc(var(--u) * 2) repeat-x;
}
.layer-1 { --c1: var(--soil); --c2: #6c4b39; padding-top: calc(var(--u) * 16); }
.layer-2 { --c1: #8a6a50; --c2: #846449; --prev: var(--soil); }
.layer-3 { --c1: #8c84a6; --c2: #857d9f; --prev: #8a6a50; }
.layer-4 { --c1: #6f6890; --c2: #696288; --prev: #8c84a6; }
.layer-5 { --c1: #4c2a1a; --c2: #472717; --prev: #6f6890; }
.layer-6 { --c1: #221c36; --c2: #1f1932; --prev: #4c2a1a; padding-bottom: calc(var(--u) * 28); }
.layer > .wrap, .layer > .marquee { position: relative; z-index: 3; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }

h2 {
  font-size: var(--t4); line-height: 1.1; color: var(--cream); margin-bottom: calc(var(--u) * 3);
  text-shadow:
    calc(var(--u) / 2) 0 var(--ink), calc(var(--u) / -2) 0 var(--ink), 0 calc(var(--u) / 2) var(--ink), 0 calc(var(--u) / -2) var(--ink),
    calc(var(--u) / 2) calc(var(--u) / 2) var(--ink), calc(var(--u) / -2) calc(var(--u) / 2) var(--ink),
    calc(var(--u) / 2) calc(var(--u) / -2) var(--ink), calc(var(--u) / -2) calc(var(--u) / -2) var(--ink),
    0 var(--u) var(--ink), calc(var(--u) / 2) var(--u) var(--ink), calc(var(--u) / -2) var(--u) var(--ink);
}
.sub { font-size: var(--t2); color: var(--cream); opacity: .9; max-width: 40ch; }

/* things buried in the dirt, in the side margins */
.buried { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.buried img { position: absolute; left: var(--x); top: var(--y); }
@media (max-width: 1300px) { .buried { display: none; } }

/* depth meter */
.depth {
  position: fixed; right: calc(var(--u) * 4); top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2);
  color: var(--cream); font-size: var(--t1); text-shadow: calc(var(--u) / 2) calc(var(--u) / 2) 0 var(--ink);
  visibility: hidden;
}
.depth.on { visibility: visible; }
.depth-track {
  width: calc(var(--u) * 3); height: 34vh; position: relative;
  background: repeating-linear-gradient(var(--cream) 0 var(--u), transparent 0 calc(var(--u) * 6));
  box-shadow: 0 0 0 calc(var(--u) / 2) var(--ink);
}
.depth-mark {
  position: absolute; left: 50%; top: 0; width: calc(var(--u) * 5); height: calc(var(--u) * 3);
  transform: translate(-50%, -50%); background: var(--band); box-shadow: 0 0 0 calc(var(--u) / 2) var(--ink);
}
@media (max-width: 1240px) { .depth { display: none; } }

/* how it works */
.steps { list-style: none; padding: 0; margin: calc(var(--u) * 8) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 6); }
/* Each card spans three rows of the list's grid (picture, title, text), so the
   pictures share one row and the titles and text line up across the cards;
   a shorter picture sits in the middle of its row. */
.steps { grid-template-rows: repeat(3, auto); }
.step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: calc(var(--u) * 3); justify-items: center; align-content: start; text-align: center; color: var(--ink); }
.step img { align-self: center; }
.step h3 { font-size: var(--t2); color: var(--chestnut-d); }
.step p { font-size: var(--t1); line-height: 1.4; max-width: 26ch; }

/* the telly */
#video h2 { max-width: 22ch; margin-bottom: calc(var(--u) * 10); }
.tv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap; }
.tv-play:active { transform: translate(-50%, calc(-50% + var(--u))); }
.tv-play[hidden] { display: none; }

/* inside the app: the caption is the title */
.tour { display: grid; grid-template-columns: minmax(0, 440px) auto; justify-content: center; gap: calc(var(--u) * 16); align-items: center; }
.tour-cap { min-height: 3.4em; margin-bottom: calc(var(--u) * 8); }
.tour-nav { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.tour-dots { display: flex; gap: calc(var(--u) * 2); }
.tour-dots button { width: calc(var(--u) * 3); height: calc(var(--u) * 3); padding: 0; border: 0; cursor: pointer; background: var(--cream-d); box-shadow: 0 0 0 calc(var(--u) / 2) var(--ink); }
.tour-dots button[aria-current="true"] { background: var(--band); }

.phone { position: relative; }
.phone-screen { position: absolute; overflow: hidden; background: var(--paper); }
.phone-strip { display: flex; height: 100%; will-change: transform; }
.phone-strip img { flex: none; height: 100%; width: auto; }
.phone-frame { position: relative; pointer-events: none; }

/* notes from mole: notifications drifting past */
.marquee { overflow: hidden; padding: calc(var(--u) * 10) 0 calc(var(--u) * 4); }
.marquee-run { display: flex; gap: calc(var(--u) * 6); width: max-content; animation: run 60s linear infinite; will-change: transform; }
.marquee:hover .marquee-run { animation-play-state: paused; }
@keyframes run { to { transform: translateX(calc(-50% - var(--u) * 3)); } }
.note { width: 340px; flex: none; --pad: calc(var(--u) * 4); color: var(--ink); }
.note-head { display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: var(--t1); color: var(--muted); margin-bottom: calc(var(--u) * 2); }
.note-head img { width: 24px; height: 24px; box-shadow: 0 0 0 calc(var(--u) / 2) var(--ink); }
.note-head .when { margin-left: auto; }
.note p { font-size: var(--t1); line-height: 1.4; }

/* privacy */
.private { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.private .sub { margin-bottom: calc(var(--u) * 5); }
.more { font-size: var(--t1); color: var(--warn); text-decoration: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 2); }
.more:hover { color: var(--cream); }

/* download, at the bottom */
.finale { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 12); align-items: center; }
.finale-copy { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.finale-mole { justify-self: center; }
.foot { background: var(--ink); color: var(--cream-d); padding: calc(var(--u) * 6) 0 calc(var(--u) * 8); position: relative; z-index: 3; }
.foot-row { display: flex; gap: calc(var(--u) * 8); flex-wrap: wrap; font-size: var(--t1); }
.foot-row a { color: var(--cream-d); text-decoration: none; }
.foot-row a:hover { color: var(--band); }
.foot-top { margin-left: auto; }

/* ------------------------------------------------------------ sheets */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 8px; }
.sheet-wrap[hidden] { display: none; }
.sheet-barrier { position: absolute; inset: 0; background: rgba(23, 20, 43, .6); }
.sheet { position: relative; width: min(560px, 100%); display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.waitlist-form { display: flex; gap: calc(var(--u) * 3); align-items: stretch; }
.field {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t2); line-height: 1; color: var(--ink);
  padding: calc(var(--u) * 3); background: #fff; border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 var(--u) var(--ink), inset 0 calc(var(--u) * 2) 0 var(--cream-d);
}
.field::placeholder { color: var(--muted); opacity: .7; }
.field:focus { outline: var(--u) solid var(--warn); outline-offset: var(--u); }
.waitlist-form[data-state="busy"] .btn { opacity: .6; pointer-events: none; }
.waitlist-form[data-state="done"] { display: none; }
.fine { margin: 0; font-size: var(--t1); color: var(--muted); }
.fine a { color: var(--band); }
.waitlist-close { align-self: flex-end; font-size: var(--t1); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 560px) { .waitlist-form { flex-direction: column; } }
.dance-floor { display: flex; justify-content: center; background: #2a2747; padding: calc(var(--u) * 2); box-shadow: 0 0 0 var(--u) var(--ink); }
.tv { position: relative; }
.tv-screen { position: absolute; overflow: hidden; background: #000; }
.tv-screen video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.tv-frame { position: relative; pointer-events: none; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { order: -1; }
  .tour { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: calc(var(--u) * 10); }
  .tour-copy { order: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .finale { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .finale-copy { align-items: center; order: -1; padding-bottom: 0; }
  .finale .badges { justify-content: center; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lede, .sub { font-size: var(--t1); }
  .private { flex-direction: column; text-align: center; gap: calc(var(--u) * 6); }
  .private .sub { margin-left: auto; margin-right: auto; }
  .layer { padding: calc(var(--u) * 18) 0; }
  .foot-top { margin-left: 0; }
  .badge img { height: 44px; }
  .badge .badge-google { height: calc(44px * 250 / 168); margin: calc(44px * -41 / 250 * 250 / 168); }
  .note { width: 280px; }
  /* No room for the telly on a phone: the video plays full width instead. */
  .tv img.tv-frame { display: none; }
  .tv { width: 100%; }
  .tv-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; box-shadow: 0 0 0 var(--u) var(--ink), 0 calc(var(--u) * 2) 0 var(--u) var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  html { scroll-behavior: auto; }
}