:root {
  --bg: #ffffff;
  --mist: #f6f7f9;
  --surface: #ffffff;
  --ink: #0b1220;
  --ink2: #4e5a6e;
  --ink3: #69758a;
  --line: #e4e7ec;
  --line2: #d0d5dd;
  --accent: #2448e6;
  --accent-ink: #ffffff;
  --accent-soft: #eef2ff;
  --hl: #ffe066;
  --ok: #0e7a40;
  --code-bg: #0b1220;
  --code-ink: #e6eaf2;
  --code-dim: #8c97ad;
  --code-key: #9db0ff;
  --btn: #0b1220;
  --btn-ink: #ffffff;
  --globe-base: #f7f9fc;
  --globe-rim: #d5def3;
  --globe-land: #c2cad7;
  --globe-na: #2448e6;
  --globe-grat: #e6ebf2;
  --globe-ink: #0b1220;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1120;
    --mist: #0f1829;
    --surface: #111b2e;
    --ink: #e9eef6;
    --ink2: #aab5c6;
    --ink3: #8f9bb0;
    --line: #22304a;
    --line2: #2e3e5c;
    --accent: #8ba0ff;
    --accent-ink: #0a1120;
    --accent-soft: #1a2547;
    --hl: rgba(255, 214, 77, 0.34);
    --ok: #5fd08f;
    --code-bg: #060b16;
    --btn: #e9eef6;
    --btn-ink: #0a1120;
    --globe-base: #101a2e;
    --globe-rim: #28396a;
    --globe-land: #3a4866;
    --globe-na: #8ba0ff;
    --globe-grat: #18243c;
    --globe-ink: #e9eef6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1120;
  --mist: #0f1829;
  --surface: #111b2e;
  --ink: #e9eef6;
  --ink2: #aab5c6;
  --ink3: #8f9bb0;
  --line: #22304a;
  --line2: #2e3e5c;
  --accent: #8ba0ff;
  --accent-ink: #0a1120;
  --accent-soft: #1a2547;
  --hl: rgba(255, 214, 77, 0.34);
  --ok: #5fd08f;
  --code-bg: #060b16;
  --btn: #e9eef6;
  --btn-ink: #0a1120;
  --globe-base: #101a2e;
  --globe-rim: #28396a;
  --globe-land: #3a4866;
  --globe-na: #8ba0ff;
  --globe-grat: #18243c;
  --globe-ink: #e9eef6;
  color-scheme: dark;
}
html {
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Schibsted Grotesk",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--bg);
}
img,
svg,
canvas {
  max-width: 100%;
}
a {
  color: var(--accent);
}
code,
pre,
.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}