@font-face {
  font-family: 'Procrastinating Pixie';
  src: url('assets/ProcrastinatingPixie.ttf') format('truetype');
  font-display: swap;
}

/* Palette lifted from the caterpillar */
:root {
  --bg: #070b09;
  --bg-2: #0d1511;
  --fg: #c9d6cc;
  --dim: #6f8577;
  --accent: #36d468;   /* G */
  --accent-2: #b2d505; /* A */
  --yellow: #f0db18;   /* U */
  --teal: #26a074;     /* O */
  --deep: #0d7a64;     /* R */
  --link: #7fe0a8;
  --err: #ff6b5b;
  --glow: 0 0 6px rgba(54, 212, 104, .35);
  --scan: rgba(0, 0, 0, .28);
  --bar-bg: #36d468;
  --bar-fg: #04140a;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --fs: clamp(13px, 1.1vw + 8px, 16px);
}

html[data-theme="amber"] {
  --bg: #0c0802;
  --bg-2: #160f04;
  --fg: #ffcc66;
  --dim: #a07a32;
  --accent: #ffb000;
  --accent-2: #ffd27a;
  --yellow: #fff1b8;
  --teal: #ffb000;
  --deep: #d18a00;
  --link: #ffe099;
  --glow: 0 0 6px rgba(255, 176, 0, .4);
  --bar-bg: #ffb000;
  --bar-fg: #1a1000;
}

html[data-theme="paper"] {
  --bg: #f4f1e8;
  --bg-2: #e9e4d6;
  --fg: #1e2a22;
  --dim: #6b7469;
  --accent: #0d7a64;
  --accent-2: #496001;
  --yellow: #8a6d00;
  --teal: #0d7a64;
  --deep: #0d7a64;
  --link: #0d6b52;
  --err: #b3261e;
  --glow: none;
  --scan: rgba(0, 0, 0, .04);
  --bar-bg: #1e2a22;
  --bar-fg: #f4f1e8;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: radial-gradient(ellipse at 50% 40%, var(--bg-2), var(--bg) 75%) fixed, var(--bg);
  color: var(--fg);
  font: 400 var(--fs)/1.6 var(--mono);
  text-shadow: var(--glow);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--bg); background: var(--link); text-decoration: none; text-shadow: none; outline: none; }
::selection { background: var(--accent); color: var(--bg); text-shadow: none; }

.dim { color: var(--dim); }
.brand { color: var(--accent); font-weight: 700; }
.err { color: var(--err); }
.ok { color: var(--accent); }
.yellow { color: var(--yellow); }

/* ---------- CRT overlay ---------- */
.crt {
  pointer-events: none;
  position: fixed; inset: 0;
  z-index: 50;
  background: repeating-linear-gradient(180deg, transparent 0 2px, var(--scan) 2px 4px);
}
.crt::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, transparent 0%, color-mix(in srgb, var(--accent) 6%, transparent) 2%, color-mix(in srgb, var(--accent) 14%, transparent) 3%, transparent 3.5%, transparent 100%) no-repeat;
  background-size: 100% 100vh;
  animation: scan 7s linear infinite;
}
.crt::before { /* vignette */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%);
}
html[data-theme="paper"] .crt::before, html[data-theme="paper"] .crt::after { display: none; }
@keyframes scan { 0% { background-position: 0 -100vh; } 55%, 100% { background-position: 0 100vh; } }

/* ---------- Screen ---------- */
.screen {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px calc(110px + env(safe-area-inset-bottom));
  cursor: text;
}

.scrollback > * { margin: 0; }
.line { white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.block { margin: .25em 0 1em; max-width: 72ch; }
.block p { margin: 0 0 .8em; }

.echo .prompt { margin-right: .6ch; }

.prompt { white-space: nowrap; color: var(--dim); }
.prompt .p-o { color: var(--teal); }
.prompt .p-r { color: var(--deep); }
.prompt .p-u { color: var(--yellow); }
.prompt .p-g { color: var(--accent); }
.prompt .p-a { color: var(--accent-2); }
.prompt .p-path { color: #6fa8ff; }
html[data-theme="amber"] .prompt .p-path { color: var(--accent-2); }
html[data-theme="paper"] .prompt .p-path { color: #2456b3; }

.promptline { display: flex; align-items: baseline; gap: .6ch; }
.js .promptline { visibility: hidden; }
.screen.ready .promptline { visibility: visible; }
#cmd {
  flex: 1; min-width: 0;
  font: inherit; color: var(--fg); text-shadow: inherit;
  background: transparent; border: 0; outline: 0; padding: 0;
  caret-color: var(--accent);
}

.suggest { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; min-height: 1.6em; }
.suggest button {
  font: inherit; font-size: .85em; color: var(--dim); text-shadow: none;
  background: transparent; border: 1px dashed color-mix(in srgb, var(--dim) 60%, transparent);
  border-radius: 3px; padding: 1px 8px; cursor: pointer;
}
.suggest button:hover, .suggest button:focus-visible { color: var(--bg); background: var(--accent); border-color: var(--accent); outline: none; }

.cmd, .file-link { color: var(--accent); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cmd:hover, .file-link:hover { background: var(--accent); color: var(--bg); text-shadow: none; text-decoration: none; }

/* ---------- Banner ---------- */
.banner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 4px 0 18px; }
.banner[role="button"] { cursor: pointer; width: fit-content; transform-origin: 0 50%; transition: transform .45s ease-in, opacity .45s ease-in; }
.banner[role="button"]:focus-visible { outline: 1px dashed var(--accent); outline-offset: 6px; }
.banner.leaving { transform: scale(0); opacity: 0; }
.ascii { margin: 0; font-size: clamp(7px, 1.25vw, 13px); line-height: 1.1; text-shadow: 0 0 8px currentColor; }
.ascii .l0 { color: var(--teal); }
.ascii .l1 { color: var(--deep); }
.ascii .l2 { color: var(--yellow); }
.ascii .l3 { color: var(--accent); }
.ascii .l4 { color: var(--accent-2); }
.caterpillar { width: min(260px, 60vw); height: auto; filter: drop-shadow(0 0 10px rgba(54, 212, 104, .18)); }
.caterpillar__body { transform-box: fill-box; transform-origin: 50% 80%; animation: wiggle 4s ease-in-out infinite; }
.caterpillar:hover .caterpillar__body { animation-duration: .6s; }
@keyframes wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  75% { transform: rotate(-1.5deg); }
  80% { transform: rotate(1.5deg) translateX(2px); }
  85% { transform: rotate(-1deg); }
  90% { transform: rotate(.5deg); }
}
html[data-theme="amber"] .caterpillar { filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.1); }

.boot .t { color: var(--dim); }
.boot .dots { color: color-mix(in srgb, var(--dim) 50%, transparent); }

/* ---------- File content ---------- */
.h { font-size: 1em; font-weight: 700; color: var(--yellow); margin: 0 0 .8em; }

.svc { margin: 0; }
.svc dt { color: var(--accent); font-weight: 700; margin-top: .9em; }
.svc dt:first-child { margin-top: 0; }
.svc dd { margin: .15em 0 0 4ch; }
.tag { color: var(--dim); font-weight: 400; margin-right: 1ch; }

.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; max-width: 700px; }
[data-countdown] { white-space: nowrap; }
.person { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--fg); }
.person:hover, .person:focus-visible { background: none; color: var(--fg); }
.person img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.15) brightness(.9);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: filter .25s;
}
.person:hover img, .person:focus-visible img { filter: none; }
html.js:not([data-theme="paper"]) .person img { mix-blend-mode: screen; }
html.js:not([data-theme="paper"]) .person:hover img { mix-blend-mode: normal; }
.person--redacted { cursor: pointer; }
.person__placeholder {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  display: grid; place-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--accent) 5%, transparent) 10px 20px),
    var(--bg-2);
}
.person__placeholder .q { font-size: 5em; line-height: 1; color: var(--accent); opacity: .5; animation: flicker 3s steps(1) infinite; }
.person__placeholder .stamp {
  position: absolute; bottom: 18%; transform: rotate(-12deg);
  border: 2px solid var(--err); color: var(--err); text-shadow: none;
  padding: 2px 10px; text-transform: uppercase; letter-spacing: .2em; font-size: .8em; font-weight: 700;
}
.person--redacted:hover .person__placeholder, .person--redacted:focus-visible .person__placeholder { border-style: solid; border-color: var(--accent); }
.person--redacted:focus-visible { outline: none; }
.redact { color: var(--fg); background: var(--fg); text-shadow: none; letter-spacing: -.05em; user-select: none; }
@keyframes flicker { 0%, 92%, 96% { opacity: .5; } 94% { opacity: .1; } 98% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .person__placeholder .q { animation: none; } }
.person__name { font-family: 'Procrastinating Pixie', var(--mono); font-size: 1.15em; color: var(--accent); }
.person__role { font-size: .85em; }

.kv { border-collapse: collapse; }
.kv th { text-align: left; font-weight: 400; color: var(--dim); padding: 2px 3ch 2px 0; vertical-align: top; }
.kv td { padding: 2px 0; }
.kv + p { margin-top: 1em; }

.ls { display: flex; flex-wrap: wrap; gap: 0 4ch; }
.ls .d { color: #6fa8ff; }
html[data-theme="paper"] .ls .d { color: #2456b3; }

.gif { max-width: min(420px, 100%); display: block; margin: 6px 0; border: 1px solid var(--err); }

/* ---------- tmux bar ---------- */
.tmux {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 0;
  background: var(--bar-bg); color: var(--bar-fg);
  font-size: .85em; line-height: 1;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  text-shadow: none;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.tmux a { color: inherit; text-decoration: none; padding: 2px 8px; }
.tmux a b { font-weight: 400; opacity: .6; }
.tmux a:hover, .tmux a:focus-visible, .tmux a.active { background: var(--bar-fg); color: var(--bar-bg); }
.tmux a.active::after { content: "*"; }
.tmux__session { font-weight: 700; margin-right: 6px; }
.tmux__right { margin-left: auto; padding-left: 12px; }

/* ---------- imprint (company info, always visible: e-handelsloven §7 / SAP partner) ---------- */
.imprint {
  position: fixed; left: 0; right: 0; bottom: var(--tmux-h, calc(30px + env(safe-area-inset-bottom))); z-index: 40;
  padding: 5px 12px; text-align: center;
  font-size: .85em; line-height: 1.4; color: var(--fg); text-shadow: none;
  background: color-mix(in srgb, var(--bar-bg) 14%, var(--bg));
  border-top: 1px solid color-mix(in srgb, var(--bar-bg) 45%, transparent);
}
.imprint strong { color: var(--accent); font-weight: 700; }
.imprint .sep { color: var(--dim); }
.imprint a { color: var(--fg); }
.imprint a:hover, .imprint a:focus-visible { color: var(--bg); background: var(--link); }
@media (max-width: 560px) { .imprint__tel { display: none; } }
html[data-theme="commander"] .imprint { background: #000; color: #aaaaaa; border-top: 0; }
html[data-theme="commander"] .imprint a { color: #fff; }
html[data-theme="commander"] .imprint strong { color: #ffff55; }
html:not(.js) .imprint { position: static; margin: 0 auto 32px; max-width: 760px; background: none; border: 0; }
@media (max-width: 560px) { .tmux__host { display: none; } }

/* ---------- No-JS: files are the page ---------- */
html:not(.js) .screen, html:not(.js) .tmux { display: none; }
html:not(.js) .files { max-width: 760px; margin: 0 auto; padding: 32px 16px; }
html:not(.js) .file { margin-bottom: 48px; }
.js .files { display: none; }

@media (prefers-reduced-motion: reduce) {
  .crt::after, .caterpillar__body { animation: none; }
}

/* ---------- language toggle ---------- */
.tmux__lang { margin-right: 10px; opacity: .85; }
.tmux .tmux__lang a { padding: 2px 4px; }
.tmux .tmux__lang a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.js .nojs-only { display: none; }
@media (max-width: 480px) {
  #clock { display: none; }
  .tmux__session { display: none; }
  .tmux { padding-left: 8px; padding-right: 8px; }
  .tmux a { padding: 2px 5px; }
  .tmux__lang { margin-right: 0; }
}

/* ---------- Norton Commander ---------- */
html[data-theme="commander"] {
  --bg: #0000aa;
  --bg-2: #0000aa;
  --fg: #55ffff;
  --dim: #00aaaa;
  --accent: #ffff55;
  --accent-2: #ffffff;
  --yellow: #ffff55;
  --teal: #55ffff;
  --deep: #ffffff;
  --link: #ffffff;
  --err: #ff5555;
  --glow: 0 0 5px rgba(85, 255, 255, .35);
  --scan: rgba(0, 0, 0, .25);
  --bar-bg: #00aaaa;
  --bar-fg: #000000;
}
html[data-theme="commander"] .crt::after {
  background-image: linear-gradient(0deg, transparent 0%, rgba(85, 255, 255, .05) 2%, rgba(85, 255, 255, .12) 3%, transparent 3.5%, transparent 100%);
}
/* keep the panel's top margin inside body, so a short page isn't taller than the viewport */
html[data-theme="commander"] body { display: flow-root; }
html[data-theme="commander"] .screen {
  position: relative;
  border: 4px double #55ffff;
  margin-top: 24px;
  margin-bottom: 92px;
  min-height: calc(100dvh - 116px);
  padding-bottom: 24px;
}
html[data-theme="commander"] .screen::before {
  content: " C:\\ORUGA ";
  position: absolute; top: -0.85em; left: 50%; transform: translateX(-50%);
  background: #00aaaa; color: #000; padding: 0 1ch; white-space: pre;
}
html[data-theme="commander"] .prompt .p-path { color: #fff; }
html[data-theme="commander"] .ascii { text-shadow: none; }
html[data-theme="commander"] .ascii span { color: #ffff55; }
html[data-theme="commander"] .ascii .l1, html[data-theme="commander"] .ascii .l3 { color: #fff; }
html[data-theme="commander"] .ls .d { color: #fff; }
html[data-theme="commander"] a:hover, html[data-theme="commander"] a:focus-visible,
html[data-theme="commander"] .cmd:hover, html[data-theme="commander"] .file-link:hover,
html[data-theme="commander"] .suggest button:hover { background: #00aaaa; color: #000; border-color: #00aaaa; }
html[data-theme="commander"] ::selection { background: #00aaaa; color: #000; }
html[data-theme="commander"] .tmux a b { opacity: 1; background: #000; color: #fff; padding: 0 3px; margin-right: 2px; }
html[data-theme="commander"] .tmux a.active { background: #000; color: #55ffff; }
html[data-theme="commander"] .tmux__session { background: #000; color: #ffff55; padding: 2px 6px; }
html[data-theme="commander"] .stamp { background: #0000aa; }