/* Scribble landing page. White page, black type, zinc greys; the only colour is the
   app's own ink (red, blue, yellow). */
:root {
  --paper: #fff;
  --paper-2: #f4f4f5;
  --paper-3: #fafafa;
  --ink: #0a0a0a;
  --ink-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;
  --line: #e4e4e7;
  --dark: #111113;
  --red: #ff3b30;
  --blue: #0a84ff;
  --yellow: #ffcc00;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
  --gutter: 28px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15.5px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.nav,
main,
footer {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
section {
  scroll-margin-top: 76px;
}

/* Key caps. app.js splits each shortcut into one cap per key. */
kbd {
  display: inline-flex;
  gap: 3px;
  font: 500 12px/1 var(--mono);
  vertical-align: 0.08em;
  white-space: nowrap;
}
kbd span {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 0 0 1px var(--line),
    0 1.5px 0 var(--line);
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 0 0 100vmax rgba(255, 255, 255, 0.88),
    0 1px 0 var(--line);
  clip-path: inset(0 -100vmax);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand img {
  flex: none;
}
/* While the name is on screen in the hero, the bar does not repeat it (app.js). */
.nav .brand {
  transition:
    opacity 0.2s,
    visibility 0.2s;
}
.nav.at-top .brand {
  opacity: 0;
  visibility: hidden;
}
.nav nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}
.nav nav a {
  text-decoration: none;
  color: var(--ink-2);
}
.nav nav a:hover {
  color: var(--ink);
}
.nav nav .nav-cta {
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
}
.nav nav .nav-cta:hover {
  background: var(--ink-2);
  color: #fff;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 9px;
  font-weight: 550;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.button.primary {
  background: var(--ink);
  color: #fff;
}
.button.primary:hover {
  background: var(--ink-2);
}
.button.ghost {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.button.ghost:hover {
  box-shadow: inset 0 0 0 1px var(--faint);
}

/* Hero: headline and shortcuts on the left, what it is and the download on the right. */
.hero {
  padding: 52px 0 40px;
}
.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 72px;
  row-gap: 26px;
}
h1 {
  grid-area: 1 / 1;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 0.28em;
  font-size: clamp(37px, 4.9vw, 62px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
h1 img {
  flex: none;
  width: 1.12em;
  height: 1.12em;
}
.lede {
  grid-area: 1 / 2;
  align-self: end;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.lede strong {
  font-weight: 600;
  color: var(--ink);
}
.keys {
  grid-area: 2 / 1;
  display: grid;
  gap: 9px;
  font-size: 14px;
}
.keys li {
  display: grid;
  grid-template-columns: 124px 104px 1fr;
  align-items: center;
}
.keys b {
  font-weight: 600;
}
.keys li > span {
  color: var(--muted);
}
.pc .keys li {
  grid-template-columns: 172px 104px 1fr;
}
.cta {
  grid-area: 2 / 2;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cta-note {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

/* The hero video. */
.demo {
  position: relative;
  margin: 64px 0 0;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 30px 60px -36px rgba(0, 0, 0, 0.35);
}
.hud {
  position: absolute;
  top: 3.4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.16);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.hud .rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.lv {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.lv i {
  width: 2.5px;
  height: 100%;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.14);
}
.lv i.on {
  background: #34c759;
}
.hud-mode {
  padding-left: 7px;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  font-weight: 500;
  color: var(--muted);
}
/* While the capture plays, the words not spoken yet are dimmed. */

.works {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--faint);
}
.logo svg {
  width: 17px;
  height: 17px;
  fill: var(--faint);
  transition: fill 0.15s;
}
.logo:hover svg {
  fill: var(--ink);
}

/* Sections */
h2 {
  font-size: clamp(27px, 3.1vw, 37px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.how,
.modes,
.split,
.download {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

/* The page reads as one capture: a timestamp line over each heading, which gets the
   reference of the mark drawn in that section (app.js). */
.ts {
  min-height: 1.5em;
  margin-bottom: 12px;
  font: 400 12px/1.5 var(--mono);
  color: var(--faint);
}
.ts-cite {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 59, 48, 0.1);
  color: #c9281f;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ts-cite.b {
  background: rgba(10, 132, 255, 0.1);
  color: #0a66c8;
}
.ts-cite.y {
  background: rgba(255, 204, 0, 0.22);
  color: #7a5f00;
}
.ts-cite:empty {
  display: none;
}
.wait .ts,
.wait .wd {
  opacity: 0;
}
.wd {
  transition: opacity 0.18s;
}

.mk {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mk-ink {
  position: absolute;
  left: -0.26em;
  top: -0.08em;
  width: calc(100% + 0.52em);
  max-width: none;
  height: calc(100% + 0.16em);
  overflow: visible;
  pointer-events: none;
}
.mk-ink path {
  fill: none;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.6, 0, 0.2, 1);
}
.mk.in .mk-ink path {
  stroke-dashoffset: 0;
}
.mk-circle,
.mk-box {
  margin: 0 0.14em;
}
.mk-circle .mk-ink {
  left: -0.3em;
  top: -0.12em;
  width: calc(100% + 0.6em);
  height: calc(100% + 0.24em);
}
.mk-circle .mk-n {
  left: calc(-0.3em - 4px);
  top: calc(-0.12em - 8px);
}
.mk-highlight .mk-ink {
  left: -0.1em;
  width: calc(100% + 0.2em);
  mix-blend-mode: multiply;
}
.mk-highlight .mk-ink path {
  stroke-linecap: butt;
  opacity: 0.6;
}
.mk-pen .mk-ink {
  left: -0.06em;
  top: 0.2em;
  width: calc(100% + 0.12em);
}
.mk-pen .mk-ink path {
  stroke-width: 2.6px;
}
.mk-n {
  position: absolute;
  left: calc(-0.26em - 9px);
  top: calc(-0.08em - 11px);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font: 700 12.5px/1 var(--body);
  letter-spacing: 0;
  box-shadow:
    0 0 0 2px #fff,
    0 2px 6px rgba(0, 0, 0, 0.22);
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) 0.55s;
}
.mk-highlight .mk-n {
  left: calc(-0.1em - 12px);
  color: #000;
}
.mk.in .mk-n {
  transform: scale(1);
}

/* How it works: the section stays put while you scroll through its three steps, and the
   picture on the right moves with the scroll (app.js). Without the pin (short windows,
   reduced motion, no script) the three pictures are stacked in their final state. */
.how {
  padding: 0;
}
.how-pin {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  padding: 72px 0;
}
.how:not(.pinned) .how-pin {
  align-items: start;
}
.how.pinned {
  height: 300vh;
  height: 300svh;
}
.how.pinned .how-pin {
  position: sticky;
  top: 57px;
  height: calc(100vh - 57px);
  height: calc(100svh - 57px);
  padding: 0;
}
.steps {
  margin-top: 28px;
}
.steps li {
  position: relative;
  padding: 0 0 22px 46px;
  color: var(--muted);
  transition: color 0.2s;
}
.steps li:last-child {
  padding-bottom: 0;
}
/* The rail between the numbers fills while that step's part of the clip plays. */
.steps li::before,
.steps li::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  width: 1.5px;
  background: var(--line);
}
.steps li::after {
  background: var(--ink);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
.steps li:last-child::before,
.steps li:last-child::after {
  bottom: 0;
}
.step-head {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 28px;
  color: var(--ink-2);
}
.steps .n {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 12.5px var(--mono);
  color: var(--muted);
  transition:
    background 0.2s,
    color 0.2s;
}
.steps p {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.6;
}
.steps li.on {
  color: var(--ink-2);
}
.steps li.on .step-head {
  color: var(--ink);
}
.steps li.on .n {
  background: var(--ink);
  box-shadow: none;
  color: #fff;
}
.steps li:not(.on) kbd {
  opacity: 0.7;
}
.os-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 24px 0 0 46px;
  font-size: 13px;
  color: var(--muted);
}
.os-switch span {
  margin-right: 6px;
}
.os-switch button {
  padding: 4px 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
}
.os-switch button:hover {
  color: var(--ink);
}
.os-switch button.on {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 500;
}
.scenes {
  position: relative;
  display: grid;
  gap: 14px;
}
.scene {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--line);
}
.pinned .scenes {
  display: block;
  aspect-ratio: 16 / 10;
}
.pinned .scene {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0.25s;
}
.pinned .scene.on {
  opacity: 1;
  visibility: visible;
}
.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.scene-veil {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.scene-cursor {
  position: absolute;
  width: 13px;
  height: 20px;
  margin: 0;
  overflow: visible;
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.bigkeys {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 9px;
  font: 600 21px/1 var(--body);
}
.bigkeys span {
  min-width: 52px;
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px #d4d4d8,
    0 4px 0 #d4d4d8,
    0 14px 30px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.09s,
    box-shadow 0.09s,
    background 0.09s;
}
.bigkeys span.down {
  transform: translateY(3px);
  background: var(--paper-2);
  box-shadow:
    0 0 0 1px #d4d4d8,
    0 1px 0 #d4d4d8,
    0 4px 10px rgba(0, 0, 0, 0.14);
}
.scene-note {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.cam {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1512 / 982;
  transform-origin: 0 0;
  will-change: transform;
}
.cam img {
  width: 100%;
  height: 100%;
}
.cam svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cam ellipse {
  fill: none;
}
.cam .under {
  stroke: #fff;
  opacity: 0.9;
}
.cam .ink {
  stroke: var(--red);
}
.cam text {
  font: 700 12.5px var(--body);
  fill: #fff;
  text-anchor: middle;
}
#s2-cursor {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  min-height: 3.4em;
  padding: 9px 16px 10px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
}
.sent {
  display: none;
}
.sent.on {
  display: block;
}
.cw {
  opacity: 0.25;
  transition: opacity 0.12s;
}
.cw.said {
  opacity: 1;
}
.cchip {
  display: inline-block;
  margin: 0 2px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font: 500 12px/1.3 var(--mono);
  vertical-align: 0.08em;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.cchip.in {
  transform: scale(1);
}
.composer {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 0 0 1px var(--line),
    0 14px 30px -18px rgba(0, 0, 0, 0.3);
}
.chips {
  display: flex;
  gap: 8px;
  min-height: 30px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 4px;
  border-radius: 8px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 12px var(--mono);
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.15s,
    transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.chip.in {
  opacity: 1;
  transform: none;
}
.chip img {
  width: 34px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}
#s3-md {
  padding-left: 10px;
}
.pasted {
  min-height: 8.2em;
  margin-top: 12px;
  font: 400 13px/1.62 var(--mono);
  color: var(--ink-2);
}
.pw {
  opacity: 0;
}
.pw.in {
  opacity: 1;
}
.pcite {
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(255, 59, 48, 0.1);
  color: #c9281f;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12.5px;
  color: var(--faint);
}
#s3-hint {
  opacity: 0;
  transition: opacity 0.2s;
}
#s3-hint.in {
  opacity: 1;
}
#s3-send {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s;
}
#s3-send.go {
  background: var(--ink);
}
#s3-send svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Modes */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.mode {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.art {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.art > svg:not(.dict-arrow) {
  width: 100%;
  height: auto;
}
.mode-text {
  padding: 18px 20px 20px;
}
.mode-text header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mode-text p {
  margin-top: 7px;
  font-size: 14.5px;
  color: var(--muted);
}
.mode.dict {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}
.dict .mode-text {
  align-self: center;
}
.dict-art {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-bottom: 0;
  border-left: 1px solid var(--line);
}
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
}
.wave b {
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--red);
}
.wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
  transform: scaleY(0.3);
  animation: wave 1.1s ease-in-out infinite alternate;
}
.wave i:nth-child(3n) {
  animation-duration: 0.7s;
  animation-delay: -0.3s;
}
.wave i:nth-child(4n + 1) {
  animation-duration: 0.9s;
  animation-delay: -0.6s;
}
.wave i:nth-child(5n + 2) {
  animation-duration: 1.3s;
  animation-delay: -0.2s;
}
.wave i:nth-child(7n) {
  animation-duration: 0.6s;
  animation-delay: -0.45s;
}
@keyframes wave {
  from {
    transform: scaleY(0.14);
  }
  to {
    transform: scaleY(0.95);
  }
}
.dict-arrow {
  flex: none;
  width: 24px;
  height: 12px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prompt {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  font: 400 12.5px/1.5 var(--mono);
  white-space: nowrap;
  overflow: hidden;
}
.typed {
  display: inline-block;
  max-width: 32ch;
  overflow: hidden;
  vertical-align: bottom;
  border-right: 1.5px solid var(--ink);
  animation: type 8s steps(32) infinite;
}
@keyframes type {
  0%,
  6% {
    max-width: 0;
  }
  42%,
  94% {
    max-width: 32ch;
  }
  100% {
    max-width: 0;
  }
}

/* Pictures of the two screen modes. Without animation they show the finished state. */
.a-tag {
  font: 500 9.5px var(--mono);
  fill: var(--faint);
}
.a-kf {
  font: 600 11px var(--body);
  fill: var(--ink);
}
.a-num {
  font: 700 15px var(--body);
  fill: #18181b;
  letter-spacing: -0.02em;
}
.a-bn {
  font: 700 10.5px var(--body);
  fill: #fff;
  text-anchor: middle;
}
.a-hudt {
  font: 600 10px var(--body);
  fill: #fff;
}
.a-draw {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
}
.a-pop {
  transform-box: fill-box;
  transform-origin: center;
}
.sn-1 {
  animation: sn-1 8s infinite;
}
.sn-1b {
  animation: sn-1b 8s infinite;
}
.sn-2 {
  animation: sn-2 8s infinite;
}
.sn-2h,
.sn-2b {
  animation: sn-2b 8s infinite;
}
@keyframes sn-1 {
  0%,
  7.9% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  8% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  17%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  97%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes sn-1b {
  0%,
  17% {
    transform: scale(0);
  }
  20%,
  92% {
    transform: scale(1);
    opacity: 1;
  }
  97%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes sn-2 {
  0%,
  31.9% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  32% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  40%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  97%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes sn-2b {
  0%,
  40% {
    transform: scale(0);
  }
  43%,
  92% {
    transform: scale(1);
    opacity: 1;
  }
  97%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.wk-rec {
  animation: wk-rec 1.2s ease-in-out infinite alternate;
}
.wk-scroll {
  animation: wk-scroll 9s infinite;
}
.wk-laser {
  animation: wk-laser 9s infinite;
}
.wk-cursor {
  transform: translate(196px, 118px);
  animation: wk-cursor 9s infinite;
}
.wk-fill {
  animation: wk-fill 9s linear infinite;
}
.wk-t {
  fill: var(--ink);
}
.wk-t1 {
  animation: wk-t1 9s infinite;
}
.wk-t2 {
  animation: wk-t2 9s infinite;
}
.wk-t3 {
  animation: wk-t3 9s infinite;
}
.wk-k {
  transform-box: fill-box;
  transform-origin: left center;
}
.wk-k1 {
  animation: wk-k1 9s infinite;
}
.wk-k2 {
  animation: wk-k2 9s infinite;
}
.wk-k3 {
  animation: wk-k3 9s infinite;
}
@keyframes wk-rec {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}
@keyframes wk-scroll {
  0%,
  46% {
    transform: translateY(0);
  }
  60%,
  94% {
    transform: translateY(-56px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes wk-laser {
  0%,
  23.9% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  24% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  33%,
  40% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  52%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes wk-cursor {
  0% {
    transform: translate(100px, 132px);
  }
  22%,
  24% {
    transform: translate(150px, 100px);
  }
  33% {
    transform: translate(232px, 90px);
  }
  46% {
    transform: translate(238px, 128px);
  }
  60% {
    transform: translate(238px, 120px);
  }
  78%,
  94% {
    transform: translate(170px, 142px);
  }
  100% {
    transform: translate(100px, 132px);
  }
}
@keyframes wk-fill {
  0% {
    stroke-dashoffset: 1;
  }
  78%,
  94% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes wk-t1 {
  0%,
  15.6% {
    fill: #fff;
  }
  16%,
  100% {
    fill: #0a0a0a;
  }
}
@keyframes wk-t2 {
  0%,
  40.5% {
    fill: #fff;
  }
  41%,
  100% {
    fill: #0a0a0a;
  }
}
@keyframes wk-t3 {
  0%,
  67% {
    fill: #fff;
  }
  67.5%,
  100% {
    fill: #0a0a0a;
  }
}
@keyframes wk-k1 {
  0%,
  15.6% {
    opacity: 0;
    transform: translateX(-10px);
  }
  19%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes wk-k2 {
  0%,
  40.5% {
    opacity: 0;
    transform: translateX(-10px);
  }
  44%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes wk-k3 {
  0%,
  67% {
    opacity: 0;
    transform: translateX(-10px);
  }
  70.5%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
  font-size: 14px;
  color: var(--muted);
}
.facts b {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--ink);
}

/* Heading on the left, content on the right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.spec div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 24px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.spec div:first-child {
  padding-top: 4px;
  border-top: 0;
}
.spec dt {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.spec dd {
  font-size: 14.5px;
  color: var(--muted);
}

details {
  border-top: 1px solid var(--line);
}
details:first-child {
  border-top: 0;
}
summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
details:first-child summary {
  padding-top: 4px;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  font: 400 18px/1.2 var(--mono);
  color: var(--muted);
}
details[open] summary::after {
  content: "−";
}
details p {
  padding: 0 40px 17px 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* Download: the button and what happens after it, in one row. */
.dl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.price {
  margin-top: 10px;
  color: var(--muted);
}
.os-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--paper-2);
}
.os-tabs button {
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 14px;
  color: var(--muted);
}
.os-tabs button:hover {
  color: var(--ink);
}
.os-tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  font-weight: 500;
  box-shadow:
    0 0 0 1px var(--line),
    0 1px 2px rgba(0, 0, 0, 0.06);
}
.dl-panels {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}
.dl {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.dl-get {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 26px;
  background: var(--paper-3);
  border-right: 1px solid var(--line);
}
.tabbed .dl-get h3 {
  display: none;
}
/* The Linux command needs the full width. */
.dl[data-os="linux"] {
  grid-template-columns: minmax(0, 1fr);
}
.dl[data-os="linux"] .dl-get {
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.req {
  font-size: 13px;
  color: var(--muted);
}
.dl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: s;
}
.dl-steps li {
  position: relative;
  padding: 26px 24px 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  counter-increment: s;
}
.dl-steps li + li {
  border-left: 1px solid var(--line);
}
.dl-steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 12px var(--mono);
  color: var(--muted);
}
.dl-steps b {
  display: block;
  margin-bottom: 3px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dl-steps em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-2);
}
.dl-steps code,
.first-run code {
  font: 400 0.92em var(--mono);
  color: var(--ink-2);
}
.cmd {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 9px;
  background: var(--dark);
  overflow: hidden;
}
.cmd code {
  flex: 1;
  min-width: 0;
  padding: 12px 0 12px 13px;
  font: 400 12px/1.5 var(--mono);
  color: #e4e4e7;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.cmd code::-webkit-scrollbar {
  display: none;
}
.cmd button {
  flex: none;
  padding: 0 13px;
  border: 0;
  border-left: 1px solid #27272a;
  background: #1c1c1f;
  color: #e4e4e7;
  font-size: 12.5px;
  font-weight: 500;
}
.cmd button:hover {
  background: #27272a;
}
.first-run {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--muted);
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
footer .brand {
  color: var(--ink);
}

@media (max-width: 980px) {
  .hero-top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }
  h1,
  .lede,
  .keys,
  .cta {
    grid-area: auto;
  }
  .lede {
    max-width: 36em;
  }
  .cta {
    order: 3;
  }
  .keys {
    order: 4;
  }
  .works {
    order: 5;
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  /* The picture goes between the heading and the steps. While the section is pinned
     only the current step is shown under it. */
  .how-pin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 52px 0;
  }
  .how-copy {
    display: contents;
  }
  .how .scenes {
    order: 1;
    margin-top: 22px;
  }
  .how .steps {
    order: 2;
    margin-top: 24px;
  }
  .how .os-switch {
    order: 3;
    margin-left: 0;
  }
  .pinned .steps {
    min-height: 9.5em;
  }
  .pinned .steps li:not(.on) {
    display: none;
  }
  .pinned .steps li {
    padding-bottom: 0;
  }
  .pinned .steps li::before,
  .pinned .steps li::after {
    display: none;
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl-get {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
  }
  .nav nav a:not(.nav-cta) {
    display: none;
  }
  .hero {
    padding: 34px 0 30px;
  }
  .demo {
    margin-top: 32px;
  }
  .modes,
  .split,
  .download {
    padding: 52px 0;
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .mode.dict {
    grid-template-columns: minmax(0, 1fr);
  }
  .dict-art {
    order: -1;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px;
    gap: 12px;
  }
  .wave i:nth-child(n + 16) {
    display: none;
  }
  .dl-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl-steps li {
    padding: 18px 20px 18px 56px;
  }
  .dl-steps li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .dl-steps li::before {
    position: absolute;
    left: 20px;
    top: 17px;
  }
  .spec div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

@media (max-width: 520px) {
  .keys li,
  .pc .keys li {
    grid-template-columns: auto 1fr;
    column-gap: 12px;
  }
  .keys li > span {
    display: none;
  }
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .dict-art {
    flex-wrap: wrap;
  }
  .dict-arrow {
    display: none;
  }
  .prompt {
    flex-basis: 100%;
  }
  .os-switch {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .art *,
  .wave i,
  .typed {
    animation: none !important;
  }
  .mk-ink path,
  .mk-n,
  .wd {
    transition: none;
  }
}

@media print {
  .wait .ts,
  .wait .wd {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .bigkeys {
    gap: 7px;
    font-size: 17px;
  }
  .bigkeys span {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: 10px;
  }
  .cap {
    padding: 7px 10px 8px;
    font-size: 13px;
  }
  .cchip {
    font-size: 10.5px;
  }
  .composer {
    left: 5%;
    right: 5%;
    padding: 10px 12px 9px;
  }
  .pasted {
    min-height: 9.8em;
    margin-top: 8px;
    font-size: 10.5px;
  }
  .scene-note {
    bottom: 10px;
    font-size: 11.5px;
  }
}

/* Wide windows: the hero uses the whole width. Name, description, download and shortcuts
   on the left, the demo beside them, the two centred in the first screen. The bar lines up
   with the hero. Below 1360 px the demo would be too small beside the text. */
@media (min-width: 1360px) {
  .hero,
  .nav {
    --hw: min(1760px, 100vw - 96px);
    width: var(--hw);
  }
  .nav {
    margin-inline: auto;
  }
  .hero {
    margin-left: calc((100% - var(--hw)) / 2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: center;
    min-height: calc(100vh - 57px);
    min-height: calc(100svh - 57px);
    padding: 64px 0 80px;
  }
  .hero-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .hero-top > * {
    align-self: stretch;
  }
  h1 {
    align-self: flex-start;
    font-size: clamp(40px, 3vw, 60px);
  }
  .lede {
    margin-top: 22px;
    font-size: 17px;
  }
  .cta {
    order: 1;
    margin-top: 30px;
  }
  .keys {
    order: 2;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }
  .keys li,
  .pc .keys li {
    grid-template-columns: auto 1fr;
    column-gap: 16px;
  }
  .keys li > span {
    display: none;
  }
  .works {
    order: 3;
    justify-content: flex-start;
    margin-top: 28px;
  }
  .demo {
    margin-top: 0;
  }
}

/* The way into the hero video: a large Play button over its poster. */
.demo video {
  width: 100%;
  height: 100%;
}
.big-play[hidden] {
  display: none;
}
.big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 10px;
  border: 0;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  text-align: left;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.55),
    0 18px 40px -12px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.15s,
    background 0.15s;
}
.big-play:hover {
  background: var(--ink-2);
  transform: translate(-50%, -50%) scale(1.03);
}
.big-play-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red);
}
.big-play-icon svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
  fill: #fff;
}
.big-play-text {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
}
.big-play-text small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: #a1a1aa;
}
@media (max-width: 760px) {
  .big-play {
    gap: 10px;
    padding: 7px 16px 7px 7px;
  }
  .big-play-icon {
    width: 36px;
    height: 36px;
  }
  .big-play-icon svg {
    width: 16px;
    height: 16px;
  }
  .big-play-text {
    font-size: 14px;
  }
  .big-play-text small {
    display: none;
  }
}

/* A hint that the page goes on, only where the hero fills the first screen. */
.scroll-cue {
  display: none;
}
@media (min-width: 1360px) {
  .hero {
    position: relative;
  }
  .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    transition:
      opacity 0.3s,
      color 0.15s;
  }
  .scroll-cue:hover {
    color: var(--ink);
  }
  .scroll-cue svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: cue 1.8s ease-in-out infinite;
  }
  .scroll-cue.gone {
    opacity: 0;
    pointer-events: none;
  }
}
@keyframes cue {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg {
    animation: none;
  }
}