:root{
  --bg:#0c0d10; --bg2:#121419; --ink:#e6e3da; --ink-dim:#9a978d;
  --green:#6ee787; --blue:#79c0ff; --amber:#ffb86b; --red:#ff7b72;
  --line:#23262d; --card:#15171d; --accent:#ffb86b;
  --lang:#79c0ff; --editor:#6ee787; --vcs:#ff7b72; --web:#d2a8ff;
  --infra:#ffa657; --ai:#ff6ec7; --build:#e3b341; --database:#56d4dd;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Fraunces',Georgia,serif; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px);
  mix-blend-mode:multiply;opacity:.5}
.prompt-line{font-family:'IBM Plex Mono',monospace;font-size:.92rem;color:var(--ink-dim)}
.prompt-line .green{color:var(--green)} .prompt-line .blue{color:var(--blue)}
.cursor{animation:blink 1.1s steps(1) infinite;color:var(--amber)}
@keyframes blink{50%{opacity:0}}

/* HERO */
.hero{max-width:860px;margin:0 auto;padding:12vh 24px 9vh;text-align:left}
.hero .typed{color:var(--ink)}
.hero h1{font-size:clamp(3rem,10vw,7rem);font-weight:900;letter-spacing:-.04em;line-height:.95;margin:.3em 0 .1em}
.hero h1 .dot{color:var(--amber)}
.tagline{font-size:clamp(1.1rem,2.6vw,1.5rem);color:var(--ink-dim);max-width:38ch;font-weight:400}
.hero-meta{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;color:var(--ink-dim);margin-top:2.4em;text-transform:uppercase}
.hero-meta .sep{margin:0 .8em;color:var(--line)}
.scroll-hint{display:inline-block;margin-top:3em;font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--amber);text-decoration:none;border-bottom:1px dashed var(--amber);padding-bottom:2px}
.scroll-hint:hover{color:var(--ink)}

/* ESSAY */
.essay{max-width:680px;margin:0 auto;padding:6vh 24px 10vh;border-top:1px solid var(--line)}
.essay h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;letter-spacing:-.02em;margin:1.8em 0 .5em;line-height:1.1}
.essay h2:first-child{margin-top:0}
.essay p{font-size:1.14rem;margin:1em 0;color:#d8d4c8}
.essay em{color:var(--amber);font-style:italic}
.essay strong{color:var(--green);font-weight:600}
.signoff{font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--ink-dim);margin-top:2.5em;font-style:normal}

/* TIMELINE */
.timeline-section{max-width:860px;margin:0 auto;padding:4vh 24px 12vh;border-top:1px solid var(--line)}
.timeline-head h2{font-family:'Fraunces';font-size:clamp(1.8rem,5vw,2.6rem);font-weight:900;letter-spacing:-.02em;margin-bottom:.8em}
.timeline-head h2 .subtle{font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:400;color:var(--ink-dim);letter-spacing:0;display:block;margin-top:.4em}
#search{width:100%;padding:16px 18px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:1rem;outline:none;transition:border-color .2s}
#search:focus{border-color:var(--amber)}
#search::placeholder{color:#5c5a52}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.chip{font-family:'IBM Plex Mono',monospace;font-size:.74rem;padding:6px 12px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;
  text-transform:uppercase;letter-spacing:.08em;transition:all .15s;user-select:none}
.chip:hover{color:var(--ink);border-color:var(--ink-dim)}
.chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.chip[data-cat="language"].active{background:var(--lang);border-color:var(--lang)}
.chip[data-cat="editor"].active{background:var(--editor);border-color:var(--editor)}
.chip[data-cat="vcs"].active{background:var(--vcs);border-color:var(--vcs)}
.chip[data-cat="web"].active{background:var(--web);border-color:var(--web)}
.chip[data-cat="infra"].active{background:var(--infra);border-color:var(--infra)}
.chip[data-cat="ai"].active{background:var(--ai);border-color:var(--ai)}
.chip[data-cat="build"].active{background:var(--build);border-color:var(--build)}
.chip[data-cat="database"].active{background:var(--database);border-color:var(--database)}
.result-meta{font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--ink-dim);margin-top:14px;min-height:1.2em}

.timeline{margin-top:28px;position:relative}
.timeline::before{content:"";position:absolute;left:84px;top:0;bottom:0;width:2px;background:linear-gradient(var(--line),var(--line) 70%,transparent)}
@media(max-width:620px){.timeline::before{left:52px}}
.entry{display:grid;grid-template-columns:72px 1fr;gap:28px;padding:14px 0;position:relative;align-items:start}
@media(max-width:620px){.entry{grid-template-columns:44px 1fr;gap:18px}}
.entry .yr{font-family:'IBM Plex Mono',monospace;font-size:.95rem;font-weight:600;color:var(--ink-dim);text-align:right;padding-top:14px}
.entry .body{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;transition:transform .15s,border-color .15s}
.entry .body::before{content:"";position:absolute;left:-22px;top:22px;width:11px;height:11px;border-radius:50%;background:var(--catcolor,var(--ink-dim));box-shadow:0 0 0 4px var(--bg)}
@media(max-width:620px){.entry .body::before{left:-26px}}
.entry .body:hover{transform:translateX(4px);border-color:var(--catcolor,var(--ink-dim))}
.entry .name{font-family:'Fraunces';font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.entry .cat-tag{font-family:'IBM Plex Mono',monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:5px;background:var(--catcolor,var(--ink-dim));color:#0c0d10;font-weight:600}
.entry .note{font-size:1.02rem;color:#cfccc0;margin-top:6px}
.entry .epitaph{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-dim);margin-top:10px;font-style:italic}
.entry .epitaph::before{content:"⚰ ";font-style:normal}
mark{background:var(--amber);color:#0c0d10;border-radius:2px;padding:0 2px}
.empty{text-align:center;font-family:'IBM Plex Mono',monospace;color:var(--ink-dim);padding:40px;font-size:.95rem}
#clearBtn{background:none;border:1px solid var(--amber);color:var(--amber);font-family:inherit;padding:6px 14px;border-radius:6px;cursor:pointer;margin-left:8px}

footer{max-width:860px;margin:0 auto;padding:6vh 24px 8vh;border-top:1px solid var(--line);text-align:left}
footer p{color:var(--ink-dim);font-family:'IBM Plex Mono',monospace;font-size:.82rem;margin-top:14px}
footer .tiny{font-size:.72rem;color:#5c5a52;margin-top:6px}
.small{font-size:.82rem}
::selection{background:var(--amber);color:#0c0d10}