/* ---------- tokens: one set for light, one for dark; dark zones borrow the dark set while on screen ---------- */
:root {
  color-scheme: light;
  --mono-900: #161616; --mono-100: #f5f4f0;
  --paper: #f3f2ee; --surface: #e7e6e1; --card: #ebeae5; --popover: #fbfaf7;
  --ink: var(--mono-900); --ink-muted: #161616a6; --fill: #16161612; --fill-strong: #16161630; --line: #16161614; --divider: #16161630;
  --scrim: #16161666; --shadow-modal: 0 24px 60px -24px #16161640; --shadow-card: 0 10px 26px -16px #1616162e;
  --shadow-control: 0 0 0 1px #1616160f, 0 2px 6px -2px #16161624; --btn-fill: #161616; --btn-on: var(--mono-100);
  --spot: #0e6b52; --spot-2: #1f9a74; --spot-wash: rgba(14, 107, 82, .12);
  --peer-0: #105099; --peer-1: #6f6f35; --peer-2: #a85413; --peer-3: #794856; --peer-4: #7d6114; --peer-5: #58356e; --peer-ink: #f7f7f7;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --hand: "Reenie Beanie", cursive;
  --font-sans: var(--sans); --font-mono: var(--mono);
  --fs-display: clamp(3rem, 1.94rem + 4.5vw, 6rem); --fs-h1: clamp(2.25rem, 1.63rem + 2.63vw, 4rem); --fs-h2: clamp(1.875rem, 1.48rem + 1.69vw, 3rem);
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.76, 0, .24, 1); --ease-out-quad: cubic-bezier(.5, 1, .89, 1); --ease-front: cubic-bezier(.76, 0, .2, 1);
  --r-md: .375rem; --r-lg: .5rem; --r-xl: .75rem; --r-2xl: 1rem; --r-pill: 999px;
  --gut: clamp(16px, 4vw, 56px);
  /* Nodo names, mapped onto the tokens above */
  --page: var(--paper); --text: var(--ink-muted); --soft: var(--fill); --blue: var(--spot);
}
[data-theme="dark"], html.is-dark-zone {
  color-scheme: dark;
  --paper: #0c0c0c; --surface: #1d1d1d; --card: #151515; --popover: #1f1f1f;
  --ink: var(--mono-100); --ink-muted: #f5f4f08c; --fill: #f5f4f012; --fill-strong: #f5f4f033; --line: #f5f4f012; --divider: #f5f4f02e;
  --scrim: #000a; --shadow-modal: 0 24px 70px -20px #000000b3; --shadow-card: 0 12px 30px -18px #0000008c;
  --shadow-control: 0 0 0 1px #f5f4f00f, 0 2px 6px -2px #0006; --btn-fill: var(--mono-100); --btn-on: var(--mono-900);
  --spot: #2fb38a; --spot-2: #5fd3a9; --spot-wash: rgba(47, 179, 138, .2);
  --peer-0: #6e9bd1; --peer-1: #b5b575; --peer-2: #f8955b; --peer-3: #d5a7b4; --peer-4: #f4bf3c; --peer-5: #b4aad5; --peer-ink: #161616;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.016'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); transition: background-color .8s var(--ease); }
body { min-height: 100svh; background: var(--paper) var(--grain); color: var(--ink); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color .8s var(--ease), color .8s var(--ease); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 500 .7em var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--fill); }
.mono { font-family: var(--mono); }
.u-sr-only, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-overlay main { pointer-events: none; }
main { position: relative; transition: scale .9s var(--ease-front), translate .9s var(--ease-front); transform-origin: 50% 30vh; }
html.is-covering main { scale: .96; translate: 0 10px; }
.container { width: min(100% - 2 * var(--gut), 76rem); margin-inline: auto; }
.eyebrow { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.chip { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--fill); font: 500 .65rem/1.7 var(--mono); text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--fill); font-weight: 500; font-size: .92rem; transition: background .2s; }
.btn:hover { background: var(--fill-strong); }
.btn--solid { background: var(--btn-fill); color: var(--btn-on); }
.btn--solid:hover { background: var(--btn-fill); opacity: .88; }
.btn-blue { display: inline-block; padding: 12px 22px; border-radius: 99px; background: var(--spot); color: #fff; font: 600 14px var(--sans); transition: filter .3s; }
.btn-blue:hover { filter: brightness(1.15); }
.page-pad { padding-top: 150px; padding-bottom: 110px; }
.page-head { display: grid; gap: 14px; margin-bottom: 56px; }
.page-head h1 { font: 600 var(--fs-display)/.95 var(--sans); letter-spacing: -.045em; }
.page-head p { max-width: 46ch; color: var(--ink-muted); font-size: 1.05rem; }

/* ---------- veil: loader + page transitions ---------- */
.veil { position: fixed; inset: 0; z-index: 1200; background: var(--paper) var(--grain); clip-path: inset(0); }
.veil__word { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; font: 500 1.05rem var(--sans); }
.veil__travel { position: absolute; right: 24px; bottom: 24px; will-change: transform; }
.veil__count { display: block; height: 1em; overflow: hidden; font: 500 var(--fs-display)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.veil__strip { display: block; will-change: transform; }
.veil__strip span { display: block; height: 1em; text-align: right; }
.veil__hold { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; font: 500 .75rem var(--mono); color: var(--ink-muted); opacity: 0; transition: opacity .3s; }
.veil.is-holding .veil__hold { opacity: 1; }
.veil__scrim { position: fixed; inset: 0; z-index: 1190; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.3s var(--ease-in-out); }
html.is-covering .veil__scrim { opacity: .55; }

/* ---------- progress + HUD ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 960; height: 2px; background: var(--ink); transform-origin: 0 0; scale: 0 1; }
.hud { display: none !important; position: fixed; z-index: 940; top: 10px; left: 16px; display: flex; gap: 6px; transition: translate .45s var(--ease), opacity .45s; }
.hud.is-hidden { translate: 0 -150%; opacity: 0; }
.hud__chip { display: inline-flex; padding: 1px 6px; border-radius: 3px; background: var(--fill); font: 500 .625rem/1.6 var(--mono); white-space: nowrap; backdrop-filter: blur(8px); }
.hud__chip[hidden] { display: none; }
.hud__k { color: var(--ink-muted); }
.hud__v { font-variant-numeric: tabular-nums; }
.hud__chip button { font: inherit; padding: 0; }

/* ---------- nav: a glass pill that grows into the menu ---------- */
.nv { position: fixed; z-index: 950; top: 14px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; font-size: 15px; }
.nv__scrim { position: fixed; inset: 0; background: rgba(8, 8, 8, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; pointer-events: auto; }
.nav-open .nv__scrim { opacity: 1; visibility: visible; }
.nv__shell { position: relative; width: min(30em, calc(100vw - 24px)); border: 1px solid #f5f4f01f; border-radius: .8rem; background: rgba(16, 16, 16, .78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); color: #f5f4f0; overflow: hidden; pointer-events: auto; box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .5); }
.nv__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: .6em .75em .6em .6em; }
.nv__back { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -4px; border-radius: 50%; background: #f5f4f01a; color: inherit; font: 500 .95rem/1 var(--sans); flex: none; cursor: pointer; transition: background .3s, transform .3s var(--ease); }
.nv__back:hover { background: #f5f4f033; transform: translateX(-2px); }
.nv__logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; font: 600 .8rem/1 var(--sans); flex: none; }
.nv__title { display: inline-flex; flex: 1; justify-content: center; overflow: hidden; font: 600 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.nv__ch { display: inline-block; overflow: hidden; } .nv__ch span { display: inline-block; }
.nv__btn { width: 1.25em; height: 1.25em; display: grid; grid-template-columns: 1fr 1fr; gap: .25em; padding: .15em; flex: none; }
.nv__btn i { display: block; background: currentColor; border-radius: 1px; transition: transform .5s var(--ease); }
.nav-open .nv__btn i:nth-child(1) { transform: translate(.2em, .2em); } .nav-open .nv__btn i:nth-child(2) { transform: translate(-.2em, .2em); }
.nav-open .nv__btn i:nth-child(3) { transform: translate(.2em, -.2em); } .nav-open .nv__btn i:nth-child(4) { transform: translate(-.2em, -.2em); }
.nv__panel { height: 0; overflow: hidden; }
.nv__rows { display: flex; flex-direction: column; }
.nv__row { display: grid; grid-template-columns: 1fr auto auto; gap: 1em; align-items: center; width: 100%; padding: .75em 1em; border-top: 1px solid #f5f4f01a; text-align: left; transition: background .3s; }
.nv__row b { font-weight: 600; font-size: .95em; }
.nv__row span { font-size: .75em; opacity: 0; transform: translateX(.5em); transition: opacity .3s, transform .3s var(--ease); color: #f5f4f099; }
.nv__row em { font-style: normal; font-size: .85em; transition: transform .4s var(--ease); }
.nv__row:hover { background: #f5f4f00f; }
.nv__row:hover span, .nv__row[aria-current] span { opacity: 1; transform: none; }
.nv__row[aria-current] b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: #6e9bff; vertical-align: middle; }
.nv__sub.open .nv__row em { transform: rotate(45deg); }
.nv__list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.nv__list > div { overflow: hidden; padding: 0 1em; }
.nv__sub.open .nv__list { grid-template-rows: 1fr; }
.nv__sub.open .nv__list > div { padding-bottom: .5em; }
.nv__list a { display: block; font-size: .85em; color: #f5f4f0b3; padding: .35em 0; }
.nv__list a:hover { color: #f5f4f0; }
.nv__tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: .75em 1em 0; border-top: 1px solid #f5f4f01a; }
.nv__tool { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-lg); background: #f5f4f012; font-size: .82em; }
.nv__tool svg { width: 14px; } .nv__tool kbd { background: #f5f4f01a; }
.nv__cta { display: block; margin: .75em 1em 1em; padding: .65em; text-align: center; font-weight: 600; font-size: .85em; border-radius: .5rem; background: #f5f4f0; color: #161616; transition: opacity .3s; }
.nv__cta:hover { opacity: .85; }
.themetoggle { position: relative; display: flex; padding: 3px; border-radius: var(--r-lg); background: #f5f4f012; }
.themetoggle button { position: relative; z-index: 1; width: 30px; height: 28px; display: grid; place-items: center; }
.themetoggle svg { width: 15px; height: 15px; }
.themetoggle__bg { position: absolute; top: 3px; left: 3px; width: 30px; height: 28px; border-radius: var(--r-md); background: #f5f4f026; transition: translate .45s cubic-bezier(.65, 0, .35, 1); }
[data-theme="dark"] .themetoggle__bg { translate: 30px 0; }

/* ---------- overlay + ⌘K ---------- */
.overlay { position: fixed; inset: 0; z-index: 900; background: var(--scrim); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out-quad); }
html.is-overlay .overlay { opacity: 1; pointer-events: auto; }
.cmd { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; padding-top: 12vh; pointer-events: none; }
.cmd__panel { width: min(40rem, calc(100vw - 2rem)); max-height: min(70vh, 32rem); display: flex; flex-direction: column; border-radius: var(--r-2xl); background: var(--popover); box-shadow: var(--shadow-modal), 0 0 0 1px var(--line); opacity: 0; translate: 0 .5rem; transition: opacity .3s var(--ease-out-quad), translate .3s var(--ease); }
.cmd.is-open { pointer-events: auto; } .cmd.is-open .cmd__panel { opacity: 1; translate: 0 0; }
.cmd__search { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmd__search svg { width: 16px; color: var(--ink-muted); }
.cmd__input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: 400 1.05rem var(--sans); }
.cmd__list { position: relative; overflow-y: auto; padding: 6px 8px 8px; }
.cmd__group { font: 500 .7rem var(--mono); text-transform: uppercase; color: var(--ink-muted); padding: 10px 8px 6px; }
.cmd__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-lg); text-align: left; }
.cmd__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd__item svg { width: 15px; flex: none; color: var(--ink-muted); }
.cmd__item small { margin-left: auto; flex: none; font: .7rem var(--mono); color: var(--ink-muted); text-transform: uppercase; }
.cmd__hl { position: absolute; left: 8px; right: 8px; top: 0; height: 36px; border-radius: var(--r-lg); background: var(--fill); transition: transform .28s cubic-bezier(.33, 1, .68, 1), height .28s; }
.cmd__empty { padding: 20px; text-align: center; color: var(--ink-muted); display: none; }
.cmd__foot { display: flex; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: .75rem; color: var(--ink-muted); }
.cmd__foot kbd { margin-right: 6px; }

/* ---------- toasts ---------- */
.toaster { position: fixed; z-index: 1150; left: 20px; bottom: 20px; width: min(20rem, calc(100vw - 40px)); list-style: none; }
.toast { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 10px 14px; border-radius: var(--r-xl); background: var(--popover); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); font-size: .8rem; transition: transform .55s var(--ease), opacity .45s; touch-action: pan-y; }
.toast::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: #22b45e; }
.toast[data-kind="leave"]::before { background: var(--ink-muted); }
.toast b { font-weight: 500; display: block; } .toast span { font: .72rem var(--mono); color: var(--ink-muted); }

/* ---------- cursors ---------- */
.cursors { position: fixed; inset: 0; z-index: 1100; pointer-events: none; overflow: hidden; }
html.is-overlay .cursors, html.nav-open .cursors { opacity: 0; }
.cg__peer { position: absolute; left: 0; top: 0; will-change: transform; }
.cg__ptr { width: 22px; height: 22px; fill: var(--c); stroke: none; }
.cg__peer.is-left .cg__ptr { scale: -1 1; }
.cg__name { position: absolute; top: 18px; left: 16px; padding: 1px 5px; border-radius: 3px; background: var(--c); color: var(--peer-ink); font: 500 .62rem/1.5 var(--mono); white-space: nowrap; }
.cg__bubble { position: absolute; top: 38px; left: 16px; max-width: 14rem; padding: 4px 8px; border-radius: 8px; background: var(--c); color: var(--peer-ink); font-size: .78rem; opacity: 0; translate: 0 4px; transition: opacity .22s, translate .22s; }
.cg__bubble.is-on { opacity: 1; translate: 0 0; }
.cg__input { position: fixed; z-index: 1101; width: 14rem; padding: 6px 10px; border-radius: 8px; border: 0; outline: 2px solid var(--ink); background: var(--popover); color: var(--ink); font: .85rem var(--sans); }

/* ---------- reveals ---------- */
[data-reveal], [data-reveal-scroll] { opacity: 0; translate: 0 24px; }
.is-revealed [data-reveal], [data-reveal-scroll].in { opacity: 1; translate: 0 0; transition: opacity .85s cubic-bezier(.33, 1, .68, 1) var(--d, 0s), translate .85s cubic-bezier(.33, 1, .68, 1) var(--d, 0s); }

/* ---------- footer ---------- */
.ft { position: relative; padding: 110px var(--gut) 22px; overflow: hidden; border-top: 1px solid var(--line); }
.ft__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.ft__mail { display: block; margin-top: 14px; font: 600 clamp(2rem, 4.2vw, 3.6rem)/1.02 var(--sans); letter-spacing: -.04em; transition: color .3s; }
.ft__mail:hover { color: var(--spot-2); }
.ft__cols { display: flex; gap: clamp(28px, 5vw, 72px); }
.ft__cols > div { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.ft__cols .eyebrow { margin-bottom: 6px; }
.ft__cols a:hover { color: var(--spot-2); }
.ft__muted { color: var(--ink-muted); }
.ft__word { margin: 70px 0 10px; font: 700 clamp(4rem, 15.5vw, 15rem)/.8 var(--sans); letter-spacing: -.06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--divider); user-select: none; }
.ft__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); font: 500 .68rem var(--mono); text-transform: uppercase; color: var(--ink-muted); }

@media (max-width: 760px) {
  .hud__chip:nth-child(n+3) { display: none; }
  .hud { top: auto; bottom: 14px; left: auto; right: 14px; }
  .nv { top: 10px; }
  .ft__cols { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01s !important; animation-duration: .01s !important; } }