:root {
  color-scheme: dark;
  --ink: #c9f5d4;
  --green: #45ff84;
  --green-hot: #92ffb4;
  --green-dim: #1ca952;
  --muted: #6f8f78;
  --black: #020403;
  --panel: #050906;
  --line: #193121;
  --line-hot: #2b7042;
  --err: #ff6b5f;
  --glow: 0 0 6px rgba(69, 255, 132, .35);
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  --bar: 1.75rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  background: var(--black);
}

body {
  margin: 0;
  padding-bottom: var(--bar);
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 0%, rgba(53, 255, 119, .07), transparent 60%), var(--black);
  font: 15px/1.6 var(--mono);
  font-variant-ligatures: none;
  min-width: 320px;
}

/* CRT scanlines + vignette */
body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0, 0, 0, .5) 3px);
}

body::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }

::selection { color: var(--black); background: var(--green); text-shadow: none; }

a { color: var(--green); text-underline-offset: .2em; }
a:hover, a:focus-visible { color: var(--black); background: var(--green); text-decoration: none; }

p, h1, h2, h3, dl, dd, ul, ol { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: .4rem .8rem;
  color: var(--black);
  background: var(--green);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.dim { color: var(--muted); }
.ok { color: var(--green); text-shadow: var(--glow); }

/* ---------- terminal frame ---------- */

.term {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

main.term { padding-block: 2.5rem 1rem; }

.block + .block { margin-top: 4.5rem; }

.rule {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin-bottom: 1.5rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
}

.rule::after {
  flex: 1;
  content: "";
  border-top: 1px dashed var(--line-hot);
}

.cmd { margin-top: 1.75rem; color: var(--ink); overflow-wrap: anywhere; }
.rule + .cmd, .motd + .cmd { margin-top: 0; }
.ps1 { color: var(--green); font-weight: 700; text-shadow: var(--glow); }
.out { margin-top: .6rem; }

.cursor { color: var(--green); animation: blink 1.1s steps(1) infinite; }

/* ---------- whoami / neofetch ---------- */

.motd { margin-bottom: 1.75rem; color: var(--muted); font-size: .85rem; }

.typed {
  display: inline-block;
  width: 8ch;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  animation: type .7s steps(8) .3s both;
}

.neofetch {
  display: flex;
  align-items: flex-start;
  gap: 3ch;
  margin-top: 1.25rem;
  animation: reveal .01s 1.05s both;
}

.life {
  flex: none;
  margin: 0;
  padding-top: .1rem;
  color: var(--line-hot);
  font: inherit;
  font-size: 1.1em;
  line-height: 1.2;
}

.life b { color: var(--green); font-weight: 400; text-shadow: 0 0 10px rgba(69, 255, 132, .55); }

.fetch { min-width: 0; }

.fetch h1 { color: var(--green-hot); font-weight: 700; text-shadow: var(--glow); }
.fetch-rule { color: var(--muted); }

.fetch dl div { display: flex; gap: 1ch; }
.fetch dt { flex: none; width: 10ch; color: var(--green); font-weight: 700; }
.fetch dt::after { content: ":"; }
.fetch dd { min-width: 0; overflow-wrap: anywhere; }

.status-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .7ch;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2.4s ease-in-out infinite;
}

.swatches { display: flex; margin-top: .9rem; }
.swatches span { width: 3ch; height: 1.1rem; }
.swatches span:nth-child(1) { background: #020403; outline: 1px solid var(--line); }
.swatches span:nth-child(2) { background: #0b1a10; }
.swatches span:nth-child(3) { background: #193121; }
.swatches span:nth-child(4) { background: #2b7042; }
.swatches span:nth-child(5) { background: #1ca952; }
.swatches span:nth-child(6) { background: #45ff84; }
.swatches span:nth-child(7) { background: #92ffb4; }
.swatches span:nth-child(8) { background: #c9f5d4; }

/* ---------- about ---------- */

.prose { max-width: 70ch; }
.prose p + p { margin-top: .75rem; }
.prose p { color: var(--muted); }
.prose .lead { color: var(--green-hot); font-size: 1.15rem; line-height: 1.5; text-shadow: var(--glow); }

.unit-status div { display: flex; gap: 1ch; }
.unit-status dt { flex: none; width: 12ch; color: var(--muted); text-align: right; }
.unit-status dt::after { content: ":"; }
.unit-status dd { min-width: 0; overflow-wrap: anywhere; }

/* ---------- git log ---------- */

.git-log { padding: 0; list-style: none; }

.commit {
  position: relative;
  padding: 0 0 1.6rem 3ch;
}

.commit::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "*";
  color: var(--green);
  font-weight: 700;
}

.commit::after {
  position: absolute;
  left: .5ch;
  top: 1.5em;
  bottom: .15em;
  content: "";
  border-left: 1px solid var(--line-hot);
}

.commit-root { padding-bottom: 0; }
.commit-root::after { display: none; }

.hash { color: var(--green-dim); }
.refs { color: var(--muted); }
.refs b { color: var(--green); font-weight: 700; }
.commit time { color: var(--ink); }
.commit h3 { margin-top: .2rem; color: var(--green-hot); font-weight: 700; text-shadow: var(--glow); }
.commit .at { color: var(--muted); font-weight: 400; text-shadow: none; }
.commit .msg { max-width: 72ch; margin-top: .2rem; color: var(--muted); }

/* ---------- projects (docker ps) ---------- */

.ps-wrap { overflow-x: auto; }
.ps { border-collapse: collapse; white-space: nowrap; }
.ps th { color: var(--muted); font-weight: 400; text-align: left; }
.ps th, .ps td { padding: 0 3ch .1rem 0; }
.ps th:last-child, .ps td:last-child { padding-right: 0; }
.ps-id, .ps-created { color: var(--green-dim); }
.ps-status { color: var(--muted); }
.ps-status.is-up { color: var(--green); text-shadow: var(--glow); }
.ps-name { color: var(--green-hot); font-weight: 700; }

/* ---------- focus ---------- */

.tree-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2ch;
}

.tree h3 { color: var(--green); font-weight: 700; }
.tree ul { padding: 0; list-style: none; }
.tree li { white-space: nowrap; }
.tree li::before { content: "├── "; color: var(--line-hot); }
.tree li:last-child::before { content: "└── "; }

.tree-summary { margin-top: 1rem; }

.locales { padding: 0; list-style: none; }

.toolbox { display: flex; flex-wrap: wrap; gap: 0 2ch; max-width: 72ch; padding: 0; list-style: none; color: var(--muted); }

/* ---------- contact + shell ---------- */

.finger p + p { margin-top: .15rem; }
.finger .gap { display: inline-block; width: 4ch; }

.shell { margin-top: 2rem; }
.shell-out { white-space: pre-wrap; overflow-wrap: anywhere; }
.shell-out > div { min-height: 1.6em; }
.shell-out .echo .ps1 { font-weight: 700; }
.shell-out .err { color: var(--err); }
.shell-out .hl { color: var(--green); }

.shell-line { display: flex; align-items: baseline; scroll-margin-bottom: calc(var(--bar) + 1.5rem); }
.shell-line label { flex: none; white-space: pre; }

.shell-line input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  caret-color: var(--green);
  caret-shape: block;
}

.matrix { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.matrix.is-on { opacity: .96; }

/* ---------- tsunami ---------- */

.ps1.root { color: var(--err); text-shadow: 0 0 6px rgba(255, 107, 95, .35); }
.ps1.kube { color: #7aa2ff; text-shadow: 0 0 6px rgba(50, 108, 229, .5); }
.ps1.ghost { color: #d8ecf5; text-shadow: 0 0 10px rgba(216, 236, 245, .6); }
.toast-who { color: var(--ink); }

.toast {
  position: fixed;
  top: 30%;
  left: 50%;
  z-index: 70;
  padding: 1.25rem 2.5rem;
  border: 1px solid var(--green);
  background: var(--black);
  box-shadow: 0 0 0 4px var(--black), 0 0 0 5px var(--line-hot), 0 0 40px rgba(69, 255, 132, .25);
  text-align: center;
  transform: translateX(-50%);
  animation: toast 3.5s steps(1) both;
}

.toast p + p { margin-top: .25rem; }
.toast-title { color: var(--green-hot); font-weight: 700; letter-spacing: .12em; text-shadow: var(--glow); animation: blink .5s steps(1) 3; }

.is-glitch .term { animation: glitch .6s steps(2) both; }

/* corruption levels (see shell.js) */
.probe { position: absolute; visibility: hidden; white-space: pre; font: inherit; }
.out { transition: filter .8s ease; }
.blur-1 { filter: blur(1.4px); }
.blur-3 { filter: blur(4px); }

.corrupt-2 .term :is(h1, h2, h3, .lead) { text-shadow: -1px 0 rgba(255, 0, 60, .7), 1px 0 rgba(0, 255, 255, .6); }
.corrupt-3 .term { text-shadow: -1.5px 0 rgba(255, 0, 60, .55), 1.5px 0 rgba(0, 255, 255, .45); }
.corrupt-3 .life { filter: hue-rotate(-60deg); }

/* the tilt: a small lurch, then an almost imperceptible drift. origin follows the viewport centre (shell.js) */
.corrupt-3 { overflow-x: clip; }
.corrupt-3 .page {
  rotate: .5deg;
  transform-origin: 50% var(--tilt-origin, 50vh);
  animation: drift 300s linear both;
}
.corrupt-3::before { opacity: .3; }

.jolt { animation: jolt .18s steps(3) both; }
.toast-3 { border-color: var(--err); box-shadow: 0 0 0 4px var(--black), 0 0 0 5px var(--err), 0 0 40px rgba(255, 107, 95, .3); }

@keyframes drift {
  0% { rotate: 0deg; }
  1.5% { rotate: .5deg; }
  100% { rotate: 2.5deg; }
}

@keyframes jolt {
  0% { transform: translateX(0); clip-path: none; }
  33% { transform: translateX(-12px); clip-path: inset(20% 0 45% 0); }
  66% { transform: translateX(9px); clip-path: inset(55% 0 10% 0); }
  100% { transform: translateX(0); clip-path: none; }
}

@keyframes toast { 0% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }

@keyframes glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-4px, 1px); filter: brightness(1.8) hue-rotate(40deg); }
  40% { transform: translate(3px, -2px); clip-path: inset(10% 0 30% 0); }
  60% { transform: translate(-2px, 2px); filter: brightness(.6); clip-path: none; }
  80% { transform: translate(2px, 0); filter: brightness(1.4); }
  100% { transform: translate(0); filter: none; }
}

/* ---------- finale: possession → panic → GRUB ---------- */

.possessed .page { transform: rotate(4deg) scale(1.03); filter: brightness(.55) saturate(1.6); transition: transform 3s ease-in, filter 3s ease-in; }

.crash {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  color: #aaa;
  background: #000;
  font: 15px/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crash .ghost-says { margin-bottom: .6rem; color: #d8ecf5; text-shadow: 0 0 10px rgba(216, 236, 245, .6); }
.crash.is-panic { color: #e5e5e5; font-size: 13px; }

html.is-grub, html.is-grub body { background: #000; }
html.is-grub body { padding: 0; }
html.is-grub body::before, html.is-grub body::after { display: none; }

.grub {
  min-height: 100vh;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  color: #aaa;
  background: #000;
  font: 15px/1.4 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.grub p { min-height: 1.4em; }
.grub-title { text-align: center; margin-bottom: 1.4em; }
.grub-line { display: flex; }
.grub-line label { flex: none; white-space: pre; }

.grub-line input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #aaa;
  background: transparent;
  font: inherit;
  caret-color: #aaa;
  caret-shape: underscore;
}

/* ---------- footer ---------- */

.footer {
  margin-top: 5rem;
  padding: 1.25rem 0 2rem;
  border-top: 1px dashed var(--line-hot);
  color: var(--muted);
  font-size: .8rem;
}

.footer details { margin-top: .5rem; }
.footer summary { width: fit-content; cursor: pointer; color: var(--green-dim); }
.footer summary:hover, .footer summary:focus-visible { color: var(--green); }
.legal-copy { max-width: 72ch; padding-top: .75rem; }
.legal-copy p + p { margin-top: .75rem; }

/* ---------- tmux status bar ---------- */

.tmux {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--bar);
  padding-inline: .5ch;
  overflow: hidden;
  color: var(--black);
  background: var(--green-dim);
  font-size: .8rem;
  white-space: nowrap;
}

.tmux-session { padding-right: 1ch; font-weight: 700; }

.tmux-win {
  padding: 0 .6ch;
  color: inherit;
  text-decoration: none;
}

.tmux-win.is-active { font-weight: 700; }
.tmux-win.is-active::after { content: "*"; }
.tmux-win:hover, .tmux-win:focus-visible { color: var(--green); background: var(--black); }
.tmux-right { margin-left: auto; padding-left: 1ch; }

:focus-visible { outline: 1px solid var(--green); outline-offset: 3px; }
.tmux :focus-visible { outline-offset: -2px; }

/* ---------- motion ---------- */

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes type { from { width: 0; } }
@keyframes reveal { from { visibility: hidden; } }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  body { font-size: 13.5px; }
  .neofetch { flex-direction: column; gap: 1.25rem; }
  .life { font-size: .8rem; }
  .tree-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-status div { flex-direction: column; gap: 0; margin-bottom: .35rem; }
  .unit-status dt { width: auto; text-align: left; }
  .finger .gap { display: block; width: auto; }
  .tmux-host, .tmux-date { display: none; }
  .ps thead, .ps-id { display: none; }
  .ps, .ps tbody { display: block; white-space: normal; }
  .ps tr { display: grid; grid-template-columns: 1fr auto; gap: 0 2ch; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
  .ps td { padding: 0; }
  .ps-name { grid-row: 1; grid-column: 1; }
  .ps-status { grid-row: 1; grid-column: 2; text-align: right; }
  .ps-image { grid-row: 2; grid-column: 1; color: var(--ink); }
  .ps-created { grid-row: 2; grid-column: 2; text-align: right; }
  .ps-created::before { content: "created "; }
}

@media (max-width: 460px) {
  .tree-grid { grid-template-columns: 1fr; }
  .tmux-session { display: none; }
  .tmux-win { padding: 0 .4ch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: more) {
  :root { --muted: #a1baa7; --line-hot: #3f9a5c; }
  body::before, body::after { display: none; }
}

@media print {
  :root { --ink: #000; --green: #000; --green-hot: #000; --green-dim: #333; --muted: #444; --line-hot: #999; --glow: none; }
  body { background: #fff; padding: 0; font-size: 11pt; }
  body::before, body::after, .tmux, .shell, #shell-idle, .skip-link, .life, .swatches, .motd { display: none !important; }
  .block + .block { margin-top: 1.5rem; }
  .block { break-inside: avoid; }
  a { color: #000; }
}