@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/InterVariable.woff2') format('woff2'); }
/* CNSI site — light/dark token overrides layered over the Nocturne token sheet, body resets, keyframes.
   Light is the default; [data-theme="dark"] switches to the Nocturne ground. */
:root { --brand: #D9381E; --band: #8f1f2b; --band-glow: #ad2a3c; --band-ghost: #c94b5c; --band-kicker: #fbd5cf; --band-btn: #f4a79b; }

:root:not([data-theme="dark"]) {
  color-scheme: light;
  --color-bg: #FFFFFF;
  --color-surface: #eef0f7;
  --color-text: #292b31;
  --color-accent: color-mix(in srgb, var(--brand) 78%, #1c1c1c);   /* deep red, ≥5.5:1 on white */
  --color-accent-2: var(--color-accent);
  --color-divider: color-mix(in srgb, #292b31 18%, transparent);
  --shadow-sm: 0 0 0 1px #b2b6ca, 0 2px 6px rgba(41,43,49,.22), 0 6px 16px rgba(41,43,49,.14);
  --shadow-md: 0 0 0 1px #9397ab, 0 6px 14px rgba(41,43,49,.26), 0 14px 34px rgba(41,43,49,.20);
  --shadow-lg: 0 0 0 1px #75798c, 0 12px 28px rgba(41,43,49,.32), 0 28px 60px rgba(41,43,49,.26);
  --tint: color-mix(in srgb, var(--brand) 14%, #ffffff);
  --tint-text: color-mix(in srgb, var(--brand) 70%, #1c1c1c);
  --muted: #595d6c;
  --edge: #cfd3e5;
  --edge-strong: #b2b6ca;
  --surface-2: #e4e7f1;
  --mark: color-mix(in srgb, var(--brand) 88%, #1c1c1c);
  --icon-bg: #dce8fa;
  --icon-fg: #1e4e8c;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: color-mix(in srgb, var(--brand) 68%, #ffffff);  /* lifted red, ≥5:1 on the dark ground */
  --color-accent-2: var(--color-accent);
  --color-divider: color-mix(in srgb, #e9e9ed 20%, transparent);
  --shadow-sm: 0 0 0 1px #595d6c, 0 2px 8px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.45);
  --shadow-md: 0 0 0 1px #75798c, 0 8px 22px rgba(0,0,0,.65), 0 18px 40px rgba(0,0,0,.5);
  --shadow-lg: 0 0 0 1px #9397ab, 0 18px 44px rgba(0,0,0,.75), 0 32px 70px rgba(0,0,0,.55);
  --tint: color-mix(in srgb, var(--brand) 30%, #1c1c1c);
  --tint-text: color-mix(in srgb, var(--brand) 40%, #ffffff);
  --muted: #b2b6ca;
  --edge: #4a4e5c;
  --edge-strong: #75798c;
  --surface-2: #1c1e2c;
  --mark: var(--color-accent);
  --icon-bg: #223b66;
  --icon-fg: #b7d0f7;
}

html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
a { color: var(--color-accent); }
a:hover { color: color-mix(in srgb, var(--color-accent) 75%, var(--color-text)); }
.nav a[aria-current="page"] { color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); }

/* Control and table edges: the Nocturne alpha rules are too faint on a light ground; use solid ramp steps per theme. */
.input { background: var(--color-bg); border-color: var(--edge-strong); }
.input::placeholder { color: var(--muted); opacity: 1; }
.btn-secondary { border-color: var(--edge-strong); }
.seg { border-color: var(--edge-strong); }
.seg-opt + .seg-opt { border-left-color: var(--edge-strong); }
.field > label { color: var(--muted); }
.table th { color: var(--muted); }
.table tbody tr {
  background: linear-gradient(to right, transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  background:
    linear-gradient(var(--tint), var(--tint)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right, transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
figcaption, .card-meta, .text-muted { color: var(--muted); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Static-site layer: header, mobile navigation, deep links, FAQ, hover utilities ── */
html { scroll-padding-top: 88px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); text-decoration: none; }
.skip-link:focus { left: 12px; }
.nav-link:hover { background: var(--tint); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-toggle { display: none !important; }
.nav-toggle .icon-close { display: none; }
.site-nav.is-open .nav-toggle .icon-close { display: block; }
.site-nav.is-open .nav-toggle .icon-menu { display: none; }
@media (max-width: 1080px) {
  .site-nav .nav-toggle { display: inline-flex !important; }
  .site-nav .nav-links { display: none !important; width: 100%; flex-direction: column; align-items: stretch !important; padding: 4px 0 10px; max-height: calc(100dvh - 72px); overflow-y: auto; }
  .site-nav.is-open .nav-links { display: flex !important; }
  .site-nav .nav-links .nav-link { width: 100%; font-size: 15px; }
  .site-nav .nav-links .theme-toggle { margin: 6px 0 0 !important; }
}
@media (max-width: 480px) {
  .site-nav { padding-left: 16px !important; padding-right: 16px !important; }
  .brand-name { font-size: 13.5px; }
}
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--tint); }
.faq-chev { flex: none; transition: transform .2s ease; }
.faq[open] > summary .faq-chev { transform: rotate(180deg); }
.hv-13k0i9q:hover { background:color-mix(in srgb, var(--hero-btn, var(--band-btn)) 16%, transparent) !important; }
.hv-1y79cnn:hover { box-shadow:var(--shadow-md) !important; }
.hv-v87y9o:hover { background:color-mix(in srgb, var(--hero-ink, #e9e9ed) 9%, transparent) !important; }

main [id] { scroll-margin-top: 84px; }
.toc a:hover, .toc a:focus-visible { background: var(--tint); color: var(--tint-text); }