/* Signoff design system: a light node canvas (cards with mono labels and curved connectors),
   a soft aurora backdrop, giant tight headlines, retro terminal windows, black pills and a lime call to action. */
:root {
  --canvas: #f2f2ef; --node: #ffffff; --ink: #0b0b0c; --ink2: #43454c; --muted: #8b8d94; --line: #d9d9d3; --grid: #e6e6e1;
  --lime: #e3ff5c; --pink: #ff6fae; --blue: #5b84ff; --violet: #a173ff; --peach: #ffb37a;
  --trusted: #13b88a; --caveated: #f08a16; --untrusted: #f04646; --band: #0d0e11; --band-ink: #eceae4;
  --aurora: radial-gradient(60% 70% at 12% 0%, rgba(255,111,174,.55), transparent 70%),
            radial-gradient(55% 65% at 55% -5%, rgba(91,132,255,.55), transparent 70%),
            radial-gradient(50% 60% at 92% 5%, rgba(161,115,255,.5), transparent 70%),
            radial-gradient(40% 40% at 75% 30%, rgba(255,179,122,.35), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --canvas: #0f1013; --node: #17181d; --ink: #f1f0ec; --ink2: #c4c5cb; --muted: #8b8d94; --line: #2b2d34; --grid: #1b1c21; }
}
:root[data-theme="dark"] { --canvas: #0f1013; --node: #17181d; --ink: #f1f0ec; --ink2: #c4c5cb; --muted: #8b8d94; --line: #2b2d34; --grid: #1b1c21; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 17px/1.6 "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; }
.mono, .label, code { font-family: "JetBrains Mono", ui-monospace, monospace; }
.label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.aurora { position: relative; isolation: isolate; }
.aurora::before { content: ""; position: absolute; inset: 0; background: var(--aurora); filter: blur(30px); z-index: -1; }
.dots { background-image: radial-gradient(var(--grid) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.display { font-weight: 600; letter-spacing: -.055em; line-height: .94; margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--canvas); font: 500 14px "Inter Tight", sans-serif; text-decoration: none; border: 1px solid var(--ink); }
.pill.lime { background: var(--lime); color: #0b0b0c; border-color: #0b0b0c; }
.pill.ghost { background: transparent; color: var(--ink); }
.node { background: var(--node); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 30px -18px rgba(0,0,0,.35); position: relative; }
.node > .label { display: block; padding: 10px 14px 0; }
.node .body { padding: 6px 14px 14px; }
.node::before, .node::after { content: ""; position: absolute; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--node); border: 1.5px solid var(--muted); }
.node::before { left: -5px; } .node::after { right: -5px; }
.node.noports::before, .node.noports::after { display: none; }
.term { border: 1.5px solid var(--ink); background: var(--node); border-radius: 4px; font: 13px/1.55 "JetBrains Mono", monospace; box-shadow: 4px 4px 0 var(--ink); }
.term .bar { border-bottom: 1.5px solid var(--ink); padding: 4px 10px; display: flex; justify-content: space-between; font-size: 11px; }
.term .in { padding: 10px 12px; white-space: pre-wrap; }
.v-trusted { color: var(--trusted); } .v-caveated { color: var(--caveated); } .v-untrusted { color: var(--untrusted); }
.chip { display: inline-block; font: 500 12px "JetBrains Mono", monospace; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--node); }
.band { background: var(--band); color: var(--band-ink); }
.band .label { color: #9a9ca3; }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th { text-align: left; font: 500 11px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.t td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink2); }
table.t td b { color: var(--ink); }