:root {
  color-scheme: light;
  --plum: #2b1426;
  --muted: #503c4b;
  --paper: #e7dfda;
  --scene-scale: 1;
  --scene-top: 0px;
  --scene-left: 0px;
  --photo-left: 0px;
  --scene-photo-width: 1686px;
  --scene-photo-height: 933px;
  font-family: Inter, Arial, sans-serif;
  color: var(--plum);
  background: #aa99a0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scrollbar-width: thin; scrollbar-color: #725b68 #b4a1a8; }
body { margin: 0; background: #ad9ba2; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--plum); outline-offset: 7px; }
::selection { background: #573242; color: #fff2e2; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 16px;
  left: 24px;
  padding: 14px 20px;
  background: var(--paper);
  z-index: 30;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.experience {
  opacity: 1;
  transition: opacity 650ms cubic-bezier(.22, 1, .36, 1);
  position: relative;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #ad9ba2;
}
.is-loading .experience { opacity: 0; visibility: hidden; }
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ad9ba2;
  color: var(--plum);
  font-family: Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s 300ms;
}
.loading-screen > span { font-size: 24px; letter-spacing: -1px; }
.loading-screen small { font-size: 12px; color: var(--muted); }
.is-loading .loading-screen { opacity: 1; visibility: visible; transition: none; }
.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #ad9ba2;
}
.scene-photo {
  position: absolute;
  left: var(--photo-left);
  top: var(--scene-top);
  width: calc(var(--scene-photo-width) * var(--scene-scale));
  height: calc(var(--scene-photo-height) * var(--scene-scale));
  max-width: none;
  display: block;
  pointer-events: none;
  user-select: none;
}
.scene-extension {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
@media (min-width: 901px), (min-width: 600px) and (orientation: landscape) {
  .scene.is-ready .scene-photo { display: none; }
  .scene-photo { clip-path: inset(0 calc(426px * var(--scene-scale)) 0 0); }
}

.site-header {
  position: absolute;
  inset: clamp(28px, 3.57vw, 54px) clamp(28px, 4.76vw, 76px) auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 3;
}
.wordmark { display: flex; flex-direction: column; gap: 2px; }
.wordmark > span {
  font-size: clamp(22px, 2.06vw, 31px);
  font-weight: 500;
  letter-spacing: -1.25px;
  line-height: 1.15;
}
.wordmark small {
  font-size: clamp(12px, 1.35vw, 18px);
  font-weight: 400;
  letter-spacing: -.35px;
  color: var(--muted);
  line-height: 1.5;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  font-size: clamp(14px, 1.3vw, 18px);
}
.contact-arrow { width: .8em; height: .8em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; position: relative; transition: transform .2s ease; }
.contact-arrow::before { content: ''; position: absolute; width: 1.05em; height: 1.5px; background: currentColor; right: -1px; top: -1px; transform: rotate(-45deg); transform-origin: right center; }
.contact-link:hover .contact-arrow { transform: translateX(4px); }

.composition {
  position: absolute;
  left: var(--scene-left);
  top: var(--scene-top);
  width: 1260px;
  height: 933px;
  transform: scale(var(--scene-scale));
  transform-origin: top left;
}
.introduction { position: absolute; left: var(--headline-left, 674px); top: 288px; width: 560px; }
.introduction h1 {
  margin: 0;
  font-size: 104px;
  line-height: .87;
  letter-spacing: -6.8px;
  font-weight: 650;
  white-space: nowrap;
}
.introduction p {
  margin: 38px 0 0 77px;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -.5px;
  color: var(--muted);
}

.terminal { position: absolute; inset: 0; pointer-events: none; }
.pilot-light {
  position: absolute;
  left: 618px;
  top: 566px;
  width: 10px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fffde9 0 22%, #ffe8a1 44%, #ffc45a 68%, transparent 100%);
  box-shadow: 0 0 4px 1px #ffc66970;
  transform: rotate(-22deg);
  pointer-events: none;
}

.display {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 214px;
  padding: 12px 26px 10px;
  overflow: hidden;
  color: #242520;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  pointer-events: auto;
  user-select: text;
  transform-origin: 0 0;
}
.display::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.12), transparent 36%, rgba(60,57,47,.05));
  mix-blend-mode: soft-light;
}
.display:not([style]), .key-label:not([style]) { visibility: hidden; }
.display-topline {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
}
.display-topline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.6px;
  background: #63645b;
  opacity: .68;
  clip-path: polygon(0 30%, 8% 25%, 17% 34%, 26% 26%, 37% 31%, 48% 23%, 57% 30%, 68% 25%, 78% 33%, 89% 26%, 100% 31%, 100% 80%, 91% 75%, 80% 83%, 69% 76%, 58% 82%, 49% 75%, 38% 83%, 27% 77%, 18% 84%, 9% 77%, 0 82%);
  filter: drop-shadow(0 .2px .25px #63645b);
}
.display-stage { position: absolute; inset: 54px 26px 12px; z-index: 1; }
.screen { width: 100%; height: 100%; }
.screen[hidden] { display: none; }
.screen-copy { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.65px; }
.screen[data-screen="approach"] .screen-copy { font-size: 25px; }
.screen-copy::after {
  content: '';
  display: inline-block;
  width: .52em;
  height: .82em;
  margin-left: .15em;
  vertical-align: -.08em;
  background: currentColor;
  animation: cursor-blink 1.8s steps(1, end) infinite;
}
@keyframes cursor-blink { 0%, 55% { opacity: .85; } 56%, 100% { opacity: 0; } }
.contact-actions { display: flex; gap: 20px; font-size: 18px; }
.contact-actions a { display: inline-flex; align-items: center; gap: 5px; min-height: 50px; text-decoration: underline; text-underline-offset: 5px; }
.display.is-changing .screen:not([hidden]) { animation: screen-settle 180ms ease-out; }
@keyframes screen-settle { from { opacity: .3; } to { opacity: 1; } }
.key {
  position: absolute;
  display: block;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  isolation: isolate;
}
.keycap {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 94%;
  background: none;
  transition: none;
}
.keycap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./terminal-keycaps.webp');
  background-size: 1686px 933px;
  background-repeat: no-repeat;
  background-position: inherit;
  filter: brightness(calc(1 - var(--travel, 0) * .055));
}
.key:not(.is-down):hover .keycap::before { filter: brightness(calc(1.025 - var(--travel, 0) * .055)); }
.key:focus-visible { outline: 0; }
.key:focus-visible .key-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.key-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 106px;
  height: 78px;
  display: grid;
  place-items: center;
  transform-origin: 0 0;
  color: #eee4df;
  font-family: Inter, Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.6px;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.key-about { left: 200px; top: 590px; width: 143px; height: 130px; }
.key-about .keycap { background-position: -200px -590px; clip-path: polygon(13% 13%, 75% 3%, 85% 6%, 90% 17%, 99% 79%, 94% 88%, 22% 98%, 12% 87%, 1% 30%, 4% 22%); }
.key-approach { left: 333px; top: 574px; width: 146px; height: 129px; }
.key-approach .keycap { background-position: -333px -574px; clip-path: polygon(12% 14%, 77% 4%, 86% 9%, 96% 65%, 100% 80%, 94% 91%, 21% 98%, 13% 90%, 1% 29%, 3% 22%); }
.key-contact { left: 473px; top: 560px; width: 146px; height: 125px; }
.key-contact .keycap { background-position: -473px -560px; clip-path: polygon(11% 16%, 76% 4%, 85% 8%, 94% 40%, 99% 78%, 94% 91%, 23% 98%, 13% 93%, 1% 32%, 3% 23%); }
.keycap { transform: translate(calc(var(--travel, 0) * 1.6px), calc(var(--travel, 0) * .8px)) scale(calc(1 - var(--travel, 0) * .014), calc(1 - var(--travel, 0) * .078)); }

@media (max-width: 900px) and (orientation: portrait), (max-width: 599px) {
.experience { height: 100dvh; min-height: 0; }
.scene-photo { left: var(--scene-left); }
.composition { left: var(--scene-left); top: var(--scene-top); width: 416px; height: 932px; }
.site-header { top: calc(var(--scene-top) + 28px * var(--scene-scale)); left: calc(var(--scene-left) + 30px * var(--scene-scale)); right: auto; width: 356px; transform: scale(var(--scene-scale)); transform-origin: top left; }
.wordmark > span { font-size: 20px; letter-spacing: -.9px; }
.wordmark small { font-size: 12px; line-height: 1.3; }
.contact-link { gap: 5px; padding-top: 6px; font-size: 14px; }
.introduction { left: 29px; top: 113px; width: 366px; }
.introduction h1 { font-size: 58px; line-height: .91; letter-spacing: -3.3px; }
.introduction p { max-width: 330px; margin: 22px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.45px; }
.desktop-break { display: initial; }
.display { width: 273px; height: 170px; padding: 11px 21px; }
.display-topline { font-size: 11px; line-height: 17px; padding-bottom: 6px; }
.display-stage { inset: 45px 21px 10px; }
.screen-copy { font-size: 19px; line-height: 1.25; letter-spacing: -.4px; }
.screen[data-screen="approach"] .screen-copy { font-size: 18px; }
.key-about { left: 51px; top: 630px; width: 99px; height: 94px; }
.keycap::before { background-image: url('./terminal-keycaps-mobile.webp'); background-size: 350px 100px; }
.key-about .keycap { background-position: 0 0; clip-path: polygon(7% 5%, 87% 5%, 96% 12%, 97% 85%, 90% 95%, 7% 95%, 1% 86%, 1% 18%); }
.key-about .keycap::before { background-position: 0 0; }
.key-approach { left: 156px; top: 630px; width: 98px; height: 94px; }
.key-approach .keycap { background-position: -105px 0; clip-path: polygon(7% 5%, 87% 5%, 96% 12%, 97% 85%, 90% 95%, 7% 95%, 1% 86%, 1% 18%); }
.key-approach .keycap::before { background-position: -105px 0; }
.key-contact { left: 261px; top: 630px; width: 98px; height: 94px; }
.key-contact .keycap { background-position: -210px 0; clip-path: polygon(7% 5%, 87% 5%, 96% 12%, 97% 85%, 90% 95%, 7% 95%, 1% 86%, 1% 18%); }
.key-contact .keycap::before { background-position: -210px 0; }
.key-label { width: 80px; height: 61px; font-size: 14px; letter-spacing: -.25px; }
  .scene-photo { width: calc(var(--scene-photo-width) * var(--scene-scale)); height: calc(var(--scene-photo-height) * var(--scene-scale)); }
  .scene-extension { display: block; }
  .pilot-light { left: 371px; top: 638px; width: 10px; height: 11px; transform: none; }
  .contact-actions { gap: 16px; font-size: 16px; }
  .contact-actions a { min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .keycap, .key.is-down .keycap, .key:active .keycap { transform: none !important; }
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 599px) {
  .scene.is-ready .scene-photo { display: none; }
}

@media (forced-colors: active) {
  .scene, .scene-photo, .keycap { display: none; }
  .display { border: 1px solid CanvasText; background: Canvas; }
  .key { border: 2px solid ButtonText; background: ButtonFace; border-radius: 8px; }
  .key .sr-only { position: static; clip: auto; width: auto; height: auto; margin: 0; font-size: 18px; }
  .display-topline::after { background: CanvasText; }
}