/* Synomy Notes — the site. One stylesheet for every page.

   Two halves. The first is the page itself: type, the night, the bar, the range,
   the download card. The second is the mockup system: every picture of the app
   on these pages is HTML and CSS built from the app's own numbers (chrome.css,
   theme.css, editor.css), scaled with one unit — `--u`, one app pixel — so a
   window drawn at 1100 app pixels wide fits whatever column it is put in and
   still has a 44px bar, 28px chips and a 720px page at full size.

   `calc(var(--u) * n)` in the source is `calc(var(--u) * n)`; site.src.css is expanded into
   site.css by a one-line substitution (see site/README.md). */

/* The world: one night, all the way down. Every page sits on the same black,
   lit from below by the crystal range out of the icon, so moving between
   sections and pages never crosses a colour edge. Text is white on black;
   anything that holds controls is frosted ice over the dark. */
:root {
  --night: #020306;
  --ice: #8fc8ff;
  --ice-deep: #2f7bff;
  --frost: rgba(170, 210, 255, .055);
  --frost-2: rgba(170, 210, 255, .09);
  --rim: rgba(190, 225, 255, .14);

  /* The old light names, now pointing at the dark palette, so every rule that
     says "ink" or "cloud" follows without being rewritten. */
  --sky-900: #b9dcff;
  --sky-700: #8fc8ff;
  --sky-500: #5aa6ff;
  --sky-200: rgba(143, 200, 255, .16);
  --cloud: var(--frost);
  --cloud-2: rgba(170, 210, 255, .035);
  --white: #ffffff;

  --ink: #f2f6fb;
  --ink-2: rgba(222, 234, 248, .70);
  --ink-3: rgba(210, 226, 244, .46);
  --line: rgba(190, 220, 255, .12);

  --display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* The app's own face is the system's: SF on a Mac, Segoe on Windows, Inter
     where neither exists. The mockups use the same stack so a visitor sees the
     app the way it would look on their own computer. */
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, sans-serif;

  --gut: clamp(20px, 5vw, 56px);
  /* The fixed bar's height. Under 900px it grows a second row, the page tabs,
     and everything placed under the bar follows. */
  --bar-h: 62px;
  --measure: 1120px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); -webkit-text-size-adjust: 100%; background: var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}
/* The air: a few cold glows, fixed to the window and climbing slowly as the page
   scrolls (site.js writes --p, 0 at the top and 1 at the end), so going down the
   page feels like moving through one place rather than past bands of colour. */
body::before {
  content: ""; position: fixed; left: -10vw; right: -10vw; top: -20vh; height: 160vh; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40vw 30vh at 18% 30%, rgba(47, 123, 255, .13), transparent 70%),
    radial-gradient(46vw 34vh at 84% 58%, rgba(90, 166, 255, .10), transparent 70%),
    radial-gradient(60vw 40vh at 40% 96%, rgba(30, 90, 220, .14), transparent 70%);
  transform: translate3d(0, calc(var(--p, 0) * -40vh), 0);
}
/* Grain, so the gradients on black do not band. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: rgba(143, 200, 255, .32); color: #fff; }

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

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gut); }

/* Frosted ice: the one surface on these pages. */
.glass, .why-card, .skycard, .plats, .pop, .aside, .pick {
  background: linear-gradient(180deg, rgba(170, 210, 255, .085), rgba(170, 210, 255, .03));
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 90px -50px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

/* Reveal on scroll: a thing arrives out of the haze, not just up from below.
   Only when scripting is on, so nothing is ever hidden without it. */
.js .rv {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rv.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Everything that loops is stilled while its section is off screen. */
.pz, .pz *, .pz *::before, .pz *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- Bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: var(--ink);
  transition: background-color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.bar.is-stuck {
  background: rgba(3, 5, 9, .52);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--line);
}
.bar-in {
  display: flex; align-items: center; gap: 28px;
  height: 62px; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gut);
}
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(190, 225, 255, .16), 0 4px 18px -4px rgba(47, 123, 255, .55); }
.mark span { font-family: var(--display); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
.nav { display: flex; gap: 24px; margin-left: 14px; }
.nav a {
  font-size: 14.5px; font-weight: 500; text-decoration: none; opacity: .66;
  transition: opacity .2s ease; white-space: nowrap;
}
.nav a:hover, .nav a.here { opacity: 1; }
.nav a.here { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-decoration-color: var(--ice); }
.bar-sp { flex: 1; }
.ver {
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink-2);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rim);
  white-space: nowrap;
}
.bar .btn-bar {
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.bar.is-stuck .btn-bar, .bar.ink .btn-bar { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: 16px; line-height: 1;
  text-decoration: none; padding: 16px 24px; border-radius: 12px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background-color .2s ease, color .2s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* The one bright thing on a page: white ice, catching blue light underneath. */
.btn-light { background: #fff; color: #06101c; box-shadow: 0 10px 40px -12px rgba(90, 166, 255, .65); }
.btn-light:hover { box-shadow: 0 14px 50px -10px rgba(90, 166, 255, .85); }
.btn-ink { background: #fff; color: #06101c; }
.btn-ink:hover { background: #e6f1ff; }
.btn-sky { background: var(--ice-deep); color: #fff; }
.btn-sky:hover { background: #4b8eff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rim); }
.btn-ghost:hover { border-color: rgba(190, 225, 255, .4); }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: 9px; }
.bar .btn-bar { background: #fff; color: #06101c; box-shadow: none; }
.btn-text {
  font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .4); color: var(--ink);
}
.btn-text:hover { text-decoration-color: currentColor; }
.more {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ice);
  text-decoration: none; margin-top: 18px; font-size: 16.5px;
}
.more svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.more:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transform: none; } }

/* ---------------------------------------------------------------- The community
   Suggestions and bug reports left the app with D47 and live on Discord now,
   so the two pages a visitor reads say so in large, just before the download:
   a headline the size of a chapter's, one sentence, and the one button. The
   invite is the same link everywhere (README, "The community"). */
.community { padding-top: clamp(104px, 13vw, 176px); text-align: center; }
.community h2 {
  font-size: clamp(40px, 6.4vw, 92px); line-height: .96; letter-spacing: -.045em; font-weight: 700;
  max-width: 18ch; margin: 0 auto 26px; text-wrap: balance;
}
.community h2 span { display: block; }
.community p { font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; margin: 0 auto; }
.community .asks { margin: 18px auto 40px; font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.community .asks span + span::before { content: "·"; margin: 0 10px; color: var(--ice); }
.btn-lg { padding: 20px 30px; font-size: 18px; border-radius: 14px; gap: 12px; }
.btn-lg svg { width: 24px; height: 24px; }
.community .fine { display: block; margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.community .fine a { color: var(--ink-2); text-underline-offset: 3px; }
@media (max-width: 640px) {
  /* Wrapped, a dot would start a line: the words stand apart on their own. */
  .community .asks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
  .community .asks span + span::before { content: none; }
  .btn-lg { padding: 18px 24px; font-size: 17px; }
}

/* ---------------------------------------------------------------- The scenes
   Every picture of the world is art from the image model that drew the icon
   (site/art/), cut by tools/cut-art.py into pieces whose black is transparent,
   so a scene lies on the night with no box around it. A scene is an
   <img class="scene">; the section it stands in decides where it goes. */
.hero {
  position: relative; isolation: isolate;
  /* Clipped at the sides only: the range sinks past the foot of the hero as the
     page moves, and a clip there would draw a line across the night. */
  overflow: hidden; overflow: clip visible;
  background: transparent; color: var(--ink);
  padding-top: calc(var(--bar-h) + 66px);
}
/* The glow behind the range, gone before the foot of the section, and the night
   above it. Neither paints the foot: anything opaque there would hide the ice
   at the edges behind a straight line. */
.sky {
  position: absolute; inset: 0; z-index: -4; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 78%, rgba(40, 110, 255, .30), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.sky-tint {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, var(--night) 0%, rgba(2, 3, 6, .6) 16%, rgba(2, 3, 6, 0) 34%);
}
.scene {
  display: block; max-width: none; height: auto; pointer-events: none; user-select: none;
  /* A piece is cut square to the art; its sides dissolve here, so no screen is
     wide enough to show where a picture stops. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
/* The range under a hero: in the flow under the type, wider than the window,
   sinking slower than the page once it starts to move. */
.hero .range {
  position: relative; z-index: -3;
  /* The sides, and the foot, which melts into the chapter below. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 62%, transparent);
  mask-composite: intersect;
  width: var(--range-w, min(1600px, 112vw));
  margin: var(--range-top, 0) 0 0 50%;
  transform: translate3d(-50%, calc(var(--sy, 0) * .2px), 0);
  animation: scenein 2.2s var(--ease) .1s both;
  will-change: transform;
}
@keyframes scenein { from { opacity: 0; filter: blur(16px); } }

/* A passage between two chapters: a scene the page goes through, coming
   closer while it crosses the window (site.js writes --e). */
.interlude { position: relative; margin-top: clamp(40px, 6vw, 90px); pointer-events: none; overflow: hidden; overflow: clip visible; }
.interlude .scene {
  width: min(1500px, 124vw); margin-left: 50%;
  transform: translate3d(-50%, 0, 0) scale(calc(.9 + var(--e, .5) * .34));
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, transparent);
  mask-image: radial-gradient(closest-side, #000 42%, transparent);
}

/* A crystal over a feature's headline, hanging in the air of the place. */
.emblem {
  display: block; width: auto; height: clamp(104px, 11vw, 158px); margin: 0 auto clamp(16px, 2vw, 26px);
  animation: hang 7s ease-in-out infinite alternate;
}
@keyframes hang { to { translate: 0 -9px; } }

.hero-in { position: relative; text-align: center; }
.hero-icon {
  width: 96px; height: 96px; margin: 0 auto 26px; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(190, 225, 255, .18), 0 24px 60px -18px rgba(47, 123, 255, .75);
  animation: rise .9s var(--ease) both;
}
h1.hero-h {
  font-size: clamp(38px, 6vw, 76px);
  line-height: .98; letter-spacing: -.035em; font-weight: 700;
  max-width: 26ch; margin: 0 auto 28px;
}
/* White at the top of a letter, ice at its foot: the type stands in the same
   light as the range. */
h1.hero-h span {
  display: block; animation: rise .9s var(--ease) both;
  background: linear-gradient(180deg, #ffffff 35%, #b8dcff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1.hero-h span:nth-child(2) { animation-delay: .07s; }
h1.hero-h span:nth-child(3) { animation-delay: .14s; }
.hero-lede {
  font-size: clamp(17px, 1.55vw, 20px); line-height: 1.5;
  color: var(--ink-2); max-width: 50ch; margin: 0 auto 34px;
  animation: rise .9s var(--ease) .16s both;
}
.hero-cta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px;
  animation: rise .9s var(--ease) .26s both;
}
.hero-meta {
  display: block; margin-top: 18px; font-size: 13.5px; color: var(--ink-3);
  animation: rise .9s var(--ease) .32s both;
  min-height: 1.4em;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero-shot {
  position: relative; margin: clamp(36px, 4vw, 52px) auto 0;
  max-width: 1100px; padding-inline: var(--gut);
}
.shot-move {
  transform-origin: 50% 0;
  animation: shotin 1.2s var(--ease) .2s both;
  will-change: transform;
}
@keyframes shotin {
  from { opacity: 0; transform: translateY(90px) scale(.95); }
  to   { opacity: 1; }
}
.shot-fade {
  position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: -2px; height: 46%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 3, 6, 0), var(--night) 82%);
}
.hero-tail { height: clamp(40px, 6vw, 90px); }
@media (prefers-reduced-motion: reduce) {
  .scene, .emblem, .hero-icon, h1.hero-h span, .hero-lede, .hero-cta, .hero-meta, .shot-move { animation: none; }
  .hero .range { transform: translate3d(-50%, 0, 0); }
  .shot-move { transform: none; }
  .shot-fade { opacity: .55; }
}

/* ---------------------------------------------------------------- Sections */
.sec { padding-top: clamp(96px, 12vw, 156px); }
.txt h2 {
  font-size: clamp(31px, 3.7vw, 48px); line-height: 1.04; letter-spacing: -.03em;
  margin-bottom: 22px; text-wrap: balance; max-width: 18ch;
}
.txt p { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.txt p + p { margin-top: 14px; }
.vis { position: relative; min-width: 0; container-type: inline-size; }

/* A section stacked: what it is, then the picture of it, full width. The text
   never runs taller than the window beside it, because there is no beside. */
.stack { display: grid; justify-items: center; text-align: center; gap: clamp(30px, 4.5vw, 58px); }
.stack .txt { max-width: 64ch; }
.stack .txt h2 { max-width: 20ch; margin-inline: auto; }
.stack .txt p { max-width: 56ch; margin-inline: auto; }
.stack .vis { width: 100%; text-align: left; }
.stack .vis .app { margin-inline: auto; }
.centre { text-align: center; }
.centre h2, .centre p { margin-inline: auto; }
.centre .txt h2 { max-width: 24ch; }
.centre .txt p { max-width: 58ch; }

/* A feature beside its window: a headline and a sentence on one side, a window
   drawn smaller on the other, middles aligned, sides taking turns. The copy is
   short enough never to run taller than the window it stands beside, which is
   what sank the two columns of September (they were paragraphs). */
.pair { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.pair.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.pair.flip > .txt { order: 2; }
.pair .txt h2 { max-width: 14ch; }
.pair .txt p { max-width: 36ch; }
.pair .emblem { margin: 0 0 clamp(14px, 1.6vw, 22px); height: clamp(84px, 8vw, 118px); }
.pair .vis .app { margin-inline: 0; }
.pair.flip .vis .app { margin-left: auto; }

/* A band used to be a lighter stripe. On the night it is only a pool of light
   behind its content, with no edge to cross. */
.band {
  position: relative;
  margin-top: clamp(96px, 12vw, 156px);
  padding: clamp(80px, 9vw, 130px) 0 clamp(72px, 8vw, 110px);
}
.band::before, .next::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%, rgba(47, 123, 255, .10), transparent 75%);
}

/* ---------------------------------------------------------------- Chapters
   index.html: a large statement on the left, one sentence on the
   right, one plain picture underneath at full width. */
.ch { padding-top: clamp(104px, 13vw, 176px); }
.ch-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
.ch-head h2 {
  font-size: clamp(36px, 5.2vw, 72px); line-height: .98; letter-spacing: -.04em; font-weight: 700;
  max-width: 15ch; text-wrap: balance;
}
.ch-head p { font-size: clamp(17.5px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.ch-head p + p { margin-top: 12px; }
.ch-vis { margin-top: clamp(44px, 6vw, 88px); }
.ch-fine { margin-top: 26px; font-size: 15px; color: var(--ink-3); max-width: 60ch; }
.ch-fine a { color: var(--ink-2); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* The technical bit. Every answer on these pages is written for somebody who
   takes notes, not somebody who writes software; the mechanism behind it is
   one click away for whoever wants it, and closed for everybody else. */
.tech { margin-top: 16px; max-width: 46ch; }
.tech summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--ice); border-radius: 6px;
}
.tech summary::-webkit-details-marker { display: none; }
.tech summary::before {
  content: ""; width: 6px; height: 6px; margin-top: -2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s var(--ease), margin .2s var(--ease);
}
.tech[open] summary::before { transform: rotate(45deg); margin-top: -5px; }
.tech summary:hover { color: var(--sky-900); }
.tech > div {
  margin-top: 12px; padding: 2px 0 2px 18px; border-left: 1px solid var(--rim);
  font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
}
.tech > div p + p { margin-top: 10px; }
.tech b { color: var(--ink); font-weight: 600; }
.ch-head .tech > div p { font-size: inherit; line-height: inherit; max-width: none; }
.pop-body .tech { max-width: none; margin-top: 18px; }
.pop-body .tech > div p { font-size: 15.5px; }

/* Questions, answered. Each is a <details>: the question is the line you scan,
   the answer opens under it, and what used to be "the technical bit" is the
   second half of the answer, set quieter, since opening a question already
   asked for it. A link to #<id> opens the question it names (site.js). */
.qa-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 980px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: clamp(20px, 2.2vw, 28px) 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2vw, 27px); letter-spacing: -.025em; line-height: 1.2; color: var(--ink);
  scroll-margin-top: calc(var(--bar-h) + 24px);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; width: 9px; height: 9px; margin: -4px 6px 0 0;
  border-right: 1.7px solid var(--ice); border-bottom: 1.7px solid var(--ice);
  transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
.qa summary:hover { color: var(--sky-900); }
.qa .ans { padding: 0 0 clamp(26px, 3vw, 36px); max-width: 64ch; }
.qa .ans p { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-2); }
.qa .ans p + p { margin-top: 12px; }
.qa .ans .deep { margin-top: 18px; padding: 2px 0 2px 18px; border-left: 1px solid var(--rim); }
.qa .ans .deep h4 { font-family: var(--body); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--ice); margin: 0 0 8px; }
.qa .ans .deep p { font-size: 15.5px; color: var(--ink-2); }
.qa .ans .deep b { color: var(--ink); font-weight: 600; }
.qa[open] .ans { animation: qa-in .35s var(--ease) both; }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qa[open] .ans { animation: none; } .qa summary::after { transition: none; } }

/* Grow: the network, arriving one machine at a time. Shared by index.html and
   docs.html, which both make the case that it gets better as people join. */
.grow { width: 100%; display: block; height: auto; }
.grow circle { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; }
.grow circle.you { fill: var(--ice); filter: drop-shadow(0 0 8px rgba(143, 200, 255, .8)); }
.grow line { stroke: var(--ink); stroke-opacity: .28; stroke-width: 1; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .grow-wrap.is-in circle { animation: grow-dot .6s var(--ease) both; animation-delay: calc(var(--at) * 1s); }
.js .grow-wrap.is-in line { animation: grow-line 1s var(--ease) both; animation-delay: calc(var(--at) * 1s + .25s); }
html:not(.js) .grow circle { opacity: 1; }
html:not(.js) .grow line { stroke-dashoffset: 0; }
@keyframes grow-dot { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes grow-line { to { stroke-dashoffset: 0; } }
.grow-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }
@media (max-width: 640px) { .grow-cap { flex-direction: column; gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .js .grow-wrap.is-in circle, .js .grow-wrap.is-in line { animation: none; }
  .grow circle { opacity: 1; }
  .grow line { stroke-dashoffset: 0; }
}

/* The way down from a chapter to the question that goes deeper. */
.deeper { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ice); text-decoration: none; }
.deeper svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.deeper:hover { color: var(--sky-900); }
.deeper:hover svg { transform: translateY(2px); }

/* Keep reading: the other pages, at the foot of every page, so somebody on a
   phone who never noticed the tabs still finds them. */
.onward { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.onward h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 18px; }
.onward ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.onward a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; height: 100%;
  padding: 20px 22px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(180deg, rgba(170, 210, 255, .07), rgba(170, 210, 255, .025));
  border: 1px solid var(--rim); transition: background-color .2s ease, border-color .2s ease;
}
.onward a:hover { border-color: rgba(190, 225, 255, .34); background-color: rgba(170, 210, 255, .05); }
.onward b { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.015em; }
.onward span { grid-column: 1; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.onward svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--ice); transition: transform .2s var(--ease); }
.onward a:hover svg { transform: translateX(3px); }
@media (max-width: 900px) { .onward ul { grid-auto-flow: row; } }

/* ---------------------------------------------------------------- Why it is different (teaser) */
.why { padding-top: clamp(96px, 12vw, 156px); }
.why-card {
  position: relative; overflow: hidden; border-radius: 28px;
  padding: clamp(40px, 5.5vw, 76px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.why-card h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; margin-bottom: 20px; text-wrap: balance; }
.why-card .lede { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 44ch; margin-bottom: 28px; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.why-list li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  background: var(--frost); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
}
.why-list .g { width: 44px; height: 44px; border-radius: 12px; background: var(--sky-200); color: var(--ice); display: grid; place-items: center; font-size: 20px; }
.why-list b { display: block; font-family: var(--display); font-weight: 600; font-size: 17.5px; margin-bottom: 3px; letter-spacing: -.01em; }
.why-list span { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

/* ---------------------------------------------------------------- Everything, at a glance */
.all { padding-top: clamp(96px, 12vw, 156px); }
.all h2 { font-size: clamp(31px, 3.9vw, 50px); line-height: 1.04; letter-spacing: -.03em; max-width: 20ch; margin-bottom: 14px; }
.all > .wrap > p { font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); max-width: 52ch; margin-bottom: 40px; }
.all-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
/* Twenty-five things read as a wall; four groups of a few read as a menu. */
.all-group {
  font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -.015em; line-height: 1.2;
  margin: 36px 0 8px; padding: 0 0 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.all > .wrap > p + .all-group { margin-top: 0; }
.feat {
  appearance: none; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 18px 16px 18px 14px; border-radius: 16px;
  transition: background-color .25s ease, border-color .25s ease, transform .2s var(--ease);
  width: 100%;
}
.feat:hover { background: var(--frost); border-color: var(--line); }
.feat:active { transform: scale(.99); }
.feat .g {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(143, 200, 255, .10); color: var(--ice); font-size: 18px;
  box-shadow: inset 0 0 0 1px rgba(143, 200, 255, .14);
}
.feat b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 4px; color: var(--ink); }
.feat span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.feat .open { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ice); opacity: 0; transition: opacity .2s ease; }
.feat:hover .open, .feat:focus-visible .open { opacity: 1; }

/* The popup. A real <dialog>, so Escape, focus and the backdrop are the browser's. */
.pop {
  padding: 0; margin: auto;
  width: min(720px, calc(100vw - 32px)); max-height: min(86vh, 860px);
  border-radius: 24px; color: var(--ink);
  background: linear-gradient(180deg, rgba(22, 32, 48, .86), rgba(8, 12, 20, .9));
  overflow: hidden;
}
.pop::backdrop { background: rgba(1, 2, 5, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pop[open] { animation: popin .36s var(--ease) both; }
@keyframes popin { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.pop-in { padding: clamp(24px, 4vw, 44px); overflow: auto; max-height: min(86vh, 860px); }
.pop-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.pop-head .g { flex: none; width: 56px; height: 56px; border-radius: 16px; background: rgba(143, 200, 255, .10); color: var(--ice); display: grid; place-items: center; font-size: 26px; box-shadow: inset 0 0 0 1px rgba(143, 200, 255, .14); }
.pop-head h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.pop-head .kicker { color: var(--ink-3); font-size: 15.5px; margin-top: 6px; }
.pop-body p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.pop-body p + p { margin-top: 12px; }
.pop-body p b { color: var(--ink); font-weight: 600; }
.pop-body .facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 20px 0 4px; padding: 0; list-style: none;
}
.pop-body .facts li { background: var(--frost); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.pop-body .facts b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.pop-body .facts span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.pop-body .fine { font-size: 14px; color: var(--ink-3); margin-top: 16px; }
.pop-body .fine a { color: var(--ice); }
.pop-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(190, 225, 255, .08); color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
}
.pop-x:hover { background: rgba(190, 225, 255, .16); color: var(--ink); }
.pop-x svg { width: 14px; height: 14px; }
.pop-vis { margin: 22px 0 6px; }

/* ---------------------------------------------------------------- Download
   The foot of the range: the last card on a page is frosted ice over the lake,
   which shows sharp at its sides and as blurred light through it. */
.get { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 156px) 0 clamp(56px, 7vw, 90px); }
.get > .lake {
  position: absolute; z-index: -1; left: 50%; top: 54%;
  width: min(1500px, 120vw);
  transform: translate3d(-50%, -50%, 0);
  /* Only the water and the light on it: the peaks that frame the lake fade
     out before they reach the sides of the page. */
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 22%, transparent 78%);
}
.skycard {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; color: var(--ink);
  padding: clamp(40px, 5.5vw, 76px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.skycard .sky { background: radial-gradient(80% 70% at 70% 110%, rgba(40, 110, 255, .36), transparent 70%); }
.skycard .sky-tint {
  background:
    linear-gradient(90deg, rgba(4, 7, 12, .82) 0%, rgba(4, 7, 12, .5) 46%, rgba(4, 7, 12, 0) 80%),
    linear-gradient(180deg, rgba(4, 7, 12, .5), rgba(4, 7, 12, 0) 40%);
}
.skycard h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -.035em; font-weight: 700; margin-bottom: 20px; }
.skycard .lede { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 40ch; margin-bottom: 30px; }
.skycard .req { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); line-height: 1.6; max-width: 46ch; }
.skycard .req a { color: var(--ink-2); }
.plats { border-radius: 18px; overflow: hidden; background: rgba(6, 10, 18, .55); }
.plat {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 18px;
  padding: 18px 22px; text-decoration: none;
  border-top: 1px solid var(--line); transition: background-color .2s ease;
}
.plat:first-child { border-top: 0; }
.plat:hover { background: rgba(170, 210, 255, .07); }
.plat .os { font-weight: 600; font-size: 16.5px; margin-bottom: 2px; line-height: 1.25; }
.plat .file { font-size: 13.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.plat .go { font-weight: 600; font-size: 14.5px; color: var(--ice); white-space: nowrap; text-align: right; }
.plat .go b { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.plat .go b:empty { display: none; }
.plat.none .os, .plat.none .go { color: var(--ink-3); }

/* ---------------------------------------------------------------- Footer */
.foot { padding: 34px 0 44px; border-top: 1px solid var(--line); }
.foot-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  font-size: 14px; color: var(--ink-3);
}
.foot .mark { color: var(--ink); }
.foot .mark img { box-shadow: 0 0 0 1px rgba(190, 225, 255, .14); }
.foot .mark span { font-size: 15px; }
.foot .fsp { flex: 1; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* The app windows stay in the app's light theme, standing on the night with a
   rim of light rather than a shadow nobody sees. */
.app { box-shadow: 0 0 0 1px rgba(190, 225, 255, .12), 0 40px 120px -40px rgba(47, 123, 255, .45) !important; }

/* ================================================================ THE MOCKUP SYSTEM */

/* One unit. `--w` is the window's width in app pixels; the window fills its
   container and never grows past 1:1. */
.app {
  --w: 1100;
  --u: .8px;
  --a-text: #37352f;
  --a-sec: #787066;
  --a-faint: #b2ada4;
  --a-rule: rgba(55, 53, 47, .16);
  --a-hover: rgba(55, 53, 47, .055);
  --a-selected: rgba(23, 105, 224, .10);
  --a-accent: #1769e0;
  --a-accent-wash: rgba(23, 105, 224, .12);
  --a-danger: #c1453f;
  --a-online: #2a9d5c;
  --a-code-bg: rgba(135, 131, 120, .15);
  --a-desk: #ffffff;
  --a-raised: #ffffff;
  --a-pane-edge: rgba(255, 255, 255, 0);
  --a-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 6px rgba(0, 0, 0, .05);

  position: relative;
  width: calc(var(--u) * var(--w));
  max-width: 100%;
  margin-inline: auto;
  font-family: var(--ui);
  font-size: calc(var(--u) * 13);
  line-height: 1.45;
  color: var(--a-text);
  background: var(--a-desk);
  border-radius: calc(var(--u) * 12);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(10, 40, 70, .45), 0 2px 8px rgba(10, 40, 70, .06), 0 0 0 1px rgba(15, 29, 43, .09);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
@supports (width: 1cqw) {
  .app { --u: min(1px, calc(100cqw / var(--w))); }
}
.app.dark {
  --a-text: #e6e6e4;
  --a-sec: #9b9b98;
  --a-faint: #74767b;
  --a-rule: rgba(255, 255, 255, .14);
  --a-hover: rgba(255, 255, 255, .065);
  --a-selected: rgba(108, 180, 255, .18);
  --a-accent: #6cb4ff;
  --a-accent-wash: rgba(108, 180, 255, .22);
  --a-danger: #e07a73;
  --a-online: #46c47c;
  --a-code-bg: rgba(135, 131, 120, .25);
  --a-desk: #0c0c0e;
  --a-raised: #1b1b1e;
  --a-pane-edge: rgba(255, 255, 255, .10);
  color-scheme: dark;
}

/* The glyphs: SF Symbols from the app's own table, sized the way chrome.js sizes them. */
.g { display: inline-flex; align-items: center; justify-content: center; flex: none; color: inherit; }
.g svg { display: block; fill: currentColor; width: calc(var(--gw, 1) * 1em); height: calc(var(--gh, 1) * 1em); }

/* -- the bar: 44 tall, chips 28, 13pt medium, no bottom edge -- */
.a-bar {
  position: relative; height: calc(var(--u) * 44); display: flex; align-items: center; gap: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 90); background: var(--a-desk); z-index: 3;
}
.app.win .a-bar { padding-left: calc(var(--u) * 10); }
.a-tl { position: absolute; left: calc(var(--u) * 15); top: 50%; transform: translateY(-50%); display: flex; gap: calc(var(--u) * 8); }
.a-tl i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; display: block; }
.a-tl i:nth-child(1) { background: #ff5f57; } .a-tl i:nth-child(2) { background: #febc2e; } .a-tl i:nth-child(3) { background: #28c840; }
.app.win .a-tl { display: none; }
.a-caps { display: none; }
.app.win .a-caps { display: flex; gap: calc(var(--u) * 18); margin-left: calc(var(--u) * 12); color: var(--a-sec); font-size: calc(var(--u) * 11); align-items: center; padding-right: calc(var(--u) * 6); }
.a-left, .a-right { display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.a-right { margin-left: auto; }
.a-centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.a-chip {
  appearance: none; border: 0; background: transparent; color: var(--a-sec);
  font: inherit; font-size: calc(var(--u) * 13); font-weight: 500; display: inline-flex; align-items: center; gap: calc(var(--u) * 5);
  height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 9); white-space: nowrap; cursor: default;
}
.a-chip.on, .a-chip.hover { background: var(--a-hover); color: var(--a-text); }
.a-chip.ico { padding: 0; width: calc(var(--u) * 28); justify-content: center; }
.a-chip .g { font-size: calc(var(--u) * 12); height: calc(var(--u) * 14); }
.a-chip.ico .g { font-size: calc(var(--u) * 14); height: calc(var(--u) * 16); }
.a-chip .hint { font-size: calc(var(--u) * 8); height: calc(var(--u) * 9); color: var(--a-faint); }
.a-chip.drop { width: calc(var(--u) * 18); padding: 0; justify-content: center; }
.a-chip.drop .g { font-size: calc(var(--u) * 9); height: calc(var(--u) * 6); }
/* The bar's glyphs carry a hairline of their own colour in the app ("very thin" otherwise). */
.a-bar .g path { stroke: currentColor; stroke-width: .4px; vector-effect: non-scaling-stroke; }
.a-chip.dis { color: var(--a-faint); }
.a-proj {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 9) 0 calc(var(--u) * 5);
  border-radius: calc(var(--u) * 9); background: var(--a-hover); color: var(--a-text); font-weight: 600; font-size: calc(var(--u) * 13);
}
.a-proj .pg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 5); background: var(--a-accent-wash); color: var(--a-accent); font-size: calc(var(--u) * 11); display: grid; place-items: center; }
.a-proj .hint { font-size: calc(var(--u) * 8); height: calc(var(--u) * 9); color: var(--a-faint); margin-left: calc(var(--u) * -2); }
.a-proj.on { background: var(--a-selected); }
.a-proj.on .pg { background: var(--a-accent); color: #fff; }
.a-badge {
  position: absolute; top: calc(var(--u) * 1); right: calc(var(--u) * 1); min-width: calc(var(--u) * 15); height: calc(var(--u) * 15); padding: 0 calc(var(--u) * 4); border-radius: calc(var(--u) * 8);
  background: var(--a-accent); color: #fff; font-size: calc(var(--u) * 9.5); font-weight: 700; line-height: calc(var(--u) * 15); text-align: center;
  box-shadow: 0 0 0 calc(var(--u) * 2) var(--a-desk);
}
.a-chip { position: relative; }

/* -- the desk and panes -- */
.a-desk { position: relative; background: var(--a-desk); min-height: calc(var(--u) * 520); overflow: hidden; }
.a-desk.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10); }
.a-pane {
  position: relative; background: var(--a-desk); overflow: hidden; min-width: 0;
}
.a-desk.tiles .a-pane { border-radius: calc(var(--u) * 8); box-shadow: var(--a-shadow), inset 0 0 0 1px var(--a-pane-edge); }
.a-pane.dim { opacity: .72; }
.a-ver { position: absolute; left: calc(var(--u) * 10); bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 10); color: var(--a-faint); z-index: 4; font-variant-numeric: tabular-nums; }

/* -- the editor: theme.css, in app pixels -- */
.e-page { max-width: calc(var(--u) * 720); margin: 0 auto; padding: calc(var(--u) * 44) calc(var(--u) * 48) calc(var(--u) * 40); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 24); color: var(--a-text); }
.a-desk.tiles .e-page { padding: calc(var(--u) * 34) calc(var(--u) * 36) calc(var(--u) * 30); }
.e-title { font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 44); font-weight: 700; letter-spacing: -.02em; margin: 0 0 calc(var(--u) * 18); padding-top: calc(var(--u) * 5); }
.e-title.ph { color: var(--a-sec); opacity: .5; }
.e-faces { display: inline-flex; gap: calc(var(--u) * 6); }
.e-face {
  width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: calc(var(--u) * 6); display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--hue, 210) 50% 74%); color: #20201e; font-size: calc(var(--u) * 11); font-weight: 600; line-height: 1; position: relative;
}
.e-face.on::after { content: ""; position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -2); width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #1a9a4a; box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--a-desk); }
.e-face.away { opacity: .38; }
.e-face.live { box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--a-desk), 0 0 0 calc(var(--u) * 3) hsl(var(--hue, 210) 62% 46%); }
/* Who the page is shared with: editor.css #peers, a glass row at the foot of the tile (R661). */
.e-peers {
  position: absolute; left: 50%; bottom: calc(var(--u) * 14); transform: translateX(-50%); z-index: 4;
  display: flex; gap: calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 6); border-radius: calc(var(--u) * 10);
  background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .08);
}
.e-p { padding: calc(var(--u) * 6) 0; margin: 0; }
.e-p.sec { color: var(--a-sec); }
.e-h2 { font-size: calc(var(--u) * 22); line-height: calc(var(--u) * 28); font-weight: 700; letter-spacing: -.01em; margin: calc(var(--u) * 18) 0 0; padding: calc(var(--u) * 4) 0 calc(var(--u) * 3); }
.e-h3 { font-size: calc(var(--u) * 18); line-height: calc(var(--u) * 26); font-weight: 700; letter-spacing: -.01em; margin: calc(var(--u) * 16) 0 0; padding: calc(var(--u) * 3) 0 calc(var(--u) * 4); }
.e-ul { margin: 0; padding: calc(var(--u) * 4) 0 calc(var(--u) * 4) calc(var(--u) * 24); }
.e-ul li { padding: calc(var(--u) * 5) 0; }
.e-todo { list-style: none; margin: 0; padding: calc(var(--u) * 4) 0; }
.e-todo li { position: relative; padding: calc(var(--u) * 5) 0 calc(var(--u) * 5) calc(var(--u) * 28); }
.e-todo li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--u) * 9); width: calc(var(--u) * 16.8); height: calc(var(--u) * 16.8);
  border: calc(var(--u) * 1.5) solid var(--a-sec); border-radius: calc(var(--u) * 4); box-sizing: border-box;
  transition: background-color .12s ease, border-color .12s ease;
}
.e-todo li.on { color: var(--a-sec); text-decoration: line-through; }
.e-todo li.on::before {
  background-color: var(--a-accent); border-color: var(--a-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.e-card {
  margin: calc(var(--u) * 10) 0; border: 1px solid rgba(55, 53, 47, .12); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 16);
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .07); color: var(--a-text);
}
/* theme.css's card palette since D36: muted washes, one ink. */
.e-card.blue, .e-card.yellow, .e-card.green, .e-card.pink, .e-card.gray { color: #24211d; border-color: color-mix(in srgb, var(--fill) 80%, #000); background: var(--fill); }
.e-card.blue { --fill: #dbe8fb; }
.e-card.yellow { --fill: #f5ebc8; }
.e-card.green { --fill: #dcebdf; }
.e-card.pink { --fill: #f5e0e9; }
.e-card.gray { --fill: #ebedf0; }
.e-card .t { font-weight: 700; font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 27); letter-spacing: -.01em; }
.e-card .s { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 19); color: color-mix(in srgb, currentColor 62%, transparent); }
.e-card .l { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 11); line-height: calc(var(--u) * 16); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, currentColor 55%, transparent); }
.e-card .b { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 23); }
.e-card p { margin: 0; }
.e-cols { display: flex; gap: calc(var(--u) * 64); margin: calc(var(--u) * 6) 0; align-items: flex-start; }
.e-cols > div { flex: 1 1 0; min-width: 0; }
.e-cols .e-h3 { margin-top: 0; }
.e-badge {
  display: block; margin: calc(var(--u) * 6) 0; padding: calc(var(--u) * 14) calc(var(--u) * 16); border: 1px solid #ebebeb; border-radius: calc(var(--u) * 8);
  background: rgba(0, 0, 0, .03); box-shadow: 0 0 4px rgba(0, 0, 0, .05);
}
.app.dark .e-badge { border-color: #292929; background: rgba(255, 255, 255, .045); }
.e-badge .t { font-weight: 500; display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 17); }
.e-badge .t .g { font-size: calc(var(--u) * 12); color: var(--a-sec); }
.e-badge .d { color: var(--a-sec); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 16); margin-top: calc(var(--u) * 4); }
.e-pre {
  margin: calc(var(--u) * 10) 0; padding: calc(var(--u) * 12) calc(var(--u) * 16); border-radius: calc(var(--u) * 8); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 20);
  color: #1d3a5a; background: linear-gradient(180deg, #eef5fb 0%, #e4eef7 100%); border: .5px solid rgba(84, 138, 190, .28); white-space: pre; overflow: hidden;
}
.app.dark .e-pre { color: #d3e5f6; background: linear-gradient(180deg, #0c1a29, #0a1522); border-color: rgba(140, 196, 240, .16); }
.e-pre .k { color: #7c3aed; } .e-pre .s { color: #0f766e; } .e-pre .n { color: #b45309; }
.e-math { display: block; text-align: center; margin: calc(var(--u) * 14) 0; font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", "Times New Roman", serif; font-size: calc(var(--u) * 20); font-style: italic; }
.e-fig { margin: calc(var(--u) * 10) 0; border-radius: calc(var(--u) * 8); overflow: hidden; position: relative; }
.e-fig img { width: 100%; display: block; }
.e-hl { padding: calc(var(--u) * 2); margin: 0 calc(var(--u) * -2); border-radius: calc(var(--u) * 3); background: #ffe94d; color: #24211d; }
.e-cur { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 20); background: var(--a-text); vertical-align: text-bottom; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* A remote caret and its name flag: the colour of the person, one colour everywhere. */
.e-caret { position: relative; display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 20); vertical-align: text-bottom; background: var(--c, #ff9ad5); margin-left: 1px; }
.e-caret::after {
  content: attr(data-n); position: absolute; left: 0; bottom: 100%; margin-bottom: calc(var(--u) * 1);
  background: var(--c, #ff9ad5); color: #fff; font-size: calc(var(--u) * 10); font-weight: 500; line-height: 1.35;
  padding: calc(var(--u) * 1) calc(var(--u) * 5); border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) 0; white-space: nowrap; font-family: var(--ui); opacity: .92;
}

/* -- the meeting box: theme.css .meeting-box -- */
.e-meet {
  margin: calc(var(--u) * 16) 0; padding: 0 calc(var(--u) * 20) calc(var(--u) * 18); border: 1px solid rgba(55, 53, 47, .12); border-radius: calc(var(--u) * 12);
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}
.app.dark .e-meet { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); }
.e-meet .mh { margin: 0 calc(var(--u) * -20) calc(var(--u) * 2); padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 14); border-bottom: 1px solid rgba(55, 53, 47, .09); display: flex; align-items: baseline; gap: calc(var(--u) * 8); flex-wrap: wrap; }
.app.dark .e-meet .mh { border-bottom-color: rgba(255, 255, 255, .09); }
.e-meet .mh b { font-weight: 700; font-size: calc(var(--u) * 19); }
.e-meet .mh span { color: var(--a-sec); font-size: calc(var(--u) * 15); }
.e-meet .mp { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12) 0 calc(var(--u) * 6); color: var(--a-sec); font-size: calc(var(--u) * 11); }
.e-meet .mp .play { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: var(--a-code-bg); display: grid; place-items: center; color: var(--a-text); }
.e-meet .mp .play svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.e-meet .mp .skip { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--a-sec); }
.e-meet .mp .seek { flex: 1; height: calc(var(--u) * 3); border-radius: calc(var(--u) * 2); background: var(--a-rule); position: relative; }
.e-meet .mp .seek i { position: absolute; left: 0; top: 50%; width: var(--p, 12%); height: calc(var(--u) * 3); background: var(--a-sec); transform: translateY(-50%); border-radius: calc(var(--u) * 2); }
.e-meet .mp .seek i::after { content: ""; position: absolute; right: calc(var(--u) * -5); top: 50%; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: var(--a-text); transform: translateY(-50%); }
.e-meet .mp .rate { border: 1px solid var(--a-rule); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 1) calc(var(--u) * 5); font-size: calc(var(--u) * 10.5); }
.e-meet .mt { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
.e-meet .tab { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: calc(var(--u) * 999); font-size: calc(var(--u) * 12.5); color: var(--a-sec); border: 1px solid transparent; }
.e-meet .tab .g { font-size: calc(var(--u) * 11); }
.e-meet .tab.on { color: var(--a-accent); border-color: var(--a-accent); }
.e-meet .tb { margin: calc(var(--u) * 20) 0; }
.e-meet .tb:last-child { margin-bottom: 0; }
.e-meet .tb .th { display: flex; align-items: center; gap: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 8); }
.e-meet .tb .av { width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: 50%; background: rgba(55, 53, 47, .08); color: var(--a-sec); font-size: calc(var(--u) * 10); font-weight: 600; display: inline-grid; place-items: center; }
.app.dark .e-meet .tb .av { background: rgba(255, 255, 255, .11); }
.e-meet .tb .nm { font-size: calc(var(--u) * 12); font-weight: 500; color: var(--a-sec); }
.e-meet .tb .ts { font-size: calc(var(--u) * 11); color: var(--a-faint); margin-left: calc(var(--u) * 2); }
.e-meet .tb p { margin: 0; padding-left: calc(var(--u) * 14); border-left: calc(var(--u) * 2) solid rgba(55, 53, 47, .16); font-size: calc(var(--u) * 15.5); line-height: 1.55; }
.app.dark .e-meet .tb p { border-left-color: rgba(255, 255, 255, .18); }

/* -- the meeting bar: the capsule at the bottom of the window -- */
.m-bar {
  position: absolute; left: 50%; bottom: calc(var(--u) * 18); transform: translateX(-50%); z-index: 9;
  min-width: calc(var(--u) * 340); max-width: calc(100% - calc(var(--u) * 32)); padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: calc(var(--u) * 16);
  border: 1px solid var(--a-rule); background: var(--a-raised); box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  display: flex; align-items: center; gap: calc(var(--u) * 10); min-height: calc(var(--u) * 42); font-size: calc(var(--u) * 12); white-space: nowrap;
}
.m-rec { position: relative; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--a-danger); flex: none; }
.m-rec::before { content: ""; position: absolute; inset: calc(var(--u) * -3); border-radius: 50%; border: 1.5px solid var(--a-danger); animation: halo 1.8s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.6); opacity: .8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.m-clock { font-variant-numeric: tabular-nums; font-size: calc(var(--u) * 13); font-weight: 600; min-width: calc(var(--u) * 42); }
.m-meter { display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 2); contain: layout paint; }
.m-meter i { display: block; width: calc(var(--u) * 2); min-height: calc(var(--u) * 2); height: var(--h, 40%); border-radius: 1px; background: var(--a-danger); }
.m-meter i.live { animation: meter 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes meter { from { height: 15%; } to { height: var(--h, 90%); } }
.m-lines { display: flex; flex-direction: column; gap: calc(var(--u) * 1); min-width: 0; }
.m-into { display: flex; align-items: center; gap: calc(var(--u) * 4); color: var(--a-text); font-size: calc(var(--u) * 12); }
.m-into .g { color: var(--a-accent); font-size: calc(var(--u) * 11); }
.m-sub { color: var(--a-faint); font-size: calc(var(--u) * 11); }
.m-gap { flex: 1; }
.m-btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); border: 1px solid var(--a-rule); font-size: calc(var(--u) * 12); color: var(--a-text); }
.m-btn.danger { color: var(--a-danger); border-color: var(--a-danger); }
.m-btn .sq { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 1.5); background: currentColor; }
.m-btn.quiet { border-color: transparent; color: var(--a-sec); }
.m-spin { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; border: 2px solid var(--a-rule); border-top-color: var(--a-accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.m-track { width: calc(var(--u) * 140); height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: var(--a-rule); overflow: hidden; }
.m-track i { display: block; height: 100%; width: var(--p, 40%); background: var(--a-accent); border-radius: calc(var(--u) * 2); }

/* -- popovers: the search panel, the pages panel -- */
.a-pop {
  position: absolute; top: calc(var(--u) * 50); z-index: 5;
  background: var(--a-raised); border: 1px solid var(--a-rule); border-radius: calc(var(--u) * 14);
  box-shadow: 0 8px 36px rgba(0, 0, 0, .22);
  font-size: calc(var(--u) * 13); color: var(--a-text);
}
.s-pop { width: calc(var(--u) * 460); height: calc(var(--u) * 420); right: calc(var(--u) * 122); display: flex; flex-direction: column; overflow: hidden; }
.s-head { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12); border-bottom: 1px solid var(--a-rule); flex: none; }
.s-head .g { color: var(--a-sec); font-size: calc(var(--u) * 14); }
.s-field { flex: 1; font-size: calc(var(--u) * 15); white-space: pre; display: flex; align-items: center; min-height: calc(var(--u) * 20); }
.s-field .ph { color: var(--a-faint); }
.s-body { flex: 1; overflow: hidden; padding: calc(var(--u) * 6); }
.s-status { height: 100%; display: grid; place-items: center; color: var(--a-sec); text-align: center; padding: calc(var(--u) * 20); }
.hit { padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 6); }
.hit-top { display: flex; align-items: baseline; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 3); }
.hit-page { flex: 1; font-size: calc(var(--u) * 11); font-weight: 600; color: var(--a-sec); }
.hit-score { font-size: calc(var(--u) * 10); color: var(--a-faint); font-variant-numeric: tabular-nums; }
.hit-text { font-size: calc(var(--u) * 13); line-height: 1.45; }
.hit-text mark { background: color-mix(in srgb, var(--a-accent) 22%, transparent); color: inherit; font-weight: 500; border-radius: calc(var(--u) * 2); }
.p-pop { width: calc(var(--u) * 272); left: calc(var(--u) * 102); display: flex; flex-direction: column; }
.p-head { display: flex; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 9) calc(var(--u) * 14); border-bottom: 1px solid var(--a-rule); color: var(--a-faint); }
.p-head .g { font-size: calc(var(--u) * 12); }
.p-rows { padding: calc(var(--u) * 6); }
.p-foot { padding: calc(var(--u) * 6); border-top: 1px solid var(--a-rule); }
.a-row { display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 6) calc(var(--u) * 8); border-radius: calc(var(--u) * 7); }
.a-row.on { background: var(--a-selected); }
.a-row.on .rt { font-weight: 600; }
.a-row.on .rg { color: var(--a-accent); opacity: 1; }
.a-row .rg { width: calc(var(--u) * 16); font-size: calc(var(--u) * 12); color: var(--a-sec); opacity: .7; display: inline-flex; justify-content: center; }
.a-row .rt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-row .rd { color: var(--a-faint); font-size: calc(var(--u) * 12); }
.a-row .pin { color: var(--a-accent); font-size: calc(var(--u) * 11); }
.a-row.sub { padding-left: calc(var(--u) * 22); }
.a-act { display: flex; align-items: center; gap: calc(var(--u) * 6); color: var(--a-sec); padding: calc(var(--u) * 6) calc(var(--u) * 10); font-size: calc(var(--u) * 13); font-weight: 500; }
.a-act .g { font-size: calc(var(--u) * 12); }

/* -- the slash menu: editor.css #slashmenu -- */
.sl-menu {
  position: absolute; z-index: 6; min-width: calc(var(--u) * 200); padding: calc(var(--u) * 5); border-radius: calc(var(--u) * 14);
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(28px) saturate(1.9); backdrop-filter: blur(28px) saturate(1.9);
  border: .5px solid rgba(0, 0, 0, .1); box-shadow: 0 12px 32px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.sl-item { display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 5) calc(var(--u) * 8); border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * 13.5); color: var(--a-text); position: relative; }
.sl-item.sel { background: var(--a-code-bg); }
.sl-item .gl { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 5); background: var(--a-accent-wash); color: var(--a-accent); display: grid; place-items: center; flex: none; }
.sl-item .gl svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* -- the Pages screen: chrome.css .layer over #scrim, pagesPage's islands -- */
.a-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(15, 15, 15, .55); }
.a-sheet {
  position: absolute; z-index: 5; left: 50%; top: calc(var(--u) * 36); transform: translateX(-50%);
  width: calc(var(--u) * 820); max-width: calc(100% - var(--u) * 40); padding: calc(var(--u) * 32) calc(var(--u) * 40) calc(var(--u) * 30);
  background: var(--a-raised); border-radius: calc(var(--u) * 12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 10px 28px -6px rgba(0, 0, 0, .18), 0 28px 72px -16px rgba(0, 0, 0, .22);
}
.a-sheet .x { position: absolute; right: calc(var(--u) * 14); top: calc(var(--u) * 14); color: var(--a-sec); font-size: calc(var(--u) * 12); height: calc(var(--u) * 14); }
.pv-title { font-size: calc(var(--u) * 26); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--a-text); }
.pv-bar { display: flex; align-items: center; gap: calc(var(--u) * 6); margin: calc(var(--u) * 18) 0 calc(var(--u) * 14); }
.pv-act { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 500; color: var(--a-sec); }
.pv-act:first-child { margin-left: calc(var(--u) * -8); }
.pv-act .g { color: var(--a-accent); font-size: calc(var(--u) * 11); }
.pv-filter { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 6); width: calc(var(--u) * 160); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10); border: 1px solid var(--a-rule); border-radius: calc(var(--u) * 9); color: var(--a-faint); font-size: calc(var(--u) * 12.5); }
.pv-filter .g { font-size: calc(var(--u) * 11); }
.pv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 10); align-items: start; }
.pv-col { display: flex; flex-direction: column; gap: calc(var(--u) * 10); min-width: 0; }
.pv-card { border: 1px solid var(--a-rule); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 6); background: var(--a-raised); }
.pv-row { display: flex; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 5) calc(var(--u) * 6); border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 13); white-space: nowrap; overflow: hidden; }
.pv-row.root { font-weight: 600; }
.pv-row .tw { width: calc(var(--u) * 10); color: var(--a-faint); font-size: calc(var(--u) * 8); }
.pv-row .rg { width: calc(var(--u) * 14); color: var(--a-sec); font-size: calc(var(--u) * 11); }
.pv-row.kid { padding-left: calc(var(--u) * 37); }
.pv-row.flat { padding-left: calc(var(--u) * 23); }

/* A plain folder beside the app: what the disk holds. */
.finder {
  /* Finder stands beside the app window, not inside it, so it carries the
     light tokens itself; inherited, they are undefined and it goes see-through. */
  --a-text: #37352f; --a-faint: #b2ada4; --a-rule: rgba(55, 53, 47, .16); --a-selected: rgba(23, 105, 224, .10); --a-raised: #ffffff;
  font-family: var(--ui); font-size: calc(var(--u) * 13); color: var(--a-text); background: var(--a-raised);
  border-radius: calc(var(--u) * 12); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(10, 40, 70, .35), 0 0 0 1px rgba(15, 29, 43, .09);
}
.finder .fh { height: calc(var(--u) * 44); display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 14); border-bottom: 1px solid var(--a-rule); font-weight: 600; background: #f6f5f4; }
.finder .fh .a-tl { position: static; transform: none; }
.finder .fr { display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 6) calc(var(--u) * 14); }
.finder .fr .fi { width: calc(var(--u) * 18); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 2); background: #fff; border: 1px solid #d8d6d1; position: relative; flex: none; }
.finder .fr .fi::after { content: ""; position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 6); height: calc(var(--u) * 1.5); background: #cfcdc7; box-shadow: 0 calc(var(--u) * 3.5) 0 #cfcdc7, 0 calc(var(--u) * 7) 0 #cfcdc7; }
.finder .fr .fi.dir { background: #8fc6f5; border-color: #74b3e6; height: calc(var(--u) * 16); border-radius: calc(var(--u) * 2); }
.finder .fr .fi.dir::after { display: none; }
.finder .fr .fn { flex: 1; }
.finder .fr .fs { color: var(--a-faint); font-size: calc(var(--u) * 12); font-variant-numeric: tabular-nums; }
.finder .fr.sel { background: var(--a-selected); }

/* ---------------------------------------------------------------- Narrow */
@media (max-width: 900px) {
  /* The four pages stay in sight on a phone: a row of tabs under the bar, not
     a menu somebody has to know is there. */
  :root { --bar-h: 116px; }
  .bar-in { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 10px; row-gap: 8px; }
  .bar-in > .mark, .bar-in > .btn-bar { min-height: 40px; }
  .nav {
    order: 9; flex: 1 0 100%; margin: 0; gap: 2px; padding: 3px; border-radius: 12px;
    background: rgba(12, 18, 28, .62); border: 1px solid var(--rim);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  }
  .nav a { flex: 1 1 0; text-align: center; padding: 9px 2px; border-radius: 9px; font-size: 13.5px; opacity: 1; color: var(--ink-2); }
  .nav a.here { background: rgba(190, 225, 255, .16); color: var(--ink); text-decoration: none; }
  .txt h2 { max-width: 22ch; }
  .txt p { max-width: 60ch; }
  .why-card, .skycard { grid-template-columns: minmax(0, 1fr); }
  .ch-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ch-head h2 { max-width: 16ch; }
  .pair, .pair.flip { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pair.flip > .txt { order: 0; }
  .pair .txt { text-align: center; }
  .pair .txt h2, .pair .txt p { margin-inline: auto; }
  .pair .emblem { margin-inline: auto; }
  .pair .vis .app, .pair.flip .vis .app { margin-inline: auto; }
  .all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ver { display: none; }
  .bar-in { gap: 12px; }
  .nav a { font-size: 13px; }
  .hero { padding-top: calc(var(--bar-h) + 40px); }
  .hero-icon { width: 84px; height: 84px; border-radius: 20px; margin-bottom: 24px; }
  h1.hero-h { font-size: clamp(34px, 9.6vw, 44px); max-width: 100%; }
  h1.hero-h span { display: inline; }
  .hero-shot { padding-inline: 12px; }
  .all-grid { grid-template-columns: minmax(0, 1fr); }
  .plat { grid-template-columns: 1fr; }
  .plat .go { justify-self: start; }
  .skycard, .why-card { border-radius: 20px; }
  /* On a phone every window is drawn 640 app pixels wide, whatever it was
     given, so the page inside stays legible; and the bar drops its chip labels
     the way the app's own compact density does. */
  .app { --w: 640 !important; }
  .a-chip:not(.ico) { font-size: 0; gap: 0; padding: 0; width: calc(var(--u) * 28); justify-content: center; }
  .a-chip:not(.ico) .g { font-size: calc(var(--u) * 14); height: calc(var(--u) * 16); }
  .a-chip .hint { display: none; }
  .e-cols { flex-direction: column; gap: calc(var(--u) * 4); }
  .a-desk.tiles { grid-template-columns: 1fr; }
  .a-desk.tiles .a-pane:nth-child(2) { display: none; }
  .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-grid .pv-col:nth-child(3) { display: none; }
  .s-pop { right: calc(var(--u) * 10); width: min(calc(var(--u) * 460), calc(100% - calc(var(--u) * 20))); }
}

/* ---------------------------------------------------------------- Glimpses
   How the pages show the app since October 2026 (Lars: a full window "is just
   note-taking", basic stuff; give a glimpse instead, stylish, dark, so it fits
   the page). Not a window with its chrome: a few pieces of the app, in its own
   dark theme (theme.css: ground #0c0c0e, raised #1b1b1e, accent #6cb4ff),
   floating in the night the page stands in, each showing one moment nothing
   else does: a meeting typing itself out, a search that finds by meaning, two
   people on one line, a page that is a plain file.

   Drawn at --kw design pixels wide (600 unless a page says otherwise) and
   scaled with --k, one design pixel, the way the windows use --u, so a
   glimpse shrinks as one picture. The column it sits in must be an
   inline-size container (.vis is). A piece is a .gp placed with --x, --y and
   --w; .fade lets its foot dissolve, so it reads as part of something bigger. */
.glimpse {
  --kw: 600; --kh: 440;
  --k: min(1px, calc(100cqw / var(--kw)));
  --g-text: #e6e6e4; --g-sec: #9b9b98; --g-faint: #74767b; --g-rule: rgba(255, 255, 255, .09);
  --g-accent: #6cb4ff; --g-danger: #e07a73; --g-online: #46c47c;
  position: relative; isolation: isolate;
  width: calc(var(--k) * var(--kw)); height: calc(var(--k) * var(--kh)); margin-inline: auto;
  font-family: var(--ui); color: var(--g-text); text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* The pieces stand in a light of their own, the colour of the range. */
.glimpse::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 46% at 50% 54%, rgba(47, 123, 255, .26), rgba(47, 123, 255, .07) 55%, transparent 72%);
}
.gp {
  position: absolute; left: calc(var(--k) * var(--x, 0)); top: calc(var(--k) * var(--y, 0)); width: calc(var(--k) * var(--w, 300));
  border-radius: calc(var(--k) * 18); overflow: hidden;
  background: linear-gradient(180deg, rgba(36, 37, 42, .94), rgba(22, 23, 26, .96));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 calc(var(--k) * 34) calc(var(--k) * 80) calc(var(--k) * -26) rgba(0, 0, 0, .9),
    0 0 calc(var(--k) * 70) calc(var(--k) * -24) rgba(47, 123, 255, .45);
  font-size: calc(var(--k) * 14); line-height: 1.45;
  animation: drift 8s ease-in-out infinite alternate; animation-delay: var(--fd, 0s);
}
.gp.fade {
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 50%, transparent 97%);
}
.gp.fade.late {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 99%);
}
@keyframes drift { from { translate: 0 0; } to { translate: 0 calc(var(--k) * -9); } }

/* A page */
.g-page { padding: calc(var(--k) * 28) calc(var(--k) * 32) calc(var(--k) * 26); }
.g-title { font-size: calc(var(--k) * 27); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.g-meta { margin-top: calc(var(--k) * 6); font-size: calc(var(--k) * 13); color: var(--g-sec); }
.g-p { margin-top: calc(var(--k) * 12); color: rgba(230, 230, 228, .88); }
.g-todo { list-style: none; margin: calc(var(--k) * 12) 0 0; padding: 0; }
.g-todo li { display: flex; align-items: center; gap: calc(var(--k) * 10); padding: calc(var(--k) * 3.5) 0; }
.g-todo li::before {
  content: ""; flex: none; width: calc(var(--k) * 15); height: calc(var(--k) * 15); box-sizing: border-box;
  border-radius: calc(var(--k) * 4); border: calc(var(--k) * 1.5) solid var(--g-faint);
}
.g-todo li.on { color: var(--g-sec); text-decoration: line-through; text-decoration-color: rgba(155, 155, 152, .6); }
.g-todo li.on::before {
  border-color: var(--g-accent); background: var(--g-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.8 6.2-6.4' fill='none' stroke='%230c0c0e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.g-hl { background: rgba(232, 190, 80, .2); box-shadow: inset 0 calc(var(--k) * -2) 0 rgba(232, 190, 80, .7); border-radius: calc(var(--k) * 3); }
.g-card {
  margin-top: calc(var(--k) * 14); padding: calc(var(--k) * 14) calc(var(--k) * 16); border-radius: calc(var(--k) * 13);
  background: hsl(var(--h, 210) 70% 62% / .12); border: 1px solid hsl(var(--h, 210) 70% 72% / .2);
}
.g-card .t { font-weight: 700; font-size: calc(var(--k) * 15.5); }
.g-card .s { font-size: calc(var(--k) * 12.5); color: var(--g-sec); }
.g-card .l { margin-top: calc(var(--k) * 10); font-size: calc(var(--k) * 10); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: hsl(var(--h, 210) 70% 76%); }
.g-card .b { font-size: calc(var(--k) * 13.5); }

/* Someone else's caret, with their name over it, typing. A line types in
   steps and deletes itself again, in a loop. It is its max-width that grows,
   past the line's own width, so the caret stops where the words do whatever
   the font measures them at. */
.g-type {
  display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; max-width: 0;
  animation: g-typ var(--tt, 9s) steps(var(--ts, 30), end) infinite; animation-delay: var(--td, 0s);
}
@keyframes g-typ { 0%, 10% { max-width: 0; } 42%, 92% { max-width: calc(var(--k) * var(--tw, 330)); } 100% { max-width: 0; } }
/* .once types the line a single time when it scrolls in, and keeps it. */
.g-type.once { animation: none; }
.is-in .g-type.once { animation: g-once var(--tt, 1.6s) steps(var(--ts, 22), end) var(--td, .6s) both; }
@keyframes g-once { from { max-width: 0; } to { max-width: calc(var(--k) * var(--tw, 330)); } }
.g-caret {
  position: relative; display: inline-block; vertical-align: text-bottom;
  width: calc(var(--k) * 2); height: 1.25em; margin-left: 1px; background: hsl(var(--h) 80% 68%);
}
.g-caret::after {
  content: attr(data-who); position: absolute; left: 0; bottom: 100%; margin-bottom: calc(var(--k) * 2);
  padding: calc(var(--k) * 2) calc(var(--k) * 6); border-radius: calc(var(--k) * 5) calc(var(--k) * 5) calc(var(--k) * 5) 0;
  background: hsl(var(--h) 80% 68%); color: #0c0c0e; font-size: calc(var(--k) * 10.5); font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.g-faces { display: flex; align-items: center; gap: calc(var(--k) * 8); margin-top: calc(var(--k) * 18); font-size: calc(var(--k) * 12); color: var(--g-sec); }
.g-faces span { display: flex; }
.g-face {
  display: grid; place-items: center; width: calc(var(--k) * 26); height: calc(var(--k) * 26); border-radius: 50%;
  margin-right: calc(var(--k) * -6); background: hsl(var(--h) 45% 38%); color: #fff; font-size: calc(var(--k) * 11); font-weight: 700;
  box-shadow: 0 0 0 calc(var(--k) * 2) #18191c, 0 0 0 calc(var(--k) * 3.5) hsl(var(--h) 80% 68%);
}

/* A meeting: recording, the level moving, and the transcript landing line by
   line with every speaker told apart. */
.g-rec { display: flex; align-items: center; gap: calc(var(--k) * 10); padding: calc(var(--k) * 13) calc(var(--k) * 16); border-bottom: 1px solid var(--g-rule); }
.g-rec .dot { flex: none; width: calc(var(--k) * 10); height: calc(var(--k) * 10); border-radius: 50%; background: var(--g-danger); animation: g-pulse 1.6s ease-in-out infinite; }
@keyframes g-pulse { 50% { box-shadow: 0 0 0 calc(var(--k) * 5) rgba(224, 122, 115, .18); } }
.g-rec b { font-weight: 600; font-size: calc(var(--k) * 13.5); }
.g-rec .t { color: var(--g-sec); font-size: calc(var(--k) * 13); font-variant-numeric: tabular-nums; }
.g-wave { display: flex; align-items: center; gap: calc(var(--k) * 3); height: calc(var(--k) * 26); margin-left: auto; }
.g-wave i {
  width: calc(var(--k) * 3); height: 100%; border-radius: calc(var(--k) * 2); background: var(--g-accent);
  transform: scaleY(.18); animation: g-wave 1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -173ms);
}
@keyframes g-wave { to { transform: scaleY(var(--a, .9)); } }
.g-tr { padding: calc(var(--k) * 4) calc(var(--k) * 16) calc(var(--k) * 14); }
.g-line {
  display: grid; grid-template-columns: calc(var(--k) * 58) minmax(0, 1fr); gap: calc(var(--k) * 10);
  padding: calc(var(--k) * 9) 0; border-top: 1px solid var(--g-rule);
}
.g-line:first-child { border-top: 0; }
.g-line .who { font-size: calc(var(--k) * 12.5); font-weight: 700; color: hsl(var(--h) 75% 72%); padding-top: calc(var(--k) * 1); }
.g-line .say { color: rgba(230, 230, 228, .9); }
.js .g-line { opacity: 0; }
.js .is-in .g-line { animation: g-in .6s var(--ease) both; animation-delay: calc(.5s + var(--i) * .9s); }
@keyframes g-in { from { opacity: 0; translate: 0 calc(var(--k) * 8); filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: none; } }

/* A label that hangs off a piece and says the one thing that matters. */
.g-tag {
  display: flex; align-items: center; gap: calc(var(--k) * 9); padding: calc(var(--k) * 11) calc(var(--k) * 14);
  font-size: calc(var(--k) * 13); font-weight: 600; border-radius: calc(var(--k) * 14);
}
.g-tag .g { font-size: calc(var(--k) * 15); color: var(--g-accent); }

/* Search: a question typed in, and the answers it found by what they mean. */
.g-field {
  display: flex; align-items: center; gap: calc(var(--k) * 10); margin: calc(var(--k) * 14);
  padding: calc(var(--k) * 13) calc(var(--k) * 15); border-radius: calc(var(--k) * 12);
  border: calc(var(--k) * 1.5) solid rgba(108, 180, 255, .6); box-shadow: 0 0 0 calc(var(--k) * 4) rgba(108, 180, 255, .12);
  background: rgba(255, 255, 255, .03); font-size: calc(var(--k) * 16);
}
.g-field .g { font-size: calc(var(--k) * 16); color: var(--g-sec); }
.g-field .g-cur { display: inline-block; width: calc(var(--k) * 1.5); height: 1.15em; vertical-align: text-bottom; background: var(--g-text); animation: blink 1s steps(1) infinite; }
.g-hits { padding: 0 calc(var(--k) * 8) calc(var(--k) * 10); }
.g-hit { padding: calc(var(--k) * 10) calc(var(--k) * 12); border-radius: calc(var(--k) * 10); }
.js .g-hit { opacity: 0; }
.js .is-in .g-hit { animation: g-in .6s var(--ease) both; animation-delay: calc(2.5s + var(--i) * .16s); }
.g-hit.top { background: rgba(108, 180, 255, .1); }
.g-hit .ht { display: flex; align-items: center; gap: calc(var(--k) * 8); font-weight: 600; font-size: calc(var(--k) * 14); }
.g-hit .ht .g { color: var(--g-sec); font-size: calc(var(--k) * 13); }
.g-hit .sc { margin-left: auto; padding: calc(var(--k) * 1) calc(var(--k) * 7); border-radius: 99px; font-size: calc(var(--k) * 11.5); color: var(--g-accent); background: rgba(108, 180, 255, .14); font-variant-numeric: tabular-nums; }
.g-hit .sn { margin-top: calc(var(--k) * 3); font-size: calc(var(--k) * 13); color: var(--g-sec); }
.g-hit mark { color: var(--g-text); background: rgba(108, 180, 255, .24); border-radius: calc(var(--k) * 3); padding: 0 calc(var(--k) * 2); }

/* The slash menu, the highlight walking down it. */
.g-slash { padding: calc(var(--k) * 6); }
.g-slash .it { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(var(--k) * 11); height: calc(var(--k) * 38); padding: 0 calc(var(--k) * 8); font-size: calc(var(--k) * 14); }
.g-slash .it em { margin-left: auto; font-style: normal; font-size: calc(var(--k) * 12); color: var(--g-faint); }
.g-slash .gl { display: grid; place-items: center; width: calc(var(--k) * 26); height: calc(var(--k) * 26); border-radius: calc(var(--k) * 7); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.g-slash .gl svg { width: calc(var(--k) * 15); height: calc(var(--k) * 15); fill: none; stroke: var(--g-text); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.g-slash .hl { position: absolute; left: calc(var(--k) * 6); right: calc(var(--k) * 6); top: calc(var(--k) * 6); height: calc(var(--k) * 38); border-radius: calc(var(--k) * 9); background: rgba(108, 180, 255, .17); animation: g-walk 7s var(--ease) infinite; }
@keyframes g-walk {
  0%, 16% { translate: 0 0; }
  22%, 38% { translate: 0 calc(var(--k) * 38); }
  44%, 60% { translate: 0 calc(var(--k) * 76); }
  66%, 92% { translate: 0 calc(var(--k) * 114); }
  100% { translate: 0 0; }
}
.g-slashline { color: rgba(230, 230, 228, .88); }
.g-slashline b { font-weight: 400; color: var(--g-accent); }

/* A comment beside a paragraph. */
.g-comment { padding: calc(var(--k) * 13) calc(var(--k) * 15); }
.g-comment .hd { display: flex; align-items: center; gap: calc(var(--k) * 8); font-size: calc(var(--k) * 12.5); font-weight: 700; }
.g-comment .hd .g-face { width: calc(var(--k) * 22); height: calc(var(--k) * 22); font-size: calc(var(--k) * 10); margin: 0; box-shadow: none; }
.g-comment .hd small { font-weight: 500; font-size: calc(var(--k) * 11.5); color: var(--g-faint); }
.g-comment p { margin-top: calc(var(--k) * 6); font-size: calc(var(--k) * 13.5); color: rgba(230, 230, 228, .9); }

/* A folder, and a page as the plain file it is. */
.g-folder .hd { display: flex; align-items: center; gap: calc(var(--k) * 8); padding: calc(var(--k) * 12) calc(var(--k) * 15); border-bottom: 1px solid var(--g-rule); font-size: calc(var(--k) * 13); font-weight: 600; }
.g-folder .hd .g { color: var(--g-accent); font-size: calc(var(--k) * 14); }
.g-folder .rows { padding: calc(var(--k) * 6); }
.g-folder .row { display: flex; align-items: center; gap: calc(var(--k) * 9); padding: calc(var(--k) * 7) calc(var(--k) * 9); border-radius: calc(var(--k) * 7); font-size: calc(var(--k) * 13); }
.g-folder .row .g { font-size: calc(var(--k) * 13); color: var(--g-sec); }
.g-folder .row.dir .g { color: var(--g-accent); }
.g-folder .row.on { background: rgba(108, 180, 255, .22); }
.g-folder .row.on .g { color: var(--g-text); }
.g-folder .row em { margin-left: auto; font-style: normal; font-size: calc(var(--k) * 11.5); color: var(--g-faint); }
.g-md {
  margin: 0; padding: calc(var(--k) * 16) calc(var(--k) * 18); white-space: pre; overflow: hidden;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(var(--k) * 12.5); line-height: 1.75; color: #cfcfcc;
}
.g-md .h { color: var(--g-accent); font-weight: 600; }
.g-md .m { color: var(--g-faint); }
.g-name { display: flex; align-items: center; gap: calc(var(--k) * 8); padding: calc(var(--k) * 10) calc(var(--k) * 16); border-bottom: 1px solid var(--g-rule); font-size: calc(var(--k) * 12); color: var(--g-sec); }

@media (prefers-reduced-motion: reduce) {
  .gp, .g-wave i, .g-rec .dot, .g-slash .hl { animation: none; }
  .g-type { animation: none; max-width: none; }
  .js .g-hit { opacity: 1; animation: none !important; }
  .js .g-line { opacity: 1; animation: none !important; }
}