:root {
  color-scheme: light;
  --bg: #f2f1ed;
  --fg: #22262b;
  --dim: #767c84;
  --line: #d6d4cd;
  --panel: #e9e7e1;
  /* one accent for the whole site — swap this line to retheme.
     alternatives: oklch(0.52 0.13 250) blue · oklch(0.55 0.13 88) amber */
  --accent: oklch(0.52 0.11 172);
}

/* Dark palette, declared twice on purpose. The media block is the default and
   follows the OS, but yields when `theme light` has pinned light. The attribute
   block wins outright when `theme dark` has pinned dark on a light OS. The two
   blocks must stay identical — change one value, change it in both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14181c;
    --fg: #d9dee4;
    --dim: #77808a;
    --line: #252c33;
    --panel: #1a1f24;
    --accent: oklch(0.78 0.12 172);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14181c;
  --fg: #d9dee4;
  --dim: #77808a;
  --line: #252c33;
  --panel: #1a1f24;
  --accent: oklch(0.78 0.12 172);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg); background: var(--accent); }
input { font: inherit; color: inherit; }
pre { margin: 0; }
p { margin: 0; text-wrap: pretty; }

.page { min-height: 100vh; padding: 40px 24px 64px; }
.col { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }

.topbar {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.path { color: var(--dim); font-size: 13px; letter-spacing: 0.08em; }
.topbar nav { display: flex; gap: 18px; font-size: 13px; }

.wordmark { color: var(--accent); font-size: 15px; line-height: 1.25; letter-spacing: 0.02em; overflow-x: auto; }
.hero { display: flex; flex-direction: column; gap: 20px; }
.tagline { font-size: 19px; min-height: 1.75em; }
.page-title { font-size: 26px; min-height: 1.4em; }
.lede { font-size: 19px; line-height: 1.6; }
.dim { color: var(--dim); }
.measure { max-width: 62ch; }

.cursor {
  display: inline-block; width: 0.6em; height: 1em;
  background: var(--accent); vertical-align: -0.14em;
  animation: blink 1.1s step-end infinite;
}
.page-title .cursor { width: 0.58em; height: 0.95em; vertical-align: -0.1em; }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.label { color: var(--dim); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.block { display: flex; flex-direction: column; gap: 12px; }

.featured {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.featured a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; background: var(--bg); color: var(--fg);
}
.featured a:hover { background: var(--panel); color: var(--fg); }
.featured .name { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.featured .name span { color: var(--accent); font-weight: 400; }
.featured .blurb { color: var(--dim); font-size: 13px; line-height: 1.55; }

.projects {
  display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.project {
  background: var(--bg); padding: 22px 4px;
  display: grid; grid-template-columns: 2.6em 1fr; gap: 0 14px; align-items: baseline;
}
.project:hover { background: var(--panel); }
.project .num { color: var(--dim); font-size: 13px; }
.project .body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.project .head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.project .title { font-size: 18px; font-weight: 600; }
.project .links { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }

.info { border: 1px solid var(--line); background: var(--panel); }
.info h2 { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); font: inherit; }
.info dl { margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.info .row { display: grid; grid-template-columns: minmax(9em, 11em) 1fr; gap: 14px; padding: 5px 0; }

.shell { display: flex; flex-direction: column; gap: 8px; }
.shell-out { display: flex; flex-direction: column; gap: 8px; }
.shell-out pre { white-space: pre-wrap; font-size: 14px; line-height: 1.7; }
.prompt { display: flex; align-items: center; gap: 10px; }
.prompt .sigil { color: var(--accent); }
.prompt input {
  flex: 1; min-width: 0; background: transparent; border: none;
  outline: none; padding: 4px 0; caret-color: var(--accent);
}

footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 14px;
  color: var(--dim); font-size: 13px;
}

#boot {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  padding: 40px 24px; font-size: 14px; line-height: 1.8;
  transition: opacity 420ms ease;
}
#boot > div { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; }
#boot[hidden] { display: none; }