/* The "Save-This" website: one stylesheet for the home page and the privacy policy.
   Light by default, dark when the system asks for it. No framework, no build step.

   The look: one ink on a stone paper, the red S as the only accent, and the product's own
   screens as the pictures. Page surfaces are told apart by tone, never by lines or shadows;
   inside a picture of the product ([data-ui]) the product's own borders and menus apply. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* the page */
  --bg: #f5f5f3;
  --field: #e7e7e2;
  --ink: #0b0b0c;
  --muted: #5c5c57;
  --band: #0b0b0c;
  --band-ink: #f5f5f3;
  --btn-quiet: #e4e4df;
  --btn-quiet-hover: #d9d9d3;
  --btn-hover: #2a2a2d;
  --red: #dc2626;

  /* the product's screens, drawn the way the extension draws them */
  --ui-bg: #ffffff;
  --ui-fg: #09090b;
  --ui-muted: #6b6b74;
  --ui-soft: #f4f4f5;
  --ui-line: #e4e4e7;
  --ui-input: #d4d4d8;
  --ui-sel: #e8f0fe;
  --ui-chip: #f4f4f5;
  --ui-pop: 0 14px 32px -12px rgb(9 9 11 / 0.3), 0 2px 6px rgb(9 9 11 / 0.08);

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace; /* taste-skill-ignore: only for <code> */

  /* five sizes */
  --fs-small: 0.875rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.1875rem, 1.06rem + 0.42vw, 1.4375rem);
  --fs-head: clamp(2.125rem, 1.25rem + 2.7vw, 3.5rem);
  --fs-display: 5.25rem;

  /* the frame: one centred column, the same margin on both sides */
  --gutter: 16px;
  --max: 1240px;
  --gap: clamp(16px, 2.2vw, 32px);
  --cols-gap: clamp(40px, 4.4vw, 72px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;

  color-scheme: light;
}
@media (min-width: 600px) { :root { --gutter: clamp(32px, 5vw, 48px); } }
@media (min-width: 960px) { :root { --gutter: max(48px, 5vw); } }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --field: #151517;
    --ink: #f2f2ef;
    --muted: #a6a6a0;
    --band: #222226;
    --band-ink: #f2f2ef;
    --btn-quiet: #222226;
    --btn-quiet-hover: #2c2c31;
    --btn-hover: #dcdcd8;

    --ui-bg: #0e0e10;
    --ui-fg: #fafafa;
    --ui-muted: #a1a1aa;
    --ui-soft: #1c1c1f;
    --ui-line: #27272a;
    --ui-input: #3f3f46;
    --ui-sel: #1e2a3d;
    --ui-chip: #27272a;
    --ui-pop: 0 16px 36px -12px rgb(0 0 0 / 0.85), 0 2px 6px rgb(0 0 0 / 0.5);

    color-scheme: dark;
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; hyphens: none; }
p { text-wrap: pretty; }

::selection { background: var(--red); color: #ffffff; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; }
}

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

/* The app's name in a sentence: bold, in double quotes. */
strong.name { font-weight: 650; white-space: nowrap; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 10px;
  z-index: 20;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- the S mark, drawn ---------- */

.mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--red);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  font-stretch: 100%;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
}

/* ---------- the store badges: Google's own files, only resized ---------- */

/* --bh is the height of each badge. The Chrome badge's file is its own frame. The Play badge's file
   carries its clear space (a quarter of its height) round the black badge, so the file is drawn
   larger and pulled back by that much: the black badge is --bh tall, as tall as the Chrome badge,
   and the space between the two is at least that quarter. */
.badges { --bh: clamp(44px, calc((100cqi - 18px) / 6.7), 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px max(18px, calc(var(--bh) * 0.32)); margin-top: 36px; }
.store { --bh: 52px; }
.badge {
  display: inline-flex;
  flex: none;
  border-radius: 8px;
  line-height: 0;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), opacity var(--t-hover) ease;
}
.badge img { display: block; width: auto; max-width: none; height: var(--bh); }
.badge-play img { height: calc(var(--bh) * 250 / 168); margin: calc(var(--bh) * -41 / 168); }
.badge[href]:not([href="#"]):active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .badge[href]:not([href="#"]):hover { transform: translateY(-2px); }
}
/* Not in the store yet (href "#", empty, or removed by site.js): Google's badge is not drawn, a quiet
   "Coming soon" stands in its place and it is no link. With a real address the badge shows. */
.badge-soon { display: none; }
.badge:is([href="#"], [href=""], :not([href])) { cursor: default; }
.badge:is([href="#"], [href=""], :not([href])) img { display: none; }
.badge:is([href="#"], [href=""], :not([href])) .badge-soon {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  background: var(--field);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1;
  white-space: nowrap;
}

/* ---------- the frame ---------- */

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- the home page's top: the S mark and the name, small, and the menu ---------- */

.mast-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: clamp(20px, 2.4vw, 32px);
}
.mast-mark { width: 24px; height: 24px; }
.mast-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}

/* ---------- the privacy page's bar: the name, and the menu ---------- */

.site-head { position: relative; z-index: 2; }
.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-decoration: none;
}
.brand img { width: 28px; height: 28px; }

/* The menu: How to save and How to find, two plain links on the right, on the name's line at every
   width. The last link's words end on the right margin, as the name starts on the left one. */
.site-nav { display: flex; align-items: center; gap: 2px; margin-right: -12px; }
.site-nav a {
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { background: var(--btn-quiet); }
}
@media (max-width: 419.98px) {
  .site-nav { margin-right: -8px; }
  .site-nav a { padding-inline: 8px; font-size: var(--fs-small); }
}
/* the narrowest phones: the privacy page's name and menu still share one line */
@media (max-width: 359.98px) {
  .head-in { gap: 8px; }
  .head-in .brand { gap: 8px; }
  .head-in .brand img { width: 24px; height: 24px; }
  .site-nav { margin-right: -6px; }
  .site-nav a { padding-inline: 6px; font-size: 0.8125rem; }
}

/* On the home page the menu is at the name's small size. */
.mast-nav { margin-left: auto; }
.mast-nav a { padding-block: 8px; font-size: var(--fs-small); }

/* ---------- the opening: the words, and the demonstration beside them ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 40px 72px; }
.hero-text { container-type: inline-size; }

.hero h1 {
  font-size: clamp(2.375rem, 12.8cqi, var(--fs-display));
  font-weight: 600;
  font-stretch: 78%;
  line-height: 0.96;
  letter-spacing: -0.038em;
  margin-left: -0.04em;
}
.lines .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; white-space: nowrap; }

.lead {
  max-width: 34ch;
  margin-top: 28px;
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.note { max-width: 46ch; margin-top: 22px; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--cols-gap);
    align-items: start;
    padding-block: 40px 56px;
  }
  /* the words hold the middle of what the first screen has left under the mark; the
     demonstration may run on below it */
  .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(calc(100svh - 24px - 180px), 760px);
  }
}

/* a picture's caption */
.stage-cap {
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
  text-align: center;
}

/* ---------- Your saves live in your Google Drive ---------- */

.where { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 64px; }
.where h2, .ways h2, .find h2 {
  font-size: var(--fs-head);
  font-weight: 600;
  font-stretch: 82%;
  line-height: 1;
  letter-spacing: -0.032em;
}
.where h2 { max-width: 13ch; }
.section-lead { max-width: 38ch; margin-top: 20px; font-size: var(--fs-lead); line-height: 1.4; }

.facts { display: grid; gap: 28px; margin-top: 44px; max-width: 40rem; }
.facts dt { font-weight: 650; letter-spacing: -0.01em; }
.facts dd { margin-top: 4px; }
.facts > div { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 16px; }
.facts > div::before {
  content: "";
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  margin-top: 0.5em;
  border-radius: 3px;
  background: var(--ink);
}

/* the folder in your Drive, on a field of stone */
.drive-fig {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: clamp(24px, 4vw, 56px) clamp(14px, 3vw, 48px) clamp(18px, 3vw, 36px);
  background: var(--field);
}

@media (min-width: 960px) {
  /* the picture on the left this time, the words on the right */
  .where { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--cols-gap); align-items: center; padding-top: 72px; }
  .where-text { grid-column: 2; grid-row: 1; }
  .drive-fig { grid-column: 1; grid-row: 1; align-self: stretch; }
  .where h2 { max-width: 12ch; }
}

/* ---------- the demonstration: View my saves, searched ---------- */

.demo { display: grid; justify-items: center; gap: 14px; min-width: 0; margin: 0; }

.demo-frame[data-ui] {
  container: frame / inline-size;
  position: relative;
  width: 100%;
  max-width: 760px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-size: 15px;
  line-height: 1.4;
}

.demo-bar { display: flex; align-items: center; gap: 14px; }

.demo-brand {
  display: none;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

[data-ui] .demo-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ui-input);
  border-radius: 9px;
  background: var(--ui-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
[data-ui] .demo-search.is-focus { border-color: var(--ui-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-muted) 22%, transparent); }
.demo-search > svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ui-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.demo-field {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
}
.demo-caret {
  flex: none;
  width: 1.5px;
  height: 1.15em;
  margin: 0 1px;
  background: var(--ui-fg);
  animation: blink 1.1s steps(1, end) infinite;
}
.demo-ph { color: var(--ui-muted); }
.demo-typed:not(:empty) ~ .demo-ph { display: none; }
.is-typing .demo-caret { animation: none; }
.is-paused .demo-caret { animation-play-state: paused; }

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

.demo-meta { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 2px; }
.demo-chosen { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.demo-count {
  margin-left: auto;
  color: var(--ui-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.count-final, .n-narrow { display: none; }

.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px 0 11px;
  border-radius: 999px;
  background: var(--ui-fg);
  color: var(--ui-bg);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  animation: chip-in 0.32s var(--ease-out);
  transition: opacity 0.16s, transform 0.16s;
}
.chip i { font-size: 15px; font-style: normal; line-height: 1; opacity: 0.6; }
.chip.is-leaving { opacity: 0; transform: scale(0.85); }
.chip-static { display: none; animation: none; }

/* the chosen tags on the narrowest phones */
@container frame (max-width: 278px) { .chip { gap: 3px; padding: 0 6px 0 8px; font-size: 12px; } }
@keyframes chip-in { from { opacity: 0; transform: translateY(-6px) scale(0.86); } }

.demo-body { container-type: inline-size; }

.demo-grid {
  --cols: 2;
  --g: 8px;
  --tile-w: calc((100cqi - (var(--cols) - 1) * var(--g)) / var(--cols));
  /* the preview at the real card's 1.91 : 1, then the words under it */
  --pic-h: calc(var(--tile-w) / 1.91);
  --body-h: 122px;
  --tile-h: calc(var(--pic-h) + 1px + var(--body-h) + 2px);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-content: start;
  gap: var(--g);
  /* Three rows whatever the filter leaves, so nothing around the picture moves. */
  min-height: calc(3 * var(--tile-h) + 2 * var(--g));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A tile is a card of View my saves: the photo, the title, the site's icon and address, the tags,
   the comment. */
[data-ui] .tile {
  display: flex;
  flex-direction: column;
  height: var(--tile-h);
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-bg);
  transition: opacity 0.24s ease, transform 0.6s var(--ease-expo);
}
.tile.is-out { opacity: 0; transform: scale(0.94); }

[data-ui] .tile-pic { position: relative; flex: none; height: var(--pic-h); overflow: hidden; border-bottom: 1px solid var(--ui-line); background: var(--ui-soft); }
.tile-pic img { width: 100%; height: 100%; object-fit: cover; }
/* a reel: the play button over its frame */
[data-ui] .tile-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.8);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
}
.tile-play svg { width: 20px; height: 20px; fill: #09090b; }

.tile-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  padding: 9px 11px 10px;
}
.tile-title {
  display: -webkit-box;
  flex: none;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* the site: its own icon and its address, as View my saves shows them */
.tile-site {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.tile-site > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tile-site img, .tile-glyph { flex: none; width: 16px; height: 16px; }
.tile-site img { border-radius: 3px; }
.tile-glyph { fill: none; stroke: var(--ui-muted); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Tags that do not fit drop to a hidden second line: only whole tags show. */
.tile-tags { display: flex; flex: none; flex-wrap: wrap; gap: 4px; height: 20px; margin-top: 1px; overflow: hidden; }
[data-ui] .tag {
  flex: none;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--ui-chip);
  color: var(--ui-fg);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-ui] .tag.is-hit { background: var(--ui-fg); color: var(--ui-bg); }
/* the comment the person added: one line, cut short when it is long */
.tile-note {
  flex: none;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 18px;
  height: 27px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.95s var(--ease-in-out), opacity 0.25s;
}
.demo-pointer.is-on { opacity: 1; }
.demo-pointer svg { transform-origin: 2px 2px; transition: transform 0.12s; }
.demo-pointer.is-press svg { transform: scale(0.82); }

.demo-ripple {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.demo-ripple.is-on { animation: ripple 0.6s var(--ease-out); }

@keyframes ripple {
  from { opacity: 0.9; transform: var(--at) scale(0.3); }
  to { opacity: 0; transform: var(--at) scale(1.5); }
}

.demo-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.demo-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 550;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.demo-toggle:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .demo-toggle:hover { background: var(--btn-quiet); }
}
.demo-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.demo-toggle .i-play, .demo-toggle[data-paused] .i-pause { display: none; }
.demo-toggle[data-paused] .i-play { display: block; }

/* Phones: six saves in two columns. Wider: nine in three. */
@media (max-width: 639.98px) {
  .tile[data-wide] { display: none; }
  .tile-body { padding-inline: 9px; }
  [data-ui] .tag { padding: 0 6px; }
  .n-wide { display: none; }
  .n-narrow { display: inline; }
}
@media (min-width: 640px) {
  .demo-frame[data-ui] { padding: 16px; }
  .demo-brand { display: inline-flex; }
  .demo-grid { --cols: 3; --g: 10px; }
}

/* narrow tiles (under about 160px, then 135px): smaller tags, so the three of a trip still fit.
   The grid is the container; three columns from 640px, two below. */
@media (min-width: 640px) {
  @container (max-width: 500px) { .tile-body { padding-inline: 8px; } .tile-title { font-size: 13px; } [data-ui] .tag { padding: 0 5px; font-size: 10px; } .tile-note, .tile-site { font-size: 11px; } }
  @container (max-width: 425px) { .tile-tags { gap: 3px; } [data-ui] .tag { padding: 0 4px; font-size: 9.5px; } }
}
@media (max-width: 639.98px) {
  @container (max-width: 328px) { .tile-body { padding-inline: 8px; } .tile-title { font-size: 13px; } [data-ui] .tag { padding: 0 5px; font-size: 10px; } .tile-note, .tile-site { font-size: 11px; } [data-ui] .tile-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; } .tile-play svg { width: 17px; height: 17px; } }
  @container (max-width: 278px) { .tile-tags { gap: 3px; } [data-ui] .tag { padding: 0 3px; font-size: 9px; } .tile-site { gap: 4px; } }
}

/* Without motion: the end of the search, held still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo .tile:not([data-final]) { display: none; }
  .chip-static { display: inline-flex; }
  .count-live { display: none; }
  .count-final { display: inline; }
  .demo-caret { animation: none; }
  .demo-pointer, .demo-ripple, .demo-toggle { display: none; }
  [data-ui] .tile[data-final] .tag { background: var(--ui-fg); color: var(--ui-bg); }
}

/* ---------- the Drive ---------- */

.drive { display: grid; justify-items: center; width: min(100%, 470px); }
.drive-devs { display: grid; grid-template-columns: 1fr 1fr; gap: 20%; width: 78%; }
@media (max-width: 479.98px) { .drive-devs, .drive-pipes { width: 100%; } .drive-devs { gap: 16%; } }
.dev[data-ui] {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.dev svg, .dw-top svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the two lines from the devices meet and go down to the Drive: filled bars, not rules */
.drive-pipes { position: relative; width: 78%; height: 44px; }
.drive-pipes span { position: absolute; background: var(--muted); border-radius: 2px; }
.p-l, .p-r { top: 0; width: 4px; height: 22px; }
.p-l { left: calc((100% - 20%) / 4 - 2px); }
.p-r { right: calc((100% - 20%) / 4 - 2px); }
.p-x { top: 18px; left: calc((100% - 20%) / 4 - 2px); right: calc((100% - 20%) / 4 - 2px); height: 4px; }
.p-d { top: 18px; left: calc(50% - 2px); width: 4px; height: 26px; }

.dw[data-ui] {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-size: 13px;
  line-height: 1.3;
}
.dw-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; font-size: 16px; }
.dw-top b { font-weight: 600; }
[data-ui] .dw-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 92px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border-top: 1px solid var(--ui-line);
}
.dw-row > span:not(.dw-name) { color: var(--ui-muted); }
[data-ui] .dw-cols { min-height: 32px; border-top: 0; color: var(--ui-muted); font-size: 12px; }
.dw-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; white-space: nowrap; }
.dw-name svg { flex: none; width: 18px; height: 18px; }
.dw-name .fold { fill: var(--ui-muted); }
.dw-name .file { fill: none; stroke: var(--ui-muted); stroke-width: 1.6; stroke-linejoin: round; }
.dw-row.is-sel { background: var(--ui-sel); }
.dw-row.is-sel .dw-name { font-weight: 650; }
.dw-row.is-sel .fold { fill: var(--red); }
@media (min-width: 960px) {
  .drive { width: min(100%, 600px); }
  .dw[data-ui] { font-size: 14px; }
  .dw-top { padding: 18px 20px 12px; font-size: 17px; }
  [data-ui] .dw-row { grid-template-columns: minmax(0, 1fr) 72px 120px; min-height: 50px; padding: 0 20px; }
  [data-ui] .dw-cols { min-height: 36px; font-size: 13px; }
  .dev[data-ui] { padding: 16px 10px 14px; font-size: 14px; }
}
@media (max-width: 419.98px) {
  [data-ui] .dw-row { grid-template-columns: minmax(0, 1fr) 40px 64px; gap: 6px; padding: 0 12px; }
}

/* ---------- How to save: four cards ---------- */

/* A dark band; in it the heading, its line, and the four cards in two columns (one on a phone).
   Each card is a field of stone: the drawing on top, then its heading and its sentence. */
.ways {
  margin-top: 120px;
  padding: 72px clamp(24px, 4vw, 64px) clamp(24px, 4vw, 64px);
  background: var(--band);
  color: var(--band-ink);
}
.ways h2 { max-width: 14ch; }
.ways-lead { max-width: 38ch; margin-top: 20px; font-size: var(--fs-lead); line-height: 1.4; }

.way-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.way {
  container: card / inline-size;
  display: flex;
  flex-direction: column;
  background: var(--field);
  color: var(--ink);
}
.way > h3 {
  padding: 6px clamp(20px, 2.4vw, 32px) 0;
  font-size: var(--fs-lead);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.way > p { max-width: 42ch; padding: 8px clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 34px); }
.way .ui { font-weight: 650; }

@media (min-width: 700px) {
  .way-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  /* a band inside the frame */
  .ways { margin-top: 152px; padding-top: 88px; }
  .way-grid { margin-top: 56px; }
}
@media (max-width: 899.98px) {
  /* the band runs the full width; its words keep the page's margin */
  .ways.wrap { width: auto; padding-inline: var(--gutter); }
}

/* ---------- the drawings in the cards ---------- */

/* Each drawing is laid out on a canvas --dw units wide and 380 high, and one unit (--u) is the
   card's width divided by --dw: the whole drawing scales with its card and fills it at any width.
   A narrow card uses a narrower canvas, so the drawing is not shrunk as far. */
.way-pic {
  --dw: 520;
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--dw) / 380;
  overflow: hidden;
}
@container card (max-width: 469.98px) {
  .way-pic { --dw: 400; }
}

.fx {
  --u: calc(100cqi / var(--dw));
  --ui-hover: color-mix(in srgb, var(--ui-fg) 9%, var(--ui-bg));
  position: absolute;
  inset: 0;
  color: var(--ui-fg);
  font-size: calc(13 * var(--u));
  line-height: 1.35;
}
.fx svg { display: block; }
.fx .chip { animation: none; }

/* the pointer, the ring of a click and the touch of a finger */
.fx-cur {
  position: absolute;
  z-index: 4;
  width: calc(16 * var(--u));
  height: calc(24 * var(--u));
  pointer-events: none;
  transform-origin: 10% 6%;
}
.fx-cur svg { width: 100%; height: 100%; fill: #09090b; stroke: #ffffff; stroke-width: 1.4; stroke-linejoin: round; }
.fx-rip {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  margin: calc(-15 * var(--u)) 0 0 calc(-15 * var(--u));
  border: calc(2 * var(--u)) solid var(--red);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.fx-tap {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  margin: calc(-17 * var(--u)) 0 0 calc(-17 * var(--u));
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-fg) 26%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* A page: the browser, its toolbar with the S, and the pop-up open on the page */
[data-ui] .br {
  position: absolute;
  inset: calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: calc(12 * var(--u));
  background: var(--ui-bg);
}
.br-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  background: var(--ui-soft);
}
.br-nav { display: flex; gap: calc(6 * var(--u)); }
.br-nav svg, .br-ext svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  fill: none;
  stroke: var(--ui-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.br-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: calc(5 * var(--u)) calc(11 * var(--u));
  border-radius: 999px;
  background: var(--ui-bg);
  color: var(--ui-muted);
  font-size: calc(11.5 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-ui] .mark-tb {
  position: relative;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(6 * var(--u));
  font-size: calc(14 * var(--u));
}
/* the ring of the S once it is clicked */
.mark-tb::after, .s-btn::after {
  content: "";
  position: absolute;
  inset: calc(-5 * var(--u));
  border: calc(2 * var(--u)) solid var(--red);
  border-radius: calc(10 * var(--u));
}
.mark-tb .fx-cur, .s-btn .fx-cur { top: calc(50% + 4 * var(--u)); left: calc(50% + 2 * var(--u)); }
.br-page { position: relative; flex: 1; overflow: hidden; }
.br-hero { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the pop-up's form; the panel of the S button on a post is the same form */
[data-ui] .pp {
  position: absolute;
  width: calc(250 * var(--u));
  padding: calc(11 * var(--u));
  border: 1px solid var(--ui-line);
  border-radius: calc(12 * var(--u));
  background: var(--ui-bg);
  box-shadow: var(--ui-pop);
}
.fx-pop .pp { top: calc(8 * var(--u)); right: calc(10 * var(--u)); transform-origin: 92% 0; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.pp-brand { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 650; }
[data-ui] .pp-brand .mark { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(11 * var(--u)); }
.pp-x { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: var(--ui-muted); stroke-width: 2; stroke-linecap: round; }
.pp-page {
  display: flex;
  gap: calc(9 * var(--u));
  margin-top: calc(10 * var(--u));
  padding: calc(7 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--ui-soft);
}
.pp-thumb { flex: none; width: calc(50 * var(--u)); height: calc(38 * var(--u)); overflow: hidden; border-radius: calc(5 * var(--u)); }
.pp-txt { display: grid; align-content: start; gap: calc(2 * var(--u)); min-width: 0; }
.pp-txt b {
  display: -webkit-box;
  overflow: hidden;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pp-txt i { overflow: hidden; color: var(--ui-muted); font-size: calc(10.5 * var(--u)); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.pp-label { margin: calc(9 * var(--u)) 0 calc(5 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; line-height: 1.2; }
[data-ui] .pp-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4 * var(--u));
  min-height: calc(30 * var(--u));
  padding: calc(4 * var(--u));
  border: 1px solid var(--ui-input);
  border-radius: calc(8 * var(--u));
}
.pp-input .chip { gap: calc(4 * var(--u)); height: calc(21 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(11 * var(--u)); }
.pp-input .chip i { font-size: calc(12 * var(--u)); }
.pp-caret { width: 1.5px; height: calc(14 * var(--u)); margin-left: calc(2 * var(--u)); background: var(--ui-fg); }
[data-ui] .pp-text { padding: calc(6 * var(--u)) calc(9 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.3; }
.pp-save {
  display: grid;
  place-items: center;
  height: calc(30 * var(--u));
  margin-top: calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--ui-fg);
  color: var(--ui-bg);
  font-size: calc(12 * var(--u));
  font-weight: 600;
}

/* A post: the post in a feed with the S button in its row, and the panel open beside it */
[data-ui] .po {
  position: absolute;
  top: calc(44 * var(--u));
  left: calc(16 * var(--u));
  width: 53%;
  border: 1px solid var(--ui-line);
  border-radius: calc(12 * var(--u));
  background: var(--ui-bg);
}
.po-head { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)); }
.po-ava {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: #d4521f;
  color: #ffffff;
  font-size: calc(10 * var(--u));
  font-weight: 700;
}
.po-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.po-who b { overflow: hidden; font-size: calc(12 * var(--u)); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.po-who i { color: var(--ui-muted); font-size: calc(10.5 * var(--u)); font-style: normal; }
.po-more { display: flex; gap: calc(3 * var(--u)); }
.po-more i { width: calc(3.5 * var(--u)); height: calc(3.5 * var(--u)); border-radius: 50%; background: var(--ui-muted); }
.po-text { padding: 0 calc(12 * var(--u)) calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.35; }
.po-pic { width: 100%; height: calc(166 * var(--u)); }
.po-acts {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: calc(5 * var(--u)) calc(6 * var(--u));
  color: var(--ui-muted);
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
}
.po-acts > span:not(.s-btn) { padding: calc(6 * var(--u)) calc(4.5 * var(--u)); white-space: nowrap; }
.s-btn {
  position: relative;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: calc(5 * var(--u));
  border-radius: calc(8 * var(--u));
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
[data-ui] .s-btn .mark { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(11.5 * var(--u)); }
.s-btn::after { inset: calc(-3 * var(--u)); }
/* the panel opens beside the post, its foot level with the S button; on a narrow card it opens
   over the post's far side, as it does on a narrow screen */
.fx-post .pp { right: calc(16 * var(--u)); bottom: calc(46 * var(--u)); width: calc(198 * var(--u)); padding: calc(10 * var(--u)); transform-origin: 0 100%; }
.fx-post .pp-thumb { width: calc(44 * var(--u)); height: calc(33 * var(--u)); }
@container card (max-width: 469.98px) {
  [data-ui] .po { top: calc(30 * var(--u)); left: calc(18 * var(--u)); width: 58%; }
  .fx-post .pp { top: calc(14 * var(--u)); bottom: auto; width: calc(206 * var(--u)); transform-origin: 25% 100%; }
}

/* A picture: right-clicked, the menu open where the pointer was, Save this picture chosen */
.mn-pic {
  position: absolute;
  top: calc(30 * var(--u));
  left: calc(30 * var(--u));
  width: 70%;
  height: calc(316 * var(--u));
  overflow: hidden;
  border-radius: calc(10 * var(--u));
}
[data-ui] .mn {
  position: absolute;
  top: calc(150 * var(--u));
  left: 42%;
  display: grid;
  width: calc(200 * var(--u));
  padding: calc(5 * var(--u));
  border: 1px solid var(--ui-line);
  border-radius: calc(10 * var(--u));
  background: var(--ui-bg);
  box-shadow: var(--ui-pop);
  transform-origin: 0 0;
}
.mn > span {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(26 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  font-size: calc(11.5 * var(--u));
  white-space: nowrap;
}
[data-ui] .mn .mn-sep { height: 1px; margin: calc(4 * var(--u)) calc(2 * var(--u)); padding: 0; border-radius: 0; background: var(--ui-line); }
.mn .is-ours { background: var(--ui-hover); font-weight: 600; }
[data-ui] .mn .mark { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); font-size: calc(10 * var(--u)); }
/* the right-click lands just above the menu's corner; the pointer then rests on Save this picture */
.fx-menu > .fx-rip { top: calc(147 * var(--u)); left: calc(42% - 3 * var(--u)); }
.fx-menu > .fx-cur { top: calc(281.5 * var(--u)); left: calc(42% + 73.5 * var(--u)); }

/* Your phone: Share tapped, the share sheet up, Save-This picked in it */
[data-ui] .ph {
  position: absolute;
  top: calc(12 * var(--u));
  left: 50%;
  width: calc(226 * var(--u));
  height: calc(356 * var(--u));
  margin-left: calc(-113 * var(--u));
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: calc(30 * var(--u));
  background: var(--ui-bg);
}
.ph-top { display: flex; align-items: center; height: calc(24 * var(--u)); padding: calc(4 * var(--u)) calc(20 * var(--u)) 0; font-size: calc(9.5 * var(--u)); font-weight: 600; }
.ph-bar { display: flex; align-items: center; gap: calc(6 * var(--u)); margin: calc(2 * var(--u)) calc(10 * var(--u)) 0; }
.ph-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: var(--ui-soft);
  color: var(--ui-muted);
  font-size: calc(9.5 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ph-share { position: relative; display: grid; place-items: center; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.ph-share svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: var(--ui-fg); stroke-width: 1.8; stroke-linecap: round; }
.ph-page { padding: calc(10 * var(--u)) calc(12 * var(--u)) 0; }
.ph-pic { width: 100%; height: calc(100 * var(--u)); overflow: hidden; border-radius: calc(8 * var(--u)); }
.ph-page b { display: block; margin-top: calc(9 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 650; line-height: 1.2; }
.ph-scrim { position: absolute; inset: 0; background: rgb(9 9 11 / 0.3); }
[data-ui] .ph-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u)) calc(18 * var(--u)) 0 0;
  background: var(--ui-bg);
  box-shadow: var(--ui-pop);
}
.ph-grab { display: block; width: calc(30 * var(--u)); height: calc(4 * var(--u)); margin: 0 auto calc(10 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--ui-input); }
.ph-link { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-bottom: calc(10 * var(--u)); }
.ph-link svg { flex: none; width: calc(42 * var(--u)); height: calc(32 * var(--u)); overflow: hidden; border-radius: calc(5 * var(--u)); }
.ph-link span { display: grid; min-width: 0; line-height: 1.25; }
.ph-link b { overflow: hidden; font-size: calc(11 * var(--u)); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ph-link i { color: var(--ui-muted); font-size: calc(9.5 * var(--u)); font-style: normal; }
[data-ui] .ph-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(2 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid var(--ui-line); }
.ph-app { display: grid; justify-items: center; gap: calc(6 * var(--u)); font-size: calc(9 * var(--u)); line-height: 1.2; text-align: center; white-space: nowrap; }
.ph-ic { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--ui-soft); }
.ph-ic svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); fill: none; stroke: var(--ui-muted); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
[data-ui] .mark-app { position: relative; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(19 * var(--u)); }
.mark-app::after {
  content: "";
  position: absolute;
  inset: calc(-4 * var(--u));
  border: calc(2 * var(--u)) solid var(--red);
  border-radius: calc(13 * var(--u));
}
.ph-app.is-ours { font-weight: 650; }

/* ---------- the drawings, played ----------
   Without script, or with reduced motion, each drawing above is its result. With script, site.js
   adds .is-anim to the section and .is-running to a card while it is on screen. Each card then
   loops: the action (the pointer comes in and clicks, or a finger taps), the result, a hold, and
   back to the start. The right-hand cards run a little behind the left. */
@media (prefers-reduced-motion: no-preference) {
  .ways.is-anim .way { --play: paused; }
  .ways.is-anim .way.is-running { --play: running; }
  .ways.is-anim .way:nth-child(even) { --lag: 0.9s; }

  .ways.is-anim .fx-cur,
  .ways.is-anim .fx-rip,
  .ways.is-anim .fx-tap,
  .ways.is-anim .fx .pp,
  .ways.is-anim .mn,
  .ways.is-anim .mn .is-ours,
  .ways.is-anim .ph-scrim,
  .ways.is-anim .ph-sheet,
  .ways.is-anim .mark-tb::after,
  .ways.is-anim .s-btn::after,
  .ways.is-anim .mark-app::after {
    animation-duration: 7s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
    animation-delay: var(--lag, 0s);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-play-state: var(--play, paused);
  }

  .ways.is-anim .fx-pop .fx-cur { animation-name: pop-cur; }
  .ways.is-anim .fx-post .fx-cur { animation-name: post-cur; }
  .ways.is-anim .fx-menu .fx-cur { animation-name: menu-cur; }
  .ways.is-anim .fx-pop .fx-rip,
  .ways.is-anim .fx-post .fx-rip { animation-name: press-rip; }
  .ways.is-anim .fx-menu .fx-rip { animation-name: menu-rip; }
  .ways.is-anim .mark-tb::after,
  .ways.is-anim .s-btn::after { animation-name: press-ring; }
  .ways.is-anim .fx .pp { animation-name: result-in; }
  .ways.is-anim .mn { animation-name: menu-in; }
  .ways.is-anim .mn .is-ours { animation-name: menu-pick; }
  .ways.is-anim .ph-share .fx-tap { animation-name: tap-share; }
  .ways.is-anim .ph-scrim { animation-name: scrim-in; }
  .ways.is-anim .ph-sheet { animation-name: sheet-up; }
  .ways.is-anim .mark-app .fx-tap { animation-name: tap-app; }
  .ways.is-anim .mark-app::after { animation-name: app-ring; }
}

/* A page and a post: the pointer comes in, clicks the S, the form opens and holds. */
@keyframes pop-cur {
  0%, 6% { opacity: 0; translate: calc(-170 * var(--u)) calc(190 * var(--u)); }
  12% { opacity: 1; }
  30% { translate: 0 0; scale: 1; }
  33% { scale: 0.8; }
  37% { scale: 1; }
  86% { opacity: 1; }
  93%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes post-cur {
  0%, 6% { opacity: 0; translate: calc(-150 * var(--u)) calc(-125 * var(--u)); }
  12% { opacity: 1; }
  30% { translate: 0 0; scale: 1; }
  33% { scale: 0.8; }
  37% { scale: 1; }
  86% { opacity: 1; }
  93%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes press-rip {
  0%, 32% { opacity: 0; scale: 0.3; }
  33% { opacity: 0.9; scale: 0.3; }
  46%, 100% { opacity: 0; scale: 1.7; }
}
@keyframes press-ring {
  0%, 32% { opacity: 0; }
  35%, 87% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes result-in {
  0%, 34% { opacity: 0; scale: 0.94; }
  42%, 87% { opacity: 1; scale: 1; }
  94%, 100% { opacity: 0; scale: 1; }
}

/* A picture: the pointer comes onto it and right-clicks, the menu opens, the pointer goes down to
   Save this picture and it lights up. */
@keyframes menu-cur {
  0%, 6% { opacity: 0; translate: calc(45 * var(--u)) calc(-29 * var(--u)); }
  12% { opacity: 1; }
  28% { translate: calc(-78 * var(--u)) calc(-136 * var(--u)); scale: 1; }
  31% { scale: 0.8; }
  35% { scale: 1; }
  44% { translate: calc(-78 * var(--u)) calc(-136 * var(--u)); }
  54% { translate: 0 0; }
  86% { opacity: 1; }
  93%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes menu-rip {
  0%, 30% { opacity: 0; scale: 0.3; }
  31% { opacity: 0.9; scale: 0.3; }
  44%, 100% { opacity: 0; scale: 1.7; }
}
@keyframes menu-in {
  0%, 32% { opacity: 0; scale: 0.96; }
  37%, 87% { opacity: 1; scale: 1; }
  94%, 100% { opacity: 0; scale: 1; }
}
@keyframes menu-pick {
  0%, 51% { background-color: transparent; }
  54%, 100% { background-color: var(--ui-hover); }
}

/* Your phone: a tap on Share, the sheet slides up, a tap on Save-This and it is ringed. */
@keyframes tap-share {
  0%, 24% { opacity: 0; scale: 0.5; }
  26% { opacity: 1; scale: 0.6; }
  36%, 100% { opacity: 0; scale: 1.5; }
}
@keyframes scrim-in {
  0%, 28% { opacity: 0; }
  38%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes sheet-up {
  0%, 28% { translate: 0 105%; }
  40%, 88% { translate: 0 0; }
  96%, 100% { translate: 0 105%; }
}
@keyframes tap-app {
  0%, 52% { opacity: 0; scale: 0.5; }
  54% { opacity: 1; scale: 0.6; }
  64%, 100% { opacity: 0; scale: 1.5; }
}
@keyframes app-ring {
  0%, 54% { opacity: 0; }
  57%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* ---------- How to find your saves ---------- */

/* The words, then the drawing on a field of stone: from 960px the browser and the phone side by side
   on one field, each part's words above its drawing; below that, one under the other, each on its own
   field. --fp is the field's padding round a drawing, --phw the phone's width. */
.find {
  --fp: clamp(16px, 3.4vw, 48px);
  --phw: 236px;
  padding-top: 112px;
}
.find h2 { max-width: 18ch; }
.find-grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
.find-part h3 { font-size: var(--fs-lead); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.find-part p { max-width: 54ch; margin-top: 8px; }
.find-ph-text { margin-top: 56px; }
.find-pic { display: grid; min-width: 0; margin-top: 24px; padding: var(--fp); background: var(--field); }
.find-ph { justify-items: center; }

@media (min-width: 960px) {
  .find { --phw: clamp(220px, 18.4vw, 264px); padding-top: 152px; }
  .find-head { padding-inline: var(--fp); }
  .find-grid {
    grid-template-columns: minmax(0, 1fr) calc(var(--phw) + 2 * var(--fp));
    grid-template-areas: "pct pht" "pcp php";
    margin-top: 48px;
  }
  /* one field behind both drawings */
  .find-grid::before { content: ""; grid-row: 2; grid-column: 1 / -1; background: var(--field); }
  .find-pc-text { grid-area: pct; padding: 0 var(--fp) 32px; }
  .find-ph-text { grid-area: pht; margin-top: 0; padding: 0 0 32px var(--fp); }
  .find-pic { margin-top: 0; background: none; }
  .find-pc { grid-area: pcp; padding-right: 0; }
  .find-ph { grid-area: php; }
}

/* The browser: its tabs, the page with the S in the toolbar, the pop-up, and the new tab with View my
   saves. Drawn at a real window's size (--u is one pixel), so its cards are the demonstration's own.
   --sx/--sy and --lx/--ly place the S and the pop-up's View my saves from the window's top right
   corner, where both are anchored at every width: the pointer travels between them. */
.fb[data-ui] {
  --u: 1px;
  --ui-hover: color-mix(in srgb, var(--ui-fg) 9%, var(--ui-bg));
  --sx: calc(23 * var(--u));
  --sy: calc(34px + 20 * var(--u));
  --lx: calc(11px + 47.6 * var(--u));
  --ly: calc(81px + 20 * var(--u));
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-fg) 8%, var(--ui-bg));
  color: var(--ui-fg);
  font-size: 13px;
  line-height: 1.35;
}
.fb svg { display: block; }
.fb .chip { animation: none; }
/* on the narrowest phones the window's own parts are drawn a little smaller, so the pop-up fits */
@media (max-width: 359.98px) { .fb[data-ui] { --u: 0.88px; } }
@media (min-width: 600px) { .fb[data-ui] { aspect-ratio: 4 / 3; } }
/* beside the phone, the window is as tall as the phone */
@media (min-width: 960px) { .fb[data-ui] { aspect-ratio: auto; } }

.fb-tabs { display: flex; flex: none; align-items: flex-end; gap: 2px; height: 34px; padding: 0 8px; }
.fb-tab {
  display: flex;
  flex: 0 1 176px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px 8px 0 0;
  color: var(--ui-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.fb-tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fb-fav { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ui-muted); stroke-width: 1.3; stroke-linecap: round; }
[data-ui] .fb-tab .mark { width: 14px; height: 14px; border-radius: 4px; font-size: 9px; }
/* at rest the new tab is open and in front */
.fb-tab-2 { background: var(--ui-soft); color: var(--ui-fg); }

.fb-views { position: relative; flex: 1; min-height: 0; }
.fb-view { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--ui-bg); }
.fb-view-2 { z-index: 2; }
.fb[data-ui] .br-url b { margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--ui-input); color: var(--ui-fg); font-weight: 600; }
.fb .mark-tb::after { opacity: 0; }
/* the page the person is on: its picture, and its title under it */
.fb .br-page { display: flex; flex-direction: column; }
.fb .br-hero { position: static; flex: 1; min-height: 0; height: auto; }
.fb-page-t { flex: none; padding: 16px 20px 20px; font-size: clamp(16px, 2vw, 24px); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }

/* the pop-up hangs under the S, View my saves in its corner */
.fb .pp { top: 80px; right: 10px; z-index: 3; opacity: 0; transform-origin: 92% 0; }
.pp-link {
  color: var(--ui-muted);
  font-size: calc(11 * var(--u));
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--ui-input);
  text-underline-offset: 3px;
}

/* the pointer rests on View my saves; the rings of its two clicks */
.fb > .fx-cur { top: var(--ly); left: calc(100% - var(--lx)); z-index: 5; opacity: 0; }
.fb > .fx-rip { z-index: 4; }
.fb-rip-s { top: var(--sy); left: calc(100% - var(--sx)); }
.fb-rip-l { top: var(--ly); left: calc(100% - var(--lx)); }

/* View my saves: the search box, the tag row, the count and the cards */
.vms-page { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 14px 14px 0; }
.vms-top { display: flex; align-items: center; gap: 14px; }
.vms .demo-brand { display: inline-flex; flex: none; padding-left: 2px; }
[data-ui] .vms .demo-search { max-width: 440px; height: 36px; }
.vms-tags { display: flex; flex: none; flex-wrap: wrap; gap: 6px; height: 26px; margin-top: 12px; overflow: hidden; }
[data-ui] .vms-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.vms-chip i { color: var(--ui-muted); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.vms-count { flex: none; margin: 10px 2px 8px; color: var(--ui-muted); font-size: 12px; line-height: 16px; }
.vms-body { container: vms / inline-size; flex: 1; min-height: 0; }
.vms .demo-grid, .fp .demo-grid { --g: 10px; min-height: 0; }
.vms .demo-grid { --cols: 2; }
@container vms (min-width: 480px) { .vms .demo-grid { --cols: 3; } }

/* The phone: the app's own View my saves, the cards in one column */
.fp[data-ui] {
  display: flex;
  flex-direction: column;
  width: var(--phw);
  aspect-ratio: 1 / 2.08;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 30px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font-size: 13px;
  line-height: 1.35;
}
.fp-status { flex: none; height: 26px; padding: 9px 24px 0; font-size: 10px; font-weight: 600; line-height: 1; }
.fp-bar { display: flex; flex: none; align-items: center; gap: 12px; height: 40px; padding: 0 14px; }
.fp-brand { display: inline-flex; flex: 1; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
[data-ui] .fp-brand .mark { width: 20px; height: 20px; border-radius: 6px; font-size: 12px; }
.fp-sync { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ui-fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fp-ava { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ui-input); }
.fp-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 2px 12px 0;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ui-soft);
  color: var(--ui-muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.fp-search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ui-muted); stroke-width: 2; stroke-linecap: round; }
.fp-tags { margin: 10px 12px 0; }
.fp-list { flex: 1; min-height: 0; overflow: hidden; padding: 0 12px; }
/* one column as wide as the phone's list: the cards need no container of their own */
.fp .demo-grid { --cols: 1; --tile-w: calc(var(--phw) - 26px); }

/* ---------- How to find, played ----------
   Without script, or with reduced motion, the drawing is its end: the new tab open in front, View my
   saves in it. With script, site.js adds .is-anim to the section, and .is-running while it is on
   screen and the tab is visible. One loop of 12 seconds: the pointer comes in and clicks the S, the
   pop-up opens, the pointer clicks View my saves, the pop-up closes and the new tab slides in; it
   holds while the phone's list scrolls down and back; the tab closes and it starts again. */
@media (prefers-reduced-motion: no-preference) {
  .find.is-anim { --play: paused; }
  .find.is-anim.is-running { --play: running; }

  .find.is-anim .fb > .fx-cur,
  .find.is-anim .fb > .fx-rip,
  .find.is-anim .fb .pp,
  .find.is-anim .pp-link,
  .find.is-anim .fb-tab,
  .find.is-anim .fb-view-2,
  .find.is-anim .fb-view-1 .mark-tb::after,
  .find.is-anim .fp-scroll {
    animation-duration: 12s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-play-state: var(--play, paused);
  }

  .find.is-anim .fb > .fx-cur { animation-name: find-cur; }
  .find.is-anim .fb > .fb-rip-s { animation-name: find-rip-s; }
  .find.is-anim .fb > .fb-rip-l { animation-name: find-rip-l; }
  .find.is-anim .fb-view-1 .mark-tb::after { animation-name: find-ring; }
  .find.is-anim .fb .pp { animation-name: find-pop; }
  .find.is-anim .pp-link { animation-name: find-link; }
  .find.is-anim .fb-tab-1 { animation-name: find-tab-page; }
  .find.is-anim .fb-tab-2 { animation-name: find-tab-new; }
  .find.is-anim .fb-view-2 { animation-name: find-view; }
  .find.is-anim .fp-scroll { animation-name: find-scroll; }
}

/* the pointer: from the page up to the S, a click, across to View my saves, a click, and away */
@keyframes find-cur {
  0%, 4% { opacity: 0; translate: calc(var(--lx) - var(--sx) - 190px) calc(var(--sy) - var(--ly) + 230px); }
  9% { opacity: 1; }
  20% { translate: calc(var(--lx) - var(--sx)) calc(var(--sy) - var(--ly)); scale: 1; }
  22% { scale: 0.8; }
  25% { scale: 1; }
  29% { translate: calc(var(--lx) - var(--sx)) calc(var(--sy) - var(--ly)); }
  38% { translate: 0 0; scale: 1; }
  40% { scale: 0.8; }
  43% { scale: 1; }
  48% { opacity: 1; }
  54%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes find-rip-s {
  0%, 21.9% { opacity: 0; scale: 0.3; }
  22% { opacity: 0.9; scale: 0.3; }
  32%, 100% { opacity: 0; scale: 1.7; }
}
@keyframes find-rip-l {
  0%, 39.9% { opacity: 0; scale: 0.3; }
  40% { opacity: 0.9; scale: 0.3; }
  50%, 100% { opacity: 0; scale: 1.7; }
}
@keyframes find-ring {
  0%, 22% { opacity: 0; }
  25%, 43% { opacity: 1; }
  47%, 100% { opacity: 0; }
}
@keyframes find-pop {
  0%, 23% { opacity: 0; scale: 0.94; }
  30%, 43% { opacity: 1; scale: 1; }
  47%, 100% { opacity: 0; scale: 1; }
}
@keyframes find-link {
  0%, 35% { color: var(--ui-muted); text-decoration-color: var(--ui-input); }
  37%, 100% { color: var(--ui-fg); text-decoration-color: currentColor; }
}
/* the page's tab is in front, then behind the new tab, then in front again when the new tab closes */
@keyframes find-tab-page {
  0%, 44% { background-color: var(--ui-soft); color: var(--ui-fg); }
  47%, 91% { background-color: transparent; color: var(--ui-muted); }
  95%, 100% { background-color: var(--ui-soft); color: var(--ui-fg); }
}
@keyframes find-tab-new {
  0%, 43% { opacity: 0; translate: -12px 0; }
  48%, 90% { opacity: 1; translate: 0 0; }
  94%, 100% { opacity: 0; translate: 0 0; }
}
/* while it waits beside the window the new tab is not drawn at all */
@keyframes find-view {
  0%, 44% { visibility: hidden; opacity: 1; translate: 101% 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  45%, 90% { visibility: visible; }
  56%, 90% { opacity: 1; translate: 0 0; }
  95% { opacity: 0; translate: 0 0; }
  96%, 100% { visibility: hidden; opacity: 0; translate: 101% 0; }
}
@keyframes find-scroll {
  0%, 54% { translate: 0 0; }
  68%, 80% { translate: 0 -28%; }
  94%, 100% { translate: 0 0; }
}

/* ---------- Get the app: the line about one Google account, and the two stores ---------- */

.get { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 112px 128px; }
/* with no heading above it, the line opens the section at a statement's size */
.get-lead {
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
  font-weight: 550;
  letter-spacing: -0.02em;
  line-height: 1.22;
}
.stores { display: grid; gap: 48px; }
.store { display: grid; align-content: start; justify-items: start; gap: 10px; }
.store h3 { font-size: var(--fs-lead); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.store .badge { margin-block: 16px 8px; }

@media (min-width: 760px) {
  .stores { grid-template-columns: 1fr 1fr; gap: var(--gap); }
}
@media (min-width: 960px) {
  .get { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cols-gap); align-items: start; padding-block: 152px 152px; }
}

/* ---------- footer: one quiet line ---------- */

.site-foot { padding-bottom: 32px; font-size: var(--fs-small); }
.foot-in { display: grid; gap: 10px; padding-top: 28px; }
.site-foot .brand { font-size: 1rem; }
.site-foot .brand img { width: 24px; height: 24px; }
.foot-line { color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-legal { display: grid; gap: 2px; margin-top: 14px; color: var(--muted); font-size: 0.8125rem; }
@media (min-width: 760px) {
  .foot-in { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .foot-line { text-align: center; }
  .foot-links { justify-content: flex-end; }
  .foot-legal { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- motion: arrivals, once ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-line] { transform: translateY(105%); animation: line-up 0.9s var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * 110ms); }
  .js :is(.mast, .hero) [data-load] { opacity: 0; transform: translateY(14px); animation: rise 0.6s var(--ease-out) forwards; animation-delay: var(--d); }
  .js .hero .demo { clip-path: inset(0 0 100% 0); animation: open 1.05s var(--ease-in-out) 0.1s forwards; }
  .js .hero .demo-frame { transform: translateY(28px) scale(0.985); animation: settle 1.2s var(--ease-expo) 0.3s forwards; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-expo); transition-delay: var(--rd, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes open { to { clip-path: inset(0); } }
@keyframes settle { to { transform: none; } }

/* ---------- the privacy policy ---------- */

.doc { padding-block: 40px 120px; }
.doc-top { max-width: 44rem; }
.doc h1 {
  font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem);
  font-weight: 600;
  font-stretch: 78%;
  letter-spacing: -0.038em;
  line-height: 0.96;
  margin-left: -0.04em;
}
.updated { margin-top: 18px; color: var(--muted); font-size: var(--fs-small); }
.summary {
  margin-top: 40px;
  padding: 28px 28px 30px;
  background: var(--field);
  font-size: var(--fs-lead);
  line-height: 1.42;
}
.doc-sec { padding-top: 56px; }
.doc h2 {
  font-size: var(--fs-lead);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.doc-body { max-width: 44rem; }
.doc-body > * + * { margin-top: 14px; }
.doc h2 + .doc-body { margin-top: 14px; }
.doc ul, .doc ol { display: grid; gap: 10px; margin-bottom: 0; padding-left: 1.25em; }
.doc li::marker { color: var(--muted); }
.doc a { overflow-wrap: anywhere; }
.ui { font-weight: 650; }
.doc code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--field);
  font-family: var(--mono);
  font-size: 0.85em;
}

/* On a wide screen the policy takes the home page's two columns: the title and the summary hold
   still on the left while the sections are read on the right. */
@media (min-width: 900px) {
  .doc { padding-top: 48px; }
  .doc-in {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--cols-gap);
    align-items: start;
  }
  .doc-top { position: sticky; top: 24px; }
  .doc-secs { padding-top: 14px; }
  .doc-sec { padding-top: 0; }
  .doc-sec + .doc-sec { padding-top: 52px; }
}