:root {
  --bg: #0b0d12;
  --phone: #141820;
  --ink: #f2f0ea;
  --muted: #8d93a1;
  --line: #2a3140;
  --holder: #f4b942;
  --holder-bubble: #3a2c12;
  --blockstream: #7ee0d6;
  --blockstream-bubble: #17333a;
  --federation: #8bb4ea;
  --danger: #e07a6c;
  --mine: #1c8f5a;
  --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gutter: clamp(12px, 2.6vw, 40px);
  --page-pad-x: calc(var(--gutter) + var(--safe-l));
  --page-pad-x-end: calc(var(--gutter) + var(--safe-r));
  --measure: min(100%, clamp(20rem, 34rem + 18vw, 72rem));
  --phone-w: min(100%, clamp(20rem, 26rem + 20vw, 60rem));
  --type: clamp(15px, 0.22vw + 14.6px, 18px);
  --msg: clamp(15px, 0.18vw + 14.7px, 17px);
  --bubble-cap: min(78%, clamp(16rem, 28vw + 8rem, 34rem));
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--type);
  line-height: 1.5;
  overflow-x: clip;
  padding-top: var(--safe-t);
  background:
    radial-gradient(900px 420px at 50% -8%, #1b3a36 0%, transparent 55%),
    var(--bg);
}

.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 8px; background: #000; color: #fff; padding: 6px 10px; }

.kicker, h1, .lede, .stats, .identities, #verify, #flows, #sources, footer {
  width: var(--measure);
  max-width: calc(100% - var(--page-pad-x) - var(--page-pad-x-end));
  margin-left: auto;
  margin-right: auto;
}

.kicker {
  font-family: var(--mono);
  font-size: clamp(11px, 0.2vw + 10.6px, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blockstream);
  margin: clamp(24px, 5vw, 48px) auto 10px;
}
h1 {
  font-size: clamp(2rem, 5vw + 0.4rem, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0 auto 10px;
}
.lede {
  color: #c9cdd6;
  margin: 0 auto 28px;
  max-width: 62ch;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(22px, 3vw, 36px);
}
.stats article {
  background: #12151c;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(12px, 1.2vw, 20px) clamp(12px, 1.4vw, 20px) clamp(10px, 1vw, 16px);
  min-width: 0;
}
.stats h2 {
  margin: 0;
  font-size: clamp(10px, 0.15vw + 10px, 12px);
  font-weight: 500;
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.figure {
  font-size: clamp(1.2rem, 0.45vw + 1.05rem, 1.65rem);
  font-weight: 600;
  margin: 6px 0 2px;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.figure-sm { font-size: clamp(1.02rem, 0.25vw + 0.95rem, 1.25rem); font-family: var(--mono); font-weight: 500; }
.hint { margin: 0; font-size: clamp(10px, 0.15vw + 10px, 12px); color: var(--muted); }

.phone {
  width: var(--phone-w);
  max-width: calc(100% - var(--page-pad-x) - var(--page-pad-x-end));
  margin: 0 auto clamp(36px, 5vw, 56px);
  background: var(--phone);
  border: 1px solid #3a4254;
  border-radius: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  overflow: hidden;
}

.chat-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.4vw, 18px) 12px;
  background: #1a1f29;
  border-bottom: 1px solid var(--line);
}
.avatars { position: relative; width: 52px; height: 36px; flex-shrink: 0; }
.av {
  position: absolute;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  border: 2px solid #1a1f29;
}
.av.holder { left: 0; background: #4a3510; }
.av.blockstream { left: 18px; background: #0f4a48; }
.chat-titles { min-width: 0; }
.chat-titles strong {
  display: block;
  font-size: clamp(14px, 0.2vw + 13.6px, 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-titles span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: clamp(10px, 0.15vw + 10px, 12px);
  color: var(--muted);
}
.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
  flex-shrink: 0;
}
.pulse[data-state="live"] { background: #3dcc8a; box-shadow: 0 0 0 4px rgba(61,204,138,0.15); }
.pulse[data-state="poll"] { background: var(--holder); }
.pulse[data-state="error"] { background: var(--danger); }

.e2ee {
  margin: 0;
  padding: 10px clamp(12px, 1.6vw, 20px);
  font-size: clamp(11px, 0.15vw + 10.8px, 13px);
  color: var(--muted);
  text-align: center;
  background: #10141b;
  border-bottom: 1px solid var(--line);
}

.thread {
  list-style: none;
  margin: 0;
  padding: clamp(14px, 1.6vw, 20px) clamp(10px, 1.2vw, 16px) 8px;
  min-height: clamp(240px, 38vh, 420px);
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,0.15)),
    repeating-linear-gradient(-12deg, transparent 0 18px, rgba(255,255,255,0.015) 18px 19px);
}

.day {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin: 14px 0 10px;
}

.thread > li {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  align-items: flex-end;
}
.thread > li.holder { flex-direction: row-reverse; }
.thread > li.sys { display: block; margin: 14px clamp(8px, 3vw, 28px); }
.thread > li.tight { margin-top: -2px; }

.face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
  background: #2a3140;
}
.face.ghost { visibility: hidden; }

.bubble {
  max-width: var(--bubble-cap);
  padding: clamp(8px, 0.6vw + 7px, 12px) clamp(11px, 0.7vw + 10px, 16px) 7px;
  border-radius: 18px;
  position: relative;
  min-width: 0;
}
.bubble.holder {
  background: var(--holder-bubble);
  color: #ffe9b8;
  border-bottom-right-radius: 5px;
}
.bubble.blockstream {
  background: var(--blockstream-bubble);
  color: #d9fffa;
  border-bottom-left-radius: 5px;
}
.bubble.unconfirmed { outline: 1px dashed var(--holder); }

.name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  opacity: 0.75;
}
.msg {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--msg);
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.72;
}
.meta-row a { color: inherit; }
.ticks { color: #7ee0a8; letter-spacing: -0.08em; }

.sys-chip {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: #1c222d;
  border-radius: 999px;
  padding: 6px 12px;
}

.pay {
  text-align: center;
  background: #1a2430;
  border: 1px solid #35506a;
  border-radius: 18px;
  padding: 14px 16px 10px;
}
.pay .amt {
  font-size: clamp(1.3rem, 0.5vw + 1.2rem, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--holder);
}
.pay.return .amt { color: var(--holder); }
.pay .amt-usd {
  color: #e0a84a;
  font-weight: 500;
}
.pay .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pay .meta-row {
  justify-content: center;
  margin-top: 8px;
}

.lock {
  font-size: 14px;
  line-height: 1.4;
}
.lock small { display: block; margin-top: 4px; opacity: 0.7; font-size: 12px; }

details.cipher { margin-top: 8px; }
details.cipher summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.8;
}
details.cipher pre {
  margin: 8px 0 0;
  max-height: 200px;
  overflow: auto;
  font-size: 10px;
  line-height: 1.4;
  white-space: pre-wrap;
  opacity: 0.85;
}

.composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px calc(14px + var(--safe-b));
  background: #1a1f29;
  border-top: 1px solid var(--line);
}
.composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #0e1218;
  color: var(--muted);
  font: inherit;
}
.composer button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #2a3140;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  flex-shrink: 0;
}

.identities h2, #verify h2, #flows h2, #sources h2 {
  font-size: clamp(1.2rem, 0.4vw + 1.1rem, 1.5rem);
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}
.section-sub, .identities p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.identities ul, .sources, .flow { list-style: none; padding: 0; margin: 0 0 36px; }
.identities li, .sources li, .flow li {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.who {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  margin-right: 8px;
}
.who.holder { color: var(--holder); }
.who.blockstream { color: var(--blockstream); }
.who.federation { color: var(--federation); }

a { color: var(--blockstream); }
a:hover { color: #b7fff8; }
code { font-family: var(--mono); font-size: 0.86em; }

.prose { color: #c9cdd6; max-width: 62ch; margin-bottom: 36px; }
.flow time { font-family: var(--mono); font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }

.empty { text-align: center; color: var(--muted); padding: 24px; }

footer {
  padding: 8px 0 calc(40px + var(--safe-b));
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  :root { --bubble-cap: min(86%, 28rem); }
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  :root { --bubble-cap: min(88%, 24rem); }
  .stats { grid-template-columns: 1fr; }
  .phone {
    width: 100%;
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-bottom: 32px;
  }
  .composer {
    padding-left: calc(12px + var(--safe-l));
    padding-right: calc(12px + var(--safe-r));
  }
  .chat-bar {
    padding-left: calc(14px + var(--safe-l));
    padding-right: calc(14px + var(--safe-r));
  }
  .thread { padding-left: calc(10px + var(--safe-l)); padding-right: calc(10px + var(--safe-r)); }
}

@media (min-width: 1280px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 2400px) {
  .stats { gap: 16px; }
}