:root {
  color-scheme: dark light;
  --bg: light-dark(#fff, #0a0a0a);
  --text: light-dark(#111, #ddd);
  --bright: light-dark(#000, #fff);
  --dim: light-dark(#666, #808080);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html, body { margin: 0; background: var(--bg); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: 1rem/1.5 monospace;
  color: var(--text);
  min-height: 100svh;
}
a { color: var(--text); }
header { display: flex; justify-content: flex-end; }
#theme {
  padding: 0.5rem;
  margin: -0.25rem;
  background: none;
  border: 0;
  font: inherit;
  color: var(--dim);
  cursor: pointer;
}
main {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: clamp(0.75rem, 2.5vw, 1.25rem) 0 clamp(2rem, 8vw, 3.5rem);
}
main > * {
  width: min(100% - 2rem, 80ch);
}
#frame {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  aspect-ratio: 7 / 4;
}
#field, #bright {
  position: absolute;
  top: 0; left: 0;
  margin: 0;
  font: 10px/1 monospace;
  user-select: none;
  pointer-events: none;
}
#field { color: var(--dim); }
#bright { color: var(--bright); }
#meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 1rem;
}
#meta .links { margin: 0; }
#who h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.cursor {
  margin-left: 0.25ch;
  user-select: none;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}
h2 {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dim);
}
#work, #posts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  color: var(--dim);
}
#posts li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2ch;
}
#posts time { white-space: nowrap; }
#work li {
  display: grid;
  grid-template-columns: max-content 1fr;
}
#work .desc {
  min-width: 0;
  padding-left: 2ch;
  text-align: right;
}
main > article {
  width: min(100% - 2rem, 70ch);
  line-height: 1.6;
  overflow-wrap: break-word;
}
article h1 {
  margin: 0.25rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
}
article .date {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dim);
}
article .crumb { margin: 0; font-size: 0.85rem; }
article code { color: var(--bright); }
em { color: var(--bright); font-weight: 600; font-style: normal; }
article pre {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--dim);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.4;
}
article pre code { color: inherit; }
pre .k { font-weight: 600; }
pre .p { color: var(--dim); }
@media (max-width: 599px) {
  html { font-size: 15px; }
  article pre { margin-inline: -1rem; }
  #frame { aspect-ratio: 10 / 9; }
  #posts li { grid-template-columns: 1fr; gap: 0; }
  #work li { grid-template-columns: 1fr; }
  #work .desc {
    padding-left: 0;
    text-align: left;
  }
}