@font-face {
  font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0; min-height: 100vh; background: var(--surface-100); color: var(--ink);
  font: 14px/24px "JetBrains Mono", ui-monospace, monospace;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
main { display: block; max-width: 960px; margin: 0 auto; padding: 24px 32px 48px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dim { color: var(--ink-muted); }
.k { color: var(--amber-text); font-weight: 600; }
.small { font-size: 12px; line-height: 16px; }
.light { font-weight: 400; }
a.l { color: var(--teal-text); text-underline-offset: 4px; }
a.l:hover { color: var(--ink); }

header {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 2px solid var(--border-strong);
}
nav { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.navlink { color: var(--teal-text); text-decoration: none; }
.navlink:hover { text-decoration: underline; text-underline-offset: 4px; }

button {
  font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px; border-radius: 12px;
  background: transparent; color: var(--ink); border: 2px solid var(--border-strong); cursor: pointer;
}

.ps { font-size: 14px; line-height: 24px; font-weight: 600; color: var(--ink); margin: 48px 0 12px; }
.ps.first { margin-top: 32px; }
.ps .u { color: var(--amber-text); }
.ps .p { color: var(--teal-text); }

.neofetch { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-start; }
.neofetch img {
  width: 176px; height: 176px; border-radius: 12px; display: block; border: 2px solid var(--border-strong);
}
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; }
.neofetch .facts { flex: 1 1 360px; min-width: 0; }

h1 { font-size: 48px; line-height: 52px; font-weight: 700; margin: 0; max-width: 760px; }
.eyebrow { display: block; font-size: 14px; line-height: 24px; font-weight: 600; }

.prose { max-width: 760px; }
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.lead { margin: 0 0 16px; }
.more { margin-top: 8px; }

.proj {
  display: block; text-decoration: none; color: inherit; padding: 12px 16px; margin: 0 -16px;
  border-radius: 12px; border: 2px solid transparent;
}
.proj:hover { background: var(--surface-200); border-color: var(--border-strong); }
.pname { color: var(--teal-text); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

form { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.row.between { justify-content: space-between; }
.field { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; }
.fld {
  font: inherit; line-height: 20px; min-height: 44px; padding: 10px 14px; width: 100%;
  border-radius: 12px; border: 2px solid var(--border-strong); background: var(--surface-200); color: var(--ink);
}
.fld::placeholder { color: var(--ink-muted); opacity: 1; }
textarea.fld { line-height: 22px; resize: vertical; }
.send {
  padding: 12px 24px; background: var(--amber); color: var(--on-amber);
  border: 2px solid var(--night); box-shadow: var(--shadow-sticker);
}
.status { color: var(--teal-text); min-height: 24px; }

footer {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  margin-top: 32px; padding-top: 16px; border-top: 2px solid var(--border-strong);
}
footer img { height: 96px; width: auto; display: block; transform: rotate(-6deg); }

.simple { max-width: 960px; margin: 0 auto; padding: 48px 32px; }

#boot {
  position: fixed; inset: 0; z-index: 50; background: var(--surface-100); color: var(--ink);
  display: flex; flex-direction: column; padding: 32px; overflow: hidden;
}
#boot .log { flex: 1 1 auto; width: 100%; max-width: 960px; margin: 0 auto; white-space: pre-wrap; overflow: hidden; }
#boot .bar { width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
#boot .meter { color: var(--amber-text); font-weight: 600; white-space: pre; }
#boot .tag { color: var(--teal-text); font-weight: 600; }
#boot .tag.warn { color: var(--amber-text); }

@media (max-width: 560px) {
  main { padding: 24px 16px 48px; }
  h1 { font-size: 36px; line-height: 40px; }
}