/* philipp.ninja — terminal edition. System fonts only, no external requests, no inline styles (CSP). */
:root {
  --bg: #f1efe6;
  --panel: #fbfaf4;
  --ink: #1b1d17;
  --ink-2: #5d6052;
  --ink-3: #8b8e7f;
  --line: #cfccbd;
  --accent: #3f6200;      /* prompt / links on light */
  --accent-2: #8a4b00;    /* path / secondary */
  --glow: #d4ff3a;
  --on-glow: #12130f;
  --sel: #d4ff3a;
  --dot: rgba(27, 29, 23, .08);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b09;
    --panel: #10120e;
    --ink: #e4e6dc;
    --ink-2: #9ea193;
    --ink-3: #6a6d61;
    --line: #2a2d25;
    --accent: #d4ff3a;
    --accent-2: #ffb454;
    --dot: rgba(228, 230, 220, .05);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 18px 18px;
  color: var(--ink);
  font: 400 15px/1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { background: var(--glow); color: var(--on-glow); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--sel); color: var(--on-glow); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- tmux bar (top) ---------- */
.tmux {
  display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
  font-size: 12.5px; line-height: 1; background: #12130f; color: #e4e6dc; white-space: nowrap; overflow: hidden;
}
.tmux .l, .tmux .r { display: flex; align-items: stretch; min-width: 0; }
.tmux .sess { background: var(--glow); color: var(--on-glow); font-weight: 700; padding: 8px 12px; }
.tmux a, .tmux span.win { color: inherit; text-decoration: none; padding: 8px 10px; }
.tmux a:hover { background: #2a2d25; color: inherit; }
.tmux .cur { color: var(--glow); font-weight: 700; }
.tmux .r span { padding: 8px 12px; opacity: .75; }
@media (max-width: 480px) { .tmux .hide-s { display: none; } }

/* ---------- terminal window ---------- */
main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: clamp(24px, 6vw, 72px) 16px clamp(28px, 6vw, 64px); }
.win {
  position: relative; border: 1px solid var(--line); background: var(--panel);
  padding: 34px clamp(16px, 3.6vw, 36px) clamp(22px, 3vw, 32px);
  box-shadow: 0 1px 0 var(--line), 0 24px 60px -36px rgba(0,0,0,.35);
}
.win::before { /* box-drawing title on the top border */
  content: attr(data-title);
  position: absolute; top: -.8em; left: 18px; padding: 0 8px; background: var(--bg);
  color: var(--ink-2); font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; max-width: calc(100% - 36px); overflow: hidden; text-overflow: ellipsis;
}
.win::after { /* window "buttons" */
  content: "[_][□][x]"; position: absolute; top: -.8em; right: 18px; padding: 0 8px; background: var(--bg);
  color: var(--ink-3); font-size: 12.5px;
}

.banner {
  margin: 0 0 22px; color: var(--accent); line-height: 1; font-size: clamp(7.4px, 2.25vw, 15px);
  font-weight: 400; white-space: pre; overflow: hidden;
}
.banner .dim { color: var(--ink-3); }
.banner .sh { color: var(--ink-3); opacity: .55; }

.ln, .out { margin: 0; overflow-wrap: anywhere; }
.ln, .out.pre { white-space: pre-wrap; }
.ln { margin-top: 14px; }
.ln:first-of-type { margin-top: 0; }
.ps1 { color: var(--accent); font-weight: 700; }
.ps1 .path { color: var(--accent-2); }
.ps1 .dollar { color: var(--ink-2); font-weight: 400; }
.out { color: var(--ink); }
.out.big { font-family: var(--sans); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-size: clamp(38px, 8.4vw, 82px); margin: 6px 0 4px; white-space: normal; }
.out .c { color: var(--ink-3); }
.out .k { color: var(--accent-2); }
.out ul { list-style: none; margin: 0; padding: 0; }
.out li::before { content: "› "; color: var(--accent); }

.cmd { display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; }
.caret { display: inline-block; width: .62em; height: 1.15em; vertical-align: -.2em; background: var(--accent); animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* key-like button, rendered as a terminal choice */
.key {
  font: inherit; color: var(--on-glow); background: var(--glow); border: 0; padding: 2px 10px; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-glow) 25%, transparent) inset;
}
.key:hover { filter: brightness(.95); }
.key kbd { font: inherit; opacity: .7; }
.hint { color: var(--ink-3); }

/* ---------- typing sequence (index) — CSS only, no JS needed ---------- */
@keyframes type { from { max-width: 0; } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
.seq .cmd { animation: type var(--t, .3s) steps(var(--n, 10)) both; max-width: 40ch; }
.seq .out, .seq .ln { animation: show .01s linear both; }
.seq .s1 { animation-delay: .25s; }   .seq .s1 .cmd { --n: 6;  --t: .22s; animation-delay: .35s; }
.seq .o1 { animation-delay: .7s; }
.seq .s2 { animation-delay: 1.05s; }  .seq .s2 .cmd { --n: 13; --t: .4s; animation-delay: 1.1s; }
.seq .o2 { animation-delay: 1.65s; }
.seq .s3 { animation-delay: 2.0s; }   .seq .s3 .cmd { --n: 6;  --t: .22s; animation-delay: 2.05s; }
.seq .o3 { animation-delay: 2.4s; }
.seq .s4 { animation-delay: 2.75s; }  .seq .s4 .cmd { --n: 16; --t: .45s; animation-delay: 2.8s; }
.seq .o4 { animation-delay: 3.4s; }
.seq .s5 { animation-delay: 3.7s; }   .seq .s5 .cmd { --n: 15; --t: .42s; animation-delay: 3.75s; }
.seq .o5 { animation-delay: 4.3s; }
.seq .s6 { animation-delay: 4.55s; }

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

/* ---------- impressum ---------- */
.facts { margin: 14px 0 0; border-top: 1px dashed var(--line); }
.facts > div { display: grid; grid-template-columns: 1fr; gap: 0 22px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
@media (min-width: 720px) { .facts > div { grid-template-columns: 26ch 1fr; } }
.facts dt { color: var(--accent-2); }
.facts dt::after { content: ":"; }
.facts dd { margin: 0; }
.redacted { color: var(--ink-3); letter-spacing: .05em; }
.todo { background: #ff4d2e; color: #fff; padding: 0 6px; white-space: nowrap; }
.legal h2 { font: 700 15px/1.4 var(--mono); margin: 30px 0 8px; color: var(--ink); }
.legal h2::before { content: "## "; color: var(--ink-3); }
.legal p { margin: 0 0 .8em; max-width: 78ch; }
.legal .out.big { font-size: clamp(34px, 7vw, 64px); }
.revealbox { margin: 16px 0 6px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.noscript-img { display: block; max-width: 100%; height: auto; margin-top: 14px; border: 1px solid var(--line); }

/* ---------- vim statusline (bottom) ---------- */
.vim {
  display: flex; align-items: stretch; flex-wrap: wrap; font-size: 12.5px; line-height: 1;
  background: var(--panel); border-top: 1px solid var(--line); color: var(--ink-2);
}
.vim > * { padding: 9px 12px; }
.vim .mode { background: var(--glow); color: var(--on-glow); font-weight: 700; }
.vim .file { color: var(--ink); }
.vim .fill { flex: 1; }
.vim a { color: var(--ink-2); }
.vim a:hover { color: var(--on-glow); }
.vim .pos { color: var(--ink-3); }
@media (max-width: 560px) { .vim .fill, .vim .pos { display: none; } .vim { justify-content: space-between; } }
@media (max-width: 520px) { .win::after { display: none; } }
.banner .dim { display: inline-block; margin-bottom: .5em; font-size: 12px; }