/* The download page's own stylesheet. site.css gives every page its type, its colours, the bar, the
   button and the footer; this adds what only the download page has: the Space colours, Glossium's
   sidebar as the page's navigation, the page as a card beside it, and drawings of Glossium's window
   made in HTML and CSS (docs/DESIGN.md, design/system/).

   The drawings are measured in design points: --u is one point, so 248 points is calc(248 * var(--u)).
   A frame sets --u from its own width, so a window draws at any size and its text stays sharp. Nothing
   here loads anything: system fonts only, no images, no data: URLs (the site's CSP allows its own files). */

:root {
  color-scheme: light dark;

  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "New York", ui-serif, "Iowan Old Style", Georgia, serif;

  --label-3: rgb(0 0 0 / 0.38);
  --fill: rgb(0 0 0 / 0.1);
  --fill-2: rgb(0 0 0 / 0.07);
  --fill-3: rgb(0 0 0 / 0.045);
  --tint: #0a74e8;
  --purple: #af52de;

  /* Glass and the objects on it. */
  --lens: rgb(255 255 255 / 0.62);
  --lens-hover: rgb(255 255 255 / 0.3);
  --lens-rim-top: rgb(255 255 255 / 0.95);
  --lens-rim-bottom: rgb(255 255 255 / 0.35);
  --lens-line: rgb(0 0 0 / 0.06);
  --face-top: rgb(255 255 255 / 0.98);
  --face-bottom: rgb(250 250 252 / 0.94);
  --highlight: #ffffff;
  --contact: rgb(0 0 0 / 0.12);
  --ambient: rgb(0 0 0 / 0.07);
  --veil: rgb(246 246 248 / 0.42);
  --window-bg: #ececee;
  --e3: 0 2px 6px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);
  --e4: 0 4px 12px rgb(0 0 0 / 0.1), 0 28px 70px rgb(0 0 0 / 0.24);

  /* The desktop behind a window, as in the design reference. */
  --desk-1: #f9d9c4;
  --desk-2: #c9d8fb;
  --desk-3: #d7c8f2;
  --desk-base: #eef1f8;

  /* Space colours, with the ink each uses where it needs contrast. The wash is the pastel at 20%. */
  --sky: #8cc2f8; --sky-ink: #1d5fa6;
  --mint: #8fdcb1; --mint-ink: #19734a;
  --lavender: #bcaaf4; --lavender-ink: #5b3fb8;
  --peach: #f8c299; --peach-ink: #9a4c12;
  --rose: #f3a6c2; --rose-ink: #a32d5c;
  --aqua: #7fd8df; --aqua-ink: #11707a;
  --coral: #f6a394; --coral-ink: #a8382a;
  --butter: #f3d987; --butter-ink: #7d6100;
  --mist: #b8c1cd; --mist-ink: #4a5566;
  --wash: 20%;

  /* The web page inside the mock window. */
  --site-bg: #fbfaf8;
  --site-ink: #1d1d1f;
  --site-line: rgb(29 29 31 / 0.1);
  --site-link: #b2541d;

  /* Springs (docs/DESIGN.md, Motion), sampled from design/system/motion.js as CSS easings. */
  --quick: linear(0, 0.111, 0.312, 0.505, 0.66, 0.773, 0.852, 0.905, 0.94, 0.962, 0.977, 0.986, 0.991, 0.995, 0.997, 0.998, 0.999, 1); --quick-ms: 371ms;
  --snappy: linear(0, 0.05, 0.165, 0.305, 0.446, 0.574, 0.684, 0.774, 0.844, 0.897, 0.935, 0.962, 0.981, 0.993, 1, 1.004, 1.006, 1.006, 1.006, 1.005, 1.004, 1.004, 1.003, 1.002, 1.001, 1); --snappy-ms: 558ms;
  --smooth: linear(0, 0.033, 0.11, 0.207, 0.309, 0.41, 0.502, 0.585, 0.657, 0.718, 0.77, 0.814, 0.85, 0.879, 0.903, 0.923, 0.939, 0.951, 0.961, 0.97, 0.976, 0.981, 0.985, 0.988, 0.991, 0.993, 0.994, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 1); --smooth-ms: 737ms;
  --bouncy: linear(0, 0.034, 0.119, 0.233, 0.359, 0.485, 0.603, 0.709, 0.799, 0.873, 0.931, 0.975, 1.006, 1.026, 1.039, 1.045, 1.046, 1.044, 1.04, 1.034, 1.028, 1.022, 1.017, 1.012, 1.008, 1.005, 1.003, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 1); --bouncy-ms: 821ms;
  --gentle: linear(0, 0.023, 0.08, 0.157, 0.242, 0.33, 0.415, 0.496, 0.569, 0.635, 0.693, 0.744, 0.788, 0.825, 0.857, 0.883, 0.905, 0.924, 0.939, 0.951, 0.961, 0.969, 0.976, 0.981, 0.986, 0.989, 0.991, 0.994, 0.995, 0.996, 0.997, 0.998, 0.999, 1); --gentle-ms: 729ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --label-3: rgb(255 255 255 / 0.4);
    --fill: rgb(255 255 255 / 0.12);
    --fill-2: rgb(255 255 255 / 0.09);
    --fill-3: rgb(255 255 255 / 0.06);
    --tint: #2f8cff;
    --purple: #bf5af2;
    --lens: rgb(255 255 255 / 0.14);
    --lens-hover: rgb(255 255 255 / 0.07);
    --lens-rim-top: rgb(255 255 255 / 0.32);
    --lens-rim-bottom: rgb(255 255 255 / 0.08);
    --lens-line: rgb(0 0 0 / 0.25);
    --face-top: rgb(255 255 255 / 0.16);
    --face-bottom: rgb(255 255 255 / 0.11);
    --highlight: rgb(255 255 255 / 0.22);
    --contact: rgb(0 0 0 / 0.45);
    --ambient: rgb(0 0 0 / 0.3);
    --veil: rgb(30 30 34 / 0.5);
    --window-bg: #262628;
    --e3: 0 2px 6px rgb(0 0 0 / 0.35), 0 16px 40px rgb(0 0 0 / 0.5);
    --e4: 0 4px 12px rgb(0 0 0 / 0.4), 0 28px 70px rgb(0 0 0 / 0.6);
    --desk-1: #3b2a3f;
    --desk-2: #1d2e52;
    --desk-3: #2c2148;
    --desk-base: #15161c;
    --sky: #4f8fd0; --sky-ink: #a9d1fb; --mint: #4fa97c; --mint-ink: #a6e8c4;
    --lavender: #8a76d6; --lavender-ink: #d2c6fb; --peach: #c98a5c; --peach-ink: #fbd3b4;
    --rose: #c76d91; --rose-ink: #f8c3d7; --aqua: #46a8b0; --aqua-ink: #a5e7ec;
    --coral: #c96d5e; --coral-ink: #fbc0b5; --butter: #b99d48; --butter-ink: #f6e3a6;
    --mist: #7b8594; --mist-ink: #ccd3dd;
    --wash: 24%;
    --site-bg: #1b1a19;
    --site-ink: #e9e7e3;
    --site-line: rgb(233 231 227 / 0.12);
    --site-link: #e08a55;
  }
}
/* Increase Contrast: stronger labels, and the washes halve (docs/DESIGN.md, Accessibility). */
@media (prefers-contrast: more) {
  :root { --label-3: var(--label-2); --wash: 10%; }
}

/* ---------- Small parts site.css doesn't have. ---------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Glyphs: SF Symbols stand-ins from the page's sprite, stroked like the regular weight. */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.i.solid { fill: currentColor; stroke: none; }
/* The sprite holding the glyphs: present, but drawn nowhere. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.button .i { width: 18px; height: 18px; stroke-width: 2; }

/* ---------- The window mock, in design points (1180 x 740, like the design reference). ---------- */

/* A frame gives the window its size: --u is one point. */
.gw-frame { container-type: inline-size; position: relative; width: 100%; }
.gw-frame > .gw { --u: calc(100cqw / 1180); }

.gw {
  --space: var(--sky); --space-ink: var(--sky-ink);
  position: relative; width: calc(1180 * var(--u)); height: calc(740 * var(--u));
  border-radius: calc(20 * var(--u)); overflow: hidden; isolation: isolate;
  font: 400 calc(13 * var(--u))/1.25 var(--font); color: var(--label); text-align: left; letter-spacing: 0;
  background: var(--desk-base);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.28), 0 calc(30 * var(--u)) calc(90 * var(--u)) rgb(0 0 0 / 0.3), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / 0.16);
  -webkit-user-select: none; user-select: none;
}
.gw[data-space="sky"] { --space: var(--sky); --space-ink: var(--sky-ink); }
.gw[data-space="mint"] { --space: var(--mint); --space-ink: var(--mint-ink); }
.gw[data-space="lavender"] { --space: var(--lavender); --space-ink: var(--lavender-ink); }
.gw[data-space="peach"] { --space: var(--peach); --space-ink: var(--peach-ink); }
.gw[data-space="rose"] { --space: var(--rose); --space-ink: var(--rose-ink); }
.gw[data-space="aqua"] { --space: var(--aqua); --space-ink: var(--aqua-ink); }
.gw[data-space="coral"] { --space: var(--coral); --space-ink: var(--coral-ink); }
.gw[data-space="butter"] { --space: var(--butter); --space-ink: var(--butter-ink); }
.gw[data-space="mist"] { --space: var(--mist); --space-ink: var(--mist-ink); }
.gw .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6; }

/* The backdrop: the desktop through the window's glass, under a neutral veil, washed with the Space's colour. */
.gw-backdrop { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 10% 0%, var(--desk-1) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 10%, var(--desk-2) 0%, transparent 60%),
    radial-gradient(80% 90% at 60% 100%, var(--desk-3) 0%, transparent 60%),
    var(--desk-base); }
.gw-backdrop::before { content: ""; position: absolute; inset: 0; background: var(--veil); }
.gw-backdrop::after { content: ""; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--space) var(--wash), transparent); }

/* The docked sidebar. */
.gw-side { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: calc(248 * var(--u)); padding: calc(8 * var(--u));
  display: flex; flex-direction: column; }
.gw-top { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(2 * var(--u)) 0 calc(6 * var(--u)); color: var(--label-2); }
.gw-traffic { display: flex; gap: calc(8 * var(--u)); margin-right: calc(8 * var(--u)); }
.gw-traffic i { display: block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.16); }
.gw-traffic i:nth-child(1) { background: #ff5f57; } .gw-traffic i:nth-child(2) { background: #febc2e; } .gw-traffic i:nth-child(3) { background: #28c840; }
.gw-top .b { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(6 * var(--u)); }
.gw-top .sp { flex: 1; }
.gw-top .gloss-b { color: var(--purple); }
.gw-addr { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(32 * var(--u)); margin: calc(6 * var(--u)) calc(2 * var(--u)) calc(10 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); font-weight: 500;
  background: var(--fill-3); box-shadow: inset 0 0 0 0.5px var(--glass-line); }
.gw-addr .host { flex: 1; }
.gw-addr .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--label-3); }

/* The tab list of each Space; switching Spaces slides them by the Space's direction. */
.gw-tabs { position: relative; flex: 1; overflow: hidden; }
.gw-list { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(2 * var(--u));
  opacity: 0; transform: translateX(calc(var(--from, 1) * 40%)); }
.gw-list.is-on { opacity: 1; transform: none; }
.gw-list.is-before { --from: -1; }
.gw-head { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)); font-weight: 600; font-size: calc(12 * var(--u)); flex: none; }
.gw-head .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--label-2); }
.gw-row { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(8 * var(--u));
  border-radius: calc(8 * var(--u)); flex: none; white-space: nowrap; }
.gw-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gw-row.sel { font-weight: 600; background: var(--lens);
  box-shadow: inset 0 0.5px 0 var(--lens-rim-top), inset 0 -0.5px 0 var(--lens-rim-bottom), 0 0 0 0.5px var(--lens-line); }
.gw-row.new { color: var(--label-2); }
.gw-row.new .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(1 * var(--u)); }
.gw-row.sleep > span { color: var(--label-2); }
.gw-row.sleep .fav { opacity: 0.6; filter: grayscale(0.4); }
.gw-div { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); flex: none; }
.gw-div b { flex: 1; height: 0.5px; background: var(--separator); }
.gw-div span { font-size: calc(11 * var(--u)); font-weight: 500; color: var(--label-3); }
.fav { display: inline-grid; place-items: center; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u));
  background: var(--f, #888); color: #fff; font: 700 calc(9 * var(--u))/1 var(--font-rounded); font-style: normal; }
.gw-bottom { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(2 * var(--u)); color: var(--label-2); flex: none; }
.gw-bottom .b { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.gw-dots { flex: 1; display: flex; justify-content: center; align-items: center; gap: calc(2 * var(--u)); }
.gw-dots i { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); color: var(--label-3); }
.gw-dots i::before { content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: currentColor; }
.gw-dots i.on { color: var(--space-ink); }
.gw-dots i.on::before { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }

/* The page: an opaque card 8 points inside the window. */
.gw-page { position: absolute; z-index: 1; top: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); left: calc(248 * var(--u));
  border-radius: calc(12 * var(--u)); overflow: hidden; background: var(--site-bg); color: var(--site-ink);
  box-shadow: 0 0 0 0.5px var(--separator), 0 1px 3px var(--ambient); }

/* A web page: a reading site, mostly bars so nothing on it is read as copy. */
.site { position: absolute; inset: 0; width: calc(916 * var(--u)); font-family: var(--font-serif); }
.site-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(48 * var(--u)); border-bottom: 1px solid var(--site-line);
  font: 600 calc(13 * var(--u))/1 var(--font); letter-spacing: 0.06em; }
.site-bar i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--f, #b2541d); }
.site-bar .nav { margin-left: auto; display: flex; gap: calc(14 * var(--u)); }
.site-bar .nav b { display: block; width: calc(44 * var(--u)); height: calc(7 * var(--u)); border-radius: 99px; background: var(--site-line); }
.site-hero { margin: calc(26 * var(--u)) calc(48 * var(--u)) 0; height: calc(232 * var(--u)); border-radius: calc(8 * var(--u));
  background: radial-gradient(60% 80% at 30% 40%, #ffd9a8 0%, transparent 60%), radial-gradient(50% 70% at 75% 60%, #f29b6b 0%, transparent 65%),
    radial-gradient(40% 50% at 55% 30%, #fff3d6 0%, transparent 70%), linear-gradient(140deg, #3b1d12, #7a3a1c 55%, #2a120b); }
.site .t { margin: calc(24 * var(--u)) calc(48 * var(--u)) calc(14 * var(--u)); font: 700 calc(32 * var(--u))/1.12 var(--font-serif); letter-spacing: -0.01em; }
.lines { margin: 0 calc(48 * var(--u)); display: grid; gap: calc(11 * var(--u)); max-width: calc(620 * var(--u)); }
.lines b { display: block; height: calc(9 * var(--u)); border-radius: 99px; background: var(--site-line); }
.lines b:nth-child(4n) { width: 72%; }
.lines b.link { background: color-mix(in srgb, var(--site-link) 45%, transparent); width: 34%; height: calc(9 * var(--u)); }
.lines .link-row { display: flex; gap: calc(8 * var(--u)); }
.lines .link-row b { flex: 1; }
.lines .link-row b.link { flex: none; position: relative; }
.gw-page > .site { opacity: 0; }
.gw-page > .site.is-on { opacity: 1; }
.site.work { background: #fafbfd; }
.site.work .t { margin-top: calc(34 * var(--u)); }
.checks { display: grid; gap: calc(10 * var(--u)); margin: 0 calc(48 * var(--u)); max-width: calc(620 * var(--u)); }
.checks p { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); box-shadow: inset 0 0 0 1px var(--site-line); }
.checks i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(5 * var(--u)); box-shadow: inset 0 0 0 1.5px var(--site-line); }
.checks .done i { background: #19734a; box-shadow: none; }
.checks b { flex: 1; height: calc(8 * var(--u)); border-radius: 99px; background: var(--site-line); max-width: 60%; }
.checks .done b { opacity: 0.55; }
.site.home .site-hero { background: radial-gradient(45% 60% at 40% 55%, #f3c27e 0%, transparent 70%), radial-gradient(35% 45% at 62% 48%, #d98b45 0%, transparent 70%),
    radial-gradient(70% 50% at 50% 100%, #6b3b1c 0%, transparent 70%), linear-gradient(160deg, #f6e7d2, #e7c9a2 55%, #9a6a3f); }
.site.alt { background: #f4f6fb; }
.site.alt .site-hero { height: calc(150 * var(--u)); background: linear-gradient(140deg, #9fd2ff, #4b7cd6 60%, #263f8a); }
@media (prefers-color-scheme: dark) { .site.alt { background: #17191f; } .site.work { background: #191b20; } }

/* The command bar: regular glass, centred over the page, its top a fifth of the way down. */
.gw-cmd { position: absolute; z-index: 6; top: calc(150 * var(--u)); left: calc(248 * var(--u) + (916 * var(--u) - 640 * var(--u)) / 2); width: calc(640 * var(--u));
  padding: calc(8 * var(--u)); border-radius: calc(18 * var(--u)); color: var(--label);
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: 0 0 0 0.5px var(--glass-line), var(--e3);
  opacity: 0; transform: translateY(calc(-16 * var(--u))); visibility: hidden; }
.gw-cmd .field { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: calc(18 * var(--u)); }
.gw-cmd .field .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--label-2); }
.gw-cmd .typed::after { content: ""; display: inline-block; width: 1.5px; height: calc(20 * var(--u)); margin-left: 1px; vertical-align: calc(-3 * var(--u)); background: var(--tint); }
.gw-cmd .sep { height: 0.5px; margin: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); background: var(--separator); }
.gw-cmd .lab { padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: var(--label-2); }
.sugg { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(10 * var(--u)); white-space: nowrap; }
.sugg > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sugg small { color: var(--label-2); font-size: inherit; }
.sugg .i { color: var(--label-2); }
.sugg .sdot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12); }
.sugg .hint { flex: none; color: var(--label-3); font-size: calc(12 * var(--u)); }
.sugg.hl { background: color-mix(in srgb, var(--tint) 16%, transparent); }
.sugg.hl .i { color: var(--accent); }
.sugg .kb { flex: none; padding: calc(3 * var(--u)) calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--fill-3); color: var(--label-2); font-size: calc(11 * var(--u)); font-weight: 500; }

/* Clear-glass round buttons, as Peek has. */
.round { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; color: #fff;
  background: rgb(40 40 44 / 0.35); -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.55), inset 0 -0.5px 0 rgb(255 255 255 / 0.2), 0 0 0 0.5px rgb(255 255 255 / 0.18); }

/* Gloss, in the side panel: on the backdrop, mirrored on the right; the summary in New York. */
.gw-panel { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: calc(348 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));
  display: flex; flex-direction: column; gap: calc(12 * var(--u)); opacity: 0; transform: translateX(calc(24 * var(--u))); visibility: hidden; }
.gw-panel .head { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(8 * var(--u)); font-weight: 600; }
.gw-panel .head .i { color: var(--purple); }
.gw-panel .head .sp { flex: 1; }
.gw-panel .head .x { color: var(--label-2); }
.gw-panel .src { display: flex; gap: calc(10 * var(--u)); align-items: center; margin: 0 calc(8 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(12 * var(--u));
  background: var(--fill-3); box-shadow: inset 0 0 0 0.5px var(--glass-line); }
.gw-panel .src .fav { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(12 * var(--u)); }
.gw-panel .src b { display: block; font-weight: 600; }
.gw-panel .src small { font-size: calc(11 * var(--u)); color: var(--label-2); }
.gw-panel .summary { margin: 0 calc(10 * var(--u)); font: 400 calc(16 * var(--u))/1.45 var(--font-serif); }
.gw-panel .lab { margin: calc(4 * var(--u)) calc(10 * var(--u)) 0; font-size: calc(11 * var(--u)); font-weight: 600; color: var(--label-2); }
.gw-panel .pts { display: grid; gap: calc(10 * var(--u)); margin: 0 calc(10 * var(--u)); }
.gw-panel .pt { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.gw-panel .pt::before { content: ""; width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: var(--label-2); flex: none; }
.gw-panel .pt b { flex: 1; height: calc(8 * var(--u)); border-radius: 99px; background: var(--fill); }
.cite { display: inline-grid; place-items: center; min-width: calc(16 * var(--u)); height: calc(16 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(4 * var(--u));
  font: 600 calc(10 * var(--u))/1 var(--font); color: var(--accent); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.gw-panel .composer { margin-top: auto; padding: calc(8 * var(--u)); border-radius: calc(14 * var(--u)); display: grid; gap: calc(8 * var(--u));
  background: linear-gradient(180deg, var(--face-top), var(--face-bottom));
  box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 0.5px var(--glass-line), 0 1px 1.5px var(--contact), 0 2px 6px var(--ambient); }
.gw-panel .composer .ask { height: calc(32 * var(--u)); display: flex; align-items: center; padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u));
  color: var(--label-3); background: var(--fill-3); box-shadow: inset 0 1px 1.5px rgb(0 0 0 / 0.08); }
.gw-panel .chips { display: flex; gap: calc(6 * var(--u)); }
.gw-panel .chip { height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)); display: inline-flex; align-items: center; border-radius: 99px; font-size: calc(12 * var(--u)); font-weight: 500;
  background: var(--lens-hover); box-shadow: inset 0 0.5px 0 var(--lens-rim-top), 0 0 0 0.5px var(--glass-line); }

@media (prefers-reduced-motion: no-preference) {
  .gw-backdrop::after { transition: background-color var(--smooth-ms) ease-out; }
  .gw-page > .site, .lines b { transition: opacity 300ms ease-out, background-color 300ms ease-out; }
  .gw-list { transition: transform var(--smooth-ms) var(--smooth), opacity 200ms ease-out; }
  .gw-dots i { transition: color 120ms ease-out; }
}
/* Reduce Motion: a Space's tabs cross-fade instead of sliding. */
@media (prefers-reduced-motion: reduce) {
  .gw-list { transform: none !important; transition: opacity 200ms ease-out; }
  .gw-backdrop::after { transition: background-color 200ms ease-out; }
}
/* Reduce Transparency: glass becomes the window's opaque colour, keeping its outline and the wash. */
@media (prefers-reduced-transparency: reduce) {
  .gw-cmd { background: var(--window-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .round { background: rgb(40 40 44 / 0.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .gw, .gw-cmd, .gw-page { border: 1px solid CanvasText; }
}

/* ---------- The page as a Glossium window. ---------- */

:root { --side-w: 248px; --gutter: clamp(20px, 5vw, 72px); }
body[data-space="sky"] { --space: var(--sky); --space-ink: var(--sky-ink); }
body[data-space="mint"] { --space: var(--mint); --space-ink: var(--mint-ink); }
body[data-space="lavender"] { --space: var(--lavender); --space-ink: var(--lavender-ink); }
body[data-space="peach"] { --space: var(--peach); --space-ink: var(--peach-ink); }
body[data-space="rose"] { --space: var(--rose); --space-ink: var(--rose-ink); }
body[data-space="aqua"] { --space: var(--aqua); --space-ink: var(--aqua-ink); }
body[data-space="coral"] { --space: var(--coral); --space-ink: var(--coral-ink); }
body[data-space="butter"] { --space: var(--butter); --space-ink: var(--butter-ink); }
body[data-space="mist"] { --space: var(--mist); --space-ink: var(--mist-ink); }
[data-colour="sky"] { --c: var(--sky); } [data-colour="mint"] { --c: var(--mint); } [data-colour="lavender"] { --c: var(--lavender); }
[data-colour="peach"] { --c: var(--peach); } [data-colour="rose"] { --c: var(--rose); } [data-colour="aqua"] { --c: var(--aqua); }
[data-colour="coral"] { --c: var(--coral); } [data-colour="butter"] { --c: var(--butter); } [data-colour="mist"] { --c: var(--mist); }

/* The backdrop: the desktop through the window's glass, under the veil, washed with the Space's colour. */
body { min-height: 100vh; background: var(--desk-base); }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2;
  background:
    linear-gradient(var(--veil), var(--veil)),
    radial-gradient(120% 90% at 10% 0%, var(--desk-1) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 10%, var(--desk-2) 0%, transparent 60%),
    radial-gradient(80% 90% at 60% 100%, var(--desk-3) 0%, transparent 60%),
    var(--desk-base); }
body::after { z-index: -1; background-color: color-mix(in srgb, var(--space) calc(var(--wash) * 2), transparent); }
@media (prefers-reduced-motion: no-preference) { body::after { transition: background-color var(--smooth-ms) ease-out; } }

/* ---------- The sidebar: the site's navigation, drawn as Glossium's. ---------- */

.side {
  position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--side-w);
  display: flex; flex-direction: column; padding: 8px; color: var(--label); font-size: 13px;
}
.side .brand { font-size: 15px; gap: 8px; padding-left: 6px; }
.side .brand img { width: 22px; height: 22px; border-radius: 5px; }
.side-top { display: flex; align-items: center; justify-content: space-between; height: 40px; padding-right: 2px; }
.tb { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--label-2); cursor: pointer; }
.tb:hover { background: var(--lens-hover); color: var(--label); }
.tb:active { transform: scale(0.92); }
.addr {
  display: flex; align-items: center; gap: 7px; width: calc(100% - 4px); height: 32px; margin: 6px 2px 10px; padding: 0 6px 0 10px;
  border: 0; border-radius: 8px; font: 500 13px/1 var(--font); color: var(--label); text-align: left; cursor: pointer;
  background: var(--fill-3); box-shadow: inset 0 0 0 0.5px var(--glass-line);
}
.addr:hover { background: var(--lens-hover); }
.addr .i { width: 12px; height: 12px; color: var(--label-3); }
.addr span { flex: 1; }
.addr kbd, .bar-hint { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; font: 500 11px/1 var(--font); color: var(--label-2); background: var(--fill-3); box-shadow: inset 0 0 0 0.5px var(--glass-line); }
.tabs { position: relative; flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 2px; overflow: hidden auto; }
.space-head { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; font-weight: 600; font-size: 12px; }
.space-head .i { width: 14px; height: 14px; color: var(--label-2); }
/* The logo, small: the glass app icon, rounded as macOS rounds it. */
.logo-tile { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.row {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 6px 0 8px;
  border: 0; border-radius: 8px; background: transparent; font: 400 13px/1 var(--font); color: var(--label); text-decoration: none; text-align: left; cursor: pointer;
}
.row:hover { background: var(--lens-hover); }
.row[aria-current] { font-weight: 600; }
.row[aria-current]:hover { background: transparent; }
.row > span:last-child { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row .tile { display: grid; place-items: center; width: 16px; height: 16px; color: var(--label-2); flex: none; }
.row .tile .i { width: 15px; height: 15px; }
.row.pin .tile { color: var(--accent); }
.row.new { color: var(--label-2); }
.row.new .i { width: 14px; height: 14px; margin: 0 1px; }
.row:focus-visible { outline-offset: -1px; }
.divider { display: flex; align-items: center; gap: 8px; height: 20px; padding: 0 4px 0 8px; }
.divider b { flex: 1; height: 0.5px; background: var(--separator); }
.divider .clear { padding: 2px 4px; border: 0; border-radius: 4px; background: transparent; font: 500 11px/1 var(--font); color: var(--label-3); cursor: pointer; opacity: 0; }
.side:hover .clear, .clear:focus-visible { opacity: 1; }
.clear:hover { color: var(--label); background: var(--lens-hover); }
.today { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pill {
  position: absolute; z-index: 0; top: 0; left: 2px; right: 2px; height: 32px; border-radius: 8px; opacity: 0;
  background: var(--lens); box-shadow: inset 0 0.5px 0 var(--lens-rim-top), inset 0 -0.5px 0 var(--lens-rim-bottom), 0 0 0 0.5px var(--lens-line);
}
.side-bottom { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 2px; color: var(--label-2); }
.library { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.dots { flex: 1; display: flex; justify-content: center; }
.dots button { display: grid; place-items: center; width: 22px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--label-3); cursor: pointer; }
.dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dots button:hover { background: var(--lens-hover); }
.dots button:hover::before { background: var(--c); transform: scale(1.35); }
.dots button[aria-checked="true"] { color: var(--space-ink); }
.dots button[aria-checked="true"]::before { width: 8px; height: 8px; }
.dots button:focus-visible { outline-offset: -1px; }
@media (prefers-reduced-motion: no-preference) {
  .pill { transition: transform var(--snappy-ms) var(--snappy), opacity 120ms ease-out; }
  .dots button::before { transition: transform var(--bouncy-ms) var(--bouncy), background-color 120ms ease-out; }
}
.show-side[hidden] { display: none; }

/* ---------- The page: an opaque card 8 points inside the window. ---------- */

.page-card {
  position: relative; min-height: calc(100vh - 16px); margin: 8px 8px 8px var(--side-w);
  border-radius: 12px; background: var(--page); overflow: clip;
  box-shadow: 0 0 0 0.5px var(--separator), 0 1px 3px var(--ambient);
}

/* ⌘S: the sidebar slides away at a constant pace and the page takes the window. */
.side-hidden .side { transform: translateX(-100%); visibility: hidden; }
.side-hidden .page-card { margin-left: 8px; }
.show-side { position: fixed; z-index: 25; top: 16px; left: 16px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: 0 0 0 0.5px var(--glass-line), var(--e3); color: var(--label); }
@media (prefers-reduced-motion: no-preference) {
  .side { transition: transform 200ms linear, visibility 0s linear 200ms; }
  .side-hidden .side { transition: transform 200ms linear, visibility 0s linear 200ms; }
  :root:not(.side-hidden) .side { transition: transform 200ms linear, visibility 0s; }
  .page-card { transition: margin-left 200ms linear; }
}
@media (prefers-reduced-motion: reduce) {
  .side { transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
  .side-hidden .side { transform: none; opacity: 0; }
}

/* On a phone the site's shared bar is the navigation, and the sidebar stays out of the way. */
@media (min-width: 861px) { .bar { display: none; } }
@media (max-width: 860px) {
  .side, .show-side, .switch-row { display: none; }
  .page-card, .side-hidden .page-card { margin: 0 8px 8px; }
}

/* ---------- The command bar. ---------- */

.cmd-layer { position: fixed; inset: 0; z-index: 40; }
.cmd-layer[hidden] { display: none; }
.cmd {
  --u: 1px; --left: calc(var(--side-w) + (100vw - var(--side-w)) / 2);
  position: absolute; top: 20vh; left: var(--left); width: min(640px, calc(100vw - var(--side-w) - 48px));
  padding: 8px; border-radius: 18px; color: var(--label);
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: 0 0 0 0.5px var(--glass-line), var(--e4);
  opacity: 0; transform: translate(-50%, -16px);
}
.cmd::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(172deg, var(--rim-1) 0%, var(--rim-2) 22%, transparent 50%, var(--rim-2) 80%, var(--rim-3) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.side-hidden .cmd { --left: 50vw; width: min(640px, calc(100vw - 48px)); }
.is-open .cmd { opacity: 1; transform: translate(-50%, 0); }
.cmd-field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 12px; }
.cmd-field .i { width: 18px; height: 18px; color: var(--label-2); }
.cmd-field input { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; font: 400 18px/1 var(--font); color: var(--label); caret-color: var(--tint); }
.cmd-field input:focus { outline: none; }
.cmd-field input::placeholder { color: var(--label-3); }
.cmd-sep { height: 0.5px; margin: 4px 8px 6px; background: var(--separator); }
.cmd-list { max-height: min(56vh, 460px); overflow-y: auto; }
.cmd-list .lab { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--label-2); }
.cmd-list .sugg { cursor: pointer; font-size: 13px; }
.cmd-list .sugg .i.solid { stroke: none; }
.cmd-list .sugg:hover:not(.hl) { background: var(--lens-hover); }
.cmd-list .empty { padding: 12px 10px; font-size: 13px; color: var(--label-2); }
@media (prefers-reduced-motion: no-preference) {
  .cmd { transition: opacity 120ms ease-out, transform 120ms ease-out; }
  .is-open .cmd { transition: opacity 300ms ease-out, transform var(--gentle-ms) var(--gentle); }
}
@media (prefers-reduced-motion: reduce) {
  .cmd, .is-open .cmd { transform: translate(-50%, 0); transition: opacity 200ms ease-out; }
}
@media (max-width: 860px) { .cmd { --left: 50vw; top: 88px; width: calc(100vw - 32px); } }
@media (prefers-reduced-transparency: reduce) { .cmd { background: var(--window-bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Sections: one idea each. ---------- */

/* The hero: the line, what it means, the button with its fine print, and the logo. Nothing else. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px clamp(24px, 4vw, 64px);
  padding: clamp(56px, 10vh, 120px) var(--gutter) clamp(56px, 10vh, 112px);
}
/* The logo: the glass render of the app icon, its studio floor fading into the page. */
.hero-logo, .end-mark { perspective: 800px; }
.hero-logo img, .end-mark img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, rgb(0 0 0 / 0.6) 66%, transparent 96%); mask-image: radial-gradient(closest-side, #000 42%, rgb(0 0 0 / 0.6) 66%, transparent 96%);
}
.hero-logo img { transform: rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 5deg)); }
@media (prefers-reduced-motion: no-preference) { .hero-logo img { transition: transform 450ms var(--snappy); } }
.hero-logo { max-width: 460px; justify-self: center; width: 100%; }
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-logo { order: -1; max-width: 260px; justify-self: start; margin: -24px 0 -32px -28px; }
}
.hero h1 { max-width: 13ch; font-size: clamp(2.75rem, 1.2rem + 4.4vw, 5.25rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.048em; }
.swipe { position: relative; z-index: 0; white-space: nowrap; }
.swipe::after {
  content: ""; position: absolute; z-index: -1; left: -0.05em; right: -0.06em; bottom: 0.06em; height: 0.36em; border-radius: 0.08em;
  background-color: color-mix(in srgb, var(--space) 80%, transparent); transform: rotate(-1.2deg); transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .swipe::after { transition: background-color var(--smooth-ms) ease-out; animation: swipe 900ms var(--bouncy) 300ms both; }
}
@keyframes swipe { from { transform: rotate(-1.2deg) scaleX(0); } to { transform: rotate(-1.2deg) scaleX(1); } }
.lede { max-width: 32ch; margin: 24px 0 32px; font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); line-height: 1.35; color: var(--label-2); text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 18px; }
.get { margin: 0 0 18px; }
.fine { font-size: 15px; line-height: 1.5; color: var(--label-2); }
.fine a { color: inherit; }
.hero .fine { max-width: 40rem; margin: 0 0 4px; font-size: 14px; }
/* Under the button, as a browser's download page has it: version, size, requirements, and the checksum. */
.download-fine { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.download-fine p { margin: 0; }
.sha summary { list-style: none; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; border-radius: 4px; }
.sha summary::-webkit-details-marker { display: none; }
.sha summary::after { content: " ›"; }
.sha[open] summary::after { content: " ⌄"; }
.sha-card {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 10px); width: min(34rem, calc(100vw - 48px));
  display: grid; gap: 8px; padding: 14px; border-radius: 18px; color: var(--label); font-size: 13px; line-height: 1.45;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: 0 0 0 0.5px var(--glass-line), var(--e3);
}
.sha-card p { margin: 0; }
.sha-card .copy-row { margin: 0; }
@media (prefers-reduced-transparency: reduce) { .sha-card { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* The Space colours, as marbles of glass, with a note in the margin: a gloss. */
.try { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(40px, 7vh, 72px); }
.marbles { display: flex; flex-wrap: wrap; gap: 10px; }
.marbles button {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.9) 0, rgb(255 255 255 / 0) 36%), radial-gradient(circle at 62% 78%, rgb(0 0 0 / 0.14), transparent 62%), var(--c);
  box-shadow: inset 0 -2px 4px rgb(0 0 0 / 0.12), inset 0 1px 1px rgb(255 255 255 / 0.6), 0 0 0 0.5px rgb(0 0 0 / 0.14), 0 4px 10px rgb(0 0 0 / 0.14);
}
.marbles button:hover { transform: translateY(-3px) scale(1.06); }
.marbles button:active { transform: scale(0.92); }
.marbles button[aria-checked="true"] { box-shadow: inset 0 -2px 4px rgb(0 0 0 / 0.12), inset 0 1px 1px rgb(255 255 255 / 0.6), 0 0 0 3px var(--page), 0 0 0 5px var(--label), 0 4px 10px rgb(0 0 0 / 0.14); }
.marbles button:focus-visible { outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) { .marbles button { transition: transform var(--bouncy-ms) var(--bouncy), box-shadow 120ms ease-out; } }
.note { display: flex; align-items: center; gap: 8px; font: italic 400 21px/1.2 var(--font-serif); color: var(--label-2); }
.note .arrow { width: 52px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sec { padding: clamp(64px, 12vh, 140px) var(--gutter); scroll-margin-top: 8px; }
.sec h2, .end h2 { max-width: 16ch; margin: 0 0 clamp(28px, 5vh, 48px); font-size: clamp(2.1rem, 1rem + 3.6vw, 4.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.042em; }
[id] { scroll-margin-top: 8px; }
/* What each feature is and why it helps: the page's only body text. */
.sec h2:has(+ .desc) { margin-bottom: 16px; }
.desc { max-width: 36rem; margin: 0 0 clamp(28px, 5vh, 44px); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); line-height: 1.45; color: var(--label-2); text-wrap: pretty; }
.tile-card .desc { margin: 8px 0 0; font-size: 1rem; line-height: 1.45; }
/* What isn't in the beta yet, said plainly as coming, never as shipped. */
.soon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 36rem; margin: calc(-1 * clamp(14px, 3vh, 26px)) 0 clamp(28px, 5vh, 44px); font-size: 1rem; line-height: 1.45; color: var(--label-2); }
.soon-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; flex: none;
  font: 600 12px/1 var(--font); color: var(--label); background: color-mix(in srgb, var(--space) 45%, transparent); box-shadow: inset 0 0 0 0.5px var(--glass-line); }
.tile-card .soon { margin: 10px 0 0; font-size: 0.9375rem; }

/* Spaces: the window, and a control to show each of its Spaces. */
.spaces-demo { max-width: 1040px; }
.space-switch { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; background: var(--fill-3); box-shadow: inset 0 0 0 0.5px var(--glass-line); }
.space-switch button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  font: 500 15px/1 var(--font); color: var(--label-2); cursor: pointer; }
.space-switch button:hover { color: var(--label); }
.space-switch button[aria-pressed="true"] { color: var(--label); font-weight: 600; background: var(--page);
  box-shadow: inset 0 0.5px 0 var(--lens-rim-top), 0 0 0 0.5px var(--lens-line), 0 1px 3px var(--ambient); }
.space-switch button:focus-visible { outline-offset: 1px; }
@media (max-width: 860px) {
  /* On a phone, come closer to the sidebar, where a Space shows. */
  .spaces-demo .gw-frame { overflow: hidden; border-radius: 16px; }
  .spaces-demo .gw-frame > .gw { --u: calc(100cqw / 620); }
}

/* ⌘T: keycaps you can press, beside the bar over a page. */
.bar-demo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); max-width: 1040px; }
.keys { display: flex; gap: 12px; padding: 0 0 10px; border: 0; background: transparent; cursor: pointer; border-radius: 22px; }
.keys kbd {
  display: grid; place-items: end start; width: clamp(76px, 8vw, 104px); height: clamp(72px, 7.6vw, 98px); padding: 0 0 14px 16px; border-radius: 18px;
  font: 500 clamp(20px, 2vw, 26px)/1 var(--font); color: rgb(0 0 0 / 0.75);
  background: linear-gradient(180deg, #ffffff, #eceef2);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgb(0 0 0 / 0.06), 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 6px 0 #c9ccd3, 0 12px 24px rgb(0 0 0 / 0.22);
}
.keys:hover kbd { transform: translateY(-1px); }
.keys:active kbd { transform: translateY(5px); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 1px 0 #c9ccd3, 0 3px 8px rgb(0 0 0 / 0.22); }
.keys:focus-visible { outline-offset: 6px; }
@media (prefers-color-scheme: dark) {
  .keys kbd { color: rgb(255 255 255 / 0.88); background: linear-gradient(180deg, #4a4a4f, #3a3a3e);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.6), 0 6px 0 #1f1f22, 0 12px 24px rgb(0 0 0 / 0.5); }
  .keys:active kbd { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.6), 0 1px 0 #1f1f22, 0 3px 8px rgb(0 0 0 / 0.5); }
}
@media (prefers-reduced-motion: no-preference) { .keys kbd { transition: transform var(--quick-ms) var(--quick), box-shadow 120ms ease-out; } }
.bar-stage { container-type: inline-size; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 760 / 520;
  box-shadow: 0 0 0 0.5px var(--separator), var(--e3); }
.bar-stage > * { --u: calc(100cqw / 760); }
.bar-page { position: absolute; inset: 0; background: var(--site-bg); }
.bar-page .site { width: 100%; }
.bar-stage .gw-cmd { top: calc(70 * var(--u)); left: calc(60 * var(--u)); opacity: 1; transform: none; visibility: visible; font: 400 calc(13 * var(--u)) / 1.25 var(--font); }
.bar-stage .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
@media (max-width: 860px) {
  .bar-demo { grid-template-columns: 1fr; }
  .bar-stage { aspect-ratio: 760 / 560; }
  .bar-stage > * { --u: calc(100cqw / 700); }
  .bar-stage .gw-cmd { left: calc(30 * var(--u)); }
}

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile-card { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 24px; background: var(--page-2); box-shadow: inset 0 0 0 0.5px var(--separator); }
.tile-card figcaption h3 { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.tile-card.wide { grid-column: span 2; }
@media (max-width: 1180px) { .bento { grid-template-columns: 1fr; max-width: 560px; } .tile-card.wide { grid-column: auto; } }

/* Small drawings in the tiles. Each plays once when it scrolls into view and again on hover. */
.mini { container-type: inline-size; position: relative; aspect-ratio: 700 / 500; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: var(--site-bg); box-shadow: 0 0 0 0.5px var(--separator), 0 1px 3px var(--ambient); color: var(--label); }
.mini > * { --u: calc(100cqw / 700); }
.mini .site { width: 100%; }
.mini .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.m-page { position: absolute; inset: 0; }
.m-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.28); opacity: 0; }
.m-peek { position: absolute; top: calc(40 * var(--u)); bottom: calc(30 * var(--u)); left: calc(64 * var(--u)); right: calc(116 * var(--u));
  opacity: 0; transform: scale(0.9); transform-origin: 28% 30%; }
.m-card { position: absolute; inset: 0; border-radius: calc(12 * var(--u)); overflow: hidden; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), var(--e4); }
.m-acts { position: absolute; top: 0; right: calc(-52 * var(--u)); display: grid; gap: calc(8 * var(--u)); opacity: 0; }
.play .m-scrim, .play .m-acts { opacity: 1; }
.play .m-peek { opacity: 1; transform: none; }

.split-mini { background: radial-gradient(120% 90% at 10% 0%, var(--desk-1) 0%, transparent 55%), radial-gradient(90% 80% at 100% 10%, var(--desk-2) 0%, transparent 60%), var(--desk-base); }
.m-pane { position: absolute; top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); left: calc(10 * var(--u)); right: calc(10 * var(--u));
  border-radius: calc(12 * var(--u)); overflow: hidden; background: var(--site-bg); box-shadow: 0 0 0 0.5px var(--separator), 0 1px 3px var(--ambient); }
.m-pane.b { left: auto; width: calc(50% - 15 * var(--u)); opacity: 0; transform: translateX(calc(100% + 20 * var(--u))); }
.play .m-pane.a { right: calc(50% + 5 * var(--u)); }
.play .m-pane.b { opacity: 1; transform: none; }

.tidy-mini { background: radial-gradient(120% 90% at 10% 0%, var(--desk-1) 0%, transparent 55%), radial-gradient(80% 90% at 60% 100%, var(--desk-3) 0%, transparent 60%), var(--desk-base); }
.tidy-mini::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--sky) var(--wash), var(--veil)); }
.m-side { position: absolute; top: calc(18 * var(--u)); bottom: calc(10 * var(--u)); left: calc(150 * var(--u)); width: calc(400 * var(--u));
  display: flex; flex-direction: column; gap: calc(3 * var(--u)); font-size: calc(17 * var(--u)); }
.m-side .gw-row, .m-side .gw-head { height: calc(42 * var(--u)); font-size: calc(17 * var(--u)); }
.m-side .gw-head { font-size: calc(15 * var(--u)); }
.m-side .fav { width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(11 * var(--u)); }
.m-side .idle > span { color: var(--label-2); }
.m-side .idle .fav { opacity: 0.6; filter: grayscale(0.4); }
.m-bottom { margin-top: auto; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(8 * var(--u)); color: var(--label-2); }
.m-bottom .gw-dots { justify-content: flex-start; }
.m-lib { width: calc(24 * var(--u)) !important; height: calc(24 * var(--u)) !important; overflow: visible; }
.m-lib .lid { transform-box: fill-box; transform-origin: 0% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .m-scrim { transition: opacity 300ms ease-out 250ms; }
  .m-peek { transition: opacity 300ms ease-out 250ms, transform var(--gentle-ms) var(--gentle) 250ms; }
  .m-acts { transition: opacity 200ms ease-out 700ms; }
  .m-pane { transition: right var(--smooth-ms) var(--smooth) 250ms, opacity 300ms ease-out 350ms, transform var(--smooth-ms) var(--smooth) 250ms; }
  .play .m-side .idle { animation: to-library 1100ms cubic-bezier(0.4, 0, 0.2, 1) 400ms both; }
  .play .m-side .idle ~ .idle { animation-delay: 560ms; }
  .play .m-lib .lid { animation: lid 900ms var(--bouncy) 650ms both; }
}
@keyframes to-library {
  0% { opacity: 1; transform: none; height: calc(42 * var(--u)); }
  55% { opacity: 0; transform: translate(calc(-40 * var(--u)), calc(160 * var(--u))) scale(0.55); height: calc(42 * var(--u)); }
  100% { opacity: 0; transform: translate(calc(-40 * var(--u)), calc(160 * var(--u))) scale(0.55); height: 0; margin-top: calc(-3 * var(--u)); }
}
@keyframes lid { 0%, 100% { transform: none; } 40% { transform: translateY(-1.8px) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
  .m-scrim, .m-peek, .m-acts, .m-pane { transition: opacity 200ms ease-out; }
  .m-peek, .m-pane.b { transform: none; }
  .play .m-side .idle { display: none; }
}
/* Link summaries: a glass card rises beside the link, and its summary arrives line by line. */
.mini.wide { aspect-ratio: 1100 / 500; }
.mini.wide > * { --u: calc(100cqw / 1100); }
@media (max-width: 1180px) { .mini.wide { aspect-ratio: 700 / 520; } .mini.wide > * { --u: calc(100cqw / 700); } }
.m-list { display: grid; gap: calc(20 * var(--u)); margin: calc(30 * var(--u)) calc(48 * var(--u)); }
.m-list p { display: grid; gap: calc(8 * var(--u)); margin: 0; }
.m-list b { display: block; height: calc(12 * var(--u)); width: calc(330 * var(--u)); border-radius: 99px; background: var(--site-line); }
.m-list b.s { height: calc(8 * var(--u)); width: calc(220 * var(--u)); opacity: 0.7; }
.m-link { font: 600 calc(20 * var(--u)) / 1.2 var(--font-serif); color: var(--site-link); text-decoration: underline; text-underline-offset: 0.15em; }
.m-pointer { position: absolute; z-index: 2; left: calc(186 * var(--u)); top: calc(156 * var(--u)); width: calc(20 * var(--u)); height: calc(24 * var(--u));
  fill: #111; stroke: #fff; stroke-width: 1.4; }
.m-card {
  position: absolute; z-index: 3; left: calc(430 * var(--u)); top: calc(40 * var(--u)); width: calc(400 * var(--u));
  display: grid; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u));
  font-size: calc(13 * var(--u)); color: var(--label);
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: 0 0 0 0.5px var(--glass-line), var(--e3);
  opacity: 0; transform: translateY(calc(6 * var(--u)));
}
@media (max-width: 1180px) { .m-card { left: calc(250 * var(--u)); top: calc(120 * var(--u)); width: calc(420 * var(--u)); } .m-list b { width: calc(200 * var(--u)); } }
.m-card-site { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--label-2); }
.m-card-site b { color: var(--label); font-weight: 600; }
.m-card-site span::before { content: "· "; }
.m-card-img { height: calc(96 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(140deg, #9fd2ff, #4b7cd6 60%, #263f8a); }
.m-card-title { margin: 0; font-weight: 600; font-size: calc(16 * var(--u)); }
.m-card-label { display: flex; align-items: center; gap: calc(6 * var(--u)); margin: 0; font-size: calc(11 * var(--u)); font-weight: 600; color: var(--label-2); }
.m-card-label .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--purple); }
.m-card-lines { display: grid; gap: calc(8 * var(--u)); }
.m-card-lines b { display: block; height: calc(8 * var(--u)); border-radius: 99px; background: var(--fill); opacity: 0; }
.m-card-lines b.lead { height: calc(10 * var(--u)); background: var(--label-3); }
.m-card-lines b.short { width: 60%; }
.play .m-card { opacity: 1; transform: none; }
.play .m-card-lines b { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .m-card { transition: opacity 300ms ease-out 300ms, transform var(--snappy-ms) var(--snappy) 300ms; }
  .m-card-lines b { transition: opacity 300ms ease-out; }
  .play .m-card-lines b:nth-child(1) { transition-delay: 900ms; }
  .play .m-card-lines b:nth-child(2) { transition-delay: 1150ms; }
  .play .m-card-lines b:nth-child(3) { transition-delay: 1400ms; }
  .play .m-card-lines b:nth-child(4) { transition-delay: 1650ms; }
}
@media (prefers-reduced-motion: reduce) { .m-card { transform: none; transition: opacity 200ms ease-out; } }
@media (prefers-reduced-transparency: reduce) { .m-card { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Reading mode (coming): a crowded article clears to one calm column. */
.r-page { position: absolute; inset: 0; background: var(--site-bg); }
.r-bar { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(30 * var(--u)); border-bottom: 1px solid var(--site-line); }
.r-bar i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); background: #11707a; }
.r-bar b { width: calc(60 * var(--u)); height: calc(8 * var(--u)); border-radius: 99px; background: var(--site-line); }
.r-bar b:first-of-type { margin-left: auto; }
.r-banner { margin: calc(16 * var(--u)) calc(30 * var(--u)) 0; height: calc(60 * var(--u)); border-radius: calc(8 * var(--u));
  background: repeating-linear-gradient(135deg, rgb(242 168 64 / 0.35) 0 calc(14 * var(--u)), rgb(242 168 64 / 0.18) 0 calc(28 * var(--u))); }
.r-col { position: absolute; top: calc(140 * var(--u)); left: calc(30 * var(--u)); width: calc(400 * var(--u)); display: grid; gap: calc(12 * var(--u)); }
.r-title { margin: 0 0 calc(4 * var(--u)); font: 700 calc(26 * var(--u)) / 1.15 var(--font-serif); color: var(--site-ink); }
.r-col b { display: block; height: calc(9 * var(--u)); border-radius: 99px; background: var(--site-line); }
.r-col b:nth-child(4n) { width: 80%; }
.r-side { position: absolute; top: calc(140 * var(--u)); right: calc(30 * var(--u)); width: calc(200 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.r-side i { display: block; height: calc(90 * var(--u)); border-radius: calc(8 * var(--u)); background: repeating-linear-gradient(135deg, rgb(120 130 150 / 0.22) 0 calc(12 * var(--u)), rgb(120 130 150 / 0.1) 0 calc(24 * var(--u))); }
.play .r-banner, .play .r-side, .play .r-bar b { opacity: 0; }
.play .r-col { transform: translate(calc(120 * var(--u)), calc(-74 * var(--u))); }
.play .r-page { background: color-mix(in srgb, var(--site-bg) 88%, #e9c98e); }
@media (prefers-reduced-motion: no-preference) {
  .r-banner, .r-side, .r-bar b { transition: opacity 300ms ease-out 400ms; }
  .r-col { transition: transform var(--smooth-ms) var(--smooth) 700ms; }
  .r-page { transition: background-color 600ms ease-out 700ms; }
}
@media (prefers-reduced-motion: reduce) { .r-banner, .r-side, .r-bar b { transition: opacity 200ms ease-out; } }

.instant, .instant * { transition: none !important; animation: none !important; }

/* Gloss: beside a page, on the window's glass, washed with the page's Space colour. */
.gloss-demo { container-type: inline-size; position: relative; max-width: 1040px; aspect-ratio: 1040 / 620; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 10% 0%, var(--desk-1) 0%, transparent 55%), radial-gradient(90% 80% at 100% 10%, var(--desk-2) 0%, transparent 60%),
    radial-gradient(80% 90% at 60% 100%, var(--desk-3) 0%, transparent 60%), var(--desk-base);
  box-shadow: 0 0 0 0.5px var(--separator), var(--e3); }
.gloss-demo::before { content: ""; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--space) var(--wash), var(--veil)); }
.g-inner { --u: calc(100cqw / 1040); position: absolute; top: 0; right: 0; width: calc(1040 * var(--u)); height: calc(620 * var(--u)); font: 400 calc(13 * var(--u)) / 1.25 var(--font); }
.g-inner .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.g-page { position: absolute; top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); left: calc(10 * var(--u)); right: calc(392 * var(--u));
  border-radius: calc(12 * var(--u)); overflow: hidden; background: var(--site-bg); box-shadow: 0 0 0 0.5px var(--separator), 0 1px 3px var(--ambient); }
.g-page .site { width: calc(916 * var(--u)); }
.gloss-demo .gw-panel { width: calc(392 * var(--u)); padding-top: calc(12 * var(--u)); opacity: 1; transform: none; visibility: visible; }
.gloss-demo .summary { font-size: calc(18 * var(--u)); }
.stream .w { opacity: 0; }
.stream .w.on { opacity: 1; }
.gloss-demo .cite { cursor: default; }
.gloss-demo .lines b { transition: background-color 200ms ease-out; }
.gloss-demo:has(.cite[data-q="1"]:hover) .q1, .gloss-demo.show-q1 .q1,
.gloss-demo:has(.cite[data-q="2"]:hover) .q2,
.gloss-demo:has(.cite[data-q="3"]:hover) .q3 { background: color-mix(in srgb, var(--tint) 34%, transparent); }
.gloss-demo:has(.cite:hover) .cite:hover, .gloss-demo.show-q1 .cite[data-q="1"] { color: #fff; background: var(--tint); }
@media (prefers-reduced-motion: no-preference) { .stream .w { transition: opacity 240ms ease-out; } .gloss-demo .cite { transition: background-color 200ms ease-out, color 200ms ease-out; } }
@media (max-width: 860px) {
  /* On a phone, come closer to Gloss, with the page's side beside it. */
  .gloss-demo { aspect-ratio: 560 / 620; }
  .g-inner { --u: calc(100cqw / 560); }
}

/* ⌘S: a tactile switch that really hides this page's sidebar. */
:root {
  --track-well: rgb(0 0 0 / 0.1);
  --track-shade: inset 0 1px 2px rgb(0 0 0 / 0.18), inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
  --knob-top: #ffffff; --knob-bottom: #e9e9ee;
}
@media (prefers-color-scheme: dark) {
  :root { --track-well: rgb(255 255 255 / 0.1); --track-shade: inset 0 1px 2px rgb(0 0 0 / 0.45), inset 0 0 0 0.5px rgb(255 255 255 / 0.06); --knob-top: #f4f4f7; --knob-bottom: #c9c9d0; }
}
.hide-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; }
.keys.small { cursor: default; padding: 0; }
.keys.small kbd { width: 68px; height: 64px; padding: 0 0 10px 12px; border-radius: 14px; font-size: 19px; }
.switch-row { display: inline-flex; align-items: center; gap: 16px; font: 600 22px/1 var(--font-display); letter-spacing: -0.01em; cursor: pointer; }
.switch {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-block; flex: none; width: 72px; height: 44px; margin: 0; border-radius: 22px; cursor: pointer;
  background: var(--track-well); box-shadow: var(--track-shade);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--knob-top), var(--knob-bottom) 70%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.18), 0 3px 8px rgb(0 0 0 / 0.18), inset 0 -1px 1px rgb(0 0 0 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.9);
}
.switch:checked { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 80%, black), var(--tint)); }
.switch:checked::after { transform: translateX(28px); }
.switch:active::after { width: 44px; }
.switch:checked:active::after { transform: translateX(22px); }
.switch:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .switch { transition: background-color 200ms ease-out; }
  .switch::after { transition: transform var(--bouncy-ms) var(--bouncy), width var(--quick-ms) var(--quick); }
}

/* Privacy: two plain facts, side by side. */
.facts-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0; padding: 0; list-style: none; }
.facts-pair li { display: grid; gap: 6px; padding: 24px; border-radius: 24px; background: var(--page-2); box-shadow: inset 0 0 0 0.5px var(--separator);
  font-size: 1.0625rem; line-height: 1.45; color: var(--label-2); }
.facts-pair .i { width: 26px; height: 26px; margin-bottom: 8px; color: var(--label); }
.facts-pair strong { display: block; font: 700 clamp(1.5rem, 1rem + 1.6vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--label); }
@media (max-width: 760px) { .facts-pair { grid-template-columns: 1fr; } }

.end { padding: clamp(80px, 14vh, 160px) var(--gutter) 96px; text-align: center; }
/* The mark at the end, a piece of glass that turns towards the pointer. */
.end-mark { width: clamp(150px, 18vw, 220px); margin: 0 auto 24px; }
.reel { width: min(100%, 64rem); margin: 48px auto 0; }
.reel video { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 0 0 0.5px var(--separator), var(--e4); }
.reel figcaption { margin-top: 12px; font-size: 14px; color: var(--label-2); }
.end h2 { margin-inline: auto; }
.end .fine { max-width: 40rem; margin: 0 auto; }

/* The shared footer, at the foot of the card. */
.page-card > footer { margin-top: 0; }

@media (max-width: 860px) {
  .hero { padding-top: 40px; }
  .actions .button, .get .button { width: 100%; max-width: 22rem; }
}
@media (forced-colors: active) {
  .page-card, .side, .tile-card { border: 1px solid CanvasText; }
  .swipe::after { background: Highlight; }
}

/* ---------- Support: clear choices, each a card. ---------- */

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin: 0; padding: 0; list-style: none; }
.choice {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 4px; height: 100%;
  padding: 20px 22px; border-radius: 22px; color: var(--label-2); text-decoration: none;
  background: linear-gradient(180deg, var(--face-top), var(--face-bottom));
  box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 0.5px var(--glass-line), 0 1px 1.5px var(--contact), 0 4px 14px var(--ambient);
}
.choice > .i { grid-row: 1 / span 3; width: 28px; height: 28px; margin-top: 2px; color: var(--accent); }
.choice strong { font: 700 1.25rem/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--label); }
.choice span { font-size: 1rem; line-height: 1.4; }
.choice small { align-self: end; display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; font-size: 13px; color: var(--label-2); overflow-wrap: anywhere; }
.choice small .ext { width: 13px; height: 13px; }
.choice:hover { transform: translateY(-2px); }
.choice:hover strong { color: var(--accent); }
.choice:active { transform: scale(0.98); }
@media (prefers-reduced-motion: no-preference) { .choice { transition: transform var(--snappy-ms) var(--snappy); } }
.support-note { max-width: 40rem; margin: 22px 0 0; font-size: 15px; line-height: 1.45; color: var(--label-2); }
@media (max-width: 760px) { .choices { grid-template-columns: 1fr; } }
@media (forced-colors: active) { .choice { border: 1px solid CanvasText; } }

.hash { display: block; padding: 10px 12px; border-radius: 12px; background: var(--page); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 0.5px var(--separator); font-size: 0.875rem; line-height: 1.5; user-select: all; }
.copy-row { margin: 8px 0 0; }
.copy {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  font: 600 14px/1 var(--font); color: var(--label); cursor: pointer;
  background: linear-gradient(180deg, var(--page), var(--page-2));
  box-shadow: inset 0 1px 0 var(--rim-1), 0 0 0 0.5px var(--glass-line), 0 1px 2px rgb(0 0 0 / 0.12);
}
.copy:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2), 0 0 0 0.5px var(--glass-line); }
.copy[hidden] { display: none; }
.copy-row [role="status"] { margin-left: 10px; font-size: 14px; color: var(--label-2); }
@media (forced-colors: active) {
  .copy, .hash, .sha-card { border: 1px solid CanvasText; }
}

/* ---------- The pre-release page (site.json's "mode": prerelease): a waitlist instead of a download. ---------- */

:root { --ok-wash: 38%; }
@media (prefers-color-scheme: dark) { :root { --ok-wash: 30%; } }

/* The line above the headline: what this is and where it stands. */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 22px; font: 600 15px/1.2 var(--font); color: var(--label-2); }

/* The waitlist: an email field sunk into the surface, with the button beside it. Nothing else is asked for. */
.wl { position: relative; width: 100%; max-width: 34rem; margin: 0 0 16px; }
.wl-label { margin: 0 0 10px 4px; font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--label); }
.wl-row {
  display: flex; align-items: stretch; gap: 8px; padding: 6px; border-radius: 999px;
  background: var(--fill-3); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12), inset 0 0 0 0.5px var(--glass-line);
}
.wl-row:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.wl-input {
  flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  font: 400 17px/1 var(--font); color: var(--label); caret-color: var(--tint);
}
.wl-input:focus { outline: none; }
.wl-input::placeholder { color: var(--label-2); opacity: 1; }
.wl .button { flex: none; padding: 0 24px; white-space: nowrap; border: 0; cursor: pointer; }
.wl .button[disabled] { opacity: 0.7; cursor: progress; }
/* The trap for bots: out of sight and out of the tab order, and read by no one. */
.wl-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.wl-status { min-height: 1.5em; margin: 10px 4px 0; font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--label); }
.wl-status:empty { min-height: 0; margin: 0; }
.wl-status[data-state="invalid"], .wl-status[data-state="limited"], .wl-status[data-state="error"] { color: var(--error); }
.wl-privacy { margin: 10px 4px 0; max-width: 32rem; font-size: 14px; line-height: 1.5; color: var(--label-2); }
.wl-privacy a { color: inherit; }
/* Once you're on the list the form becomes a quiet confirmation, washed in the Space's colour. */
.wl.is-done .wl-row, .wl.is-done .wl-label, .wl.is-done .wl-msg { display: none; }
.wl.is-done .wl-status {
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 0; padding: 14px 22px; border-radius: 999px; font-size: 1.0625rem;
  background: color-mix(in srgb, var(--space) var(--ok-wash), var(--page)); box-shadow: inset 0 0 0 0.5px var(--glass-line), inset 0 1px 0 var(--highlight);
}
.wl.is-done .wl-status::before {
  content: ""; flex: none; width: 7px; height: 13px; margin: -3px 3px 0 4px; border: solid currentColor; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .wl.is-done .wl-status { animation: wl-in var(--bouncy-ms) var(--bouncy) both; }
}
@keyframes wl-in { from { opacity: 0; transform: scale(0.92) translateY(6px); } to { opacity: 1; transform: none; } }
/* Without the script, the server sends you back to the page's foot with its answer. */
.wl-msg { display: none; margin: 10px 4px 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.wl-msg:target { display: block; }
.wl-bad:target { color: var(--error); }
.js .wl-msg { display: none !important; }
.end .wl { margin-inline: auto; }
.end .wl-status, .end .wl-privacy, .end .wl-msg { text-align: center; margin-inline: auto; }
.end .wl.is-done .wl-status { margin-inline: auto; }
@media (max-width: 520px) {
  .wl-row { flex-direction: column; border-radius: 28px; padding: 8px; }
  .wl-input { height: 52px; text-align: left; }
  .wl .button { width: 100%; max-width: none; min-height: 52px; }
}

/* Under the hero: the picture of Glossium's window, or the launch film in its place. */
.reel-sec { padding: 0 var(--gutter) clamp(24px, 6vh, 72px); }
.reel-sec .reel { margin: 0 auto; }
.reel img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 0.5px var(--separator), var(--e4); background: var(--page-2); }
.reel figcaption { max-width: 40rem; margin: 14px auto 0; text-align: center; }

/* Bring your browsing over: the welcome sheet, drawn. */
.import-demo { max-width: 1040px; padding: 22px; }
.import-mini { aspect-ratio: 900 / 470; background: none; }
.import-mini > * { --u: calc(100cqw / 900); }
.im-desk { position: absolute; inset: 0; background: radial-gradient(120% 90% at 10% 0%, var(--desk-1) 0%, transparent 55%), radial-gradient(90% 80% at 100% 10%, var(--desk-2) 0%, transparent 60%),
  radial-gradient(80% 90% at 60% 100%, var(--desk-3) 0%, transparent 60%), var(--desk-base); }
.im-desk::after { content: ""; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--space) var(--wash), var(--veil)); }
.im-sheet {
  position: absolute; top: calc(34 * var(--u)); left: 50%; width: calc(470 * var(--u)); margin-left: calc(-235 * var(--u)); padding: calc(24 * var(--u)); border-radius: calc(22 * var(--u));
  font: 400 calc(13 * var(--u))/1.3 var(--font); color: var(--label); background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9); box-shadow: 0 0 0 0.5px var(--glass-line), var(--e4);
}
.im-title { margin: 0 0 calc(4 * var(--u)); font: 700 calc(19 * var(--u))/1.2 var(--font-display); letter-spacing: -0.01em; }
.im-sub { margin: 0 0 calc(16 * var(--u)); color: var(--label-2); font-size: calc(14 * var(--u)); }
.im-list { display: grid; gap: calc(6 * var(--u)); margin: 0; padding: 0; list-style: none; }
.im-list li { display: flex; align-items: center; gap: calc(11 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(11 * var(--u));
  background: var(--fill-3); box-shadow: inset 0 0 0 0.5px var(--glass-line); font-size: calc(15 * var(--u)); }
.im-list .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--label-2); }
.im-name { flex: 1; min-width: 0; font-weight: 500; }
.im-bar { display: block; width: calc(62 * var(--u)); height: calc(7 * var(--u)); border-radius: 99px; background: var(--fill); }
.im-box { position: relative; display: grid; place-items: center; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u));
  background: var(--tint); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.35); }
.im-box .tick { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke: #fff; stroke-width: 2.4; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.js .import-demo:not(.play) .im-box { background: var(--fill); box-shadow: inset 0 0 0 1.5px var(--label-3); }
.js .import-demo:not(.play) .im-box .tick { stroke-dashoffset: 1; }
.im-note { margin: calc(14 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(13 * var(--u)); color: var(--label-2); }
.im-foot { display: flex; justify-content: flex-end; gap: calc(10 * var(--u)); }
.im-btn { display: inline-grid; place-items: center; min-width: calc(86 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 99px; font-weight: 600; font-size: calc(14 * var(--u));
  background: linear-gradient(180deg, var(--face-top), var(--face-bottom)); box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 0.5px var(--glass-line), 0 1px 1.5px var(--contact); }
.im-btn.primary { color: #fff; background: linear-gradient(180deg, var(--button-top), var(--button-bottom)); box-shadow: inset 0 1px 0 var(--button-rim), 0 0 0 0.5px var(--button-line), 0 1px 2px rgb(0 0 0 / 0.2); }
@media (prefers-reduced-motion: no-preference) {
  .im-box { transition: background-color 160ms ease-out, box-shadow 160ms ease-out; }
  .im-box .tick { transition: stroke-dashoffset 280ms ease-out; }
  .play .im-list li:nth-child(1) .im-box, .play .im-list li:nth-child(1) .tick { transition-delay: 700ms; }
  .play .im-list li:nth-child(2) .im-box, .play .im-list li:nth-child(2) .tick { transition-delay: 1150ms; }
  .play .im-list li:nth-child(3) .im-box, .play .im-list li:nth-child(3) .tick { transition-delay: 1600ms; }
  .play .im-btn.primary { animation: im-press var(--bouncy-ms) var(--bouncy) 2300ms both; }
}
@keyframes im-press { 0%, 100% { transform: none; } 30% { transform: scale(0.94); } }
@media (max-width: 860px) {
  .import-demo { padding: 14px; }
  .import-mini { aspect-ratio: 520 / 430; }
  .import-mini > * { --u: calc(100cqw / 520); }
  .im-sheet { top: calc(24 * var(--u)); width: calc(468 * var(--u)); margin-left: calc(-234 * var(--u)); }
}

/* What's coming: four groups of plain cards, each tagged so nothing reads as shipped. */
.soon-groups { display: grid; gap: clamp(36px, 6vh, 60px); max-width: 1040px; }
.soon-group h3 { margin: 0 0 16px; font: 700 clamp(1.25rem, 1rem + 0.7vw, 1.625rem)/1.2 var(--font-display); letter-spacing: -0.02em; }
.soon-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.soon-item { grid-column: span 2; position: relative; display: grid; align-content: start; justify-items: start; gap: 4px; padding: 20px 20px 22px; border-radius: 22px;
  background: var(--page-2); box-shadow: inset 0 0 0 0.5px var(--separator); }
.soon-list:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
.soon-list:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
.soon-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; color: var(--label);
  background: color-mix(in srgb, var(--c) 50%, var(--page)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 0 0.5px var(--glass-line); }
.soon-icon .i { width: 22px; height: 22px; stroke-width: 1.7; }
.soon-item .soon-tag { position: absolute; top: 18px; right: 18px; height: 22px; font-size: 11.5px; }
.soon-item h4 { margin: 0; font: 700 1.125rem/1.25 var(--font-display); letter-spacing: -0.015em; }
.soon-item p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--label-2); text-wrap: pretty; }
@media (max-width: 1000px) {
  .soon-list, .soon-list:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soon-item, .soon-list:has(> :nth-child(5):last-child) > :nth-child(n+4), .soon-list:has(> :nth-child(4):last-child) > * { grid-column: auto; }
}
@media (max-width: 640px) {
  .soon-list, .soon-list:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; }
}
@media (forced-colors: active) { .soon-item, .wl-row, .im-sheet { border: 1px solid CanvasText; } }

/* Privacy, in brief: four facts. */
.facts-four li { align-content: start; }
.facts-four strong { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; }
/* Three ways to follow along, side by side. */
.choices:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .choices:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }