:root {
  --sf-bg: rgba(11, 14, 20, 1);
  --sf-surface: rgba(30, 33, 48, 1);
  --sf-primary: rgba(92, 140, 245, 1);
  --sf-on-primary: rgba(255, 255, 255, 1);
  --sf-text: rgba(235, 240, 250, 1);
  --sf-muted: rgba(158, 168, 189, 1);
  --sf-accent: rgba(92, 219, 158, 1);
  --sf-danger: rgba(242, 97, 107, 1);
  --sf-unit: 8px;
  --sf-radius: 14px;
  --sf-maxw: 1040px;
  color-scheme: dark light;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  color: var(--sf-text);
  background-color: var(--sf-bg);
  line-height: 1.5;
}

#app {
  max-width: var(--sf-maxw);
  margin: calc(var(--sf-unit) * 5) auto;
  padding: 0 calc(var(--sf-unit) * 2);
}

.sf-container, .sf-form, .sf-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sf-unit) * 1.5);
}

.sf-row {
  display: flex;
  flex-direction: row;
  gap: var(--sf-unit);
  align-items: center;
  flex-wrap: wrap;
}

.sf-container, .sf-form {
  background: var(--sf-surface);
  border-radius: var(--sf-radius);
  padding: calc(var(--sf-unit) * 3);
}

.sf-heading {
  margin: 0;
  font-weight: 700;
}

h1.sf-heading {
  font-size: 1.95em;
  line-height: 1.15;
}

h2.sf-heading {
  font-size: 1.56em;
  line-height: 1.25;
}

h3.sf-heading {
  font-size: 1.25em;
  line-height: 1.3;
}

a:focus-visible, .sf-button:focus-visible, .sf-choice:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

.sf-caption {
  color: var(--sf-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sf-input, .sf-select {
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--sf-unit) * 1.25);
  border-radius: calc(var(--sf-radius) * 0.6);
  border: 1px solid var(--sf-muted);
  background: var(--sf-bg);
  color: var(--sf-text);
  font: inherit;
}

.sf-input:focus, .sf-select:focus {
  outline: 2px solid var(--sf-primary);
  border-color: var(--sf-primary);
}

.sf-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sf-unit) * 0.5);
}

.sf-field .sf-field-label {
  color: var(--sf-muted);
  font-size: 0.85em;
  font-weight: 600;
}

.sf-choice {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sf-unit) * 0.5);
  padding: calc(var(--sf-unit) * 0.75) var(--sf-unit);
  border: 1px solid var(--sf-muted);
  border-radius: 999px;
  cursor: pointer;
}

.sf-scale {
  display: flex;
  gap: calc(var(--sf-unit) * 0.5);
  flex-wrap: wrap;
}

.sf-button {
  appearance: none;
  border: 0;
  border-radius: calc(var(--sf-radius) * 0.7);
  padding: calc(var(--sf-unit) * 1.25) calc(var(--sf-unit) * 2.5);
  background: var(--sf-primary);
  color: var(--sf-on-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sf-button:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.08);
}

.sf-button:disabled, .sf-button[aria-disabled="true"], .sf-field :disabled, [data-enabled]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.6);
}

[hidden] {
  display: none !important;
}

.sf-nav {
  display: flex;
  gap: calc(var(--sf-unit) * 1.5);
  flex-wrap: wrap;
  padding: calc(var(--sf-unit) * 1.5) 0;
  border-bottom: 1px solid var(--sf-surface);
  margin-bottom: calc(var(--sf-unit) * 2);
}

.sf-nav a {
  color: var(--sf-muted);
  text-decoration: none;
  font-weight: 600;
}

.sf-nav a.is-active, .sf-nav a:hover {
  color: var(--sf-text);
}

.sf-card {
  background: var(--sf-surface);
  border-radius: var(--sf-radius);
  padding: calc(var(--sf-unit) * 2.5);
  display: flex;
  flex-direction: column;
  gap: var(--sf-unit);
}

.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: calc(var(--sf-unit) * 1.5);
}

.sf-kv {
  display: flex;
  justify-content: space-between;
  gap: var(--sf-unit);
  padding: calc(var(--sf-unit) * 0.5) 0;
  border-bottom: 1px solid var(--sf-bg);
}

.sf-kv .k {
  color: var(--sf-muted);
}

.sf-kv .v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.sf-badge {
  display: inline-block;
  padding: calc(var(--sf-unit) * 0.25) calc(var(--sf-unit) * 0.9);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sf-badge--ok {
  background: var(--sf-accent);
  color: var(--sf-bg);
}

.sf-badge--warn {
  background: #e7b85a;
  color: var(--sf-bg);
}

.sf-badge--blocked {
  background: var(--sf-danger);
  color: var(--sf-on-primary);
}

.sf-badge--preview {
  background: var(--sf-primary);
  color: var(--sf-on-primary);
}

.sf-badge--muted {
  background: var(--sf-bg);
  color: var(--sf-muted);
}

.sf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.sf-table caption {
  text-align: left;
  color: var(--sf-muted);
  padding-bottom: var(--sf-unit);
}

.sf-table th {
  text-align: left;
  color: var(--sf-muted);
  font-weight: 600;
  border-bottom: 2px solid var(--sf-surface);
}

.sf-table th, .sf-table td {
  padding: calc(var(--sf-unit) * 1) calc(var(--sf-unit) * 1.25);
  vertical-align: top;
}

.sf-table tbody tr {
  border-bottom: 1px solid var(--sf-surface);
}

.sf-list {
  margin: 0;
  padding-left: calc(var(--sf-unit) * 2.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--sf-unit) * 0.5);
}

.sf-details {
  border: 1px solid var(--sf-surface);
  border-radius: calc(var(--sf-radius) * 0.6);
  padding: var(--sf-unit) calc(var(--sf-unit) * 1.5);
}

.sf-details > summary {
  cursor: pointer;
  font-weight: 600;
}

.sf-tree ul {
  list-style: none;
  margin: 0;
  padding-left: calc(var(--sf-unit) * 2);
}

.sf-tree > ul {
  padding-left: 0;
}

.sf-tree li {
  padding: calc(var(--sf-unit) * 0.25) 0;
}

.sf-tree details {
  border: 0;
  padding: 0;
}

.sf-tree summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--sf-text);
}

.sf-tree a {
  color: var(--sf-muted);
  text-decoration: none;
}

.sf-tree a.is-active, .sf-tree a:hover {
  color: var(--sf-text);
}

.sf-frame {
  border: 1px solid var(--sf-surface);
  border-radius: var(--sf-radius);
  width: 100%;
}

.sf-code {
  background: var(--sf-bg);
  border: 1px solid var(--sf-surface);
  border-radius: calc(var(--sf-radius) * 0.6);
  padding: calc(var(--sf-unit) * 1.5);
  overflow-x: auto;
  margin: 0;
}

.sf-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --sf-bg: rgba(246, 247, 251, 1);
    --sf-surface: rgba(255, 255, 255, 1);
    --sf-primary: rgba(47, 102, 208, 1);
    --sf-on-primary: rgba(255, 255, 255, 1);
    --sf-text: rgba(22, 32, 58, 1);
    --sf-muted: rgba(90, 100, 120, 1);
    --sf-accent: rgba(15, 138, 87, 1);
    --sf-danger: rgba(198, 40, 54, 1);
  }
}

@media (max-width: 960px) {
  .sf-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  #app {
    margin: calc(var(--sf-unit) * 2) auto;
  }
  h1.sf-heading {
    font-size: 1.56em;
  }
  .sf-kv {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .sf-kv .v {
    text-align: left;
  }
}


:root { --sf-line: rgba(235, 240, 250, 0.09); --sf-glow: rgba(92, 140, 245, 0.17); --sf-card: rgba(30, 33, 48, 0.55); --sf-warn: #e7b85a; }
@media (prefers-color-scheme: light) { :root { --sf-line: rgba(22, 32, 58, 0.11); --sf-glow: rgba(47, 102, 208, 0.10); --sf-card: #ffffff; --sf-warn: #8a5d00; } }
html { -webkit-text-size-adjust: 100%; }
body { font-size: 17px; background-image: radial-gradient(1100px 540px at 50% -200px, var(--sf-glow), transparent 70%); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--sf-primary); color: var(--sf-on-primary); }
#app { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
p.sf-text { margin: 0; }
a { color: var(--sf-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.sf-shell { background: none; padding: 0; gap: 0; border-radius: 0; }
.sf-top { justify-content: space-between; padding: 28px 0; gap: 14px 32px; }
.sf-wordmark { color: var(--sf-text); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; }
.sf-wordmark:hover { text-decoration: none; }
.sf-top .sf-nav { border: 0; margin: 0; padding: 0; gap: 26px; }
.sf-top .sf-nav a { font-weight: 550; font-size: 0.95rem; }
.sf-top .sf-nav a.is-active { color: var(--sf-text); text-decoration: underline; text-decoration-color: var(--sf-primary); text-decoration-thickness: 2px; text-underline-offset: 9px; }
.sf-pagehead { background: none; padding: 76px 0 52px; gap: 18px; border-radius: 0; }
.sf-eyebrow { font-family: inherit; color: var(--sf-accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sf-pagehead h1.sf-heading { font-size: clamp(2.4rem, 6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; max-width: 17ch; }
.sf-lede { font-size: 1.22rem; line-height: 1.6; color: var(--sf-muted); max-width: 62ch; }
.sf-actions { gap: 12px; margin-top: 10px; }
.sf-cta, .sf-cta-quiet { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; font-weight: 650; text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease; }
.sf-cta { background: var(--sf-primary); color: var(--sf-on-primary); }
.sf-cta:hover { transform: translateY(-1px); filter: brightness(1.08); text-decoration: none; }
.sf-cta-quiet { color: var(--sf-text); border: 1px solid color-mix(in srgb, var(--sf-muted) 45%, transparent); }
.sf-cta-quiet:hover { border-color: var(--sf-muted); text-decoration: none; }
.sf-band { background: none; padding: 48px 0; gap: 22px; border-radius: 0; border-top: 1px solid var(--sf-line); }
.sf-band > h2.sf-heading { font-size: 1.55rem; letter-spacing: -0.02em; }
.sf-band > p.sf-text { color: var(--sf-muted); max-width: 66ch; }
.sf-note { font-family: inherit; color: var(--sf-muted); font-size: 0.95rem; }
.sf-grid { background: none; padding: 0; border-radius: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sf-shell > .sf-grid { margin-bottom: 16px; }
.sf-shell > .sf-grid:has(+ .sf-band), .sf-shell > .sf-grid:has(+ .sf-footer) { margin-bottom: 48px; }
.sf-points { display: grid; background: none; padding: 0; border-radius: 0; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.sf-card { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 16px; padding: 24px; gap: 12px; transition: border-color 0.2s ease; }
.sf-card:hover { border-color: color-mix(in srgb, var(--sf-primary) 45%, transparent); }
.sf-card h2.sf-heading, .sf-card h3.sf-heading { font-size: 1.2rem; letter-spacing: -0.01em; }
.sf-card p.sf-text { color: var(--sf-muted); }
.sf-card > a.sf-text { margin-top: auto; padding-top: 4px; font-weight: 600; text-decoration: none; }
.sf-card > a.sf-text:hover { text-decoration: underline; }
.sf-badge { width: fit-content; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border: 1px solid transparent; }
.sf-badge--warn { background: color-mix(in srgb, var(--sf-warn) 15%, transparent); color: var(--sf-warn); border-color: color-mix(in srgb, var(--sf-warn) 35%, transparent); }
.sf-badge--preview { background: color-mix(in srgb, var(--sf-primary) 15%, transparent); color: var(--sf-primary); border-color: color-mix(in srgb, var(--sf-primary) 35%, transparent); }
.sf-badge--ok { background: color-mix(in srgb, var(--sf-accent) 15%, transparent); color: var(--sf-accent); border-color: color-mix(in srgb, var(--sf-accent) 35%, transparent); }
.sf-badge--muted { background: transparent; color: var(--sf-muted); border-color: color-mix(in srgb, var(--sf-muted) 35%, transparent); }
.sf-point { background: none; padding: 20px 0 0; gap: 8px; border-radius: 0; border-top: 1px solid var(--sf-line); }
.sf-point h3.sf-heading { font-size: 1.05rem; }
.sf-point p.sf-text { color: var(--sf-muted); }
.sf-item { background: none; padding: 22px 0; gap: 8px; border-radius: 0; border-bottom: 1px solid var(--sf-line); }
.sf-item:first-of-type { padding-top: 4px; }
.sf-item h3.sf-heading { font-size: 1.2rem; }
.sf-item p.sf-text { color: var(--sf-muted); max-width: 66ch; }
.sf-item > a.sf-text { font-weight: 600; text-decoration: none; width: fit-content; }
.sf-item > a.sf-text:hover { text-decoration: underline; }
.sf-band > .sf-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-band > a.sf-text { font-weight: 600; text-decoration: none; width: fit-content; }
.sf-band > a.sf-text:hover { text-decoration: underline; }
.sf-kv { border-bottom: 1px solid var(--sf-line); padding: 10px 0; }
.sf-kv .k { color: var(--sf-muted); }
.sf-kv .v { font-family: inherit; color: var(--sf-text); }
.sf-card .sf-caption { font-family: inherit; }
.sf-card .sf-kv:has(> .v) { flex-direction: column; align-items: flex-start; gap: 2px; }
.sf-card .sf-kv:has(> .v) .k { font-size: 0.85rem; }
.sf-card .sf-kv:has(> .v) .v { text-align: left; }
.sf-card .sf-stack:has(> .sf-kv > .sf-badge) { gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--sf-line); }
.sf-card .sf-kv:has(> .sf-badge) { border-bottom: 0; padding: 4px 0 0; justify-content: space-between; }
.sf-list { color: var(--sf-muted); gap: 10px; }
.sf-footer { border-top: 1px solid var(--sf-line); padding: 28px 0 56px; margin-top: 24px; gap: 8px 24px; }
.sf-footer .sf-caption { font-family: inherit; margin-right: auto; }
.sf-footer a { color: var(--sf-muted); text-decoration: none; font-size: 0.95rem; }
.sf-footer a:hover { color: var(--sf-text); }
@media (prefers-color-scheme: light) { .sf-card { box-shadow: 0 1px 2px rgba(22, 32, 58, 0.04), 0 10px 28px rgba(22, 32, 58, 0.05); } }
@media (max-width: 720px) {
  #app { padding: 0 16px; }
  .sf-top { padding: 18px 0 8px; }
  .sf-top .sf-nav { width: 100%; gap: 20px; padding-bottom: 6px; }
  .sf-pagehead { padding: 40px 0 32px; }
  .sf-lede { font-size: 1.08rem; }
  .sf-band { padding: 36px 0; }
  .sf-footer .sf-caption { flex-basis: 100%; }
}