/* trymonocle.app
   Same language as heyiam.dk (DESIGN.md): one family, the system font (SF Pro on a Mac), at one text size (13.5px / 1.62),
   prominent (ink 500) or subtle (ink-2 400); soft pills, outline buttons, hairlines. No mono.
   Turned up for a product: a two-line claim, the desk, big two-tone statements, then quiet type.
   The grey half of every headline is the "blurred" part, the ink half is what's in focus.
   Tokens first, then components. */

/* tokens ----------------------------------------------------------- */
/* The portfolio's (heyiam.dk, DESIGN.md), value for value. Monocle's own few on top: --lo for the quiet half
   of big type, --shine-a, --open, and the wider column (--gutter, --max, --side) */
:root {
  color-scheme: light;
  --bg: #fff;
  --ink: #151515;
  --ink-2: #858582;        /* subtle text, quiet on purpose (3.7:1, about Apple's secondary label) */
  --ink-3: #8c8c89;        /* strokes and hover underlines only, never text */
  --line: rgb(0 0 0 / .08);
  --line-2: rgb(0 0 0 / .18);
  --tile: #f3f3f2;         /* empty media frames */
  --soft: #f4f4f3;         /* tag fill, the soft button */
  --soft-2: #ececea;       /* their hover */
  --radius: 10px;          /* media frames */

  --lo: #a6a6a3;           /* Monocle: the quiet half of a headline, large type only */
  --shine-a: .52;          /* Monocle: ink at this alpha is exactly --ink-2, so the award's shimmer starts and ends invisibly */
  --open: cubic-bezier(.16, 1, .3, 1);   /* Monocle: arrivals, fast out, long soft landing */

  --gutter: max(clamp(32px, 6vw, 128px), env(safe-area-inset-left), env(safe-area-inset-right));   /* room to breathe at the sides (~86px at 1440) */
  --read-fs: clamp(18px, 1.5vw, 23px);   /* reading type: the letters and the questions */
  --max: 1680px;
  --side: max(var(--gutter), 50% - var(--max) / 2);   /* where the centred column starts (% of the element's box, so scrollbars don't count) */
  --sans: system-ui, -apple-system, sans-serif;   /* the system font, like Klack and Alcove: SF Pro on Apple devices, no web fonts */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e0e0e; --ink: #ececea; --ink-2: #73736f; --ink-3: #7b7b78;
    --line: rgb(255 255 255 / .09); --line-2: rgb(255 255 255 / .22);
    --tile: #1a1a19; --soft: #191918; --soft-2: #222221;
    --lo: #585855; --shine-a: .455;
  }
}

/* base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 13.5px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
main { flex: 1 0 auto; overflow-x: clip; }   /* the desk reaches past the screen; clip, so phones never widen the layout */
img, svg { display: block; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--bg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 60; left: var(--gutter); top: 10px; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--bg); transform: translateY(-200%); }
.skip:focus { transform: none; }
code { font: inherit; color: var(--ink); white-space: nowrap; }
h1:focus:not(:focus-visible) { outline: none; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* pills and buttons ------------------------------------------------ */
.badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--soft);
  font: 400 13.5px/1 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}
a.badge { position: relative; transition: color .2s, background-color .2s; }
a.badge::after { content: ""; position: absolute; inset: -8px -3px; }
a.badge:hover { color: var(--ink); background: var(--soft-2); text-decoration: none; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 600;   /* semibold, like atlasformac.com's buttons */
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease);
}
.btn:hover { text-decoration: none; border-color: var(--ink-3); }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--ink:hover { border-color: var(--ink); }   /* no colour change: the label swap is its hover */
.btn--soft { background: var(--soft); border-color: transparent; }
.btn--soft:hover { background: var(--soft-2); border-color: transparent; }
.btn--sm { height: 33px; padding: 0 15px; }   /* the one small size: the bar's Download and the pricing cards */
.btn--lg { height: 52px; padding: 0 28px; font-size: 15px; letter-spacing: -.005em; }
.btn svg { width: 13px; height: 13px; fill: currentColor; margin-top: -2px; }
.btn--lg svg { width: 15px; height: 15px; margin-top: -3px; }
.btn--lg:has(svg) { padding: 0 30px 0 26px; }   /* optical: the round apple reads roomier than the straight "d" */
.btn--ink { box-shadow: 0 10px 18px -5px rgb(0 0 0 / .17), 0 4px 8px -4px rgb(0 0 0 / .16); }   /* lifted off the page (after tryklack.com's, softer) */
.btn--ink.btn--lg { box-shadow: 0 17px 30px -7px rgb(0 0 0 / .17), 0 6px 12px -5px rgb(0 0 0 / .16); }
.fine { margin-top: 20px; color: var(--ink-2); }
/* the badge above and the Homebrew line below start where the claim's big N does (its ink sits .065em in), not at the box */
.hero-in > .fine { margin: calc(24px - clamp(28px, 2.5vw, 44px)) 0 0 calc(var(--claim) * .065 - 1.1px); }   /* 24px under the buttons; the b has 1.1px of its own */
/* the hero buttons say a second thing on hover: Download "7-day trial", Buy the sales count (live from
   Gumroad via site.js, the HTML number until then). Both labels share one cell, so the button keeps its width;
   the first slides out to the left as the second comes in from the right. Hover only, so the number is never
   on screen before Gumroad has answered. */
.sw { display: inline-grid; }
.sw > span { grid-area: 1 / 1; text-align: center; transition: opacity .3s var(--ease), filter .3s var(--ease), translate .4s var(--ease); }
svg + .sw { justify-items: start; }   /* next to the apple, both labels start right after it */
.sw-b { opacity: 0; filter: blur(3px); translate: 10px 0; }
@media (hover: hover) {
  .swap:hover .sw-a { opacity: 0; filter: blur(3px); translate: -10px 0; }
  .swap:hover .sw-b { opacity: 1; filter: none; translate: none; }
}


/* top: nav right, a small brand left once the big one has gone ----- */
.controls {
  position: fixed;
  z-index: 30;
  top: 18px;
  right: calc(var(--gutter) - 6px);   /* the last link's text ends on the column edge */
  display: flex;
  align-items: center;
  gap: 12px;                          /* with the links' own 6px, 24px between items */
  line-height: 1;
  transition: padding-right .45s var(--ease);
}
.controls a:not(.btn) { padding: 8px 6px; color: var(--ink-2); transition: color .2s; }
.controls a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.controls a[aria-current] { color: var(--ink); font-weight: 500; }
/* the version: the portfolio's small outline badge */
.controls .ver { margin-left: 5px; padding: 3px 5px 2px; border: 1px solid var(--line-2); border-radius: 5px; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; vertical-align: 1px; }
.home .controls { right: calc(var(--side) - 6px); }

/* the download pill slides in once the hero buttons scroll away, nudging the links aside */
.get { position: absolute; right: 6px; top: 50%; translate: 0 -50%; pointer-events: none; }   /* the pill ends on the column edge too */
.get .btn { pointer-events: auto; opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity .25s, transform .45s var(--ease), visibility 0s .45s; }
.is-past-cta .controls { padding-right: calc(var(--getw, 90px) + 24px); }   /* 24px from the last item to the pill too */
.is-past-cta .get .btn { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .12s, transform .45s var(--ease); }

.mini {
  position: fixed;
  z-index: 30;
  top: 18px;
  left: var(--side);
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--ink);
}
.mini:hover { text-decoration: none; }
/* Monocle's mark (the wavy M), not the whole icon: one line along the middle of its shape, stroked at the
   shape's width with round ends, so it can draw itself on load (see motion). Takes the ink in both themes. */
.logo { display: block; flex: none; width: 32px; height: 11.8px; overflow: visible; }
.logo path { fill: none; stroke: currentColor; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }

/* hero: the claim, the buttons, and the desk tells the rest -------- */
/* Two lines on the left (ink claim, grey intro), the buttons always under them, then the desk:
   a busy Mac, and Monocle's dot above it. */
.hero { --claim: clamp(28px, 3.25vw, 52px); padding-top: clamp(124px, 17vh, 220px); }   /* the claim gets its own air under the nav */
.hero-in { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px, 2.5vw, 44px); }   /* room under the claim, growing with it */
.claim {
  max-width: 21em;
  margin: 0;
  font-size: var(--claim);   /* the same size as the statements below (.say) */
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}
.claim > span { display: block; }
.lo { color: var(--lo); }
/* the grey line turns over (site.js): every line sits in the same grid cell, so the tallest sets the height and
   nothing under it moves. The swap is the buttons' hover swap, sized up for the big type: the line going out
   blurs and slides left, the next one comes in from the right into focus. Screen readers get one line that stays (.sr) */
.claim > .turn { display: grid; }
.turn > .t { grid-area: 1 / 1; transition: opacity .6s var(--ease), filter .6s var(--ease), translate .8s var(--ease), visibility 0s; }
.turn > .t:not(.is-on) { opacity: 0; filter: blur(.16em); translate: 14px 0; visibility: hidden; transition-delay: 0s, 0s, 0s, .8s; }
.turn > .t.is-out { translate: -14px 0; }
.hero .ctas { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: 12px; margin: 0; }   /* Download, alone since 2026-10-15 */

/* the demo cursor (Monocle.wiggle) */
.ghost-cursor { position: fixed; z-index: 90; left: 0; top: 0; width: 22px; height: 30px; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .35)); }
.ghost-cursor path { fill: #000; stroke: #fff; stroke-width: 1.4px; stroke-linejoin: round; }
.ghost-touch { position: absolute; left: -16px; top: -16px; width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / .55); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9), 0 2px 10px rgb(0 0 0 / .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }


/* the launch's award, pinned above the claim; the row above the desk is the way in: a caption and Monocle's dot */
.go-focus { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 clamp(30px, 3vw, 48px); color: var(--ink-2); }   /* clear of the frost that bleeds past the card */
/* #2 on Product Hunt between SF Symbols' laurel.leading / laurel.trailing, all subtle */
.award { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 clamp(14px, 1.35vw, 20px) calc(var(--claim) * .065); white-space: nowrap; color: var(--ink-2); transition: color .2s; }
.award:hover { color: var(--ink); text-decoration: none; }
.award svg { flex: none; width: 8px; height: 17px; fill: currentColor; }
/* no cursor to shake on touch screens, so there it's just the dot */
.go-focus .on-touch { display: none; }
@media (hover: none) { .go-focus .on-pointer { display: none; } .go-focus .on-touch { display: inline; } }
/* Monocle's menu bar icon, a dot: the subtle text grey, faint, when off; full ink with a soft shine when on */
.mdot { position: relative; display: grid; place-items: center; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: color .45s var(--ease); }   /* 6px in: the card's corner is rounded */
.mdot::after { content: ""; position: absolute; inset: -13px; }   /* a comfortable target (~41px), nothing drawn */
.mdot i { position: relative; width: 15px; height: 15px; border-radius: 50%; background: currentColor; opacity: .4; transition: opacity .45s var(--ease), scale .3s cubic-bezier(.3, 1.5, .5, 1); }
/* the shine is its own layer that fades in (a shadow mixed from currentColor would jump instead of easing) */
.mdot i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ink) 32%, transparent); opacity: 0; transition: opacity .55s var(--ease); }
/* while it's off, a soft ping behind it says it's there to press (like the portfolio's availability dot) */
.mdot i::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; animation: mdot-ping 2.6s cubic-bezier(.2, .7, .2, 1) infinite; }
.mdot[aria-checked="true"] i::after { animation: none; }
@keyframes mdot-ping { 0% { scale: 1; opacity: .5; } 70%, 100% { scale: 3.2; opacity: 0; } }
.mdot:hover i { scale: 1.18; }
.mdot:active i { scale: 1.04; }
.mdot[aria-checked="true"] { color: var(--ink); }
.mdot[aria-checked="true"] i { opacity: 1; }
.mdot[aria-checked="true"] i::before { opacity: 1; }
.mdot:focus-visible { outline-offset: 6px; }

/* Monocle's blur lives with its dot, only while it's on: the caption folds away and a track grows out of
   the dot, which rides it as the blur handle (drag it to change the blur, tap it to switch Monocle off).
   day.js sets --p (0..1, the blur) and .is-on / .is-dragging */
.gf-say { display: inline-flex; align-items: center; max-width: 260px; white-space: nowrap; overflow: hidden; transition: max-width .5s var(--ease), opacity .35s var(--ease), filter .35s var(--ease); }
.go-focus.is-on .gf-say { max-width: 0; opacity: 0; filter: blur(4px); }
.gf-range { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }   /* the dot is the handle; the range stays for keys and screen readers */
.gf-rail { --tw: 0px; position: relative; flex: none; width: calc(var(--tw) + 15px); height: 15px; margin-right: 6px; transition: width .5s var(--ease); }   /* 6px in: the card's corner is rounded */
.go-focus.is-on .gf-rail { --tw: 120px; }
.gf-rail .mdot { position: absolute; top: 0; left: calc(var(--p, .33) * var(--tw)); transition: color .45s var(--ease), left .5s var(--ease); }
.go-focus.is-on .mdot { cursor: grab; }
.go-focus.is-on .gf-rail { touch-action: none; }   /* on a phone a drag on the knob or its track is never a scroll, however wobbly */
.go-focus.is-on .gf-rail::before { content: ""; position: absolute; inset: -14px -6px; }   /* a finger-sized strip around the 3px track: presses a little above or below still count */
.go-focus.is-dragging .mdot { cursor: grabbing; }
.go-focus:has(.gf-range:focus-visible) .mdot { outline: 1.5px solid var(--ink); outline-offset: 4px; border-radius: 50%; }
.gf-line { position: absolute; left: 7.5px; right: 7.5px; top: 6px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--soft-2), var(--ink) 5%); opacity: 0; transition: opacity .3s var(--ease); }   /* the unfilled part: a touch darker than the mono pill and Buy (their hover grey, 5% toward ink, both themes) */
.gf-line > i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, .33) * 100%); border-radius: inherit; background: var(--ink); }
.go-focus.is-on .gf-line { opacity: 1; }
.go-focus.is-dragging .gf-rail, .go-focus.is-dragging .mdot { transition: none; }

/* the desk: an abstract Mac. A wallpaper card at 1512x864 points, scaled into the column, with a few
   windows floating over it. They're free to break out of the card (the frame doesn't clip). Monocle's
   frost bleeds past the card into the page, so everything but your window goes soft out to the edges. */
.desk { margin-top: clamp(56px, 5vw, 96px); container-type: inline-size; }   /* claim, then a beat, then the desk */
@media (min-width: 1000px) and (max-height: 1200px) { .hero { padding-top: 144px; } .desk { margin-top: 72px; } }
.screen {
  position: relative;
  aspect-ratio: 1512 / 864;
  touch-action: pan-y;
  isolation: isolate;
}
/* the frost reaches past the card, but never over the page's own words and controls */
.hero-in, .go-focus { position: relative; z-index: 1; }
.scene {
  --k: .5;
  --cam-x: 0px;                    /* the part of the desk the card shows (day.js sets these per camera) */
  --cam-w: 1512px;
  --card-r: 20px;
  position: absolute;
  left: 0;
  top: 0;
  width: 1512px;
  height: 864px;
  transform-origin: 0 0;
  transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(var(--k));

  /* macOS, simplified: the window tokens */
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --sfr: ui-rounded, -apple-system, "SF Pro Rounded", sans-serif;
  --w-bg: #fff;
  --w-ink: #1d1d1f;
  --w-ink-2: #7c7c80;
  --w-ink-3: #b4b4b8;
  --w-line-2: rgb(0 0 0 / .13);
  --w-cap: #fff;                   /* toolbar capsules */
  --w-cap-line: rgb(0 0 0 / .1);
  --w-accent: #0a84ff;
  --w-red: #ff3b30;
  --w-shadow: 0 0 0 .5px rgb(0 0 0 / .16), 0 14px 40px rgb(0 0 0 / .17), 0 3px 10px rgb(0 0 0 / .07);
  --w-shadow-key: 0 0 0 .5px rgb(0 0 0 / .2), 0 30px 80px rgb(0 0 0 / .3), 0 10px 26px rgb(0 0 0 / .13);
  --w-lights-off: #d7d7d9;
  --dim: 1;                        /* the wallpaper in dark mode, see below */
  font: 400 13px/1.35 var(--sf);
  letter-spacing: -.006em;
  color: var(--w-ink);
  -webkit-font-smoothing: antialiased;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
@media (prefers-color-scheme: dark) {
  :root .scene {
    --w-bg: #1e1e1e;
    --w-ink: #f2f2f4; --w-ink-2: #98989d; --w-ink-3: #5d5d61;
    --w-line-2: rgb(255 255 255 / .14);
    --w-cap: #2c2c2e; --w-cap-line: rgb(255 255 255 / .08);
    --w-shadow: 0 0 0 .5px rgb(0 0 0 / .6), inset 0 0 0 .5px rgb(255 255 255 / .09), 0 14px 40px rgb(0 0 0 / .4), 0 3px 10px rgb(0 0 0 / .2);
    --w-shadow-key: 0 0 0 .5px rgb(0 0 0 / .7), inset 0 0 0 .5px rgb(255 255 255 / .12), 0 30px 80px rgb(0 0 0 / .55), 0 10px 26px rgb(0 0 0 / .3);
    --w-lights-off: #4a4a4d;
  }
}
/* the wallpaper: picked at random on load (the inline script in index.html); its colour field
   paints first, soft, while the big one loads. Dark mode dims light wallpapers, dark ones barely */
.wp {
  position: absolute;
  left: var(--cam-x);
  top: 0;
  width: var(--cam-w);
  height: 864px;
  border-radius: var(--card-r);
  overflow: hidden;
  background: #7fb2df center / cover;
  filter: blur(0px) saturate(1) brightness(var(--dim));   /* same functions as when frosted, so it eases */
  box-shadow: 0 0 0 1px var(--line);
}
.wp img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-color-scheme: dark) { :root .scene { --dim: .74; } :root .scene.is-wall-dark { --dim: .95; } }   /* softer than it was (.58), not gone (Dominik) */

/* arrivals on the desk: windows open, icons drop, nothing ever blurs in */
.js .scene [data-at]:not(.is-in) { opacity: 0; visibility: hidden; }
.scene [data-at] { transition: opacity .28s ease-out, transform .42s cubic-bezier(.2, .9, .3, 1), visibility 0s; }
.scene .win.is-in { animation: win-open .42s var(--open) backwards; }
@keyframes win-open { from { opacity: 0; transform: translateY(12px) scale(.955); } }
.is-scrub .scene * { transition-duration: 0s !important; }

/* windows: macOS 26, minus the glass ------------------------------- */
.win {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  z-index: var(--z, 10);
  display: flex;
  flex-direction: column;
  border-radius: var(--wr, 18px);
  background: var(--w-bg);
  box-shadow: var(--w-shadow);
  overflow: hidden;
  transform-origin: 50% 40%;
}
.win.is-key { box-shadow: var(--w-shadow-key); }
.tl { display: flex; gap: 8px; flex: none; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: var(--w-lights-off); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .1); }
.is-key .tl i:nth-child(1) { background: #ff5f57; box-shadow: inset 0 0 0 .5px #e2463f; }
.is-key .tl i:nth-child(2) { background: #febc2e; box-shadow: inset 0 0 0 .5px #e1a116; }
.is-key .tl i:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 .5px #14ae2b; }
.tb { flex: none; display: flex; align-items: center; gap: 8px; height: 52px; }
.tb .sp { flex: 1; }
.cap {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--w-cap);
  box-shadow: 0 0 0 .5px var(--w-cap-line), 0 1px 3px rgb(0 0 0 / .07), 0 0 1px rgb(0 0 0 / .04);
  color: var(--w-ink);
}
.cap > i { display: grid; place-items: center; width: 34px; height: 28px; border-radius: 99px; }
.cap.rb { width: 32px; justify-content: center; padding: 0; }
.cap svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.win:not(.is-key) .tb .cap { color: var(--w-ink-2); }   /* the window in front has the darker toolbar, like macOS */

/* Liquid Glass, macOS 26: the material every new window is built from.
   .glass: a floating control or panel over content (toolbar capsules, sidebars, pills). Translucent,
   saturated, a bright rim and a soft top light, so whatever scrolls under it shows through.
*/
.scene {
  --g-fill: rgb(255 255 255 / .56);
  --g-rim: inset 0 0 0 .5px rgb(255 255 255 / .7), inset 0 1px 0 rgb(255 255 255 / .9);
  --g-edge: 0 0 0 .5px rgb(0 0 0 / .07);
  --g-drop: 0 1px 2px rgb(0 0 0 / .06), 0 4px 14px rgb(0 0 0 / .07);
  --g-blur: blur(14px) saturate(1.9) brightness(1.04);
}
@media (prefers-color-scheme: dark) {
  :root .scene {
    --g-fill: rgb(44 44 48 / .5);
    --g-rim: inset 0 0 0 .5px rgb(255 255 255 / .16), inset 0 1px 0 rgb(255 255 255 / .18);
    --g-edge: 0 0 0 .5px rgb(0 0 0 / .5);
    --g-drop: 0 1px 2px rgb(0 0 0 / .3), 0 4px 14px rgb(0 0 0 / .25);
    --g-blur: blur(14px) saturate(1.7) brightness(.92);
  }
}
.glass {
  background: var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-rim), var(--g-edge), var(--g-drop);
}

/* notes: your window, the manifesto's draft in a notes app (our own, a little Craft). The sidebar sits straight
   on the window's warm grey, the doc floats on a card. One accent (the title, the tag, the caret), one highlight */
.w-note {
  --wr: 26px;
  --nt-bg: #f3f2ef;
  --nt-card: #fffefc;
  --nt-accent: #ec6a1f;
  --nt-sel: rgb(0 0 0 / .06);
  --nt-mark: rgb(255 212 64 / .5);       /* the highlighter */
  --nt-card-sh: 0 0 0 .5px rgb(0 0 0 / .07), 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .05);
  flex-direction: row;
  background: var(--nt-bg);
}
.w-note svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* the sidebar: your space, then the folders */
.w-note .nt-side { flex: none; width: 184px; padding: 0 10px; white-space: nowrap; }
.w-note .nt-top { display: flex; align-items: center; height: 44px; padding-left: 8px; }
.w-note .nt-side p { display: flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 8px; border-radius: 9px; font-size: 13px; letter-spacing: -.008em; }
.w-note .nt-side p svg { width: 16px; height: 16px; stroke-width: 1.35; color: var(--w-ink-2); }
.w-note .nt-side .nt-me { margin-bottom: 6px; }
.w-note .nt-me b { font-weight: 600; }
.w-note .nt-av { flex: none; width: 20px; height: 20px; border-radius: 6px; background: url(/assets/desk/nt-dominik.jpg) center / cover; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12); }
.w-note .nt-side h6 { margin: 16px 8px 4px; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .005em; color: var(--w-ink-2); }
.w-note .nt-side p .dc { width: 12px; height: 12px; margin: 0 -4px 0 -2px; stroke-width: 1.6; }
.w-note .nt-f.is-open .dc { rotate: 90deg; }
.w-note .nt-side .nt-d { padding-left: 30px; }
.w-note .nt-side p.on { background: var(--nt-sel); font-weight: 500; }
.w-note.is-key .nt-side p.on svg { color: var(--nt-accent); }

/* the doc: a toolbar, then the card */
.w-note .nt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 8px 8px 0; }
.w-note .tb { gap: 10px; padding: 0 6px 0 0; }
.w-note .nt-doc { flex: 1; min-height: 0; padding: 30px 40px 0; border-radius: 18px; background: var(--nt-card); box-shadow: var(--nt-card-sh); overflow: hidden; }
.w-note .nt-doc > * { margin: 0; }
.w-note .nt-doc h1 { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.028em; color: var(--nt-accent); }
.w-note .nt-doc .nt-tag { display: inline-flex; align-items: center; height: 20px; margin-top: 9px; padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--nt-accent) 11%, transparent); color: var(--nt-accent); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.w-note .nt-text { margin-top: 22px; font-size: 14px; line-height: 1.6; letter-spacing: -.01em; text-wrap: pretty; }
.w-note .nt-text p { margin: 0 0 10px; }
.w-note mark { padding: 0 2px; margin: 0 -2px; border-radius: 3px; background: var(--nt-mark); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* the last line, written as the windows arrive: words wait (display: none, so the caret sits right after the last one),
   and the highlight grows with them (it isn't there until its first word is) */
.w-note .kw { font-weight: inherit; }
.w-note .kw[data-at]:not(.is-in):not(.is-typed), .w-note .kw-on:not(.is-typed) { display: none; }
.w-note mark:not(:has(.is-in, .is-typed)) { display: none; }
.w-note .car { display: inline-block; width: 2px; height: 18px; margin-left: 1px; vertical-align: -4px; border-radius: 1px; background: var(--nt-accent); animation: nt-blink 1.05s steps(1) infinite; }
@keyframes nt-blink { 50% { opacity: 0; } }

@media (prefers-color-scheme: dark) {
  :root .w-note {
    --nt-bg: #232322; --nt-card: #2b2b2b; --nt-accent: #ff8a3d; --nt-sel: rgb(255 255 255 / .08);
    --nt-mark: rgb(255 204 64 / .28);
    --nt-card-sh: 0 0 0 .5px rgb(255 255 255 / .07), 0 1px 2px rgb(0 0 0 / .2), 0 8px 24px rgb(0 0 0 / .3);
  }
}

.is-calm .w-note:not(.is-key) * { animation-play-state: paused; }


/* the frost: Monocle as depth of field ----------------------------- */
/* Everything but the window you're using goes out of focus by itself: the wallpaper card, every other
   window, the desktop icons. Each one blurs its own pixels (no overlay sampling what's behind it), so the
   soft edges spill past the card the way a lens would, and nothing ever shows a seam. The rest of the
   app's recipe (the wallpaper's colour field and the grain) rides above them, under your window:
   see "what rides on the frost". day.js staggers the blur (--dl) so it travels out from the cursor. */
.scene {
  --blur: 12.5px;
  --sat: 1.2;
  --wall-a: 0;
  --grain: .066;
  --fr-in: cubic-bezier(.22, .61, .36, 1);
}
.scene .wp, .scene .win, .scene .w-ico, .scene .w-shot { transition: filter .5s var(--fr-in) var(--dl, 0s); }
.scene .win.is-key { transition-delay: 0s; transition-duration: .45s; }
.scene.is-on .win:not(.is-key), .scene.is-on .w-ico, .scene.is-on .w-shot { filter: blur(var(--blur)) saturate(var(--sat)); }
.scene.is-on .wp { filter: blur(var(--blur)) saturate(var(--sat)) brightness(var(--dim)); }
.scene.is-mono { --sat: 0; } /* mono: not in the hero for now; kept for a features card later (day.js toggles it from any [data-k="mono"]) */
.scene.is-tuning .wp, .scene.is-tuning .win, .scene.is-tuning .w-ico, .scene.is-tuning .w-shot { transition: none; }   /* while the knob is dragged the frost follows the finger, no easing */
.scene:not(.is-on) .win, .scene:not(.is-on) .w-ico, .scene:not(.is-on) .w-shot, .scene:not(.is-on) .wp { transition-duration: .32s; }

/* what rides on the frost, above the blurred desk and under your window (z 40/41, yours is 50):
   - the colour field: the wallpaper's (3.6, blurred ahead of time by tools/field.swift), full over most of
     the card, fading softly toward its edges and only just past them
   - the grain: over the whole card and a little past it (fading out over the windows that hang off the
     card, into the page), unblurred (inside a blurred window it would be blurred away). A sibling of the
     windows, so its overlay blend reaches them */
.mamb, .mgrain {
  --gf: 80px;                      /* the grain reaches this far past the card, fading out (.mamb sets its own, shorter) */
  position: absolute;
  left: calc(var(--cam-x) - var(--gf));
  top: calc(var(--gf) * -1);
  width: calc(var(--cam-w) + var(--gf) * 2);
  height: calc(864px + var(--gf) * 2);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--fr-in);
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 var(--gf), #000 calc(100% - var(--gf)), #0000), linear-gradient(#0000, #000 var(--gf), #000 calc(100% - var(--gf)), #0000);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #0000, #000 var(--gf), #000 calc(100% - var(--gf)), #0000), linear-gradient(#0000, #000 var(--gf), #000 calc(100% - var(--gf)), #0000);
  mask-composite: intersect;
}
.mamb {
  --gf: 32px;                      /* the colour barely leaves the card... */
  --af: min(380px, calc(var(--cam-w) * .28));   /* ...and eases in over a long stretch inside its edges (smootherstep, so no bands); shorter on the phone's narrow card */
  z-index: 40;
  -webkit-mask-image: linear-gradient(90deg, #0000, rgb(0 0 0 / 0.009) calc(var(--af) * 0.1), rgb(0 0 0 / 0.058) calc(var(--af) * 0.2), rgb(0 0 0 / 0.163) calc(var(--af) * 0.3), rgb(0 0 0 / 0.317) calc(var(--af) * 0.4), rgb(0 0 0 / 0.500) calc(var(--af) * 0.5), rgb(0 0 0 / 0.683) calc(var(--af) * 0.6), rgb(0 0 0 / 0.837) calc(var(--af) * 0.7), rgb(0 0 0 / 0.942) calc(var(--af) * 0.8), rgb(0 0 0 / 0.991) calc(var(--af) * 0.9), #000 var(--af), #000 calc(100% - var(--af)), rgb(0 0 0 / 0.991) calc(100% - var(--af) * 0.9), rgb(0 0 0 / 0.942) calc(100% - var(--af) * 0.8), rgb(0 0 0 / 0.837) calc(100% - var(--af) * 0.7), rgb(0 0 0 / 0.683) calc(100% - var(--af) * 0.6), rgb(0 0 0 / 0.500) calc(100% - var(--af) * 0.5), rgb(0 0 0 / 0.317) calc(100% - var(--af) * 0.4), rgb(0 0 0 / 0.163) calc(100% - var(--af) * 0.3), rgb(0 0 0 / 0.058) calc(100% - var(--af) * 0.2), rgb(0 0 0 / 0.009) calc(100% - var(--af) * 0.1), #0000), linear-gradient(180deg, #0000, rgb(0 0 0 / 0.009) calc(var(--af) * 0.1), rgb(0 0 0 / 0.058) calc(var(--af) * 0.2), rgb(0 0 0 / 0.163) calc(var(--af) * 0.3), rgb(0 0 0 / 0.317) calc(var(--af) * 0.4), rgb(0 0 0 / 0.500) calc(var(--af) * 0.5), rgb(0 0 0 / 0.683) calc(var(--af) * 0.6), rgb(0 0 0 / 0.837) calc(var(--af) * 0.7), rgb(0 0 0 / 0.942) calc(var(--af) * 0.8), rgb(0 0 0 / 0.991) calc(var(--af) * 0.9), #000 var(--af), #000 calc(100% - var(--af)), rgb(0 0 0 / 0.991) calc(100% - var(--af) * 0.9), rgb(0 0 0 / 0.942) calc(100% - var(--af) * 0.8), rgb(0 0 0 / 0.837) calc(100% - var(--af) * 0.7), rgb(0 0 0 / 0.683) calc(100% - var(--af) * 0.6), rgb(0 0 0 / 0.500) calc(100% - var(--af) * 0.5), rgb(0 0 0 / 0.317) calc(100% - var(--af) * 0.4), rgb(0 0 0 / 0.163) calc(100% - var(--af) * 0.3), rgb(0 0 0 / 0.058) calc(100% - var(--af) * 0.2), rgb(0 0 0 / 0.009) calc(100% - var(--af) * 0.1), #0000);
  mask-image: linear-gradient(90deg, #0000, rgb(0 0 0 / 0.009) calc(var(--af) * 0.1), rgb(0 0 0 / 0.058) calc(var(--af) * 0.2), rgb(0 0 0 / 0.163) calc(var(--af) * 0.3), rgb(0 0 0 / 0.317) calc(var(--af) * 0.4), rgb(0 0 0 / 0.500) calc(var(--af) * 0.5), rgb(0 0 0 / 0.683) calc(var(--af) * 0.6), rgb(0 0 0 / 0.837) calc(var(--af) * 0.7), rgb(0 0 0 / 0.942) calc(var(--af) * 0.8), rgb(0 0 0 / 0.991) calc(var(--af) * 0.9), #000 var(--af), #000 calc(100% - var(--af)), rgb(0 0 0 / 0.991) calc(100% - var(--af) * 0.9), rgb(0 0 0 / 0.942) calc(100% - var(--af) * 0.8), rgb(0 0 0 / 0.837) calc(100% - var(--af) * 0.7), rgb(0 0 0 / 0.683) calc(100% - var(--af) * 0.6), rgb(0 0 0 / 0.500) calc(100% - var(--af) * 0.5), rgb(0 0 0 / 0.317) calc(100% - var(--af) * 0.4), rgb(0 0 0 / 0.163) calc(100% - var(--af) * 0.3), rgb(0 0 0 / 0.058) calc(100% - var(--af) * 0.2), rgb(0 0 0 / 0.009) calc(100% - var(--af) * 0.1), #0000), linear-gradient(180deg, #0000, rgb(0 0 0 / 0.009) calc(var(--af) * 0.1), rgb(0 0 0 / 0.058) calc(var(--af) * 0.2), rgb(0 0 0 / 0.163) calc(var(--af) * 0.3), rgb(0 0 0 / 0.317) calc(var(--af) * 0.4), rgb(0 0 0 / 0.500) calc(var(--af) * 0.5), rgb(0 0 0 / 0.683) calc(var(--af) * 0.6), rgb(0 0 0 / 0.837) calc(var(--af) * 0.7), rgb(0 0 0 / 0.942) calc(var(--af) * 0.8), rgb(0 0 0 / 0.991) calc(var(--af) * 0.9), #000 var(--af), #000 calc(100% - var(--af)), rgb(0 0 0 / 0.991) calc(100% - var(--af) * 0.9), rgb(0 0 0 / 0.942) calc(100% - var(--af) * 0.8), rgb(0 0 0 / 0.837) calc(100% - var(--af) * 0.7), rgb(0 0 0 / 0.683) calc(100% - var(--af) * 0.6), rgb(0 0 0 / 0.500) calc(100% - var(--af) * 0.5), rgb(0 0 0 / 0.317) calc(100% - var(--af) * 0.4), rgb(0 0 0 / 0.163) calc(100% - var(--af) * 0.3), rgb(0 0 0 / 0.058) calc(100% - var(--af) * 0.2), rgb(0 0 0 / 0.009) calc(100% - var(--af) * 0.1), #0000);
}
.mamb > i { position: absolute; inset: 0; }
.mamb-wall { background: var(--wall) center / cover; filter: brightness(var(--dim)); opacity: var(--wall-a); }
.scene.is-mono .mamb-wall { filter: grayscale(1) brightness(var(--dim)); }
.scene.is-on .mamb { opacity: 1; }
.mgrain { z-index: 41; background: url(/assets/img/grain.png) 0 0 / 192px; mix-blend-mode: overlay; }
.scene.is-on .mgrain { opacity: var(--grain); }

/* the desk, window by window ------------------------------------ */
/* safari: a video, half watched, 27 tabs above it ---------------------------------------
   Safari 26: the page runs right up under the toolbar, the controls float on it as glass,
   the tabs sit in one glass strip. The site is "Watch", a video site in its own light and
   dark look, with the player's colour glowing out onto the page (ambient mode). */
.w-web {
  --wr: 26px;
  --pg: #fff;
  --pg-ink: #0f0f10;
  --pg-ink-2: #65656b;
  --pg-ink-3: #909096;
  --pg-btn: rgb(0 0 0 / .055);
  --pg-line: rgb(0 0 0 / .1);
  --sub-bg: #0f0f10;
  --sub-ink: #fff;
  --amb-a: 0;
  --tr: rgb(248 248 250 / .4);        /* the tab strip: a touch of grey so the current tab can stand up out of it, thin enough for the video to show through */
  --tr-on: rgb(255 255 255 / .96);
  --tr-on-shadow: 0 0 0 .5px rgb(0 0 0 / .07), 0 1px 1.5px rgb(0 0 0 / .08), 0 3px 8px rgb(0 0 0 / .07);
  --cap-bg: linear-gradient(rgb(255 255 255 / .78), rgb(246 246 248 / .62));   /* capsules on white: a faint lens, a light drop */
  --cap-sh: var(--g-rim), 0 0 0 .5px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .03), 0 3px 10px rgb(0 0 0 / .05);
  --still: url(/assets/desk/wall-9-900.jpg);    /* the video: one of the wallpapers that isn't on the desk (day.js deals them) */
  --still-field: url(/assets/desk/wall-9-field.jpg);
  background: var(--pg);
  color: var(--pg-ink);
}

/* the chrome floats over the page: no bar behind it, just glass on the site's own colour.
   The page is scrolled a little, so the top of the video and the chips sit under the tab strip,
   softened by the scroll edge */
.w-web > .pg { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 196px; column-gap: 14px; align-items: start; padding: 48px 16px 0 16px; }
.w-web > .chrome { position: absolute; z-index: 3; left: 0; top: 0; right: 0; }
.w-web > .chrome::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: linear-gradient(var(--pg) 25%, color-mix(in srgb, var(--pg) 65%, transparent) 60%, transparent);
  -webkit-mask-image: linear-gradient(#000 55%, #0000);
  mask-image: linear-gradient(#000 55%, #0000);
  pointer-events: none;
}
.w-web .tb { padding: 0 10px 0 20px; }
.w-web .tb .tl { margin-right: 12px; }
.w-web .cap.glass { background: var(--cap-bg); box-shadow: var(--cap-sh); }
.w-web .side { gap: 1px; padding: 0 9px 0 8px; }
.w-web .side svg:last-child { width: 9px; height: 9px; stroke-width: 1.7; color: var(--w-ink-2); }
.w-web .nav > i { width: 31px; }
.w-web .nav .off { color: var(--w-ink-3); }
.w-web .act > i { width: 33px; }

/* the smart search field: page menu left, the domain centred, audio and reload right */
.w-web .url { position: relative; flex: 1; min-width: 0; justify-content: center; margin: 0 6px; padding: 0 56px; font-size: 13px; letter-spacing: -.012em; }
.w-web .url .pm { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--w-ink-2); }
.w-web .url .rl { position: absolute; right: 10px; width: 15px; height: 15px; color: var(--w-ink-2); stroke-width: 1.55; }
.w-web .url .au { position: absolute; right: 33px; width: 16px; height: 16px; color: var(--w-accent); }
.w-web .url .au path:first-child { fill: currentColor; stroke: none; }

/* the tabs: 27 of them in one glass strip, favicons only, the current one stands up and keeps its title */
.w-web .tabs { display: flex; align-items: center; height: 30px; margin: -2px 10px 0; padding: 0 3px; border-radius: 99px; background: var(--tr); }
.w-web .t { position: relative; flex: 1 1 0; min-width: 0; display: grid; place-items: center; height: 24px; }
.w-web .t + .t::before { content: ""; position: absolute; left: -.25px; top: 8px; width: .5px; height: 8px; background: var(--w-line-2); opacity: .4; }
.w-web .t.on::before, .w-web .t.on + .t::before { display: none; }
.w-web .t.on {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 186px;
  padding: 0 9px 0 8px;
  border-radius: 99px;
  background: var(--tr-on);
  box-shadow: var(--tr-on-shadow);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--w-ink);
}
.w-web .tt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), #0000); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), #0000); }
.w-web .tt b { display: inline-block; max-width: 30px; font-weight: 500; vertical-align: top; transition: opacity .28s ease-out, max-width .42s cubic-bezier(.2, .9, .3, 1), visibility 0s; }
.js .w-web .tt b:not(.is-in) { max-width: 0; }
.w-web .t.on .snd { flex: none; width: 15px; height: 15px; margin-right: -1px; color: inherit; transition: opacity .28s ease-out, width .42s cubic-bezier(.2, .9, .3, 1), margin .42s, visibility 0s; }
.js .w-web .t.on .snd:not(.is-in) { width: 0; margin-left: -6px; }
.w-web .snd path:first-child { fill: currentColor; stroke: none; }
.w-web .snd .w1, .w-web .snd .w2 { animation: web-wave 1.25s ease-in-out infinite; }
.w-web .snd .w2 { animation-delay: .22s; }
@keyframes web-wave { 50% { opacity: .15; } }

/* favicons: tiny generic marks, 12pt, none of them a real logo */
.w-web .f { position: relative; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 3.2px; background: var(--c); color: #fff; font: 700 8px/1 var(--sfr); font-style: normal; letter-spacing: -.02em; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .08); }
.w-web .f.ring, .w-web .f.dt { border-radius: 50%; }
.w-web .f.ring::after { content: ""; width: 3px; height: 3px; border-radius: 50%; border: 1.5px solid #fff; }
.w-web .f.dia::after { content: ""; width: 4.5px; height: 4.5px; border-radius: 1px; background: #fff; rotate: 45deg; }
.w-web .f.half { background: linear-gradient(135deg, var(--c) 50%, var(--c2) 50%); }
.w-web .f.bars::after { content: ""; width: 7px; height: 6px; background: linear-gradient(#fff, #fff) 0 100% / 1.5px 55% no-repeat, linear-gradient(#fff, #fff) 50% 100% / 1.5px 100% no-repeat, linear-gradient(#fff, #fff) 100% 100% / 1.5px 75% no-repeat; }
.w-web .f.dt { background: #1d1d1f; }
.w-web .f.dt::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.w-web .f.sq { background: none; box-shadow: none; }
.w-web .f.sq::after { content: ""; width: 10px; height: 10px; border-radius: 3.2px; box-shadow: inset 0 0 0 2.1px var(--c); }
.w-web .f.glb { background: none; box-shadow: none; }
.w-web .f.glb svg { width: 12px; height: 12px; fill: none; stroke: var(--w-ink-2); stroke-width: 1.1; }
.w-web .f.bdg::before { content: ""; position: absolute; top: -2px; right: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--w-red); box-shadow: 0 0 0 1.25px var(--pg); }
.w-web .f.ser { background: #fff; color: #111; font: 700 9.5px/1 ui-serif, "New York", Georgia, serif; letter-spacing: 0; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .18); }
.w-web .f.nb { background: none; box-shadow: none; }
.w-web .f.nb > svg { width: 12px; height: 12px; fill: var(--c); }
.w-web .f.nb > svg.ln { fill: none; stroke: var(--c); stroke-width: 1.45; stroke-linecap: round; }
.w-web .f.dia.nb::after { width: 8px; height: 8px; border-radius: 1.8px; background: var(--c); }
.w-web .f.bars.nb::after { width: 10px; height: 10px; background: linear-gradient(var(--c), var(--c)) 0 100% / 2.4px 55% no-repeat, linear-gradient(var(--c), var(--c)) 50% 100% / 2.4px 100% no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2.4px 75% no-repeat; }
.w-web .f.me::after { content: ""; width: 9px; height: 3.3px; background: #fff; -webkit-mask: url(/assets/img/mark.svg) center / contain no-repeat; mask: url(/assets/img/mark.svg) center / contain no-repeat; }
.w-web .f.wt { background: linear-gradient(140deg, #9b6bff, #ff3f7f 78%); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .06); }
.w-web .f.wt::after { content: ""; width: 4.5px; height: 5.4px; margin-left: 1px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 1px; }

/* the player ------------------------------------------------------------------------- */
.w-web .main { position: relative; isolation: isolate; }
.w-web .stg { position: relative; }
.w-web .amb { position: absolute; inset: -20px -28px -24px; z-index: -1; border-radius: 40px; background: var(--still-field) center / cover; filter: blur(30px) saturate(2.1) brightness(.68); opacity: var(--amb-a); pointer-events: none; }
.w-web .vid { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0b1a0e; isolation: isolate; }
.w-web .vid > i { position: absolute; inset: 0; }
.w-web .still { background: var(--still) center / cover; }
/* playing: the light drifts slowly across the frame (the children wait for the beat, so it starts from the still) */
.w-web .mv { overflow: hidden; }
.w-web .mv i { position: absolute; inset: 0; }
.w-web .mv .img { background: var(--still) center / cover; animation: web-drift 26s ease-in-out infinite alternate; }
.w-web .mv .sun { inset: -20%; background: radial-gradient(34% 44% at 50% 50%, rgb(255 246 214 / .5), rgb(255 246 214 / 0) 70%); mix-blend-mode: soft-light; animation: web-sun 15s ease-in-out infinite alternate; }
@keyframes web-drift { to { transform: scale(1.07) translate(-1.2%, .8%); } }
@keyframes web-sun { from { transform: translate(-18%, -6%); } to { transform: translate(16%, 8%); } }

/* the paused frame before it plays: a big glass play button, tinted neutral so it never takes the video's colour */
.w-web .big { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(120% 100% at 50% 0%, rgb(255 255 255 / .26), rgb(0 0 0 / .12) 70%); -webkit-backdrop-filter: blur(14px) saturate(1.3) brightness(.9); backdrop-filter: blur(14px) saturate(1.3) brightness(.9); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .55), inset 0 1px 0 rgb(255 255 255 / .6), 0 6px 20px rgb(0 0 0 / .16), 0 1px 3px rgb(0 0 0 / .1); }
.w-web .big svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .28)); }

/* controls on a soft scrim */
.w-web .pc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 12px 7px; color: #fff; }
.w-web .pc::before { content: ""; position: absolute; inset: -46px 0 0; z-index: -1; background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .14) 45%, rgb(0 0 0 / .5)); }
/* the progress bar: the track is cut into chapters (real gaps, the video shows through), the knob rides on top */
.w-web .bar { --p: .5315; --b: .64; position: relative; height: 3px; margin: 0 1px 7px; }
.w-web .bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; }
.w-web .bar .trk {
  --cut: linear-gradient(90deg, #000 calc(16% - 1px), #0000 0 calc(16% + 1px), #000 0 calc(38% - 1px), #0000 0 calc(38% + 1px), #000 0 calc(74% - 1px), #0000 0 calc(74% + 1px), #000 0);
  right: 0;
  border-radius: 3px;
  background: rgb(255 255 255 / .26);
  -webkit-mask: var(--cut);
  mask: var(--cut);
}
.w-web .bar .bf { width: calc(var(--b) * 100%); background: rgb(255 255 255 / .34); }
.w-web .bar .pl { width: calc(var(--p) * 100%); background: linear-gradient(90deg, #9b6bff, #ff3f7f); }
.w-web .bar .kb { left: calc(var(--p) * 100%); top: -4px; bottom: auto; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #ff3f7f; box-shadow: 0 0 0 .5px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .3); }
.w-web .row { display: flex; align-items: center; gap: 0; height: 26px; margin: 0 -4px; font-size: 11.5px; font-weight: 500; letter-spacing: -.005em; text-shadow: 0 0 6px rgb(0 0 0 / .25); }
.w-web .row > i { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
.w-web .row svg { width: 18px; height: 18px; fill: #fff; filter: drop-shadow(0 0 4px rgb(0 0 0 / .2)); }
.w-web .row svg.s { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.w-web .row .pp svg { position: absolute; }
.w-web .vol { gap: 0; }
.w-web .vol + .vs { position: relative; flex: none; width: 40px; height: 3px; margin: 0 10px 0 3px; border-radius: 3px; background: rgb(255 255 255 / .3); }
.w-web .vs::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 72%; border-radius: inherit; background: #fff; }
.w-web .vs::after { content: ""; position: absolute; left: 72%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.w-web .tm { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-web .tm span { opacity: .72; }
.w-web .row .grow { flex: 1; }
.w-web .hd { position: absolute; top: 3.5px; right: 1.5px; padding: 1px 2px .5px; border-radius: 2.5px; background: #ff3f7f; font: 800 5.5px/1 var(--sf); letter-spacing: .02em; text-shadow: none; }

/* under the player: title, channel, the description peeking in at the bottom */
.w-web h3 { margin: 10px 0 0; padding-left: 4px; font-size: 15.5px; font-weight: 650; line-height: 1.25; letter-spacing: -.018em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pg-ink); }
.w-web .chan { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.w-web .chan p { flex: none; display: flex; flex-direction: column; gap: 1px; margin: 0; padding-left: 4px; }   /* with the title: 4pt in, so they sit inside the rounded video and description boxes (optically) */
.w-web .chan p b { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.w-web .chan p b svg { width: 11px; height: 11px; fill: var(--pg-ink-3); }
.w-web .chan p small { font-size: 11px; color: var(--pg-ink-2); white-space: nowrap; }
.w-web .bt { flex: none; display: flex; align-items: center; gap: 4px; height: 30px; border-radius: 99px; background: var(--pg-btn); font-size: 12px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.w-web .bt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w-web .bt.subs { margin-left: 4px; padding: 0 13px; background: var(--sub-bg); color: var(--sub-ink); }
.w-web .chan .grow { flex: 1; }
.w-web .bt.rb { justify-content: center; width: 30px; padding: 0; }
.w-web .lk { gap: 0; padding: 0; }
.w-web .lk > span { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 10px 0 11px; }
.w-web .lk > span + span { height: 18px; padding: 0 11px 0 9px; border-left: .5px solid var(--pg-line); }
.w-web .desc { margin-top: 10px; padding: 8px 12px 16px; border-radius: 10px; background: var(--pg-btn); font-size: 11.5px; line-height: 1.42; }
.w-web .desc b { font-weight: 600; }
.w-web .desc b + b { margin-left: 6px; }
.w-web .desc span { margin-left: 6px; color: var(--pg-ink-2); }
.w-web .desc p { margin: 2px 0 0; }
.w-web .desc p + p { margin-top: 9px; }

/* up next: filter chips, then the queue */
.w-web .nx { min-width: 0; }
/* the chips are scrolled up under the tab strip: pre-softened, so they read as content under glass
   even where a renderer skips the strip's backdrop blur (the padding gives the blur room inside the mask) */
.w-web .chips { display: flex; gap: 6px; overflow: hidden; margin: -8px 0 -8px -8px; padding: 8px 0 8px 8px; filter: blur(3px); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), #0000); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), #0000); }
.w-web .chips b { flex: none; height: 24px; padding: 0 10px; border-radius: 7px; background: var(--pg-btn); font-size: 11px; font-weight: 600; line-height: 24px; letter-spacing: -.005em; white-space: nowrap; }
.w-web .chips b.on { background: var(--sub-bg); color: var(--sub-ink); }
.w-web .it { display: flex; gap: 8px; margin-top: 8px; }
.w-web .chips + .it { margin-top: 12px; }
.w-web .th { position: relative; flex: none; align-self: flex-start; width: 96px; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: var(--bgi) center / cover; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .06); }
.w-web .th small { position: absolute; right: 4px; bottom: 4px; z-index: 2; padding: 1.5px 3.5px; border-radius: 3.5px; background: rgb(0 0 0 / .72); color: #fff; font: 600 8.5px/1.15 var(--sf); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.w-web .th small.live { background: #e5193f; letter-spacing: .04em; font-weight: 700; }
.w-web .th .seen { position: absolute; left: 0; bottom: 0; height: 2.5px; width: var(--seen); background: #ff3f7f; z-index: 2; }
.w-web .it p { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0; padding-top: 1px; }
.w-web .it p b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; font-size: 11px; font-weight: 600; line-height: 1.28; letter-spacing: -.008em; }
.w-web .it p span { font-size: 10px; line-height: 1.25; color: var(--pg-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the thumbnails */
.w-web .th.run { --bgi: url(/assets/desk/safari-runner.jpg); }
.w-web .th.d30 { background: #ffd60a; }
.w-web .th.d30 em { position: absolute; left: 7px; top: 5px; font: 900 27px/.84 var(--sf); font-style: normal; letter-spacing: -.06em; color: #111; }
.w-web .th.d30 em span { display: block; font-size: 12.5px; letter-spacing: -.02em; }
.w-web .th.d30 .ph { position: absolute; right: 18px; top: 5px; width: 17px; height: 28px; border-radius: 4.5px; background: #111; rotate: 12deg; box-shadow: inset 0 0 0 1.5px #111, inset 0 0 0 6px #3a3a3c; }
.w-web .th.d30 .ph::after { content: ""; position: absolute; left: -6px; top: 12px; width: 29px; height: 3.5px; border-radius: 2px; background: #ff2d3f; rotate: -58deg; box-shadow: 0 0 0 1.25px #ffd60a; }
.w-web .th.up1 { --bgi: url(/assets/desk/wall-10-900.jpg); }   /* up next: wallpapers too, dealt by day.js */
.w-web .th.up2 { --bgi: url(/assets/desk/wall-11-900.jpg); }
.w-web .th.up3 { --bgi: url(/assets/desk/wall-12-900.jpg); }

/* Monocle on: the waves and the light hold still */
.is-calm .w-web:not(.is-key) * { animation-play-state: paused; }

/* not the key window: the toolbar greys out, like macOS */
.w-web:not(.is-key) .url, .w-web:not(.is-key) .url .au { color: var(--w-ink-2); }
.w-web:not(.is-key) .t.on { color: var(--w-ink-2); }

/* dark: the site's own dark look, the glow turned up */
@media (prefers-color-scheme: dark) {
  :root .w-web {
    --pg: #111113; --cap-bg: var(--g-fill); --cap-sh: var(--g-rim), var(--g-edge), var(--g-drop); --pg-ink: #f2f2f4; --pg-ink-2: #a1a1a7; --pg-ink-3: #77777d;
    --pg-btn: rgb(255 255 255 / .09); --pg-line: rgb(255 255 255 / .14);
    --sub-bg: #f2f2f4; --sub-ink: #0f0f10; --amb-a: .55;
    --tr: rgb(255 255 255 / .065); --tr-on: rgb(72 72 77 / .74);
    --tr-on-shadow: inset 0 0 0 .5px rgb(255 255 255 / .1), 0 1px 3px rgb(0 0 0 / .3);
  }
  :root .w-web .f { box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .14); }
  :root .w-web .f.dt { background: #3a3a3d; }
  :root .w-web :is(.f.glb, .f.nb, .f.sq) { box-shadow: none; }
  :root .w-web .th { box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .08); }
}

/* mail: the inbox. macOS 26: the mailboxes sit in a solid inset panel, the toolbar and Mail's
   categories float as glass over the list (which runs up under them and softens there), and the
   rows carry faces, dots, clips, flags and the replied arrow. One more drops in at the top. */
.w-mail {
  --wr: 26px;
  --m-blue: #007aff;
  --m-green: #34c759;
  --m-purple: #af52de;
  --m-pink: #ff2d55;
  --m-orange: #ff9500;
  --m-sel: #0063e1;                   /* the list selection: macOS's own, a shade deeper than the accent */
  --m-wash: #f3f3f5;                  /* the sidebar is solid: no wallpaper through it */
  --m-sheen: rgb(255 255 255 / .22);
  --m-sep: rgb(0 0 0 / .075);
  --m-ring: inset 0 0 0 .5px rgb(0 0 0 / .1);
  --m-unsel: rgb(0 0 0 / .135);       /* the selection when the window isn't in front */
  --m-unsel-n: rgb(0 0 0 / .1);
  --m-n: rgb(0 0 0 / .07);            /* the thread count */
  --m-top: 88px;                      /* toolbar (52) + categories: where the list's first row sits */
  flex-direction: row;
}
.w-mail svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* the mailboxes: a panel inset 8pt, concentric with the window corner (26 - 8 = 18) */
.w-mail .m-side {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  flex-direction: column;
  width: 172px;
  margin: 8px 0 8px 8px;
  padding: 0 8px;
  border-radius: 18px;
  box-shadow: var(--g-edge), 0 1px 2px rgb(0 0 0 / .04), 0 2px 10px rgb(0 0 0 / .05);
  white-space: nowrap;
}
.w-mail .m-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(var(--m-sheen), transparent 140px),
    linear-gradient(var(--m-wash), var(--m-wash));
}
.w-mail .m-top { flex: none; display: flex; align-items: center; height: 36px; padding-left: 4px; }
.w-mail .m-side h6 { margin: 10px 8px 3px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .005em; color: var(--w-ink-2); }
.w-mail .m-side h6:first-of-type { margin-top: 6px; }
.w-mail .m-side p { display: flex; align-items: center; gap: 7px; height: 28px; margin: 0; padding: 0 9px 0 7px; border-radius: 10px; font-size: 13px; letter-spacing: -.008em; }
.w-mail .m-side p svg { width: 18px; height: 18px; stroke-width: 1.35; color: var(--m-blue); }
.w-mail .m-side p svg.or { color: var(--m-orange); }
.w-mail .m-side p small { margin-left: auto; font-size: 12px; letter-spacing: 0; color: var(--w-ink-2); font-variant-numeric: tabular-nums; }
.w-mail .m-side p.on { background: rgb(0 0 0 / .075); }

/* the list side: the rows fill it top to bottom; the toolbar and the categories float on top */
.w-mail .m-main { position: relative; flex: 1; min-width: 0; }
.w-mail .tb { position: absolute; z-index: 2; left: 0; top: 0; right: 0; padding: 0 12px 0 14px; }
.w-mail .m-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.w-mail .m-title b { font-size: 15px; font-weight: 700; line-height: 18px; letter-spacing: -.022em; }
.w-mail .m-title small { font-size: 11px; line-height: 13px; letter-spacing: 0; color: var(--w-ink-2); font-variant-numeric: tabular-nums; }
.w-mail .tb .cap > i { width: 36px; height: 28px; }

/* Mail's categories: the open one shows its colour and name, the rest just their glyph */
.w-mail .m-cats { position: absolute; z-index: 2; left: 0; right: 0; top: 50px; display: flex; justify-content: center; }
.w-mail .m-seg { display: flex; gap: 2px; height: 32px; padding: 3px; border-radius: 99px; }
.w-mail .m-seg b { position: relative; flex: none; width: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 99px; color: var(--c); font-size: 12.5px; font-weight: 600; letter-spacing: -.012em; }
.w-mail .m-seg b svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.w-mail .m-seg b.on {
  width: auto;
  padding: 0 15px 0 12px;
  background: var(--c);                /* Tahoe's selected segment is a flat tint: no gloss, no glow */
  color: #fff;
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .06);
}
.w-mail .m-seg b.on svg { width: 15px; height: 15px; }
.w-mail .m-seg .c-pri { --c: var(--m-blue); }
.w-mail .m-seg .c-tra { --c: var(--m-green); }
.w-mail .m-seg .c-upd { --c: var(--m-purple); }
.w-mail .m-seg .c-pro { --c: var(--m-pink); }
.w-mail .m-seg .c-tra svg { transform: translateY(.5px); }     /* the cart's weight sits in its wheels: centre it optically */

/* the rows: a status gutter, a face, three lines; the selection is inset and rounded.
   The list starts under the glass and goes soft there (the scroll-edge effect) */
.w-mail .m-rows {
  position: absolute;
  inset: 0;
  padding: var(--m-top) 8px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #0000 30px, rgb(0 0 0 / .4) 56px, #000 calc(var(--m-top) - 4px));
  mask-image: linear-gradient(to bottom, #0000 30px, rgb(0 0 0 / .4) 56px, #000 calc(var(--m-top) - 4px));
}
.w-mail .m-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px 32px 1fr;
  padding: 7px 12px 8px 0;
  border-radius: 10px;
  max-height: 90px;
  overflow: hidden;
}
.w-mail .m-row::after { content: ""; position: absolute; left: 62px; right: 12px; bottom: 0; height: .5px; background: var(--m-sep); }
.w-mail .m-row.sel::after, .w-mail .m-row:has(+ .sel)::after { display: none; }

/* the gutter, Mail's status column: unread dot, then replied or flagged */
.w-mail .m-g { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 0 1px; font-style: normal; }
.w-mail .m-g b { width: 9px; height: 9px; border-radius: 50%; background: var(--m-blue); }
.w-mail .m-g svg { width: 11px; height: 11px; }
.w-mail .m-g > svg:first-child { margin-top: -1px; }
.w-mail .m-g .rp { stroke-width: 1.35; color: var(--w-ink-2); }
.w-mail .m-g .fl { fill: var(--m-orange); stroke: var(--m-orange); stroke-width: 1.1; }

.w-mail .m-av { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 1px; border-radius: 50%; background: var(--av) center / cover; box-shadow: var(--m-ring); }
.w-mail .m-av svg { width: 18px; height: 18px; color: #fff; fill: #fff; stroke: #fff; stroke-width: .6; }   /* sender marks are solid, like real logos */
.w-mail .m-av.mono { background: linear-gradient(#a7abb6, #868b97); color: #fff; font: 600 12.5px/1 var(--sfr); letter-spacing: .01em; }
.w-mail .m-av.gum { background: #ff90e8; color: #000; font: 700 15px/1 var(--sfr); }
.w-mail .m-av.dev { background: linear-gradient(#3a3a3c, #1c1c1e); }
.w-mail .m-av.dev svg { width: 14px; height: 17px; margin-top: -2px; stroke: none; }

.w-mail .m-tx { min-width: 0; padding-left: 10px; }
.w-mail .m-tx p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-mail .m-h { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 17px; }
.w-mail .m-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; letter-spacing: -.012em; }
.w-mail .m-h b span { font-weight: 400; color: var(--w-ink-2); }
.w-mail .m-h time { flex: none; display: flex; align-items: center; gap: 4px; align-self: center; font-size: 11.5px; letter-spacing: 0; color: var(--w-ink-2); font-variant-numeric: tabular-nums; }
.w-mail .m-h time svg { width: 12px; height: 12px; stroke-width: 1.3; }
.w-mail .m-tx .m-s { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 12.5px; line-height: 16px; letter-spacing: -.008em; }
.w-mail .m-s span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.w-mail .m-n { flex: none; font-style: normal; min-width: 18px; height: 15px; padding: 0 5px; border-radius: 99px; background: var(--m-n); font-size: 10.5px; font-weight: 600; line-height: 15px; text-align: center; color: var(--w-ink-2); font-variant-numeric: tabular-nums; }
.w-mail .m-tx p.m-p { display: -webkit-box; margin-top: 1px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 14.5px; letter-spacing: -.004em; color: var(--w-ink-2); }

/* the selected row: accent when the window is in front, grey when it's not */
.w-mail .m-row.sel { background: var(--m-unsel); }       /* macOS's unemphasised selection, about #dcdcdc / #464646 */
.w-mail:not(.is-key) .sel .m-n { background: var(--m-unsel-n); }
.w-mail.is-key .m-row.sel { background: var(--m-sel); color: #fff; }
.w-mail.is-key .sel .m-g .rp, .w-mail.is-key .sel .m-h b span, .w-mail.is-key .sel .m-h time, .w-mail.is-key .sel .m-p { color: rgb(255 255 255 / .8); }
.w-mail.is-key .sel .m-n { background: rgb(255 255 255 / .22); color: #fff; }
.w-mail.is-key .sel .m-av { box-shadow: 0 0 0 .5px rgb(255 255 255 / .4); }

/* 16:12: a new one drops in at the top and pushes the rest down */
.w-mail .m-row[data-at] { transition: max-height .55s var(--open), padding .55s var(--open), opacity .3s ease-out .12s, visibility 0s; }
.js .w-mail .m-row[data-at]:not(.is-in) { max-height: 0; padding-top: 0; padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .w-mail .m-row[data-at] { transition: opacity .2s ease-out, visibility 0s; } }

/* inactive window: the lights go grey and the capsules soften (the shared rules), the title too */
.w-mail:not(.is-key) .m-title b { color: var(--w-ink-2); }

/* dark */
@media (prefers-color-scheme: dark) {
  :root .w-mail {
    --m-blue: #0a84ff; --m-green: #30d158; --m-purple: #bf5af2; --m-pink: #ff375f; --m-orange: #ff9f0a; --m-sel: #0058d0;
    --m-wash: #2a2a2d;
    --m-sheen: rgb(255 255 255 / .03);
    --m-sep: rgb(255 255 255 / .08);
    --m-ring: inset 0 0 0 .5px rgb(255 255 255 / .12);
    --m-unsel: rgb(255 255 255 / .18); --m-unsel-n: rgb(255 255 255 / .14); --m-n: rgb(255 255 255 / .1);
  }
  :root .w-mail .m-side p.on { background: rgb(255 255 255 / .1); }
  :root .w-mail .m-av.mono { background: linear-gradient(#8e929c, #6c707a); }
}

/* messages: one thread with Anna, macOS 26. No bars: the toolbar and the compose field
   float as glass over the thread, which runs under both and softens at the edges */
.w-im {
  --im-in: #e9e9eb;                                  /* her bubbles */
  --im-in-ink: #000;
  --im-out: #0a7cff;                                 /* yours, and the tails */
  --im-dot: #8e8e93;
  --im-ring: var(--w-bg);                            /* the cut around tapbacks */
  --im-tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M16 8c0 7 1.5 11.3 5.5 13.5.4.25.3.5-.25.5-4.4 0-8.6-.9-11.75-3H8V8z'/%3E%3C/svg%3E");
  --wr: 26px;
}
.w-im svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* the toolbar: glass over the thread, the capsules concentric with the corners (26 - 10 = 16) */
.w-im .tb { position: absolute; z-index: 3; left: 0; top: 0; right: 0; padding: 0 10px 0 19px; }
.w-im .im-who { position: absolute; left: 50%; top: 10px; translate: -50% 0; gap: 7px; height: 32px; padding: 0 11px 0 4px; }
.w-im .im-av { width: 24px; height: 24px; border-radius: 50%; background: #3d9be9 url(/assets/desk/ft-anna.jpg) 50% 30% / 128% auto; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12); }
.w-im .im-who b { font-size: 13px; font-weight: 600; letter-spacing: -.012em; }
.w-im .im-who svg { width: 7px; height: 10px; margin-left: -2px; stroke-width: 1.5; color: var(--w-ink-3); }
.w-im .im-ft { margin-left: auto; }
.w-im .im-ft svg { width: 18px; height: 18px; stroke-width: 1.6; }

/* the thread: bottom up, newest last; it slides under the toolbar and goes soft there */
.w-im .im-thread {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 14px 54px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #0000 6px, rgb(0 0 0 / .25) 26px, rgb(0 0 0 / .75) 42px, #000 52px);
  mask-image: linear-gradient(to bottom, #0000 6px, rgb(0 0 0 / .25) 26px, rgb(0 0 0 / .75) 42px, #000 52px);
}
.w-im .im-thread > * { flex: none; margin: 0; }
/* the soft edge: a light blur on what slides under the toolbar. It starts below the 26pt corner
   curves, so it never samples the wallpaper outside them */
.w-im .im-edge { position: absolute; z-index: 2; left: 0; right: 0; top: 24px; height: 30px; pointer-events: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(#000 4px, #0000 30px); mask-image: linear-gradient(#000 4px, #0000 30px); }

.w-im .im-ts { align-self: center; margin: 12px 0 6px; font-size: 11px; line-height: 13px; letter-spacing: .005em; color: var(--w-ink-2); font-variant-numeric: tabular-nums; }
.w-im .im-ts b { font-weight: 600; }
/* 11:02 sits under the name capsule while she types, then leaves */
.w-im .im-ts1 { transition: opacity .4s ease-out .1s; }
.w-im .im-thread:has(.im-ts2.is-in) .im-ts1 { opacity: 0; }

/* bubbles: 13pt on a 17pt line, pill when they're one line, a tail on the last of a run */
.w-im .im-b {
  position: relative;
  isolation: isolate;
  align-self: flex-start;
  max-width: 222px;
  padding: 6px 12px;
  border-radius: 15px;
  background: var(--im-in);
  color: var(--im-in-ink);
  font-size: 13px;
  line-height: 17px;
  letter-spacing: -.008em;
}
.w-im .im-b.out { align-self: flex-end; background: var(--im-out); color: #fff; }
.w-im .im-b + .im-b { margin-top: 2px; }
.w-im .im-b.in + .im-b.out { margin-top: 10px; }
.w-im .im-b.tail::before { content: ""; position: absolute; z-index: -1; right: -6px; bottom: 0; width: 22px; height: 22px; background: var(--im-out); -webkit-mask: var(--im-tail) 0 0 / 100% 100% no-repeat; mask: var(--im-tail) 0 0 / 100% 100% no-repeat; }
.w-im .im-b.in.tail::before { right: auto; left: -6px; background: var(--im-in); transform: scaleX(-1); }

/* a board she shared: a Freeform card, the thumbnail on top. Tall enough that its top slides under
   the glass once 13:36 arrives, so the capsules pick up the red ring */
.w-im .im-card { position: relative; align-self: flex-start; width: 214px; border-radius: 15px; overflow: hidden; background: var(--im-in); color: var(--im-in-ink); }
.w-im .im-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .05); pointer-events: none; }
.w-im .im-art {
  position: relative;
  height: 112px;
  background: radial-gradient(circle, rgb(0 0 0 / .13) .55px, #0000 .85px) 3px 3px / 8px 8px, #f8f8f6;
  box-shadow: inset 0 -.5px 0 rgb(0 0 0 / .08);
  overflow: hidden;
}
.w-im .im-art > * { position: absolute; }
.w-im .im-scr { top: 23px; width: 34px; height: 68px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .16), 0 1px 2.5px rgb(0 0 0 / .08); display: flex; flex-direction: column; align-items: center; padding: 8px 5px 6px; gap: 3px; }
.w-im .im-scr i { display: block; flex: none; height: 2.2px; border-radius: 1.1px; background: #d9d9de; }
.w-im .im-scr .im-l1 { width: 20px; background: #3a3a3e; }
.w-im .im-scr .im-l2 { width: 15px; }
.w-im .im-scr .im-l3 { width: 22px; }
.w-im .im-scr .im-go { width: 24px; height: 6px; margin-top: auto; border-radius: 3px; background: #0a84ff; }
.w-im .im-scr .im-orb { width: 18px; height: 18px; margin: 3px 0 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8 0 2.4px, #fff0 6px), conic-gradient(from 200deg, #ffb35c, #ff6a8b, #8f7bff, #4fc3ff, #ffb35c); }
.w-im .im-scr .im-row { display: flex; align-items: center; gap: 2.5px; width: 25px; height: 7px; }
.w-im .im-scr .im-row::before { content: ""; width: 5px; height: 5px; border-radius: 1.5px; background: var(--c); }
.w-im .im-scr .im-row::after { content: ""; margin-left: auto; width: 7px; height: 4.2px; border-radius: 2.1px; background: #34c759; }
.w-im .im-scr .im-row.is-off::after { background: #d9d9de; }
.w-im .im-scr .im-row b { width: 10px; height: 1.8px; border-radius: 1px; background: #c7c7cc; }
.w-im .im-scr .im-chk { display: grid; place-items: center; width: 18px; height: 18px; margin: 3px 0 4px; border-radius: 50%; background: #34c759; }
.w-im .im-scr .im-chk svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 2.1; }
.w-im .im-art .im-wire { left: 0; top: 0; width: 214px; height: 112px; stroke: #8e8e93; stroke-width: .9; }
.w-im .im-art .im-wire .im-mk { stroke: #ff453a; stroke-width: 1.3; }
.w-im .im-note { left: 118px; top: 67px; width: 46px; height: 36px; padding: 6px 0 0 5.5px; rotate: -4deg; background: linear-gradient(#ffe57a, #ffd84a); box-shadow: 0 1px 1.5px rgb(120 90 0 / .18), 0 2px 5px rgb(120 90 0 / .1); font: 600 7px/1.2 var(--sf); letter-spacing: 0; color: #4a3d00; white-space: nowrap; }
.w-im .im-meta { padding: 6px 12px 7px; }
.w-im .im-meta b { display: block; font-size: 12.5px; font-weight: 600; line-height: 16px; letter-spacing: -.012em; }
.w-im .im-meta small { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; letter-spacing: 0; color: var(--w-ink-2); }

/* a tapback: yours, so blue, cut out of whatever sits under it */
.w-im .im-b.has-tap { margin-top: 22px; margin-right: 19px; }
.w-im .im-tap { position: absolute; z-index: 1; right: -19px; top: -19px; width: 32px; height: 30px; }
.w-im .im-tap svg { display: block; width: 100%; height: 100%; stroke: none; }
.w-im .im-tap .im-tap-r { fill: var(--im-ring); stroke: var(--im-ring); stroke-width: 4; }
.w-im .im-tap .im-tap-f { fill: var(--im-out); }
.w-im .im-tap .im-tap-g { fill: #fff; stroke: none; }

.w-im .im-rc { align-self: flex-end; margin: 3px 3px 0 0; font-size: 11px; font-weight: 500; line-height: 13px; color: var(--w-ink-2); }

/* the last word: the typing bubble, then her reply in its place, sent with Loud */
/* 13:36 opens a new time block: it eases in and the thread scrolls up under it */
.w-im .im-ts.im-ts2 { max-height: 16px; margin: 12px 0 -3px; overflow: hidden; transition: opacity .3s ease-out .1s, max-height .5s cubic-bezier(.2, .9, .3, 1), margin .5s cubic-bezier(.2, .9, .3, 1), visibility 0s; }
.js .w-im .im-ts.im-ts2[data-at]:not(.is-in) { max-height: 0; margin: 0; }
.w-im .im-last { display: grid; margin-top: 10px; }
.w-im .im-last > .im-b { grid-area: 1 / 1; justify-self: start; align-self: end; margin: 0; transform-origin: 0 100%; }
.w-im .im-typing { display: flex; align-items: center; gap: 4px; height: 29px; padding: 0 11px; }
.w-im .im-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--im-dot); animation: w-im-dot 1.3s ease-in-out infinite; }
.w-im .im-typing i:nth-child(2) { animation-delay: .17s; }
.w-im .im-typing i:nth-child(3) { animation-delay: .34s; }
.w-im .im-typing::before, .w-im .im-typing::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--im-in); }
.w-im .im-typing::before { left: -1.5px; bottom: -1.5px; width: 11px; height: 11px; }
.w-im .im-typing::after { left: -6px; bottom: -6px; width: 5px; height: 5px; }
.w-im .im-typing.is-in { animation: w-im-pop .5s .25s cubic-bezier(.2, .8, .3, 1) both; }
.w-im .im-ok.is-in { animation: w-im-loud 1.15s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes w-im-dot { 0%, 60%, 100% { opacity: .38; transform: none; } 28% { opacity: .95; transform: scale(1.08); } }
@keyframes w-im-pop { 0% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes w-im-loud {
  0% { transform: scale(.5); opacity: 0; }
  12% { transform: scale(2.05); opacity: 1; }
  18% { transform: scale(2.05) rotate(-2.5deg); }
  24% { transform: scale(2.05) rotate(2.5deg); }
  30% { transform: scale(2.05) rotate(-2deg); }
  36% { transform: scale(2.05) rotate(1.5deg); }
  44% { transform: scale(2.05); }
  72% { transform: scale(.95); }
  86% { transform: scale(1.02); }
  100% { transform: none; }
}
.is-calm .w-im:not(.is-key) .im-typing i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .w-im .im-ok.is-in, .w-im .im-typing.is-in { animation: none; } .w-im .im-typing i { animation: none; opacity: .6; } }

/* the compose row: + and the field, glass, floating over the thread's foot */
.w-im .im-compose { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 7px; }
.w-im .im-compose .rb { color: var(--w-ink-2); }
.w-im .im-compose .rb svg { stroke-width: 1.5; }
.w-im .im-field { flex: 1; padding: 0 9px 0 13px; font-size: 13px; letter-spacing: -.008em; color: var(--w-ink-3); }
.w-im .im-field svg { margin-left: auto; width: 18px; height: 18px; stroke-width: 1.45; color: var(--w-ink-2); }

/* dark */
@media (prefers-color-scheme: dark) {
  :root .w-im { --im-in: #3a3a3c; --im-in-ink: #fff; --im-out: #0a84ff; --im-dot: #98989d; }
  :root .w-im .im-art { background: radial-gradient(circle, rgb(255 255 255 / .1) .55px, #0000 .85px) 3px 3px / 8px 8px, #2a2a2d; box-shadow: inset 0 -.5px 0 rgb(255 255 255 / .06); }
  :root .w-im .im-card::after { box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .08); }
  :root .w-im .im-scr { background: #3a3a3d; box-shadow: 0 0 0 .5px rgb(255 255 255 / .1), 0 1px 3px rgb(0 0 0 / .4); }
  :root .w-im .im-scr i:not(.im-go), :root .w-im .im-scr .im-row.is-off::after { background: #5a5a5e; }
  :root .w-im .im-scr i.im-l1 { background: #d8d8dc; }
  :root .w-im .im-scr .im-row b { background: #6a6a6e; }
  :root .w-im .im-note { background: linear-gradient(#f0d46a, #e9c63f); box-shadow: 0 1px 1.5px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .3); }
}

/* facetime: a call, dark in both themes like the real app. Tom is talking, Mara listens,
   Anna has her camera off (she's busy typing), you sit in Tom's corner, muted. The video runs edge to
   edge in one 6pt rhythm (24 - 6 = 18 keeps the tiles concentric) and the controls float over it on
   one Liquid Glass bar, right across the seam between Mara and Tom */
.w-call {
  --wr: 24px;
  --fc-r: 18px;
  --fc-on: #f5f5f7;                       /* a control that's switched on (mute) */
  --fc-end: #ff453a;
  --fc-grade: saturate(.86) contrast(.95) brightness(1.02) sepia(.06);   /* a webcam, not a studio: lifted blacks, warm room light */
  --fc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Liquid Glass tuned for video: thin and smoky, so the picture under it carries the colour */
  --g-fill: rgb(28 28 32 / .32);
  --g-rim: inset 0 0 0 .5px rgb(255 255 255 / .06);
  --g-edge: 0 0 0 .5px rgb(0 0 0 / .18);
  --g-drop: 0 1px 2px rgb(0 0 0 / .14), 0 4px 14px rgb(0 0 0 / .16);
  --g-blur: blur(16px) saturate(1.7) brightness(.9);
  background: #0b0b0c;
  color: #fff;
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .42), inset 0 0 0 .5px rgb(255 255 255 / .1), 0 14px 40px rgb(0 0 0 / .26), 0 3px 10px rgb(0 0 0 / .12);
}
.w-call.is-key { box-shadow: 0 0 0 .5px rgb(0 0 0 / .5), inset 0 0 0 .5px rgb(255 255 255 / .12), 0 30px 80px rgb(0 0 0 / .36), 0 10px 26px rgb(0 0 0 / .17); }
.w-call svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w-call .f { fill: currentColor; stroke: none; }

/* the tiles, full bleed: 6pt from the window edge, 6pt apart */
.w-call .fc-grid {
  position: absolute;
  inset: 6px;
  display: grid;
  grid-template-columns: 134px 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}
.w-call .fc-tile {
  --op: 50% 34%;
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--fc-r);
  background: #1c1c1e;
  isolation: isolate;
}
.w-call .fc-tile.is-main { grid-column: 2; grid-row: 1 / 3; }
/* the picture: a webcam grade, and the sensor's grain on top */
.w-call .fc-v { position: absolute; inset: 0; }
.w-call .fc-v::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fc-grain) 0 0 / 96px;
  mix-blend-mode: overlay;
  opacity: .16;
}
.w-call .fc-v img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--op);
  transform-origin: var(--to, 50% 40%);
  transform: scale(var(--zs));
  filter: var(--fc-grade);
  animation: fc-drift var(--dd, 9s) ease-in-out var(--fdl, 0s) infinite alternate;
}
/* someone on camera never sits quite still */
@keyframes fc-drift { to { transform: scale(calc(var(--zs) + .022)) translate(var(--dx, -.9%), var(--dy, .5%)) rotate(var(--dr, .35deg)); } }
/* the lens: a soft vignette, and a scrim so names and controls read on anything */
.w-call .fc-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgb(0 0 0 / .5), rgb(0 0 0 / .16) 24%, #0000 44%),
    radial-gradient(125% 100% at 50% 36%, #0000 54%, rgb(0 0 0 / .34));
}
/* the edge: a faint rim, and the speaker's outline, steady while he talks */
.w-call .fc-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .08);
}
.w-call .fc-tile.is-talking::after { box-shadow: inset 0 0 0 2px #fff; }

/* Tom: talking, so he moves more (a slow nod). His face is right of his photo's middle: 72% centres it in the tile */
.w-call .fc-tom { --zs: 1.04; --op: 72% 50%; --to: 50% 25%; --dd: 4.2s; --dx: -.5%; --dy: 1%; --dr: .8deg; }
/* his room: window light from the top right, and a shade under his name */
.w-call .fc-tom::before {
  background:
    radial-gradient(55% 45% at 96% 8%, rgb(255 238 205 / .2), #0000 70%),
    linear-gradient(rgb(0 0 0 / .24), #0000 17%),
    linear-gradient(to top, rgb(0 0 0 / .5), rgb(0 0 0 / .16) 24%, #0000 44%),
    radial-gradient(125% 100% at 50% 36%, #0000 54%, rgb(0 0 0 / .34));
}

.w-call .fc-mara { --zs: 1.16; --op: 54% 40%; --to: 54% 44%; --dd: 11.5s; --fdl: -6s; --dx: -.6%; --dy: .6%; --dr: .25deg; }

/* Anna, camera off: her contact photo, and the same photo thrown out of focus behind it */
.w-call .fc-anna { --zs: 1.4; --op: 50% 40%; background: #2a2a2d; }
.w-call .fc-anna .fc-v::after { display: none; }
.w-call .fc-anna .fc-v img { filter: blur(18px) brightness(.55) saturate(1.2); animation: none; }
.w-call .fc-anna::before { background: radial-gradient(90% 80% at 50% 45%, #0000 40%, rgb(0 0 0 / .28)); }
.w-call .fc-anna figcaption {
  inset: 10px 0 0;                        /* 5pt below the middle: the traffic lights take the top, so this reads as centred */
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
}
.w-call .fc-ava {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #3a3a3c url(/assets/desk/ft-anna.jpg) 100% 20% / 112% auto;
  box-shadow: 0 0 0 .5px rgb(255 255 255 / .1), 0 2px 10px rgb(0 0 0 / .3);
}

/* names, bottom left (Tom's top left, clear of the bar, on the traffic lights' row) */
.w-call figcaption {
  position: absolute;
  z-index: 5;
  left: 11px;
  bottom: 9px;
  display: flex;
  align-items: center;
  font: 600 11.5px/1 var(--sf);
  letter-spacing: .004em;
  color: #fff;
  text-shadow: 0 .5px 1.5px rgb(0 0 0 / .35);
}
.w-call .fc-tom figcaption { bottom: auto; top: 12px; }

/* the traffic lights, over Anna's tile (grey on a window that isn't in front, dark style) */
.w-call .tl { position: absolute; z-index: 7; left: 18px; top: 18px; }
.w-call .tl i { background: rgb(255 255 255 / .32); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .14); }

/* the bar: one glass capsule floating over the video, the controls as glass discs on it */
.w-call .fc-bar {
  position: absolute;
  z-index: 8;
  inset: auto 0 12px;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 6px;
  border-radius: 99px;
}
/* the glass edge: light catches the rim top left and again bottom right, like the real material */
.w-call .fc-bar::before, .w-call .fc-muted::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .75px;
  background: linear-gradient(162deg, rgb(255 255 255 / .46), rgb(255 255 255 / .1) 30%, rgb(255 255 255 / .03) 60%, rgb(255 255 255 / .22));
  -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);
  pointer-events: none;
}
.w-call .fc-bar > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 99px;
  background: rgb(255 255 255 / .16);
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .1);
  color: #fff;
}
.w-call .fc-bar svg { width: 17px; height: 17px; }
.w-call .fc-bar > .is-on { background: var(--fc-on); box-shadow: none; color: #1d1d1f; }
.w-call .fc-bar > .fc-end { background: var(--fc-end); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .2); }
.w-call .fc-end svg { stroke-width: 2.4; }

/* "You are muted": drops in over the speaker a beat after the window opens. Smoked, neutral glass:
   it sits on Tom's light wall */
.w-call .fc-muted {
  position: absolute;
  z-index: 8;
  left: calc(50% + 70px);   /* the centre of Tom's tile */
  top: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 11px 0 8px;
  border-radius: 99px;
  background: rgb(0 0 0 / .28);
  -webkit-backdrop-filter: blur(14px) saturate(1.3) brightness(.92);
  backdrop-filter: blur(14px) saturate(1.3) brightness(.92);
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .12), 0 0 0 .5px rgb(0 0 0 / .14), 0 2px 8px rgb(0 0 0 / .12);
  font: 500 12px/1 var(--sf);
  letter-spacing: -.003em;
  color: #fff;
  white-space: nowrap;
}
.w-call .fc-muted svg { width: 14px; height: 14px; stroke-width: 1.7; }
.w-call .fc-muted[data-at] { transition: opacity .2s ease-out, transform .3s ease-in, visibility 0s .2s; }
.w-call .fc-muted[data-at].is-in { transition: opacity .3s ease-out .34s, transform .55s cubic-bezier(.3, 1.35, .5, 1) .34s, visibility 0s .34s; }
.w-call .fc-muted[data-at]:not(.is-in) { transform: translate(-50%, -7px) scale(.9); }
.is-scrub .w-call [data-at] { transition-delay: 0s !important; }

/* Monocle on: the call holds still */
.is-calm .w-call:not(.is-key) * { animation-play-state: paused; }

@media (prefers-color-scheme: dark) {
  :root .w-call { box-shadow: 0 0 0 .5px rgb(0 0 0 / .75), inset 0 0 0 .5px rgb(255 255 255 / .13), 0 14px 40px rgb(0 0 0 / .45), 0 3px 10px rgb(0 0 0 / .22); }
  :root .w-call.is-key { box-shadow: 0 0 0 .5px rgb(0 0 0 / .8), inset 0 0 0 .5px rgb(255 255 255 / .15), 0 30px 80px rgb(0 0 0 / .6), 0 10px 26px rgb(0 0 0 / .3); }
}

/* system: the screenshot thumbnail and desktop icons */

/* the container: icons cover the canvas */
.scene .icons { position: absolute; inset: 0; }
.w-shot, .w-ico { --spring: linear(0, .085, .265, .464, .641, .781, .882, .949, .989, 1.01, 1.018, 1.02, 1.017, 1.014, 1.01, 1.006, 1.004, 1.002, 1); }

/* the floating screenshot thumbnail, bottom right */
.w-shot { position: absolute; z-index: 75; left: 1300px; top: 700px; width: 186px; height: 109px; border: 3px solid #fff; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .2), 0 12px 30px rgb(0 0 0 / .28), 0 2px 8px rgb(0 0 0 / .12); }
.w-shot .snap { display: block; width: 100%; height: 100%; border-radius: 5px; }
/* it floats a while, then slides off the right edge as the file lands on the desktop, like macOS */
.js .scene .w-shot[data-at]:not(.is-in) { opacity: 1; }
.w-shot.is-done:not(.is-in) { animation: w-shot-out .34s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes w-shot-out { from { visibility: visible; } to { transform: translateX(240px); visibility: hidden; } }
.w-shot.is-in { animation: w-shot-in .45s var(--spring) both; }
@keyframes w-shot-in { from { transform: translateX(240px); } }

/* desktop icons: 64pt, a white label underneath */
.w-ico { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: 100px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.w-ico .im { position: relative; display: grid; place-items: end center; width: 64px; height: 64px; }
.w-ico .lb { max-width: 112px; overflow-wrap: anywhere; font-size: 12px; line-height: 14px; font-weight: 500; text-align: center; color: #fff; text-shadow: 0 .5px 1.5px rgb(0 0 0 / .55), 0 0 6px rgb(0 0 0 / .2); }
.w-ico .l2 { display: inline-block; white-space: nowrap; }
.w-ico .mid { display: inline-block; vertical-align: top; max-width: 4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-ico.is-in { animation: w-ico-in .5s var(--spring) both; }
.w-ico[data-at="shot"].is-in { animation-delay: .8s; }   /* as the thumbnail leaves (data-for .7) */
@keyframes w-ico-in { from { opacity: 0; transform: scale(.7); } 30% { opacity: 1; } }

/* the screenshot file: just its picture, no frame (only the floating thumbnail has the white one) */
.w-ico .im .snap { display: block; width: 64px; height: 36.6px; margin-bottom: 5px; border-radius: 3px; box-shadow: 0 0 0 .5px rgb(0 0 0 / .2), 0 1px 3px rgb(0 0 0 / .28); }

/* the untitled folder, drawn in CSS: a back with its tab, a lighter front */
.ic { position: relative; display: block; font-style: normal; }
.ic-folder { width: 64px; height: 52px; margin-bottom: 5px; filter: drop-shadow(0 .5px .5px rgb(0 0 0 / .2)) drop-shadow(0 1.5px 2.5px rgb(0 0 0 / .18)); }
.ic-folder::before { content: ""; position: absolute; inset: 0 0 4px; background: #4ea4f1; clip-path: path("M0 5Q0 0 5 0H21.5C23.6 0 24.6.6 26 2L28 4C29.4 5.4 30.4 6 32.5 6H58Q64 6 64 12V42Q64 48 58 48H6Q0 48 0 42Z"); }   /* the back, with its tab: 64 x 48, every corner round */
.ic-folder::after { content: ""; position: absolute; inset: 10px 0 0; border-radius: 6px; background: linear-gradient(#a9dafd, #6cbaf8); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55); }   /* the front */

/* what's in the screenshot: this desk on the shot beat (day.js clones the wallpaper and whatever was
   open by then), frozen and shrunk to fit, so it always matches the real thing */
.snap { position: relative; overflow: hidden; contain: layout paint; }
.mini-desk { position: absolute; left: 0; top: 0; width: 1512px; height: 864px; transform-origin: 0 0; pointer-events: none; }
.mini-desk, .mini-desk * { animation: none !important; transition: none !important; }
.mini-desk .win { filter: none !important; opacity: 1 !important; translate: none !important; }
.mini-desk * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.mini-wp { position: absolute; inset: 0; background: center / cover; filter: brightness(var(--dim)); }
.w-shot .mini-desk { transform: scale(calc(180 / 1512)); }
.w-ico .mini-desk { transform: scale(calc(64 / 1512)); }


/* cameras: phones see x 376 to 1036 of the desk, tablets x 190 to 1322, and the card shrinks to match.
   The windows re-stack where the camera can see them and still break out of the card */
.is-close .w-note { --x: 346 !important; --y: 420 !important; }
.is-close .w-web { --x: 392 !important; --y: 44 !important; --w: 560 !important; --h: 380 !important; }
.is-close .w-im { --x: 744 !important; --y: 50 !important; --w: 310 !important; --h: 366 !important; }
.is-close .w-call { --x: 350 !important; --y: 250 !important; --w: 340 !important; --h: 244 !important; }
.is-close .w-mail, .is-close .w-shot, .is-close .w-ico { display: none; }
.is-mid .w-web { --x: 160 !important; }
.is-mid .w-mail { --x: 170 !important; }
.is-mid .w-im { --x: 1062 !important; --w: 300 !important; }
.is-mid .w-note { --x: 340 !important; }
.is-mid .w-call { --x: 960 !important; }
.is-mid .w-ico[data-at="shot"] { --x: 900 !important; }
.is-mid .w-shot { left: 1110px; }
@container (width < 600px) { .screen { aspect-ratio: 660 / 864; } }
@container (600px <= width < 1000px) { .screen { aspect-ratio: 1132 / 864; } }


/* sections --------------------------------------------------------- */
.block { margin-top: clamp(120px, 14vw, 212px); }
/* the ending: "Featured in" and the names, quiet links that come up to ink on hover */
.press .say a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: max(1px, .04em); text-underline-offset: .14em; transition: color .2s, text-decoration-color .2s; }
.press .say a:hover { color: var(--ink); text-decoration-color: currentColor; }
.say {
  max-width: 21em;
  margin-top: 20px;
  font-size: clamp(28px, 3.25vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: pretty;
}

/* the panel: Monocle's own settings, as a picture of the app, scrolling past -------------------------------------- */
/* The panel is part of the page, so the page's own scroll moves it, one to one. The words start level with its first
   tile, hold at the middle of the screen while it runs past (sticky in a column as tall as the panel; tune.js measures
   --say-h to centre them) and let go as its end comes up to them. No frame and no desk: the app's tiles sit straight on
   the page, soft, in the page's own ink and greys, and they come and go through long soft fades stuck to the top and
   bottom of the screen, like the app's own scroll view. The tiles keep the app's layout in points (ControlCenterStyle.swift
   and the tile views); --z scales them. LIVE in tune.js turns it back into a working copy of the app on a frosted desk,
   pinned (.is-live: the stage, the card, the desk copy, the veil; its tiles would need their dark glass back, NOTES 9b) */
.tune {
  position: relative;
  margin-top: clamp(120px, 14vw, 212px);
  view-timeline: --tune block;              /* the words come in and go out on it (motion) */
}
.tune-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.tune-words { align-self: stretch; }        /* as tall as the panel, so the words can hold for all of it */
.tune-say { position: sticky; top: calc(50svh - var(--say-h, 4.4em) / 2); margin: 0; max-width: 13em; text-wrap: balance; }   /* even lines, no word left alone */
.tune-say .lo { display: block; }          /* "Make it yours." on its own line, the list under it */
.tune-screen {
  --z: 1;
  --cpw: calc(294px * var(--z));            /* the tiles' width: SettingsView's 350 less its 40 + 16 padding */
  --bar: clamp(56px, 8vh, 84px);            /* the top of the screen the tiles never reach: the bar's */
  --fade: clamp(110px, 20vh, 210px);        /* the soft top and bottom, long: the panel arrives out of the page */
  position: relative;
  display: flex;
  justify-content: flex-end;
}
/* LIVE: the stage pins for the panel's run (tune.js sets --travel) and the panel runs through a window, on a desk */
.tune.is-live { --stage-h: 100svh; }
.js .tune.is-live { height: calc(var(--stage-h) + var(--travel, 1900px)); }
.tune.is-live .tune-stage { top: 0; height: var(--stage-h); align-items: center; }
.js .tune.is-live .tune-stage { position: sticky; }
.tune.is-live .tune-words { align-self: center; }
.tune.is-live .tune-say { position: static; }
.tune:not(.is-live) :is(.tune-desk, .tune-veil) { display: none; }
/* live: the corner of a Mac, where the panel opens; the desk copy under it, the panel's backdrop blur behind the tiles */
.tune.is-live .tune-screen {
  --cpw: calc(350px * var(--z));
  height: min(100% - 160px, 800px);
  border-radius: 16px;
  overflow: hidden;
  overflow: clip;                           /* clip, not hidden: focus and find can't scroll it */
  isolation: isolate;
  background: var(--tile) var(--field, none) center / cover;
  box-shadow: 0 0 0 1px var(--line);
}
.tune-desk { position: absolute; inset: 0; }
/* the copy of the hero's desk (tune.js): a still, no arrivals, no loops */
.desk-copy { pointer-events: none; }
.desk-copy, .desk-copy * { animation: none !important; }
.desk-copy .car { display: none; }
/* the tint: over the frosted desk, under your window */
.mtint { position: absolute; z-index: 40; left: -80px; top: -80px; width: 1672px; height: 1024px; background: var(--tint, transparent); opacity: var(--tint-a, 0); pointer-events: none; transition: opacity .5s var(--fr-in), background-color .5s var(--fr-in); }
.tune-desk .scene { --card-r: 0px; }        /* the card is this frame now */
/* the camera sits on the desk's top and right edges: the wallpaper and its colour field run on past them, so the frost's
   soft falloff happens out of sight */
.tune-desk .scene > .wp { top: -120px; width: calc(var(--cam-w) + 120px); height: 1224px; }
.tune-desk .mamb { left: -120px; top: -120px; width: 1752px; height: 1224px; -webkit-mask-image: none; mask-image: none; }
/* the Transition slider sets how long the frost takes to come and go */
.tune-desk .scene:not(.is-tuning) :is(.wp, .win, .mamb, .mgrain, .mtint) { transition-duration: var(--tr, .75s); transition-delay: 0s; }
.tune-desk .scene.is-tuning :is(.mamb, .mgrain, .mtint) { transition: none; }   /* a dragged knob: no easing on any layer */
/* Ambient: the overlay clears over the top half of the screen (FocusModeMask). A clear copy of the desk on top, faded
   out by halfway down; the fade's reach eases in and out */
@property --amb { syntax: "<length>"; inherits: false; initial-value: 0px; }
.tune-clear { --amb: 0px; -webkit-mask-image: linear-gradient(#000, #0000 var(--amb)); mask-image: linear-gradient(#000, #0000 var(--amb)); transition: --amb var(--tr, .75s) ease-in-out; }
.tune-desk.is-ambient .tune-clear { --amb: 432px; }
.tune-veil {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--cpw) + 24px * var(--z));   /* full strength by the tiles' edge, so their words never sit on sharp windows */
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 calc(64px * var(--z)));
  mask-image: linear-gradient(90deg, #0000, #000 calc(64px * var(--z)));
  pointer-events: none;
}

/* the panel itself: the page's ink on soft tiles, in either theme */
.cp {
  --acc: #007aff;                           /* the app's tint colour, As System: Apple's blue, on the sliders' fill and toggles that are on */
  --p-tile: color-mix(in srgb, var(--ink) 9%, transparent);   /* a tile: a clear soft grey, so the panel reads as a thing on the page */
  --p-val: color-mix(in srgb, var(--ink) 80%, transparent);     /* values, the app's white .85 */
  --p-cap: var(--ink-2);                    /* captions, the app's white .6 */
  --p-quiet: color-mix(in srgb, var(--ink-2) 75%, transparent); /* empty states, the app's white .4 */
  --p-line: color-mix(in srgb, var(--ink) 7%, transparent);     /* hairlines between rows: half a pixel, 24pt in from both sides of the tile */
  --p-fill: color-mix(in srgb, var(--ink) 7%, transparent);     /* round buttons, key caps */
  --p-track: color-mix(in srgb, var(--ink) 12%, transparent);   /* toggle tracks */
  --p-rail: color-mix(in srgb, var(--ink) 9%, transparent);     /* the unfilled part of a slider, a little quieter */
  --p-tick: color-mix(in srgb, var(--ink) 20%, transparent);
  --p-knob: #fff;
  position: relative;
  z-index: 2;
  width: var(--cpw);
  overflow: hidden;
  overflow: visible clip;                   /* clip (no scroller, so the fades inside stick to the screen), top and bottom only: the
                                               tiles' shadows reach out sideways */
  color: var(--ink);
  font: 400 13px/1.25 var(--sans);
  letter-spacing: -.003em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  /* LIVE's window: smootherstep over the fade, top and bottom, so there's no edge anywhere in it */
  --mask: linear-gradient(#0000, rgb(0 0 0 / .009) calc(var(--fade) * .1), rgb(0 0 0 / .058) calc(var(--fade) * .2), rgb(0 0 0 / .163) calc(var(--fade) * .3), rgb(0 0 0 / .317) calc(var(--fade) * .4), rgb(0 0 0 / .5) calc(var(--fade) * .5), rgb(0 0 0 / .683) calc(var(--fade) * .6), rgb(0 0 0 / .837) calc(var(--fade) * .7), rgb(0 0 0 / .942) calc(var(--fade) * .8), rgb(0 0 0 / .991) calc(var(--fade) * .9), #000 var(--fade), #000 calc(100% - var(--fade)), rgb(0 0 0 / .991) calc(100% - var(--fade) * .9), rgb(0 0 0 / .942) calc(100% - var(--fade) * .8), rgb(0 0 0 / .837) calc(100% - var(--fade) * .7), rgb(0 0 0 / .683) calc(100% - var(--fade) * .6), rgb(0 0 0 / .5) calc(100% - var(--fade) * .5), rgb(0 0 0 / .317) calc(100% - var(--fade) * .4), rgb(0 0 0 / .163) calc(100% - var(--fade) * .3), rgb(0 0 0 / .058) calc(100% - var(--fade) * .2), rgb(0 0 0 / .009) calc(100% - var(--fade) * .1), #0000);
}
@media (prefers-color-scheme: dark) { :root .cp { --acc: #0a84ff; --p-tile: color-mix(in srgb, var(--ink) 7%, transparent); --p-knob: #d8d8d5; } }
/* the fades: the page's own background, stuck to the top of the screen (solid under the bar, then a long smootherstep)
   and to the bottom while the panel runs past. Each waits just outside the panel until the panel reaches it, and is
   clipped there, so they only ever soften tiles, never the page around them. The top one has its own layer (.cp-veil),
   a fade's length longer than the panel, so it holds until the last tile has gone under the bar too */
.cp-fade { position: sticky; z-index: 3; display: block; pointer-events: none; }
.cp-veil { position: absolute; z-index: 3; top: 0; right: -32px; bottom: calc(-1 * (var(--bar) + var(--fade))); width: calc(var(--cpw) + 64px); overflow: hidden; overflow: clip; pointer-events: none; }   /* 32px past each side, over the shadows */
.cp-fade-t {
  top: 0;
  height: calc(var(--bar) + var(--fade));
  margin-top: calc(-1 * (var(--bar) + var(--fade)));
  background: linear-gradient(var(--bg) var(--bar), color-mix(in srgb, var(--bg) 99.1%, #0000) calc(var(--bar) + var(--fade) * .1), color-mix(in srgb, var(--bg) 94.2%, #0000) calc(var(--bar) + var(--fade) * .2), color-mix(in srgb, var(--bg) 83.7%, #0000) calc(var(--bar) + var(--fade) * .3), color-mix(in srgb, var(--bg) 68.3%, #0000) calc(var(--bar) + var(--fade) * .4), color-mix(in srgb, var(--bg) 50%, #0000) calc(var(--bar) + var(--fade) * .5), color-mix(in srgb, var(--bg) 31.7%, #0000) calc(var(--bar) + var(--fade) * .6), color-mix(in srgb, var(--bg) 16.3%, #0000) calc(var(--bar) + var(--fade) * .7), color-mix(in srgb, var(--bg) 5.8%, #0000) calc(var(--bar) + var(--fade) * .8), color-mix(in srgb, var(--bg) .9%, #0000) calc(var(--bar) + var(--fade) * .9), #0000);
}
.cp-fade-b {
  bottom: 0;
  height: var(--fade);
  margin: 0 -32px calc(-1 * var(--fade));   /* past the sides too, over the shadows */
  background: linear-gradient(0deg, var(--bg), color-mix(in srgb, var(--bg) 99.1%, #0000) 10%, color-mix(in srgb, var(--bg) 94.2%, #0000) 20%, color-mix(in srgb, var(--bg) 83.7%, #0000) 30%, color-mix(in srgb, var(--bg) 68.3%, #0000) 40%, color-mix(in srgb, var(--bg) 50%, #0000) 50%, color-mix(in srgb, var(--bg) 31.7%, #0000) 60%, color-mix(in srgb, var(--bg) 16.3%, #0000) 70%, color-mix(in srgb, var(--bg) 5.8%, #0000) 80%, color-mix(in srgb, var(--bg) .9%, #0000) 90%, #0000);
}
/* iOS Safari pins sticky things to the bottom of its small viewport, but draws the page on under its collapsed address
   bar too: carry the fade's solid end down by the room the bar frees up (0 everywhere else), so no tile shows there */
.cp-fade-b::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(100lvh - 100svh); background: var(--bg); }
.tune.is-live .cp { position: absolute; top: 0; right: 0; bottom: 0; -webkit-mask-image: var(--mask); mask-image: var(--mask); }
.tune.is-live :is(.cp-fade, .cp-veil) { display: none; }
.tune.is-live .cp-list { will-change: transform; }
.tune.is-live .cp-in { width: 350px; padding: calc((var(--fade) + 8px) / var(--z)) 16px calc((var(--fade) + 24px) / var(--z)) 40px; }
.cp-in {
  zoom: var(--z);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 36px;                                /* VStack(spacing: 36) */
  width: 294px;
  padding: 0 0 calc(64px / var(--z));       /* the first tile level with the words; room under the last for its shadow */
}
.cp-group, .cp-extra { display: flex; flex-direction: column; gap: 12px; }
.cp-extra { gap: 36px; }
.cp-sym { position: absolute; width: 0; height: 0; overflow: hidden; }
.cp svg { flex: none; }
:where(.cp) button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }   /* :where, so every class rule wins */
.cp b { font-weight: 500; }
.cp small { font-size: 10px; line-height: 1.3; }   /* .caption */

/* a tile: the app's shape (radius 32), soft grey on the page; in the picture, Liquid Glass and a soft shadow (below) */
.cp-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 32px;
  background: var(--p-tile);
  color: inherit;
  text-align: left;
  transition: background-color .2s ease-in-out, height .38s cubic-bezier(.3, 1.25, .5, 1);
}
/* a soft, layered shadow under every tile (long and faint, no hard edge anywhere) and a hairline of light round it, so the
   panel sits on the page like the real one over a desk */
.tune:not(.is-live) .cp-tile {
  /* Liquid Glass, like the hero's windows: a soft light from above on the grey, a hairline of light along the top and a
     faint line round the outside, over the soft shadow; the rim that catches the light is ::before */
  background: linear-gradient(rgb(255 255 255 / .5), rgb(255 255 255 / .12) 45%, rgb(255 255 255 / 0)), var(--p-tile);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), inset 0 -.5px 0 rgb(0 0 0 / .03), 0 0 0 .5px rgb(0 0 0 / .045),
    0 1px 2px rgb(0 0 0 / .022), 0 6px 16px -4px rgb(0 0 0 / .034), 0 16px 36px -10px rgb(0 0 0 / .045), 0 32px 64px -24px rgb(0 0 0 / .06);
}
/* the glass edge: light catches the rim top left and again bottom right, like the real material (the call bar's recipe) */
.tune:not(.is-live) .cp-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(162deg, rgb(255 255 255 / .95), rgb(255 255 255 / .25) 30%, rgb(255 255 255 / .05) 62%, rgb(255 255 255 / .6));
  -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);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root .tune:not(.is-live) .cp-tile {
    background: linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .02) 45%, rgb(255 255 255 / 0)), var(--p-tile);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 0 0 .5px rgb(0 0 0 / .5),
      0 1px 2px rgb(0 0 0 / .22), 0 16px 36px -10px rgb(0 0 0 / .3), 0 32px 64px -24px rgb(0 0 0 / .38);
  }
  :root .tune:not(.is-live) .cp-tile::before { background: linear-gradient(162deg, rgb(255 255 255 / .3), rgb(255 255 255 / .07) 30%, rgb(255 255 255 / .02) 62%, rgb(255 255 255 / .15)); }
}
.cp-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; transition: opacity .2s ease-in-out; pointer-events: none; }
.cp-tile:hover::after { opacity: .04; }
button.cp-tile { cursor: pointer; }
.cp-tile:focus-visible, .cp button:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.cp-tile:focus-visible { outline-offset: 3px; }

/* rows: an icon column (40pt), the label, the control. 64pt tall, 12pt in, 24pt from the right */
.cp-row { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; height: 64px; padding: 0 24px 0 12px; }
.cp-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: inherit; }
.cp-ic svg { width: 21px; height: 21px; fill: currentColor; }
.cp-slide > b, .cp-tint-a > b { flex: none; width: 40px; }   /* ControlCenterConstants.sliderLabelWidth */
.cp-fx .cp-slide > b { width: 70px; }

/* the slider: macOS 26 with tick marks. A 5pt track filled with ink up to the knob, a white capsule knob, a dot
   under every step */
.cp input[type="range"] {
  --p: 0;
  --n: 10;
  --step: calc((100% - 20px) / var(--n));
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  height: 26px;
  margin: 0;
  background: radial-gradient(circle at 50% 50%, var(--p-tick) 0 .85px, #0000 1.3px) calc(10px - var(--step) / 2) 18px / var(--step) 4px repeat-x;
  cursor: pointer;
  touch-action: pan-y;                      /* a finger dragging sideways moves it, one swiping up and down still scrolls the page */
}
.cp input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--acc) calc(10px + var(--p) * (100% - 20px)), var(--p-rail) 0); transition: background-color .2s; }
.cp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 15px; margin-top: -5px; border: 0; border-radius: 8px; background: var(--p-knob); box-shadow: 0 0 0 .5px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .22); transition: scale .25s cubic-bezier(.3, 1.4, .5, 1), background-color .25s; }
.cp input[type="range"]:active::-webkit-slider-thumb { scale: 1.3 1.24; }
.cp input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--p-rail); }
.cp input[type="range"]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--acc); }
.cp input[type="range"]::-moz-range-thumb { width: 20px; height: 15px; border: 0; border-radius: 8px; background: var(--p-knob); box-shadow: 0 0 0 .5px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .22); }
.cp input[type="range"]:focus-visible { outline: none; }
.cp input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.cp input[type="range"]:focus-visible::-moz-range-thumb { outline: 1.5px solid var(--ink); outline-offset: 2px; }

/* the toggle: TintedToggleStyle. 48x22, a soft track off, ink on; a 26x18 thumb, 9pt either side of centre */
.cp-toggle { position: relative; flex: none; width: 48px; height: 22px; margin-left: auto; padding: 0; border: 0; border-radius: 12px; background: var(--p-track); cursor: pointer; transition: background-color .25s ease-in-out; }
.cp-toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 26px; height: 18px; border-radius: 10px; background: var(--p-knob); box-shadow: 0 0 0 .5px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .18); transition: translate .32s cubic-bezier(.3, 1.4, .5, 1), background-color .25s; }
.cp-toggle[aria-checked="true"] { background: var(--acc); }
.cp-toggle[aria-checked="true"]::after { translate: 18px 0; background: #fff; box-shadow: none; }   /* white on the blue, in both themes, like macOS */

/* a menu: the value and a small chevron (the app opens a native menu; here a press steps to the next option) */
.cp-pick { flex: none; display: inline-flex; align-items: center; gap: 5px; margin: -4px -2px -4px auto; padding: 4px 2px 4px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer; white-space: nowrap; transition: background-color .2s; }
.cp-pick::after { content: ""; width: 5px; height: 5px; margin: -3px 1px 0 0; border: solid currentColor; border-width: 0 1.6px 1.6px 0; rotate: 45deg; opacity: .9; }
.cp-pick:hover { background: var(--p-fill); }

/* two-way values (Mode, Multi-screen): the value rolls in from its edge, two dots say which of two */
.cp-car { display: grid; margin-left: auto; overflow: hidden; color: var(--p-val); text-align: right; white-space: nowrap; }
.cp-car > span { grid-area: 1 / 1; transition: translate .3s ease-in-out, opacity .3s ease-in-out; }
.is-b > .cp-car > .cp-a { translate: 0 -100%; opacity: 0; }
:not(.is-b) > .cp-car > .cp-b { translate: 0 100%; opacity: 0; }
.cp-dots { display: grid; gap: 4px; }
.cp-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .24; transition: opacity .3s ease-in-out; }
:not(.is-b) > .cp-dots i:first-child, .is-b > .cp-dots i:last-child { opacity: 1; }

/* text pairs: a title, a caption under it */
.cp-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-tt b, .cp-tt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tt small { color: var(--p-cap); }
/* labels that change with the state: the first while off, the second while on */
.cp-a, .cp-b { display: inline; }
[aria-pressed="true"] .cp-tt .cp-a, [aria-pressed="false"] .cp-tt .cp-b, [aria-expanded="true"] > .cp-a, [aria-expanded="false"] > .cp-b { display: none; }

/* 1. ignore the app you're in, and the switch ---------------------------------------- */
.cp-pair { display: flex; gap: 12px; }
.cp-ignore { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; height: 64px; padding: 0 18px 0 13px; }
.cp-app { width: 40px; height: 40px; }
.cp-ignore .cp-tt { flex: 1; }
.cp-pm { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .6; }   /* the quiet icon: ink at 60%. The power, the round plus and the back chevrons match it */
.cp-ignore[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.cp-ignore[aria-pressed="true"] .cp-tt small { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.cp-ignore[aria-pressed="true"] .cp-pm { opacity: 1; }
.cp-ignore[aria-pressed="true"] .cp-pm-v { display: none; }
.cp-power { flex: none; display: grid; place-items: center; width: 80px; height: 64px; }   /* ControlCenterConstants.smallItemWidth */
.cp-power svg { width: 21px; height: 21px; opacity: .6; transition: color .2s ease-in-out, opacity .2s ease-in-out; }
/* a soft pill like the rest while the panel is a picture; LIVE, "on" fills it, like an active toggle in Control Center
   (the app: white glass, tinted symbol; here ink and page) */
.tune.is-live .cp-power[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.tune.is-live .cp-power[aria-checked="true"] svg { opacity: 1; }

/* Mode: Deep (the whole screen) or Ambient (a soft glow). The menu bar icons: a solid dot, a soft one (Monocle's dot,
   like the one above the desk) */
.cp-mode { padding-right: 26px; }
.cp-orb { position: relative; width: 14px; height: 14px; border-radius: 50%; }   /* a touch under the app's, so it weighs what the line icons do */
.cp-orb::before, .cp-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; transition: opacity .3s ease-in-out, scale .3s ease-in-out; }
.cp-orb::before { background: currentColor; box-shadow: 0 0 8px 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.cp-orb::after { inset: -4px; background: radial-gradient(closest-side, currentColor 30%, color-mix(in srgb, currentColor 50%, transparent) 62%, #0000); opacity: 0; scale: .7; }
.cp-mode:not(.is-b) .cp-orb::before { opacity: 0; scale: .7; }
.cp-mode:not(.is-b) .cp-orb::after { opacity: 1; scale: 1; }

/* 2. blur, tint, grain ----------------------------------------------------------------- */
/* 3 x 64pt; the tint row (48pt) opens into the ten colours (96pt) and closes again once one is picked */
.cp-look { display: flex; flex-direction: column; justify-content: center; height: 192px; }
.cp-look.is-open { height: 224px; }
.cp-look > .cp-row:first-child::after, .cp-tint::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: var(--p-line); transform: scaleY(.5); transform-origin: bottom; opacity: 0; transition: opacity .3s; }
.cp-look.is-open > .cp-row:first-child::after, .cp-look.is-open .cp-tint::after { opacity: 1; }
.cp-tint { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); height: 48px; transition: height .38s cubic-bezier(.3, 1.25, .5, 1); }
.cp-look.is-open .cp-tint { height: 96px; }
.cp-tint > * { grid-area: 1 / 1; transition: opacity .3s ease-in-out, translate .38s cubic-bezier(.3, 1.25, .5, 1), visibility 0s; }
.cp-tint-a { height: 48px; align-self: center; cursor: pointer; }
.cp-tint-b { display: flex; flex-direction: column; justify-content: center; align-self: center; gap: 12px; padding: 12px; }
.cp-look:not(.is-open) .cp-tint-b, .cp-look.is-open .cp-tint-a { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, .38s; }
.cp-look:not(.is-open) .cp-tint-b { translate: 0 24px; }
.cp-look.is-open .cp-tint-a { translate: 0 -24px; }
.cp-swatch { cursor: pointer; }
.cp-swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--tc, conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de, #ff2d55, #ff3b30)); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12); transition: background-color .25s, scale .25s cubic-bezier(.3, 1.4, .5, 1); }
.cp-swatch:hover i { scale: 1.08; }
.cp-sub-head { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 4px; }
.cp-back, .cp-chev { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -8px; padding: 0; border: 0; background: none; }
.cp-back svg, .cp-chev svg { width: 17px; height: 17px; opacity: .6; }
.cp-back { cursor: pointer; }
.cp-cap { font-size: 10px; color: var(--p-cap); }
.cp-swatches { display: flex; justify-content: space-between; }
.cp-swatches button { position: relative; flex: 1 1 0; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.cp-swatches button::before { content: ""; position: absolute; left: 50%; top: 2px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--c); transition: scale .25s cubic-bezier(.3, 1.4, .5, 1); }
.cp-swatches .is-sys::before { background: conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de, #ff2d55, #ff3b30); }
.cp-swatches button::after { content: ""; position: absolute; left: 50%; top: 0; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); opacity: 0; scale: .8; transition: opacity .2s, scale .3s cubic-bezier(.3, 1.4, .5, 1); }
.cp-swatches button:hover::before { scale: 1.1; }
.cp-swatches [aria-checked="true"]::after { opacity: 1; scale: 1; }

/* 3. App Groups: a headline and a round plus, rows under hairlines, or a quiet line */
.cp-card { padding-bottom: 12px; }
.cp-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; }
.cp-head h3 { margin: 0; font-size: 13px; font-weight: 650; }   /* .headline */
.cp-add { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--p-fill); cursor: pointer; transition: background-color .2s, scale .25s cubic-bezier(.3, 1.4, .5, 1); }
.cp-add:hover { background: var(--p-track); }
.cp-add:active { scale: .92; }
.cp-add svg { width: 17px; height: 17px; opacity: .6; }
.cp-empty { padding: 24px; font-size: 10px; line-height: 1.3; color: var(--p-quiet); }
.cp-card:has(.cp-items li) .cp-empty { display: none; }
.cp-items li { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 24px; animation: cp-in .38s cubic-bezier(.3, 1.25, .5, 1) backwards; }
.cp-items li + li::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--p-line); transform: scaleY(.5); transform-origin: top; }
.cp-items b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-items li.is-out { animation: cp-out .25s ease-in forwards; }
@keyframes cp-in { from { opacity: 0; translate: 0 -8px; } }
@keyframes cp-out { to { opacity: 0; translate: 0 -6px; } }
/* a group: its apps stacked (28pt, 14pt apart), the name, then add and delete */
.cp-stack { display: flex; flex: none; align-items: center; width: 56px; height: 32px; }
.cp-stack img { position: relative; z-index: 1; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .2)); }
.cp-stack img:first-child { z-index: 2; }   /* the first app on top */
.cp-stack img + img { margin-left: -14px; }
.cp-acts { display: flex; gap: 4px; color: var(--p-cap); }
.cp-acts button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; transition: color .2s; }
.cp-acts button:hover { color: var(--ink); }
.cp-acts svg { width: 16px; height: 16px; }

/* Show more: a small soft capsule. Once it scrolls up past 62% of the panel's height it presses itself and the
   rest unfolds under it (tune.js); back below, it folds away again */
.cp-more-row { display: flex; justify-content: center; }
.cp-more { width: auto; padding: 8px 14px; font-size: 10px; font-weight: 500; color: var(--p-val); transition: background-color .2s ease-in-out, scale .3s cubic-bezier(.3, 1.4, .5, 1); }
.cp-more.is-press { scale: .94; }
.cp-extra > * { transition: opacity .45s var(--ease), translate .6s var(--open), filter .45s var(--ease); }
.cp:not(.is-more) .cp-extra > * { opacity: 0; translate: 0 18px; filter: blur(6px); pointer-events: none; transition-duration: .25s; }
.cp.is-more .cp-extra > :nth-child(2) { transition-delay: .06s; }
.cp.is-more .cp-extra > :nth-child(3) { transition-delay: .12s; }
.cp.is-more .cp-extra > :nth-child(4) { transition-delay: .18s; }

/* 4. how it behaves: four rows, hairlines between, 8pt of air top and bottom */
.cp-rows { padding: 8px 0; }
.cp-rows > .cp-row + .cp-row::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--p-line); transform: scaleY(.5); transform-origin: top; }
.cp-line { padding: 0 24px; }
button.cp-line { border: 0; background: none; cursor: pointer; text-align: left; }
.cp-line .cp-tt { flex: 1; }

/* 5. Gestures and Shortcuts, open: a back chevron and the name, then their rows */
.cp-sub { display: flex; flex-direction: column; gap: 14px; padding: 24px 18px; }
.cp-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-gest > .cp-kv { margin-inline: 4px; }
.cp-kv > span, .cp-kv .cp-pick { color: var(--p-val); }
.cp-gest > .cp-kv + .cp-kv:not(.cp-sens) { margin-top: -2px; }   /* rows inside a section sit 12pt apart, sections 14 */
.cp-gest hr { width: auto; height: 1px; margin: 4px 6px; border: 0; background: var(--p-line); transform: scaleY(.5); }   /* 24pt in from the tile, like every hairline */
.cp-pick:disabled { cursor: default; }
.cp-dep { transition: opacity .25s; }
.cp-gest:has([data-k="shake"][aria-checked="false"]) .cp-dep { opacity: .4; pointer-events: none; }
.cp-sens { gap: 8px; margin-top: -8px; }
.cp-sens small { color: var(--p-cap); }
.cp-sens input[type="range"] { flex: 1; height: 18px; background-position-y: 14px; }
.cp-key { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 4px 0 12px; }
.cp-key + .cp-key { margin-top: -4px; }   /* 10pt apart, 14 under the header */
.cp-key-l { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
.cp-caps { display: flex; gap: 4px; height: 24px; }
.cp-caps kbd { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--p-fill); font: 400 13px/1 var(--sans); color: var(--p-val); }
.cp-key-a { display: flex; gap: 4px; color: var(--p-cap); }
.cp-key-a svg { width: 24px; height: 24px; padding: 4px; }

/* 6. the effects: Monochrome, the transition's length, how it reveals */
.cp-fx { padding: 0; }

/* the panel's way in and out, on the scroll itself (the section's view timeline), nothing on a timer: it comes into
   focus over the first stretch of screen it rises through, and frosts away (Monocle's own look) as its end comes up
   past the words. The words stay plain, like every other heading on the page */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tune:not(.is-live) .cp {
      animation: tune-in linear backwards, tune-out linear forwards;   /* each only in and before / after its own range: they never overlap */
      animation-timeline: --tune, --tune;
      animation-range: entry 0% entry 28%, exit 30% exit 65%;
    }
  }
}
@keyframes tune-in { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes tune-out { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(10px); } }

/* letters: one at a time on ruled paper ----------------------------------------------------------- */
/* A hairline under every line of type, so the words sit on it like a letter; a blank line between
   paragraphs is an empty rule. The sentence that matters is in ink, the rest in the subtle grey. */
.letters { --lt-fs: var(--read-fs); --lh: calc(var(--lt-fs) * 1.6); --sheet-w: 780px; }
.lt-top { display: flex; justify-content: flex-end; max-width: var(--sheet-w); margin-top: clamp(32px, 3vw, 44px); }   /* the count and "another one", at the sheet's right edge */
.lt-ctl { display: flex; align-items: center; gap: 16px; }
.lt-n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lt-next { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; border: 0; background: none; color: var(--ink); font-weight: 500; cursor: pointer; }
.lt-next svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate .7s var(--ease); }
.lt-next:hover svg { rotate: 40deg; }
.letter { max-width: var(--sheet-w); margin-top: 14px; }
.sheet { overflow: hidden; }
.lt-text {
  margin: 0;
  padding-top: calc(var(--lh) * .25);
  font-size: var(--lt-fs);
  line-height: var(--lh);
  letter-spacing: -.012em;
  color: var(--ink-2);
  /* each rule sits a fifth of the type size under the baseline, so descenders cross it */
  background: linear-gradient(transparent calc(var(--lh) - 1px), var(--line) 0) 0 calc(var(--lt-fs) * -.2) / 100% var(--lh) content-box;
  text-wrap: pretty;
  transition: opacity .22s ease-out, filter .22s ease-out;
}
.lt-text p + p { margin-top: var(--lh); }
.lt-text .lt-name { color: var(--ink); font-weight: 500; }
.lt-text b { font-weight: inherit; color: var(--ink); }
.lt-text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lt-text a:hover { text-decoration-color: currentColor; }
.lt-via { min-height: 1.62em; margin-top: 12px; color: var(--ink-2); transition: opacity .22s ease-out, filter .22s ease-out; }
.lt-via a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.lt-via a:hover { color: var(--ink); text-decoration-color: currentColor; }
.letter.is-out .lt-text, .letter.is-out .lt-via { opacity: 0; filter: blur(6px); }
.letter:not(.is-out) .lt-text, .letter:not(.is-out) .lt-via { transition-duration: .45s; }
.lt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(30px, 3vw, 44px); }
/* the rating: the small soft button, with Gumroad's own wordmark */
.gum { gap: 6px; font-weight: 500; font-variant-numeric: tabular-nums; }
.btn.gum svg { width: 70px; height: auto; margin-top: 1px; }

/* the close: the hero's two buttons again, under one line ---------------------------------------- */
.brew { position: relative; padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); cursor: copy; transition: color .2s; }
.brew:hover { color: var(--ink); }
.brew code { color: inherit; text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; }   /* the button's quiet grey, not code's ink */
.brew-ok { position: absolute; left: 100%; top: 0; margin-left: 10px; color: var(--ink-2); opacity: 0; filter: blur(3px); transition: opacity .25s var(--ease), filter .25s var(--ease); }
.brew.is-ok .brew-ok { opacity: 1; filter: none; }

/* faq */
.faq { max-width: 780px; margin-top: clamp(32px, 3vw, 44px); }   /* as wide as the letters' sheet, as far from its heading */
.faq details + details { border-top: 1px solid var(--line); }   /* lines only between the questions */
/* the questions read like the letters: their size, tracking and weight, in ink */
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: var(--ink);
  font-size: var(--read-fs);
  line-height: 1.4;
  letter-spacing: -.012em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* the plus, drawn: two 1.5px lines in a 14px square, centred on the first line of the question; it turns into a cross */
.faq summary::after {
  content: "";
  flex: none;
  align-self: flex-start;
  width: 14px;
  height: 14px;
  margin-top: calc((1.4em - 14px) / 2);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--ink-2);
  transition: rotate .3s var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq .a { max-width: 60ch; padding: 0 0 20px; text-wrap: pretty; }
.faq .a b { color: var(--ink); font-weight: 500; }   /* the numbers, prominent */
.a b { color: var(--ink); font-weight: 500; }
.faq a, .colophon .by a, .lede a {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.faq a:hover, .colophon .by a:hover, .lede a:hover { text-decoration-color: currentColor; }


/* the corner (changelog, terms, 404) ------------------------------- */
.stage { position: relative; padding: 24px var(--gutter) 0; }
.corner { position: relative; z-index: 6; max-width: 520px; }
.brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--ink); font-weight: 500; }
.brand a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.brand a:hover { text-decoration: none; }
.corner h1:not(.say) { font-weight: 500; font-size: inherit; letter-spacing: -.004em; color: var(--ink); margin-bottom: 4px; }
.corner .say { margin-top: clamp(56px, 9vh, 112px); }   /* a page title in the home page's statement size (what's new) */
.lede { text-wrap: pretty; }
.log { margin-top: clamp(48px, 9vh, 96px); max-width: 680px; padding: 0 var(--gutter); }
.rel { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.rel:first-child { padding-top: 0; border-top: 0; }   /* no line over the newest one: the title is enough */
.rel h2 { display: flex; align-items: baseline; gap: 12px; font-weight: 500; color: var(--ink); }
.rel time, .rel .soon { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* a date, or "coming soon" for the next one */
.rel .sub { margin-top: 8px; text-wrap: pretty; }
/* the bullets fold away like the FAQ: a quiet "3 changes" with its plus; the title and the summary stay */
.changes { margin-top: 10px; }
.changes summary { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--ink-2); cursor: pointer; list-style: none; transition: color .2s; }
.changes summary:hover { color: var(--ink); }
.changes summary::-webkit-details-marker { display: none; }
.changes summary::after { content: "+"; content: "+" / ""; transition: rotate .3s var(--ease); }
.changes[open] summary::after { rotate: 45deg; }
.rel ul { margin-top: 8px; display: grid; gap: 6px; }
.rel li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
.rel li span { color: var(--ink-2); white-space: nowrap; }
.rel li p { color: var(--ink); }
.legal { margin-top: clamp(48px, 9vh, 96px); max-width: 680px; padding: 0 var(--gutter); }
.legal h2 { margin: 30px 0 6px; font-weight: 500; color: var(--ink); }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 8px 0; padding-left: 18px; list-style: disc; }
.legal .meta { color: var(--ink-2); }
.legal hr { margin: 40px 0 0; border: 0; border-top: 1px solid var(--line); }

/* footer ----------------------------------------------------------- */
/* the footer: who built it on the left, the links on the right, on one line, in the top bar's type (13.5px, the links
   quiet until hovered, the page you're on in ink). No divider, like the portfolio's */
.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: clamp(80px, 9vw, 140px);
  padding: 22px var(--gutter) clamp(40px, 6vw - 16px, 80px);   /* room below, so the page's last line breathes */
  color: var(--ink-2);
}
.home .colophon { padding-inline: var(--side); }
.colophon .by { letter-spacing: -.004em; }   /* "Built by" quiet, the name prominent */
.colophon .me { color: var(--ink); font-weight: 500; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }   /* 24px apart, like the bar's */
.colophon nav a { color: var(--ink-2); transition: color .2s; }
.colophon nav a:hover { color: var(--ink); text-decoration: none; }
.colophon nav a[aria-current] { color: var(--ink); font-weight: 500; }

/* blur band under the floating bar: the portfolio's progressive blur ---- */
/* eight overlapping bands, each blurring twice as much as the last, so the blur ramps up on a curve.
   No tint on top: whatever scrolls under keeps its own colour right into the edge. */
.edge {
  position: fixed;
  z-index: 15;
  inset: 0 0 auto;
  height: 76px;
  --dir: to top;
  --bk: .75;
  --o: 0;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s .3s;
}
.edge > * { position: absolute; inset: 0; opacity: var(--o, 1); transition: opacity .3s; }
.is-float .edge-t { --o: 1; visibility: visible; transition: none; }
.edge i {
  -webkit-backdrop-filter: blur(calc(var(--b) * var(--bk, 1)));
  backdrop-filter: blur(calc(var(--b) * var(--bk, 1)));
  --m: linear-gradient(var(--dir), #0000 calc(var(--n) * 12.5%), #000 calc((var(--n) + 1) * 12.5%) calc((var(--n) + 2) * 12.5%), #0000 calc((var(--n) + 3) * 12.5%));
  -webkit-mask: var(--m);
  mask: var(--m);
}
.edge i:nth-child(1) { --n: 0; --b: .5px; }
.edge i:nth-child(2) { --n: 1; --b: 1px; }
.edge i:nth-child(3) { --n: 2; --b: 2px; }
.edge i:nth-child(4) { --n: 3; --b: 4px; }
.edge i:nth-child(5) { --n: 4; --b: 8px; }
.edge i:nth-child(6) { --n: 5; --b: 16px; }
.edge i:nth-child(7) { --n: 6; --b: 24px; }
.edge i:nth-child(8) { --n: 7; --b: 36px; }

/* ------------------------------------------------------------------ */
/* tablet                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 980px) {
  /* the panel: one column, the words above it, both on the page's scroll (no room beside it to hold them) */
  .tune-stage { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 56px); }
  .tune-say { position: static; max-width: 15em; }
  .tune-screen { justify-content: flex-start; }   /* under the words, on their edge */
  .tune-screen { --fade: clamp(48px, 8vh, 88px); }
  .cp-veil { right: auto; left: -32px; }
  /* LIVE: the words above, the screen under them, still pinned */
  .tune.is-live .tune-stage { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 0; padding-top: clamp(84px, 11vh, 120px); }
  .tune.is-live .tune-words { align-self: end; }
  .tune.is-live .cp { right: auto; left: 0; }
}

/* ------------------------------------------------------------------ */
/* phone                                                               */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
  :root { --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); --radius: 9px; --read-fs: 17px; }
  .controls, .home .controls { top: 11px; right: calc(var(--gutter) - 8px); }
  .get { right: 8px; }
  .controls { gap: 6px; }            /* the links' tap padding is 8px here: 22px between items */
  .controls a:not(.btn) { padding: 12px 8px; }
  .controls .ver { display: none; }
  .stage { padding-top: 18px; }
  .btn--sm { height: 36px; }   /* a comfortable tap */
  .mini { top: 11px; height: 38px; }
  .hero { padding-top: 124px; }
  .hero { --claim: clamp(27px, 7.6vw, 36px); }
  .claim { line-height: 1.1; }
  .hero .ctas { width: 100%; }
  .hero .ctas .btn { flex: 1 1 0; padding: 0 16px; }
  .hero .ctas .btn:has(svg) { padding: 0 18px 0 14px; }
  .desk { margin-top: 56px; }
  .block { margin-top: 112px; }
  .say { font-size: clamp(27px, 7.6vw, 36px); line-height: 1.1; }
  .tune { margin-top: 112px; }
  .tune.is-live .tune-stage { padding-top: 76px; }
  .tune.is-live .tune-screen { border-radius: 12px; }
  .tune.is-live .cp-in { padding-left: 12px; padding-right: 12px; }
  .colophon { flex-direction: column; }
  .rel li { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 420px) {
  /* a narrow phone: Follow on X steps aside when the Download pill comes in, so nothing crowds the mark on the left */
  .controls .follow { transition: color .2s, opacity .25s .1s, visibility 0s; }
  .is-past-cta .controls .follow { opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; }
}

/* live, on a phone: the veil covers the whole screen, so when Monocle steps aside (off, Ignore, a peek) it goes too,
   and in Ambient it clears from the top like the frost */
@media (max-width: 720px), (max-width: 980px) and (max-height: 560px) {
  .tune-veil { width: 100%; -webkit-mask-image: none; mask-image: none; transition: opacity var(--tr, .75s) ease-in-out; }
  .tune-screen.is-clear .tune-veil { opacity: 0; }
  .tune-screen.is-ambient .tune-veil { -webkit-mask-image: linear-gradient(#0000 25%, #000 60%); mask-image: linear-gradient(#0000 25%, #000 60%); }
}

/* short and narrow (a phone on its side): the words and the screen side by side again, the fades shorter */
@media (max-width: 980px) and (max-height: 560px) {
  .tune-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tune-say { position: sticky; }
  .tune-screen { justify-content: flex-end; }
  .tune-screen { --fade: 56px; }
  .cp-veil { right: -32px; left: auto; }
  .tune.is-live .tune-stage { grid-template-rows: none; align-items: center; padding-top: 0; }
  .tune.is-live .tune-words { align-self: center; }
  .tune.is-live .cp { right: 0; left: auto; }
}

/* ------------------------------------------------------------------ */
/* motion                                                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* the page arrives the way Monocle works: blurred, then in focus */
  .js .hero .award, .js .hero-in > * { animation: rise .9s var(--ease) backwards; }
  .js .hero .award { animation: rise .9s var(--ease) backwards, shine 1s cubic-bezier(.45, 0, .55, 1) .6s backwards; }   /* one pass of light over the award as it lands, before the buttons swap */
  .js .hero .ctas { animation-delay: .12s; }
  .js .hero-in > .fine { animation-delay: .2s; }
  .js .go-focus { animation: rise .9s var(--ease) .18s backwards; }   /* the caption and the dot, between the claim and the desk */
  .js .screen { animation: develop .9s var(--ease) .05s backwards; }
  .js .controls, .js .mini { animation: rise .9s var(--ease) .3s backwards; }   /* the bar: the mark and the nav arrive together */
  /* the mark draws itself once, left to right, as the bar arrives */
  .js .logo path { stroke-dasharray: 1 2; animation: draw 1.1s cubic-bezier(.65, 0, .35, 1) .3s backwards; }
  .js .corner > * { animation: rise .9s var(--ease) backwards; }
  .js .corner > :nth-child(2) { animation-delay: 50ms; }
  .js .corner > :nth-child(3) { animation-delay: 100ms; }

}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* below the desk: each section, once it scrolls in (site.js) */
@media (prefers-reduced-motion: no-preference) {
  .js .will-rise:not(.is-seen) > * { opacity: 0; }
  .js .will-rise.is-seen > * { animation: rise .9s var(--ease) backwards; }
  .js .will-rise.is-seen > :nth-child(2) { animation-delay: .07s; }
  .js .will-rise.is-seen > :nth-child(3) { animation-delay: .14s; }
  .js .will-rise.is-seen > :nth-child(4) { animation-delay: .21s; }
}
@keyframes draw { from { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } to { stroke-dashoffset: 0; } }
/* the award in ink, seen through a mask: --shine-a everywhere (the grey it always is) and a full band sweeping left to right */
@keyframes shine {
  from, to { color: var(--ink); -webkit-mask: linear-gradient(100deg, rgb(0 0 0 / var(--shine-a)) 42%, #000 50%, rgb(0 0 0 / var(--shine-a)) 58%) 0 0 / 300% 100% no-repeat; mask: linear-gradient(100deg, rgb(0 0 0 / var(--shine-a)) 42%, #000 50%, rgb(0 0 0 / var(--shine-a)) 58%) 0 0 / 300% 100% no-repeat; }
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes develop { from { opacity: 0; filter: blur(24px); transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}