/* noiro.dev */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-raised: #ffffff;
  --card: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #4f4f55;
  --ink-3: #6a6a70;
  --line: rgba(0, 0, 0, .09);
  --fill: rgba(0, 0, 0, .05);
  --fill-2: rgba(0, 0, 0, .08);
  --accent: #0071e3;
  --accent-ink: #ffffff;
  /* Text links: --accent is for fills, and as text on --bg it's 4.3:1, under the 4.5:1 small text needs. */
  --link: #0066cc;
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(246, 246, 248, .86);
  --glass-line: rgba(255, 255, 255, .7);
  --glass-edge: rgba(0, 0, 0, .1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .08);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .06), 0 30px 80px rgba(20, 30, 60, .18);
  --hover: rgba(0, 0, 0, .07);
  --sel-ink: #ffffff;

  /* wallpaper: a clear morning */
  --wp-sky0: #c9e1ff; --wp-sky1: #f4ede8;
  --stars: 0;

  /* Shoo's sky */
  --sky-0: #dcebff; --sky-1: #ecf4ff; --sky-2: var(--bg);

  /* System fonts only: nothing is downloaded, and nothing asks a font server for anything. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The apps' own colours, for the mockups of them on every page: Weir's from its Theme.swift (Display P3, as sRGB),
     Shoo's from its Theme.swift. */
  --weir-flow: #0082e2; --weir-held: #fa2769; --weir-mint: #00a167; --weir-amber: #e77f00;
  --shoo-leftovers: #00adcc; --shoo-activity: #805cff;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d10; --bg-raised: #161619; --card: #1c1c1f;
    --ink: #f5f5f7; --ink-2: #b4b4ba; --ink-3: #8e8e93;
    --line: rgba(255, 255, 255, .1); --fill: rgba(255, 255, 255, .07); --fill-2: rgba(255, 255, 255, .11);
    --accent: #0a84ff; --link: #2997ff;
    --glass: rgba(36, 36, 42, .5); --glass-strong: rgba(40, 40, 46, .78);
    --glass-line: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 10px 30px rgba(0, 0, 0, .4); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
    --hover: rgba(255, 255, 255, .12);
    --wp-sky0: #050a1a; --wp-sky1: #101c42;
    --stars: 1;
    --sky-0: #0b1532; --sky-1: #0a1129;
    --weir-flow: #00c0ff; --weir-held: #ff6490; --weir-mint: #00df93; --weir-amber: #ffb613;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d10; --bg-raised: #161619; --card: #1c1c1f;
  --ink: #f5f5f7; --ink-2: #b4b4ba; --ink-3: #8e8e93;
  --line: rgba(255, 255, 255, .1); --fill: rgba(255, 255, 255, .07); --fill-2: rgba(255, 255, 255, .11);
  --accent: #0a84ff; --link: #2997ff;
  --glass: rgba(36, 36, 42, .5); --glass-strong: rgba(40, 40, 46, .78);
  --glass-line: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 10px 30px rgba(0, 0, 0, .4); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --hover: rgba(255, 255, 255, .12);
  --wp-sky0: #050a1a; --wp-sky1: #101c42;
  --stars: 1;
  --sky-0: #0b1532; --sky-1: #0a1129;
  --weir-flow: #00c0ff; --weir-held: #ff6490; --weir-mint: #00df93; --weir-amber: #ffb613;
}

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 40px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 var(--font);
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -.028em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); letter-spacing: 0; font-feature-settings: "zero" 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
/* The first stop for the keyboard, past the menu bar. Out of sight until it has focus. */
.skip {
  position: fixed; left: 10px; top: 6px; z-index: 120; padding: 8px 14px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
  transform: translateY(calc(-100% - 12px)); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }
/* Dark mode's brighter blue is too light behind white text this small. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skip { background: #0060df; } }
:root[data-theme="dark"] .skip { background: #0060df; }
kbd {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; margin: 0 .1em;
  font: 500 12px/1 var(--font); color: var(--ink-2);
  background: var(--bg-raised); border: .5px solid var(--line); border-bottom-width: 1.5px; border-radius: 6px;
}
/* A line of short facts with a dot between each, such as what an app needs. Each fact is its own element and wraps
   whole. The dots sit in the gaps, and a fact that starts a new line has its dot outside the clip, so no line starts or
   ends with one. The padding leaves room for a Coming soon dot's pulse at the start. */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 1em;
  padding-left: .38em; margin-left: -.38em; clip-path: inset(-1em -1em -1em 0);
}
.meta > * { position: relative; }
.meta > * + *::before {
  content: ""; position: absolute; top: 50%; left: calc(-.5em - 2px);
  width: 3px; height: 3px; margin-top: calc(.1em - 1.5px); border-radius: 50%; background: currentColor; opacity: .5;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .45em;
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  transition: transform .2s var(--ease), background-color .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn--glass {
  background: var(--glass); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 1px 3px rgba(0,0,0,.08);
}
.btn--glass:hover { background: color-mix(in srgb, var(--glass) 100%, var(--ink) 6%); }
.btn--small { height: 30px; padding: 0 12px; font-size: 13px; }

.soon {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 16px 0 14px; border-radius: 999px;
  background: var(--fill-2); color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: -.005em;
}
.soon__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 0 rgba(255,159,10,.5); animation: pulse 2.4s ease-out infinite; }
.soon--dark { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,159,10,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255,159,10,0); } }

/* ---------- Menu bar ---------- */
.menubar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: 34px; padding: 0 8px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em;
}
/* The glass lives on a pseudo-element so the bar isn't a backdrop root, letting its menus blur the page. */
.menubar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 .5px 0 var(--line);
}
.menubar.is-scrolled::before { opacity: 1; }
.menubar__left, .menubar__right { display: flex; align-items: center; gap: 2px; height: 100%; }
.menubar__right { gap: 4px; }
.menu { position: relative; height: 100%; display: flex; align-items: center; }
.menu__title {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px;
  white-space: nowrap; transition: background-color .12s;
}
.menu__title:hover, .menu.is-open > .menu__title { background: var(--hover); }
.menu__title--app { font-weight: 700; }
.menu__title--logo { padding: 0 10px; }
.logo { width: 15px; height: 15px; }
.menubar__clock { padding: 0 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.menu__panel {
  position: absolute; top: 31px; left: 0; min-width: 230px; padding: 5px;
  background: var(--glass-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(40px) saturate(1.9); backdrop-filter: blur(40px) saturate(1.9);
  border-radius: 12px;
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--glass-edge), 0 12px 40px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden;
  transition: opacity .14s, transform .14s var(--ease), visibility 0s .14s;
  font-weight: 400;
}
.menu.is-open > .menu__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .1s, transform .14s var(--ease), visibility 0s; }
.menu--right > .menu__panel { left: auto; right: 0; }
.menu__panel > a, .menu__panel > button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 4px 10px 4px 24px; min-height: 26px; border-radius: 6px; position: relative;
}
.menu__panel > a:hover, .menu__panel > button:hover, .menu__panel > a:focus-visible, .menu__panel > button:focus-visible { background: var(--accent); color: #fff; outline: none; }
.menu__panel > [aria-checked="true"]::before { content: "✓"; position: absolute; left: 9px; font-size: 12px; font-weight: 600; }
.menu__panel hr { border: 0; height: .5px; background: var(--line); margin: 5px 10px; }
.menu__label { padding: 4px 10px 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.menu__disabled { display: flex; align-items: center; padding: 4px 10px 4px 24px; color: var(--ink-3); white-space: nowrap; }
/* Keyboard shortcuts sit at the right of a menu item, as on the Mac. */
.menu__key { margin-left: auto; padding-left: 28px; color: var(--ink-3); font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
.menu__panel > :hover > .menu__key, .menu__panel > :focus-visible > .menu__key { color: rgba(255, 255, 255, .78); }
.menu__panel > .menu__disabled:hover > .menu__key { color: var(--ink-3); }
.menu__panel > button:disabled, .menu__panel > button:disabled:hover { background: none; color: var(--ink-3); cursor: default; }
.menu__panel > button:disabled .menu__key { color: var(--ink-3); opacity: .7; }
.menu__app img { width: 18px; height: 18px; }
.menu__app span { margin-left: auto; padding-left: 18px; color: var(--ink-3); font-size: 12.5px; }
.menu__app:hover span { color: rgba(255,255,255,.8); }

/* Menu bar extras. Weir's is MenuBarGlance (a ring that fills with today's block rate, a dot that swells when blocks
   arrive, and today's count); Shoo's is MenuBarImage (a 24 by 13 pt graph beside the number). */
.extra { gap: 4px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.extra-count { font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
.glance { width: 14px; height: 14px; overflow: visible; }
.glance circle { fill: none; stroke: currentColor; }
.glance__track { stroke-width: 1.6; opacity: .32; }
.glance__arc { stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: var(--rate, 28) 100; transform: rotate(-90deg); transform-origin: 8px 8px; }
.glance .glance__dot { fill: currentColor; stroke: none; transform-origin: 8px 8px; transition: transform .3s var(--spring); }
.glance.is-splash .glance__dot { transform: scale(2); }
.extra-graph { width: 24px; height: 13px; overflow: visible; }
.extra-graph rect { fill: currentColor; opacity: .4; }
.extra-graph__area { fill: currentColor; opacity: .35; }
.extra-graph__line { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.extra--shoo { gap: 4px; }
.extra--shoo .extra-count { font-weight: 500; font-size: 12px; min-width: 3ch; }

.popover { width: 290px; padding: 14px; cursor: default; }
.popover__foot { margin-top: 12px; padding-top: 10px; border-top: .5px solid var(--line); font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.popover .ico { stroke: none; }

/* Weir's panel (MenuBarPanel.swift), 340 pt wide. */
.wpop { width: 340px; padding: 16px; display: grid; gap: 16px; }
.wpop .popover__foot { margin-top: -4px; }
.wpop__head { display: flex; align-items: center; gap: 10px; }
.wpop__mark { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--weir-flow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wpop__who { display: flex; flex-direction: column; line-height: 1.2; }
.wpop__who strong { font-size: 13.5px; font-weight: 700; }
.wpop__who span { font-size: 11px; color: var(--ink-2); }
.wpop__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.wpop__live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--weir-held); }
.wpop__live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--weir-held); opacity: 0; }
.menu.is-open .wpop__live i::after { animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3); opacity: 0; } }
.menu__panel > .wpop__broke {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 0;
  padding: 10px 12px; border-radius: 14px; background: var(--fill); color: var(--ink); transition: background-color .15s;
}
.menu__panel > .wpop__broke:hover, .menu__panel > .wpop__broke:focus-visible { background: var(--fill-2); color: var(--ink); }
.wpop__bandage { font-size: 18px; color: var(--weir-amber); }
.wpop__broke > span { display: flex; flex-direction: column; line-height: 1.25; }
.wpop__broke b { font-size: 13px; font-weight: 600; }
.wpop__broke span span { font-size: 11px; color: var(--ink-2); }
.wpop__chev { font-size: 10px; color: var(--ink-3); }
.wpop__today { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; align-items: center; }
.wpop__ring { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.wpop__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.wpop__ring circle { fill: none; stroke-width: 7; }
.wpop__track { stroke: color-mix(in srgb, var(--weir-held) 16%, transparent); }
.wpop__arc { stroke: var(--weir-held); stroke-linecap: round; stroke-dasharray: var(--rate, 28) 100; transition: stroke-dasharray .9s var(--spring); }
.wpop__ring span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.1; transition: transform .4s var(--spring); }
.wpop.is-splash .wpop__ring span { transform: scale(1.08); }
.wpop__ring b { font: 700 13px/1.1 ui-rounded, var(--font-display); font-variant-numeric: tabular-nums; }
.wpop__ring small { font-size: 10px; font-weight: 500; color: var(--ink-2); }
.wpop__nums { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.wpop__count {
  font: 600 30px/1 ui-rounded, var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--weir-held); background: linear-gradient(color-mix(in srgb, var(--weir-held) 78%, #fff), var(--weir-held)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wpop__label { font-size: 12.5px; font-weight: 500; }
.wpop__total { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wpop__chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 3px 7px; border-radius: 999px; background: var(--fill); font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.wpop__chip .ico { font-size: 9px; }
.wpop__chip:empty { display: none; }
.wpop__cap { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.wpop__cap .ico { font-size: 11px; }
.wpop__cap span { margin-left: auto; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wpop__bars { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 46px; }
.wpop__bars i { position: relative; display: flex; flex-direction: column; height: var(--h); border-radius: 2.5px; overflow: hidden; transition: opacity .15s; }
.wpop__bars i b { flex: none; height: var(--held); min-height: 1.5px; background: var(--weir-held); }
.wpop__bars i s { flex: 1; background: color-mix(in srgb, var(--weir-flow) 75%, transparent); }
.wpop__bars i.is-quiet { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.wpop__bars i.is-later { opacity: .6; }
.wpop__bars.is-hovering i:not(.is-hover) { opacity: .4; }
.wpop__bars i.is-now { overflow: visible; }
.wpop__bars i.is-now::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--weir-flow); }
.wpop__axis { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wpop__foot { display: flex; padding-top: 16px; border-top: .5px solid var(--line); }
.menu__panel > .wpop__foot { padding-top: 14px; }
.wpop__open, .spop__open {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: #fff; background: var(--tint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 2px 8px color-mix(in srgb, var(--tint) 35%, transparent);
  transition: filter .15s;
}
.wpop__open { --tint: var(--weir-flow); }
.wpop__open:hover, .spop__open:hover { filter: brightness(1.08); }
.wpop__open .ico { font-size: 13px; }

/* Shoo's panel (MenuBarActivity.swift), 300 pt wide. */
.spop { width: 300px; padding: 16px; }
.spop__head { display: flex; align-items: center; gap: 10px; }
.spop__tile {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 14px;
  background: linear-gradient(color-mix(in srgb, var(--shoo-activity) 78%, #fff), var(--shoo-activity));
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .42);
}
.spop__who { display: flex; flex-direction: column; line-height: 1.2; }
.spop__who strong { font-size: 13.5px; font-weight: 700; }
.spop__who span { font-size: 11px; color: var(--ink-2); }
.spop__metrics, .spop__apps { list-style: none; margin: 0; padding: 0; display: grid; }
.spop__metrics { gap: 10px; margin-top: 14px; padding-bottom: 14px; border-bottom: .5px solid var(--line); }
.spop__metrics li { display: grid; grid-template-columns: 16px minmax(0, 1fr) 70px 72px; gap: 8px; align-items: center; font-size: 12.5px; }
.spop__metrics .ico { font-size: 11px; color: var(--m); justify-self: center; }
.spop__metrics svg.spop__spark { width: 70px; height: 18px; overflow: visible; }
.spop__spark path { fill: none; stroke: var(--m); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spop__spark path + path { stroke: none; fill: color-mix(in srgb, var(--m) 22%, transparent); }
.spop__metrics b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spop__sub { margin: 14px 0 8px; font-size: 11.5px; font-weight: 600; }
.spop__apps { gap: 8px; }
.spop__apps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.spop__apps li > span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Stand-ins for each app's own icon, which the real panel takes from Finder. */
.spop__app { width: 18px; height: 18px; border-radius: 4.5px; display: grid; place-items: center; color: #fff; font-size: 10px; background: linear-gradient(color-mix(in srgb, var(--a) 75%, #fff), var(--a)); }
.spop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.spop__open { --tint: var(--shoo-activity); }
.menu__panel > .spop__foot > .spop__tool { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); font-size: 14px; }
.spop__tool:hover { background: var(--fill); }
.menu__panel .wpop__open, .menu__panel .spop__open { color: #fff; }

/* ---------- Desktop (hero) ---------- */
.desktop { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; touch-action: pan-y; }
.desktop.is-grabbing, .desktop.is-grabbing * { cursor: grabbing !important; }
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.wp-sky0 { stop-color: var(--wp-sky0); } .wp-sky1 { stop-color: var(--wp-sky1); }
.wp-stars { opacity: var(--stars); transition: opacity .6s; }
.wp-stars circle { fill: #fff; animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }

/* Slow colour drifting behind everything */
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(70px); opacity: var(--aurora-o, .55); will-change: transform;
  animation: drift 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { left: -18vmax; top: -22vmax; background: var(--aurora-1, #9cc4ff); }
.aurora i:nth-child(2) { right: -20vmax; top: 6vmax; background: var(--aurora-2, #ffcfb3); animation-duration: 32s; animation-delay: -9s; }
.aurora i:nth-child(3) { left: 22vw; bottom: -34vmax; background: var(--aurora-3, #c9bcff); animation-duration: 38s; animation-delay: -17s; }
@keyframes drift {
  33% { transform: translate(8vmax, 6vmax) scale(1.08); }
  66% { transform: translate(-6vmax, 10vmax) scale(.94); }
  100% { transform: translate(4vmax, -4vmax) scale(1.04); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aurora { --aurora-1: #2f4fd1; --aurora-2: #0f7c9c; --aurora-3: #5b2fb8; --aurora-o: .38; } }
:root[data-theme="dark"] .aurora { --aurora-1: #2f4fd1; --aurora-2: #0f7c9c; --aurora-3: #5b2fb8; --aurora-o: .38; }

/* The messy desktop, drawn by main.js */
.clutter { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.desktop__inner {
  width: min(1180px, 100% - 32px); margin: 0 auto;
  padding: clamp(84px, 13vh, 150px) 0 clamp(120px, 15vh, 170px);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.hello { width: min(100%, 1180px); }
/* The heading holds the wordmark and the sentence under it, so both are read as one. */
.hello__title > .wordmark, .hello__title > .hello__lede { display: block; width: fit-content; }
.wordmark {
  font-size: clamp(3.5rem, min(13vw, 17vh), 10.5rem); line-height: .86; font-weight: 800; letter-spacing: -.065em;
  margin-left: -.05em; white-space: nowrap;
}
/* The tight letter-spacing leaves each letter's ink up to .065em past its box on the right. Safari clips an animating
   letter to its box, so that strip would pop in as the animation ends; the padding covers it and the margin takes the
   space back, so nothing moves. */
.wordmark i { display: inline-block; padding-right: .08em; margin-right: -.08em; font-style: normal; transform-origin: 50% 90%; animation: letter-in 1s var(--ease) backwards; animation-delay: calc(var(--i) * 55ms + 80ms); }
.wordmark__dot { color: var(--accent); }
.wordmark__tld { color: var(--ink-3); }
@keyframes letter-in { from { opacity: 0; transform: translateY(.28em); filter: blur(10px); } }
.wordmark.is-in i { animation: none; cursor: default; }
.wordmark.is-in i.is-boing { animation: boing .75s var(--ease); }
.wordmark.is-in .wordmark__dot.is-boing { animation: hop .9s var(--ease); }
@keyframes boing {
  0% { transform: none; }
  25% { transform: translateY(-.1em) scale(.9, 1.12); }
  50% { transform: translateY(.02em) scale(1.1, .9); }
  72% { transform: translateY(-.02em) scale(.97, 1.03); }
  100% { transform: none; }
}
@keyframes hop {
  0% { transform: none; }
  15% { transform: scale(1.25, .75); }
  45% { transform: translateY(-.55em) scale(.9, 1.1); }
  75% { transform: translateY(0) scale(1.3, .7); }
  88% { transform: translateY(-.06em) scale(.95, 1.05); }
  100% { transform: none; }
}
.hello__lede {
  margin-top: clamp(12px, 2vh, 22px); max-width: 52ch;
  font: 600 clamp(1.15rem, 1.65vw, 1.6rem)/1.24 var(--font-display); letter-spacing: -.02em; color: var(--ink-2);
  animation: settle .9s var(--ease) backwards;
}
.hello__second { margin-top: 10px; width: fit-content; font-size: 15px; color: var(--ink-2); animation: rise-in .9s var(--ease) .65s backwards; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
/* For what's big in the first screen (the sentence under the wordmark, the app cards, the app pages' icon, sentence
   and window), which only rise. Chrome counts Largest Contentful Paint from when a fade-in finishes, so fading them in
   would make the page look a second slower to Google than it is. */
@keyframes settle { from { transform: translateY(14px); } }

/* The two apps, each with a real screenshot. */
.launch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(20px, 3.4vh, 36px); --peek: clamp(140px, 26vh, 262px); }
.launch__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 28px; background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 10px 30px rgba(10, 30, 80, .12);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .5s var(--spring), box-shadow .4s var(--ease);
  animation: settle .9s var(--ease) backwards;
}
.launch__card:nth-child(1) { animation-delay: .05s; }
.launch__card:nth-child(2) { animation-delay: .12s; }
.launch__card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .4), transparent 70%);
}
.launch__card:hover { --lift: -4px; box-shadow: inset 0 0 0 .5px var(--glass-line), 0 22px 50px rgba(10, 30, 80, .2); }
.launch__card:hover::before { opacity: 1; }
/* The top of the app's window rises out of the card and fades into it. */
.launch__shot {
  display: block; height: var(--peek); padding: 14px 16px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
}
.launch__shot img { width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(10, 30, 80, .18)); transition: transform .6s var(--spring); transform-origin: 50% 0; }
.launch__card:hover .launch__shot img { transform: translateY(-3px) scale(1.012); }
.launch__body {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px; align-items: center;
  margin-top: -18px; padding: 0 22px 20px;
}
.launch__icon { grid-row: 1 / 3; width: 56px; height: 56px; filter: drop-shadow(0 6px 10px rgba(0, 30, 90, .22)); transition: transform .5s var(--spring); }
.launch__card:hover .launch__icon { transform: rotate(-6deg) scale(1.06); }
.launch__text { display: flex; flex-direction: column; min-width: 0; font-size: 14.5px; line-height: 1.32; color: var(--ink-2); }
.launch__text b { font: 700 clamp(1.3rem, 1.9vw, 1.6rem)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--ink); margin-bottom: 2px; }
.launch__text small { margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.launch__soon {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.launch__soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 3px color-mix(in srgb, #ff9f0a 25%, transparent); }
.launch__arrow { grid-row: 1 / 3; grid-column: 3; font-size: 20px; color: var(--ink-3); transition: transform .4s var(--spring), color .2s; }
.launch__card:hover .launch__arrow { transform: translateX(4px); color: var(--ink); }
/* The line is kept even when empty: if it came and went, the hero would change height and every file would move. */
.deskhint { margin-top: 20px; min-height: 26px; display: flex; align-items: center; font-size: 14px; color: var(--ink-3); animation: rise-in .9s var(--ease) 1.1s backwards; }
.deskhint b { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--glass); color: var(--ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 .5px var(--glass-line); }
.deskhint b[hidden] { display: none; }
.deskhint b.is-bump { animation: bump .45s var(--spring); }
.deskhint .linkbtn { margin-left: 10px; }
@keyframes bump { 40% { transform: scale(1.14); } }
.no-motion .deskhint { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .launch__card::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .12), transparent 70%); } }
:root[data-theme="dark"] .launch__card::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .12), transparent 70%); }

/* ---------- App sections ---------- */
.app { position: relative; isolation: isolate; }
.app__head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; max-width: 880px; }
.app__icon { width: 112px; height: 112px; filter: drop-shadow(0 10px 18px rgba(0, 30, 90, .25)); transition: transform .5s var(--spring); }
.app__icon:hover { transform: rotate(-4deg) scale(1.04); }
.app__kicker { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
/* Only the home page's app sections: on the app pages, each heading takes its own class's size. */
.app__head h2 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.05; font-weight: 700; }
.app__lede { margin-top: 18px; font-size: clamp(17px, 1.45vw, 19px); color: var(--ink-2); max-width: 640px; }
.app__lede + .app__lede { margin-top: 12px; }
.app__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Shoo's sky */
.app--shoo { overflow-x: clip; padding: 120px 0 140px; background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 35%, var(--sky-2) 100%); }
.sky { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.sky__stars { position: absolute; inset: 0 0 50%; opacity: var(--stars); transition: opacity .6s; }
.sky__stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #dbe8ff; animation: twinkle 5s ease-in-out infinite; }
.sky__wisp {
  position: absolute; height: 2px; border-radius: 2px; opacity: calc(.7 - var(--stars) * .45);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 45%, rgba(255,255,255,.95) 60%, transparent);
  animation: wisp 14s linear infinite;
}
.sky__wisp--1 { top: 9%; width: 280px; animation-delay: -3s; }
.sky__wisp--2 { top: 17%; width: 180px; animation-duration: 19s; animation-delay: -11s; }
.sky__wisp--3 { top: 31%; width: 340px; animation-duration: 23s; animation-delay: -7s; }
@keyframes wisp { from { transform: translateX(-40vw); } to { transform: translateX(140vw); } }

/* ---------- Hold to shoo ---------- */
.playground { position: relative; margin-top: 80px; display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 0; }
.mascot { position: relative; width: 300px; aspect-ratio: 880 / 420; margin-right: -90px; z-index: 2; animation: bob 5s ease-in-out infinite; pointer-events: none; }
.mascot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mascot__cloud { filter: drop-shadow(0 12px 18px rgba(20, 70, 160, .18)); transition: transform .5s var(--spring); transform-origin: 30% 60%; }
.mascot__breath { transform-origin: 63% 55%; opacity: 0; }
.playground.is-holding .mascot__cloud { transform: scale(1.07, 1.04) translateX(-4px); transition-duration: 1.1s; transition-timing-function: ease-out; }
.playground.is-blowing .mascot__cloud { animation: blow .7s var(--ease); }
.playground.is-blowing .mascot__breath { animation: breath .9s var(--ease); }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes blow { 30% { transform: scale(.94, 1.03) translateX(-8px); } 100% { transform: none; } }
@keyframes breath { 0% { opacity: 0; transform: scaleX(.3); } 25% { opacity: 1; } 70% { opacity: 1; transform: scaleX(1.15) translateX(10px); } 100% { opacity: 0; transform: scaleX(1.25) translateX(30px); } }

.gust { position: absolute; inset: -40px 0; pointer-events: none; z-index: 3; overflow: hidden; }
.gust i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); filter: drop-shadow(0 0 2px rgba(80, 150, 255, .5)); }
.mote { position: absolute; width: 5px; height: 5px; border-radius: 1.5px; background: #fff; box-shadow: 0 0 4px rgba(80, 150, 255, .6); pointer-events: none; z-index: 4; }

.win {
  position: relative; background: var(--card); border-radius: 22px;
  box-shadow: 0 0 0 .5px var(--glass-edge), var(--shadow-lg);
}
.win__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 54px; padding: 0 18px; }
.win__bar--plain { display: flex; height: 44px; }
.win__title { font-size: 14px; font-weight: 600; }
.lights { display: inline-flex; gap: 8px; }
.lights > * { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57 center / 12px no-repeat; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.lights > :nth-child(2) { background-color: #febc2e; }
.lights > :nth-child(3) { background-color: #28c840; }
/* The real buttons get a bigger target than the dot, and show what they do while the group is pointed at, as on the Mac. */
.lights > button::after { content: ""; position: absolute; inset: -6px -4px; }
.lights > button:focus-visible { outline-offset: 2px; border-radius: 50%; }
.lights > [aria-disabled="true"] { background-color: var(--fill-2); box-shadow: inset 0 0 0 .5px var(--line); cursor: default; }
.lights:hover > [data-light="close"], .lights:focus-within > [data-light="close"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.9 3.9l4.2 4.2M8.1 3.9 3.9 8.1' stroke='%23790000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.lights:hover > [data-light="min"]:not([aria-disabled="true"]), .lights:focus-within > [data-light="min"]:not([aria-disabled="true"]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6h5.6' stroke='%23985700' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.lights:hover > [data-light="zoom"]:not([aria-disabled="true"]), .lights:focus-within > [data-light="zoom"]:not([aria-disabled="true"]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 3.4h4L3.4 7.4zM8.6 8.6h-4l4-4z' fill='%23006500'/%3E%3C/svg%3E"); }

/* Shoo's Leftovers page, drawn after LeftoversView.swift and FindingRow in Components.swift. Sizes are the app's points. */
.win--shoo { --lo: var(--shoo-leftovers); max-width: 820px; }
.win--shoo .win__bar { height: 40px; }
.lo__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 0 22px 14px; }
.lo__tile {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 26px;
  background: linear-gradient(color-mix(in srgb, var(--lo) 78%, #fff), var(--lo));
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .4), 0 2px 5px rgba(0, 70, 90, .22);
}
.lo__title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lo__title b { font: 700 24px/1.15 var(--font-display); letter-spacing: -.02em; }
.lo__title span { margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.lo__total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.lo__total b { font: 600 28px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lo__total span { margin-top: 2px; font-size: 12px; color: var(--ink-2); }

.lo { position: relative; margin: 0 14px; padding: 4px 4px 2px; }
.lo__group[hidden], .lo__row[hidden] { display: none; }
.lo__ghost { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 8px 10px; }
.lo__ghosticon {
  width: 38px; height: 38px; border-radius: 10.6px; display: grid; place-items: center; font-size: 15px; color: var(--lo);
  background: linear-gradient(color-mix(in srgb, var(--lo) 16%, transparent), color-mix(in srgb, var(--lo) 5%, transparent));
  border: 1.5px dashed color-mix(in srgb, var(--lo) 70%, transparent);
}
.lo__ghosttext { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lo__name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.lo__caption { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo__all { font-size: 12.5px; font-weight: 500; color: var(--lo); }
.lo__all:hover { text-decoration: underline; }
.lo__list { list-style: none; margin: 0 0 12px; padding: 4px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 .5px var(--line), 0 1px 3px rgba(0, 0, 0, .04); }
.win--shoo { background: linear-gradient(color-mix(in srgb, var(--bg) 92%, var(--lo)), var(--bg) 40%); }
.lo__row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 12px; position: relative; --amp: 0; cursor: default;
}
.lo__meta { display: flex; align-items: center; gap: 14px; }
.lo__row:hover { background: var(--fill); }
.lo__row.is-shivering { animation: shiver .09s linear infinite alternate; }
@keyframes shiver { from { transform: translate(calc(var(--amp) * -1px), calc(var(--amp) * .4px)) rotate(calc(var(--amp) * -.15deg)); } to { transform: translate(calc(var(--amp) * 1px), calc(var(--amp) * -.4px)) rotate(calc(var(--amp) * .15deg)); } }
/* GlyphTile: the kind of place, as a symbol on its colour. */
.lo__icon {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 15px;
  background: linear-gradient(color-mix(in srgb, var(--t) 80%, #fff), var(--t));
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .42), 0 .5px 1px rgba(0, 0, 0, .14);
}
.lo__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.32; }
.lo__text b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo__path { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo__why { display: flex; gap: 8px; min-width: 0; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.lo__why > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.lo__caution { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--ink-2); }
.lo__caution--warn { color: #f08c00; }
.lo__caution .ico { font-size: 11px; }
.lo__size { min-width: 64px; text-align: right; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* ConfidencePill: three bars for Certain, two for Likely, one for Possible. */
.conf { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--fill); font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.conf i { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.conf i b { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.conf i b:nth-child(1) { height: 6px; } .conf i b:nth-child(2) { height: 8.5px; } .conf i b:nth-child(3) { height: 11px; }
.conf--certain i b { background: #34c759; }
.conf--likely i b:nth-child(-n+2) { background: #1c94ff; }
.conf--possible i b:first-child { background: var(--ink-3); }
.lo__ghost .conf { font-size: 11.5px; }

.check {
  appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; border-radius: 4.5px; flex: none;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--fill-2), 0 .5px 1px rgba(0,0,0,.08); cursor: pointer;
  display: grid; place-items: center; transition: background-color .15s;
}
.check::after { content: ""; width: 8px; height: 4.5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .2s var(--spring); }
.check:checked { background: var(--lo, var(--accent)); box-shadow: none; }
.check:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }

.tile { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 18px; flex: none; box-shadow: inset 0 .5px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.12); }
.tile--orange { background: linear-gradient(#ffa95e, #f07b2c); }
.tile--amber { background: linear-gradient(#ffd166, #e9a23b); }
.tile--teal { background: linear-gradient(#6fd0dd, #2aa6bd); }
.tile--slate { background: linear-gradient(#a0a8bb, #6f7890); }
.tile--gray { background: linear-gradient(#a8a8ad, #7c7c82); }
.tile--green { background: linear-gradient(#5fd77a, #2fb24f); }
.tile--pink { background: linear-gradient(#ff7aa2, #e8457a); }
.tile--indigo { background: linear-gradient(#8b8cf6, #5856d6); }
.tile--blue { background: linear-gradient(#5aaaff, #1f7aea); }
/* Any other colour: Spotlight gives each app page its own tint. */
.tile--tint { background: linear-gradient(color-mix(in srgb, var(--t) 72%, #fff), var(--t)); }

.win__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; }
.linkbtn { font-size: 13px; font-weight: 500; color: var(--link); }
.linkbtn:hover { text-decoration: underline; }
.win__sel { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* ShooBar: what's selected, on a piece of glass beside the button. */
.lo__bar {
  display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--glass-strong); box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--line), 0 4px 14px rgba(0, 0, 0, .06);
}
.lo__bar[hidden] { display: none; }
.lo__div { width: 1px; height: 16px; background: var(--line); }
.lo__pick { font-size: 13px; font-weight: 500; color: var(--lo); }
.lo__pick:disabled { color: color-mix(in srgb, var(--lo) 45%, transparent); cursor: default; }
.lo__pick:not(:disabled):hover { text-decoration: underline; }

/* ShooButton: a pill of Liquid Glass tinted with the page's colour, with a ring that closes as you hold. */
.hold {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; flex: none;
  height: 56px; padding: 0 22px 0 10px; border-radius: 999px; color: #fff; text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lo) 70%, #fff), var(--lo) 55%, color-mix(in srgb, var(--lo) 88%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .08), inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 8px 22px color-mix(in srgb, var(--lo) 38%, transparent);
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  --p: 0;
}
/* Light gathering in the glass as you hold. */
.hold::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(56px, calc(var(--p) * 100%)); border-radius: inherit; background: rgba(255, 255, 255, .22); opacity: 0; }
.hold.is-holding::before { opacity: 1; }
.hold:not(.is-holding) { transition: transform .25s var(--spring), filter .2s, opacity .2s, --p .35s var(--ease); }
.hold:disabled { cursor: default; color: var(--ink-3); background: var(--fill-2); box-shadow: inset 0 0 0 .5px var(--line); }
.hold.is-holding { transform: scale(.985); }
.hold__ring { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.hold__ring svg:first-child { position: absolute; inset: 0; transform: rotate(-90deg); }
.hold__ring circle { fill: none; stroke-width: 2.5; }
.hold__track { stroke: rgba(255, 255, 255, .3); }
.hold__fill { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); }
.hold:disabled .hold__track { stroke: transparent; }
.hold__glyph { font-size: 17px; }
.hold.is-nudge .hold__glyph { animation: wiggle .5s var(--ease); }
@keyframes wiggle { 20% { transform: rotate(-12deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } }
.hold__text { position: relative; display: flex; flex-direction: column; min-width: 128px; line-height: 1.2; }
.hold__text b { font-size: 15px; font-weight: 600; }
.hold__text small { font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }

/* The toast that says what just went, with Undo. */
.toast {
  position: absolute; left: 50%; bottom: 90px; z-index: 6; translate: -50% 0;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px; white-space: nowrap;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--glass-edge), var(--shadow-md);
  animation: toast-in .4s var(--spring);
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.toast__tile { width: 32px; height: 32px; border-radius: 7.5px; display: grid; place-items: center; color: #fff; font-size: 15px; background: linear-gradient(#5fd77a, #2fb24f); }
.toast__text { display: flex; flex-direction: column; line-height: 1.25; }
.toast__text b { font-size: 13.5px; font-weight: 600; }
.toast__text span { font-size: 12px; color: var(--ink-2); }
.toast__undo { font-size: 13px; font-weight: 600; color: var(--lo); }
.toast__undo:hover { text-decoration: underline; }
.toast__x { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); font-size: 10px; }
.toast__x:hover { background: var(--fill); }
.lo__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.clear { position: absolute; inset: 120px 14px 90px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 4px; }
.clear[hidden] { display: none; }
.clear__check { width: 58px; height: 58px; margin-bottom: 8px; }
.clear__check circle { fill: color-mix(in srgb, #34c759 14%, transparent); stroke: #34c759; stroke-width: 2.5; }
.clear__check path { fill: none; stroke: #34c759; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.clear.is-on .clear__check path { animation: draw .5s .15s var(--ease) forwards; }
.clear.is-on { animation: fadein .35s var(--ease); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; transform: scale(.96); } }
.clear__title { font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.clear__sub { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.clear .btn .ico { font-size: 15px; }

.playground__hint { grid-column: 2; margin: 18px 0 0 22px; font-size: 14px; color: var(--ink-2); }
/* Without JavaScript the demo can't run, so a screenshot of the real page takes the window's place (index.html). */
html:not(.js) .win--shoo, html:not(.js) .playground__hint { display: none; }
.playground__shot img { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(20, 40, 90, .18)); }

/* ---------- Details (System Settings style) ---------- */
.details__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; font-weight: 700; }
.details { margin-top: 140px; max-width: 760px; margin-inline: auto; }
.details__title { margin-bottom: 22px; }
.group { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 16px; box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); overflow: hidden; }
.group li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 13px 16px; position: relative; }
.group li + li::before { content: ""; position: absolute; top: 0; right: 0; left: 62px; height: .5px; background: var(--line); }
.group li div { display: flex; flex-direction: column; line-height: 1.35; }
.group b { font-size: 15px; font-weight: 600; }
.group span:not(.tile) { font-size: 14px; color: var(--ink-2); }

/* ---------- Weir ---------- */
.app--weir { padding-bottom: 96px; }
/* Deep water, with a real screenshot of Flow in it. */
.deep { color: #fff; background: radial-gradient(120% 90% at 30% 70%, #0b3a8f 0%, #062466 45%, #031437 100%); padding: 120px 0 56px; }
.deep .app__kicker { color: rgba(255,255,255,.72); }
.deep .app__lede { color: rgba(255,255,255,.8); }
.deep .app__icon { filter: drop-shadow(0 14px 24px rgba(0,0,0,.4)); }
.deep__win { margin: 56px 0 0; }
.deep__shot { display: block; border-radius: 14px; transition: transform .5s var(--spring); }
.deep__shot img { width: 100%; height: auto; filter: drop-shadow(0 24px 50px rgba(0, 8, 30, .55)) drop-shadow(0 2px 6px rgba(0, 8, 30, .3)); }
.deep__shot:hover { transform: translateY(-3px); }
.deep__shot:focus-visible { outline-color: rgba(163, 238, 255, .8); outline-offset: 6px; border-radius: 16px; }
.deep__win figcaption { margin-top: 14px; text-align: center; font-size: 13px; color: rgba(255,255,255,.72); }
/* An on/off pill, such as Weir's Sound (weir.css colours it for its hero). */
.toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 13.5px; color: var(--ink-2); background: var(--fill); transition: background-color .2s, color .2s;
}
.toggle .ico { font-size: 16px; }
.toggle[aria-pressed="true"] { background: var(--accent); color: #fff; }

.fineprint { margin-top: 18px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* ---------- About ---------- */
.about { padding: 32px 0 128px; display: grid; place-items: center; }
.about__row { width: min(1120px, 100% - 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 56px 80px; }
.about__row .about__win { width: min(380px, 100%); }

/* ---------- The QA team: files on the desktop ---------- */
.team { display: grid; justify-items: center; text-align: center; }
.team__files { display: flex; gap: 26px; margin-top: 34px; }

/* A rubber stamp that lands when the team scrolls into view. */
.stamp {
  --stamp: #d93a2f;
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 6px 13px 6px 10px; border: 2px solid var(--stamp); border-radius: 9px;
  outline: 1px solid var(--stamp); outline-offset: 2px;
  color: var(--stamp); font: 800 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-5deg); opacity: .9;
}
:root[data-theme="dark"] .stamp { --stamp: #ff6b5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { --stamp: #ff6b5f; } }
.stamp__paw { width: 15px; height: 15px; fill: currentColor; }
.js .team .stamp { opacity: 0; }
.js .team.is-in .stamp { animation: stamp .5s .35s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.8); }
  55% { opacity: .95; transform: rotate(-4deg) scale(.93); }
  100% { opacity: .9; transform: rotate(-5deg) scale(1); }
}

.file { position: relative; display: grid; justify-items: center; gap: 4px; width: 148px; padding: 4px; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.file:focus-visible { outline: none; }
.file__thumb { width: 140px; height: 140px; display: grid; place-items: center; border-radius: 10px; transition: background-color .15s; }
.file__thumb img {
  width: auto; height: auto; max-width: 118px; max-height: 118px;
  border: 3px solid #fff; border-radius: 3px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 2px 3px rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.14);
  transition: transform .4s var(--spring); user-select: none; -webkit-user-drag: none;
}
.file:first-child .file__thumb img { transform: rotate(-3deg); }
.file:nth-child(2) .file__thumb img { transform: rotate(2.5deg); }
.file:hover .file__thumb img { transform: translateY(-4px) rotate(0); }
.file__name { font-size: 15px; font-weight: 600; padding: 1px 8px; border-radius: 6px; transition: background-color .15s, color .15s; }
.file__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.file__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tag); }
.file.is-selected .file__thumb, .file:focus-visible .file__thumb { background: var(--fill-2); }
.file.is-selected .file__name, .file:focus-visible .file__name { background: var(--accent); color: #fff; }

/* What each of them has to say, Messages style. Both speak once when they arrive, then again on hover. */
.file__bubble {
  position: absolute; z-index: 1; top: -18px; right: -4px; padding: 6px 11px; border-radius: 16px 16px 16px 5px;
  background: #0b84ff; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px rgba(11, 132, 255, .3);
  opacity: 0; transform: translateY(6px) scale(.6); transform-origin: 0 100%;
  transition: opacity .2s, transform .35s var(--spring);
}
.file:hover .file__bubble, .file:focus-visible .file__bubble { opacity: 1; transform: none; }
.js .team.is-in .file__bubble { animation: chat 2.6s 1s var(--ease) both; }
.js .team.is-in .file:nth-child(2) .file__bubble { animation-delay: 1.7s; }
.js .team.is-in .file:hover .file__bubble, .js .team.is-in .file:focus-visible .file__bubble { animation: none; }
@keyframes chat {
  0% { opacity: 0; transform: translateY(6px) scale(.6); }
  12%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-2px) scale(.9); }
}

/* ---------- Quick Look ---------- */
.ql { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 48px 16px 24px; background: rgba(0, 0, 0, .3); }
.ql[hidden] { display: none; }
.ql__win {
  max-width: 100%; border-radius: 16px; overflow: hidden; transform-origin: center;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--glass-edge), 0 30px 90px rgba(0, 0, 0, .4);
}
.ql__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; padding: 0 10px; font-size: 13px; }
.ql__title { font-weight: 600; }
.ql__close { justify-self: start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.ql__close::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.ql__close:hover::before { background: #ff5f57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M4.2 4.2l4.6 4.6M8.8 4.2L4.2 8.8' stroke='%23790000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ql__nav { justify-self: end; display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ql__nav button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-2); font-size: 14px; }
.ql__nav button:hover { background: var(--hover); }
.ql__nav button:first-child .ico { transform: scaleX(-1); }
.ql__img { display: block; width: auto; height: auto; max-width: min(calc(100vw - 32px), 880px); max-height: calc(100vh - 190px); max-height: calc(100svh - 190px); }
.ql__cap { display: flex; gap: 8px; align-items: baseline; justify-content: center; flex-wrap: wrap; padding: 12px 16px 14px; font-size: 14px; color: var(--ink-2); }
.ql__cap b { color: var(--ink); font-weight: 600; }
.about__win { width: min(380px, 100% - 32px); padding: 0 32px 28px; text-align: center; background: var(--card); border-radius: 22px; box-shadow: 0 0 0 .5px var(--glass-edge), var(--shadow-lg); }
.about__win .win__bar { padding: 0; margin: 0 -14px; }
.about__icon { width: 96px; height: 96px; margin: 4px auto 14px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.about h2 { font-size: 26px; font-weight: 700; }
.about__ver { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.about__facts { margin: 20px 0 0; display: grid; gap: 4px; font-size: 13px; }
.about__facts div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about__facts dt { text-align: right; font-weight: 600; }
.about__facts dd { margin: 0; text-align: left; color: var(--ink-2); }
.about__note { margin-top: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.about__note a { color: var(--link); }
.about__note a:hover { text-decoration: underline; }
.about__copy { margin-top: 18px; font-size: 11.5px; color: var(--ink-3); }

/* ---------- Footer ---------- */
/* Two rows: the name and the links, then where it's made and the legal line, each under the one above it. Phones
   stack all four. */
.foot { border-top: .5px solid var(--line); padding: 28px 0 130px; font-size: 13px; color: var(--ink-3); }
.foot__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 40px; }
.foot__mark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
a.foot__mark:hover { text-decoration: underline; }
.foot__made, .foot__legal { font-size: 12.5px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__nav a { color: var(--ink-2); }
.foot__nav a:hover, .foot__nav a[aria-current="page"] { color: var(--ink); }
.foot__nav a:hover { text-decoration: underline; }

/* ---------- The Trash ---------- */
/* It sits in the bottom-right corner, where the desktop's gust and Shoo's demo send things. Like an auto-hiding Dock,
   it slides away while you scroll down to read and comes back when you scroll up, reach the end or point at it. */
.trashcan {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--ease);
}
.trashcan.is-hidden { transform: translateY(calc(100% + 30px)); }
.trashcan > svg { width: 100%; height: 100%; padding: 4%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); user-select: none; }
.trashcan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.trashcan.is-bouncing > svg { animation: bounce .9s var(--ease); }
@keyframes bounce { 0%, 100% { transform: none; } 22% { transform: translateY(-22px); } 44% { transform: none; } 62% { transform: translateY(-9px); } 80% { transform: none; } }
.trash__papers { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .5s var(--spring); }
.trashcan.is-full .trash__papers { opacity: 1; transform: none; }

/* ---------- App pages ---------- */
.apphero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; }
.apphero--shoo { background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 45%, var(--sky-2) 100%); }
.apphero__inner {
  width: min(1180px, 100% - 32px); margin: 0 auto; padding: clamp(84px, 12vh, 130px) 0 clamp(110px, 13vh, 150px);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.apphero__icon { width: 104px; height: 104px; margin-bottom: 18px; filter: drop-shadow(0 12px 20px rgba(0, 30, 90, .28)); animation: settle .9s var(--ease) backwards; transition: transform .5s var(--spring); }
.apphero__icon:hover { transform: rotate(-6deg) scale(1.05); }
.wordmark--app { font-size: clamp(4.5rem, 13vw, 10.5rem); margin-left: -.04em; }
.apphero__lede {
  margin-top: clamp(14px, 2.4vh, 24px); max-width: 24ch;
  font: 600 clamp(1.35rem, 2.3vw, 1.9rem)/1.18 var(--font-display); letter-spacing: -.025em; color: var(--ink-2);
  animation: settle .9s var(--ease) backwards;
}
.apphero__meta { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); animation: rise-in .9s var(--ease) .6s backwards; }
.apphero .app__cta { animation: rise-in .9s var(--ease) .7s backwards; }
.apphero__stage { position: relative; animation: settle 1s var(--ease) .05s backwards; }
.apphero__note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* Shoo blowing on the disk map */
.mascot--map { position: absolute; width: 190px; left: -62px; top: -70px; margin: 0; z-index: 3; }
.apphero__stage.is-holding .mascot__cloud { transform: scale(1.08, 1.05) translateX(-4px); transition-duration: 1s; transition-timing-function: ease-out; }
.apphero__stage.is-blowing .mascot__cloud { animation: blow .7s var(--ease); }
.apphero__stage.is-blowing .mascot__breath { animation: breath .9s var(--ease); }

/* Below the hero */
.apppage { padding: 110px 0 120px; }
.apppage .details { margin-top: 130px; }
.pagehead { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; font-weight: 700; margin-bottom: 28px; }
.outro {
  margin: 130px auto 0; max-width: 760px; padding: 40px clamp(20px, 5vw, 48px); text-align: center;
  background: var(--card); border-radius: 28px; box-shadow: 0 0 0 .5px var(--line), var(--shadow-md);
  display: grid; justify-items: center; gap: 14px;
}
.outro img { filter: drop-shadow(0 8px 14px rgba(0, 30, 90, .22)); }
.outro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
.outro p { color: var(--ink-2); max-width: 46ch; }
.outro__facts { display: grid; gap: 6px; margin: 6px 0 10px; font-size: 14.5px; }
.outro__facts div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.outro__facts dt { text-align: right; font-weight: 600; }
.outro__facts dd { margin: 0; text-align: left; color: var(--ink-2); }
.apppage .fineprint { margin-top: 28px; max-width: 760px; margin-inline: auto; text-wrap: balance; }
/* A sentence to a line where there's room, rather than a line break in the middle of one. */
.apppage .fineprint > span { display: inline-block; }

/* The home page's Weir teaser, and the box that sends a domain across Weir's map */
.btn--ondeep { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.btn--ondeep:hover { background: rgba(255, 255, 255, .2); }
.tryq { margin-top: 30px; max-width: 470px; animation: rise-in .9s var(--ease) .85s backwards; }
.tryq__label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.tryq__row { display: flex; gap: 8px; }
.tryq input {
  flex: 1; min-width: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  font: 500 15px var(--mono); color: #fff; background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.tryq input::placeholder { color: rgba(255, 255, 255, .4); }
.tryq input:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(163, 238, 255, .8); }
.tryq .btn { height: 44px; }
.tryq__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tryq__chips button {
  height: 28px; padding: 0 12px; border-radius: 999px; font: 500 12.5px var(--mono); color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); transition: background-color .15s, color .15s;
}
.tryq__chips button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.tryq__out { min-height: 1.5em; margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.apppage--weir { padding-top: 90px; }

/* ---------- Explaining the apps: how it works, under the hood, questions ---------- */
.pagelede { margin: -12px 0 26px; max-width: 64ch; font-size: clamp(16px, 1.35vw, 18px); color: var(--ink-2); }
.apppage .explainer, .apppage .specs, .apppage .faq { margin-top: 130px; }
/* From The small things (or Your key, your settings) down to the outro, an app page is one centred column, as wide as
   .details, so the questions and specs read at a comfortable length and line up with what's above and below them. */
.apppage .faq, .apppage .specs { max-width: 760px; margin-inline: auto; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps li { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
.steps__n { width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 15px/1 var(--font-display); }
.steps b { font-size: 17px; font-weight: 600; }
.steps li > span:not(.steps__n) { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.specs__list { margin: 0; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
.specs__list > div { display: grid; grid-template-columns: minmax(140px, .3fr) minmax(0, 1fr); gap: 20px; padding: 14px 20px; }
.specs__list > div + div { border-top: .5px solid var(--line); }
.specs__list dt { font-size: 15px; font-weight: 600; }
.specs__list dd { margin: 0; font-size: 15px; color: var(--ink-2); }
.specs__list code, .faq__list code { font: .875em/1.4 var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--fill); color: var(--ink); }
.faq__list { border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
.faq__list details + details { border-top: .5px solid var(--line); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; transition: background-color .15s; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.faq__list details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__list summary:hover { background: var(--fill); }
.faq__list details > div { padding: 0 20px 18px; font-size: 16px; color: var(--ink-2); }
.faq__list details > div p + p { margin-top: 10px; }
.faq__list details > div p { max-width: 70ch; }
.faq__list a { color: var(--link); }
.faq__list a:hover { text-decoration: underline; }
/* Headings that hold the big wordmark and the sentence under it look the same as when they were separate. */
.apphero__title > .wordmark, .apphero__title > .apphero__lede { display: block; }
.apppage .explainer--first { margin-top: 0; }
.explainer + .pagehead { margin-top: 130px; }
@media (max-width: 760px) {
  .explainer + .pagehead { margin-top: 90px; }
  .steps { grid-template-columns: 1fr; }
  .specs__list > div { grid-template-columns: 1fr; gap: 2px; }
  .apppage .explainer, .apppage .specs, .apppage .faq { margin-top: 90px; }
}

/* ---------- App tours ---------- */
/* A Mac window made from an app's real screenshots (tours.js). The sidebar is drawn here, so it can be
   clicked and read, and the content area is the screenshot moved left past its own sidebar. Inside the window,
   sizes are in the app's points (--u), so the drawn sidebar keeps the screenshot's proportions at any width. */
:root {
  --tour-side: #eeedeb; --tour-ink: rgba(0, 0, 0, .86); --tour-ink-2: rgba(0, 0, 0, .42); --tour-ink-3: rgba(0, 0, 0, .34);
  --tour-sel: rgba(0, 0, 0, .095); --tour-hover: rgba(0, 0, 0, .04);
  --tour-glass: rgba(255, 255, 255, .8); --tour-glass-line: rgba(255, 255, 255, .9); --tour-glass-edge: rgba(0, 0, 0, .07);
  --tour-rim: rgba(255, 255, 255, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tour-side: #302722; --tour-ink: rgba(255, 255, 255, .92); --tour-ink-2: rgba(255, 255, 255, .42); --tour-ink-3: rgba(255, 255, 255, .3);
    --tour-sel: rgba(255, 255, 255, .13); --tour-hover: rgba(255, 255, 255, .05);
    --tour-glass: rgba(255, 255, 255, .06); --tour-glass-line: rgba(255, 255, 255, .1); --tour-glass-edge: rgba(0, 0, 0, .3);
    --tour-rim: rgba(255, 255, 255, .14);
  }
}
:root[data-theme="dark"] {
  --tour-side: #302722; --tour-ink: rgba(255, 255, 255, .92); --tour-ink-2: rgba(255, 255, 255, .42); --tour-ink-3: rgba(255, 255, 255, .3);
  --tour-sel: rgba(255, 255, 255, .13); --tour-hover: rgba(255, 255, 255, .05);
  --tour-glass: rgba(255, 255, 255, .06); --tour-glass-line: rgba(255, 255, 255, .1); --tour-glass-edge: rgba(0, 0, 0, .3);
  --tour-rim: rgba(255, 255, 255, .14);
}
/* The page sets the screenshot's size and crop on the element; these are only fallbacks. */
.tour {
  --w: 1880; --h: 1200; --side: 320; --side-real: var(--side); --pt: 1; --badge-end: 10; --ico: 19.6; --tint: var(--accent);
  --glass-x: calc(var(--side-real) - 10); --glass-w: 6; --glass-y: 0; --glass-h: var(--h);
}
.tour [data-shot] { display: none; }
/* Wider than the text column on big screens, so the screenshot can be read, but short enough that the window and the
   top of its caption fit on one screen together: clicking a row changes words you can see. Never so small that the
   drawn sidebar's text drops under about 9.5 px (13.3 pt at --pt), even if the caption then starts lower. */
.js .tour {
  --tour-min: min(1px * .714 * var(--w) / var(--pt), 100vw - 32px);
  --tour-w: max(min(1240px, 100vw - 32px, (100vh - 260px) * var(--w) / var(--h)), var(--tour-min));
  --tour-w: max(min(1240px, 100vw - 32px, (100svh - 260px) * var(--w) / var(--h)), var(--tour-min));
  width: var(--tour-w); margin-inline: calc((100% - var(--tour-w)) / 2);
}
html:not(.js) .tour__top, html:not(.js) .tour__bottom { display: none; }
html:not(.js) .tour__head { margin: 26px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
html:not(.js) .tour article { margin-top: 14px; }
html:not(.js) .tour article p { color: var(--ink-2); }
html:not(.js) .tour article p:not(.tour__sub) + p { margin-top: 8px; }
.tour__win {
  position: relative; isolation: isolate; container-type: inline-size; overflow: hidden;
  display: grid; grid-template-columns: calc(100% * var(--side) / var(--w)) minmax(0, 1fr); aspect-ratio: var(--w) / var(--h);
  /* Window corners: 24 pt, as in the screenshots. */
  border-radius: calc(100% * 24 * var(--pt) / var(--w)) / calc(100% * 24 * var(--pt) / var(--h));
  background: var(--tour-side); box-shadow: 0 0 0 .5px var(--glass-edge), var(--shadow-lg);
}
/* The window's bright rim, over both halves, so it shows on a dark page too. */
.tour__win::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--tour-rim); pointer-events: none; }
.tour__side {
  --px: calc(100cqw / var(--w)); --u: calc(var(--px) * var(--pt));
  position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  /* The crop is a little wider than the app's sidebar; this keeps everything in it where the app has it. */
  padding-right: calc((var(--side) - var(--side-real)) * var(--px));
  font-size: calc(13.3 * var(--u)); line-height: 1.2; color: var(--tour-ink);
  -webkit-user-select: none; user-select: none;
}
/* The sidebar's vibrancy: a thin empty column of the screenshot's own sidebar, just inside its edge, stretched across
   this one. Its colour follows each screen from top to bottom (the map under Flow, the glow under Wrapped, Shoo's sky)
   and the wallpaper of the Mac it was taken on. --glass-x/-y/-w/-h pick another stretch if a screen needs it. */
.tour__glass {
  --sx: calc(100cqw * var(--side) / var(--w) / var(--glass-w)); --sy: calc(100cqw * var(--h) / var(--w) / var(--glass-h));
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tour-side) var(--shot-bg, none) no-repeat;
  background-size: calc(var(--w) * var(--sx)) calc(var(--h) * var(--sy));
  background-position: calc(var(--glass-x) * var(--sx) * -1) calc(var(--glass-y) * var(--sy) * -1);
}
.tour__bar { position: relative; flex: none; height: calc(52 * var(--u)); }
.tour__bar .lights { position: absolute; left: calc(18.4 * var(--u)); top: calc(18.4 * var(--u)); gap: calc(8.5 * var(--u)); }
.tour__bar .lights > * { width: calc(14.6 * var(--u)); height: calc(14.6 * var(--u)); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .12); }
.tour__toggle {
  position: absolute; right: calc(8.2 * var(--u)); top: calc(8.2 * var(--u)); width: calc(35 * var(--u)); height: calc(35 * var(--u));
  display: grid; place-items: center; border-radius: 50%; background: var(--tour-glass); color: var(--tour-ink);
  box-shadow: inset 0 0 0 .5px var(--tour-glass-line), 0 0 0 .5px var(--tour-glass-edge), 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .08);
}
.tour__toggle .ico { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
.tour__top { flex: none; padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(8.6 * var(--u)); }
.tour__bottom { flex: none; margin-top: auto; padding: calc(10 * var(--u)); }
.tour__list { flex: none; display: flex; flex-direction: column; padding: 0 calc(10 * var(--u)); }
.tour__head {
  height: calc(18.6 * var(--u)); margin-top: calc(12.5 * var(--u)); padding-left: calc(4.7 * var(--u));
  font-size: calc(11.3 * var(--u)); font-weight: 600; line-height: calc(18.6 * var(--u)); color: var(--tour-ink-3);
}
.tour__head:first-child { margin-top: 0; }
.tour__tab {
  position: relative; display: grid; grid-template-columns: calc(37.2 * var(--u)) minmax(0, 1fr) auto; align-items: center;
  height: calc(32.2 * var(--u)); border-radius: calc(6.6 * var(--u)); text-align: left; white-space: nowrap; color: inherit;
}
.tour__tab:hover { background: var(--tour-hover); }
.tour__tab[aria-selected="true"] { background: var(--tour-sel); font-weight: 600; }
.tour__tab:focus-visible { outline-offset: -2px; border-radius: calc(6.6 * var(--u)); }
/* SF Symbols share one 76-unit box, and the few wider ones say how much wider (--k), so all draw at one point size. */
.tour__tab .ico { justify-self: center; width: calc(var(--ico) * var(--k, 1) * var(--u)); height: calc(var(--ico) * var(--k, 1) * var(--u)); color: var(--tint); }
.tour__tab .ico.is-bounce { animation: tour-bounce .5s var(--spring); }
@keyframes tour-bounce { 35% { transform: scale(.8); } 70% { transform: scale(1.12); } }
.tour__name { margin-left: calc(-1 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.tour__badge { margin-right: calc(var(--badge-end) * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--tour-ink-2); font-variant-numeric: tabular-nums; }
.tour__view { position: relative; min-width: 0; overflow: hidden; container-type: inline-size; background: var(--card); }
.tour__zoom { position: absolute; inset: 0; display: block; width: 100%; cursor: zoom-in; }
.tour__zoom:focus-visible { outline-offset: -4px; border-radius: 4px; }
/* A hint that the screenshot opens bigger: always on touch screens, on hover elsewhere. */
.tour__expand {
  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--ink); background: var(--glass-strong); box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--glass-edge), 0 2px 8px rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transform: scale(.9); transition: opacity .2s, transform .25s var(--spring);
}
.tour__expand .ico { width: 15px; height: 15px; stroke-width: 2; }
.tour__zoom:hover .tour__expand, .tour__zoom:focus-visible .tour__expand { opacity: 1; transform: none; }
@media (hover: none) { .tour__expand { opacity: 1; transform: none; } }
.tour__img {
  position: absolute; top: 0; max-width: none; height: auto;
  left: calc(-100cqw * var(--side) / (var(--w) - var(--side))); width: calc(100cqw * var(--w) / (var(--w) - var(--side)));
}
.tour__img:not([src]) { visibility: hidden; }
/* The caption lines up with the screenshot. All the captions sit in one cell, hidden but for the current one, so the section never changes height. */
.tour__cap { margin-top: 22px; padding-left: calc(100% * var(--side) / var(--w) + 14px); }
.tour__stack { display: grid; }
.tour__stack > * { grid-area: 1 / 1; min-width: 0; }
.tour__sizer { visibility: hidden; }
.tour__copy h3, .tour__copy .tour__sub { display: inline; }
.tour__copy h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; }
.tour__copy .tour__sub { margin-left: .5em; font-size: 15.5px; color: var(--ink-3); }
.tour__copy > p:not(.tour__sub), .tour__copy > ul { margin-top: 8px; max-width: 68ch; color: var(--ink-2); }
.tour__copy > ul { padding-left: 1.2em; }
.tour__alts { display: flex; margin-top: 16px; }
.tour__alts > span { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill-2); box-shadow: inset 0 0 0 .5px var(--line); }
.tour__alts button { height: 28px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: background-color .2s, color .2s; }
.tour__alts button:hover { color: var(--ink); }
.tour__alts button[aria-pressed="true"] { background: var(--bg-raised); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px var(--line); }
:root[data-theme="dark"] .tour__alts button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour__alts button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); } }
.tour__alts.is-none { display: none; }
/* Full size: the whole window, its own sidebar included, in a Quick Look window. On phones it can be panned. */
.tour-lb { padding: 40px 16px 20px; }
.tour-lb .ql__win { max-width: min(100%, 1640px); }
.tour-lb__pan { max-width: 100%; overflow: auto; overscroll-behavior: contain; }
.tour-lb .ql__img { width: auto; max-width: min(calc(100vw - 32px), 1600px); max-height: calc(100vh - 140px); max-height: calc(100svh - 140px); }
/* Below 1000 px the drawn sidebar would be too small to read, so it turns into chips above the screenshot. */
@media (max-width: 1000px) {
  .js .tour { width: auto; margin-inline: 0; }
  .tour__win { display: block; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .tour__win::after { content: none; }
  .tour__view::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--tour-rim); pointer-events: none; }
  .tour__side { font-size: 14px; line-height: 1.2; color: var(--ink); overflow: visible; }
  .tour__glass, .tour__bar, .tour__top, .tour__bottom { display: none; }
  .tour__list { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; }
  .tour__head { flex-basis: 100%; height: auto; margin: 8px 0 -1px; padding: 0 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
  .tour__head:first-child { margin-top: 0; }
  .tour__tab { display: inline-flex; gap: 7px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--fill); }
  .tour__tab:hover { background: var(--fill-2); }
  .tour__tab[aria-selected="true"] { background: var(--bg-raised); box-shadow: 0 0 0 .5px var(--line), 0 1px 3px rgba(0, 0, 0, .12); }
  :root[data-theme="dark"] .tour__tab[aria-selected="true"] { background: rgba(255, 255, 255, .16); }
  .tour__tab:focus-visible { outline-offset: 2px; border-radius: 999px; }
  .tour__tab .ico { width: calc(18px * var(--k, 1)); height: calc(18px * var(--k, 1)); margin: 0 -2px; }
  .tour__badge { margin: 0 0 0 1px; font-size: 12px; }
  .tour__view { margin-top: 18px; aspect-ratio: calc(var(--w) - var(--side)) / var(--h); border-radius: 14px; box-shadow: 0 0 0 .5px var(--glass-edge), var(--shadow-md); }
  .tour__cap { margin-top: 18px; padding-left: 0; }
}
@media (max-width: 760px) {
  .tour__copy .tour__sub { display: block; margin: 2px 0 0; }
  .tour-lb { padding: 34px 8px 12px; }
  .tour-lb__pan { max-height: calc(100vh - 110px); max-height: calc(100svh - 110px); }
  .tour-lb .ql__img { width: 940px; max-width: none; max-height: none; }
}
@media (max-width: 1000px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour__tab[aria-selected="true"] { background: rgba(255, 255, 255, .16); } }

/* ---------- Windows that move, close and minimise ---------- */
[data-win] { position: relative; }
[data-win].is-dragging { box-shadow: 0 0 0 .5px var(--glass-edge), 0 40px 100px rgba(10, 20, 50, .3); }
[data-win].is-away { visibility: hidden; }
/* What's left where a window was. The window is hidden, so this opts back in to being seen. */
.win__ghost { display: none; }
.win__ghost.is-on {
  visibility: visible; position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center;
  border-radius: inherit; border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  font-size: 14px; color: var(--ink-2);
  animation: fadein .4s var(--ease);
}
.win:fullscreen { width: 100%; height: 100%; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; overflow: auto; translate: none; }
.win:fullscreen::backdrop { background: var(--bg); }
.win--shoo:fullscreen { padding: 3vh max(16px, calc(50% - 440px)); justify-content: center; }

/* ---------- Notifications ---------- */
.notes { position: fixed; top: 42px; right: 12px; z-index: 70; width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.note {
  pointer-events: auto; position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 11px 13px 11px 12px; border-radius: 20px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--glass-edge), 0 10px 34px rgba(0, 0, 0, .18);
  cursor: default; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.note__icon { width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }
.note__text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.32; }
.note__text b { font-weight: 600; }
.note__text span { color: var(--ink-2); }
.note__side { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
.note__time { font-size: 12px; color: var(--ink-3); }
.note__act { height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--fill-2); white-space: nowrap; transition: background-color .15s; }
.note__act:hover { background: var(--hover); }
.note__close {
  position: absolute; left: -7px; top: -7px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 0 0 .5px var(--glass-edge), 0 1px 4px rgba(0, 0, 0, .15);
  opacity: 0; transition: opacity .15s;
}
.note__close svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.note:hover .note__close, .note__close:focus-visible { opacity: 1; }
@media (hover: none) { .note__close { opacity: 1; } }

/* ---------- The Trash window ---------- */
.trashwin {
  position: fixed; z-index: 30; left: 0; right: 0; top: max(64px, 13vh); margin-inline: auto;
  width: min(580px, calc(100vw - 24px)); max-height: min(500px, calc(100vh - 190px));
  display: flex; flex-direction: column; overflow: hidden;
}
.trashwin[hidden] { display: none; }
.trashwin .win__bar { flex: none; grid-template-columns: 1fr auto 1fr; height: 52px; }
.trashwin .win__title { justify-self: center; display: inline-flex; align-items: center; gap: 7px; }
.trashwin .win__title .ico { font-size: 16px; color: var(--ink-3); }
.trashwin__tools { justify-self: end; }
.trashwin__cols, .trashwin__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 84px 64px 70px; gap: 12px; align-items: center; }
.trashwin__cols { flex: none; padding: 0 22px 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); border-bottom: .5px solid var(--line); }
.trashwin__cols span:first-child { grid-column: 2; }
.trashwin__cols span:last-child { text-align: right; }
.trashwin__list { list-style: none; margin: 0; padding: 6px 10px; overflow-y: auto; flex: 1; min-height: 0; }
.trashwin__list li { padding: 6px 12px; border-radius: 9px; font-size: 13.5px; }
.trashwin__list li:nth-child(even) { background: var(--fill); }
.trashwin__list li:hover { background: var(--fill-2); }
.trashwin__icon { display: grid; place-items: center; width: 28px; height: 28px; }
.trashwin__icon img { width: 28px; height: 28px; }
.trashwin__icon .tile { width: 24px; height: 24px; border-radius: 6px; font-size: 14px; }
.trashwin__swatch { width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--c) 28%, var(--card)); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 .5px color-mix(in srgb, var(--c) 50%, transparent); }
.trashwin__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trashwin__from { font-size: 13px; color: var(--ink-2); }
.trashwin__size { font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.trashwin__list .linkbtn { justify-self: end; opacity: 0; transition: opacity .12s; }
.trashwin__list li:hover .linkbtn, .trashwin__list .linkbtn:focus-visible { opacity: 1; }
@media (hover: none) { .trashwin__list .linkbtn { opacity: 1; } }
.trashwin__empty { display: none; }
.trashwin.is-empty .trashwin__list, .trashwin.is-empty .trashwin__cols { display: none; }
.trashwin.is-empty .trashwin__empty { display: grid; justify-items: center; gap: 6px; padding: 34px 28px 32px; text-align: center; font-size: 14px; color: var(--ink-2); }
.trashwin__empty .ico { font-size: 46px; stroke-width: 1.1; color: var(--ink-3); margin-bottom: 6px; }
.trashwin__empty b { font-size: 16px; font-weight: 600; color: var(--ink); }
.trashwin__empty span { max-width: 34ch; }
.trashwin__foot { flex: none; padding: 9px 16px 11px; border-top: .5px solid var(--line); font-size: 12px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .trashwin__cols, .trashwin__list li { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .trashwin__from, .trashwin__cols span:nth-child(2) { display: none; }
  .trashwin__list .linkbtn { font-size: 12.5px; }
}

/* ---------- Spotlight ---------- */
.spot { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 17vh 16px 16px; }
.spot[hidden] { display: none; }
.spot__box {
  width: min(660px, 100%); border-radius: 26px; overflow: hidden;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(40px) saturate(1.9); backdrop-filter: blur(40px) saturate(1.9);
  box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--glass-edge), 0 24px 70px rgba(0, 0, 0, .28);
  animation: spot-in .2s var(--ease);
}
@keyframes spot-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.spot__field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px 0 20px; }
.spot__field > .ico { font-size: 22px; stroke-width: 2.1; color: var(--ink-3); }
.spot__field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--ink); font: 400 22px/1 var(--font-display); letter-spacing: -.015em; }
.spot__field input::placeholder { color: var(--ink-3); }
.spot__esc { flex: none; height: 22px; font-size: 11px; color: var(--ink-3); }
.spot__list { list-style: none; margin: 0; padding: 2px 8px 8px; max-height: min(440px, 58vh); overflow-y: auto; border-top: .5px solid var(--line); scrollbar-width: thin; }
.spot__group { padding: 11px 12px 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.spot__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 10px; cursor: default; }
.spot__item[aria-selected="true"] { background: var(--accent); color: #fff; }
.spot__item[aria-selected="true"] .spot__text span { color: rgba(255, 255, 255, .82); }
.spot__icon { display: grid; place-items: center; width: 30px; height: 30px; }
.spot__icon img { width: 30px; height: 30px; }
.spot__icon img.is-round { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .25); }
.spot__icon .tile { width: 26px; height: 26px; border-radius: 7px; font-size: 15px; }
.spot__glyph { font: 600 17px/1 var(--font-display); }
.spot__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.spot__text b { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot__text span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot__none { padding: 20px 12px 14px; text-align: center; font-size: 14px; color: var(--ink-3); }
.extra-search { width: 15px; height: 15px; stroke-width: 2.2; }
@media (max-width: 760px) {
  .spot { padding-top: 46px; }
  .spot__field { height: 54px; }
  .spot__field input { font-size: 19px; }
  .spot__list { max-height: min(440px, 50vh); }
}
@media (hover: none) { .spot__esc { display: none; } }

/* ---------- Screen saver ---------- */
.saver { position: fixed; inset: 0; z-index: 100; color: #fff; cursor: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(120% 90% at 50% 64%, #0f2152 0%, #050b1f 55%, #010208 100%); }
.saver.is-on { opacity: 1; }
.saver[hidden] { display: none; }
.saver canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.saver__clock { position: absolute; left: 0; right: 0; top: 10vh; display: grid; justify-items: center; text-align: center; pointer-events: none; text-shadow: 0 2px 40px rgba(70, 120, 255, .3); }
.saver__clock span { font: 600 clamp(1.1rem, 2vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -.01em; color: rgba(255, 255, 255, .8); }
.saver__clock time { font: 700 clamp(5rem, 17vw, 12.5rem)/.95 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .94); }
.saver__mark { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.saver__mark .logo { width: 16px; height: 16px; }

/* ---------- Not found ---------- */
.alert {
  width: min(300px, 100%); margin: auto; padding: 24px 20px 18px; text-align: center;
  display: grid; justify-items: center; gap: 6px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8);
  border-radius: 26px; box-shadow: inset 0 0 0 .5px var(--glass-line), 0 0 0 .5px var(--glass-edge), 0 30px 80px rgba(0, 10, 40, .3);
  animation: alert-in .55s var(--spring) .25s backwards;
}
.alert img { width: 64px; height: 64px; margin-bottom: 6px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.alert h1 { font-size: 16px; font-weight: 700; letter-spacing: -.012em; }
.alert p { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.alert p .mono { font-size: 12px; color: var(--ink); word-break: break-all; }
.alert__btns { display: grid; gap: 8px; width: 100%; margin-top: 14px; }
.alert__btns .btn { justify-content: center; height: 34px; font-size: 14px; }
@keyframes alert-in { from { opacity: 0; transform: scale(.88); } }
.desktop__inner--alert { align-items: center; }

/* ---------- Plain pages: privacy and support ---------- */
/* A column of text with its sections listed beside it, kept in view while you read. Below 1000 px the list turns
   into a row of links between the heading and the text. */
.doc {
  display: grid; grid-template-columns: minmax(0, 720px) 200px; grid-template-areas: "head head" "body toc";
  justify-content: space-between; column-gap: 56px; align-items: start;
  padding: clamp(96px, 13vh, 140px) 0 100px;
}
.doc__head { grid-area: head; max-width: 720px; margin-bottom: 64px; }
.doc__icon { width: 72px; height: 72px; margin-bottom: 18px; filter: drop-shadow(0 8px 14px rgba(0, 30, 90, .22)); }
.doc__head h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.04; font-weight: 700; }
.doc__lede { margin-top: 16px; max-width: 60ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.doc__checked { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.doc__toc { grid-area: toc; position: sticky; top: 64px; }
.doc__toc p { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.doc__toc ul { list-style: none; margin: 10px 0 0; padding: 0; border-left: 1px solid var(--line); }
.doc__toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.doc__toc a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.doc__body { grid-area: body; min-width: 0; }
.doc__sec { scroll-margin-top: 24px; }
.doc__sec + .doc__sec { margin-top: 80px; }
.doc__title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.12; font-weight: 700; }
.doc__title > img { width: 38px; height: 38px; flex: none; }
.doc__title > .tile { width: 38px; height: 38px; border-radius: 9px; font-size: 21px; }
.doc__body h3 { margin: 34px 0 8px; font-size: 18.5px; font-weight: 650; letter-spacing: -.02em; }
.doc__body p { max-width: 68ch; color: var(--ink-2); }
.doc__body p + p { margin-top: 12px; }
.doc__body a:not(.btn) { color: var(--link); }
.doc__body a:not(.btn):hover { text-decoration: underline; }
.doc__body code { font: 14px/1.4 var(--mono); letter-spacing: 0; padding: 1px 5px; border-radius: 5px; background: var(--fill); color: var(--ink); overflow-wrap: anywhere; }
.doc__body .specs__list { margin: 20px 0; }
.doc__body .specs__list dd p { color: inherit; }
.doc__body .specs__list dd p + p { margin-top: 8px; }
.doc__body .specs__list a { color: var(--link); }
/* Numbered steps, on one card */
.doc__steps { list-style: none; counter-reset: step; margin: 20px 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
.doc__steps li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 14px 20px; font-size: 15.5px; color: var(--ink-2); }
.doc__steps li + li { border-top: .5px solid var(--line); }
.doc__steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 13px/1 var(--font-display); }
.doc__steps b { font-weight: 600; color: var(--ink); }
.doc__body .btn { margin-top: 22px; }
.doc__foot { margin-top: 80px; padding-top: 22px; border-top: .5px solid var(--line); font-size: 14.5px; }
@media (max-width: 1000px) {
  .doc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "body"; }
  .doc__head { margin-bottom: 24px; }
  .doc__toc { position: static; margin-bottom: 56px; }
  .doc__toc p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .doc__toc ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; border: 0; }
  .doc__toc a { margin: 0; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--fill); color: var(--ink); }
  .doc__toc a:hover { background: var(--fill-2); }
}
@media (max-width: 760px) {
  .doc__sec + .doc__sec { margin-top: 64px; }
  .doc__steps li { padding: 14px 16px; }
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .apphero__inner { grid-template-columns: 1fr; }
  .apphero__text { max-width: 640px; }
  /* Stacked, the cloud floats over the window's far corner, clear of the buttons above it. */
  .mascot--map { width: 140px; left: auto; right: -14px; top: -58px; }
  /* One column, so the Leftovers window gets the full width and its reasons can be read. */
  .playground { grid-template-columns: 1fr; }
  .mascot { width: 200px; margin: 0 0 6px -6px; }
  .playground__hint { grid-column: 1; margin-left: 4px; }
}
@media (max-width: 760px) {
  .apphero__inner { grid-template-columns: 1fr; padding: 80px 0 120px; gap: 56px; }
  .apphero__icon { width: 76px; height: 76px; margin-bottom: 12px; }
  .wordmark--app { font-size: clamp(4.2rem, 26vw, 7rem); }
  .apppage { padding: 80px 0 100px; }
  .apppage .details, .outro { margin-top: 90px; }
  .outro__facts div { grid-template-columns: 1fr; gap: 0; }
  .outro__facts dt, .outro__facts dd { text-align: center; }
  body { font-size: 16px; }
  .hide-sm { display: none !important; }
  .desktop__inner { padding: 88px 0 130px; justify-content: flex-start; }
  .hello__lede { max-width: 34ch; font-size: clamp(1.1rem, 4.6vw, 1.3rem); }
  .launch { grid-template-columns: 1fr; gap: 12px; --peek: clamp(130px, 44vw, 210px); }
  .launch__card { border-radius: 24px; }
  .launch__shot { padding: 12px 12px 0; }
  .launch__body { column-gap: 14px; row-gap: 6px; padding: 0 18px 16px; }
  .launch__icon { width: 48px; height: 48px; }
  .app--shoo { padding: 90px 0 100px; }
  .app--weir { padding-bottom: 72px; }
  .about { padding: 24px 0 104px; }
  .app__head { grid-template-columns: 1fr; gap: 18px; }
  .app__icon { width: 84px; height: 84px; }
  .playground { margin-top: 50px; }
  .lo__head { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 0 14px 12px; }
  .lo__tile { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
  .lo__title b { font-size: 20px; }
  .lo__title span { font-size: 12.5px; }
  .lo__total { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 6px; margin-top: 4px; }
  .lo__total b { font-size: 22px; }
  .lo { margin: 0 8px; padding: 2px; }
  .lo__ghost { padding: 6px 6px 8px; gap: 10px; }
  .lo__ghosticon { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
  .lo__name { font-size: 15px; }
  .lo__row { grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; padding: 8px 8px; }
  .lo__meta { grid-column: 3; justify-self: start; }
  /* The reason is what says why a file can go, so it wraps rather than being cut short. */
  .lo__why { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .lo__why > span:first-child { overflow: visible; }
  .win__foot { flex-direction: column-reverse; align-items: stretch; padding: 10px 12px 14px; }
  .lo__bar { justify-content: center; }
  .hold { justify-content: center; }
  .toast { bottom: 150px; white-space: normal; width: max-content; max-width: calc(100% - 24px); }
  .clear { inset: 110px 14px 140px; }
  .menu__panel { position: fixed; top: 38px; left: 8px; max-width: calc(100vw - 16px); }
  .menu--right > .menu__panel { left: auto; right: 8px; }
  .popover { width: min(290px, calc(100vw - 16px)); }
  .wpop { width: min(340px, calc(100vw - 16px)); }
  .spop { width: min(300px, calc(100vw - 16px)); }
  .details { margin-top: 90px; }
  /* Rows run to several lines here, so each icon sits beside its row's title rather than halfway down. A one-line row
     still centres on its icon. */
  .group li { align-items: start; }
  .group li > div { min-height: 32px; justify-content: center; }
  .deep { padding-top: 90px; }
  .deep__win { margin-top: 40px; }
  .foot__inner { grid-template-columns: minmax(0, 1fr); }
  .trashcan { width: 50px; height: 50px; }
}
@media (max-width: 420px) {
  .hide-xs { display: none !important; }
  .menubar { font-size: 13px; padding: 0 4px; }
}
/* On touch screens the menu bar is as tall as a fingertip, and so is everything in it. */
@media (pointer: coarse) {
  .menubar { height: 44px; }
  .menu__title { position: relative; height: 36px; min-width: 36px; justify-content: center; }
  .menu__title::after { content: ""; position: absolute; inset: -4px 0; }
  .menu__panel { top: 41px; }
  .notes { top: 52px; }
  html { scroll-padding-top: 56px; }
}
@media (pointer: coarse) and (max-width: 760px) {
  .menu__panel { top: 48px; }
}
@media (hover: none) { .hide-touch { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { transform: none; }
  .sky__wisp { display: none; }
}