@font-face {
  font-family: "Geist";
  src: url("geist.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #0a0a0c;
  --text: #f5f5f7;
  --text-2: #c9c9d1;
  --muted: #8d8d98;
  --line: #1f1f26;
  --line-2: #2c2c35;
  --blue: #3a86ff;
  --blue-l: #79adff;
  --blue-d: #1e5fd6;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 4vw, 48px);
  --k: 1;
  --t: calc(.6 + .4 * var(--k));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100vh;
  height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow: clip;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; flex: none; fill: currentColor; }
:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

.wrap { position: relative; z-index: 1; width: min(100% - 2 * var(--gut), 1200px); margin-inline: auto; }

.top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: max(52px, calc(76px * var(--k)));
}
.brand { display: inline-flex; align-items: center; color: var(--text); }
.brand .logo { width: auto; height: clamp(16px, 5.2vw, 20px); }
.meta { display: flex; align-items: center; gap: 20px; }
.loc { color: var(--muted); font-size: 14px; }
.langs { display: flex; gap: 2px; }
.langs button {
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.langs button:hover { color: var(--text); }
.langs button[aria-pressed="true"] { background: rgba(255, 255, 255, .07); color: var(--text); }

.page { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }

.stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) 1px;
  grid-template-areas: "who ava" "ground ground";
  column-gap: clamp(16px, 4vw, 64px);
}
.who { grid-area: who; align-self: end; min-width: 0; padding-bottom: calc(clamp(16px, 4.5vh, 48px) * var(--k)); }
h1 { margin: 0; font-size: calc(clamp(44px, 6vw, 88px) * var(--t)); font-weight: 600; line-height: .94; letter-spacing: -.055em; }
h1 span { display: block; white-space: nowrap; }
.role {
  width: fit-content;
  margin: calc(20px * var(--t)) 0 0;
  background: linear-gradient(90deg, var(--blue-l), var(--blue) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: calc(clamp(20px, 2.1vw, 28px) * var(--t));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.ava {
  --ah: min(clamp(220px, 46vh, 400px), calc(min(100vw - 2 * var(--gut), 1200px) * .476));
  grid-area: ava;
  position: relative;
  align-self: end;
  margin-right: clamp(0px, 3vw, 40px);
  line-height: 0;
}
.ava::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 -26%;
  height: 64%;
  background: radial-gradient(closest-side, rgba(58, 134, 255, .38), rgba(58, 134, 255, 0));
  filter: blur(12px);
  opacity: .8;
  transition: opacity .7s var(--ease);
}
.ava.plim::before { opacity: 1; transition-duration: .1s; }
.ava::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(121, 173, 255, 0), rgba(121, 173, 255, .85), rgba(121, 173, 255, 0));
}
.ava canvas { display: block; width: calc(var(--ah) * 1.05); height: var(--ah); image-rendering: pixelated; }
#avatar { cursor: pointer; }
#fx { position: absolute; top: 0; left: 0; pointer-events: none; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.ground { grid-area: ground; background: var(--line-2); }

.info { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); }
.contact, .stack { padding-top: calc(clamp(18px, 4.5vh, 48px) * var(--k)); }
h2 { margin: 0 0 calc(12px * var(--k)); color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .01em; }

.links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: calc(17px * var(--k)) 10px calc(17px * var(--k)) 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(58, 134, 255, .14), rgba(58, 134, 255, 0) 85%) no-repeat 0 0 / 0% 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-size .55s var(--ease);
}
.row .ic { width: 20px; height: 20px; color: var(--text-2); transition: color .25s; }
.row .v { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; transition: transform .45s var(--ease); }
.row .act { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13.5px; transition: color .25s; }
.row .act svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.row:hover, .row:focus-visible { background-size: 100% 100%; }
.row:hover .ic, .row:focus-visible .ic, .row:hover .act, .row:focus-visible .act, .row.ok .act { color: var(--blue-l); }
.row:hover .v, .row:focus-visible .v { transform: translateX(4px); }
.row:hover .go, .row:focus-visible .go { transform: translate(2px, -2px); }

.groups { margin: 0; border-top: 1px solid var(--line); }
.group {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: calc(14px * var(--k)) 6px;
  border-bottom: 1px solid var(--line);
}
.group dt { color: var(--muted); font-size: 14px; }
.group dd { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
.tech { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; }
.tech svg { width: 18px; height: 18px; color: var(--text-2); transition: color .25s, transform .45s var(--ease); }
.tech:hover svg { color: var(--blue-l); transform: translateY(-2px); }

.foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: calc(18px * var(--k)) 0 calc(22px * var(--k));
  color: var(--muted);
  font-size: 13px;
}

.lost { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-bottom: 10vh; }
.lost .code { margin: 0; color: var(--blue-l); font-size: 15px; font-weight: 500; }
.lost h1 { font-size: clamp(36px, 6vw, 64px); }
.lost .back { width: fit-content; color: var(--text-2); border-bottom: 1px solid var(--line-2); transition: color .25s, border-color .25s; }
.lost .back:hover { color: var(--blue-l); border-color: var(--blue-l); }

@media (prefers-reduced-motion: no-preference) {
  .in { animation: rise .9s var(--ease) both; }
  .d1 { animation-delay: 80ms; }
  .d3 { animation-delay: 240ms; }
  .d4 { animation-delay: 320ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

@media (max-width: 1179px) {
  .info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row .act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 979px) {
  .info { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px), (max-height: 520px) {
  .row { gap: 12px; padding-block: calc(13px * var(--k)); }
  .row .v { font-size: 15px; }
  .row .pre { display: none; }
  .groups { display: flex; flex-wrap: wrap; gap: calc(8px * var(--k)) 16px; padding-top: calc(12px * var(--k)); }
  .group, .group dd { display: contents; }
  .group dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tech { gap: 7px; font-size: 14px; }
  .tech svg { width: 16px; height: 16px; }
}

@media (max-width: 760px) {
  .top { height: max(48px, calc(60px * var(--k))); }
  .stage { column-gap: 12px; }
  .ava { --ah: min(140px, 36vw); margin-right: 0; }
  .who { padding-bottom: calc(18px * var(--k)); }
  h1 { font-size: calc(clamp(26px, 8.4vw, 44px) * var(--t)); }
  .role { margin-top: calc(10px * var(--t)); font-size: calc(clamp(15px, 4.6vw, 20px) * var(--t)); }
}

@media (max-height: 520px) and (min-width: 761px) {
  .top { height: max(44px, calc(56px * var(--k))); }
  .page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); }
  .info { grid-template-columns: minmax(0, 1fr); align-self: end; }
  .ava { --ah: min(46vh, 200px); margin-right: 0; }
  .who { padding-bottom: calc(16px * var(--k)); }
  h1 { font-size: calc(clamp(24px, 3.6vw, 40px) * var(--t)); }
  .role { margin-top: calc(10px * var(--t)); font-size: calc(clamp(15px, 1.8vw, 20px) * var(--t)); }
  .contact, .stack { padding-top: calc(14px * var(--k)); }
}

@media (max-height: 640px) {
  .foot { display: none; }
}

@media (max-width: 560px) {
  .loc { display: none; }
}

@media (max-width: 400px) {
  .row .v { white-space: normal; line-height: 1.35; }
}