/* The shared layer every page outside the landing loads first: type, tokens,
   the site bar, the band a page opens with, and the footer. One theme — the
   instrument: near-black ground, hairline rules, figures in monospace, one
   signal colour for what the engine produced and one for what verified. */

@font-face { font-family: "Inter"; src: url("/public/assets/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/public/assets/fonts/inter-latin-ext-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url("/public/assets/fonts/ibm-plex-mono-latin-ext-400.woff2") format("woff2"); font-display: swap; font-weight: 400; }
@font-face { font-family: "IBM Plex Mono"; src: url("/public/assets/fonts/ibm-plex-mono-latin-ext-600.woff2") format("woff2"); font-display: swap; font-weight: 600; }

:root {
  color-scheme: dark;
  --cb-bg: #050608; --cb-bg-1: #08090c; --cb-panel: #0b0d11; --cb-panel-2: #0f1217; --cb-panel-3: #151920;
  --cb-line: rgba(255, 255, 255, .075); --cb-line-2: rgba(255, 255, 255, .13); --cb-line-3: rgba(255, 255, 255, .2);
  --cb-ink: #eceff3; --cb-ink-2: #a2aab6; --cb-ink-3: #6b7380; --cb-ink-4: #4a515c;
  --cb-sig: #3ee0ff; --cb-sig-dim: rgba(62, 224, 255, .12);
  --cb-ok: #3ddc97; --cb-ok-dim: rgba(61, 220, 151, .12);
  --cb-bad: #ff5d63; --cb-bad-dim: rgba(255, 93, 99, .12);
  --cb-warn: #f2b84b; --cb-warn-dim: rgba(242, 184, 75, .12);
  --cb-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cb-r: 12px;
  --cb-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  /* names older stylesheets still read */
  --cb-brand: var(--cb-sig); --cb-brand-2: var(--cb-sig); --cb-brand-ink: var(--cb-sig); --cb-soft: var(--cb-panel-2); --cb-card: var(--cb-panel);
  --cb-night: var(--cb-panel); --cb-night-2: var(--cb-panel-2); --cb-night-line: var(--cb-line); --cb-night-ink: var(--cb-ink); --cb-night-mute: var(--cb-ink-2);
  --cb-shadow-1: none; --cb-shadow-2: none; --cb-shadow-3: var(--cb-shadow);
}
::selection { background: rgba(62, 224, 255, .25); }

/* the page grid */
.cb-grid { position: relative; }
.cb-grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 96px 96px; background-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.cb-grid > * { position: relative; z-index: 1; }

/* ---- site bar ---------------------------------------------------------- */
.cb-nav { position: sticky; top: 0; z-index: 60; height: 60px; font-family: var(--cb-sans);
  background: rgba(5, 6, 8, .6); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.cb-nav[data-scrolled] { border-bottom-color: var(--cb-line); background: rgba(5, 6, 8, .88); }
.cb-nav-in { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); display: flex; align-items: center; gap: 26px; }
.cb-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--cb-ink); }
.cb-brand b { font: 600 18px/1 var(--cb-sans); letter-spacing: -.035em; }
.cb-brand em { font: 400 11px/1 var(--cb-mono); font-style: normal; color: var(--cb-ink-3); border: 1px solid var(--cb-line-2); padding: 4px 6px; border-radius: 4px; }
.cb-links { display: flex; gap: 2px; margin-right: auto; }
.cb-links a { position: relative; font: 450 14px/1 var(--cb-sans); color: var(--cb-ink-2); text-decoration: none; padding: 9px 11px; border-radius: 6px; transition: color .15s, background .15s; }
.cb-links a:hover { color: var(--cb-ink); background: rgba(255, 255, 255, .04); }
.cb-links a[aria-current="page"] { color: var(--cb-ink); }
.cb-links a[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -11px; height: 1.5px; background: var(--cb-sig); }
.cb-end { display: flex; align-items: center; gap: 12px; }
.cb-lang { font: 500 11.5px/1 var(--cb-mono) !important; color: var(--cb-ink-2) !important; background: transparent !important; border: 1px solid var(--cb-line-2) !important;
  border-radius: 6px !important; padding: 6px 8px !important; text-decoration: none; cursor: pointer; box-shadow: none !important; }
.cb-lang:hover { color: var(--cb-ink) !important; border-color: var(--cb-line-3) !important; transform: none !important; }
.cb-cta { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 7px; background: var(--cb-ink); color: var(--cb-bg) !important;
  font: 500 13.5px/1 var(--cb-sans); text-decoration: none; white-space: nowrap; transition: background .18s; }
.cb-cta:hover { background: #fff; }
@media (max-width: 1000px) { .cb-links { display: none; } .cb-end { margin-left: auto; } }
@media (max-width: 420px) { .cb-cta { display: none; } }

/* ---- the band a page opens with --------------------------------------- */
.cb-band { position: relative; isolation: isolate; overflow: hidden; margin-top: -60px; padding: calc(60px + clamp(48px, 7vw, 96px)) 0 clamp(44px, 6vw, 76px); border-bottom: 1px solid var(--cb-line); background: var(--cb-bg); }
.cb-band-bg { position: absolute; z-index: -1; inset: 0; }
.cb-band-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 70% at 75% 40%, rgba(62, 224, 255, .07), transparent 70%); }
.cb-band-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--cb-bg)); pointer-events: none; }
.cb-band-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(95deg, transparent 25%, #000 65%); mask-image: linear-gradient(95deg, transparent 25%, #000 65%); }
.cb-band-in { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; }
.cb-band-in > * { max-width: 100%; }
.cb-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 6px; background: var(--cb-panel); border: 1px solid var(--cb-line-2);
  font: 450 13px/1.2 var(--cb-sans); color: var(--cb-ink-2); margin: 0; }
.cb-kicker b { font: 500 11px/1 var(--cb-mono); color: var(--cb-sig); background: var(--cb-sig-dim); padding: 5px 7px; border-radius: 4px; white-space: nowrap; }
.cb-band h1 { font: 600 clamp(38px, 5.4vw, 66px)/1.03 var(--cb-sans); letter-spacing: -.048em; margin: 0; max-width: 16ch; text-wrap: balance; color: #f4f6f8; }
.cb-band h1 em { font-style: normal; color: var(--cb-ink-3); }
.cb-band .cb-lead { font: 400 clamp(16.5px, 1.5vw, 19px)/1.6 var(--cb-sans); color: var(--cb-ink-2); max-width: 40em; margin: 0; text-wrap: pretty; }
@media (max-width: 800px) { .cb-band-bg canvas { -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 80%); mask-image: linear-gradient(180deg, transparent 20%, #000 80%); } }

@media (prefers-reduced-motion: no-preference) {
  .cb-band-in > * { animation: cb-rise .8s cubic-bezier(.16, .84, .3, 1) both; }
  .cb-band-in > *:nth-child(2) { animation-delay: .07s; } .cb-band-in > *:nth-child(3) { animation-delay: .16s; }
  .cb-band-in > *:nth-child(4) { animation-delay: .25s; } .cb-band-in > *:nth-child(5) { animation-delay: .33s; }
  [data-cb-rv] { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
  [data-cb-rv="out"] { opacity: 0; transform: translateY(14px); }
}
@keyframes cb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- range controls ------------------------------------------------------ */
.cb-range { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; cursor: pointer; }
.cb-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cb-sig) var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); }
.cb-range::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.cb-range::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--cb-sig); }
.cb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 3px; background: var(--cb-ink); border: 0;
  box-shadow: 0 0 0 3px rgba(62, 224, 255, .18); transition: box-shadow .15s; }
.cb-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 3px; background: var(--cb-ink); border: 0; box-shadow: 0 0 0 3px rgba(62, 224, 255, .18); }
.cb-range:hover::-webkit-slider-thumb, .cb-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(62, 224, 255, .25); }

/* ---- footer -------------------------------------------------------------- */
.cb-foot { font-family: var(--cb-sans); background: var(--cb-bg); border-top: 1px solid var(--cb-line); padding: 40px 0 32px; color: var(--cb-ink-3); }
.cb-foot-in { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; align-items: center; font: 400 12px var(--cb-mono); }
.cb-foot a { color: var(--cb-ink-3); text-decoration: none; }
.cb-foot a:hover { color: var(--cb-ink); }
.cb-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }