/* The website is built from the app's own materials: recessed screens,
   real keycaps with LEDs, and paper. The fonts and colors come from the
   app's brand.css, the same as odett.ai. The only strong color is on the
   screens, where the real counter from ui/counter.js runs. At the top, one
   of those screens is a whole desktop with the app running on it. */

:root {
  --housing-top: var(--surface);
  --housing-bottom: #f3efe8;
  --housing-edge: rgba(0, 0, 0, 0.14);
  --groove: var(--border);

  --cap-face-top: var(--button-top);
  --cap-face-bottom: var(--button-bottom);
  --cap-skirt: #d6d6d6;
  --cap-edge: var(--button-edge);
  --cap-drop: #aaaaaa;

  --primary-face-top: var(--brand);
  --primary-face-bottom: var(--brand-dark);
  --primary-skirt: #8d5f22;
  --primary-edge: var(--brand-darker);
  --primary-drop: var(--brand-shadow);

  --paper-top: var(--surface-paper);
  --paper-bottom: #f3f1ec;

  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --led-on: var(--green);
  --led-off: #bdbdbd;
  --focus: var(--brand);

  --page-width: 1120px;

  /* The type scale. Every text on the site takes one of these sizes, each
     with its own line height and letter spacing. Headings are the display
     serif, set tight; everything else is the text font. The play comes from
     the serif, the keys and the LEDs, not from size. */
  --size-display: clamp(46px, 7vw, 80px);
  --leading-display: 1.02;
  --tracking-display: -0.03em;

  --size-heading: clamp(30px, 3.4vw, 40px);
  --leading-heading: 1.08;
  --tracking-heading: -0.022em;

  --size-title: clamp(22px, 2.2vw, 26px);
  --leading-title: 1.15;
  --tracking-title: -0.015em;

  --size-lede: clamp(18px, 1.8vw, 20px);
  --leading-lede: 1.5;
  --tracking-lede: -0.008em;

  --size-body: 17px;
  --leading-body: 1.55;

  --size-small: 15px;
  --leading-small: 1.5;
  --tracking-small: 0em;

  --size-tiny: 13px;
  --leading-tiny: 1.45;
  --tracking-tiny: 0.005em;

  /* Two weights for the text font: regular for reading, semibold for
     labels, keys and anything picked out. The serif is always semibold. */
  --weight-regular: 400;
  --weight-strong: 600;

  /* How wide text may run. A ch is the width of a zero, and Geist's zero is
     wide, so 48ch holds about 65 letters of running text. */
  --measure-body: 48ch;
  --measure-lede: 54ch;
}

* {
  box-sizing: border-box;
}

/* Hidden means hidden, whatever display a class gives the element */
[hidden] {
  display: none !important;
}

html {
  background: var(--page);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--text-font);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(13, 13, 13, 0.12);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display-font);
  font-weight: var(--weight-strong);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  text-wrap: balance;
}

h1 {
  font-size: var(--size-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--size-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h3 {
  font-size: var(--size-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* LEDs: lit means on, like Caps Lock */

.led {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.led.is-on {
  background: var(--led-on);
  box-shadow:
    0 0 4px var(--led-on),
    0 0 9px rgba(107, 195, 129, 0.55);
}

/* Keycaps, the same as the app's settings panel */

.key {
  position: relative;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 10px 16px 15px;
  font-family: var(--text-font);
  font-size: var(--size-small);
  font-weight: var(--weight-strong);
  line-height: 1;
  letter-spacing: var(--tracking-small);
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(180deg, var(--cap-face-top), var(--cap-face-bottom));
  border: 1px solid var(--cap-edge);
  border-radius: 9px;
  box-shadow:
    inset 0 -5px 0 var(--cap-skirt),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 var(--cap-drop),
    0 4px 8px rgba(40, 32, 18, 0.22);
  cursor: pointer;
  transition: transform 60ms ease, box-shadow 60ms ease;
}

.key:active,
.key[aria-pressed="true"] {
  transform: translateY(3px);
  box-shadow:
    inset 0 -2px 0 var(--cap-skirt),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 var(--cap-drop),
    0 1px 2px rgba(40, 32, 18, 0.25);
}

/* Keys that stay down get an LED in the corner */
.key[aria-pressed] {
  padding-right: 26px;
}

.key[aria-pressed]::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

.key[aria-pressed="true"]::after {
  background: var(--led-on);
  box-shadow:
    0 0 4px var(--led-on),
    0 0 8px rgba(107, 195, 129, 0.6);
}

/* The key that starts something is the brand's brown */
.key-primary {
  color: var(--page);
  background: linear-gradient(180deg, var(--primary-face-top), var(--primary-face-bottom));
  border-color: var(--primary-edge);
  box-shadow:
    inset 0 -5px 0 var(--primary-skirt),
    inset 0 1px 0 rgba(226, 185, 131, 0.7),
    0 3px 0 var(--primary-drop),
    0 4px 8px rgba(40, 32, 18, 0.25);
}

.key-primary:active {
  box-shadow:
    inset 0 -2px 0 var(--primary-skirt),
    inset 0 1px 0 rgba(226, 185, 131, 0.7),
    0 0 0 var(--primary-drop),
    0 1px 2px rgba(40, 32, 18, 0.3);
}

.key-small {
  padding: 8px 13px 12px;
  font-size: var(--size-small);
}

.key-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* The top bar */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px max(24px, calc((100% - var(--page-width)) / 2));
  background: rgba(248, 246, 242, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--groove);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  margin-right: auto;
  font-family: var(--display-font);
  font-size: 20px;
  font-weight: var(--weight-strong);
  line-height: 1;
  letter-spacing: var(--tracking-title);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--brand-darker);
  text-decoration: none;
}

/* The app is in alpha: a small tag next to its name */
.release-tag {
  padding: 4px 8px 5px;
  font-family: var(--text-font);
  font-size: 11px;
  font-weight: var(--weight-strong);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variation-settings: normal;
  color: var(--brand-darker);
  border-radius: 999px;
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand-border);
}

.top-links {
  display: flex;
  gap: 28px;
  font-size: var(--size-small);
}

.top-links a {
  color: var(--ink-soft);
  text-decoration: none;
}

.top-links a:hover {
  color: var(--ink);
}

/* The hero */

main {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 24px;
}

.hero {
  padding: 80px 0 40px;
  text-align: center;
}

.lede {
  max-width: var(--measure-lede);
  margin: 24px auto 0;
  font-size: var(--size-lede);
  line-height: var(--leading-lede);
  letter-spacing: var(--tracking-lede);
  color: var(--ink-soft);
  text-wrap: balance;
}

/* The call to action, at the top and the bottom: download the free app */
.call-to-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.key-large {
  padding: 14px 22px 19px;
  font-size: var(--size-body);
}

/* The Apple logo on the download keys: WPM Tracker is a Mac app */
.apple-logo {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.45em;
  vertical-align: -0.14em;
  fill: currentColor;
}

/* The price, after a groove in the key */
.key-price {
  display: inline-block;
  margin-left: 14px;
  padding-left: 14px;
  font-weight: var(--weight-regular);
  color: rgba(248, 246, 242, 0.82);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* Screens: recessed glass with a desktop wallpaper, where the counter lives */

.screen {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--wallpaper);
  box-shadow:
    inset 0 0 0 1px rgba(20, 16, 10, 0.55),
    inset 0 3px 10px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.7);
}

.counter-slot {
  position: absolute;
  top: 18px;
  right: 18px;
}

.counter-slot .counter-frame,
.counter-holder .counter-frame {
  position: relative;
}

/* On the screens the counter always has its dark glass look, whatever the
   visitor's own light or dark setting, since the wallpaper is dark. */
.screen .theme-glass {
  --accent: hsl(var(--heat-hue) 90% 64%);
  --series-raw: #a78bfa;
  --series-burst: rgba(255, 255, 255, 0.85);
  --series-average: rgba(255, 255, 255, 0.5);
}

.screen .theme-glass .counter {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: rgba(60, 60, 70, 0.22);
}

/* The desktop at the top: a computer with WPM Tracker running on it. The
   menu bar shows your speed next to the app's icon, the counter floats in
   the top right corner, and you type in the open document. The bezel makes
   it read as a screen on its own, a little darker than the page. */

/* The keys for the counter's two looks, right above its corner of the
   desktop */
.hero-looks {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  max-width: 1040px;
  margin: 40px auto 0;
  padding-right: 20px;
}

.desktop {
  max-width: 1040px;
  margin: 16px auto 0;
  padding: 12px;
  text-align: left;
  border-radius: 26px;
  background: linear-gradient(180deg, #34312d, #1d1c1a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 30px 70px rgba(40, 32, 18, 0.3);
}

.desktop-screen {
  height: clamp(460px, 56vw, 600px);
  border-radius: 14px;
}

.desktop-note {
  max-width: 60ch;
  margin: 20px auto 0;
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--ink-soft);
  text-wrap: balance;
}

/* The menu bar, in the white text of a dark wallpaper */

.menu-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 28px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(24, 22, 20, 0.4);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.menu-bar-apple {
  flex: none;
  width: 15px;
  height: 15px;
  margin-right: -4px;
  fill: currentColor;
}

.menu-bar-app {
  font-weight: 700;
}

.menu-bar-menus {
  display: flex;
  gap: 18px;
  color: rgba(255, 255, 255, 0.84);
}

.menu-bar-status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* WPM Tracker's own item: its icon, and your speed next to it */
.tray-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.tray-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("/images/tray.svg") center / contain no-repeat;
  mask: url("/images/tray.svg") center / contain no-repeat;
}

.tray-speed {
  min-width: 3ch;
}

.menu-bar-glyph {
  display: block;
  opacity: 0.9;
}

.menu-bar-clock {
  font-variant-numeric: tabular-nums;
}

/* The open app: a plain editor, with a sheet of paper to type on */

.app-window {
  position: absolute;
  top: 64px;
  bottom: 104px;
  left: 6%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 54%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-paper);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.55),
    0 22px 60px rgba(0, 0, 0, 0.5);
}

.window-title-bar {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  height: 34px;
  padding: 0 12px;
  background: linear-gradient(180deg, #f4f2ee, #e9e6e0);
  border-bottom: 1px solid var(--border);
}

.window-buttons {
  display: flex;
  gap: 8px;
}

.window-buttons i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}

.window-buttons i:nth-child(1) {
  background: #ff5f57;
}

.window-buttons i:nth-child(2) {
  background: #febc2e;
}

.window-buttons i:nth-child(3) {
  background: #28c840;
}

.window-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}

.window-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  min-height: 0;
  padding: 22px 32px 26px;
  cursor: text;
}

.window-page:focus-within {
  box-shadow: inset 0 0 0 2px var(--focus);
}

/* What is typed, the sample typist's or yours. The newest line always stays
   in view. */
.document-text {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-family: var(--display-font);
  font-size: 20px;
  line-height: 1.6;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.document-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--brand);
  animation: caret-blink 1.1s steps(1) infinite;
}

.app-window.is-typing .document-caret {
  animation: none;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

/* The invitation to type, at the top of the page, so it's in view as soon
   as the desktop is. When the sample typist is done, it's your turn, and it
   pulses. */
.document-hint {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  flex: none;
  padding: 10px 18px 10px 14px;
  font-size: var(--size-body);
  font-weight: var(--weight-strong);
  line-height: 1;
  color: var(--brand-darker);
  border-radius: 999px;
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand-border);
  pointer-events: none;
}

.app-window.is-your-turn .document-hint {
  animation: your-turn 1.6s ease-in-out infinite;
}

@keyframes your-turn {
  50% {
    box-shadow:
      inset 0 0 0 1px var(--brand-border),
      0 0 0 6px rgba(183, 122, 42, 0.16);
  }
}

.app-window.has-your-text .document-hint {
  display: none;
}

/* The real text box: invisible, on top of the page, catching the typing */
.document-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  resize: none;
  font-size: 16px;
  opacity: 0;
  cursor: text;
}

/* The counter floats above everything, in the top right corner under the
   menu bar, with room above it for its special effects */
.desktop-screen .counter-slot {
  top: 52px;
  right: 20px;
  z-index: 3;
}

/* The Dock */

.desktop-dock {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 7px 7px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
}

.dock-app {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.3);
}

.dock-app svg {
  width: 28px;
  height: 28px;
}

/* The app you have open gets a dot under it */
.dock-app.is-running::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.dock-files {
  background: linear-gradient(180deg, #62b0ff, #1f6feb);
}

.dock-browser {
  background: linear-gradient(180deg, #3fd6c6, #138a82);
}

.dock-mail {
  background: linear-gradient(180deg, #ffd873, #e9a23b);
}

.dock-draft {
  background: linear-gradient(180deg, #fdfcf9, #e9e4da);
}

.dock-music {
  background: linear-gradient(180deg, #ff7a96, #d8315a);
}

.dock-settings {
  background: linear-gradient(180deg, #b3b3ba, #7b7b83);
}

/* Features, one at a time, the picture on alternating sides */

.features {
  padding: 72px 0 24px;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 64px;
  padding: 64px 0;
}

/* Every other feature has its picture on the left, and the picture keeps
   the wide column on either side */
.feature:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.feature:nth-child(even) > :first-child {
  order: 2;
}

/* A picture with small text gets the full width, under its text */
.feature.feature-wide {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.feature.feature-wide > :first-child {
  order: 0;
}

.feature.feature-wide .feature-text p {
  max-width: var(--measure-body);
}

.feature-text p {
  max-width: var(--measure-body);
  margin-top: 16px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.feature-text p + p {
  margin-top: 12px;
}

.feature-text p.try-line {
  margin-top: 16px;
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--ink);
}

.screen-feature {
  min-height: 300px;
}

.screen-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px 32px;
}

/* A plain window on the desktop, so the counter has something to sit over */
.window {
  position: absolute;
  inset: 72px 72px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 32px;
  border-radius: 12px 12px 0 0;
  background: rgba(22, 21, 19, 0.82);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.window-line {
  height: 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
}

/* Like the app: the counter fades out completely while the pointer is over
   it, quickly, and comes back a little slower (overlay.rs) */
.fades-under-pointer .counter-frame {
  transition:
    opacity 300ms ease,
    --heat-hue 900ms ease;
}

.fades-under-pointer .counter-frame:hover {
  opacity: 0;
  transition-duration: 120ms, 900ms;
}

/* Compact or detailed: the rows of the settings panel's Look tab, working
   on the counter next to them */

.look-controls {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.look-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.look-label {
  font-size: var(--size-small);
  color: var(--ink-soft);
}

.look-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.look-screen {
  min-height: 340px;
}

/* The numbers, each with the mark it has in the counter's graph */

.numbers {
  display: grid;
  margin: 20px 0 0;
}

.number-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  margin: 0 -12px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: default;
  transition: background-color 120ms ease;
}

.number-row:hover,
.number-row:focus-visible,
.number-row.is-picked {
  background: var(--brand-tint);
}

.number-row dt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--weight-strong);
}

.number-row dd {
  margin: 0;
  color: var(--ink-soft);
}

.number-swatch {
  flex: none;
  width: 22px;
}

.swatch-wpm {
  height: 3px;
  border-radius: 2px;
  background: hsl(350 78% 56%);
}

.swatch-raw {
  height: 8px;
  border-radius: 3px;
  background: rgba(139, 92, 246, 0.75);
}

.swatch-burst {
  height: 4px;
  background: radial-gradient(circle, var(--ink) 1.6px, transparent 2px) 0 50% / 7px 4px repeat-x;
}

.swatch-average {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink-soft) 0 5px, transparent 5px 9px);
}

/* The number picked out in the counter, by numbers-demo.js or by pointing
   at its row, stays and the rest steps back */

.numbers-screen .counter-reading,
.numbers-screen .legend-item,
.numbers-screen .graph-area,
.numbers-screen .graph-band,
.numbers-screen .graph-line,
.numbers-screen .graph-dots,
.numbers-screen .graph-dot {
  transition: opacity 160ms ease;
}

.numbers-screen [data-highlight] .counter-reading,
.numbers-screen [data-highlight] .legend-item,
.numbers-screen [data-highlight] .graph-area,
.numbers-screen [data-highlight] .graph-band,
.numbers-screen [data-highlight] .graph-line,
.numbers-screen [data-highlight] .graph-dots,
.numbers-screen [data-highlight] .graph-dot {
  opacity: 0.16;
}

.numbers-screen [data-highlight="wpm"] .counter-reading,
.numbers-screen [data-highlight="wpm"] .series-wpm,
.numbers-screen [data-highlight="wpm"] .graph-area,
.numbers-screen [data-highlight="wpm"] .graph-dot,
.numbers-screen [data-highlight="raw"] .series-raw,
.numbers-screen [data-highlight="burst"] .series-burst,
.numbers-screen [data-highlight="average"] .series-average,
.numbers-screen [data-highlight="accuracy"] .series-accuracy {
  opacity: 1;
}

.picture {
  margin: 0;
}

.picture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px var(--border),
    0 18px 44px rgba(40, 32, 18, 0.16);
}

.picture-tall img {
  max-width: 380px;
  margin: 0 auto;
}

.picture-square img {
  max-width: 460px;
  margin: 0 auto;
}

/* LED lists: a lit LED means it's included */

.led-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.led-list li {
  display: flex;
  text-wrap: pretty;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--groove);
}

.led-list .led {
  transform: translateY(-1px);
}

/* Share: the app's real share card, posted in four places. Each post is a
   small sketch of where it went, in that place's own colors, around the
   card. */

.share-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.post-x {
  grid-column: 1 / 3;
  grid-row: 1;
}

.post-messenger {
  grid-column: 3;
  grid-row: 1 / 3;
}

.post-linkedin {
  grid-column: 1;
  grid-row: 2;
}

.post-slack {
  grid-column: 2;
  grid-row: 2;
}

/* The two chats are scrolled to the newest message: they take the height the
   posts beside them give them, and earlier messages go under the top edge.
   Size containment keeps their own content from making the rows taller, so
   X and LinkedIn set the heights and every edge lines up. */
.post-messenger,
.post-slack {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  contain: size;
}

.post-messenger .post-window,
.post-slack .post-window {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.chat,
.slack-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 40px);
}

.chat-earlier,
.slack-earlier {
  display: contents;
}

.share-post {
  margin: 0;
}

.share-post figcaption {
  margin-top: 10px;
  font-size: var(--size-tiny);
  line-height: var(--leading-tiny);
  letter-spacing: var(--tracking-tiny);
  color: var(--text-tertiary);
}

.post-window {
  overflow: hidden;
  border-radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  box-shadow:
    0 0 0 1px var(--border),
    0 18px 44px rgba(40, 32, 18, 0.14);
}

.post-window p {
  margin: 0;
}

/* The card is drawn at its full size and scaled down to fit (share-posts.js) */
.share-shot {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.share-shot .share-card {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 50%;
}

.post-actions {
  display: flex;
}

.post-actions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-actions svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* X: dark, the avatar in its own column */

.post-x .post-window {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  padding: 16px 18px 12px;
  color: #e7e9ea;
  background: #000000;
}

.post-x .post-head {
  display: contents;
}

.post-x .avatar {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #f59e0b, #db2777);
}

.post-x .post-author,
.post-x .post-text,
.post-x .share-shot,
.post-x .post-actions {
  grid-column: 2;
}

.post-x .post-meta {
  color: #71767b;
}

.post-x .post-text {
  margin: 2px 0 12px;
}

.post-x .share-shot {
  border: 1px solid #2f3336;
  border-radius: 16px;
}

.post-x .post-actions {
  justify-content: space-between;
  max-width: 420px;
  margin-top: 12px;
  font-size: 13px;
  color: #71767b;
}

/* LinkedIn: white, the picture across the whole post */

.post-linkedin .post-window {
  color: rgba(0, 0, 0, 0.9);
  background: #ffffff;
}

.post-linkedin .post-head {
  display: flex;
  gap: 10px;
  padding: 12px 14px 0;
}

.post-linkedin .avatar {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

.post-linkedin .post-author {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.3;
}

.post-linkedin .post-meta {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

.post-linkedin .post-text {
  padding: 10px 14px;
  font-size: 14px;
}

.post-linkedin .share-shot {
  border-radius: 0;
}

.post-linkedin .post-counts {
  padding: 8px 14px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.post-linkedin .post-actions {
  justify-content: space-around;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

/* Slack: a message in a channel, with reactions */

.post-slack .post-window {
  color: #1d1c1d;
  background: #ffffff;
}

.slack-channel {
  padding: 10px 16px;
  font-weight: 800;
  border-bottom: 1px solid #e8e8e8;
}

.slack-message {
  display: flex;
  flex: none;
  gap: 10px;
  padding: 14px 16px 16px;
}

.slack-earlier .slack-message {
  padding-bottom: 0;
}

.post-slack .avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981, #0e7490);
}

.post-slack .avatar-blue {
  background: linear-gradient(135deg, #60a5fa, #1d4ed8);
}

.post-slack .avatar-amber {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}

.post-slack .avatar-rose {
  background: linear-gradient(135deg, #fb7185, #be123c);
}

.slack-body {
  flex: 1;
  min-width: 0;
}

.post-slack .post-author b {
  font-weight: 800;
}

.post-slack .post-meta {
  margin-left: 4px;
  font-size: 12px;
  color: #616061;
}

.post-slack .post-text {
  margin: 2px 0 8px;
}

.post-slack .share-shot {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e8e8e8;
}

.slack-reactions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.slack-reactions span {
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 12px;
  background: #f4f4f4;
  box-shadow: inset 0 0 0 1px #e2e2e2;
}

.post-window .slack-thread {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1264a3;
}

.slack-thread-faces {
  display: flex;
}

.slack-thread-faces i {
  width: 20px;
  height: 20px;
  margin-right: -4px;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #ffffff;
}

.slack-thread-faces i:nth-child(1) {
  background: linear-gradient(135deg, #f59e0b, #db2777);
}

.slack-thread-faces i:nth-child(2) {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

.slack-thread-faces i:nth-child(3) {
  background: linear-gradient(135deg, #a855f7, #ec4899);
}

/* Your own reaction is the blue one */
.slack-reactions span:first-child {
  color: #1264a3;
  background: #e8f5fa;
  box-shadow: inset 0 0 0 1px #1d9bd1;
}

/* Messenger: a chat, newest at the bottom */

.post-messenger .post-window {
  color: #050505;
  background: #ffffff;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e4e6eb;
}

.post-messenger .avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
}

.chat {
  gap: 4px;
  padding: 14px;
}

.post-window .chat-time {
  align-self: center;
  margin: 8px 0;
  font-size: 11px;
  color: #65676b;
}

.bubble {
  max-width: 78%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 18px;
}

.bubble-theirs {
  align-self: flex-start;
  background: #f0f0f0;
}

.bubble-mine {
  align-self: flex-end;
  color: #ffffff;
  background: linear-gradient(135deg, #8b5cf6, #0a7cff);
}

.bubble-picture {
  align-self: flex-end;
  width: 76%;
  margin: 4px 0;
}

.bubble-picture .share-shot {
  border-radius: 18px;
}

/* Pricing: the early bird ladder, then what Free and Pro hold */

.pricing {
  padding: 72px 0;
  text-align: center;
  border-top: 1px solid var(--groove);
}

.pricing-lede {
  max-width: var(--measure-lede);
  margin: 20px auto 0;
  font-size: var(--size-lede);
  line-height: var(--leading-lede);
  letter-spacing: var(--tracking-lede);
  color: var(--ink-soft);
  text-wrap: balance;
}

/* What Free and Pro hold, under the buy key */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  text-align: left;
}

.plan {
  padding: 28px 30px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-paper);
}

.plan-price {
  margin: 6px 0 18px;
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--ink-soft);
}

/* "More Pro-only features coming", on fire: the last line of Pro's list, with
   a flickering ember for its light and embers rising off the words into the
   card (pro-fire.js). It's a line like the others, not a key, because there
   is nothing to press. */
@property --pro-flame {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.led.is-fire {
  background: #ff8a1f;
  box-shadow:
    0 0 calc(3px + var(--pro-flame) * 3px) #ff8a1f,
    0 0 calc(8px + var(--pro-flame) * 6px) hsl(24 100% 52% / 0.55);
}

.more-coming-line {
  animation: pro-flame 0.7s ease-in-out infinite alternate;
}

@keyframes pro-flame {
  from {
    --pro-flame: 0;
  }
  to {
    --pro-flame: 1;
  }
}

.more-coming {
  position: relative;
}

.pro-fire-canvas {
  position: absolute;
  top: -40px;
  right: -12px;
  bottom: 0;
  left: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 40px);
  pointer-events: none;
}

.more-coming-text {
  position: relative;
  font-weight: var(--weight-strong);
  background: linear-gradient(90deg, #d9480f, #f76707 45%, #e8590c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 calc(3px + var(--pro-flame) * 4px) hsl(30 100% 55% / 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .more-coming-line {
    animation: none;
  }
}

/* What Pro's updates are, under its list, as the card's small print. */
.plan-note {
  margin: 0;
  padding: 14px 0 6px;
  border-top: 1px solid var(--groove);
  font-size: var(--size-tiny);
  line-height: var(--leading-tiny);
  letter-spacing: var(--tracking-tiny);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.plan-note b {
  font-weight: var(--weight-strong);
  color: var(--ink);
}

.plan-pro {
  border-color: var(--brand-border);
  background: linear-gradient(180deg, rgba(183, 122, 42, 0.03), var(--brand-tint)), var(--surface-paper);
}

/* Questions */

.questions {
  padding: 72px 0;
}

.questions h2 {
  margin-bottom: 24px;
}

details {
  border-top: 1px solid var(--groove);
}

details:last-of-type {
  border-bottom: 1px solid var(--groove);
}

summary {
  padding: 18px 0;
  font-weight: var(--weight-strong);
  cursor: pointer;
}

details p {
  max-width: var(--measure-body);
  margin-top: -4px;
  padding-bottom: 22px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

details .picture {
  margin: 4px 0 28px;
}

/* Closing */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 88px 0 64px;
  text-align: center;
  border-top: 1px solid var(--groove);
}

.closing-icon {
  width: 104px;
  height: 104px;
  margin-bottom: -8px;
}

.closing-lede {
  margin-top: -10px;
  font-size: var(--size-lede);
  line-height: var(--leading-lede);
  letter-spacing: var(--tracking-lede);
  color: var(--ink-soft);
  text-wrap: balance;
}

.closing .call-to-action {
  margin-top: 0;
}

/* What it runs on, small under the closing download key */
.requirement {
  margin-top: -6px;
  font-size: var(--size-tiny);
  line-height: var(--leading-tiny);
  letter-spacing: var(--tracking-tiny);
  color: var(--text-tertiary);
}

.footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px max(24px, calc((100% - var(--page-width)) / 2)) 40px;
  font-size: var(--size-tiny);
  line-height: var(--leading-tiny);
  letter-spacing: var(--tracking-tiny);
  color: var(--ink-soft);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.footer a {
  color: var(--ink-soft);
}

.footer a:hover {
  color: var(--ink);
}

/* Who made it. The links sit in a sentence, so they are underlined to
   read as links, and the X logo says where the name goes. */
.maker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.maker img {
  display: block;
  border-radius: 50%;
}

.maker a {
  text-decoration: underline;
  text-decoration-color: var(--brand-border);
  text-underline-offset: 3px;
}

.maker a:hover {
  text-decoration-color: currentColor;
}

.x-logo {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  fill: currentColor;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  text-decoration: none;
}

.copyright {
  margin: 0;
  color: var(--text-disabled);
}

/* The terms and the privacy notice: plain text pages */

.document {
  max-width: calc(var(--measure-body) + 48px);
  padding: 72px 24px 32px;
}

.document h1 {
  font-size: var(--size-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.document .updated {
  margin-top: 10px;
  margin-bottom: 28px;
  font-size: var(--size-small);
  line-height: var(--leading-small);
  color: var(--text-tertiary);
}

.document h2 {
  margin-top: 44px;
  font-size: var(--size-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.document p,
.document li {
  color: var(--ink-soft);
  text-wrap: pretty;
}

.document p {
  margin-top: 12px;
}

.document ul {
  margin: 12px 0 0;
  padding-left: 22px;
}

.document li + li {
  margin-top: 6px;
}

/* Smaller screens */

@media (max-width: 860px) {
  .top-links {
    display: none;
  }

  .feature,
  .feature:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 48px 0;
  }

  .feature:nth-child(even) > :first-child {
    order: 0;
  }

  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .counter-slot .counter-frame,
  .counter-holder:not(.look-holder) .counter-frame {
    font-size: 22px;
  }

  /* The desktop's counter in its minimal look stays small */
  .desktop-screen .counter-slot .counter-frame.size-small {
    font-size: 15px;
  }

  .share-posts {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-x,
  .post-messenger,
  .post-linkedin,
  .post-slack {
    grid-column: auto;
    grid-row: auto;
  }

  .post-messenger,
  .post-slack {
    contain: none;
  }

  .chat,
  .slack-messages {
    mask-image: none;
  }

  .chat-earlier,
  .slack-earlier {
    display: none;
  }

  .window {
    inset: 64px 24px 0 24px;
  }
}

/* A phone: the desktop keeps the essentials, with the document under the
   counter */
@media (max-width: 640px) {
  .top-bar {
    gap: 16px;
  }

  /* The top bar's download key has no room for the logo; the hero's has it */
  .top-bar .apple-logo {
    display: none;
  }

  .brand {
    font-size: 18px;
  }

  .top-bar .key {
    white-space: nowrap;
  }

  .desktop {
    padding: 8px;
    border-radius: 20px;
  }

  .number-row {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .desktop-screen {
    height: 540px;
    border-radius: 13px;
  }

  .menu-bar {
    padding: 0 10px;
  }

  .menu-bar-menus,
  .menu-bar-glyph {
    display: none;
  }

  .desktop-screen .counter-slot {
    top: 46px;
    right: 12px;
  }

  .hero-looks {
    padding-right: 4px;
  }

  .app-window {
    top: 150px;
    bottom: 76px;
    left: 10px;
    width: auto;
    right: 10px;
  }

  .window-page {
    padding: 18px 20px;
  }

  .document-text {
    font-size: 17px;
  }

  .document-hint {
    font-size: var(--size-small);
  }

  .desktop-dock {
    gap: 7px;
    padding: 6px 6px 9px;
    border-radius: 16px;
  }

  .dock-app {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .dock-app svg {
    width: 23px;
    height: 23px;
  }

  .dock-music,
  .dock-settings {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .led,
  .key,
  .number-row {
    transition: none;
  }

  .document-caret,
  .app-window.is-your-turn .document-hint {
    animation: none;
  }
}