@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-synthesis: none;
  background: #08090b;
  color: #ff5100;
  -webkit-font-smoothing: antialiased;
  --page-bg: #08090b;
  --stage-bg: radial-gradient(ellipse at 50% 44%, #151012 0%, #08090b 62%);
  --muted: #b5ada9;
  --footer: #928d8a;
  --link: #d1c7c0;
  --underline: #6f4e40;
}

:root[data-appearance="mist"] {
  color-scheme: light;
  background: #f4f5f6;
  --page-bg: #f4f5f6;
  --stage-bg: #f4f5f6;
  --muted: #606268;
  --footer: #686a70;
  --link: #36383d;
  --underline: #a4a5a9;
}

@media (prefers-color-scheme: light) {
  :root:not([data-appearance]) {
    color-scheme: light;
    background: #f4f5f6;
    --page-bg: #f4f5f6;
    --stage-bg: #f4f5f6;
    --muted: #606268;
    --footer: #686a70;
    --link: #36383d;
    --underline: #a4a5a9;
  }
}

* { box-sizing: border-box; }
body { margin: 0; }
a { -webkit-tap-highlight-color: transparent; }
::selection { background: #ff5100; color: var(--page-bg); }
.stage { position: relative; isolation: isolate; min-height: 520px; height: 100svh; overflow: hidden; background: var(--stage-bg); }
.atmosphere { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.identity { position: absolute; z-index: 1; inset: 45% 0 auto; transform: translateY(-50%); text-align: center; }
.lockup { display: inline-block; text-align: center; }
h1 { display: flex; flex-direction: row; align-items: baseline; gap: .24em; margin: 0; font-size: clamp(60px, 7.68vw, 115.2px); line-height: 1.01; letter-spacing: -.03em; font-weight: 600; }
.word { display: block; white-space: nowrap; }
.description { margin: 28px 0 0; font-size: clamp(12px, 1vw, 14px); letter-spacing: .02em; font-weight: 400; color: var(--muted); }
footer { position: absolute; z-index: 3; inset: auto 24px max(7.5vh, 36px); text-align: center; }
.follow { display: inline-flex; align-items: center; gap: .28em; min-height: 44px; color: var(--footer); font-size: 13px; letter-spacing: .01em; text-decoration: none; transition: color .2s; }
.follow span { color: var(--link); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--underline); transition: text-decoration-color .2s; }
.follow svg { width: 13px; height: 13px; margin-left: 8px; stroke: currentColor; stroke-width: 1.4; transition: transform .2s; }
.follow:hover { color: var(--link); }
.follow:hover span { text-decoration-color: #ff5100; }
.follow:hover svg { transform: translate(2px, -2px); }
a:focus-visible, button:focus-visible { outline: 1px solid #ff5100; outline-offset: 6px; }
.theme-toggle { position: absolute; z-index: 3; top: max(22px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--footer); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--link); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon, :root[data-appearance="mist"] .theme-toggle .sun { display: none; }
:root[data-appearance="mist"] .theme-toggle .moon { display: block; }
.is-enhanced .atmosphere { opacity: 1; }
.reveal-pending h1, .reveal-pending .description { opacity: 0; }
.is-enhanced .description { opacity: 0; transform: translateY(4px); transition: opacity .8s, transform .8s; }
.is-enhanced.is-readable .description { opacity: 1; transform: none; }

/* A static page must never inherit a half-finished reveal or a painted canvas. */
:root[data-reveal-skip="true"] .atmosphere, .atmosphere[hidden] { display: none; }
:root[data-reveal-skip="true"] h1, :root[data-reveal-skip="true"] .description { opacity: 1; transform: none; transition: none; }
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .atmosphere { display: none; }
  .reveal-pending h1, .reveal-pending .description, .is-enhanced .description { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 600px) {
  .stage { min-height: 480px; }
  .lockup { text-align: left; }
  h1 { flex-direction: column; align-items: flex-start; gap: 0; font-size: 16.8vw; }
  .identity { top: 45%; }
  .description { font-size: clamp(10px, 3.1vw, 12px); margin-top: 24px; }
  footer { bottom: max(12vh, 70px); inset-inline: 15px; }
  .follow { font-size: 12px; }
}
@media (max-height: 550px) and (min-width: 601px) {
  .stage { min-height: 390px; }
  h1 { font-size: min(7.68vw, 21.6vh); }
  .description { margin-top: 24px; }
  footer { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .is-enhanced h1, .is-enhanced .description { opacity: 1; transform: none; }
  .atmosphere { display: none; }
}