@font-face { font-family: "Michroma"; src: url("/assets/fonts/Michroma.ttf") format("truetype"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

  :root {
    --navy: #071636;
    --navy-deep: #040d24;
    --ink: #eaf2ff;
    --ink-dim: #9fb0d0;
    --rule: rgba(159,176,208,.22);
    --electric: #19c6ff;
    --electric-soft: rgba(25,198,255,.16);
    --red: #e8192c;
    --orange: #ff6b1a;
    --blue: #0055ff;
    --display: "Michroma", "Instrument Sans", sans-serif;
    --body: "Instrument Sans", system-ui, sans-serif;
    --measure: 62ch;
  }

  * { box-sizing: border-box; }
  html { background: var(--navy-deep); }
  body {
    margin: 0;
    font: 400 17px/1.55 var(--body);
    color: var(--ink);
    background:
      radial-gradient(1200px 700px at 72% 18%, rgba(25,198,255,.14), transparent 60%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--electric); text-decoration: none; }
  a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
  :focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; border-radius: 2px; }

  .wrap { width: min(1180px, 92vw); margin-inline: auto; }

  /* ---------- wordmark ---------- */
  .wordmark { display: inline-flex; align-items: baseline; gap: .55em; text-decoration: none; color: var(--ink); }
  .wordmark:hover { text-decoration: none; }
  .slashes { display: inline-flex; gap: .16em; transform: skewX(-18deg); align-self: center; }
  .slashes i { display: block; width: .22em; height: 1.05em; }
  .slashes i:nth-child(1){ background: var(--orange); }
  .slashes i:nth-child(2){ background: var(--red); }
  .slashes i:nth-child(3){ background: #fff; }
  .slashes i:nth-child(4){ background: var(--blue); }
  .word { font-family: var(--display); letter-spacing: .28em; font-size: 1.05rem; }
  .word b { font-weight: 400; color: var(--red); letter-spacing: 0; }

  /* ---------- header ---------- */
  header { padding: 28px 0; }
  header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .plane { color: var(--ink-dim); font-size: .95rem; }
  .plane span { color: var(--ink); }

  /* ---------- hero ---------- */
  .hero { padding: 48px 0 72px; }
  .hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
  .hero h1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.1vw, 2.35rem);
    line-height: 1.25;
    letter-spacing: .02em;
    margin: 0 0 20px;
    max-width: 18ch;
  }
  .hero p.lede { font-size: 1.15rem; color: var(--ink-dim); max-width: var(--measure); margin: 0 0 40px; }
  .art { display: flex; justify-content: center; }
  .art img { width: min(100%, 430px); height: auto; filter: drop-shadow(0 0 60px rgba(25,198,255,.35)); }

  /* the entry — the one loud thing on the page */
  .enter { display: block; max-width: 640px; }
  .enter label { display: block; margin-bottom: 10px; color: var(--ink); font-weight: 700; }
  .field {
    display: flex; align-items: stretch;
    border: 1px solid rgba(25,198,255,.55);
    background: rgba(4,13,36,.7);
    box-shadow: 0 0 0 0 rgba(25,198,255,0);
    transition: box-shadow .15s ease, border-color .15s ease;
  }
  .field:focus-within { border-color: var(--electric); box-shadow: 0 0 0 4px var(--electric-soft); }
  .field input {
    flex: 1 1 auto; min-width: 0;
    font: 400 1.35rem/1 var(--display);
    letter-spacing: .06em;
    color: var(--ink);
    background: transparent; border: 0; outline: 0;
    padding: 20px 18px;
    text-transform: lowercase;
  }
  .field input::placeholder { color: rgba(159,176,208,.45); letter-spacing: .06em; }
  .field .suffix {
    display: flex; align-items: center;
    padding: 0 18px;
    font: 400 1.05rem/1 var(--display);
    letter-spacing: .04em;
    color: var(--ink-dim);
    border-left: 1px solid rgba(25,198,255,.3);
    white-space: nowrap;
  }
  .field button {
    font: 700 1rem/1 var(--body);
    color: var(--navy-deep);
    background: var(--electric);
    border: 0; padding: 0 26px; cursor: pointer; white-space: nowrap;
  }
  .field button:hover { background: #5fd9ff; }
  .enter .note { margin: 12px 0 0; color: var(--ink-dim); font-size: .95rem; min-height: 1.5em; }
  .enter .note.error { color: #ff8a95; }

  /* ---------- sections ---------- */
  section { padding: 56px 0; border-top: 1px solid var(--rule); }
  section h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: .08em;
    margin: 0 0 28px;
  }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; }
  .two > div { max-width: var(--measure); }
  .two h3 { font: 700 1.05rem/1.4 var(--body); margin: 0 0 6px; }
  .two p { margin: 0; color: var(--ink-dim); }

  /* register-style list: plain rows, a thin left rail, no cards */
  .register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .register li {
    display: grid; grid-template-columns: 1.3fr 2fr .9fr; gap: 24px;
    padding: 16px 0 16px 20px;
    border-bottom: 1px solid var(--rule);
    border-left: 2px solid transparent;
  }
  .register li:hover { border-left-color: var(--electric); }
  .register .name { font-weight: 700; }
  .register .desc { color: var(--ink-dim); }
  .register .who { color: var(--ink-dim); font-size: .95rem; }
  .register .who span { color: var(--ink); }

  /* status: honest states, colour carries meaning, word says it too */
  .status { list-style: none; margin: 0; padding: 0; max-width: 760px; }
  .status li { display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .status i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; align-self: center; }
  .status .live i { background: #34e28a; box-shadow: 0 0 10px rgba(52,226,138,.6); }
  .status .held i { background: var(--orange); }
  .status .design i { background: var(--electric); }
  .status .state { color: var(--ink-dim); font-size: .95rem; white-space: nowrap; }

  .support p { max-width: var(--measure); color: var(--ink-dim); margin: 0 0 10px; }
  .support a { font-weight: 700; }

  footer { padding: 40px 0 56px; border-top: 1px solid var(--rule); color: var(--ink-dim); font-size: .95rem; }
  footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .art { order: -1; }
    .art img { width: min(70%, 300px); }
    .two { grid-template-columns: 1fr; }
    .register li { grid-template-columns: 1fr; gap: 4px; }
    .field { flex-wrap: wrap; }
    .field input { flex: 1 1 100%; width: 100%; font-size: 1.1rem; padding: 16px; }
    .field .suffix { border-left: 0; border-top: 1px solid rgba(25,198,255,.3); flex: 1 1 100%; padding: 12px 16px; font-size: .95rem; }
    .field button { flex: 1 1 100%; padding: 16px; }
    .status li { grid-template-columns: 14px 1fr; }
    .status .state { grid-column: 2; white-space: normal; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ---- site-wide additions ---- */
  nav.main { display: flex; gap: 28px; flex-wrap: wrap; }
  nav.main a { color: var(--ink-dim); font-weight: 700; }
  nav.main a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--electric); padding-bottom: 2px; }
  nav.main a:hover { text-decoration: none; color: var(--ink); }
  .page { padding: 40px 0 72px; }
  .page h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: .03em; margin: 0 0 14px; }
  .page .lede { color: var(--ink-dim); font-size: 1.1rem; max-width: var(--measure); margin: 0 0 36px; }
  .prose { max-width: var(--measure); }
  .prose p, .prose li { color: var(--ink-dim); }
  .prose h3 { font: 700 1.05rem/1.4 var(--body); margin: 28px 0 6px; color: var(--ink); }
  .prose code { font-family: var(--display); font-size: .8em; letter-spacing: .04em; color: var(--electric); }
  .prose a { font-weight: 700; }
  .prose ol { padding-left: 1.2em; }
  .grid { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: .95rem; }
  .grid th, .grid td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .grid th { color: var(--ink); font-weight: 700; }
  .grid td { color: var(--ink-dim); }
  .grid td:first-child { color: var(--ink); }
  .defs dt { font-weight: 700; margin-top: 14px; }
  .defs dd { margin: 4px 0 0; color: var(--ink-dim); }
  .withside { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
  .side { position: sticky; top: 24px; }
  .side ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
  .side a { display: block; padding: 8px 16px; color: var(--ink-dim); border-left: 2px solid transparent; margin-left: -1px; }
  .side a[aria-current="page"] { color: var(--ink); border-left-color: var(--electric); }
  .side a:hover { text-decoration: none; color: var(--ink); }
  .modlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .modlist li { border-bottom: 1px solid var(--rule); }
  .modlist a { display: grid; grid-template-columns: 1.1fr 2fr; gap: 24px; padding: 18px 0 18px 20px; color: inherit; border-left: 2px solid transparent; }
  .modlist a:hover { text-decoration: none; border-left-color: var(--electric); }
  .modlist .name { font-weight: 700; }
  .modlist .sum { color: var(--ink-dim); }
  .modlist .st { color: var(--electric); font-weight: 400; font-size: .9rem; margin-left: 10px; }
  .modlist.core li { display: grid; grid-template-columns: 1.1fr 2fr; gap: 24px; padding: 14px 0 14px 20px; }
  .roles { list-style: none; padding: 0; margin: 0 0 28px; border-top: 1px solid var(--rule); max-width: var(--measure); }
  .roles li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .roles b { font-weight: 700; }
  .roles span { color: var(--ink-dim); }
  .feeds { color: var(--ink-dim); padding-left: 1.2em; }
  .pn { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); }
  .pn a { font-weight: 700; }
  /* status page */
  .banner { border: 1px solid rgba(255,107,26,.55); background: rgba(255,107,26,.08); padding: 12px 16px; max-width: var(--measure); margin: 0 0 28px; color: var(--ink); }
  .banner b { color: var(--orange); }
  .hosts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .hosts li { display: grid; grid-template-columns: 14px 1.4fr 1fr 1fr 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .hosts i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #56607a; }
  .hosts .ok i { background: #34e28a; box-shadow: 0 0 10px rgba(52,226,138,.6); }
  .hosts .down i { background: var(--red); box-shadow: 0 0 10px rgba(232,25,44,.6); }
  .hosts .name { font-family: var(--display); font-size: .95rem; letter-spacing: .04em; }
  .hosts .dim { color: var(--ink-dim); font-size: .95rem; }
  .hosts code { font-family: var(--display); font-size: .78rem; letter-spacing: .04em; color: var(--electric); }
  .rel { border-top: 1px solid var(--rule); list-style: none; margin: 0; padding: 0; }
  .rel li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .rel time { color: var(--ink-dim); }
  .rel .tag { font-family: var(--display); font-size: .78rem; letter-spacing: .06em; color: var(--electric); }
  .rel .st { display: inline-block; margin-left: 10px; font-size: .85rem; color: var(--ink-dim); }
  .rel ul { margin: 8px 0 0; padding-left: 1.1em; color: var(--ink-dim); }
  /* support form */
  form.sf { max-width: 620px; display: grid; gap: 18px; }
  form.sf label { display: grid; gap: 6px; font-weight: 700; }
  form.sf input, form.sf select, form.sf textarea { font: 400 1rem/1.4 var(--body); color: var(--ink); background: rgba(4,13,36,.7); border: 1px solid rgba(25,198,255,.4); padding: 12px 14px; }
  form.sf input:focus, form.sf select:focus, form.sf textarea:focus { outline: 0; border-color: var(--electric); box-shadow: 0 0 0 4px var(--electric-soft); }
  form.sf textarea { min-height: 150px; resize: vertical; }
  form.sf button { justify-self: start; font: 700 1rem/1 var(--body); color: var(--navy-deep); background: var(--electric); border: 0; padding: 16px 26px; cursor: pointer; }
  form.sf .hint { color: var(--ink-dim); font-weight: 400; font-size: .9rem; }
  @media (max-width: 900px) {
    .withside { grid-template-columns: 1fr; }
    .side { position: static; }
    .side ul { display: flex; flex-wrap: wrap; border-left: 0; gap: 4px 0; }
    .side a { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 10px; }
    .side a[aria-current="page"] { border-bottom-color: var(--electric); }
    .modlist a, .rel li { grid-template-columns: 1fr; gap: 4px; }
    .hosts li { grid-template-columns: 14px 1fr; }
    .hosts .dim, .hosts code { grid-column: 2; }
  }

  @media (max-width: 900px) { .grid { display:block; overflow-x:auto; white-space:normal; } }

  footer .sig { display: flex; align-items: center; gap: 8px; letter-spacing: .18em; font-size: .72rem; color: var(--ink-dim); }
  footer .sig img { height: 22px; width: auto; mix-blend-mode: screen; }