/* Pomodoro site: shared styles for every page.
   The site is drawn like a Mac desktop: a still wallpaper, a menu bar on top,
   and on the home page a live Liquid Glass timer floating over everything. */

:root {
  --coral: #FF9466;            /* focus, the top dot of the icon */
  --blue: #8FB6FF;             /* breaks, the bottom dot */
  --midnight: #2A3557;         /* the icon's background, top */
  --midnight-deep: #0E1326;    /* the icon's background, bottom */

  --page: #EEF1F8;
  --ink: #161A2B;
  --ink-2: #4D556B;
  --line: rgb(22 26 43 / 0.12);
  --menubar: rgb(246 247 251 / 0.6);
  --popover: rgb(246 247 251 / 0.78);
  --control: #FFFFFF;
  --control-track: rgb(22 26 43 / 0.08);
  --focus-ring: #3E6FD8;
  --wall:
    radial-gradient(48vmax 40vmax at 88% 8%, rgb(255 148 102 / 0.42), transparent 70%),
    radial-gradient(52vmax 44vmax at 4% 100%, rgb(143 182 255 / 0.5), transparent 72%),
    linear-gradient(180deg, #E3E8F5 0%, #F1EEF2 100%);

  --font-round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --wide: 1200px;
  --column: 640px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0E1326;
    --ink: #EEF1F8;
    --ink-2: #A9B0C6;
    --line: rgb(238 241 248 / 0.13);
    --menubar: rgb(20 26 48 / 0.5);
    --popover: rgb(30 36 60 / 0.72);
    --control: rgb(255 255 255 / 0.16);
    --control-track: rgb(255 255 255 / 0.08);
    --focus-ring: #8FB6FF;
    --wall:
      radial-gradient(48vmax 40vmax at 88% 6%, rgb(255 148 102 / 0.3), transparent 70%),
      radial-gradient(52vmax 44vmax at 4% 100%, rgb(143 182 255 / 0.26), transparent 72%),
      linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 18px/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The wallpaper stays still while the page scrolls over it, like a desktop. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: var(--wall);
}

h1, h2, h3 {
  font-family: var(--font-round);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }

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

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--page);
  padding: 8px 14px; border-radius: 8px; font-size: 15px; text-decoration: none;
}
.skip:focus { top: 40px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- The menu bar ---------- */

.menubar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 32px;
  display: flex; align-items: center; gap: 2px;
  padding: 0 max(8px, calc(var(--gutter) - 8px));
  font-size: 13px; line-height: 1;
  background: var(--menubar);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: 0 0.5px 0 var(--line);
}
.menubar a, .menubar button {
  color: inherit; text-decoration: none;
  font: inherit; background: none; border: 0;
  height: 24px; padding: 0 9px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: default;
}
.menubar a:hover, .menubar button:hover, .menubar button[aria-expanded="true"] { background: rgb(127 127 140 / 0.2); }
.menubar .app { font-weight: 700; }
.menubar nav { display: flex; gap: 2px; }
.menubar .spacer { flex: 1; }
.menubar .clock { padding: 0 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .menubar .item, .menubar .clock { display: none; }
}

/* The app's mark: coral over blue, like the colon in 25:00. */
.mark { display: inline-flex; flex-direction: column; gap: 2.5px; }
.mark i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.mark i + i { background: var(--blue); }

/* The status item: the mark while stopped, a phase dot and the time left otherwise. */
.status { font-variant-numeric: tabular-nums; min-width: 34px; justify-content: center; }
.status .sdot { display: none; }
.status[data-run="running"] .mark, .status[data-run="paused"] .mark { display: none; }
.status[data-run="running"] .sdot, .status[data-run="paused"] .sdot { display: block; }
.status[data-run="stopped"] [data-time] { display: none; }
.sdot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--coral); box-shadow: 0 0 4px 0.5px rgb(255 148 102 / 0.8);
}
[data-phase="shortBreak"] .sdot, [data-phase="longBreak"] .sdot, .sdot.break { background: var(--blue); box-shadow: 0 0 4px 0.5px rgb(143 182 255 / 0.8); }
[data-run="paused"] .sdot, .sdot.paused { opacity: 0.4; box-shadow: none; }

/* The menu that opens from the status item, laid out like the app's. */
.menu {
  position: fixed; inset: 36px auto auto 0; margin: 0;
  width: 280px; padding: 0 0 6px;
  border: 0; border-radius: 14px;
  color: var(--ink); font-size: 13px; line-height: 1.25;
  background: var(--popover);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.35), 0 0 0 0.5px var(--line), 0 18px 48px -8px rgb(14 19 38 / 0.4);
}
.menu-title { font-weight: 700; padding: 11px 14px 8px; }
.menu hr { border: 0; height: 1px; margin: 0 14px; background: var(--line); }
.menu-heading { color: var(--ink-2); font-size: 12px; font-weight: 600; padding: 9px 14px 6px; }
.menu-timer { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px 14px; }
.menu-timer .sdot { width: 7px; height: 7px; box-shadow: none; }
.menu-timer .time { color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: auto; }
.menu-timer button {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none;
  color: var(--ink-2); display: grid; place-items: center;
}
.menu-timer button:hover { background: rgb(127 127 140 / 0.18); }
.menu-timer button:disabled { opacity: 0.35; }
.menu-timer svg { width: 12px; height: 12px; }
.menu-row {
  display: flex; align-items: center; width: calc(100% - 10px); margin: 0 5px;
  padding: 4px 9px 4px 6px; border: 0; border-radius: 6px; background: none;
  font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: default;
}
.menu-row:hover, .menu-row:focus-visible { background: rgb(127 127 140 / 0.2); outline: none; }
.menu-row .check { width: 18px; flex: none; font-size: 11px; font-weight: 600; }
.menu-row[aria-pressed="false"] .check { visibility: hidden; }
.menu-row kbd { margin-left: auto; font: inherit; color: var(--ink-2); opacity: 0.8; }
.menu-group { padding-top: 4px; }

/* ---------- The Liquid Glass timer, 200 by 180 points like the app's ---------- */

.glass {
  /* Light glass by default; the Appearance control or the system can switch it. */
  --g-ink: 22 26 43;
  --g-fill: 255 255 255;
  --g-fill-a: 0.1;
  --g-blur: 4px;
  --g-rim: 0.85;
  --g-bright: 1.04;
  --tint: 0;
  --ink-f: calc(0.82 + 0.18 * var(--tint));

  position: relative;
  width: 200px; height: 180px; flex: none;
  border-radius: 24px;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: rgb(var(--g-ink));
  background: rgb(var(--g-fill) / calc(var(--g-fill-a) + var(--tint) * 0.42));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.9) brightness(var(--g-bright));
  backdrop-filter: blur(var(--g-blur)) saturate(1.9) brightness(var(--g-bright));
  box-shadow:
    inset 0 0 18px rgb(255 255 255 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 1px 1px rgb(14 19 38 / 0.06),
    0 22px 48px -14px rgb(14 19 38 / 0.42);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
/* The specular rim: bright where the light catches the top-left edge. */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg,
    rgb(255 255 255 / var(--g-rim)) 0%, rgb(255 255 255 / 0.18) 30%,
    rgb(255 255 255 / 0.06) 62%, rgb(255 255 255 / 0.42) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.glass[data-style="regular"] { --g-fill-a: 0.5; --g-blur: 22px; --g-rim: 0.7; }

/* Dark glass dims what's behind it, the way Tahoe's clear glass does, so white
   digits stay readable over a light wallpaper. */
.glass[data-appearance="dark"] {
  --g-ink: 255 255 255; --g-fill: 30 36 58; --g-fill-a: 0.26; --g-rim: 0.5; --g-bright: 0.78;
}
.glass[data-appearance="dark"][data-style="regular"] { --g-fill-a: 0.56; }
@media (prefers-color-scheme: dark) {
  .glass[data-appearance="auto"] { --g-ink: 255 255 255; --g-fill: 30 36 58; --g-fill-a: 0.26; --g-rim: 0.5; --g-bright: 0.78; }
  .glass[data-appearance="auto"][data-style="regular"] { --g-fill-a: 0.56; }
}

.g-label, .g-time {
  margin: 0; pointer-events: none;
  text-shadow: 0 -0.5px 0 rgb(255 255 255 / 0.35), 0 1.5px 2px rgb(0 0 0 / 0.22);
}
.g-label {
  font-size: 13px; font-weight: 500; line-height: 16px; letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: calc(0.75 * var(--ink-f));
}
/* Stand-in for SF Soft Numeric, the clock widget's soft compressed digits. */
.g-time {
  font-family: var(--font-round);
  font-size: 80px; font-weight: 700; line-height: 82px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transform: scaleX(0.74);
  white-space: nowrap;
  opacity: var(--ink-f);
  transition: opacity 0.25s ease-in-out;
}
.glass[data-run="paused"] .g-time { opacity: calc(0.5 * var(--ink-f)); }

.g-foot { position: relative; height: 18px; display: grid; place-items: center; }
.g-dots { display: flex; gap: 8px; transition: opacity 0.2s ease-in-out; }
.g-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.2px rgb(var(--g-ink) / calc(0.4 * var(--ink-f)));
}
.g-dots i.done { background: var(--coral); box-shadow: none; }
.g-controls {
  position: absolute; display: flex; gap: 0;
  opacity: 0; transition: opacity 0.2s ease-in-out;
}
.g-controls button {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: rgb(var(--g-ink)); display: grid; place-items: center;
  opacity: calc(0.7 * var(--ink-f)); cursor: default;
}
.g-controls button:hover { background: rgb(var(--g-ink) / 0.1); }
.g-controls svg { width: 12px; height: 12px; }
.glass:hover .g-controls, .glass:focus-within .g-controls, .glass.reveal .g-controls { opacity: 1; }
.glass:hover .g-dots, .glass:focus-within .g-dots, .glass.reveal .g-dots { opacity: 0; }

/* ---------- Home ---------- */

.page { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 116px 0 24px;
}
.hero h1 {
  font-size: clamp(42px, 7.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 11.5em;
}
.hero .lede { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: var(--ink-2); margin-top: 24px; max-width: 31em; }
.hero .buy { margin-top: 36px; }

.slot { margin: 44px 0 0; }
.slot figcaption { color: var(--ink-2); font-size: 14px; margin-top: 14px; }

@media (min-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr) 200px; column-gap: 48px; padding-top: 128px; }
  .hero .slot { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .slot .slot-box { width: 200px; height: 180px; }
  /* Wide screens: the timer leaves the page and floats over it, where the slot is
     at first, then stays put while you scroll. app.js matches it to the slot. */
  .slot .glass { position: fixed; top: 128px; right: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter))); z-index: 40; }
  .page > .section { margin-right: 248px; }
}

.glass.hidden { opacity: 0; transform: scale(0.94); pointer-events: none; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }
.glass.dragging { cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) {
  .slot .glass { animation: window-in 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.25s both; }
  @keyframes window-in { from { opacity: 0; transform: scale(0.92) translateY(6px); } }
}

/* Buy buttons. They turn into a link when the App Store URL is set in app.js. */
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--ink); color: var(--page);
  box-shadow: 0 10px 28px -10px rgb(14 19 38 / 0.5);
}
a.cta:hover { text-decoration: none; filter: brightness(1.12); }
.cta.soon {
  background: rgb(255 255 255 / 0.35); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55), 0 10px 28px -14px rgb(14 19 38 / 0.35);
}
@media (prefers-color-scheme: dark) {
  .cta.soon { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
}
.buy .terms { color: var(--ink-2); font-size: 15px; }

.section { padding-top: clamp(96px, 12vw, 152px); }
.section h2 {
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.06; letter-spacing: -0.03em;
  max-width: 14em;
}
.section > p, .section .text p { max-width: 35em; margin-top: 18px; }
.section h3 { font-size: 21px; letter-spacing: -0.01em; }
.note { color: var(--ink-2); font-size: 16px; }
.wide-only { display: none; }
@media (min-width: 1080px) { .wide-only { display: block; } }

figure { margin: 0; }
.visual { margin-top: 44px; }

/* Every desktop, even full screen: three small screens with the timer in the same corner. */
.spaces { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); }
.spaces p { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(70% 70% at 90% 0%, rgb(255 148 102 / 0.55), transparent 70%),
    radial-gradient(70% 80% at 0% 100%, rgb(143 182 255 / 0.6), transparent 70%),
    linear-gradient(180deg, var(--midnight), var(--midnight-deep));
  box-shadow: 0 0 0 0.5px var(--line), 0 12px 30px -16px rgb(14 19 38 / 0.5);
}
.screen::before { content: ""; position: absolute; inset: 0 0 auto; height: 7%; background: rgb(255 255 255 / 0.18); }
.screen .win { position: absolute; border-radius: 5px; background: rgb(246 247 251 / 0.9); box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.45); }
.screen .win::before { content: ""; position: absolute; inset: 0 0 auto; height: 12%; border-radius: 5px 5px 0 0; background: rgb(22 26 43 / 0.07); }
.screen .w1 { left: 8%; top: 16%; width: 52%; height: 60%; }
.screen .w2 { left: 30%; top: 34%; width: 44%; height: 54%; }
.screen .w3 { left: 6%; top: 22%; width: 66%; height: 66%; }
.screen.full .win { inset: 0; border-radius: 0; background: #F6F7FB; }
.screen.full::before { display: none; }
.screen .mini {
  position: absolute; right: 4%; top: 11%; width: 21%; aspect-ratio: 200 / 180; border-radius: 16%;
  background: rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(3px) saturate(1.8); backdrop-filter: blur(3px) saturate(1.8);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.7), 0 6px 14px -6px rgb(14 19 38 / 0.6);
  display: grid; place-items: center;
}
.screen .mini::after { content: ""; width: 54%; height: 22%; border-radius: 3px; background: rgb(255 255 255 / 0.88); }
.screen.full .mini { top: 4%; background: rgb(22 26 43 / 0.05); box-shadow: inset 0 0 0 0.5px rgb(22 26 43 / 0.2), 0 6px 14px -6px rgb(14 19 38 / 0.35); }
.screen.full .mini::after { background: rgb(22 26 43 / 0.75); }

/* Menu bar states, drawn a little larger than life. */
.states { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 28px; }
.states p { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 12px;
  font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1;
  background: var(--menubar);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.4), 0 0 0 0.5px var(--line);
}
.chip .mark { gap: 3.4px; }
.chip .mark i { width: 9.5px; height: 9.5px; }
.chip .sdot { width: 8.5px; height: 8.5px; }

/* The rhythm: a full set of four, to scale, with a marker where this page's timer is. */
.rhythm .track { position: relative; display: flex; gap: 3px; height: 16px; }
.rhythm .seg { flex: 25 1 0; border-radius: 5px; background: var(--coral); }
.rhythm .seg.b { flex-grow: 5; background: var(--blue); }
.rhythm .seg.l { flex-grow: 15; background: var(--blue); background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgb(255 255 255 / 0.35) 5px 7px); }
.rhythm .playhead {
  position: absolute; top: -7px; bottom: -7px; left: 0; width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--ink);
  box-shadow: 0 0 0 2px var(--page);
}
.rhythm .ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); margin-top: 12px; font-variant-numeric: tabular-nums; }
.legend { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 10px; border-radius: 3px; background: var(--coral); }
.legend i.b { background: var(--blue); }
.legend i.l { background: var(--blue); background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgb(255 255 255 / 0.45) 3px 5px); }

/* Settings, laid out like the app's: a grouped form with standard controls. */
.try { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 40px; }
.try .preview { display: flex; }
@media (min-width: 1080px) { .try .preview { display: none; } }
.form { flex: 1 1 340px; max-width: 460px; }
.form-title { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 12px 7px; }
.form-group {
  border-radius: 12px; padding: 4px 12px;
  background: rgb(255 255 255 / 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.6), 0 0 0 0.5px var(--line);
  font-size: 13px;
}
@media (prefers-color-scheme: dark) { .form-group { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 0 0 0.5px var(--line); } }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 6px 0; border: 0; margin: 0; }
.form-row + .form-row { border-top: 1px solid var(--line); }
.form-row legend, .form-row > label { float: left; padding: 0; }
fieldset.form-row { min-width: 0; }
.segmented { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--control-track); margin-left: auto; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { padding: 3px 13px; border-radius: 6px; line-height: 18px; cursor: default; }
.segmented input:checked + label { background: var(--control); box-shadow: 0 0.5px 1px rgb(0 0 0 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.05); }
.segmented input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.slider { display: flex; align-items: center; gap: 8px; color: var(--ink-2); flex: 0 1 220px; }
.slider svg { width: 15px; height: 15px; flex: none; }
.slider input { flex: 1; min-width: 80px; accent-color: #3E7BF6; margin: 0; }

/* Sound and privacy */
.chimes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.push {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  background: rgb(255 255 255 / 0.55); color: var(--ink);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.8), 0 0 0 0.5px var(--line), 0 4px 12px -6px rgb(14 19 38 / 0.3);
}
.push:hover { background: rgb(255 255 255 / 0.75); }
@media (prefers-color-scheme: dark) {
  .push { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.18), 0 4px 12px -6px rgb(0 0 0 / 0.4); }
  .push:hover { background: rgb(255 255 255 / 0.16); }
}
.push i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.push i.b { background: var(--blue); }
.push.playing i { box-shadow: 0 0 0 4px rgb(255 148 102 / 0.3); }
.push.playing i.b { box-shadow: 0 0 0 4px rgb(143 182 255 / 0.35); }

.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 36px; margin-top: 40px; }
.uses p { margin-top: 8px; color: var(--ink-2); font-size: 17px; }

.private { margin-top: 40px; }
.private p { margin-top: 8px; max-width: 35em; }

/* Purchase */
.own { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; align-items: start; }
.own .icon { width: clamp(84px, 12vw, 128px); height: auto; filter: drop-shadow(0 16px 24px rgb(14 19 38 / 0.35)); grid-row: 1 / span 3; }
.own .buy { margin-top: 28px; }
@media (max-width: 560px) { .own { grid-template-columns: 1fr; } .own .icon { grid-row: auto; margin-bottom: 24px; } }

/* FAQ */
.faq { margin-top: 32px; border-top: 1px solid var(--line); max-width: 44em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-family: var(--font-round); font-weight: 600; font-size: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: translateY(-3px) rotate(45deg);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform 0.2s ease; } }
.faq details p { padding: 0 0 20px; max-width: 36em; color: var(--ink-2); }

/* ---------- Document pages (support, privacy) ---------- */

.doc { max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 120px var(--gutter) 24px; }
.doc h1 { font-size: clamp(40px, 6.4vw, 60px); letter-spacing: -0.035em; line-height: 1.04; }
.doc .lede { color: var(--ink-2); margin-top: 16px; font-size: 20px; }
.doc h2 { font-size: 23px; letter-spacing: -0.01em; margin: 52px 0 10px; }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: 12px; }
.doc ul { padding-left: 1.2em; margin: 12px 0 0; }
.doc li + li { margin-top: 4px; }
.doc .contact {
  margin-top: 56px; padding: 22px 24px; border-radius: 18px;
  background: rgb(255 255 255 / 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.7), 0 0 0 0.5px var(--line);
}
.doc .contact h2 { margin-top: 0; }
@media (prefers-color-scheme: dark) { .doc .contact { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 0 0 0.5px var(--line); } }

/* ---------- Footer ---------- */

.footer {
  max-width: var(--wide); margin: 0 auto;
  padding: 120px var(--gutter) 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  color: var(--ink-2); font-size: 15px;
}
.footer .made { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.doc + .footer { max-width: calc(var(--column) + 2 * var(--gutter)); padding-top: 72px; }
@media (min-width: 1080px) { .page + .footer { padding-right: calc(var(--gutter) + 248px); } }