/* Geist + Geist Mono, SIL Open Font License, served same-origin because the
   CSP forbids font CDNs. Both are variable, so one file covers every weight. */
@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ============================================================================
   OBSERVATORY
   A deep-space instrument panel. The otherworldly feeling comes from depth —
   a near-black indigo ground, one cyan signal, luminous hairlines and a very
   sparse starfield — never from blur, because this app renders 919 endpoints
   in tables and those have to stay razor sharp.

   Light theme is the same instrument at daylight: cool paper, same signal.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* daylight observatory */
  --paper:     #E9EEF6;
  --card:      #F7FAFD;
  --sunk:      #DCE4EF;
  --ink:       #0A1020;
  --ink-soft:  #42536E;
  --ink-faint: #6B7C97;
  --rule:      #C6D1E2;

  --signal:    #0E7C9B;   /* the one accent */
  --signal-dim:#8FC4D6;
  --glow:      0 0 0 1px rgba(14,124,155,.28), 0 0 18px -4px rgba(14,124,155,.45);
  --hazard:    #9A6A0C;
  --hazard-bg: #E0A93C;
  --bay:       #0E7C9B;
  --good:      #2F7D5E;
  --warn:      #A06A12;
  --alert:     #C1442F;

  --p-lalit:  #0E7C9B;
  --p-ashish: #9A6A0C;
  --p-faiz:   #B4442E;
  --p-naresh: #217A57;
  --p-gokul:  #5B4FC7;

  --shell:     min(1680px, 94vw);
  --star:      rgba(10,16,32,.30);
  --veil:      rgba(233,238,246,.72);
  --sigil:     #2B3E5C;

  --ff-display: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-body: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-data: "Geist Mono", "SF Mono", Menlo, ui-monospace, "Courier New", monospace;
}

/* deep space — the default for anyone whose OS is dark, and the pinned choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #05070E;
    --card:      #0B101C;
    --sunk:      #080C16;
    --ink:       #DCE4F0;
    --ink-soft:  #93A2BC;
    --ink-faint: #64738C;
    --rule:      #1B2436;

    --signal:    #6FE3FF;
    --signal-dim:#2A6E85;
    --glow:      0 0 0 1px rgba(111,227,255,.30), 0 0 22px -6px rgba(111,227,255,.55);
    --hazard:    #F0C33C;
    --hazard-bg: #E8B004;
    --bay:       #6FE3FF;
    --good:      #5FD3A6;
    --warn:      #F0B357;
    --alert:     #FF7A6B;

    --p-lalit:  #6FE3FF;
    --p-ashish: #FFC66B;
    --p-faiz:   #FF8F7A;
    --p-naresh: #6FE0B0;
    --p-gokul:  #A99BFF;

    --star:      rgba(220,228,240,.55);
    --veil:      rgba(5,7,14,.72);
    --sigil:     #9FB0CC;
  }
}

:root[data-theme="dark"] {
  --paper:     #05070E;
  --card:      #0B101C;
  --sunk:      #080C16;
  --ink:       #DCE4F0;
  --ink-soft:  #93A2BC;
  --ink-faint: #64738C;
  --rule:      #1B2436;

  --signal:    #6FE3FF;
  --signal-dim:#2A6E85;
  --glow:      0 0 0 1px rgba(111,227,255,.30), 0 0 22px -6px rgba(111,227,255,.55);
  --hazard:    #F0C33C;
  --hazard-bg: #E8B004;
  --bay:       #6FE3FF;
  --good:      #5FD3A6;
  --warn:      #F0B357;
  --alert:     #FF7A6B;

  --p-lalit:  #6FE3FF;
  --p-ashish: #FFC66B;
  --p-faiz:   #FF8F7A;
  --p-naresh: #6FE0B0;
  --p-gokul:  #A99BFF;

  --star:      rgba(220,228,240,.55);
  --veil:      rgba(5,7,14,.72);
  --sigil:     #9FB0CC;
}


  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 1.6;
  }
  .wrap {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 28px 96px;
  }

  /* ---------------------------------------------------------- typography */
  h1, h2, h3 { font-family: var(--ff-display); font-weight: 600; text-wrap: balance; margin: 0; }
  h1 { font-size: clamp(38px, 7vw, 62px); line-height: 0.98; letter-spacing: 0.005em; }
  h2 { font-size: clamp(26px, 4vw, 34px); line-height: 1.08; }
  h3 { font-size: 19px; line-height: 1.2; }
  p { margin: 0; }
  a { color: var(--bay); }
  .eyebrow {
    font-family: var(--ff-data);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .lede { font-size: 17.5px; color: var(--ink-soft); max-width: 62ch; }
  .mono { font-family: var(--ff-data); }
  .num { font-family: var(--ff-data); font-variant-numeric: tabular-nums; }

  /* -------------------------------------------------------------- header */
  header.masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--card);
  }
  .masthead-inner {
    max-width: var(--shell); margin: 0 auto; padding: 40px 28px 30px;
    display: flex; flex-direction: column; gap: 20px;
    border-top: 5px solid var(--hazard-bg);
  }
  .masthead-top { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: baseline; justify-content: space-between; }
  .stamp {
    font-family: var(--ff-data); font-size: 11px; line-height: 1.7;
    color: var(--ink-faint); text-align: right; letter-spacing: 0.04em;
  }
  .stamp b { color: var(--ink-soft); font-weight: 400; }

  .figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .figure { background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
  .figure .v { font-family: var(--ff-data); font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .figure .k { font-family: var(--ff-data); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

  /* ------------------------------------------------------------ sections */
  section { padding-top: 62px; }
  .sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
  .sec-head .rule-line { height: 1px; background: var(--rule); margin-top: 4px; }

  .card {
    background: var(--card);
    border: 1px solid var(--rule);
  }

  /* ---------------------------------------------------------- contributors */
  .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
  .person { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--who); }
  .person .name { font-family: var(--ff-display); font-size: 21px; line-height: 1.1; }
  .person .role { font-family: var(--ff-data); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--who); }
  .person .bars { display: flex; flex-direction: column; gap: 5px; }
  .barline { display: grid; grid-template-columns: 62px 1fr 42px; align-items: center; gap: 8px; font-family: var(--ff-data); font-size: 10.5px; color: var(--ink-faint); }
  .barline .track { height: 7px; background: var(--sunk); }
  .barline .fill { height: 7px; background: var(--who); }
  .barline .val { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .person .says { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
  .person .quote { font-family: var(--ff-data); font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); border-left: 2px solid var(--rule); padding-left: 9px; }

  /* --------------------------------------------------------------- tables */
  .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { border-collapse: collapse; width: 100%; font-size: 14px; }
  th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); }
  thead th {
    font-family: var(--ff-data); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
    border-bottom: 1px solid var(--ink-soft); white-space: nowrap;
  }
  td.n, th.n { text-align: right; font-family: var(--ff-data); font-variant-numeric: tabular-nums; }
  tbody tr:last-child td { border-bottom: none; }
  .dirname { font-family: var(--ff-data); font-size: 12.5px; white-space: nowrap; }

  /* heat cells */
  td.heat { text-align: right; font-family: var(--ff-data); font-variant-numeric: tabular-nums; font-size: 12.5px; position: relative; }
  td.heat span { position: relative; }
  td.heat::before {
    content: ""; position: absolute; inset: 1px;
    background: var(--who); opacity: var(--heat, 0);
  }
  td.zero { color: var(--ink-faint); opacity: 0.5; }

  /* ------------------------------------------------------------- timeline */
  .months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .month { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .month .mlabel { font-family: var(--ff-data); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); }
  .month .total { font-family: var(--ff-data); font-size: 20px; font-variant-numeric: tabular-nums; }
  .stack { display: flex; height: 130px; align-items: flex-end; gap: 4px; }
  .stack .col { flex: 1; background: var(--who); min-height: 2px; }

  /* --------------------------------------------------------------- lanes */
  .lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
  .lane { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; border-left: 3px solid var(--who); }
  .lane h3 { color: var(--ink); }
  .lane .for { font-family: var(--ff-data); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--who); }
  .lane ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; counter-reset: step; }
  .lane ol li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 14.5px; line-height: 1.5; }
  .lane ol li::before {
    counter-increment: step; content: counter(step);
    font-family: var(--ff-data); font-size: 11px; color: var(--who);
    border: 1px solid var(--rule); text-align: center; line-height: 18px; height: 19px;
  }
  .lane code, .path { font-family: var(--ff-data); font-size: 12.5px; background: var(--sunk); padding: 1px 4px; }
  .lane .payoff { font-size: 13.5px; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 10px; }

  /* --------------------------------------------------------------- rules */
  .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  .rule { background: var(--card); padding: 13px 14px; display: flex; flex-direction: column; gap: 5px; }
  .rule .rname { font-family: var(--ff-display); font-size: 17px; line-height: 1.15; }
  .rule .rwhy { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

  /* -------------------------------------------------------------- flags */
  .flags { display: flex; flex-direction: column; gap: 10px; }
  .flag { padding: 13px 15px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; border-left: 3px solid var(--tone); }
  .flag .tag {
    font-family: var(--ff-data); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--tone); border: 1px solid var(--tone); padding: 2px 6px; white-space: nowrap; margin-top: 3px;
  }
  .flag .body { display: flex; flex-direction: column; gap: 3px; }
  .flag .title { font-family: var(--ff-display); font-size: 17.5px; line-height: 1.2; }
  .flag .detail { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

  /* -------------------------------------------------------------- topbar */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--card); border-bottom: 1px solid var(--rule);
  }
  .topbar-inner {
    max-width: var(--shell); margin: 0 auto; padding: 8px 28px;
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  }
  .topbar nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; }
  .topbar nav a {
    font-family: var(--ff-data); font-size: 11px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
    padding: 4px 7px;
  }
  .topbar nav a:hover { color: var(--ink); background: var(--sunk); }
  .topbar .brand {
    font-family: var(--ff-display); font-size: 16px; letter-spacing: 0.01em;
    white-space: nowrap; padding-right: 4px;
  }
  .themer { display: flex; border: 1px solid var(--rule); }
  .themer button {
    font-family: var(--ff-data); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    background: none; border: none; color: var(--ink-faint); padding: 4px 8px; cursor: pointer;
  }
  .themer button + button { border-left: 1px solid var(--rule); }
  .themer button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .themer button:hover { color: var(--ink); }
  .themer button[aria-pressed="true"]:hover { color: var(--paper); }

  /* --------------------------------------------------------------- index */
  .searchbar { display: flex; gap: 0; margin-bottom: 16px; }
  .searchbar input {
    flex: 1; min-width: 0;
    font-family: var(--ff-data); font-size: 14px; padding: 10px 12px;
    color: var(--ink); background: var(--card);
    border: 1px solid var(--rule); border-radius: 0;
  }
  .searchbar input:focus-visible { outline: 2px solid var(--bay); outline-offset: -1px; }
  .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .filters button {
    font-family: var(--ff-data); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--card); color: var(--ink-faint);
    border: 1px solid var(--rule); padding: 4px 9px; cursor: pointer;
  }
  .filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .hits { display: flex; flex-direction: column; }
  .hit {
    display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: baseline;
    padding: 8px 12px; border: 1px solid var(--rule); border-bottom: none;
    background: var(--card); text-align: left; width: 100%; cursor: pointer;
    font: inherit; color: inherit;
  }
  .hit:last-child { border-bottom: 1px solid var(--rule); }
  .hit:hover { background: var(--sunk); }
  .hit .kind {
    font-family: var(--ff-data); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint);
  }
  .hit .label { font-family: var(--ff-data); font-size: 13px; overflow-wrap: anywhere; }
  .hit .where { font-family: var(--ff-data); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
  .hit .label em { font-style: normal; background: var(--hazard-bg); color: #14181D; padding: 0 1px; }
  .hitcount { font-family: var(--ff-data); font-size: 11px; color: var(--ink-faint); margin-top: 10px; }

  /* ------------------------------------------------------ generated flows */
  .picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
  .picker button {
    font-family: var(--ff-data); font-size: 11.5px; letter-spacing: 0.03em;
    background: var(--card); color: var(--ink-soft);
    border: 1px solid var(--rule); padding: 5px 9px; cursor: pointer;
  }
  .picker button:hover { color: var(--ink); border-color: var(--ink-faint); }
  .picker button[aria-selected="true"] {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  .picker button .c { opacity: 0.6; margin-left: 5px; }

  .flowgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
  .flow { padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
  .flow-head { display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid var(--rule); padding-bottom: 9px; }
  .flow-title { font-family: var(--ff-display); font-size: 18px; line-height: 1.15; }
  .flow-meta { font-family: var(--ff-data); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.04em; }
  .flow-meta .screen::before { content: "screen: "; opacity: 0.65; }
  .flow-meta .todo { color: var(--warn); border: 1px solid var(--warn); padding: 1px 5px; margin-left: 6px; }

  .ladder { display: flex; flex-direction: column; }
  .rung { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 12px; position: relative; }
  .rung:last-child { padding-bottom: 0; }
  /* the connector between step markers */
  .rung:not(:last-child)::before {
    content: ""; position: absolute; left: 10.5px; top: 21px; bottom: 1px;
    width: 1px; background: var(--rule);
  }
  .rung .marker {
    font-family: var(--ff-data); font-size: 10.5px; line-height: 19px; height: 20px; width: 20px;
    text-align: center; color: var(--ink-soft); border: 1px solid var(--rule);
    background: var(--card); position: relative; z-index: 1;
  }
  .rung .content { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .rung .prose { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
  .calls { display: flex; flex-direction: column; gap: 3px; }
  .call { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
  .verb {
    font-family: var(--ff-data); font-size: 9.5px; letter-spacing: 0.07em;
    padding: 1px 5px; color: var(--paper); background: var(--verb); white-space: nowrap;
  }
  .route {
    font-family: var(--ff-data); font-size: 12px; color: var(--ink);
    overflow-wrap: anywhere;
  }
  .flow-errors {
    font-family: var(--ff-data); font-size: 11px; line-height: 1.5; color: var(--ink-faint);
    border-top: 1px solid var(--rule); padding-top: 9px;
  }
  .flow-errors b { color: var(--warn); font-weight: 400; }
  .surface { display: flex; height: 8px; gap: 1px; }
  .surface span { background: var(--verb); }
  .surface-key { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--ff-data); font-size: 10.5px; color: var(--ink-faint); }
  .surface-key i { font-style: normal; display: inline-block; width: 8px; height: 8px; background: var(--verb); margin-right: 5px; }

  /* -------------------------------------------------------------- figure */
  figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
  figcaption { font-family: var(--ff-data); font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }
  .diagram { padding: 18px 14px; }
  .diagram svg { display: block; width: 100%; height: auto; }

  footer.foot {
    margin-top: 70px; border-top: 1px solid var(--rule); padding-top: 18px;
    display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: baseline;
    font-family: var(--ff-data); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em;
  }
  .signout {
    font-family: var(--ff-data); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    background: none; border: 1px solid var(--rule); color: var(--ink-soft); padding: 5px 10px; cursor: pointer;
  }
  .signout:hover { border-color: var(--ink-soft); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--bay); outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .fill, .stack .col { transition: none; }
  }
  @media (max-width: 700px) {
    .months { grid-template-columns: repeat(2, 1fr); }
    .stamp { text-align: left; }
  }

/* ============================================================ page classes
   The single-page version set --who/--verb/--tone inline. Server-rendered
   pages set them with a class instead, so no style attribute is needed. */

.person-lalit  { --who: var(--p-lalit); }
.person-ashish { --who: var(--p-ashish); }
.person-faiz   { --who: var(--p-faiz); }
.person-naresh { --who: var(--p-naresh); }
.person-gokul  { --who: var(--p-gokul); }

.lane-lalit  { --who: var(--p-lalit); }
.lane-ashish { --who: var(--p-ashish); }
.lane-faiz   { --who: var(--p-faiz); }
.lane-naresh { --who: var(--p-naresh); }

.heat-lalit  { --who: var(--p-lalit); }
.heat-ashish { --who: var(--p-ashish); }
.heat-faiz   { --who: var(--p-faiz); }
.heat-naresh { --who: var(--p-naresh); }
.heat-gokul  { --who: var(--p-gokul); }

.col-lalit  { --who: var(--p-lalit); }
.col-ashish { --who: var(--p-ashish); }
.col-faiz   { --who: var(--p-faiz); }
.col-naresh { --who: var(--p-naresh); }
.col-gokul  { --who: var(--p-gokul); }

.flag-alert { --tone: var(--alert); }
.flag-warn  { --tone: var(--warn); }
.flag-bay   { --tone: var(--bay); }
.flag-good  { --tone: var(--good); }

.verb-GET,    .verb-bg-GET    { --verb: var(--bay); }
.verb-POST,   .verb-bg-POST   { --verb: var(--p-naresh); }
.verb-PATCH,  .verb-bg-PATCH  { --verb: var(--p-ashish); }
.verb-PUT,    .verb-bg-PUT    { --verb: var(--p-ashish); }
.verb-DELETE, .verb-bg-DELETE { --verb: var(--alert); }
.verb-bg-GET, .verb-bg-POST, .verb-bg-PATCH, .verb-bg-PUT, .verb-bg-DELETE {
  background: var(--verb);
}

/* ------------------------------------------------------------- topbar bits */
.topbar .brand { color: inherit; text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--ink); background: var(--sunk); }
.topsearch { display: flex; }
.topsearch input {
  font-family: var(--ff-data); font-size: 12px; padding: 5px 9px; width: 190px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 0;
}
.topsearch input:focus-visible { outline: 2px solid var(--bay); outline-offset: -1px; }
.footactions { display: flex; align-items: center; gap: 14px; }
.footactions a { color: var(--ink-faint); }

/* --------------------------------------------------------------- headings */
.subhead {
  font-family: var(--ff-display); font-size: 21px; margin: 30px 0 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--rule);
}

/* -------------------------------------------------------------- jump cards */
.jumpcard { text-decoration: none; color: inherit; }
.jumpcard:hover { border-color: var(--ink-faint); }
.jumpcard h3 { margin: 2px 0 6px; }

/* ----------------------------------------------------------------- filters */
.filters { align-items: center; }
.filters .filter-input {
  flex: 1; min-width: 180px;
  font-family: var(--ff-data); font-size: 13px; padding: 7px 10px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 0;
}
.filters select {
  font-family: var(--ff-data); font-size: 12px; padding: 7px 8px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 0;
}
.filters button[type="submit"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  padding: 7px 14px;
}
.filters .clear { font-family: var(--ff-data); font-size: 11px; color: var(--ink-faint); }

/* --------------------------------------------------------------- services */
.todo-inline {
  font-family: var(--ff-data); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn);
  padding: 1px 5px; margin-left: 7px; white-space: nowrap;
}
.surface-inline { width: 110px; min-width: 110px; }
td .surface { height: 8px; }

/* ---------------------------------------------------------- service detail */
.resource { padding: 13px 15px; margin-bottom: 10px; }
.resource-name {
  font-family: var(--ff-data); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px;
}
.resource-name .c { color: var(--ink-faint); margin-left: 6px; }
.endpoint-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 18px; }

/* ------------------------------------------------------------------ flows */
.flowwrap { display: flex; flex-direction: column; gap: 5px; }
.flowowner {
  font-family: var(--ff-data); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
}
.flowowner:hover { color: var(--ink); }

/* ------------------------------------------------------------------ pager */
.pager {
  display: flex; gap: 18px; align-items: baseline; margin-top: 14px;
  font-family: var(--ff-data); font-size: 12px; color: var(--ink-faint);
}

/* -------------------------------------------------------------------- api */
.codeblock { padding: 14px 16px; overflow-x: auto; }
.codeblock pre { margin: 0; font-family: var(--ff-data); font-size: 12.5px; line-height: 1.55; }
.notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.notes li { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* search hits are links now, not buttons */
a.hit { text-decoration: none; color: inherit; }

/* --------------------------------------------------------------- backlink */
.backlink {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--ff-data); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
  border: 1px solid var(--rule); padding: 5px 10px; margin-bottom: 18px;
}
.backlink:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ============================================================================
   OBSERVATORY — depth, signal, and the choreography between pages
   ========================================================================= */

/* the starfield sits behind everything and never intercepts a click */
#sky {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* a faint horizon glow under the masthead, so the page has a "up" */
.masthead {
  position: relative;
  background:
    radial-gradient(120% 190% at 50% -60%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 62%),
    var(--card);
}
.masthead-inner { border-top: none; }
/* the hairline under the masthead is the instrument's horizon */
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: .55;
}

h1 { letter-spacing: 0.06em; text-transform: uppercase; }
.masthead h1 { font-size: clamp(34px, 6.2vw, 56px); }

/* stat tiles read as instrument readouts; the live one carries the glow */
.figure { position: relative; }
.figure .v { color: var(--ink); }
.figures .figure:last-child .v { color: var(--signal); }
.figures .figure:last-child::after {
  content: ""; position: absolute; top: 14px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); box-shadow: var(--glow);
}

/* panels lift off the ground instead of sitting flat on it */
.card { box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent); }

/* the signal is reserved for what is live or selected */
.picker button[aria-selected="true"],
.filters button[type="submit"],
.themer button[aria-pressed="true"] {
  background: var(--signal); color: var(--paper); border-color: var(--signal);
  box-shadow: var(--glow);
}
.topbar nav a[aria-current="page"] {
  color: var(--signal); background: transparent;
  box-shadow: inset 0 -1px 0 var(--signal);
}
input:focus-visible, select:focus-visible, :focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}

/* ------------------------------------------------------- the airlock, back */
/* Not a chevron in a box. A rail that opens: the bar retracts to the left and
   the arrow travels into the gap it leaves behind. */
.backlink {
  position: relative;
  border: none;
  padding: 7px 14px 7px 0;
  overflow: visible;
  color: var(--ink-soft);
  isolation: isolate;
}
/* the rail runs under the label, not through it */
.backlink::before {
  content: ""; position: absolute; left: 0; bottom: 2px;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--signal), transparent 85%);
  transform: scaleX(.55); transform-origin: left center;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
  opacity: .5;
}
.backlink span[aria-hidden] {
  display: inline-block;
  color: var(--signal);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.backlink:hover { color: var(--ink); border: none; }
.backlink:hover::before { transform: scaleX(1); opacity: 1; }
.backlink:hover span[aria-hidden] { transform: translateX(-6px); }
.backlink:focus-visible { outline-offset: 4px; }

/* ------------------------------------------------- open / close choreography */
/* Cross-document view transitions: the whole site behaves like one instrument
   changing panels, not a browser loading a document. */
@view-transition { navigation: auto; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.994); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes panel-out {
  from { opacity: 1; transform: none; filter: none; }
  to   { opacity: 0; transform: translateY(-6px) scale(.998); filter: blur(2px); }
}
/* a hairline sweeps across the viewport as the panel changes — the scan */
@keyframes scan {
  from { transform: scaleX(0); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: scaleX(1); opacity: 0; }
}

::view-transition-old(root) { animation: panel-out .20s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: panel-in  .34s cubic-bezier(.2,.8,.2,1) both; }

/* the scan line is drawn by the topbar, which persists across the transition */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
}
html:active-view-transition .topbar::after { animation: scan .5s ease-out both; }

/* Chrome persists these across the navigation instead of cross-fading them, so
   the frame stays put and only the panel inside it changes. A name has to be
   unique on the page — the team page carries three h2s, so headings are
   deliberately not named. */
.topbar { view-transition-name: topbar; }
.foot   { view-transition-name: foot; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .backlink::before, .backlink span[aria-hidden] { transition: none; }
  html:active-view-transition .topbar::after { animation: none; }
}

/* ---------------------------------------------------- Geist, set on purpose */
/* Geist's negative tracking at display sizes is the point: headings read
   compressed and engineered rather than airy. */
h1 {
  font-weight: 600;
  letter-spacing: -0.028em;
  text-transform: none;
}
.masthead h1 { font-size: clamp(38px, 6.6vw, 68px); line-height: 0.94; }
h2 { font-weight: 600; letter-spacing: -0.022em; }
h3, .flow-title, .person .name { font-weight: 600; letter-spacing: -0.014em; }
body { font-size: 15.5px; letter-spacing: -0.004em; }
.lede { font-size: 17px; letter-spacing: -0.008em; }
/* mono carries the data; give it room to breathe instead of tracking it in */
.mono, .num, .route, .dirname, .verb, .eyebrow, .flow-meta,
.stamp, .figure .k, .barline, .hitcount { letter-spacing: 0.01em; }
.eyebrow { letter-spacing: 0.18em; }

/* ============================================================================
   CONSOLE — search, fleet filter, and the generated sigils
   ========================================================================= */
.console-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 14px 0 18px; }
#fleet-filter {
  font-family: var(--ff-data); font-size: 13px; padding: 7px 10px; min-width: 210px;
  color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button, .chip-link {
  font-family: var(--ff-data); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--card); color: var(--ink-faint); border: 1px solid var(--rule);
  padding: 5px 9px; cursor: pointer; text-decoration: none;
}
.chips button:hover, .chip-link:hover { color: var(--ink); border-color: var(--ink-faint); }
.chips button[aria-pressed="true"] {
  background: var(--signal); color: var(--paper); border-color: var(--signal); box-shadow: var(--glow);
}
.verbs .chip-link { border-left: 3px solid var(--verb); color: var(--ink-soft); }
.verbs .chip-link span { color: var(--ink-faint); margin-left: 4px; }

/* the fleet: one craft per documented service */
.fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; }
.craft {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.craft:hover { border-color: var(--signal); transform: translateY(-2px); }
.craft:hover .sigil { color: var(--signal); }
.craft-art { flex: 0 0 52px; height: 52px; color: var(--sigil); transition: color .18s ease; }
.sigil { display: block; width: 100%; height: 100%; }
.craft-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.craft-name { font-family: var(--ff-display); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.craft-meta { font-family: var(--ff-data); font-size: 10.5px; color: var(--ink-soft); }
.craft-date { font-family: var(--ff-data); font-size: 10px; color: var(--ink-faint); }
.craft-flag {
  position: absolute; top: 9px; right: 9px;
  font-family: var(--ff-data); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--warn); border: 1px solid var(--warn); padding: 1px 4px;
}
.craft[hidden] { display: none; }

/* the sigil also heads its own service page and its row in the table */
.service-crest { flex: 0 0 68px; height: 68px; color: var(--signal); }
td .sigil { width: 28px; height: 28px; color: var(--sigil); }
.svc-cell { display: flex; align-items: center; gap: 9px; }

/* ============================================================================
   LOADER — a boot on first paint, a progress rail on every navigation
   ========================================================================= */
#rail {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 60; opacity: 0; pointer-events: none; overflow: hidden;
  /* solid by default: if animations are throttled — a background tab, a
     reduced-motion setting — the bar must still be visibly there */
  background: var(--signal-dim);
  box-shadow: var(--glow);
  transition: opacity .18s ease;
}
/* the travelling highlight is the enhancement, not the signal itself */
#rail::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  transform: translateX(-100%);
}
@keyframes rail-sweep { to { transform: translateX(100%); } }
html.nav-busy #rail { opacity: 1; }
html.nav-busy #rail::after { animation: rail-sweep 1s linear infinite; }
html.nav-done #rail { opacity: 0; }

/* first paint: the instrument comes up rather than snapping on */
@keyframes boot-veil { to { opacity: 0; visibility: hidden; } }
@keyframes boot-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#boot {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; gap: 14px;
  background: var(--paper);
  animation: boot-veil .5s ease .35s forwards;
}
#boot .boot-name {
  font-family: var(--ff-data); font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-faint);
}
#boot .boot-line {
  width: 168px; height: 1px; background: var(--signal);
  transform-origin: left center; animation: boot-line .55s cubic-bezier(.3,.7,.2,1) both;
}
.no-js #boot { display: none; }

@media (prefers-reduced-motion: reduce) {
  #boot { animation-delay: 0s; animation-duration: .01s; }
  #boot .boot-line { animation: none; }
  .craft { transition: none; }
  #rail { transition: none; }
}

.service-head { display: flex; align-items: flex-start; gap: 18px; }
@media (max-width: 640px) { .service-head { flex-direction: column; gap: 10px; } }

/* ============================================================================
   WELCOME — a staggered arrival, then a line that says what this is for
   ========================================================================= */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise {
  animation: rise .62s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(0.42s + var(--i) * 0.09s);   /* after the boot veil lifts */
}

/* the cycling phrase: fixed slot, so the paragraph never reflows */
.cycler {
  display: inline-block; position: relative;
  color: var(--signal); font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  padding-bottom: 1px;
}
.cycler span { display: inline-block; }
@keyframes phrase-in  { from { opacity: 0; transform: translateY(6px);  filter: blur(2px);} to { opacity: 1; transform: none; filter: none; } }
@keyframes phrase-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }
.cycler span.in  { animation: phrase-in  .42s cubic-bezier(.2,.8,.2,1) both; }
.cycler span.out { animation: phrase-out .28s ease both; }

/* how to use it */
.howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.howto-step { background: var(--card); padding: 13px 15px; display: flex; gap: 11px; align-items: flex-start; }
.howto-k {
  font-family: var(--ff-data); font-size: 11px; color: var(--signal);
  border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
  padding: 2px 5px; margin-top: 2px;
}
.howto-b { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.howto-b b { display: block; margin-bottom: 3px; font-family: var(--ff-display); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; }
.howto kbd {
  display: inline-block; min-width: 15px; text-align: center;
  font-family: var(--ff-data); font-size: 11px; border: 1px solid var(--rule);
  padding: 0 4px; background: var(--sunk); color: var(--ink);
}

/* the nav marker slides between tabs across a navigation */
.topbar nav a { position: relative; }
.topbar nav a[aria-current="page"] { box-shadow: none; }
.topbar nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 1px; height: 2px;
  background: var(--signal); box-shadow: var(--glow);
  view-transition-name: navmark;
}

/* the boot overlay sweeps like a radar before it lifts */
#boot .boot-sweep {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  position: relative; overflow: hidden;
}
@keyframes sweep { to { transform: rotate(360deg); } }
#boot .boot-sweep::after {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--signal) 55%, transparent) 60deg, transparent 90deg);
  animation: sweep 1.1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .cycler span.in, .cycler span.out { animation: none; }
  #boot .boot-sweep::after { animation: none; }
}

/* ============================================================================
   HERO — the document being read, and the diagram assembling out of it.
   One 9s loop: lines land, the beam sweeps, particles cross, nodes snap in.
   ========================================================================= */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 34px; align-items: center; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 22px; } }

.hero-art { width: 100%; height: auto; color: var(--signal); display: block; }
.hero-panel { fill: var(--card); stroke: var(--rule); stroke-width: 1; }
.hero-label { font-family: var(--ff-data); font-size: 9px; fill: var(--ink-faint); letter-spacing: .08em; }
.hero-lines rect { fill: var(--ink-faint); opacity: .5; }
.hero-verb  { font-family: var(--ff-data); font-size: 9px; fill: var(--signal); letter-spacing: .06em; }
.hero-route { font-family: var(--ff-data); font-size: 9px; fill: var(--ink); }
.hero-node rect { fill: var(--card); stroke: var(--signal); stroke-width: 1; }
.hero-link { stroke: var(--signal); stroke-width: 1; fill: none; opacity: .6; }
.hero-sigil ellipse { fill: none; stroke: var(--signal); stroke-width: 1; opacity: .45; }
.hero-sigil .hero-core { fill: var(--signal); }

@media (prefers-reduced-motion: no-preference) {
  /* text lands line by line */
  @keyframes doc-line { 0%,4% { transform: scaleX(0); opacity: 0; } 12%,100% { transform: scaleX(1); opacity: .5; } }
  .hero-lines rect {
    transform-box: fill-box; transform-origin: left center;
    animation: doc-line 9s linear infinite;
    animation-delay: calc(var(--l) * -0.04s);
  }
  /* the reading beam runs the height of the page, twice per loop */
  @keyframes doc-beam { 0% { transform: translateY(10px); opacity: 0; } 6% { opacity: 1; } 44% { transform: translateY(200px); opacity: 0; } 100% { transform: translateY(200px); opacity: 0; } }
  .hero-beam { animation: doc-beam 9s cubic-bezier(.4,0,.5,1) infinite; }

  /* extracted calls cross the gap */
  @keyframes stream { 0% { transform: translate(206px, 130px) scale(.6); opacity: 0; }
                      12% { opacity: 1; }
                      70% { transform: translate(262px, 130px) scale(1); opacity: 0; }
                      100% { opacity: 0; } }
  .hero-stream circle {
    fill: var(--signal);
    animation: stream 9s linear infinite;
    animation-delay: calc(1.2s + var(--d) * 0.55s);
  }

  /* nodes snap in, one per step, after the beam has passed them */
  @keyframes node-in { 0%, 22% { opacity: 0; transform: translateX(-8px); }
                       30%, 92% { opacity: 1; transform: none; }
                       100% { opacity: 0; } }
  .hero-node, .hero-sigil {
    animation: node-in 9s cubic-bezier(.2,.8,.2,1) infinite;
    animation-delay: calc(var(--n) * 0.5s);
  }
  /* connectors draw themselves */
  @keyframes link-draw { 0%, 30% { stroke-dashoffset: 44; } 40%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 44; } }
  .hero-link {
    stroke-dasharray: 44;
    animation: link-draw 9s ease infinite;
    animation-delay: calc(var(--n) * 0.5s);
  }
}

/* the how-to, compact: a single line each */
.howto { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.howto-step { padding: 9px 11px; gap: 9px; align-items: center; }
.howto-k { font-size: 9.5px; padding: 1px 4px; margin-top: 0; }
.howto-b { font-size: 11.5px; line-height: 1.35; }
.howto-b b { font-size: 12.5px; margin-bottom: 0; }
.howto-b .say { display: block; color: var(--ink-faint); }

/* the maker's mark */
.madeby {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-family: var(--ff-data); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.madeby .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: var(--glow); }
.madeby b { color: var(--ink-soft); font-weight: 500; letter-spacing: .08em; }
.madeby a { color: var(--signal); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); }

/* corner brackets: instrument panels are framed, not floated */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border: 1px solid var(--signal); opacity: .55;
}
.framed::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.framed::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.hero-copy { display: flex; flex-direction: column; gap: 16px; }
.hero-figure { background: var(--sunk); border: 1px solid var(--rule); padding: 16px 16px 10px; }
.hero-caption {
  font-family: var(--ff-data); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); text-align: right; margin-top: 6px;
}

/* ============================================================================
   AIRLOCK — the sign-in screen. Same instrument, one panel, nothing else on it.
   ========================================================================= */
body.signin {
  height: 100dvh;
  overflow: hidden;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 60%),
    var(--paper);
}
.airlock {
  position: relative;
  display: grid; grid-template-columns: 1fr; place-items: center;
  width: 100%; max-width: 430px;
}
/* the rings have to reach well past the card, or the panel just covers them */
.airlock-art { position: absolute; inset: -260px; display: grid; place-items: center; pointer-events: none; }
.lock-art { width: min(860px, 92vw); height: auto; color: var(--signal); opacity: .55; }
.lock-rings ellipse { stroke-width: 1; opacity: .5; }
.lock-bodies circle { fill: var(--signal); }
.lock-core { fill: var(--signal); }
.lock-pulse { fill: none; stroke: var(--signal); stroke-width: 1; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes ring-spin { to { transform: rotate(360deg); } }
  .lock-rings ellipse {
    transform-box: view-box; transform-origin: 110px 110px;
    animation: ring-spin linear infinite;
    animation-duration: calc(26s + var(--r) * 9s);
    animation-direction: alternate;
  }
  /* bodies ride the rings on their own orbits */
  @keyframes orbit-0 { to { transform: rotate(360deg) translateX(84px) rotate(-360deg); } }
  @keyframes orbit-1 { to { transform: rotate(-360deg) translateX(63px) rotate(360deg); } }
  @keyframes orbit-2 { to { transform: rotate(360deg) translateX(42px) rotate(-360deg); } }
  .lock-bodies circle {
    transform-box: view-box; transform-origin: 110px 110px;
    transform: translate(110px, 110px);
  }
  .lock-bodies circle:nth-child(1) { animation: orbit-0 14s linear infinite; }
  .lock-bodies circle:nth-child(2) { animation: orbit-1 21s linear infinite; }
  .lock-bodies circle:nth-child(3) { animation: orbit-2  9s linear infinite; }
  @keyframes core-pulse { 0% { r: 7; opacity: .9; } 70%, 100% { r: 26; opacity: 0; } }
  .lock-pulse { animation: core-pulse 3.2s cubic-bezier(.2,.7,.3,1) infinite; }
}

.airlock-panel {
  position: relative; z-index: 3;
  width: 100%;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--rule);
  padding: 30px 28px 24px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.8);
}
.airlock-head { display: flex; flex-direction: column; gap: 8px; }
.airlock-head h1 {
  font-family: var(--ff-display); font-size: 34px; line-height: .98;
  font-weight: 600; letter-spacing: -0.03em; margin: 0; text-transform: none;
}
.motto {
  font-family: var(--ff-body); font-size: 13px; line-height: 1.5;
  color: var(--signal); font-style: italic; letter-spacing: -0.005em;
  border-left: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  padding-left: 11px; margin-top: 2px;
}
.airlock-form { display: flex; flex-direction: column; gap: 13px; }
.airlock-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--ff-data); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.airlock-form input {
  font-family: var(--ff-data); font-size: 15px; padding: 11px 12px;
  color: var(--ink); background: var(--sunk);
  border: 1px solid var(--rule); border-radius: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.airlock-form input::placeholder { color: var(--ink-faint); opacity: .7; }
.airlock-form input:focus {
  outline: none; border-color: var(--signal); box-shadow: var(--glow);
}
.airlock-form button {
  position: relative; overflow: hidden;
  font-family: var(--ff-data); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; padding: 12px;
  color: var(--paper); background: var(--signal); border: none; cursor: pointer;
  margin-top: 4px;
}
.airlock-form button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes btn-sheen { to { transform: translateX(100%); } }
  .airlock-form button:hover::after { animation: btn-sheen .7s ease; }
}
.airlock-form button span { position: relative; z-index: 1; }
.airlock-form button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.error {
  font-family: var(--ff-data); font-size: 11.5px; line-height: 1.5;
  color: var(--alert); border-left: 2px solid var(--alert); padding-left: 10px; margin: 0;
}
.airlock-foot {
  font-family: var(--ff-data); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  border-top: 1px solid var(--rule); padding-top: 13px; margin: 0;
}

/* the motto also signs the hero */
.hero-motto {
  font-size: 13.5px; font-style: italic; color: var(--signal);
  border-left: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  padding-left: 12px;
}
.hero-caption b { color: var(--signal); font-weight: 500; }

/* the maker's line, on every page */
.foot-made {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-data); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.foot-made .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: var(--glow); }
.foot-made b { color: var(--ink-soft); font-weight: 500; }
.foot-made a { color: var(--signal); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); }
.foot { border-bottom: none; }
.airlock-foot .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal); box-shadow: var(--glow); margin-right: 5px;
}
.airlock-foot b { color: var(--ink-soft); font-weight: 500; }

/* ------------------------------------------------------ the sign-in HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.hud-c {
  position: absolute; display: flex; flex-direction: column; gap: 3px;
  font-family: var(--ff-data); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hud-c b { color: var(--signal); font-weight: 500; letter-spacing: .18em; font-size: 11px; }
.hud-tl { top: 22px; left: 26px; }
.hud-tr { top: 22px; right: 26px; text-align: right; align-items: flex-end; }
.hud-bl { bottom: 22px; left: 26px; }
.hud-br { bottom: 22px; right: 26px; text-align: right; }
/* a hairline runs from each corner mark toward the middle of the screen */
.hud-c::after {
  content: ""; position: absolute; height: 1px; width: 84px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 55%, transparent), transparent);
}
.hud-tl::after { top: -10px; left: 0; }
.hud-tr::after { top: -10px; right: 0; transform: scaleX(-1); }
.hud-bl::after { bottom: -10px; left: 0; }
.hud-br::after { bottom: -10px; right: 0; transform: scaleX(-1); }
@media (max-width: 720px) { .hud { display: none; } }