@font-face {
  font-family: 'Departure Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/departure-mono.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --sky-0: #62b5ea;
  --sky-1: #79c6f1;
  --sky-2: #94d3f4;
  --sky-3: #b4e1f7;
  --sky: #79c6f1;
  --cloud-face: #f3faff;
  --cloud-under: #a5d9f3;
  --celestial: #fff5c9;
  --particle: #f3faff;
  --ground: #6f9fc3;
  --ground-far: #92bddc;
  --window: #86b2d2;
  --window-lit: #fff1b8;
  --text: #172838;
  --muted: #243f57;
  --accent: #173c61;
  --btn-face: #f6fbff;
  --btn-edge: #3d6485;
  --btn-shadow: #3d6485;
  --btn-hover: #e2f0fa;
  --btn-text: #172838;
  --font-pixel: 'Departure Mono', ui-monospace, monospace;
  --title: 33px;
  --title-spacing: 3px;
  --edge: 2px;
  --depth: 6px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --menu-width: 456px;
  --avatar-size: 112px;
}

/* The sky palette is supplied per scene by the server; these are the fallback
   values if that style block is ever missing. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --sky-0: #0b1422;
    --sky-1: #101b2b;
    --sky-2: #142236;
    --sky-3: #1b2b42;
    --sky: #101b2b;
    --text: #f2f7fb;
    --muted: #bed1e1;
    --accent: #e0efff;
    --btn-face: #dfe8f0;
    --btn-edge: #7f9db8;
    --btn-shadow: #3b5670;
    --btn-hover: #eef4f9;
    --btn-text: #152331;
  }
}

/* Sky palettes. The server chooses the scene; these define how it looks. */
:root[data-scene='day'] { --sky-0: #62b5ea; --sky-1: #79c6f1; --sky-2: #94d3f4; --sky-3: #b4e1f7; --sky: #79c6f1; --cloud-face: #f3faff; --cloud-under: #a5d9f3; --celestial: #fff5c9; --particle: #f3faff; --ground: #6f9fc3; --ground-far: #92bddc; --window: #86b2d2; --window-lit: #fff1b8; }
:root[data-scene='morning'] { --sky-0: #b4cfe2; --sky-1: #d6d6cf; --sky-2: #f0d5b0; --sky-3: #f6c79c; --sky: #d6d6cf; --cloud-face: #f4f7f9; --cloud-under: #d7a781; --celestial: #ffdc97; --particle: #eaf2f7; --ground: #9f8893; --ground-far: #bca5aa; --window: #ad96a0; --window-lit: #ffe0a0; }
:root[data-scene='evening'] { --sky-0: #b2add6; --sky-1: #d2bfda; --sky-2: #efd9de; --sky-3: #f5c2b2; --sky: #d2bfda; --cloud-face: #fff0e8; --cloud-under: #d9bed0; --celestial: #ffcc9a; --particle: #fbe9e5; --ground: #876e91; --ground-far: #a58dac; --window: #967ea1; --window-lit: #ffd694; }
:root[data-scene='night'] { --sky-0: #8ea3bb; --sky-1: #97abc1; --sky-2: #a3b5c9; --sky-3: #b2c1d2; --sky: #8ea3bb; --cloud-face: #dfe8f1; --cloud-under: #71869f; --celestial: #f5eacd; --particle: #f0f5fa; --ground: #55657d; --ground-far: #6d7d95; --window: #62728a; --window-lit: #ffe39a; --muted: #22394f; }
:root[data-scene='snow'] { --sky-0: #a7bdcd; --sky-1: #b6c9d7; --sky-2: #c6d6e1; --sky-3: #d6e2ea; --sky: #b6c9d7; --cloud-face: #eef4f8; --cloud-under: #9fb6c7; --celestial: #ffffff; --particle: #ffffff; --ground: #7f93a5; --ground-far: #9aadbd; --window: #8ea2b3; --window-lit: #fff0c0; }
:root[data-scene='rain'] { --sky-0: #7f9db4; --sky-1: #8aa8be; --sky-2: #98b3c7; --sky-3: #a7bfd0; --sky: #8aa8be; --cloud-face: #c8deeb; --cloud-under: #6f8ea6; --celestial: #d7e8f3; --particle: #eef6fb; --ground: #5d7a93; --ground-far: #7592a9; --window: #6a879f; --window-lit: #ffe7a6; --muted: #1a3043; }
:root[data-scene='overcast'] { --sky-0: #a3aeb9; --sky-1: #b1bbc5; --sky-2: #bfc7cf; --sky-3: #cdd3d9; --sky: #b1bbc5; --cloud-face: #e2e7ec; --cloud-under: #8d99a5; --celestial: #f4f6f8; --particle: #eef2f5; --ground: #6f7b87; --ground-far: #8a959f; --window: #7c8894; --window-lit: #ffeab0; }
:root[data-scene='thunder'] { color-scheme: dark; --sky-0: #22344a; --sky-1: #283b51; --sky-2: #2f455d; --sky-3: #384f67; --sky: #283b51; --cloud-face: #42586f; --cloud-under: #344b64; --celestial: #dfeaf4; --particle: #a8c2d9; --ground: #16222f; --ground-far: #1f2e3e; --window: #223245; --window-lit: #f2d07e; --text: #f2f7fb; --muted: #bed1e1; --accent: #e0efff; --btn-face: #dfe8f0; --btn-edge: #7f9db8; --btn-shadow: #3b5670; --btn-hover: #eef4f9; --btn-text: #152331; }

@media (prefers-color-scheme: dark) {
  :root[data-scene='day'] { --sky-0: #0f2940; --sky-1: #143249; --sky-2: #1a3c55; --sky-3: #224862; --sky: #143249; --cloud-face: #28546c; --cloud-under: #1b415a; --celestial: #d9deaf; --particle: #badff4; --ground: #0b1d2b; --ground-far: #112a3d; --window: #16344a; --window-lit: #f2cf7a; }
  :root[data-scene='morning'] { --sky-0: #29283f; --sky-1: #343047; --sky-2: #43364d; --sky-3: #583f55; --sky: #343047; --cloud-face: #65506c; --cloud-under: #473f58; --celestial: #e7bc94; --particle: #e3c6b4; --ground: #1b1828; --ground-far: #262136; --window: #2a2438; --window-lit: #f0c27e; }
  :root[data-scene='evening'] { --sky-0: #33223a; --sky-1: #482c40; --sky-2: #5a3345; --sky-3: #6f3c4a; --sky: #482c40; --cloud-face: #754758; --cloud-under: #593548; --celestial: #eeabaa; --particle: #e7b6c0; --ground: #211424; --ground-far: #2e1b30; --window: #331f34; --window-lit: #f3bf7e; }
  :root[data-scene='night'] { --sky-0: #0b1422; --sky-1: #101b2b; --sky-2: #142236; --sky-3: #1b2b42; --sky: #101b2b; --cloud-face: #34465f; --cloud-under: #25364c; --celestial: #d5e3ef; --particle: #c5d7e7; --ground: #060c16; --ground-far: #0c1624; --window: #0f1a2a; --window-lit: #e9c46a; --muted: #bed1e1; }
  :root[data-scene='snow'] { --sky-0: #13253a; --sky-1: #182c3d; --sky-2: #1d3447; --sky-3: #243d51; --sky: #182c3d; --cloud-face: #355268; --cloud-under: #253e53; --celestial: #d6f2ff; --particle: #d6f2ff; --ground: #0c1a27; --ground-far: #132536; --window: #152a3c; --window-lit: #efd08a; }
  :root[data-scene='rain'] { --sky-0: #0f1d2c; --sky-1: #142435; --sky-2: #182b3e; --sky-3: #1f3448; --sky: #142435; --cloud-face: #31485f; --cloud-under: #21384c; --celestial: #aecde2; --particle: #8aafc9; --ground: #09141f; --ground-far: #0f1d2c; --window: #0f2031; --window-lit: #e3be6c; --muted: #bed1e1; }
  :root[data-scene='overcast'] { --sky-0: #151b22; --sky-1: #1a2129; --sky-2: #1f2731; --sky-3: #262f3a; --sky: #1a2129; --cloud-face: #333d48; --cloud-under: #252d37; --celestial: #c9d2db; --particle: #aeb9c4; --ground: #0c1116; --ground-far: #131920; --window: #151c24; --window-lit: #e0bf72; }
  :root[data-scene='thunder'] { --sky-0: #0b1320; --sky-1: #101a29; --sky-2: #142133; --sky-3: #1a283b; --sky: #101a29; --cloud-face: #26384c; --cloud-under: #1c2b3e; --celestial: #dfeaf4; --particle: #8aa8c4; --ground: #060b14; --ground-far: #0b1320; --window: #0c1522; --window-lit: #e0b862; }
}

* { box-sizing: border-box; }
html { background: var(--sky-0, var(--sky)); }
body {
  margin: 0;
  color: var(--text);
  font: 400 11px/2 var(--font-pixel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a[href], button { cursor: pointer; }
:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: var(--s4);
  left: var(--s4);
  z-index: 10;
  padding: var(--s3) var(--s4);
  color: var(--text);
  background: var(--btn-face);
  box-shadow: 0 0 0 var(--edge) var(--btn-edge);
  font: 400 11px/1 var(--font-pixel);
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

#sky {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  image-rendering: pixelated;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: max(clamp(32px, 9svh, 80px), env(safe-area-inset-top)) var(--s6) max(var(--s7), env(safe-area-inset-bottom));
}
.page-main { width: min(100%, var(--menu-width)); margin-inline: auto; }
.profile { display: flex; flex-direction: column; align-items: center; text-align: center; }

.avatar {
  display: block;
  width: var(--avatar-size);
  margin-bottom: var(--s4);
  border-radius: 50%;
  overflow: hidden;
}
.avatar img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.identity-copy { display: grid; justify-items: center; gap: var(--s2); }
h1 {
  margin: 0;
  font: 400 var(--title)/1 var(--font-pixel);
  letter-spacing: var(--title-spacing);
  overflow-wrap: anywhere;
}
.username {
  color: var(--muted);
  font: 400 11px/2 var(--font-pixel);
  letter-spacing: 1px;
}
.bio {
  max-width: 44ch;
  margin: var(--s2) 0 0;
  color: var(--text);
  font: 400 11px/2 var(--font-pixel);
  letter-spacing: 1px;
  text-wrap: balance;
}
.system-theme-note {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font: 400 11px/2 var(--font-pixel);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; margin-top: var(--s6); }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--btn-text);
  background: var(--btn-face);
  box-shadow:
    0 calc(-1 * var(--edge)) 0 0 var(--btn-edge),
    0 var(--edge) 0 0 var(--btn-edge),
    calc(-1 * var(--edge)) 0 0 0 var(--btn-edge),
    var(--edge) 0 0 0 var(--btn-edge),
    0 var(--depth) 0 0 var(--btn-shadow);
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .12s steps(2), box-shadow .12s steps(2), background-color .12s steps(2);
}
.social-link:hover,
.social-link:focus-visible { --depth: 8px; background: var(--btn-hover); transform: translateY(-2px); }
.social-link:active { --depth: 2px; background: var(--btn-hover); transform: translateY(4px); }
.social-link img { display: block; width: 18px; height: 18px; object-fit: contain; }
.social-link span { font: 400 11px/1 var(--font-pixel); letter-spacing: 1px; }

@media (min-width: 768px) {
  :root { --title: 44px; --title-spacing: 4px; }
  .page { padding-inline: var(--s7); }
}
@media (max-width: 420px) {
  .system-theme-note { letter-spacing: 0; }
}
@media (max-width: 390px) {
  .page { padding-inline: var(--s4); }
}
@media (max-height: 680px) {
  :root { --avatar-size: 92px; }
  .page { padding-top: max(var(--s6), env(safe-area-inset-top)); padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
}

/* Hidden demo panel, opened with the V key. */
.demo {
  position: fixed;
  z-index: 5;
  top: var(--s4);
  left: var(--s4);
  width: 264px;
  max-height: calc(100svh - 2 * var(--s4));
  overflow: auto;
  color: var(--btn-text);
  background: var(--btn-face);
  box-shadow: 0 0 0 var(--edge) var(--btn-edge), 0 var(--depth) 0 0 var(--btn-shadow);
  font: 400 11px/1 var(--font-pixel);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.demo-toggle {
  display: block;
  width: 100%;
  padding: var(--s3) var(--s4);
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}
.demo-toggle::after { content: ' −'; float: right; }
.demo-toggle[aria-expanded='false']::after { content: ' +'; }
.demo-body { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.demo-group { display: grid; gap: var(--s2); }
.demo-title { display: flex; justify-content: space-between; opacity: .7; }
.demo-chips, .demo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-chip:disabled { opacity: .5; cursor: wait; }
.demo-chip {
  padding: 8px 9px;
  color: var(--btn-text);
  background: var(--btn-hover);
  border: 0;
  box-shadow: 0 0 0 1px var(--btn-edge);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.demo-chip[aria-pressed='true'] { color: var(--btn-face); background: var(--accent); }
.demo-wide { flex: 1; }
.demo-range { width: 100%; accent-color: var(--accent); }
.is-off { opacity: .4; }
.demo-hint { margin: 0; line-height: 1.6; opacity: .6; }
@media (max-width: 767px) {
  .demo { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 70svh; padding-bottom: env(safe-area-inset-bottom); }
}