@font-face {
  font-family: "Meslo LG S";
  src: url("assets/meslo-lg-s-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ground: #341f0d;
  --blue: #6bc1ff;
  --orange: #ff5900;
  font-family: "Meslo LG S", Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
  font-synthesis: none;
  background: var(--ground);
  color: var(--blue);
}

* { box-sizing: border-box; }
body { display: flex; flex-direction: column; margin: 0; min-height: 100svh; overflow-x: hidden; touch-action: manipulation; }
button { font: inherit; }
::selection { color: var(--ground); background: var(--blue); }

.updates-wrap { position: absolute; top: 3svh; right: 2.25vw; z-index: 3; }
.updates {
  display: block;
  padding: .35em .4em;
  border: 3px solid var(--orange);
  border-radius: 0;
  background: transparent;
  color: var(--orange);
  font-size: clamp(14px, 1.35vw, 28px);
  line-height: 1.2;
  cursor: default;
}
.updates:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.updates-note {
  display: block;
  margin-top: 10px;
  color: var(--orange);
  text-align: right;
  font-size: 12px;
  visibility: hidden;
}
.updates-wrap:hover .updates-note, .updates-wrap:focus-within .updates-note { visibility: visible; }

.terminal {
  width: 48.5%;
  margin-left: 28.4%;
  padding-top: 15.7svh;
  padding-bottom: 3svh;
  font-size: clamp(16px, 1.56vw, 32px);
  font-weight: 400;
  line-height: 1.2;
}
h1 { display: flex; align-items: baseline; gap: .24em; margin: 0; font: inherit; font-size: 1.2em; }
.wordmark { display: block; width: 5.6em; height: auto; }
.tagline { display: grid; margin: 3.8svh 0 0; }
.tagline-copy, .typed { grid-area: 1 / 1; }
.tagline-highlight {
  background-color: var(--blue);
  color: var(--ground);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.typed { display: none; }
.principles { display: grid; gap: 4svh; margin: 3.6svh 0 0; padding: 0; list-style: none; }
.principles li { margin: 0; }
.paste-copy { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.is-pasted .paste-copy { animation: paste-in 650ms ease-out both; }
footer { margin-top: 4svh; font-size: max(12px, .6em); line-height: 1.5; }
footer p { margin: 0; }
footer p + p { margin-top: 1.4svh; }
.swiss { display: inline-block; margin-left: .12em; font-size: .7em; vertical-align: .05em; }
.interaction-hint {
  margin: auto 24px max(18px, env(safe-area-inset-bottom));
  padding-top: 8px;
  color: var(--orange);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms;
}
.interaction-hint.is-visible { opacity: 1; visibility: visible; }
.hint-bird { display: inline-block; width: 1.6em; height: auto; vertical-align: -.1em; }
.interaction-hint.is-visible .hint-bird { animation: hint-hop 650ms ease-in-out 180ms 1; }
@keyframes hint-hop {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-5px); }
}

.booting .wordmark { animation: boot-blink 650ms step-end 2; }
.booting .tagline-copy, .booting footer { visibility: hidden; }
.booting .principles li:not(.is-visible) { visibility: hidden; }
.booting .typed { display: inline; }
.booting.tagline-ready .tagline-copy { visibility: visible; }
.booting.tagline-ready .typed { display: none; }
.booting .is-visible { visibility: visible; }
.is-typing::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .15em;
  background: var(--blue);
  vertical-align: -.1em;
  animation: cursor-blink 650ms step-end infinite;
}
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; contain: layout paint style; z-index: 2; }
.bird { position: absolute; left: 0; top: 0; color: var(--orange); font-size: clamp(24px, 1.85vw, 38px); line-height: 1; white-space: nowrap; will-change: transform; }
.bird-icon { display: block; width: 1.5em; height: auto; }
@keyframes boot-blink { 0%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes paste-in {
  0%, 35% { color: var(--ground); background-color: var(--blue); }
  100% { color: var(--blue); background-color: transparent; }
}

@media (max-width: 700px) {
  .updates-wrap { top: 22px; right: 24px; }
  .updates { border-width: 2px; }
  .terminal { width: auto; margin: 0 24px; padding-top: max(100px, 14svh); padding-bottom: 24px; font-size: 16px; line-height: 1.3; }
  h1 { font-size: 24px; }
  .tagline { margin-top: 3svh; }
  .principles { margin-top: 3svh; gap: 2.8svh; }
  footer { margin-top: 3.5svh; line-height: 1.5; }
}
@media (max-height: 700px) and (max-width: 700px) {
  .terminal { padding-top: 84px; padding-bottom: 16px; }
  .tagline, .principles { margin-top: 14px; }
  .principles { gap: 10px; }
  footer { margin-top: 18px; }
  footer p + p { margin-top: 8px; }
}
@media (max-height: 650px) and (min-width: 701px) {
  .terminal { padding-top: 11svh; font-size: 16px; width: 60%; margin-left: 24%; }
  .principles { gap: 3svh; }
  .tagline, .principles, footer { margin-top: 3svh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; }
  .interaction-hint { transition: none; }
}