/* SELEN — lavender ink on violet-black. Outfit headlines, Geist Mono labels,
   glass pill nav, soft rounded panels, pill buttons with an inner glow. Shared by every page. */
@font-face { font-family: "Outfit"; src: url(/fonts/outfit-latin.woff2) format("woff2"); font-weight: 200 700; 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: "Outfit"; src: url(/fonts/outfit-latin-ext.woff2) format("woff2"); font-weight: 200 700; 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: "Geist Mono"; src: url(/fonts/geist-mono-latin.woff2) format("woff2"); font-weight: 300 600; 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: "Geist Mono"; src: url(/fonts/geist-mono-latin-ext.woff2) format("woff2"); font-weight: 300 600; 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; }

:root {
  --ice: #e4ecd9; --void: #040503; --carbon: #090b07; --graphite: #10130d; --slate: #171b13; --iron: #2b3523; --steel: #5c6a4f; --fog: #8e9a82;
  --hi: #76b900; --hi2: #c5f03c; --head: #f2f7ec; --q: #9be23a; --ok: #b9f0cf; --bad: #ff7a9c;
  --line: rgba(228, 236, 217, .10); --line2: rgba(228, 236, 217, .24); --line3: rgba(228, 236, 217, .38);
  --display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: var(--display);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* names the app scripts use */
  --bg: var(--void); --bg2: var(--carbon); --panel: var(--graphite); --panel2: var(--slate);
  --tx: var(--ice); --dim: var(--fog); --dim2: var(--steel); --ac: var(--hi); --ac2: var(--q); --acd: rgba(118, 185, 0, .14);
  --btn-tx: #061000;
  --gut: max(20px, 4vw);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--void); scrollbar-color: var(--iron) var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--void); color: var(--ice); font: 400 16px/1.5 var(--display); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(118, 185, 0, .16), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(197, 240, 60, .07), transparent 70%); }
body > * { position: relative; z-index: 1; }
::selection { background: var(--hi); color: var(--void); }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); }
.dim { color: var(--fog); } .dim2 { color: var(--steel); } .ac { color: var(--hi); } .q { color: var(--q); } .ok { color: var(--ok); } .bad { color: var(--bad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.cap { font: 400 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }
.tick, .rails { display: none; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; font: 600 21px/1 var(--display); letter-spacing: -.02em; color: var(--head); }
.mk-img { display: block; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(118, 185, 0, .35)); }

/* ---------- glass pill nav ---------- */
header.top { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 30px; padding: 8px 8px 8px 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(14, 17, 11, .62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); width: max-content; max-width: calc(100vw - 24px); transition: top .3s; }
body.has-ann header.top { top: 50px; }
body.has-ann.scrolled header.top { top: 14px; }
header.top nav { display: flex; gap: 30px; }
header.top nav a { font: 500 14.5px var(--display); color: var(--ice); opacity: .86; transition: opacity .2s, color .2s; }
header.top nav a:hover { opacity: 1; color: #fff; }
header.top nav a.on { opacity: 1; color: var(--q); }
.pbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line2); color: var(--ice); background: rgba(228, 236, 217, .05); padding: 12px 22px; font: 500 14px var(--display); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.pbtn:hover { background: rgba(228, 236, 217, .12); border-color: var(--ice); }
.pbtn.go { background: var(--ice); color: var(--btn-tx); border-color: var(--ice); box-shadow: 0 10px 30px -8px rgba(118, 185, 0, .75), inset 0 -6px 12px -6px rgba(170, 230, 60, .9); }
.pbtn.go:hover { background: #fff; transform: translateY(-1px); }
.pbtn.xbtn { padding: 12px; margin-right: -22px; border-color: transparent; background: transparent; color: var(--fog); }
.pbtn.xbtn:hover { color: var(--ice); background: transparent; border-color: transparent; }
.pbtn.xbtn svg { width: 14px; height: 14px; }
.pbtn.xbtn + .go { margin-left: 22px; }
.burger { display: none !important; }

/* announcement */
.ann { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 31; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ice); white-space: nowrap; max-width: calc(100vw - 24px); transition: opacity .3s, transform .3s; }
.ann b { font: 500 10px var(--mono); letter-spacing: .06em; background: var(--ice); color: var(--btn-tx); border-radius: 999px; padding: 3px 9px; }
.ann a { font-size: 12px; border: 1px solid var(--line2); border-radius: 999px; padding: 3px 11px; background: rgba(228, 236, 217, .06); }
.ann span { overflow: hidden; text-overflow: ellipsis; }
body.scrolled .ann { opacity: 0; transform: translate(-50%, -20px); pointer-events: none; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line2); color: var(--ice); background: rgba(228, 236, 217, .05); padding: 0 22px; height: 46px; font: 500 14px/1 var(--display); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.btn:hover { background: rgba(228, 236, 217, .12); border-color: var(--ice); }
.btn.solid, .btn.acc { background: var(--ice); color: var(--btn-tx); border-color: var(--ice); box-shadow: 0 10px 30px -8px rgba(118, 185, 0, .75), inset 0 -6px 12px -6px rgba(170, 230, 60, .9); }
.btn.solid:hover, .btn.acc:hover { background: #fff; transform: translateY(-1px); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 13px; }
.btn .arr { width: 14px; height: 14px; }
.btn[disabled], .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- type ---------- */
.h-xl { font: 500 clamp(40px, 6vw, 88px)/1.04 var(--display); letter-spacing: -.03em; color: var(--head); }
.h-l { font: 500 clamp(38px, 5.4vw, 72px)/1 var(--display); letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #a6d65c); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.h-m { font: 500 clamp(22px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -.02em; color: var(--head); }
.h-s { font: 500 20px/1.25 var(--display); letter-spacing: -.01em; color: var(--head); }
.h-xl em, .h-l em, .h-m em { font-style: normal; color: var(--fog); -webkit-text-fill-color: var(--fog); }
.lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--fog); max-width: 62ch; font-weight: 300; }
.body { color: var(--fog); line-height: 1.65; font-weight: 300; }
.body b, .lead b { color: var(--ice); font-weight: 500; }
.addr { font-family: var(--mono); color: var(--q); }

/* ---------- panels ---------- */
.panel { position: relative; border: 1px solid var(--line); background: var(--carbon); border-radius: 20px; }
.panel.pad { padding: clamp(18px, 2vw, 28px); }
.frame { position: relative; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(228, 236, 217, .05), rgba(228, 236, 217, .015)); border-radius: 20px; }
.cells { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.cells > * { background: var(--carbon); }
.label { display: flex; align-items: center; gap: 14px; font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fog); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.label b { color: var(--q); font-weight: 400; }
.label .r { margin-left: auto; color: var(--steel); }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; }
.field label { font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }
.input, textarea.input, select.input { width: 100%; height: 48px; padding: 0 16px; background: rgba(4, 5, 3, .7); border: 1px solid var(--line2); color: var(--ice); font: 400 13px/1.4 var(--mono); outline: none; transition: border-color .2s, box-shadow .2s; border-radius: 14px; }
textarea.input { height: auto; min-height: 96px; padding: 13px 16px; resize: vertical; }
.input:focus { border-color: var(--hi); box-shadow: 0 0 0 4px rgba(118, 185, 0, .14); }
.note { font: 400 12px/1.6 var(--mono); color: var(--fog); }
.note.err { color: var(--bad); } .note.ok { color: var(--ok); }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--mono); }
.tbl th { text-align: left; font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fog); padding: 15px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--fog); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--graphite); }
.tbl td.hi, .tbl td a { color: var(--ice); }
.tbl td a:hover { color: var(--q); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line2); border-radius: 999px; font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog); white-space: nowrap; }
.tag.q, .tag.ac { color: var(--q); border-color: rgba(170, 230, 60, .6); }
.tag.live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--q); }
.chip, .ca { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line2); padding: 10px 16px; border-radius: 999px; cursor: pointer; font: 400 12px var(--mono); max-width: 100%; background: transparent; color: var(--ice); }
.chip .k, .ca .cap { color: var(--q); letter-spacing: .12em; }
.chip b, .ca code { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover, .ca:hover { border-color: var(--ice); }
.icon-btn { width: 38px; height: 38px; background: transparent; cursor: pointer; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 50%; color: var(--fog); }
.icon-btn svg { width: 14px; height: 14px; }

/* ---------- rotating badge ---------- */
.badge { position: relative; display: inline-grid; place-items: center; }
.badge .spin { animation: spin 18s linear infinite; }
.badge .mk { position: absolute; display: grid; place-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- footer card ---------- */
footer.foot { padding: 0 max(12px, 2vw) 22px; margin-top: 70px; }
footer.foot .card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 36px; background: linear-gradient(180deg, rgba(228, 236, 217, .045), rgba(228, 236, 217, .015)); padding: clamp(30px, 4.5vw, 60px) clamp(24px, 4.5vw, 60px) 26px; }
footer.foot .card::after { content: ""; position: absolute; right: -160px; bottom: -200px; width: 560px; height: 360px; background: radial-gradient(closest-side, rgba(118, 185, 0, .28), rgba(197, 240, 60, .08) 55%, transparent); filter: blur(30px); pointer-events: none; }
footer.foot .f-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(30px, 6vw, 90px); }
footer.foot .f-tag { color: var(--fog); font-weight: 300; line-height: 1.6; max-width: 38ch; margin-top: 18px; }
footer.foot .fca { margin-top: 24px; }
footer.foot .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
footer.foot .cols h5 { font: 400 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin-bottom: 18px; }
footer.foot .cols a { display: block; color: var(--fog); font-size: 14.5px; margin-bottom: 12px; transition: color .2s; }
footer.foot .cols a:hover { color: var(--ice); }
footer.foot .cols a.soon { color: var(--steel); cursor: default; }
footer.foot .f-bot { display: flex; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--line); font: 400 11px/1.7 var(--mono); color: var(--steel); position: relative; z-index: 1; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 16px); opacity: 0; background: var(--graphite); border: 1px solid var(--hi); color: var(--ice); padding: 12px 20px; font: 400 12px var(--mono); z-index: 95; max-width: 90vw; border-radius: 999px; transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.rv.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  header.top { gap: 12px; left: 12px; right: 12px; transform: none; width: auto; justify-content: space-between; padding-left: 16px; }
  header.top nav { display: none; }
  .burger { display: inline-flex !important; }
  header.top.open nav { display: flex; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--carbon); border: 1px solid var(--line2); border-radius: 24px; padding: 10px; }
  header.top.open nav a { padding: 13px 14px; }
  header.top .go { display: none; }
  .pbtn.xbtn { margin-right: -10px; }
  .pbtn.xbtn + .go { margin-left: 0; }
  .ann a { display: none; }
  footer.foot .card { border-radius: 28px; }
  footer.foot .f-top { grid-template-columns: minmax(0, 1fr); }
  footer.foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ann { font-size: 12px; }
  .ann span { max-width: calc(100vw - 130px); }
}
@media (prefers-reduced-motion: reduce) { .badge .spin { animation: none; } .rv { opacity: 1; transform: none; transition: none; } }

/* NVIDIA-green primary buttons */
.pbtn.go, .btn.solid, .btn.acc { background: #76b900; color: #071000; border-color: #76b900; box-shadow: 0 12px 34px -10px rgba(118, 185, 0, .85), inset 0 -7px 12px -7px rgba(225, 255, 140, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pbtn.go:hover, .btn.solid:hover, .btn.acc:hover { background: #8ad400; border-color: #8ad400; }
.ann b { background: #76b900; color: #071000; }
.tabs button.on { background: #76b900; color: #071000; }