/* PIKOTO site. Drawn in the app's language: four-tone palettes, the 5x7 font, notched boxes with
   hard shadows, dither. One font pixel is 0.1em, so font sizes stay on multiples of 10px. */

@font-face {
  font-family: "Pikoto";
  src: url("/fonts/pikoto-5x7.woff2") format("woff2");
  font-display: block;
}

/* Palettes, as in Pikoto/Sources/Theme/Theme.swift. bg, faint, dim and ink are the four tones. */
:root,
:root[data-palette="dmg"] {
  --bg: #e0f8d0; --faint: #88c070; --dim: #346856; --ink: #081820;
  --red: #e04a3a; --yellow: #f0b429; --blue: #2f6bd8; --green: #1e9e5a;
  --on-accent: #081820;
  color-scheme: light;
}
:root[data-palette="pocket"] {
  --bg: #efede1; --faint: #adab99; --dim: #5b5b52; --ink: #1b1b18;
  --red: #e0432f; --yellow: #f0b429; --blue: #2b67db; --green: #2aa35b;
  --on-accent: #1b1b18;
  color-scheme: light;
}
:root[data-palette="night"] {
  --bg: #14161a; --faint: #3b404a; --dim: #9aa0ac; --ink: #e9ebe4;
  --red: #ff5a48; --yellow: #ffc532; --blue: #4f8bff; --green: #3bd374;
  --on-accent: #14161a;
  color-scheme: dark;
}
:root[data-palette="vb"] {
  --bg: #1a0000; --faint: #5a0000; --dim: #b01818; --ink: #ff3b3b;
  --red: #ff8a80; --yellow: #ffc532; --blue: #7fa8ff; --green: #6fe39a;
  --on-accent: #1a0000;
  color-scheme: dark;
}
/* With no palette picked, a dark system gets NIGHT. */
@media (prefers-color-scheme: dark) {
  :root:not([data-palette]) {
    --bg: #14161a; --faint: #3b404a; --dim: #9aa0ac; --ink: #e9ebe4;
    --red: #ff5a48; --yellow: #ffc532; --blue: #4f8bff; --green: #3bd374;
    --on-accent: #14161a;
    color-scheme: dark;
  }
}

:root {
  --u: 2px;            /* one screen pixel of the app's grid */
  --gutter: 16px;
  --max: 1120px;
}
@media (min-width: 720px) { :root { --u: 4px; --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--faint) 35%, transparent) 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--faint) 35%, transparent) 2px, transparent 2px);
  background-size: 32px 32px;
  color: var(--ink);
  font-family: "Pikoto", ui-monospace, monospace;
  font-size: 20px;
  line-height: 32px;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: normal; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--yellow); color: var(--on-accent); }
:focus-visible { outline: var(--u) solid var(--blue); outline-offset: var(--u); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--ink); color: var(--bg); padding: 8px 12px; text-decoration: none;
}
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* Type. Sizes are multiples of 10px; line heights keep half-leading whole. */
.t-40 { font-size: 30px; line-height: 40px; }
.t-60 { font-size: 40px; line-height: 48px; }
@media (min-width: 720px) {
  .t-40 { font-size: 40px; line-height: 48px; }
  .t-60 { font-size: 60px; line-height: 72px; }
}
.t-80 { font-size: 80px; line-height: 96px; }
.dim { color: var(--dim); }
.small { font-size: 20px; line-height: 28px; color: var(--dim); }

/* The wordmark: ink letters, each with a one-font-pixel shadow in the next track colour. */
.logo { white-space: nowrap; letter-spacing: 0.1em; }
.logo span { text-shadow: 0.1em 0.1em 0 var(--c); }
.logo span:nth-child(4n + 1) { --c: var(--red); }
.logo span:nth-child(4n + 2) { --c: var(--yellow); }
.logo span:nth-child(4n + 3) { --c: var(--blue); }
.logo span:nth-child(4n + 4) { --c: var(--green); }

/* Headings with a hard coloured drop, like the promo's page titles. */
.drop { text-shadow: 0.1em 0.1em 0 var(--c, var(--red)); }

/* The app's notched box: a 1u border with the corner pixels cut, and a 1u hard shadow. */
.box {
  background: var(--fill, var(--bg));
  box-shadow: inset 0 0 0 var(--u) var(--edge, var(--ink));
  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)
  );
}
.shadow { filter: drop-shadow(var(--u) var(--u) 0 var(--sh, var(--ink))); }

/* Tags: the app's page tabs. */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag {
  display: inline-block; padding: 2px 10px; font-size: 20px; line-height: 24px;
}
.tag.on { --fill: var(--ink); color: var(--bg); }

/* Keys: the app's PixelKeyStyle buttons. */
.key {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; font: inherit; line-height: 24px; color: var(--ink);
  text-decoration: none; cursor: pointer; border: 0;
  transform: translate(0, 0);
}
.key:active { transform: translate(var(--u), var(--u)); }
.key.hot { --fill: var(--yellow); color: var(--on-accent); }
.key.green { --fill: var(--green); color: var(--on-accent); }
.key[aria-disabled="true"] { cursor: default; }
.key[aria-disabled="true"]:active { transform: none; }
.key-wrap { display: inline-block; }
.key-wrap:has(.key:active) { filter: none; }

/* Encoders: four coloured dots in OP-Z order. */
.encoders { display: flex; gap: 16px; }
.encoders i {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 var(--u) var(--ink);
}
.encoders i:nth-child(1) { --c: var(--green); }
.encoders i:nth-child(2) { --c: var(--blue); }
.encoders i:nth-child(3) { --c: var(--yellow); }
.encoders i:nth-child(4) { --c: var(--red); }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); box-shadow: 0 var(--u) 0 var(--ink); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.top .logo { font-size: 30px; line-height: 32px; text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 24px; }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--dim); }
.top .navlinks { display: none; gap: 24px; }
@media (min-width: 900px) { .top .navlinks { display: flex; } }
.top .key { padding: 6px 12px; }

/* Palette switch */
.palettes { display: flex; gap: 6px; }
.palettes button {
  width: 28px; height: 28px; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
  box-shadow: inset 0 0 0 var(--u) var(--ink);
}
.palettes button[aria-pressed="true"] { outline: var(--u) solid var(--ink); outline-offset: 2px; }
.palettes [data-set="dmg"] { --a: #e0f8d0; --b: #346856; }
.palettes [data-set="pocket"] { --a: #efede1; --b: #5b5b52; }
.palettes [data-set="night"] { --a: #14161a; --b: #9aa0ac; }
.palettes [data-set="vb"] { --a: #1a0000; --b: #ff3b3b; }

/* Phones. The device is drawn smooth: it's hardware, not the app. */
.phone {
  --w: 300px;
  position: relative; display: block; width: var(--w); max-width: 100%;
  padding: calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.155);
  background: linear-gradient(145deg, #2a3136 0%, #0c1013 45%, #1b2226 100%);
  box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--sh, var(--ink)), inset 0 0 0 2px #3c464c;
  flex: none;
}
.phone > img {
  width: 100%; height: auto; aspect-ratio: 804 / 1748;
  border-radius: calc(var(--w) * 0.12);
  background: #e0f8d0;
  image-rendering: pixelated;
}
.phone::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--w) * 0.058);
  width: 30%; height: calc(var(--w) * 0.085); transform: translateX(-50%);
  background: #000; border-radius: 999px;
}

/* Hero */
.hero { padding: 48px 0 64px; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
.hero h1 { font-size: 80px; line-height: 96px; }
.hero .sub { margin: 8px 0 24px; }
.hero .lede { max-width: 30em; margin-bottom: 32px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.hero .encoders { margin-top: 32px; }
.hero .phone { --w: 300px; justify-self: center; }
@media (min-width: 400px) { .hero h1 { font-size: 100px; line-height: 120px; } }
@media (min-width: 900px) {
  .hero { padding: 96px 0 112px; }
  .hero .wrap { grid-template-columns: 1fr auto; gap: 64px; }
  .hero h1 { font-size: 160px; line-height: 176px; }
  .hero .phone { --w: 340px; }
}

/* Dither bands between sections: filled by site.js, an ordered-dither ramp from --from to --to. */
.dither { display: block; overflow: hidden; width: 100%; height: 64px; background: var(--from); color: var(--to); }
.dither svg { width: 100%; height: 100%; }

/* Ink sections */
.ink {
  background: var(--ink); color: var(--bg);
  --edge: var(--bg);
}
.ink .dim, .ink .small { color: var(--faint); }

/* Video */
.watch { padding: 48px 0 64px; }
.watch header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }
.watch h2 { --c: var(--yellow); }
.video {
  position: relative; margin: 0 auto;
  aspect-ratio: 16 / 9; width: 100%;
  background: #e0f8d0;
  box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--red);
}
.video video { width: 100%; height: 100%; object-fit: cover; }
@media (orientation: portrait) {
  .video { aspect-ratio: 9 / 16; width: min(100%, calc(80svh * 9 / 16)); }
}
.video-keys { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; justify-content: center; }
.ink .key { --fill: var(--bg); --edge: var(--bg); color: var(--ink); }
.ink .key.hot { --fill: var(--yellow); color: var(--on-accent); }
.ink .shadow { --sh: var(--faint); }

/* Features */
.features { padding: 64px 0 32px; }
.section-head { max-width: 36em; margin-bottom: 48px; }
@media (min-width: 900px) { .section-head { margin-bottom: 64px; } }
.section-head h2 { margin-bottom: 20px; }
.feature { display: grid; gap: 40px; align-items: center; margin-bottom: 96px; }
.feature .phone { --w: 280px; justify-self: center; }
.feature h3 { margin-bottom: 20px; }
.feature ul { margin-top: 20px; }
.feature li, .spec li, .price li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.feature li::before, .spec li::before, .price li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; background: var(--c, var(--ink));
}
.feature:nth-of-type(4n + 1) { --c: var(--red); }
.feature:nth-of-type(4n + 2) { --c: var(--yellow); }
.feature:nth-of-type(4n + 3) { --c: var(--blue); }
.feature:nth-of-type(4n + 4) { --c: var(--green); }
.feature .phone { --sh: var(--c); }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 128px; }
  .feature .phone { --w: 320px; }
  .feature.flip .copy { order: 2; }
}

/* Palettes */
.palette-sec { padding: 64px 0 96px; }
.palette-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; justify-items: center; }
@media (min-width: 900px) { .palette-row { grid-template-columns: repeat(4, 1fr); } }
.palette-pick {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.palette-pick .phone { --w: min(200px, calc(50vw - var(--gutter) - 8px)); transition: transform 0.2s steps(3); }
.palette-pick:hover .phone { transform: translateY(calc(var(--u) * -2)); }
.palette-pick[aria-pressed="true"] .label { background: var(--ink); color: var(--bg); }
.palette-pick .label { padding: 2px 10px; }
@media (min-width: 900px) { .palette-pick .phone { --w: 240px; } }

/* Spec grid */
.inside { padding: 64px 0; }
.spec-grid { display: grid; gap: 32px; }
@media (min-width: 720px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.spec { padding: 24px; height: 100%; }
.spec h3 { display: inline-block; padding: 2px 10px; margin-bottom: 20px; background: var(--c); color: var(--on-accent); }
.spec-grid > :nth-child(1) { --c: var(--red); }
.spec-grid > :nth-child(2) { --c: var(--yellow); }
.spec-grid > :nth-child(3) { --c: var(--blue); }
.spec-grid > :nth-child(4) { --c: var(--green); }
.spec-grid > .shadow { --sh: var(--c); }

/* Price */
.price-sec { padding: 64px 0 96px; }
.price-grid { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 900px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price { padding: 32px 24px; height: 100%; }
@media (min-width: 720px) { .price { padding: 40px; } }
.price h3 { margin-bottom: 8px; }
.price .amount { margin-bottom: 24px; }
.price.free { --c: var(--green); }
.price.unlock { --c: var(--yellow); --fill: color-mix(in srgb, var(--yellow) 18%, var(--bg)); }
.price-grid > :nth-child(1) { --sh: var(--green); }
.price-grid > :nth-child(2) { --sh: var(--yellow); }

/* FAQ */
.faq { padding: 64px 0 96px; }
.faq dl { margin: 48px 0 0; max-width: 44em; }
.faq dt { margin-top: 32px; color: var(--yellow); }
.faq dd { margin: 8px 0 0; }

/* Footer */
.foot { padding: 48px 0 64px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--dim); }

/* Plain pages: privacy, support, 404 */
.page { padding: 64px 0 96px; }
.page .wrap { max-width: calc(44em + var(--gutter) * 2); }
.page h1 { margin-bottom: 16px; }
.page h2 { margin: 48px 0 16px; --c: var(--yellow); }
.page .note { padding: 24px; margin: 32px 0 16px; }
.page a { text-decoration-thickness: var(--u); text-underline-offset: 6px; }

/* Reveal on scroll, stepped like the app's animations. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(16px); transition: opacity 0.4s steps(4), transform 0.4s steps(4); }
  .js .rise.in { opacity: 1; transform: none; }
}