:root {
  --bg: #07090a;
  --text: #eceeed;
  --muted: #8d9598;
  --faint: #5c6468;
  --accent: #e3ba9e;

  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --size-label: 0.75rem;
  --gutter: clamp(16px, 4vw, 48px);

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--bg); }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.brand-sub { font-weight: 300; color: var(--muted); }
.brand-mark { width: 26px; height: 26px; }
.brand-mark path { fill: none; stroke: var(--text); stroke-width: 1.4; }
.brand-mark path:nth-child(2) { opacity: 0.7; }
.brand-mark path:nth-child(3) { opacity: 0.45; }
.brand-core { fill: var(--accent); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  padding: 64px var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
.hero-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(60% 50% at 62% 46%, rgba(227, 186, 158, 0.16), transparent 70%),
    repeating-radial-gradient(circle at 62% 46%, transparent 0 22px, rgba(236, 239, 238, 0.05) 22px 23px),
    var(--bg);
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(7, 9, 10, 0.55), transparent 75%),
    linear-gradient(to bottom, rgba(7, 9, 10, 0.4), transparent 25%, transparent 70%, var(--bg));
}
.status {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
/* The glyphs differ in width; a fixed box keeps the word from shifting as they cycle. */
.star {
  display: inline-block;
  width: 1em;
  text-align: center;
  color: var(--accent);
}
/* Every word sits in the same grid cell as a hidden sizer, so the box is as wide as the longest word and the line stays put while it retypes. */
.ticker {
  display: inline-grid;
  text-align: left;
}
.ticker > * { grid-area: 1 / 1; }
.sizer { visibility: hidden; }
.cursor {
  position: relative;
  display: none;
  min-width: 0.5em;
  color: var(--bg);
  isolation: isolate;
}
.cursor::before {
  content: "";
  position: absolute;
  inset: 0.085em 0 0.095em;
  z-index: -1;
  background: var(--text);
}
/* An empty inline-block has no line box, so it would collapse to zero height and hide the block. */
.cursor:empty::after { content: "\200b"; }
.cursor.is-end { margin-left: 0.06em; }
.ticker.is-typing .cursor,
.sizer .cursor { display: inline-block; }
.hero-meta {
  position: absolute;
  inset: auto var(--gutter) 28px var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.08em;
  color: var(--faint);
}