@font-face { font-family: 'Nebula Sans'; src: url('/assets/fonts/nebula-sans-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nebula Sans'; src: url('/assets/fonts/nebula-sans-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nebula Sans'; src: url('/assets/fonts/nebula-sans-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nebula Sans'; src: url('/assets/fonts/nebula-sans-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nebula Sans'; src: url('/assets/fonts/nebula-sans-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; src: url('/assets/fonts/libre-baskerville-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
html { scroll-behavior: auto; scroll-padding-top: 88px; }

body { margin: 0; background: #000000; }
.kb { --void: #000000; --surface: #121212; --raised: #1f1f1f; --hairline: rgba(255,255,255,0.12); --hairline-strong: rgba(255,255,255,0.42);
  --grey: rgba(255,255,255,0.56); --soft: rgba(255,255,255,0.84); --text: #ffffff; --ice: #8ec8ff; --ice-deep: #1a62bd; --butter: #fcdc74;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); color-scheme: dark; }
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb a { color: var(--ice); text-decoration: none; transition: color 200ms var(--ease); }
.kb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kb a:focus-visible, .kb button:focus-visible, .kb input:focus-visible, .kb textarea:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.kb .nav a { color: var(--grey); text-decoration: none; }
.kb .nav a:hover { color: var(--text); text-decoration: none; }
.kb .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font: 600 14px/20px 'Nebula Sans', system-ui, sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: border-color 200ms var(--ease), background-color 200ms var(--ease), filter 200ms var(--ease); }
.kb .pill:hover { text-decoration: none; }
.kb .pill.solid { background: var(--text); color: var(--void); }
.kb .pill.solid:hover { filter: brightness(0.88); }
.kb .pill.ghost { border-color: var(--hairline-strong); color: var(--text); background: transparent; }
.kb .pill.ghost:hover { border-color: var(--text); background: rgba(255,255,255,0.06); }
.kb .card { display: flex; flex-direction: column; color: inherit; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; overflow: clip; transition: transform 200ms var(--ease), border-color 200ms var(--ease); }
.kb .card:hover { transform: translateY(-4px); border-color: var(--hairline-strong); text-decoration: none; }
.kb .art { overflow: hidden; }
.kb .art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 400ms var(--ease), transform 300ms var(--ease); }
.kb .card:hover .art img, .kb .card:focus-visible .art img, .kb .feature:hover .art img { filter: grayscale(0); transform: scale(1.05); }
.kb .skip { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--text); color: var(--void); padding: 10px 16px; border-radius: 999px; font: 600 14px/20px 'Nebula Sans', system-ui, sans-serif; transition: top 200ms var(--ease); }
.kb .skip:focus { top: 12px; text-decoration: none; }
.kb .more { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/20px 'Nebula Sans', system-ui, sans-serif; color: var(--ice); }
.kb .card:hover .more svg { transform: translateX(3px); }
.kb .more svg { transition: transform 200ms var(--ease); }
.kb .field { display: flex; flex-direction: column; gap: 8px; font: 600 14px/20px 'Nebula Sans', system-ui, sans-serif; color: var(--soft); }
.kb .field input, .kb .field textarea { font: 400 15px/22px 'Nebula Sans', system-ui, sans-serif; color: var(--text); background: var(--raised); border: 1px solid var(--hairline); border-radius: 8px; padding: 12px 14px; transition: border-color 200ms var(--ease); }
.kb .field input:hover, .kb .field textarea:hover { border-color: var(--hairline-strong); }
.kb .field input::placeholder, .kb .field textarea::placeholder { color: var(--grey); }
@keyframes kb-sweep { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes kb-lit { from { opacity: 0; } to { opacity: 1; } }
.kb .disc { stroke: #ffffff; stroke-width: 9; fill: none; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: kb-sweep 1.4s var(--ease) forwards; }
.kb .dome { opacity: 0; animation: kb-lit 0.6s ease-out 1.2s forwards; }
@media (prefers-reduced-motion: reduce) { .kb .disc, .kb .dome { animation: none; stroke-dashoffset: 0; opacity: 1; } .kb .card, .kb .art img { transition: filter 400ms var(--ease); } .kb .card:hover, .kb .card:hover .art img, .kb .feature:hover .art img { transform: none; } }
.kb .legal { max-width: 760px; }
.kb .legal section { display: flex; flex-direction: column; gap: 12px; padding-top: 40px; }
.kb .legal h2 { margin: 0; font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: -0.005em; color: var(--text); }
.kb .legal h3 { margin: 12px 0 0; font-weight: 600; font-size: 20px; line-height: 26px; color: var(--text); }
.kb .legal p { margin: 0; font-size: 17px; line-height: 27px; color: var(--soft); }
.kb .legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--soft); font-size: 17px; line-height: 27px; }
.kb .legal strong { color: var(--text); font-weight: 600; }
.kb .legal a { text-decoration: underline; text-underline-offset: 3px; }
.kb .legal .notice { margin-top: 24px; padding: 20px 24px; border-radius: 16px; border: 1px solid rgba(252,220,116,0.45); background: rgba(252,220,116,0.06); display: flex; flex-direction: column; gap: 8px; }
.kb .legal .notice p:first-child { color: var(--butter); font-weight: 600; }
.kb .legal .notice.alert { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.06); }
.kb .legal .notice.alert p:first-child { color: #ff6b6b; }