/*
  memolyz.com — one stylesheet for every page.

  Colors are the app's dark theme (src/theme/palette.js): white on black with
  one tosca accent. The site is dark only. Type is Plus Jakarta Sans, a
  typeface drawn for Jakarta's city identity, served from this site (no
  third-party font host).

  Proportion follows Fibonacci, like the app: type steps 13 · 21 · 34 · 55,
  spacing 8 · 13 · 21 · 34 · 55 · 89, radii 8 · 13 · 21, and side-by-side
  blocks split by the golden ratio (1 : 1.618). Body text is 17px on a
  1.618 line height, the one size between steps, for reading comfort.

  Motion has four jobs and no more: the opening shows a link turning into a
  note (once, with a replay button), the steps of "how it works" appear in
  order, the carousel moves when swiped, and the note map draws itself and
  lights up a note's connections when touched. Nothing loops. Visitors who ask
  for reduced motion get the finished states.
*/

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0a0a0a;
  --surface: #171717;
  --raised: #1f1f1f;
  --line: #2a2a2a;
  --text: #fafafa;
  --muted: #a3a3a3;
  --accent: #2dd4bf;
  --accent-soft: rgba(45, 212, 191, 0.1);
  --accent-line: rgba(45, 212, 191, 0.35);

  --s1: 8px;
  --s2: 13px;
  --s3: 21px;
  --s4: 34px;
  --s5: 55px;
  --s6: 89px;

  --t1: 13px;
  --t2: 21px;
  --t3: 34px;
  --t4: 55px;

  --r1: 8px;
  --r2: 13px;
  --r3: 21px;

  --page: 1144px;
  --read: 680px;
  --phi: 1.618;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: var(--phi);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

button {
  font: inherit;
  color: inherit;
}

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

.skip {
  position: absolute;
  left: var(--s2);
  top: -100px;
  padding: var(--s1) var(--s2);
  background: var(--text);
  color: var(--ink);
  border-radius: var(--r2);
  z-index: 10;
}

.skip:focus {
  top: var(--s2);
}

/* Only the sides: each block sets its own space above and below. */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s3);
  padding-right: var(--s3);
}

/* Read by screen readers, not shown. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Platform marks (Simple Icons, CC0), tinted with the app's source colors. */
.pl {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

.c-tiktok { color: #f472b6; }
.c-instagram { color: #c084fc; }
.c-youtube { color: #f87171; }
.c-x { color: #d4d4d4; }
.c-threads { color: #60a5fa; }
.c-facebook { color: #818cf8; }

/* Header: logo, and the switch to the other language. */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: var(--t2);
  letter-spacing: -0.02em;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: var(--r1);
}

.lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.lang:hover {
  background: var(--surface);
}

/* Opening: the promise on the left, a note being made on the right. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
  padding-top: var(--s4);
  padding-bottom: var(--s5);
}

.hero h1 {
  margin: 0;
  font-size: clamp(var(--t3), 9vw, var(--t4));
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.lead {
  margin: var(--s3) 0 0;
  max-width: 30em;
  font-size: 19px;
  line-height: var(--phi);
  color: var(--muted);
}

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Not a button: there is nothing to download yet, and the label says so. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 55px;
  padding: 0 var(--s3);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.soon svg {
  width: 21px;
  height: 21px;
}

.status small {
  color: var(--muted);
  font-size: 15px;
}

/* The demo: a shared link, Memolyz reading it, and the note it becomes.
   Without JavaScript (or with reduced motion) it simply shows the result. */

.demo {
  position: relative;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  width: 100%;
}

.demo-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.demo-link .src {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r1);
  background: var(--raised);
  font-size: 18px;
}

.demo-link .url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.demo-link .url small {
  display: block;
  color: var(--muted);
  font-size: var(--t1);
}

.demo-stage {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s3);
  padding-left: var(--s3);
  color: var(--muted);
  font-size: 14px;
}

.demo-stage .dots {
  display: inline-flex;
  gap: 4px;
}

.demo-stage .dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.demo-stage .labels {
  position: relative;
  display: inline-grid;
}

.demo-stage .labels span {
  grid-area: 1 / 1;
}

/* Shown when finished; the moving stages only exist while playing. */
.demo-stage .labels span:not(.done-label) {
  visibility: hidden;
}

.note {
  display: grid;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
}

.note .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: var(--t1);
}

.note h3 {
  margin: 0;
  font-size: var(--t2);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.note .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.note .chips span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--raised);
  font-size: var(--t1);
  font-weight: 600;
}

/* "Resep" in the app's recipe color. */
.note .chips .cat {
  background: rgba(251, 146, 60, 0.12);
  color: #fb923c;
}

.note .gist {
  padding: var(--s2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r2);
  background: var(--accent-soft);
}

.note .gist b,
.note .part b {
  display: block;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.note .gist p {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
}

.note .parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: var(--s2);
}

.note .part ul,
.note .part ol {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Ticked ingredients, as in the app's recipe list. */
.note .part ul li {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.note .part ul li::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid #525252;
  border-radius: 3px;
  transform: translateY(1px);
}

.note .part ul li.tick {
  color: #737373;
  text-decoration: line-through;
}

.note .part ul li.tick::before {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.note .part ol {
  counter-reset: step;
}

.note .part ol li {
  counter-increment: step;
  display: flex;
  gap: 6px;
}

.note .part ol li::before {
  content: counter(step);
  flex: none;
  color: var(--accent);
  font-weight: 800;
}

.note .script {
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}

.note .script b {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.note .script time {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.note .script p {
  margin: 6px 0 0;
  color: var(--muted);
}

.demo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--muted);
  font-size: var(--t1);
}

.replay {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.replay:hover {
  background: var(--surface);
}

.replay svg {
  width: 16px;
  height: 16px;
}

.motion .replay {
  display: inline-flex;
}

/* Before the first play the parts wait out of sight, so the finished note
   does not flash and then vanish. */
.motion .demo:not(.play) > :not(.demo-foot) {
  visibility: hidden;
}

/* Playing: each part waits for its turn (--d), then rises in. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(13px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shared {
  0% {
    opacity: 0;
    transform: translateX(-21px);
  }
  60% {
    opacity: 1;
    transform: none;
    border-color: var(--line);
  }
  100% {
    border-color: var(--accent-line);
  }
}

@keyframes stage {
  0%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
  15%,
  80% {
    opacity: 1;
    transform: none;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

.demo.play .demo-link {
  animation: shared 0.9s var(--ease) both;
}

.demo.play .demo-stage .labels span {
  visibility: visible;
  opacity: 0;
  animation: stage 0.55s var(--ease) both;
  animation-delay: calc(0.9s + var(--k) * 0.55s);
}

.demo.play .demo-stage .labels .done-label {
  animation: rise 0.4s var(--ease) both;
  animation-delay: 3.1s;
}

.demo.play .demo-stage .dots i {
  animation: blink 0.55s ease-in-out 4 both;
  animation-delay: calc(0.9s + var(--k) * 0.18s);
}

.demo.play .note,
.demo.play .note > * {
  animation: rise 0.6s var(--ease) both;
  animation-delay: calc(3.1s + var(--d, 0) * 0.14s);
}

/* Sections: 89 between unrelated blocks. */

section {
  padding-top: var(--s6);
}

.kicker {
  margin: 0 0 var(--s2);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
}

h2 {
  margin: 0;
  font-size: clamp(28px, 5.2vw, var(--t3));
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.section-lead {
  margin: var(--s2) 0 0;
  max-width: 34em;
  color: var(--muted);
  font-size: 18px;
}

/* How it works: three steps on one rail that fills in as it comes into view. */

.how {
  position: relative;
  display: grid;
  gap: var(--s4);
  margin: var(--s5) 0 0;
  padding: 0 0 0 var(--s5);
  list-style: none;
}

.how > li {
  position: relative;
}

/* The rail: one piece between each pair of numbers, stopping 8px short of
   both circles. Down the left on phones, across the top from tablet width.
   The tosca piece fills in over the grey one, step by step. */
.how > li:not(:last-child)::before,
.how > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--s5) * -1 + 16px);
  top: calc(34px + var(--s1));
  bottom: calc((var(--s4) - var(--s1)) * -1);
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}

.how > li:not(:last-child)::after {
  background: var(--accent);
  transform-origin: top;
}

.motion .how:not(.shown) > li::after {
  transform: scaleY(0);
}

.motion .how.shown > li::after {
  transition: transform 0.7s var(--ease);
  transition-delay: calc(0.3s + var(--k) * 0.35s);
}

.how .n {
  position: absolute;
  left: calc(var(--s5) * -1);
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
  font-size: var(--t1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.how h3 {
  margin: 0;
  font-size: var(--t2);
  line-height: 34px;
  letter-spacing: -0.01em;
}

.how p {
  margin: var(--s1) 0 0;
  color: var(--muted);
}

.how .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
}

.how .tags li {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t1);
  font-weight: 600;
}

/* Where links can come from: each platform's own mark. */
.how .logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t2);
}

.how .logos li {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}

.motion .how:not(.shown) > li {
  opacity: 0;
  transform: translateY(13px);
}

.motion .how.shown > li {
  animation: rise 0.6s var(--ease) both;
  animation-delay: calc(var(--k) * 0.35s);
}

/* Features: one slide per screen of the app, swiped sideways. */

.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
}

.arrows {
  display: none;
  gap: var(--s1);
  flex: none;
}

.js .arrows {
  display: flex;
}

.arrows button {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.arrows button:hover:not(:disabled) {
  background: var(--surface);
}

.arrows button:disabled {
  opacity: 0.35;
  cursor: default;
}

.arrows svg {
  width: 21px;
  height: 21px;
}

.track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-bottom: var(--s2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Bleed to the screen edge on phones so the next slide peeks in. */
  margin-left: calc(var(--s3) * -1);
  margin-right: calc(var(--s3) * -1);
  padding-left: var(--s3);
  padding-right: var(--s3);
  scroll-padding-left: var(--s3);
}

.track::-webkit-scrollbar {
  display: none;
}

/* Stacked on a narrow phone; from 480px the screen and its words share the
   slide 1 : 1.618, so there is no empty column beside the screenshot. */
.slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  align-content: start;
  scroll-snap-align: start;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
  transition: border-color 0.3s, opacity 0.3s;
}

.js .slide:not(.current) {
  opacity: 0.55;
}

.js .slide.current {
  border-color: var(--accent-line);
}

.slide .shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
  background: #0a0a0a;
}

/* A narrow phone shows the top of the screen, at full width. */
.slide .shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}

.slide .num {
  margin: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.slide h3 {
  margin: 4px 0 0;
  font-size: var(--t2);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.slide p {
  margin: var(--s1) 0 0;
  color: var(--muted);
}

.slide .points {
  display: grid;
  gap: var(--s1);
  margin: var(--s3) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 15px;
}

.slide .points li {
  display: flex;
  gap: var(--s1);
}

.slide .points li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.65em;
  border-radius: 50%;
  background: var(--accent);
}

.dots-nav {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s2);
}

.js .dots-nav {
  display: flex;
}

/* A dot marks a real state: which slide is in view. */
.dots-nav button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.dots-nav button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: width 0.3s var(--ease), background 0.3s;
}

.dots-nav button[aria-current="true"]::before {
  width: 21px;
  background: var(--accent);
}

/* The note map: the real one, drawn when it comes into view. Touching a
   note or a tag lights up what it connects to, as in the app. */

.map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}

.map figure {
  margin: 0;
}

.map-box {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: radial-gradient(100% 80% at 55% 45%, #141414 0%, var(--ink) 75%);
  overflow: hidden;
}

.map-svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.map-svg path {
  fill: none;
  stroke-linecap: round;
  transition: opacity 0.3s, stroke-width 0.3s;
}

.map-svg .e-link {
  stroke-width: 1.6;
  opacity: 0.5;
}

.map-svg .e-tag {
  stroke-width: 1;
  stroke-dasharray: 2 5;
  opacity: 0.14;
}

.map-svg .n-note,
.map-svg .n-tag {
  cursor: pointer;
  transition: opacity 0.3s;
  outline: none;
}

.map-svg .dot {
  stroke: var(--ink);
  stroke-width: 2.5;
  transition: transform 0.3s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}

.map-svg .halo {
  opacity: 0.6;
  pointer-events: none;
}

.map-svg .n-tag rect {
  fill: var(--ink);
  stroke: #3a3a3a;
  stroke-width: 1;
  transition: stroke 0.3s;
}

.map-svg .n-tag text {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  font-family: inherit;
}

/* Focus on one note or tag: its connections stay, the rest steps back. */
.map-svg.focused .n-note,
.map-svg.focused .n-tag,
.map-svg.focused path {
  opacity: 0.12;
}

.map-svg.focused .on {
  opacity: 1;
}

.map-svg.focused path.on {
  opacity: 0.95;
  stroke-width: 2.4;
}

.map-svg .n-note.self .dot {
  transform: scale(1.25);
}

.map-svg .n-tag.self rect,
.map-svg .n-tag:focus-visible rect {
  stroke: var(--accent);
}

.map-svg .n-note:focus-visible .dot {
  stroke: var(--accent);
}

/* What the touched note or tag connects to, in words. */
.map-info {
  position: absolute;
  left: var(--s2);
  bottom: var(--s2);
  max-width: calc(100% - 26px);
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.92);
  border: 1px solid var(--line);
  font-size: var(--t1);
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}

.map-info:empty {
  display: none;
}

/* Waiting to be drawn: only when the script will draw it. */
.motion .map:not(.shown) .map-svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.motion .map:not(.shown) .map-svg .n-note,
.motion .map:not(.shown) .map-svg .n-tag {
  opacity: 0;
}

.motion .map.shown .map-svg .n-note,
.motion .map.shown .map-svg .n-tag {
  animation: appear 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 34ms);
}

.motion .map.shown .map-svg .e-link {
  stroke-dasharray: 1;
  animation: draw 0.9s var(--ease) both;
  animation-delay: calc(0.55s + var(--i) * 34ms);
}

.motion .map.shown .map-svg .e-tag {
  animation: appear 0.9s var(--ease) both;
  animation-delay: calc(0.55s + var(--i) * 34ms);
}

/* Once drawn, focus must be able to dim things again. */
.motion .map.drawn .map-svg * {
  animation: none;
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.legend .pl {
  font-size: 16px;
}

.legend .tag-key {
  width: 21px;
  height: 13px;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
}

.map-hint {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: 15px;
}

.map figcaption {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: var(--t1);
}

/* Everything else, as a plain list: smaller than the flagship on purpose. */

.more {
  display: grid;
  grid-template-columns: 1fr;
  margin: var(--s4) 0 0;
  border-top: 1px solid var(--line);
}

.more div {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

.more dt {
  font-weight: 700;
  font-size: 18px;
}

.more dd {
  margin: 4px 0 0;
  color: var(--muted);
}

/* Privacy in short, and the close. */

.own {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r3);
}

.own ul {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding-left: 1.2em;
}

.own p {
  margin: 0;
}

.own .own-link {
  margin-top: var(--s3);
}

.close {
  padding-bottom: var(--s6);
}

.close h2 {
  font-size: clamp(var(--t3), 7vw, var(--t4));
  line-height: 1.1;
}

.close p {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: 18px;
}

/* Footer: the pages Memolyz really has. */

.foot {
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  color: var(--muted);
  font-size: 15px;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin-bottom: var(--s2);
}

.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.foot nav a:hover {
  text-decoration: underline;
}

.foot p {
  margin: 0;
}

/* Legal pages: one readable column. */

.doc {
  max-width: var(--read);
  padding-top: var(--s4);
  padding-bottom: var(--s6);
}

.doc h1 {
  margin: 0;
  font-size: clamp(28px, 6vw, var(--t3));
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.doc .updated {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: 15px;
}

.doc .summary {
  margin: var(--s4) 0 0;
  padding: var(--s3);
  border-radius: var(--r2);
  background: var(--surface);
}

.doc .summary p {
  margin: 0;
}

.doc .summary ul {
  margin: var(--s1) 0 0;
  padding-left: 1.2em;
}

.doc h2 {
  margin-top: var(--s5);
  font-size: var(--t2);
}

.doc h3 {
  margin: var(--s3) 0 0;
  font-size: 18px;
}

.doc p,
.doc li {
  max-width: 40em;
}

.doc ul,
.doc ol {
  padding-left: 1.3em;
}

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

.doc .steps li {
  margin-top: var(--s1);
}

.doc table {
  width: 100%;
  margin-top: var(--s3);
  border-collapse: collapse;
  font-size: 15px;
}

.doc th,
.doc td {
  padding: var(--s1) var(--s2) var(--s1) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc th {
  font-weight: 700;
}

.not-found {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

@media (min-width: 480px) {
  .slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    align-items: center;
  }

  .slide .shot img {
    aspect-ratio: auto;
  }
}

/* Tablet and up: golden-ratio columns where content sits side by side. */

@media (min-width: 760px) {
  .wrap {
    padding-left: var(--s4);
    padding-right: var(--s4);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s5);
    padding-top: var(--s5);
    padding-bottom: var(--s6);
  }

  .demo {
    justify-self: end;
    max-width: 466px;
  }

  .how {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s5);
    padding: var(--s5) 0 0;
  }

  .how > li:not(:last-child)::before,
  .how > li:not(:last-child)::after {
    left: calc(34px + var(--s1));
    right: calc((var(--s5) - var(--s1)) * -1);
    top: calc(var(--s5) * -1 + 16px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .how > li:not(:last-child)::after {
    transform-origin: left;
  }

  .motion .how:not(.shown) > li::after {
    transform: scaleX(0);
  }

  .how .n {
    left: 0;
    top: calc(var(--s5) * -1);
  }

  .track {
    grid-auto-columns: min(80%, 754px);
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-padding-left: 0;
  }

  .slide {
    gap: var(--s4);
    padding: var(--s4);
  }

  .slide h3 {
    font-size: 26px;
  }

  .map {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    gap: var(--s5);
  }

  .more {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s5);
  }

  .own {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    align-items: start;
    padding: var(--s5);
  }
}

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