:root {
  --bg: #0b0e0d;
  --panel: #0f1312;
  --line: #1e2523;
  --fg: #c9d4cc;
  --dim: #6c7a72;
  --g: #7ee787;
  --y: #e3b341;
  --c: #79c0ff;
  --m: #d2a8ff;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; font: 15px/1.6 var(--mono); -webkit-text-size-adjust: 100%; }
::selection { background: var(--g); color: var(--bg); }

a { color: var(--c); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }

.term {
  max-width: 860px;
  margin: 2.5rem auto 4.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 30px 80px -40px #000;
}
.bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: 13px;
}
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a3230; }
.dots i:nth-child(1) { background: #ff5f57aa; }
.dots i:nth-child(2) { background: #febc2eaa; }
.dots i:nth-child(3) { background: #28c840aa; }
.title { flex: 1; text-align: center; margin-right: 45px; }

main { padding: 1.5rem clamp(1rem, 4vw, 2.25rem) 1rem; }
section { margin: 0 0 2.25rem; }
.proj { padding-top: 1.75rem; border-top: 1px dashed var(--line); }

p { margin: .6rem 0; }
.cmd { margin: 0 0 .5rem; color: var(--fg); }
.cmd.sub { margin-top: 1.25rem; }
.ps { color: var(--g); user-select: none; }
.dim { color: var(--dim); }
.g { color: var(--g); }
.y { color: var(--y); }
em { font-style: normal; color: var(--m); }
b { color: #e8efe9; font-weight: 600; }

pre { margin: .5rem 0; font: inherit; font-size: 14px; line-height: 1.55; overflow-x: auto; }
.out { color: var(--fg); }
.stats, .pipe, .road { padding: .75rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }

/* hero */
.hero { padding-bottom: .5rem; }
.typed {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  width: 6ch; animation: type .7s steps(6) .2s both;
}
@keyframes type { from { width: 0; } }
.logo {
  margin: .4rem 0 .6rem;
  font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 700;
  color: #eef5f0;
}
.logo .g { color: var(--g); }
.cursor {
  display: inline-block; width: .55em; height: 1.05em; margin-left: .08em;
  background: var(--g); vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
.cmd .cursor { height: 1.1em; vertical-align: -.2em; }
@keyframes blink { 50% { opacity: 0; } }

/* ls listing */
.ls a { color: var(--c); font-weight: 600; }

/* tags */
.tag {
  display: inline-block; padding: 0 .4em; border-radius: 3px;
  font-size: .78em; line-height: 1.5; vertical-align: .1em; font-weight: 500;
  border: 1px solid currentColor;
}
.tag.ok { color: var(--g); }
.tag.wip { color: var(--y); }

h2 { margin: .25rem 0 .5rem; font-size: 1.45rem; color: #eef5f0; letter-spacing: -.01em; }
h2 .for { font-size: .62em; color: var(--dim); font-weight: 400; margin-left: .3em; }

/* screenshot */
.shot {
  display: block; margin: 1rem 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: #03040a; aspect-ratio: 16 / 10;
}
.shot img { display: block; width: 100%; height: auto; transition: transform .6s ease, filter .3s; filter: saturate(.92); }
.shot:hover img { transform: scale(1.025); filter: saturate(1.1); }

/* cs2 console */
.console {
  margin: 1rem 0; border-radius: 4px; overflow: hidden;
  background: #1b1d1f; border: 1px solid #2c2f33; color: #c7cbd1;
}
.ctitle { padding: .3rem .8rem; background: #25282c; font: 600 12px/1.6 system-ui, sans-serif; color: #9aa0a8; letter-spacing: .02em; }
.console pre { margin: 0; padding: .7rem 1rem .9rem; font-size: 13.5px; }

/* clip slot */
.clip { margin: 1rem 0; }
.clip video { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.clip-ph {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  aspect-ratio: 21 / 9; border: 1px dashed #2c3532; border-radius: 6px; color: var(--fg);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, #ffffff05 3px 4px),
    radial-gradient(ellipse at center, #141a18, var(--bg));
  font-size: 14px;
}
.play {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--dim); color: var(--g); font-size: 1.1rem; padding-left: 3px;
}

/* progress bar */
.bar-p { display: block; margin-top: .55rem; height: 6px; border-radius: 3px; background: var(--line); }
.bar-p span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--g), var(--y)); }

.note { color: var(--dim); font-size: 13.5px; }
.note .y { margin-right: .5em; }

/* buttons */
.links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .6rem; }
.btn {
  display: inline-block; padding: .3rem .8rem; border-radius: 5px; font-size: 14px;
  border: 1px solid var(--g); color: var(--bg); background: var(--g); font-weight: 600;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--g); }
.btn.off { border: 1px dashed #34403b; color: var(--dim); background: transparent; font-weight: 400; cursor: default; }

.stack { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; font-size: 12.5px; }
.stack span { color: var(--dim); }
.stack span::before { content: "#"; color: #3d4844; }

.end { margin-bottom: .5rem; }

/* compact pages (home, 404): terminal centred in the viewport, clear of the status line */
body.home {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh;
  padding: 2rem 1rem calc(1.9rem + 2rem);
}
body.home .term { margin: 0; width: 100%; max-width: 760px; }
body.home main { padding-bottom: .25rem; }
body.home .end { margin-bottom: 0; }

/* tmux-style status line */
.status {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; gap: .2rem; align-items: center;
  padding: 0 .5rem; height: 1.9rem;
  background: var(--g); color: var(--bg); font-size: 13px;
  overflow-x: auto; white-space: nowrap;
}
.status a { color: var(--bg); padding: 0 .55rem; }
.status a b { color: inherit; font-weight: 700; }
.status a:hover { background: #0b0e0d22; text-decoration: none; }
.status .right { margin-left: auto; padding-right: .5rem; font-weight: 700; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .term { margin: 0 0 2rem; border: 0; border-radius: 0; }
  .title { margin-right: 0; }
  pre { font-size: 12px; }
  .console pre { font-size: 12px; }
  .status .right { display: none; }
  body.home { padding: 0 0 1.9rem; align-items: stretch; }
  body.home .term { display: flex; flex-direction: column; }
  body.home main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

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