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

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/onest-regular.ttf') format('truetype');
}

:root {
  color-scheme: light;
  --sky: #79c6f1;
  --cloud-face: #f3faff;
  --cloud-under: #a5d9f3;
  --celestial: #fff5c9;
  --particle: #f3faff;
  --text: #172838;
  --muted: #28445c;
  --accent: #173c61;
  --surface: rgb(245 250 255 / 78%);
  --surface-strong: #f6fbff;
  --line: rgb(72 107 136 / 58%);
  --hover: rgb(228 242 252 / 92%);
  --font-pixel: 'Departure Mono', ui-monospace, monospace;
  --font-body: Onest, sans-serif;
  --text-base: 1rem;
  --text-title: clamp(1.75rem, 5vw, 2.35rem);
  --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: #101b2b;
    --text: #f2f7fb;
    --muted: #bed1e1;
    --accent: #e0efff;
    --surface: rgb(14 26 41 / 72%);
    --surface-strong: #142438;
    --line: rgb(116 151 182 / 60%);
    --hover: rgb(33 57 82 / 92%);
  }
}

/* Sky palettes. The server chooses the scene; these define how it looks. */
:root[data-scene='day'] { --sky: #79c6f1; --cloud-face: #f3faff; --cloud-under: #a5d9f3; --celestial: #fff5c9; --particle: #f3faff; }
:root[data-scene='morning'] { --sky: #f0d5b0; --cloud-face: #eaf2f7; --cloud-under: #d7a781; --celestial: #fff2d8; --particle: #eaf2f7; }
:root[data-scene='evening'] { --sky: #efd9de; --cloud-face: #fff0e8; --cloud-under: #d9bed0; --celestial: #fff2d9; --particle: #fbe9e5; }
:root[data-scene='night'] { --sky: #8297b0; --cloud-face: #d6e2ed; --cloud-under: #71869f; --celestial: #f5eacd; --particle: #e0ebf4; }
:root[data-scene='snow'] { --sky: #dcebf3; --cloud-face: #f4faff; --cloud-under: #b8d9eb; --celestial: #ffffff; --particle: #ffffff; }
:root[data-scene='rain'] { --sky: #88a7be; --cloud-face: #c8deeb; --cloud-under: #7393aa; --celestial: #d7e8f3; --particle: #e5f1f8; }
:root[data-scene='thunder'] { --sky: #283b51; --cloud-face: #496079; --cloud-under: #344b64; --celestial: #dfeaf4; --particle: #a8c2d9; }

@media (prefers-color-scheme: dark) {
  :root[data-scene='day'] { --sky: #143249; --cloud-face: #28546c; --cloud-under: #1b415a; --celestial: #d9deaf; --particle: #badff4; }
  :root[data-scene='morning'] { --sky: #343047; --cloud-face: #65506c; --cloud-under: #473f58; --celestial: #e7bc94; --particle: #e3c6b4; }
  :root[data-scene='evening'] { --sky: #482c40; --cloud-face: #754758; --cloud-under: #593548; --celestial: #eeabaa; --particle: #e7b6c0; }
  :root[data-scene='night'] { --sky: #101b2b; --cloud-face: #34465f; --cloud-under: #25364c; --celestial: #d5e3ef; --particle: #c5d7e7; }
  :root[data-scene='snow'] { --sky: #182c3d; --cloud-face: #355268; --cloud-under: #253e53; --celestial: #d6f2ff; --particle: #d6f2ff; }
  :root[data-scene='rain'] { --sky: #142435; --cloud-face: #31485f; --cloud-under: #21384c; --celestial: #aecde2; --particle: #8aafc9; }
  :root[data-scene='thunder'] { --sky: #101a29; --cloud-face: #26384c; --cloud-under: #1c2b3e; --celestial: #dfeaf4; --particle: #8aa8c4; }
}

* { box-sizing: border-box; }
html { background: var(--sky); }
body {
  margin: 0;
  color: var(--text);
  font: 400 var(--text-base)/1.5 var(--font-body);
  -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(--surface-strong);
  border: 1px solid var(--line);
  font: 400 .875rem/1 var(--font-pixel);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.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(--s3);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  overflow: hidden;
}
.avatar img { display: block; width: 100%; height: auto; border-radius: inherit; aspect-ratio: 1; object-fit: cover; }
.identity-copy { display: grid; gap: var(--s1); width: 100%; }
h1 {
  margin: 0;
  font: 400 var(--text-title)/1.05 var(--font-pixel);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.username {
  color: var(--muted);
  font: 400 .9375rem/1.35 var(--font-pixel);
  letter-spacing: .02em;
}
.bio {
  max-width: 38ch;
  margin: var(--s2) 0 0;
  color: var(--text);
  font: 400 .875rem/1.5 var(--font-pixel);
  letter-spacing: .018em;
  text-wrap: balance;
}
.system-theme-note {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font: 400 .6875rem/1.35 var(--font-pixel);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.links-section { width: 100%; margin-top: var(--s5); }
.profile-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-width: 120px;
  min-height: 46px;
  padding: 9px 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgb(9 25 38 / 10%), inset 0 1px 0 rgb(255 255 255 / 28%);
  text-decoration: none;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--hover);
  border-color: var(--accent);
}
.menu-item:active { background: var(--surface-strong); }
.menu-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
@media (prefers-color-scheme: dark) {
  .menu-icon--github { filter: invert(1); }
}
.menu-label {
  display: block;
  font: 400 .875rem/1 var(--font-pixel);
  letter-spacing: .025em;
  white-space: nowrap;
}

@media (min-width: 768px) { .page { padding-inline: var(--s7); } }
@media (max-width: 390px) {
  .page { padding-inline: var(--s4); }
  .profile-links { gap: 8px; }
  .menu-item { min-width: 104px; min-height: 44px; padding-inline: 11px; }
  .menu-icon { width: 22px; height: 22px; }
  .menu-label { font-size: .8125rem; }
}
@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)); }
  .links-section { margin-top: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .menu-item { border-color: ButtonText; }
  .menu-item:focus-visible { outline-color: Highlight; }
}