:root {
  color-scheme: light;
  --bg: #d7d5b9;
  --surface: rgba(8, 93, 101, 0.5);
  --surface-deep: rgba(5, 61, 70, 0.72);
  /* Raised from 0.38. The cards are what text sits on, and at 0.38 the gradient behind them showed
     through strongly enough that each letter had a different backdrop. Glass still looks like glass
     at this weight, and the type now has something steady underneath it. */
  --surface-mid: rgba(0, 88, 97, 0.58);
  --surface-soft: rgba(255, 253, 242, 0.12);
  --surface-faint: rgba(255, 253, 242, 0.07);
  --text: #fffdf2;
  /* Raised from 0.76. Every secondary line on the page uses this, and at 0.76 over the gradient the
     subtitles under each card sat close to the background rather than on it, which reads as soft
     focus rather than as hierarchy. Contrast is what makes small text look sharp. */
  --muted: rgba(255, 253, 242, 0.92);
  --line: rgba(255, 253, 242, 0.22);
  --accent: #fffdf2;
  --cyan: #20d6cf;
  --ink: #053d46;
  --danger: #ffe08a;
  --caution: #ffbd59;
  --bridge: #f28c28;
  --section-gap: 22px;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* THE SAME TYPE AS THE APP, RENDERED THE SAME WAY.
   *
   * This was Arial, Helvetica, which is not what The Pool uses and is the blurrier of the two at
   * small sizes on a gradient. Matched to the app's --sans, and given the two hints that decide
   * whether type looks crisp or soft on a coloured backdrop: subpixel smoothing off, so glyph edges
   * are not tinted by whatever happens to be behind them, and legibility-first rendering. */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }

/* ── Scene ── */

.scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(246,238,196,0.95) 0%, rgba(210,205,163,0.95) 22%, rgba(46,145,143,0.95) 42%, #008a95 100%);
}

.horizon {
  position: absolute;
  inset: 0 0 auto;
  height: 42vh;
  /* HEADLANDS IN THE POOL'S OWN PALETTE, NOT FOREST GREEN.
   *
   * These were rgba(19,82,55) and rgba(47,105,71) at 0.9 and 0.75: near-black greens that read as
   * heavy mountains and belonged to no other surface in the Bay. The water below them was already
   * exactly The Pool's sea, rgba(27,185,179), rgba(0,125,145) and rgba(0,83,105), which are
   * --sea-hi, --sea-mid and --sea-lo from the app, so the horizon was the only thing out of family.
   *
   * They are now the same seas at low alpha. Distance is carried by lightness rather than by
   * darkness, which is also how distance actually looks: the far headland is paler than the near
   * one, not blacker, and the sand reads as sand instead of as shadow. --sand-hi #f6eec4 and
   * --sand-lo #cbb88b, again straight from the app. */
  background:
    radial-gradient(ellipse at 76% 15%, rgba(0,83,105,0.34) 0 7%, transparent 7.5%),
    radial-gradient(ellipse at 55% 28%, rgba(0,125,145,0.26) 0 17%, transparent 17.4%),
    linear-gradient(180deg, rgba(246,238,196,0.22), rgba(246,238,196,0.92) 72%, rgba(203,184,139,0.95) 73%, rgba(246,238,196,0.96));
}

.horizon::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The ridge lines were rgba(33,47,38), rgba(24,42,32) and rgba(26,39,30): three near-blacks laid
     over sand, which is what made the shore look bruised. Same strokes in --sea-lo at a fraction of
     the weight, so they read as creases in the dunes catching light rather than as crevasses. */
  background:
    linear-gradient(110deg, transparent 0 8%, rgba(0,83,105,0.13) 8.4% 8.8%, transparent 9.2% 100%),
    linear-gradient(128deg, transparent 0 17%, rgba(0,83,105,0.10) 17.2% 17.6%, transparent 18% 100%),
    linear-gradient(155deg, transparent 0 28%, rgba(0,83,105,0.08) 28.1% 28.4%, transparent 28.8% 100%);
  opacity: 0.7;
}

.water {
  position: absolute;
  inset: 38vh 0 0;
  background:
    radial-gradient(ellipse at 30% 15%, rgba(255,255,255,0.35) 0 1%, transparent 10%),
    radial-gradient(ellipse at 72% 52%, rgba(255,255,255,0.24) 0 1.4%, transparent 9%),
    repeating-linear-gradient(168deg, rgba(255,255,255,0.2) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(22deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, rgba(27,185,179,0.92), rgba(0,125,145,0.96) 54%, rgba(0,83,105,0.98));
}

.water::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 52% 22%, rgba(255,248,198,0.3), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0,44,59,0.34));
  mix-blend-mode: screen;
}

/* ── Layout ── */

.app {
  width: min(620px, calc(100% - 28px));
  margin: 0 auto;
  padding: 26px 0 48px;
}

/* ── Header ── */

/* THE TEXT LOOKED BLURRED, AND IT WAS THE SHADOWS UNDER IT.
 *
 * This carried a 30px-radius shadow and the header strip a 20px one. A shadow that soft does not
 * read as depth, it reads as a halo: over a gradient it bleeds a light smear around every glyph and
 * the whole page looks slightly out of focus. The glass panels are NOT the cause, their
 * backdrop-filter blurs what is behind them, which is the point of them.
 *
 * What a shadow is for here is separating text from a background that moves under it, and 1px of
 * offset does that. Kept tight and opaque instead of wide and faint, and the ink darkened, so the
 * letters have edges. */
h1 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  /* LIGHT, NOT DARK. This went to --ink #053d46 for contrast, and contrast it had, but the name sits
     on the blue of the sky rather than on the sand, and a dark heading there reads as weight where
     the page wants air. Cream is also what every card title on this page already uses, so the name
     now belongs to the same family as everything under it. Still no shadow: the separation comes
     from the colour. */
  color: var(--text);
}

h2 {
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
}

.topline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  z-index: 30;
  /* Was a 20px-radius shadow on every glyph, then a 2px one. Any blur radius at all smears a glyph
     edge, and the header sits on the pale sand where it needs none: there is already plenty of
     contrast between #053d46 type and #f6eec4 sand. No shadow. */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid rgba(255,253,242,0.92);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(32,214,207,0.95), rgba(0,107,130,0.95));
  box-shadow: 0 8px 30px rgba(0,76,91,0.28);
}

.logo svg, .logo img { width: 25px; height: 25px; }

.logo path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}

.logo .wave {
  stroke: var(--cyan);
  stroke-width: 4;
}

.topline p {
  margin-top: 4px;
  /* Followed the name. This was #0f5b4a, a dark green, which was fine under a dark title and reads
     as a mistake under a light one: the two are one lockup and cannot disagree about which half of
     the page they belong to. Muted rather than full cream so the name still leads. */
  color: rgba(255,253,242,0.86);
  font-weight: 700;
}

/* ── The two rules above are RIGHT for the umbrella and WRONG for The Pool ──
 *
 * Founder, 2026-08-04: on /pool/ the name and the line under it were "barely readable". Measured
 * rather than judged, and it is not close:
 *
 *   umbrella /       header sits on sky  #3797c3   cream on it = 3.23:1   passes for large text
 *   pool     /pool/  header sits on sand #f4edc3   cream on it = 1.16:1   effectively invisible
 *
 * One shared stylesheet, two scenes that are opposites at the top of the page. The "LIGHT, NOT DARK"
 * note above was reasoned about the blue sky and is kept, because on the umbrella it is correct.
 * What was wrong was letting a decision about one background apply to both.
 *
 * So the ink is scoped by page rather than reversed. Dark teal on sand measures 10.07:1 for the name
 * and 5.94:1 for the slogan, which keeps the same hierarchy the cream pair had, the name leading and
 * the line under it subordinate. No shadow: this file has removed one twice for smearing glyph edges
 * over a gradient, and at 10:1 there is nothing left for a shadow to do. */
.pool-page h1 { color: var(--ink); }
.pool-page .topline p { color: rgba(5,61,70,0.8); }
.bridge-page h1 { color: var(--ink); }
.bridge-page .topline p { color: rgba(5,61,70,0.8); }
.bridge-page .logo {
  border: 0;
  background: transparent;
}
.bridge-page .logo img { width: 34px; height: 34px; }

.version {
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(5,61,70,0.58);
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  /* The chip is filled from the release after the page has drawn, so it is sized here for the
     string it will receive rather than for the dots it starts with. Without this the header
     re-spaces itself a moment after load, which is the fault law 9 exists to prevent. */
  min-width: 104px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 34px rgba(0,48,65,0.28);
  backdrop-filter: blur(12px) saturate(140%);
}

.project-links {
  display: flex;
  justify-self: end;
  gap: 8px;
}

.project-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(5,61,70,0.58);
  color: var(--accent);
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(0,48,65,0.28);
  backdrop-filter: blur(12px) saturate(140%);
  transition: background 160ms ease, color 160ms ease;
}

.project-links svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.project-links a.bridge-link {
  background: rgba(242,140,40,0.9);
}

.project-links svg.icon-tabler,
.project-links svg.icon-tabler path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-links a:hover {
  background: rgba(255,253,242,0.94);
  color: var(--ink);
}

.project-links a.bridge-link:hover { color: var(--bridge); }

/* ── Back link ── */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: #0f5b4a;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 160ms ease;
}

.back-link:hover { color: var(--ink); }

/* The .token-icon, .token-icon img and .minima-icon rules that were here drew the MINIMA and USDT
   pair badges at the top of the Pool page. That pair belonged to the constant-product AMM, which
   was dropped: the venue is an order book and its market is Winiwa against USDx. The rules went
   with the markup that used them, along with pool/assets/MINIMA.svg and pool/assets/USDT.svg. */

/* ── Shared panel style ── */

.panel {
  border-radius: 6px;
  padding: 20px;
  margin-bottom: var(--section-gap);
  background: var(--surface-mid);
  backdrop-filter: blur(18px) saturate(130%);
}

/* ── Umbrella: protocol grid ── */

.protocol-grid {
  display: grid;
  gap: 12px;
  margin-bottom: var(--section-gap);
}

.protocol-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 6px;
  padding: 16px 20px;
  background: var(--surface-mid);
  backdrop-filter: blur(18px) saturate(130%);
}

.protocol-card.is-coming {
  /* Raised from 0.6. These two are not built yet and should read as secondary, but 0.6 over a
     gradient took the whole card, name included, close to unreadable, which looks like a rendering
     fault rather than a deliberate state. The "Coming soon" pill already says what they are. */
  opacity: 0.82;
}

.protocol-card-link {
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease;
}

.protocol-card-link:hover {
  background: var(--surface);
}

.protocol-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.protocol-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid rgba(255,253,242,0.72);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(32,214,207,0.95), rgba(0,107,130,0.95));
}

.protocol-icon.land-icon {
  background: linear-gradient(135deg, rgba(80,180,100,0.95), rgba(20,100,60,0.95));
}

.protocol-icon.spring-icon {
  background: linear-gradient(135deg, rgba(180,120,255,0.95), rgba(80,40,160,0.95));
}

.protocol-icon.bridge-icon {
  border: 0;
  background: transparent;
}

.protocol-icon svg {
  width: 26px;
  height: 26px;
}

.protocol-icon img {
  width: 42px;
  height: 42px;
  display: block;
}

.protocol-icon path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.protocol-icon .wave {
  stroke: var(--cyan);
  stroke-width: 4;
}

.protocol-text h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.protocol-text p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.protocol-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.btn-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border: 0;
  border-radius: 4px;
  padding: 0 16px;
  background: rgba(32,214,207,0.72);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}

.btn-visit:hover {
  background: rgba(32,214,207,0.9);
  transform: translateY(-1px);
}

.btn-gh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(5,61,70,0.58);
  color: var(--accent);
  text-decoration: none;
  backdrop-filter: blur(12px) saturate(140%);
  transition: background 160ms ease, color 160ms ease;
}

.btn-gh svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.btn-gh:hover {
  background: rgba(255,253,242,0.94);
  color: var(--ink);
}

.coming-badge {
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

/* ── Pool page ──
 *
 * What was here described the constant-product AMM: a MINIMA / USDT pair badge, a swap / add /
 * remove explainer, an LP panel about fee accrual and impermanent loss, a trust list and a
 * five-step AMM roadmap. The AMM was dropped, so the rules went with the markup rather than being
 * left behind as dead selectors on a public stylesheet.
 *
 * The page is now two actions and the facts a reader needs before taking either: get the release,
 * or read the source. Everything the release panel prints about a version, a date or a file size
 * is read from the release at load and starts as dots, so no number on this page can go stale. */

/* The two standing facts about this venue, said before anything else. Same pair the app itself
   wears in its top bar. */
.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chip {
  border-radius: 999px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  background: var(--surface-faint);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.chip-warn {
  color: var(--danger);
  border-color: rgba(255,224,138,0.45);
}

/* The base h2 on this site is a small uppercase section label, which is right for the labels below
   and wrong for the one heading that carries the sentence. All three of its properties are set
   here rather than relying on the cascade. */
.hero-title {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
}

.hero-lede {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.panel-sub {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.panel-sub code,
.notes code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
  color: var(--text);
}

/* ── Pool page: section labels ── */

.section-label {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Pool page: release line ──
   One line that says which release the buttons lead to. Its text changes three ways (reading,
   read, could not read) and its height may not, or the two download cards would shift under the
   reader's cursor. Two lines are reserved, which is the longest of the three at this width. */

.rel-line {
  min-height: 35px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

/* ── Pool page: download cards ── */

.get-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dl-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-radius: 4px;
  padding: 12px 14px;
  background: rgba(32,214,207,0.72);
  color: var(--ink);
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.dl-card:hover {
  background: rgba(32,214,207,0.9);
  transform: translateY(-1px);
}

.dl-icon,
.dl-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.dl-arrow {
  margin-left: auto;
  opacity: 0.72;
}

.dl-icon svg,
.dl-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dl-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dl-main {
  font-size: 14px;
  font-weight: 900;
}

/* Tabular figures, so a size arriving from the release does not re-space the line it lands in. */
.dl-sub {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.78;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Pool page: notes ── */

.notes {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notes li {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--surface-faint);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.notes strong { color: var(--text); }

/* ── Pool page: source ──
   Quieter than the download cards on purpose: reading the source is the second thing somebody
   does here, and two teal blocks would have argued with each other. */

.btn-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.btn-wide svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.btn-wide:hover {
  background: rgba(255,253,242,0.94);
  color: var(--ink);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
}

.link-row a {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

.link-row a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ── Pool page: footer line ──
   The same sentence the app carries at the foot of its own pages. */

.foot {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  opacity: 0.9;
}

/* ── Mobile ── */

@media (max-width: 560px) {
  .app {
    width: min(100%, 560px);
    padding: 18px 10px 40px;
  }

  .topline {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .version { padding: 8px 12px; font-size: 12px; }

  .project-links {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    gap: 7px;
  }

  .project-links a { width: 36px; height: 36px; }

  .protocol-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .protocol-actions { width: 100%; }

  .btn-visit { flex: 1; justify-content: center; }

  .hero-title { font-size: 18px; }

  /* One card above the other, each still full width, so the tap target does not shrink to half a
     phone. The release line above them keeps its two reserved rows: the longest of its three
     messages is two lines at this width too. */
  .get-grid { grid-template-columns: 1fr; }
}