:root {
  --base: #1e1e2e; --text: #cdd6f4; --sub: #a6adc8;
  --blue: #89b4fa; --peach: #fab387; --green: #a6e3a1; --red: #f38ba8;
  --yellow: #f9e2af; --mauve: #cba6f7; --surface: #313244; --rosewater: #f5e0dc;
  color-scheme: dark;
}
@font-face { font-family: nf; src: url(/nf.woff2) format("woff2"); unicode-range: U+E000-F8FF, U+F0000-FFFFD; font-display: block; }
@font-face { font-family: braille; src: url(/braille.woff2) format("woff2"); unicode-range: U+2800-28FF; font-display: block; }
html { background: var(--base); color: var(--text); font-size: clamp(100%, 0.75rem + 0.4vw, 125%); }
body {
  margin: 0; padding: 2rem 1rem 4rem; max-width: 80ch; margin-inline: auto;
  font: 1rem/1.5 ui-monospace, monospace, nf, braille;
}
pre { font: inherit; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: var(--blue); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; }
.nav a { text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
input:focus { outline: none; }
::selection { background: var(--surface); }
.p { color: var(--peach); }
.d { color: var(--blue); }
.c { color: var(--text); }
.err { color: var(--red); }
.k { color: var(--mauve); }
.g { color: var(--green); }
.y { color: var(--yellow); }
.dim { color: var(--sub); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
form { display: flex; }
input {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit;
  padding: 0; margin: 0; caret-color: var(--rosewater);
}
#line { flex: 1; min-width: 0; display: flex; position: relative; overflow: hidden; }
#cur {
  position: absolute; top: 0; left: 0; width: 1ch; height: 1lh; pointer-events: none;
  outline: 1px solid var(--rosewater); outline-offset: -1px;
}
#cur + input { caret-color: transparent; }
form:focus-within #cur { width: 2px; outline: none; background: var(--rosewater); animation: blink 1s steps(1) 15; }
@keyframes blink { 50% { background: none; } }
@media (prefers-reduced-motion: reduce) { form:focus-within #cur { animation: none; } }
output { display: block; }
.logo, .fetch { display: inline-block; vertical-align: top; }
.logo { margin-right: 3ch; line-height: 1.25; white-space: pre; }
@media (max-width: 30rem) { .logo { display: none; } }
#banner { font: inherit; white-space: pre; line-height: 1.2; margin: .5lh 0 1lh; font-variant-ligatures: none; }
#hint { margin: 1lh 0 0; }

.resume { max-width: 72ch; font-family: system-ui, sans-serif; }
.resume h1, .resume h2, .resume h3, .resume .meta, .resume dt { font-family: ui-monospace, monospace; }
.resume h1 { font-size: 1.5rem; margin: 0; }
.resume h2 { color: var(--yellow); font-size: 1rem; text-transform: uppercase; margin: 2rem 0 .5rem; }
.resume h3 { font-size: 1rem; margin: 0; }
.resume .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; align-items: baseline; margin-top: 1rem; }
.resume .row .meta { margin-left: auto; }
.resume .meta { color: var(--sub); margin: 0 0 .25rem; }
.resume ul { margin: .25rem 0 0; padding-left: 1.25rem; list-style: "\2013  "; }
.resume li::marker { color: var(--sub); }
.resume dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.resume dd { margin: 0; }
.resume .line { margin: 0; }
.resume .item { margin: 0 0 .5rem; }
.resume .item b { font-family: ui-monospace, monospace; font-weight: normal; }
.resume .nav { margin-top: 3rem; }
@media (max-width: 40rem) {
  .resume dl { grid-template-columns: 1fr; gap: 0; }
  .resume dd { margin: 0 0 .5rem 1.25rem; }
}

@media print {
  :root { color-scheme: light; }
  html, body { background: #fff; color: #000; }
  body.resume { max-width: none; padding: 0; font-size: 9.5pt; line-height: 1.25; }
  .resume h2 { color: #000; break-after: avoid; margin: .8rem 0 .25rem; }
  .resume .row { margin-top: .5rem; }
  .resume ul { margin: .1rem 0 0; }
  .resume .item { margin-bottom: .3rem; }
  .resume .meta, .resume li::marker { color: #333; }
  .resume article, .resume dt, .resume dd { break-inside: avoid; }
  a { color: #0645ad; }
  .nav { display: none; }
  @page { size: Letter; margin: 0.45in 0.6in; }
}