style.css

:root{
  --bg:#0a0b0d;
  --panel:#13141a;
  --ink:#e8e9ed;
  --muted:#75767f;
  --accent:#2e5bff;
  --rule:#1a1c22;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:-30vh -25vw auto auto;
  width:80vw; height:70vh;
  background:radial-gradient(closest-side, rgba(46,91,255,.12), transparent 70%);
  filter:blur(20px); pointer-events:none; z-index:0;
}
::selection{background:var(--accent);color:#fff}

.wrap{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:48px 24px 120px}
.prompt{color:var(--muted)}
.prompt b{color:var(--accent);font-weight:500}

h1{font-size:14px;font-weight:500;margin:0 0 4px}
.ascii{
  color:var(--accent);white-space:pre;line-height:1.1;
  font-size:12px;margin:0 0 24px;letter-spacing:0;
  text-shadow:0 0 18px rgba(46,91,255,.35);
}
.meta{color:var(--muted);margin-bottom:24px}
.meta span{margin-right:18px}

.block{margin:32px 0}
.block h2{
  font-size:13px;font-weight:500;color:var(--accent);
  margin:0 0 12px;letter-spacing:0.04em;
  display:flex;align-items:baseline;gap:10px;
}
.block h2::before{content:"## ";color:var(--muted)}
.block h2 .count{color:var(--muted);font-weight:400;font-size:12px;letter-spacing:0}

.row{
  display:grid;grid-template-columns:90px 1fr 110px;gap:16px;
  padding:7px 0;border-bottom:1px dashed var(--rule);align-items:baseline;
}
.row:last-child{border-bottom:none}

/* "+ N more" collapse for sections > 10 items */
.more{display:block;margin:0;border-bottom:1px dashed var(--rule)}
.more[open]{border-bottom:none}
.more > .row{border-top:1px dashed var(--rule);border-bottom:none}
.more > .row:nth-of-type(2){border-top:none}
.more summary{
  list-style:none;cursor:pointer;
  padding:8px 0;
  color:var(--accent);font-size:12px;letter-spacing:0.04em;
  user-select:none;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"[ ";color:var(--muted)}
.more summary::after{content:" · click to expand ]";color:var(--muted)}
.more[open] summary::after{content:" · click to collapse ]";color:var(--muted)}
.more summary:hover{background:rgba(46,91,255,.10)}
.row .yr{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.row .what b{color:var(--ink);font-weight:500}
.row .what span{color:var(--muted);display:block;font-size:13px;margin-top:1px}
.row .where{color:var(--muted);text-align:right;font-size:12.5px}

a{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent)}
a:hover{background:rgba(46,91,255,.14)}

.lede{color:var(--ink);max-width:64ch;margin:0 0 16px}
.lede a{color:var(--accent)}

.cursor{
  display:inline-block;width:8px;height:14px;background:var(--accent);
  vertical-align:middle;margin-left:2px;
  animation:blink 1.1s steps(1) infinite;
  box-shadow:0 0 10px var(--accent);
}
@keyframes blink{50%{opacity:0}}

hr{border:none;border-top:1px solid var(--rule);margin:32px 0}

.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pill{
  font-size:12px;padding:3px 11px;
  border:1px solid var(--rule);border-radius:4px;color:var(--muted);
}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.lang{color:var(--ink);border-color:rgba(46,91,255,.25)}

footer{
  margin-top:48px;color:var(--muted);font-size:13px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}

.articles .row{grid-template-columns:1fr;padding:8px 0}
.articles .row b{color:var(--ink);font-weight:500;display:block;margin-bottom:2px}
.articles .row span{color:var(--muted);font-size:12.5px;line-height:1.55}

.edu{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:7px 0}
.edu .yr{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.edu b{color:var(--ink);font-weight:500}
.edu span{color:var(--muted);display:block;font-size:13px;margin-top:1px}

*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

@media (max-width:640px){
  .row{grid-template-columns:60px 1fr;gap:8px}
  .row .where{display:none}
  .ascii{font-size:9px}
  .edu{grid-template-columns:60px 1fr;gap:10px}
}