/* Aqueduct's site, in the family of Colonnade's: dark and glassy like the app's
   icon, with a
   light version for light mode. No web fonts: the Mac's own. */

:root {
  --bg: #0b1020;
  --bg-2: #141c33;
  --text: #e9edf6;
  --muted: #9aa6c0;
  --faint: #6c7894;
  --accent: #3d7bff;
  --accent-2: #6aa4ff;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-lit: rgba(255, 255, 255, 0.28);
  --screen: #0e1426;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  --radius: 22px;
  --page: min(1080px, calc(100vw - 32px));
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6fb;
    --bg-2: #e6ebf5;
    --text: #141a2b;
    --muted: #4f5a73;
    --faint: #7a849b;
    --accent: #2f66f0;
    --accent-2: #4f8bff;
    --glass: rgba(255, 255, 255, 0.7);
    --glass-edge: rgba(20, 30, 60, 0.1);
    --glass-lit: rgba(255, 255, 255, 0.95);
    --screen: #dfe5f1;
    --shadow: 0 30px 70px rgba(30, 45, 90, 0.18);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(var(--bg), var(--bg-2) 60%, var(--bg));
  background-attachment: fixed;
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
@media (prefers-color-scheme: light) { a { color: var(--accent); } }

h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
h2 { font-size: clamp(28px, 4.2vw, 40px); text-align: center; margin-bottom: 36px; }
h3 { font-size: 19px; margin-bottom: 8px; }
p { margin: 0; }

.fine { color: var(--faint); font-size: 14px; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.45em;
  border: 1px solid var(--glass-edge);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--glass);
  font: 600 0.85em/1.6 -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: center;
  white-space: nowrap;
}

/* Hero */

.hero {
  width: var(--page);
  margin: 0 auto;
  padding: 72px 0 40px;
  text-align: center;
}
.hero-icon {
  width: 148px;
  height: 148px;
  filter: drop-shadow(0 18px 40px rgba(61, 123, 255, 0.35));
}
.hero h1 { font-size: clamp(44px, 7vw, 72px); margin-top: 14px; }
.tagline { font-size: clamp(20px, 2.6vw, 26px); color: var(--text); margin-top: 6px; font-weight: 500; }
.lede { max-width: 620px; margin: 18px auto 0; color: var(--muted); font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.hero .fine { margin-top: 16px; }

.button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  color: var(--text);
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


/* The demo: one file, fetched over one connection and over eight, from a
   server that holds each connection to the same speed. */

.demo { text-align: center; }
.demo h2 { margin-bottom: 14px; }
.caption {
  max-width: 600px;
  margin: 0 auto 26px;
  color: var(--muted);
}
.screen {
  max-width: 760px;
  margin: 0 auto 18px;
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  display: grid;
  gap: 22px;
}
.race { display: grid; gap: 8px; }
.race header { display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; }
.race header b { color: var(--text); font-weight: 600; }
.race header span { font-variant-numeric: tabular-nums; }
.file {
  position: relative;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
/* A piece: its bytes fill from its start; a hairline marks where it begins. */
.file i {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.file i.start {
  width: 1px;
  background: color-mix(in srgb, var(--text) 35%, transparent);
}
.controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; }
.controls button {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
}
.controls button:hover { border-color: var(--accent-2); }
.controls button:active { transform: scale(0.97); }
.controls button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.demo .hint { max-width: 560px; margin: 0 auto; }

/* Small pictures for the three points: a file in pieces. Still. */

.mini {
  height: 120px;
  border-radius: 16px;
  margin-bottom: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 0 22px;
}
.mini .bar {
  position: relative;
  height: 14px;
  border-radius: 5px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.mini .bar i { position: absolute; top: 0; bottom: 0; background: var(--accent); }
.mini .bar i.dim { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.mini .bar i.stop { background: color-mix(in srgb, var(--text) 45%, transparent); }
.mini .note { color: var(--faint); font-size: 13px; text-align: center; }

.honest {
  max-width: 720px;
  margin: 0 auto 110px;
  text-align: center;
  color: var(--muted);
}
.honest h2 { margin-bottom: 16px; }

@media (max-width: 760px) {
  .three { grid-template-columns: 1fr; }
}

/* Light that follows the pointer (effects.js sets --x and --y). The glow
   sits on the border only: the mask cuts out everything inside it. */

.card, .screen, .button, .controls button { position: relative; }
.card::before, .screen::before, .button::before, .controls button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(220px circle at var(--x, -1000px) var(--y, -1000px),
              color-mix(in srgb, var(--accent-2) 80%, white), transparent 70%);
  -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;
  z-index: 2;
}
.screen::before { padding: 2px; background: radial-gradient(320px circle at var(--x, -1000px) var(--y, -1000px),
                  color-mix(in srgb, var(--accent-2) 70%, white), transparent 70%); }
/* A faint wash of the same light inside cards. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--x, -1000px) var(--y, -1000px),
              color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
  pointer-events: none;
}

/* Blue light doesn't show on the blue Download button: it gets white light
   on its edge and a soft spot of it inside, under the label. */
.button.primary::before {
  background: radial-gradient(160px circle at var(--x, -1000px) var(--y, -1000px),
              rgba(255, 255, 255, 0.95), transparent 70%);
}
.button.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(110px circle at var(--x, -1000px) var(--y, -1000px),
              rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.button.primary:hover {
  box-shadow: 0 12px 36px color-mix(in srgb, var(--accent) 55%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}


/* Sections */

main { width: var(--page); margin: 0 auto; }
section { margin-bottom: 110px; }

.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.three p { color: var(--muted); }
.point { margin: 0; }


.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  /* An odd card out spans the last row. */
  .features .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
}
.card {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-lit);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card p { color: var(--muted); font-size: 16px; }

.sub { max-width: 600px; margin: -22px auto 30px; color: var(--muted); text-align: center; }

.shortcuts dl {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 2px;
}
.shortcuts dl > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 12px;
}
.shortcuts dl > div:nth-child(odd) { background: var(--glass); }
.shortcuts dl > div { transition: background 0.15s ease; }
.shortcuts dl > div:hover, .shortcuts dl > div:nth-child(odd):hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--glass));
}
.shortcuts dt { white-space: nowrap; }
.shortcuts dd { margin: 0; color: var(--muted); }

/* Who made it on one side, the coffee on the other; stacked on phones. */
footer {
  width: var(--page);
  margin: 0 auto;
  padding: 30px 0 50px;
  border-top: 1px solid var(--glass-edge);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
footer p { margin: 0; }
@media (max-width: 560px) {
  footer { flex-direction: column; text-align: center; }
}

/* Buy Me a Coffee's button: their cup and lettering, in the shape their
   generator makes, but one of this site's own buttons (the Download
   button's blue, its glow and its light under the pointer). Drawn here
   rather than by their script, so the page loads nothing from elsewhere. */
@font-face {
  font-family: "Cookie";
  src: url("/fonts/cookie-latin.woff2") format("woff2");
  font-display: swap;
}
.button.coffee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  height: 60px;
  padding: 0 24px;
  border-radius: 12px;
  font-family: "Cookie", cursive;
  font-size: 28px;
  font-weight: normal;
  line-height: 1;
  white-space: nowrap;
}
.coffee svg { height: 32px; width: auto; transform: scale(0.9); flex-shrink: 0; }
.coffee .logo-outline { fill: #fff; }
.coffee .logo-coffee { fill: #ffdd00; }

@media (max-width: 760px) {
  .hero { padding-top: 48px; }
  .three { grid-template-columns: 1fr; gap: 24px; }
  .shortcuts dl > div { grid-template-columns: 1fr; gap: 4px; }
  section { margin-bottom: 80px; }
}

/* The What's new page (/changes, built by changes.py): one column of
   releases, newest first, each folded to its version, date and summary
   but the newest. */
.page-head {
  width: var(--page);
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 0 28px;
  text-align: center;
}
.page-head .home { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 18px; font-weight: 600; }
.page-head .home:hover { text-decoration: none; opacity: 0.85; }
.page-head h1 { font-size: clamp(36px, 5vw, 52px); margin-top: 24px; }
main.changes { max-width: 760px; margin-bottom: 60px; border-bottom: 1px solid var(--glass-edge); }
.release { border-top: 1px solid var(--glass-edge); }
.release[open] { padding-bottom: 30px; }
.release > summary { position: relative; display: block; padding: 26px 44px 26px 0; cursor: pointer; list-style: none; }
.release > summary::-webkit-details-marker { display: none; }
/* A chevron at the end of the row: pointing right while folded, down when open. */
.release > summary::after {
  content: "";
  position: absolute;
  top: 36px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.release[open] > summary::after { transform: rotate(45deg); }
.release > summary:hover::after { border-color: var(--muted); }
.release h2 { display: flex; align-items: baseline; gap: 14px; margin: 0; text-align: left; font-size: 28px; }
.release h2 time { color: var(--faint); font-size: 15px; font-weight: 500; }
.release .summary { display: block; margin-top: 8px; color: var(--text); font-size: 19px; }
.release h3 { margin: 18px 0 6px; font-size: 16px; }
.release > h3:first-of-type { margin-top: 2px; }
.release p { color: var(--muted); }
.release ul, .release ol { margin: 0; padding-left: 22px; color: var(--muted); }
.release li { margin: 5px 0; }
.release code {
  padding: 0 0.3em;
  border: 1px solid var(--glass-edge);
  border-radius: 5px;
  background: var(--glass);
  font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-reduced-motion: reduce) {
  .release > summary::after { transition: none; }
}