@font-face { font-family: "VT323"; src: url(/fonts/vt323.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/plex-mono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #0b0a08;
  --amber: #ffb000;
  --text: #f2d59b;
  --dim: #b8904a;
  --faint: #8a6a32;
  --rule: #3a2c12;
  --ok: #8cff66;
  --fail: #ff6a3d;
  --warn: #ffd166;
  --gutter: 2.4rem;
  --gap: 1.3rem;
  --pad: clamp(18px, 5vw, 64px);
  --mono: "Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 clamp(14px, 1.05vw + 10px, 17px)/1.7 var(--mono); color: var(--text); }
b { font-weight: 600; color: var(--text); }
a { color: var(--amber); text-decoration: none; }
a:hover, a:focus-visible { color: #fff1cf; text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 1px dashed var(--amber); outline-offset: 4px; }
p, h1 { margin: 0; }

/* ---- terminal window: scanlines + vignette ---- */
.term {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse 120% 70% at 50% 18%, #22190a 0%, var(--bg) 62%);
  background-attachment: fixed;
  overflow-x: clip;
}
.term::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .28) 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .55) 100%);
  animation: flicker 6s infinite;
}
@keyframes flicker { 0%, 90%, 100% { opacity: 1 } 91% { opacity: .85 } 92% { opacity: 1 } 95% { opacity: .92 } }

/* ---- tmux status line ---- */
.tmux {
  display: flex;
  gap: 1.5ch;
  align-items: center;
  padding: 10px var(--pad);
  background: #1a1408;
  border-bottom: 1px solid var(--rule);
  font-size: .8em;
  color: var(--dim);
  white-space: nowrap;
}
.tmux-session { color: var(--bg); background: var(--amber); padding: 0 1ch; font-weight: 600; }
.tmux-win.is-active { color: var(--amber); }
.tmux-right { margin-left: auto; }

/* ---- main flow ---- */
main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) var(--pad) clamp(40px, 8vw, 96px);
  display: flex;
  flex-direction: column;
}

/* staggered reveal, driven by --d on each block */
.boot p, .prompt, .buffer, .studio, .elsewhere {
  animation: appear .12s ease-out both;
  animation-delay: calc(var(--d, 0) * 180ms + 150ms);
}
@keyframes appear { from { opacity: 0 } to { opacity: 1 } }

.boot { display: flex; flex-direction: column; color: var(--dim); }
.boot p { padding-left: 9ch; text-indent: -9ch; }
.ok, .fail, .warn { font-weight: 600; white-space: pre; }
.ok { color: var(--ok); } .fail { color: var(--fail); } .warn { color: var(--warn); }

.prompt { margin-top: 2.2em; color: var(--text); word-break: break-all; }
.ps1 { color: var(--ok); font-weight: 600; }
.cwd { color: #7cc4ff; font-weight: 600; }
.typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  animation: type .7s steps(13, end) forwards;
  animation-delay: calc(5 * 180ms + 350ms);
}
@keyframes type { to { width: 13ch } }

/* ---- vim buffer with line numbers ---- */
.buffer { counter-reset: ln; margin-top: 1.2em; }
.line {
  position: relative;
  padding-left: calc(var(--gutter) + var(--gap));
  min-height: 1.7em;
}
.line::before {
  counter-increment: ln;
  content: counter(ln);
  position: absolute;
  left: 0;
  width: var(--gutter);
  text-align: right;
  color: var(--faint);
  font: 400 1rem/1.7 var(--mono);
  font-size: clamp(14px, 1.05vw + 10px, 17px);
}
.tilde::before { content: ""; counter-increment: none; }
.tilde { color: #3f6fb0; padding-left: 0; }
.comment { color: var(--faint); font-style: italic; }

.wordmark {
  font: 400 clamp(40px, 11vw, 140px)/0.95 "VT323", var(--mono);
  letter-spacing: -.01em;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, .8), 0 0 30px rgba(255, 120, 0, .4);
  margin-bottom: .1em;
  white-space: nowrap;
  min-height: 0;
}
.wordmark::before { top: 50%; transform: translateY(-50%); }

.cursor {
  display: inline-block;
  width: .55em;
  height: 1em;
  margin-left: .08em;
  vertical-align: -.1em;
  background: var(--amber);
    animation: blink 1.05s steps(1) infinite;
}
.wordmark .cursor { width: .4em; height: .56em; vertical-align: baseline; margin-left: .1em; }
.prompt .cursor { width: .6em; height: 1.1em; vertical-align: -.2em; }
@keyframes blink { 50% { opacity: 0 } }

/* ---- ~/now: the studio ---- */
.studio {
  position: relative;
  z-index: 11;
  margin-top: 1em;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "perm img" "perm link";
  column-gap: 3ch;
  align-items: center;
  justify-items: start;
  width: fit-content;
  max-width: 100%;
  padding: 18px 28px 18px 0;
  color: var(--text);
}
.perm { grid-area: perm; color: var(--faint); white-space: pre; align-self: start; padding-top: .2em; }
.studio img {
  grid-area: img;
  width: min(420px, 100%);
  height: auto;
  
  filter: drop-shadow(0 0 18px rgba(255, 176, 0, .18));
  transition: transform .25s ease;
}
.link-out { grid-area: link; color: var(--amber); margin-top: .4em; }
.arrow { color: var(--dim); }
.studio:hover img, .studio:focus-visible img {
  transform: rotate(-2deg) scale(1.03);
  
}
.studio:hover, .studio:focus-visible { text-decoration: none; }
.studio:hover .link-out { color: #fff1cf; text-decoration: underline; text-underline-offset: 4px; }

.elsewhere { margin-top: .4em; }

/* ---- vim status line ---- */
.vimline {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 2ch;
  padding: 6px var(--pad);
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: #1a1408;
  border-top: 1px solid var(--rule);
  font-size: .8em;
  color: var(--dim);
  white-space: nowrap;
}
.mode { background: var(--ok); color: var(--bg); font-weight: 600; padding: 0 1ch; }
.mode.is-cmd { background: var(--amber); }
.file { color: var(--text); }
.cmdline { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.meta { margin-left: auto; }

/* ---- phones ---- */
@media (max-width: 640px) {
  :root { --gutter: 1.4rem; --gap: .9rem; }
  .tmux-win:not(.is-active), .tmux-right { display: none; }
  .boot p { padding-left: 0; text-indent: 0; }
  .boot .ok, .boot .fail, .boot .warn { display: block; }
  .boot p + p { margin-top: .5em; }
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "perm" "img" "link"; row-gap: .6em; padding-right: 0; }
  .link-out { word-break: break-all; }
  .file, .meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .typed { width: auto; }
}