/* JetBrains Mono auto-hébergée (Fontsource 5.3.0, sous-ensemble latin, licence OFL : fonts/OFL.txt) */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  --bg: #000000;
  --window: #0b0b0b;
  --bar: #111111;
  --line: #262626;
  --dot: #333333;
  --text: #e8e8e8;
  --soft: #bdbdbd;
  --muted: #8c8c8c;
  --accent: #4ade80; /* alternatives: #ffb000 amber, #e8e8e8 white, #5cc8ff cyan */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

main {
  min-height: 100vh;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: var(--mono);
  color: var(--text);
}

.terminal {
  width: 100%;
  max-width: 860px;
  background: var(--window);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
}

.dots { display: flex; gap: 8px; }
.dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); }
.spacer { width: 49px; }
.title { font-size: 13px; color: var(--muted); }

.screen {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: auto;
}

.block { display: flex; flex-direction: column; gap: 6px; }

.who { color: var(--accent); }
.path { color: var(--muted); }

h1 {
  margin: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p { margin: 0; color: var(--soft); }

nav { display: flex; flex-wrap: wrap; gap: 8px 32px; }

a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #555;
}
a:hover, a:focus-visible { color: #fff; text-decoration-color: #fff; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

footer { font-size: 12px; color: var(--muted); }

@media (max-width: 520px) {
  .screen { padding: 24px 18px 28px; font-size: 14px; }
  h1 { font-size: 26px; }
}