/* Base face: Untitled Sans Regular (Klim), fonts/untitled-regular.woff2. Each face is a Latin-1 + punctuation WOFF2 subset. */
@font-face { font-family: "Untitled"; src: url("fonts/untitled-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Shared ground for every direction: blacks and greys, one sans, depth from surfaces rather than lines, springy motion. */
:root {
  /* surfaces */
  --bg: #0a0a0a;
  --panel: #121212;
  --panel-2: #181818;
  --panel-3: #202020;
  /* text — near-white is reserved for emphasis */
  --fg: #d4d4d2;
  --hi: #f0f0ee;
  --mute: #8a8a88;
  --dim: #5b5b5a;
  /* hairlines, used sparingly */
  --line: rgba(255, 255, 255, .055);
  --line-2: rgba(255, 255, 255, .09);
  /* depth */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .035);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .35), 0 18px 48px -18px rgba(0, 0, 0, .7);
  --r: 10px;
  /* type */
  --sans: "Untitled", "Untitled Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Mono", "Arial Monospaced MT Std", ui-monospace, Menlo, monospace;
  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.077 24.7%, 1.067 27.2%, 1.025 33.1%, 1.002 37.5%, .994 41.1%, .997 53.4%, 1); }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.38 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1px solid var(--mute); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
::selection { background: #3a3a3a; color: var(--hi); }

/* Images fade in once decoded; they rest visible if JS never runs. */
img.fd { opacity: 0; transition: opacity .7s var(--ease); }
img.fd.ok { opacity: 1; }

/* Press feedback for anything tappable that carries .press */
.press { transition: transform .5s var(--spring); }
.press:active { transform: scale(.975); transition-duration: .12s; }

/* Scroll reveal: only applied to things that start below the fold, so the first frame is always complete. */
.rv-wait { opacity: 0; transform: translate3d(0, 18px, 0); }
.rv-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }

/* Direction switcher — sits outside every design. */
.dx { position: fixed; z-index: 999; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(24, 24, 24, .78);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); box-shadow: var(--lift);
  font: 12px/1 var(--sans); color: var(--fg); white-space: nowrap; }
.dx a { display: flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 11px; border-radius: 999px; transition: background .3s var(--ease), transform .5s var(--spring); }
.dx a:hover { background: rgba(255, 255, 255, .06); }
.dx a:active { transform: scale(.94); transition-duration: .1s; }
.dx .dx-now { padding: 0 13px; }
.dx .dx-now span { color: var(--dim); margin-right: 8px; }
@media (max-width: 520px) { .dx .dx-now span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .rv-wait { opacity: 1; transform: none; } }