:root {
  color-scheme: dark;
  --bg:#090b0a;
  --panel:#111412;
  --panel-2:#171b18;
  --ink:#f2f4ec;
  --muted:#9ca49d;
  --line:#343a35;
  --acid:#b9ff32;
  --acid-ink:#071000;
  --cyan:#49dfe3;
  --coral:#ff705f;
  --yellow:#ffd24a;
  --header:66px;
  font-family:Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); letter-spacing:0; }
button, input, textarea { font:inherit; letter-spacing:0; }
a { color:inherit; }

.skip-link {
  position:fixed;
  z-index:100;
  top:8px;
  left:8px;
  transform:translateY(-160%);
  padding:10px 14px;
  background:var(--acid);
  color:var(--acid-ink);
}
.skip-link:focus { transform:none; }

.invite-topbar {
  position:sticky;
  z-index:30;
  top:0;
  min-height:var(--header);
  display:grid;
  grid-template-columns:minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items:center;
  gap:24px;
  padding:0 28px;
  border-bottom:1px solid rgba(255,255,255,.18);
  background:rgba(9,11,10,.94);
  backdrop-filter:blur(14px);
}

.brand {
  width:max-content;
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  font-weight:800;
}
.brand__mark { color:var(--acid); font:800 23px/1 Consolas, "SFMono-Regular", monospace; }
.brand__word { font-size:13px; text-transform:uppercase; }

.invite-topbar nav { justify-self:end; display:flex; gap:20px; }
.invite-topbar nav a,
.topbar-state {
  color:#d9ddd6;
  font:700 10px/1.2 Consolas, "SFMono-Regular", monospace;
  text-decoration:none;
  text-transform:uppercase;
}
.invite-topbar nav a:hover,
.invite-topbar nav a:focus-visible { color:var(--acid); }
.topbar-state { display:inline-flex; align-items:center; gap:9px; }
.topbar-state > span { width:8px; height:8px; background:var(--yellow); }
.topbar-state[data-page-state="ready"] > span { background:var(--acid); }
.topbar-state[data-page-state="error"] > span { background:var(--coral); }

main { overflow:hidden; }
.invite-hero {
  min-height:650px;
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(420px, .92fr);
  border-bottom:1px solid var(--line);
}
.invite-hero__content {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:84px max(40px, calc((100vw - 1320px) / 2)) 64px max(40px, calc((100vw - 1320px) / 2));
}
.eyebrow {
  margin:0 0 18px;
  color:var(--acid);
  font:800 10px/1.4 Consolas, "SFMono-Regular", monospace;
  text-transform:uppercase;
}
.invite-hero h1 {
  max-width:780px;
  margin:0;
  font-size:58px;
  line-height:1.02;
  font-weight:800;
  overflow-wrap:anywhere;
}
.invite-hero__intro {
  max-width:700px;
  margin:28px 0 0;
  color:#c6ccc5;
  font-size:17px;
  line-height:1.65;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.command,
.role-command {
  min-height:46px;
  border:1px solid transparent;
  border-radius:4px;
  padding:0 18px;
  cursor:pointer;
  font:800 11px/1.2 Consolas, "SFMono-Regular", monospace;
  text-transform:uppercase;
}
.command--primary { background:var(--acid); color:var(--acid-ink); }
.command--secondary { border-color:#667068; background:transparent; color:var(--ink); }
.command:hover,
.command:focus-visible,
.role-command:hover,
.role-command:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.copy-feedback { min-height:20px; margin:12px 0 0; color:var(--cyan); font:700 10px/1.4 Consolas, "SFMono-Regular", monospace; }

.invite-hero__visual { position:relative; min-height:650px; overflow:hidden; border-left:1px solid var(--line); background:#141815; }
.invite-hero__visual picture,
.invite-hero__visual img { width:100%; height:100%; display:block; }
.invite-hero__visual img { object-fit:cover; object-position:center; filter:saturate(.65) contrast(1.18) brightness(.46); }
.visual-console {
  position:absolute;
  inset:auto 28px 28px;
  padding:24px;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(9,11,10,.9);
}
.visual-console > span { color:#c5ccc5; font:700 9px/1.3 Consolas, "SFMono-Regular", monospace; }
.visual-console > div { display:grid; grid-template-columns:repeat(8, minmax(38px, 1fr)); margin:18px 0; border:1px solid #4a524b; }
.visual-console b { min-height:58px; display:grid; place-items:center; border-right:1px solid #4a524b; color:var(--acid); font:800 16px/1 Consolas, "SFMono-Regular", monospace; }
.visual-console b:nth-child(3n + 2) { color:var(--cyan); }
.visual-console b:nth-child(3n) { color:var(--coral); }
.visual-console b:last-child { border-right:0; color:var(--yellow); }
.visual-console p { margin:0; color:#b8c0b9; font:700 9px/1.7 Consolas, "SFMono-Regular", monospace; }
.visual-console p strong { color:#fff; font-size:14px; }

.live-strip {
  display:grid;
  grid-template-columns:repeat(5, minmax(120px, 1fr)) auto;
  border-bottom:1px solid var(--line);
  background:#0f1210;
}
.live-strip > div {
  min-width:0;
  min-height:84px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:14px 20px;
  border-right:1px solid var(--line);
}
.live-strip span { color:#808981; font:700 8px/1.3 Consolas, "SFMono-Regular", monospace; }
.live-strip strong { color:#edf1e9; font:800 12px/1.4 Consolas, "SFMono-Regular", monospace; overflow-wrap:anywhere; }
.live-strip button { min-width:94px; border:0; border-left:1px solid var(--line); background:#171b18; color:var(--acid); cursor:pointer; font:800 9px/1 Consolas, "SFMono-Regular", monospace; }
.live-strip button:hover,
.live-strip button:focus-visible { background:var(--acid); color:var(--acid-ink); }


.connection-section {
  padding:86px max(28px, calc((100vw - 1320px) / 2));
  border-bottom:1px solid var(--line);
  background:#0c0f0d;
}
.connection-section__heading {
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(320px, .75fr);
  gap:60px;
  align-items:end;
  margin-bottom:34px;
}
.connection-section__heading h2 { max-width:760px; margin:0; font-size:38px; line-height:1.08; overflow-wrap:anywhere; }
.connection-section__heading > p { margin:0; color:var(--muted); line-height:1.65; }
.connection-terminal {
  display:grid;
  grid-template-columns:minmax(340px, .82fr) minmax(300px, 1fr) auto;
  align-items:stretch;
  border:1px solid #4b554d;
  background:#080a09;
}
.connection-terminal__meta { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.connection-terminal__meta span { min-width:0; display:grid; align-content:center; gap:7px; padding:18px; border-right:1px solid #343a35; }
.connection-terminal__meta small { color:#788279; font:700 8px/1.3 Consolas, "SFMono-Regular", monospace; }
.connection-terminal__meta strong { color:var(--acid); font:800 10px/1.4 Consolas, "SFMono-Regular", monospace; overflow-wrap:anywhere; }
.connection-terminal code { min-width:0; display:flex; align-items:center; padding:18px 22px; color:var(--cyan); border-right:1px solid #4b554d; font:700 11px/1.5 Consolas, "SFMono-Regular", monospace; overflow-wrap:anywhere; }
.connection-terminal .command { min-width:210px; margin:12px; }
.connection-copy-feedback { min-height:20px; margin:8px 0 -2px; color:var(--cyan); text-align:right; font:700 10px/1.5 Consolas, "SFMono-Regular", monospace; }
.connection-steps { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin:22px 0 0; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.connection-steps li { min-width:0; display:grid; grid-template-columns:48px minmax(0, 1fr); gap:16px; padding:24px 22px; border-right:1px solid var(--line); }
.connection-steps li:last-child { border-right:0; }
.connection-steps li > span { color:var(--coral); font:800 12px/1.4 Consolas, "SFMono-Regular", monospace; }
.connection-steps strong { display:block; margin-bottom:9px; font-size:15px; }
.connection-steps p { margin:0; color:#939c94; font-size:13px; line-height:1.6; }
.connection-discovery { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:18px; color:#7d867e; font:700 9px/1.4 Consolas, "SFMono-Regular", monospace; }
.connection-discovery a { color:var(--yellow); text-decoration:none; }
.connection-discovery a:hover,
.connection-discovery a:focus-visible { color:var(--acid); }

.role-section,
.truth-section { padding:92px max(28px, calc((100vw - 1320px) / 2)); }
.section-heading {
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(300px, .75fr);
  gap:60px;
  align-items:end;
  margin-bottom:38px;
}
.section-heading h2,
.prompt-section h2 { max-width:760px; margin:0; font-size:38px; line-height:1.08; overflow-wrap:anywhere; }
.section-heading > p { margin:0; color:var(--muted); line-height:1.65; }

.role-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.role-card {
  min-width:0;
  min-height:490px;
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
}
.role-card[data-state="ready"] { border-color:var(--acid); }
.role-card--b[data-state="ready"] { border-color:var(--coral); }
.role-card--decoder[data-state="ready"] { border-color:var(--yellow); }
.role-card > header { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.role-index { display:grid; width:48px; aspect-ratio:1; place-items:center; border:1px solid var(--acid); color:var(--acid); font:800 20px/1 Consolas, "SFMono-Regular", monospace; }
.role-card--b .role-index { border-color:var(--coral); color:var(--coral); }
.role-card--decoder .role-index { border-color:var(--yellow); color:var(--yellow); }
.role-availability { padding:7px 9px; border:1px solid #525a53; border-radius:2px; color:#aeb6af; font:800 8px/1 Consolas, "SFMono-Regular", monospace; }
.role-card[data-state="ready"] .role-availability { border-color:var(--acid); color:var(--acid); }
.role-card--b[data-state="ready"] .role-availability { border-color:var(--coral); color:var(--coral); }
.role-card--decoder[data-state="ready"] .role-availability { border-color:var(--yellow); color:var(--yellow); }
.role-card__body { margin:58px 0 36px; }
.role-kicker { margin:0 0 12px; color:#838c84; font:800 9px/1.3 Consolas, "SFMono-Regular", monospace; }
.role-card h3 { margin:0; font-size:27px; line-height:1.08; overflow-wrap:anywhere; }
.role-card__body > p:last-child { margin:16px 0 0; color:#abb3ac; line-height:1.6; }
.role-card dl { display:grid; margin:auto 0 22px; border-top:1px solid var(--line); }
.role-card dl > div { display:grid; grid-template-columns:92px minmax(0, 1fr); gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.role-card dt { color:#788179; font:700 8px/1.4 Consolas, "SFMono-Regular", monospace; }
.role-card dd { margin:0; color:#d7dcd5; font:700 10px/1.4 Consolas, "SFMono-Regular", monospace; overflow-wrap:anywhere; }
.role-command { width:100%; margin-top:auto; border-color:#5d655e; background:#1b201c; color:var(--ink); }
.role-card[data-state="ready"] .role-command { border-color:var(--acid); background:var(--acid); color:var(--acid-ink); }
.role-card--b[data-state="ready"] .role-command { border-color:var(--coral); background:var(--coral); color:#190402; }
.role-card--decoder[data-state="ready"] .role-command { border-color:var(--yellow); background:var(--yellow); color:#160f00; }

.prompt-section {
  scroll-margin-top:calc(var(--header) + 14px);
  margin:0 max(28px, calc((100vw - 1320px) / 2));
  border:1px solid #465048;
  background:#111512;
}
.prompt-section__head {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .65fr);
  gap:34px;
  align-items:end;
  padding:30px;
  border-bottom:1px solid #465048;
}
.endpoint-lockup { display:grid; gap:8px; }
.endpoint-lockup span { color:#7e8880; font:700 8px/1.3 Consolas, "SFMono-Regular", monospace; }
.endpoint-lockup code { color:var(--cyan); font:700 11px/1.5 Consolas, "SFMono-Regular", monospace; overflow-wrap:anywhere; }
.prompt-output {
  min-height:360px;
  max-height:560px;
  margin:0;
  overflow:auto;
  padding:30px;
  border:0;
  background:#080a09;
  color:#dce2d9;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:500 13px/1.72 Consolas, "SFMono-Regular", monospace;
}
.prompt-actions { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 30px; border-top:1px solid #465048; }
.text-command { color:var(--cyan); font:800 9px/1.4 Consolas, "SFMono-Regular", monospace; text-decoration:none; }
.text-command:hover,
.text-command:focus-visible { color:var(--acid); }

.truth-section { background:#e9eee7; color:#111611; margin-top:92px; }
.truth-section .eyebrow { color:#2c6300; }
.truth-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border:1px solid #293029; background:#293029; gap:1px; }
.truth-grid > div { min-height:190px; padding:24px; background:#f7f9f3; }
.truth-grid strong { display:block; margin-bottom:20px; font-size:18px; }
.truth-grid p { margin:0; color:#505951; line-height:1.6; }

.invite-footer {
  min-height:110px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:30px max(28px, calc((100vw - 1320px) / 2));
  border-top:1px solid var(--line);
  color:#9da59e;
  font:700 9px/1.4 Consolas, "SFMono-Regular", monospace;
}
.invite-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }
.invite-footer a { text-decoration:none; }
.invite-footer a:hover,
.invite-footer a:focus-visible { color:var(--acid); }

@media (max-width:1060px) {
  .invite-hero { grid-template-columns:1fr; }
  .invite-hero__visual { min-height:430px; border-left:0; border-top:1px solid var(--line); }
  .live-strip { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .live-strip button { min-height:64px; border-top:1px solid var(--line); }
  .connection-section__heading { grid-template-columns:1fr; gap:22px; }
  .connection-terminal { grid-template-columns:1fr; }
  .connection-terminal code { border-top:1px solid #343a35; border-right:0; }
  .connection-terminal .command { width:auto; }
  .role-grid { grid-template-columns:1fr; }
  .role-card { min-height:0; }
  .role-card__body { margin:42px 0 28px; }
  .truth-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:720px) {
  .invite-topbar { grid-template-columns:1fr auto; padding:0 16px; }
  .topbar-state { justify-self:end; }
  .invite-topbar nav { display:none; }
  .invite-hero { min-height:0; }
  .invite-hero__content { padding:70px 20px 48px; }
  .invite-hero h1 { font-size:38px; line-height:1.04; }
  .invite-hero__intro { font-size:15px; }
  .hero-actions { display:grid; }
  .command { width:100%; }
  .invite-hero__visual { min-height:350px; }
  .visual-console { inset:auto 14px 14px; padding:16px; }
  .visual-console > div { grid-template-columns:repeat(4, minmax(48px, 1fr)); }
  .visual-console b { min-height:46px; border-bottom:1px solid #4a524b; }
  .visual-console b:nth-child(4n) { border-right:0; }
  .visual-console b:nth-child(n + 5) { border-bottom:0; }
  .live-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .live-strip > div { min-height:76px; padding:12px 14px; }
  .live-strip button { min-height:54px; }
  .connection-section,
  .role-section,
  .truth-section { padding:68px 20px; }
  .connection-section__heading h2 { font-size:30px; }
  .connection-terminal__meta { grid-template-columns:1fr; }
  .connection-terminal__meta span { min-height:66px; border-right:0; border-bottom:1px solid #343a35; }
  .connection-terminal code { padding:18px; }
  .connection-terminal .command { width:calc(100% - 24px); min-width:0; }
  .connection-copy-feedback { text-align:left; }
  .connection-steps { grid-template-columns:1fr; }
  .connection-steps li { border-right:0; border-bottom:1px solid var(--line); }
  .connection-steps li:last-child { border-bottom:0; }
  .connection-discovery { align-items:flex-start; flex-direction:column; }
  .section-heading { grid-template-columns:1fr; gap:20px; }
  .section-heading h2,
  .prompt-section h2 { font-size:30px; }
  .role-card { padding:20px; }
  .prompt-section { margin:0 20px; }
  .prompt-section__head { grid-template-columns:1fr; padding:22px; }
  .prompt-output { min-height:440px; padding:22px; font-size:12px; }
  .prompt-actions { align-items:stretch; flex-direction:column; padding:18px 22px; }
  .prompt-actions .command { width:100%; }
  .truth-section { margin-top:68px; }
  .truth-grid { grid-template-columns:1fr; }
  .truth-grid > div { min-height:0; }
  .invite-footer { align-items:flex-start; flex-direction:column; }
  .invite-footer nav { justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}