:root {
  color-scheme: dark;
  --brand: #2e4be0;
  --background: #000;
  --glass: rgba(216, 227, 255, .12);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  color: #f5f6ff;
  background: var(--background);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
.code-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000;
}
.code-field canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.stage {
  position: relative;
  z-index: 1;
  min-height: max(100svh, 32rem);
  padding: clamp(1.5rem, 7vh, 5rem) 1.5rem 4rem;
}
.composition {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 3rem);
  font-family: "Sora", sans-serif;
  font-size: clamp(2.667rem, 5.15625vw, 3.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.04em;
  text-align: center;
  animation: fade-in 1s cubic-bezier(.2,.7,.2,1) both;
}
.phrase-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.intro-text {
  font: inherit;
  letter-spacing: inherit;
}
.intro-copy { display: inline; }
.intro-word { display: inline-block; white-space: nowrap; }
.intro-baseline { display: inline-block; width: 0; height: 0; overflow: hidden; line-height: 0; vertical-align: baseline; }
.intro-surface {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
}
.composition.surface-ready .intro-copy { visibility: hidden; }
.composition.surface-ready .intro-surface { opacity: 1; }
.contact-space {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 8.666667em;
  height: 3.111111em;
  margin-inline: .777778em;
  font-size: .9375rem;
  line-height: 1;
}
.contact {
  font-family: "Sora", sans-serif;
  letter-spacing: normal;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.contact.is-open::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 30.625rem;
  max-width: calc(100vw - 2.5rem);
  height: calc(var(--card-gap, .625rem) + .125rem);
  transform: translateX(var(--card-offset, 0px));
}
.contact-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(226, 236, 255, .16);
  border-radius: 1em;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 38px rgba(4,10,40,.18);
  color: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: none;
  cursor: pointer;
  z-index: 2;
  transition: background .3s, color .3s, border-color .3s;
}
.contact-trigger-content { display: inline-flex; align-items: center; justify-content: center; gap: .333333em; line-height: 1; transform: translateY(1px); }
#contact-label { display: block; line-height: 1; }
.contact-symbol { display: block; width: 1em; height: 1em; flex-shrink: 0; }
.contact.is-open .contact-trigger { background: #fff; color: #08090d; border-color: #fff; }
.contact.is-open .contact-symbol { order: 2; }
.contact-trigger:focus-visible { outline: 2px solid #c6d5ff; outline-offset: 5px; }
.email:focus-visible, .socials a:focus-visible { outline: 2px solid #c6d5ff; outline-offset: 3px; border-radius: 3px; }
.contact-card {
  font-family: "Sora", sans-serif;
  letter-spacing: -.02em;
  position: absolute;
  top: calc(100% + var(--card-gap, .625rem));
  right: 0;
  width: 30.625rem;
  max-width: calc(100vw - 2.5rem);
  min-height: 10.625rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(226, 236, 255, .20);
  border-radius: 1.375rem;
  background: rgba(191, 208, 255, .14);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 18px 58px rgba(3,8,37,.25);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--card-offset, 0px), -.625rem) scale(.98);
  transform-origin: top right;
  clip-path: inset(0 0 100% 0 round 1.375rem);
  transition: opacity .28s, transform .32s, clip-path .32s;
}
.contact.is-open .contact-card {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--card-offset, 0px), 0) scale(1);
  clip-path: inset(0 0 0 0 round 1.375rem);
  transition: opacity .3s, transform .85s cubic-bezier(.2,.55,.2,1), clip-path .85s cubic-bezier(.2,.55,.2,1);
}
.portrait {
  width: 8.125rem;
  height: 8.125rem;
  flex: 0 0 8.125rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(223,231,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.portrait span { font-size: 1.45rem; font-weight: 500; letter-spacing: -.06em; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.3); transform-origin: 50% 30%; pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.contact-info { min-width: 0; flex: 1; }
.contact-name { margin: 0; font-size: 1.5625rem; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.email {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  max-width: 100%;
  margin-top: .35rem;
  padding: .1rem 0;
  color: #e3eaff;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -.02em;
  text-decoration: none;
}
.email svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; opacity: .85; }
.email span { overflow-wrap: anywhere; }
.email:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.socials { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .35rem; }
.socials a { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.5rem; color: #d2daee; font-size: 1.25rem; line-height: 1.35; letter-spacing: -.02em; text-decoration: none; }
.socials svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.socials a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) {
  .stage { padding-inline: 1.25rem; }
  .contact-card { gap: .75rem; padding: 1rem; }
  .portrait { flex-basis: clamp(5rem, 23vw, 6rem); width: clamp(5rem, 23vw, 6rem); height: clamp(5rem, 23vw, 6rem); }
}
@media (max-width: 600px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; min-height: 0; height: 100dvh; touch-action: pinch-zoom; }
  .code-field { height: 100dvh; }
  .stage { height: 100%; min-height: 0; padding-inline: 1.25rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  .composition {
    top: 42%;
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: .25em;
    justify-content: center;
    width: calc(100% - 2.5rem);
    max-width: calc(100% - 2.5rem);
    font-size: clamp(2rem, 9.8vw, 3.125rem);
    line-height: 1.22;
  }
  .intro-lead, .intro-state, .intro-after { display: block; white-space: nowrap; }
  .intro-lead { grid-area: 1 / 1 / 2 / 3; }
  .intro-state { grid-area: 2 / 1; text-align: right; }
  .intro-after { grid-area: 2 / 2; text-align: left; }
  .contact-space { grid-area: 3 / 1 / 4 / 3; justify-self: center; height: 2.933333em; margin: 1.5rem 0 0; font-size: .9375rem; }
  .contact-card { left: 50%; right: auto; min-height: 0; max-height: var(--card-max-height, calc(100dvh - 2rem)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; transform: translate(calc(-50% + var(--card-offset, 0px)), -.625rem) scale(.98); transform-origin: top center; }
  .contact-name { font-size: 1.25rem; }
  .email, .socials a { font-size: 1rem; }
  .email svg, .socials svg { width: 1rem; height: 1rem; }
  .contact.is-open .contact-card { transform: translate(calc(-50% + var(--card-offset, 0px)), 0) scale(1); }
  .contact.is-open::after { left: 50%; right: auto; transform: translateX(calc(-50% + var(--card-offset, 0px))); }
}
@media (max-width: 374px) {
  .contact-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; }
  .contact-info { display: contents; }
  .portrait { grid-area: 1 / 1 / 3 / 2; }
  .contact-name { grid-area: 1 / 2; align-self: end; }
  .socials { grid-area: 2 / 2; align-self: start; margin-top: 0; gap: .25rem .625rem; }
  .email { grid-area: 3 / 1 / 4 / 3; justify-self: center; margin-top: 0; }
}
@media (max-width: 600px) and (max-height: 500px) {
  .composition { top: max(1.25rem, env(safe-area-inset-top)); transform: translateX(-50%); }
  .contact-card { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-trigger, .contact-card { background: rgba(23, 36, 85, .92); }
  .contact.is-open .contact-trigger { background: #fff; }
}