/* One stylesheet for every page. Bump the file name (style.v8.css) when it
   changes: publish caches CSS for a day. */
/* The look borrows from the icon: the antenna sends out radio waves, the
   orange dotted smile is the divider, and rules are sentences with their
   parts picked out as chips, as the app writes them. No images or scripts:
   everything here is CSS. */
/* Colours come from the app icons. ZoxoHome (art/icon.pdf): purple #291c57,
   cream #f4f0e4, orange #f2a341. ZoxobitAR (art/zoxobit-ar.pdf): deep teal
   #0a2b32, teal #1d5866, cyan #5bf2e3. */
:root {
  --purple: #291c57;
  --cream: #f4f0e4;
  --orange: #f2a341;
  --ar-deep: #0a2b32;
  --ar-teal: #1d5866;
  --ar-cyan: #5bf2e3;
  --ink: #1d1640;
  --muted: #5f5a78;
  --paper: #faf8f2;
  --card: #ffffff;
  --line: #e8e3d6;
  --accent: #4b3797;
  --warm: #a35a0a;
  --chip: #efe8ff;
  --chip-ink: #3b2a85;
  /* The page's soft glows, tints of the icon's colours: orange, purple and
     the dusk between them. */
  --glow-peach: #fbd8a4;
  --glow-lav: #d3c5f6;
  --glow-dusk: #f4cbcf;
  --glow-cream: #fffaf0;
  --frost: rgba(255,255,255,.62);
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4f0e4;
    --muted: #b4aecb;
    --paper: #17102f;
    --card: #221849;
    --line: #33295e;
    --accent: #c9b8ff;
    --warm: #f2a341;
    --chip: #33266b;
    --chip-ink: #e4dbff;
    --glow-peach: rgba(242,163,65,.16);
    --glow-lav: rgba(118,90,230,.34);
    --glow-dusk: rgba(176,86,150,.2);
    --glow-cream: rgba(244,240,228,.05);
    --frost: rgba(34,24,73,.6);
  }
}

* { box-sizing: border-box; }

/* The page colour sits on html so the glows behind each section (z-index
   -1) show through a transparent body. */
html { background-color: var(--paper); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: transparent;
}

a { color: var(--accent); }
h1, h2, h3 { font-family: var(--round); }


.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

header.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: 1rem 0;
}
header.top a.home { display: flex; }
header.top img { width: 32px; height: 32px; border-radius: 8px; }
header.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .95rem; }
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover, header.top nav a[aria-current] { color: var(--ink); }
header.top nav a[aria-current] { font-weight: 600; }
/* The tip jar, as on livents: an icon at the end of the nav. */
header.top nav a.tip-link { display: inline-flex; align-items: center; color: var(--warm); }
header.top nav a.tip-link:hover, header.top nav a.tip-link[aria-current] { color: var(--orange); }
header.top nav a.tip-link svg { width: 22px; height: 22px; display: block; }
header.top nav { align-items: center; }
@media (max-width: 30rem) {
  header.top nav { gap: .3rem .9rem; }
}
/* Over a hero the header floats on the night sky instead of sitting in a
   strip above it. */
body > .wrap:first-child { position: relative; z-index: 4; }
.wrap:has(+ .hero) header.top nav a { color: rgba(244,240,228,.72); }
.wrap:has(+ .hero) header.top nav a:hover, .wrap:has(+ .hero) header.top nav a[aria-current] { color: var(--cream); }
.wrap:has(+ .hero) header.top nav a.tip-link { color: var(--orange); }
.wrap:has(+ .hero) header.top img { box-shadow: 0 0 0 1px rgba(244,240,228,.2); }

/* Night over the house: a few stars, a glow, a moon and a row of houses
   along the bottom (.sky, .scene). The middle house is ZoxoHome's, with its
   antenna, a lit window and the icon's smile: five orange marks on a curve,
   dot, ring, dot, ring, dot. */
.hero {
  position: relative; overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(244,240,228,.8), transparent),
    radial-gradient(1px 1px at 27% 68%, rgba(244,240,228,.6), transparent),
    radial-gradient(1.5px 1.5px at 41% 12%, rgba(244,240,228,.7), transparent),
    radial-gradient(1px 1px at 58% 80%, rgba(244,240,228,.5), transparent),
    radial-gradient(2px 2px at 73% 18%, rgba(242,163,65,.9), transparent),
    radial-gradient(1px 1px at 86% 54%, rgba(244,240,228,.6), transparent),
    radial-gradient(1.5px 1.5px at 93% 28%, rgba(244,240,228,.7), transparent),
    radial-gradient(1px 1px at 6% 84%, rgba(244,240,228,.5), transparent),
    radial-gradient(ellipse 45% 55% at 12% 30%, rgba(112,82,214,.42), transparent 70%),
    radial-gradient(ellipse 40% 45% at 88% 72%, rgba(242,163,65,.16), transparent 70%),
    radial-gradient(ellipse at 50% 25%, #3d2b7d 0%, var(--purple) 65%);
  margin-top: -4rem;
  padding: 8.5rem 0 11rem;
  text-align: center;
}
.hero > .wrap { position: relative; z-index: 2; }
/* Measured off icon-512.png, at its size there. */
.hero::after {
  content: ""; position: absolute; z-index: 3; left: 50%; bottom: 16px;
  width: 112px; height: 47px; transform: translateX(-50%);
  background:
    radial-gradient(circle at 10px 10px, var(--orange) 9.2px, transparent 9.7px),
    radial-gradient(circle at 32.8px 28.8px, transparent 3.85px, var(--orange) 4.25px, var(--orange) 8px, transparent 8.5px),
    radial-gradient(circle at 56px 36px, var(--orange) 9.2px, transparent 9.7px),
    radial-gradient(circle at 79.2px 28.8px, transparent 3.85px, var(--orange) 4.25px, var(--orange) 8px, transparent 8.5px),
    radial-gradient(circle at 102px 10px, var(--orange) 9.2px, transparent 9.7px);
}

/* Stars that twinkle, and a crescent moon. */
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sky i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--cream); box-shadow: 0 0 6px 1px rgba(244,240,228,.7);
  opacity: .8;
}
.sky i:nth-child(1) { left: 8%; top: 14%; }
.sky i:nth-child(2) { left: 19%; top: 40%; width: 2px; height: 2px; }
.sky i:nth-child(3) { left: 33%; top: 8%; }
.sky i:nth-child(4) { left: 47%; top: 30%; width: 2px; height: 2px; }
.sky i:nth-child(5) { left: 63%; top: 10%; background: var(--orange); box-shadow: 0 0 8px 1px rgba(242,163,65,.8); }
.sky i:nth-child(6) { left: 79%; top: 36%; }
.sky i:nth-child(7) { left: 89%; top: 52%; width: 2px; height: 2px; }
.sky i:nth-child(8) { left: 55%; top: 50%; width: 2px; height: 2px; }
.sky .moon {
  position: absolute; right: 5%; top: 5.2rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  box-shadow: inset -.8rem .3rem 0 0 var(--cream);
  transform: rotate(-20deg);
  filter: drop-shadow(0 0 14px rgba(244,240,228,.45));
}
@keyframes twinkle {
  0%, 100% { opacity: .2; transform: scale(.6); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* The houses: a strip 2400 units wide, cut to the window around the middle
   one, which sits over the smile. */
.scene {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 100%; height: 170px; pointer-events: none;
}
.scene .town { fill: #1c1342; }
.scene .win { fill: rgba(244,240,228,.08); }
.scene .win.on { fill: rgba(242,163,65,.55); }
.scene .ours { fill: var(--cream); }
.scene .aerial { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.scene .ring { fill: none; stroke: var(--orange); stroke-width: 3; }
.scene .attic { fill: #1c1342; }
@keyframes glow {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .sky i { animation: twinkle 3.4s ease-in-out infinite; }
  .sky i:nth-child(2) { animation-duration: 4.2s; animation-delay: -1s; }
  .sky i:nth-child(3) { animation-duration: 2.8s; animation-delay: -2s; }
  .sky i:nth-child(4) { animation-duration: 5s; animation-delay: -.5s; }
  .sky i:nth-child(5) { animation-duration: 3.8s; animation-delay: -3s; }
  .sky i:nth-child(6) { animation-duration: 4.6s; animation-delay: -1.6s; }
  .sky i:nth-child(7) { animation-duration: 3s; animation-delay: -2.4s; }
  .sky i:nth-child(8) { animation-duration: 5.4s; animation-delay: -4s; }
  .scene .lamp { animation: glow 4s ease-in-out infinite; }
}

/* The icon with radio waves from its antenna (the ring at 66%, 20%). */
.beacon { position: relative; display: inline-block; line-height: 0; }
.beacon::before, .beacon::after {
  content: ""; position: absolute; left: 66.4%; top: 19.9%;
  width: 22%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--orange); opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  animation: wave 2.8s ease-out infinite;
  pointer-events: none;
}
.beacon::after { animation-delay: 1.4s; }
@keyframes wave {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .beacon::before, .beacon::after { animation: none; }
}
.hero img {
  width: 144px; height: 144px; border-radius: 32px;
  box-shadow: 0 0 0 1px rgba(244,240,228,.18), 0 14px 44px rgba(0,0,0,.45);
}
.hero h1 {
  font-size: clamp(2.9rem, 7.5vw, 4.6rem); font-weight: 800; line-height: 1.02;
  margin: 1.3rem 0 .7rem; letter-spacing: -.035em;
  background: linear-gradient(100deg, var(--cream) 35%, #ffd49c 65%, var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: 1.25rem; max-width: 36rem; margin: 0 auto; opacity: .95; }
.hero .status {
  display: inline-block; margin-top: 1.8rem; padding: .45rem 1rem;
  border: 1px solid var(--orange); border-radius: 999px; font-size: .95rem;
  color: var(--orange);
}
.hero.ar {
  color: #eafaf8;
  background: radial-gradient(ellipse at 50% 25%, var(--ar-teal) 0%, var(--ar-deep) 65%);
  border-bottom: 6px solid var(--ar-cyan);
  padding-bottom: 5rem;
}
.hero.ar::after { display: none; }
.hero.ar h1 { background: none; color: inherit; }

/* Home page hero: words on the left, a rule and its evening on the right. */
.hero.split-hero { text-align: left; padding: 7.5rem 0 11rem; }
.hero.split-hero .wrap { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.hero.split-hero .beacon img { width: 104px; height: 104px; border-radius: 24px; }
.hero.split-hero h1 { margin-top: 1.1rem; }
.hero.split-hero p.lede { margin: 0; }
@media (max-width: 52rem) {
  .hero.split-hero .wrap { grid-template-columns: 1fr; }
}

/* A rule as the app shows it: one sentence, its parts as chips. */
.rule {
  background: var(--card); color: var(--ink);
  border-radius: 24px; padding: 1.3rem 1.4rem 1.1rem;
  box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(10,6,30,.35);
  text-align: left; font-size: 1.12rem; line-height: 2.05;
}
.rule .rule-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; font: 600 .82rem/1.4 var(--round); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rule .rule-head .on { margin-left: auto; width: 2.4rem; height: 1.4rem; border-radius: 999px; background: #34c759; position: relative; }
.rule .rule-head .on::after { content: ""; position: absolute; right: 3px; top: 3px; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.rule .hub { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; background: var(--chip); color: var(--chip-ink); text-transform: none; letter-spacing: 0; font-weight: 600; }
.rule p { margin: 0; }
.chip {
  display: inline-block; padding: 0 .5rem; border-radius: 8px;
  background: var(--chip); color: var(--chip-ink); font-weight: 600;
  line-height: 1.6; white-space: nowrap;
}
.chip.when { background: #fde7c7; color: #7a4204; }
@media (prefers-color-scheme: dark) {
  .chip.when { background: #4a3313; color: #ffd49c; }
}

/* A made-up evening: the rule played against a timeline. */
.evening { list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px dashed var(--line); font-size: .92rem; line-height: 1.5; }
.evening li { display: grid; grid-template-columns: 4.6rem 1fr; gap: .6rem; padding: .25rem 0; color: var(--muted); }
.evening time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.evening li.fires { color: var(--ink); }
.evening li.fires span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(242,163,65,.25); vertical-align: .05em; }
.evening li:first-child { display: block; }
.evening .label { display: block; margin-bottom: .2rem; font: 600 .78rem/1.4 var(--round); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* On the home page the evening plays out, over and over: each line comes in
   at its time; at 9:05 the rule's switch pulses, and until 9:15 the hall
   lamp chip and the window of the house below light up. Still, all lit, under reduced motion. */
@keyframes ev1 { 0%, 4% { opacity: .15; } 8%, 94% { opacity: 1; } 100% { opacity: .15; } }
@keyframes ev2 { 0%, 22% { opacity: .15; } 26%, 94% { opacity: 1; } 100% { opacity: .15; } }
@keyframes ev3 { 0%, 42% { opacity: .15; } 46%, 94% { opacity: 1; } 100% { opacity: .15; } }
@keyframes ev4 { 0%, 66% { opacity: .15; } 70%, 94% { opacity: 1; } 100% { opacity: .15; } }
@keyframes lamp { 0%, 44% { opacity: 0; } 47%, 68% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes lamp-chip {
  0%, 44%, 71%, 100% { box-shadow: 0 0 0 0 rgba(242,163,65,0); }
  47%, 68% { box-shadow: 0 0 0 3px var(--orange), 0 0 18px 4px rgba(242,163,65,.55); }
}
@keyframes fired {
  0%, 44%, 52%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
  47% { box-shadow: 0 0 0 6px rgba(52,199,89,.35); }
}
@media (prefers-reduced-motion: no-preference) {
  .split-hero .rule-head .on { animation: fired 14s linear infinite; }
  .split-hero .evening li { animation: 14s linear infinite; }
  .split-hero .evening li:nth-child(2) { animation-name: ev1; }
  .split-hero .evening li:nth-child(3) { animation-name: ev2; }
  .split-hero .evening li:nth-child(4) { animation-name: ev3; }
  .split-hero .evening li:nth-child(5) { animation-name: ev4; }
  .split-hero .chip.lamp { animation: lamp-chip 14s linear infinite; }
  .split-hero .scene .lamp { animation: lamp 14s linear infinite; }
}
.hero.ar .status { border-color: var(--ar-cyan); color: var(--ar-cyan); }

section { padding: 5rem 0 1.5rem; }
section h2 { font-size: clamp(1.8rem, 4vw, 2.3rem); letter-spacing: -.015em; margin: 0 0 .4rem; }

/* The background: two soft glows behind every section, wider than the
   screen and spilling into the sections around it, so the page drifts from
   one colour to the next instead of changing in blocks. */
body > section, main.prose { position: relative; }
body > section::before, main.prose::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -12rem; bottom: -12rem; left: 50%; width: 150vw; margin-left: -75vw;
  background:
    radial-gradient(ellipse min(44vw, 38rem) 22rem at var(--ax) var(--ay), var(--ga) 0%, color-mix(in srgb, var(--ga) 60%, transparent) 38%, color-mix(in srgb, var(--ga) 18%, transparent) 70%, transparent 100%),
    radial-gradient(ellipse min(40vw, 34rem) 20rem at var(--bx) var(--by), var(--gb) 0%, color-mix(in srgb, var(--gb) 55%, transparent) 38%, color-mix(in srgb, var(--gb) 15%, transparent) 70%, transparent 100%);
}
body > section, main.prose { --ax: 68%; --ay: 42%; --bx: 30%; --by: 60%; --ga: var(--glow-peach); --gb: var(--glow-lav); }
body > section:nth-of-type(2n) { --ax: 30%; --bx: 72%; --by: 38%; --ga: var(--glow-lav); --gb: var(--glow-dusk); }
body > section:nth-of-type(3n) { --ga: var(--glow-dusk); --gb: var(--glow-cream); }
/* Under the hero, the cream house's lamp lights the top of the page. */
.hero + section { --ax: 50%; --ay: 12rem; --ga: var(--glow-peach); }
main.prose { --ax: 80%; --ay: 14rem; --bx: 15%; --by: 70%; }
main.prose::before { top: -6rem; bottom: -4rem; }
section > .wrap > h2::after {
  content: ""; display: block; width: 84px; height: 12px; margin-top: .45rem;
  background:
    radial-gradient(circle at 7px 50%, var(--orange) 3.5px, transparent 4px) 0 0 / 28px 12px repeat-x,
    radial-gradient(circle at 21px 50%, transparent 2px, var(--orange) 2.4px, var(--orange) 3.8px, transparent 4.3px) 0 0 / 28px 12px repeat-x;
}
section .rule {
  max-width: 40rem; margin-top: 1.4rem;
  background: var(--frost); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 24px 60px -30px rgba(41,28,87,.45);
}
section > .wrap > p.intro { color: var(--muted); max-width: 42rem; margin-top: 0; }

.grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  margin-top: 1.6rem;
}
/* Panels are frosted glass over the glows, with no hard border. */
.card {
  background: var(--frost); border: 1px solid transparent; border-radius: 22px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 24px 60px -34px rgba(41,28,87,.4);
  padding: 1.3rem 1.4rem;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
/* Feature lists stay open: plain words on the page, and only the wide
   cards with an example in them keep a panel. */
.grid .card:not(.wide), .split .card {
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Hover: a lift and an orange glow, like the lit window. */
.grid .card:hover, .split .card:hover {
  transform: translateY(-3px); background: var(--frost);
  box-shadow: 0 0 0 1px rgba(242,163,65,.4), 0 18px 44px -12px rgba(242,163,65,.28);
}
.card h3 { margin: 0 0 .35rem; font-size: 1.08rem; display: flex; align-items: center; gap: .65rem; }
/* Each feature's icon: a line drawing, in orange on the icon's purple. */
.ico {
  flex: none; box-sizing: content-box; width: 1.2rem; height: 1.2rem; padding: .45rem;
  border-radius: 10px; background: var(--purple); color: var(--orange);
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .grid .card:hover, .split .card:hover { transform: none; }
}
.card p { margin: 0; color: var(--muted); font-size: .97rem; }
.card .tag { display: inline-block; margin-top: .6rem; font-size: .8rem; color: var(--warm); font-weight: 600; }

.grid { gap: 1.2rem 1.4rem; }
.split { display: grid; gap: 1.2rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1.6rem; }

/* The main features get two columns and a small example. */
@media (min-width: 42rem) {
  .grid .card.wide { grid-column: span 2; }
}
.card .evening { margin-top: .9rem; }
.card .mini-rule { margin-top: .9rem; color: var(--ink); font-size: 1rem; line-height: 2; }
.card .said {
  position: relative; display: inline-block; margin-top: .9rem; padding: .55rem .9rem;
  border-radius: 16px 16px 16px 4px; background: var(--chip); color: var(--chip-ink);
  font-style: italic;
}
.card .said + .mini-rule::before { content: "↓ drafted as"; display: block; font: 600 .78rem/1.6 var(--round); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card .said + .mini-rule { margin-top: .4rem; }
ul.checks { list-style: none; margin: .9rem 0 0; padding: 0; font-size: .92rem; }
ul.checks li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .4rem; padding: .2rem 0; color: var(--muted); }
ul.checks li::before { font-weight: 700; text-align: center; }
ul.checks li.wait::before { content: "…"; color: var(--warm); }
ul.checks li.no::before { content: "✕"; color: #d9534f; }
ul.checks b { color: var(--ink); font-weight: 600; }
.devices { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .9rem 0 0; }
.devices span { padding: .2rem .7rem; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-weight: 600; font-size: .9rem; }
.devices i { width: 1.6rem; border-top: 2px dotted var(--orange); }

/* Night bands, so the page doesn't stay one colour from top to bottom.
   They have no hard edges: the page turns to dusk, lavender then violet,
   into the night purple, and comes out again through an orange dawn. */
section.band {
  margin-top: 2rem; padding: 13rem 0 12rem;
  color: var(--ink);
  --ink: #f4f0e4; --muted: #c9c2e0; --card: #33266b; --line: #46378a;
  --accent: #c9b8ff; --warm: #f2a341; --chip: #45358a; --chip-ink: #e4dbff;
  --frost: rgba(61,43,125,.55);
  background:
    radial-gradient(ellipse min(40vw, 34rem) 18rem at 82% 35%, rgba(112,82,214,.45), transparent 70%),
    radial-gradient(ellipse min(36vw, 30rem) 16rem at 15% 70%, rgba(242,163,65,.14), transparent 70%),
    linear-gradient(to bottom,
      rgba(220,210,246,0) 0, rgba(220,210,246,.55) 2rem, rgba(196,182,236,.85) 3.6rem,
      #a493d8 5rem, #7b66c0 6.4rem, #5a45a1 7.8rem, #433083 9.2rem, #33236b 10.6rem, var(--purple) 12rem,
      var(--purple) calc(100% - 11rem), #33215f calc(100% - 9.6rem), #4a2c66 calc(100% - 8.2rem),
      #6e3f68 calc(100% - 6.8rem), #9a5e6a calc(100% - 5.4rem), #c98e7a calc(100% - 4rem),
      rgba(240,196,150,.75) calc(100% - 2.6rem), rgba(251,216,164,.35) calc(100% - 1.2rem), rgba(251,216,164,0) 100%);
}
.band .ico { background: rgba(244,240,228,.1); box-shadow: inset 0 0 0 1px rgba(244,240,228,.12); }
section.band + section.band { margin-top: 0; }
section.band + section { padding-top: 3rem; }
.band .chip.when { background: #4a3313; color: #ffd49c; }
.band .card { box-shadow: inset 0 1px 0 rgba(244,240,228,.08), 0 24px 60px -30px rgba(0,0,0,.5); }
.band .grid .card:not(.wide), .band .split .card { box-shadow: none; }
.band .grid .card:hover { box-shadow: 0 0 0 1px rgba(242,163,65,.5), 0 18px 44px -12px rgba(242,163,65,.3); }
@media (prefers-color-scheme: dark) {
  /* On the dark page the band is the night lifted a little, fading in and
     out of it, with a glow of violet and orange. */
  section.band {
    background:
      radial-gradient(ellipse min(40vw, 34rem) 18rem at 82% 35%, rgba(112,82,214,.4), transparent 70%),
      radial-gradient(ellipse min(36vw, 30rem) 16rem at 15% 70%, rgba(242,163,65,.12), transparent 70%),
      linear-gradient(to bottom, rgba(44,31,99,0) 0, rgba(44,31,99,.4) 3rem, rgba(44,31,99,.8) 6rem, #2c1f63 9rem, #2c1f63 calc(100% - 9rem), rgba(44,31,99,.8) calc(100% - 6rem), rgba(44,31,99,.4) calc(100% - 3rem), rgba(44,31,99,0) 100%);
  }
}

/* Screenshots: the Mac window, with the iPhone in front of its corner. */
.showcase { position: relative; margin: 2rem 0 0; padding-bottom: 2.5rem; }
.showcase img { display: block; height: auto; }
.showcase .mac {
  width: 86%; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 24px 60px rgba(20,12,48,.35);
}
.showcase .phone {
  position: absolute; right: 0; bottom: 0; width: 24%;
  border: 7px solid #0e0a20; border-radius: 34px; background: #0e0a20;
  box-shadow: 0 0 0 1px rgba(244,240,228,.12), 0 24px 50px rgba(20,12,48,.5);
}
.showcase figcaption { margin-top: 1rem; color: var(--muted); font-size: .92rem; max-width: 70%; }
@media (max-width: 40rem) {
  .showcase .phone { width: 32%; border-width: 5px; border-radius: 24px; }
  .showcase figcaption { max-width: 64%; }
}

/* Home page: how it works, in three numbered steps joined by a dotted line. */
ol.how-steps {
  list-style: none; counter-reset: step; padding: 0; margin: 1.6rem 0 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
ol.how-steps li {
  counter-increment: step; position: relative;
  padding: .4rem 0;
}
ol.how-steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; margin-bottom: .75rem; border-radius: 50%;
  background: var(--orange); color: var(--purple); font: 800 1.05rem/1 var(--round);
  box-shadow: 0 0 0 5px rgba(242,163,65,.2);
}
@media (min-width: 52rem) {
  ol.how-steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 1.5rem; left: 3.4rem; right: .4rem;
    border-top: 3px dotted var(--orange); opacity: .7;
  }
}
ol.how-steps h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
ol.how-steps p { margin: 0; color: var(--muted); font-size: .97rem; }

.apps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
a.app {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--frost); border-radius: 26px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 28px 60px -32px rgba(41,28,87,.45);
  padding: 1.6rem; color: inherit; text-decoration: none;
}
a.app.ar { box-shadow: inset 0 3px 0 var(--ar-cyan), 0 28px 60px -32px rgba(10,43,50,.45); }
a.app { transition: transform .2s ease, box-shadow .2s ease; }
a.app:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(242,163,65,.45), 0 22px 50px -14px rgba(242,163,65,.35); }
a.app .glyph {
  width: 88px; height: 88px; border-radius: 20px; flex: none;
  display: grid; place-items: center;
  background: var(--purple); color: var(--orange);
  font: 700 2.3rem/1 var(--round);
}
@media (prefers-reduced-motion: reduce) {
  a.app { transition: none; }
  a.app:hover { transform: none; }
}
a.app img { width: 88px; height: 88px; border-radius: 20px; flex: none; }
a.app h2 { font-size: 1.4rem; margin: .1rem 0 .4rem; }
a.app p { margin: 0 0 .6rem; color: var(--muted); }
a.app p.meta { font-size: .9rem; font-weight: 600; color: var(--ink); }
a.app .more { color: var(--accent); font-weight: 600; }
p.note { color: var(--muted); margin-top: 1.6rem; }
@media (max-width: 30rem) {
  a.app { flex-direction: column; }
}

ol.steps { padding-left: 1.2rem; max-width: 44rem; }
ol.steps li { margin: .5rem 0; }

.prose { max-width: 44rem; padding: 2.5rem 0 1rem; }
.prose h1 { font-size: 2.2rem; letter-spacing: -.02em; margin-bottom: .2rem; }
.prose .updated { color: var(--muted); margin-top: 0; }
.prose h2 { font-size: 1.3rem; margin-top: 2.2rem; }
.prose dt { font-weight: 600; margin-top: 1.2rem; }
.prose dd { margin: .3rem 0 0; color: var(--muted); }

/* Blog pictures: inline SVG line drawings in cream and orange on the
   icon's purple, like the feature icons. Phones are drawn, not
   screenshots. */
.pic { margin: 1.4rem 0 1.4rem; }
.pic svg {
  display: block; width: 100%; height: auto; border-radius: 22px;
  background: var(--purple);
  box-shadow: 0 0 0 1px rgba(244,240,228,.1), 0 24px 60px -32px rgba(41,28,87,.55);
  fill: none; stroke: var(--cream); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.pic .scr { fill: #3a2b78; stroke: none; }
.pic .dim { stroke: #8f84b8; }
.pic .o { stroke: var(--orange); }
.pic .pu { stroke: var(--purple); }
.pic .fo { fill: var(--orange); stroke: none; }
.pic .fc { fill: var(--cream); stroke: none; }
.pic .dot { stroke: var(--orange); stroke-width: 4; stroke-dasharray: 0 10; }
.pic text { fill: var(--cream); stroke: none; font: 600 18px var(--round); text-anchor: middle; }
.pic text.s { fill: #c9c2e0; font-size: 15px; font-weight: 500; }
.pic text.k { fill: var(--purple); font-size: 13px; }
.pic text.l { text-anchor: start; }
.pic text.m { font-size: 11.5px; }

footer {
  margin-top: 5rem; padding: 2rem 0 3rem;
  color: var(--muted); font-size: .9rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 1.2rem; }
footer a { color: var(--muted); }
footer .right { margin-left: auto; }