/* The four colours are the icon's, before the blur ran them together. */
:root {
  --peri: #7489d6;
  --peach: #d39a80;
  --mauve: #b8739a;
  --teal: #6aa9aa;
  --ink: #111111;
  --paper: #eceef2;

  --ground: var(--paper);
  --text: #15161a;
  --muted: #5c606d;
  --rule: #d2d5dd;

  --serif: "Newsreader", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #131418;
    --text: #e6e8ed;
    --muted: #9599a6;
    --rule: #2b2d34;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 19px/1.55 var(--serif);
  font-optical-sizing: auto;
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.px svg { display: block; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- The screen ------------------------------------------------------ */

.screen {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--ink);
  overflow: hidden;
}

.field {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: 42fr 58fr;
  grid-template-rows: 56fr 44fr;
}
.field i:nth-child(1) { background: var(--peri); }
.field i:nth-child(2) { background: var(--peach); }
.field i:nth-child(3) { background: var(--mauve); }
.field i:nth-child(4) { background: var(--teal); }

.menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 16px;
  font: 13px/1 var(--sans);
  background: rgb(255 255 255 / 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}
.menubar a { text-decoration: none; }
.menubar a:hover { text-decoration: underline; }
.app-name { font-weight: 700; }
.menu-right { display: flex; align-items: center; gap: 20px; }
.menucat { display: block; }

.pitch {
  align-self: end;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

.pitch h1 { margin: 0; }

.lead {
  max-width: 21em;
  margin: 0.9em 0 1.4em;
  font-size: clamp(23px, 2.7vw, 34px);
  line-height: 1.28;
}

.get { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.download {
  display: inline-block;
  padding: 18px 24px;
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.08s, box-shadow 0.08s;
}
.download:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--paper); }
.download:active { transform: none; box-shadow: none; }

.meta { margin: 0; font: 13px/1.5 var(--mono); }
.screen .meta { opacity: 0.8; }

.hint {
  justify-self: end;
  margin: 0;
  padding: 28px clamp(16px, 4vw, 48px);
  font: 13px/1 var(--mono);
  opacity: 0.7;
}

/* ---- The rest -------------------------------------------------------- */

main {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

section { padding: 88px 0; border-top: 1px solid var(--rule); }
section:first-child { border-top: 0; }
section > h2 { margin: 0 0 40px; }
section p { max-width: 36em; }

h3 { margin: 0 0 0.4em; font-size: 21px; font-weight: 500; line-height: 1.3; }
p { margin: 0 0 1em; }
.after { margin: 36px 0 0; color: var(--muted); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.trio p { font-size: 18px; }

.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.look { display: flex; flex-direction: column; padding: 28px; border: 2px solid var(--text); }
.look h3 { margin-bottom: 20px; }
.numbers { margin-top: auto; padding-top: 8px; font: 13px/1.5 var(--mono); color: var(--muted); }
.try {
  align-self: start;
  margin-top: 12px;
  padding: 12px 16px;
  border: 2px solid var(--text);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.try:hover { background: var(--text); color: var(--ground); }

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 28px 12px;
  margin: 48px 0;
}
.cats figure { display: grid; justify-items: center; gap: 10px; margin: 0; }
.cats canvas { display: block; }
.cats figcaption { color: var(--muted); }

.keys { display: flex; gap: 8px; margin-bottom: 28px; }
kbd {
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 56px;
  padding: 0 12px;
  font: 500 24px/1 var(--sans);
  border: 2px solid var(--text);
  border-bottom-width: 5px;
}

.steps { max-width: 36em; margin: 0 0 28px; padding-left: 1.4em; }
.steps li { margin-bottom: 0.7em; padding-left: 0.3em; }
.steps li::marker { font: 15px var(--mono); color: var(--muted); }
#install .meta { color: var(--muted); }

footer {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 48px) 64px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 16px;
}
footer p { max-width: 40em; margin: 0; }

/* ---- The frost ------------------------------------------------------- */

.frost {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.frost.up { visibility: visible; pointer-events: auto; }
.frost canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 760px) {
  .trio, .looks { grid-template-columns: 1fr; }
  .menu-right a:first-child { display: none; }
  .hint { justify-self: start; }
  section { padding: 64px 0; }
}