:root {
  --bg: #0a0e14;
  --panel: #0e131b;
  --fg: #c9d1d9;
  --muted: #6b7685;
  --cyan: #22d3ee;
  --green: #4ade80;
  --line: #1b2430;
  --glow: 0 0 8px rgba(34, 211, 238, .45);
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
/* amber theme (toggle via terminal: `theme amber` / `theme green`) */
:root[data-theme="amber"] {
  --cyan: #f59e0b;
  --green: #fbbf24;
  --glow: 0 0 8px rgba(245, 158, 11, .45);
}
* { box-sizing: border-box; }

/* BIOS / POST boot splash (first load per session) */
#boot {
  position: fixed; inset: 0; z-index: 9999; background: #05070b;
  color: var(--green); padding: 2rem 1.25rem;
  font: 13px/1.55 ui-monospace, "JetBrains Mono", monospace;
  transition: opacity .6s ease;
}
#boot pre { margin: 0; white-space: pre-wrap; text-shadow: 0 0 6px rgba(74, 222, 128, .4); }
#boot.boot-typed pre::after, #boot.boot-idle pre::after { content: "_"; color: var(--green); animation: boot-blink 1s step-end infinite; }
@keyframes boot-blink { 50% { opacity: 0; } }

/* CRT mode (toggle in the terminal: `crt`) */
:root[data-crt="on"] body::before {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px),
    radial-gradient(130% 130% at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%);
  animation: crt-flicker .12s steps(2, end) infinite;
}
@keyframes crt-flicker { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
:root[data-crt="on"] body { text-shadow: 0 0 1px rgba(74, 222, 128, .25); }
@media (prefers-reduced-motion: reduce) { :root[data-crt="on"] body::before { animation: none; } }
#boot.boot-done { opacity: 0; pointer-events: none; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(34,211,238,.06), transparent 60%),
    var(--bg);
  color: var(--fg);
  line-height: 1.7;
  max-width: 44rem;
  margin-inline: auto;
  padding: 3rem 1.25rem 4rem;
}
/* faint scanlines for the CRT vibe */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
}
/* matrix-rain canvas layer (drawn by the script in index.html) */
#matrix {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; opacity: .16;
}
header .logo {
  font-size: 2.4rem; font-weight: 700; letter-spacing: .04em;
  color: var(--cyan); text-shadow: var(--glow);
}
.cursor { animation: blink 1.05s steps(1) infinite; color: var(--green); }
@keyframes blink { 50% { opacity: 0; } }
.boot { color: var(--green); margin-top: .25rem; font-size: .9rem; opacity: .85; }

main { margin-top: 2.5rem; }

/* ♫ now playing — command line */
.np { margin-bottom: 1.9rem; font-size: .9rem; }
.np-cmd { color: var(--green); }
.np-out { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.np-note { color: var(--cyan); }
.np-track { color: var(--fg); font-weight: 700; }
.np-artist { color: var(--muted); }
.np-out a { color: var(--green); font-size: .82rem; }
.np-out a:hover { color: var(--cyan); text-shadow: var(--glow); }

/* $ neofetch */
.nf-cmd { color: var(--green); margin-bottom: .4rem; }
.neofetch {
  display: flex; gap: 1.2rem; align-items: center; max-width: 34rem; margin-bottom: 1.9rem;
  border: 1px solid var(--line); border-radius: 10px; padding: 1rem; background: var(--panel);
}
.nf-art { margin: 0; color: var(--cyan); font-size: .8rem; line-height: 1.15; text-shadow: var(--glow); }
.nf-info { font-size: .86rem; min-width: 0; }
.nf-line .k { color: var(--cyan); display: inline-block; width: 4.5rem; }
.nf-ok { color: var(--green); }
@media (max-width: 30rem) { .neofetch { flex-direction: column; align-items: flex-start; } }

/* $ curl wttr.in — live weather */
.wx { max-width: 34rem; margin-bottom: 1.9rem; }
.wx-cmd { color: var(--green); margin-bottom: .4rem; }
.wx-out {
  border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem;
  background: var(--panel); color: var(--fg);
}
.wx-loading { color: var(--muted); font-size: .85rem; }

/* 🧠 brain-status widget (live, from status.json) */
.brain { max-width: 34rem; margin-bottom: 1.9rem; }
.brain-cmd { color: var(--green); margin-bottom: .5rem; }
.brain-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .86rem;
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem; background: var(--panel);
}
.brain .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.brain .dot.ok { background: var(--green); box-shadow: 0 0 7px var(--green); animation: brain-pulse 1.6s ease-in-out infinite; }
.brain .dot.bad { background: #ff5f56; box-shadow: 0 0 7px #ff5f56; }
@keyframes brain-pulse { 50% { opacity: .35; } }
.brain-up { color: var(--cyan); font-variant-numeric: tabular-nums; margin-left: auto; }
.brain-pid { color: var(--muted); font-size: .76rem; }
.brain-loading { color: var(--muted); font-size: .85rem; }

/* 🍩🌍 spinning ASCII art (donut + globe) */
.ascii-art { margin-bottom: 1.9rem; }
.ascii-cmd { color: var(--green); margin-bottom: .4rem; }
.ascii-face {
  margin: 0; color: var(--cyan); text-shadow: var(--glow);
  font-size: clamp(.42rem, 1.7vw, .72rem); line-height: 1.2; letter-spacing: 0;
  white-space: pre; overflow-x: auto;
}
.orrery-face { color: var(--green); }

/* 🦀 built-in-Rust badge (Ferris) */
.rustbadge { max-width: 34rem; margin-bottom: 1.9rem; }
.rb-cmd { color: var(--green); margin-bottom: .4rem; }
.rb-ferris {
  margin: 0 0 .55rem; color: #ff7a45; text-shadow: 0 0 9px rgba(255, 122, 69, .45);
  font-size: .8rem; line-height: 1.12; white-space: pre; overflow-x: auto;
}
.rb-line { color: var(--fg); font-size: .9rem; }
.rb-sub { color: var(--muted); font-size: .76rem; margin-top: .2rem; }

/* ASCII clock */
.clock { margin-bottom: 1.9rem; }
.clock-cmd { color: var(--green); margin-bottom: .5rem; }
.clock-face {
  margin: 0; color: var(--cyan); text-shadow: var(--glow);
  font-size: clamp(.5rem, 2.4vw, .85rem); line-height: 1.05; letter-spacing: 0;
  overflow-x: auto;
}
.clock-date { color: var(--muted); font-size: .8rem; margin-top: .4rem; }

/* $ fortune */
.fortune { margin-bottom: 1.9rem; }
.fortune blockquote {
  margin: .35rem 0 0; padding-left: .8rem; border-left: 2px solid var(--cyan);
  color: var(--muted); font-style: italic;
}
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; }
.eq i { width: 3px; height: 3px; background: var(--cyan); border-radius: 1px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(1) { animation-delay: 0s; }
.eq i:nth-child(2) { animation-delay: .25s; }
.eq i:nth-child(3) { animation-delay: .45s; }
.eq i:nth-child(4) { animation-delay: .12s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 15px; } }

/* $ whoami card */
.about { margin-bottom: 2rem; }
.about .cmd { color: var(--green); margin-bottom: .55rem; }
.about .card {
  display: flex; gap: 1.1rem; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 1rem; background: var(--panel);
}
.about .avatar-wrap {
  position: relative; flex: none; line-height: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--cyan);
}
.about .avatar {
  width: 96px; height: 96px; display: block; object-fit: cover;
  /* redacted / matrix duotone by default */
  filter: grayscale(1) contrast(1.05) brightness(.92) sepia(.5) hue-rotate(75deg) saturate(3);
  transition: filter .3s ease, transform .3s ease;
}
/* CRT scanline overlay */
.about .avatar-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .6; transition: opacity .3s ease;
}
.about .avatar-wrap:hover { box-shadow: var(--glow); }
.about .avatar-wrap:hover .avatar { filter: none; transform: scale(1.04); }
.about .avatar-wrap:hover::after { opacity: .15; }
.about .bio { font-size: .92rem; }
.about .bio .line { white-space: pre-wrap; }
.about .bio .key { color: var(--cyan); }
@media (max-width: 30rem) { .about .card { flex-direction: column; text-align: center; } }
ul.log { list-style: none; padding: 0; margin: 0; }
ul.log li {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: .75rem;
  padding: .7rem .75rem; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: .6rem; cursor: pointer; background: var(--panel);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
ul.log li:hover { border-color: var(--cyan); transform: translateX(3px); box-shadow: var(--glow); }
.prompt { color: var(--green); }
.title { color: var(--fg); }
.tag { color: var(--cyan); font-size: .8rem; }
time { color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* post opens with a glitchy reveal */
article { animation: glitch-in .45s ease both; }
@keyframes glitch-in {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(-5px); filter: hue-rotate(90deg) saturate(2.2); }
  35%  { opacity: 1; clip-path: inset(0 0 25% 0); transform: translateX(4px); }
  60%  { clip-path: inset(0 0 0 0); transform: translateX(-2px); filter: none; }
  100% { transform: none; }
}
article h2 { color: var(--cyan); text-shadow: var(--glow); margin-bottom: .2rem; }
article .meta { color: var(--muted); margin-bottom: 1.2rem; }
.back { color: var(--green); cursor: pointer; text-decoration: none; font-size: .9rem; }
.back:hover { text-decoration: underline; }

a { color: var(--cyan); }

/* interactive terminal */
.term {
  border: 1px solid var(--cyan); border-radius: 10px; background: #060a10;
  padding: .7rem .9rem; margin: 2.2rem 0; box-shadow: var(--glow); font-size: .88rem;
}
.t-bar { display: flex; align-items: center; gap: 6px; margin-bottom: .6rem; }
.t-bar .d { width: 10px; height: 10px; border-radius: 50%; }
.t-bar .d.r { background: #ff5f56; }
.t-bar .d.y { background: #ffbd2e; }
.t-bar .d.g { background: #27c93f; }
.t-name { color: var(--muted); font-size: .74rem; margin-left: .35rem; }
.t-body { max-height: 260px; overflow-y: auto; }
.t-line { white-space: pre-wrap; word-break: break-word; }
.t-out { margin: .1rem 0 .55rem; white-space: pre-wrap; color: var(--fg); font: inherit; }
.t-prompt { color: var(--green); }
.t-inputline { display: flex; align-items: center; }
.t-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--fg); font: inherit; caret-color: var(--cyan);
}
.t-input::placeholder { color: var(--muted); opacity: .6; }
footer {
  margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .82rem;
}
footer .social { margin-bottom: .4rem; }
footer .social a { color: var(--green); }
footer .social a:hover { color: var(--cyan); text-shadow: var(--glow); }
/* ---------- nerdy animations ---------- */

/* ambient logo glitch — brief RGB split near the end of each cycle */
.logo { animation: logo-glitch 7s infinite; }
@keyframes logo-glitch {
  0%, 93%, 100% { text-shadow: var(--glow); transform: none; }
  94% { text-shadow: 2px 0 #f0f, -2px 0 #0ff; transform: translateX(1px); }
  96% { text-shadow: -2px 0 #0ff, 2px 0 #f0f; transform: translateX(-1px) skewX(-2deg); }
  98% { text-shadow: 1px 0 #f0f, -1px 0 #0ff; transform: translateX(1px); }
}

/* boot line types itself in (clip wipe — wrap-safe, no overflow) */
.boot { animation: type-reveal 1.5s steps(28, end) .2s both; }
@keyframes type-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* content boots in, staggered */
.about { animation: bootin .5s ease .15s both; }
ul.log li { animation: bootin .5s ease both; }
ul.log li:nth-child(1) { animation-delay: .30s; }
ul.log li:nth-child(2) { animation-delay: .42s; }
ul.log li:nth-child(3) { animation-delay: .54s; }
ul.log li:nth-child(4) { animation-delay: .66s; }
@keyframes bootin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cursor, .logo, .boot, .about, ul.log li, article { animation: none !important; clip-path: none !important; }
  #matrix { display: none !important; }
  .eq i { animation: none !important; height: 8px !important; }
  .am-fill { animation: none !important; width: 38% !important; }
}