/* nopper.ai — the single stylesheet for all pages.
   Links use the impressum/datenschutz grey (--muted) everywhere.
   JetBrains Mono — SIL Open Font License 1.1 (OFL-JetBrainsMono.txt);
   self-hosted, no external font requests. */
:root {
  --bg: #0b0b0d;
  --fg: #e8e8ea;
  --muted: #8a8a92;
  --faint: #55555d;
  --accent: #3ddc97;
  --border: #26262c;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Malgun Gothic", "Microsoft YaHei", "PingFang SC", monospace;
}
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("jetbrains-mono-700.woff2") format("woff2"); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  /* vertical centering lives in main's auto margins (never hides tall pages) */
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
main { max-width: 44rem; width: 100%; margin: auto 0; } /* centered when it fits, top-aligned when it overflows */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* links — one color, one behaviour, everywhere */
a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a:hover, a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

/* the agent */
.agent {
  width: 144px; /* 3x of the 48px art — integer scale keeps pixels stable */
  height: auto;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 2.25rem;
  filter: drop-shadow(0 0 22px rgba(61, 220, 151, 0.45));
  animation: glow 3.5s ease-in-out infinite;
}
@media (min-width: 1600px) { .agent { width: 192px; } } /* 4x */
@media (min-width: 2400px) { .agent { width: 240px; } } /* 5x */
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(61, 220, 151, 0.30)); }
  50%     { filter: drop-shadow(0 0 26px rgba(61, 220, 151, 0.55)); }
}

h1 {
  font-size: clamp(1.2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
h1 .prompt { color: var(--accent); margin-right: 0.35em; }

@keyframes blink { 50% { opacity: 0; } }
.tcursor {
  display: inline-block;
  width: 0.5em; height: 0.9em;
  background: var(--accent);
  vertical-align: top; /* row-top: never stretches the 25px row units */
  margin-top: 0.2em;   /* optical baseline nudge without line-box impact */
  margin-left: 0.15em;
  animation: blink 1.1s steps(1) infinite;
}

.tagline {
  margin-top: 1.1rem;
  color: var(--fg);
  font-size: clamp(0.85rem, 2.4vw, 0.95rem);
}
.seg { white-space: nowrap; } /* keep "text →" together; wrap after the arrow */

.typed {
  margin-top: 0.85rem;
  color: var(--accent);
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  letter-spacing: 0.03em;
  text-align: left;   /* typing anchor is fixed — no left/right wobble */
  height: 75px;        /* exactly 3 rows of 25px — no hairline overflow */
  overflow: hidden;
  scroll-behavior: smooth; /* old lines glide up instead of jumping */
}
.typed .line {
  display: block;
  min-height: 25px;    /* 25px row-units: wrapped rows grow in exact multiples */
  overflow: hidden;
  line-height: 25px;
}

.contact {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: center;
  font-size: 0.95rem;
}
.contact svg {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 0.5em;
}

.legal {
  margin-top: 2.2rem;
  font-size: 0.72rem;
}
.legal span { color: var(--faint); margin: 0 0.5em; }

/* legal text pages */
h2 {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.8rem 0 0.5rem;
}
p, li { font-size: 0.9rem; line-height: 1.7; }
ul { padding-left: 1.2rem; text-align: left; }
.back { display: inline-block; margin: 3rem 0 1.5em; font-size: 0.8rem; }

/* the language switcher — terminal-style keys, top right */
.lang {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  z-index: 5;
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.35rem 0.6rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border); /* override link underline */
  background: var(--bg);
}
.lang a + a { border-left: 0; }
.lang a:hover, .lang a:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.lang a.on {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(61, 220, 151, 0.25);
}
/* the shared edge: restore the active key's missing left border and
   overlap the neighbour's border so the seam stays 1px */
.lang a + a.on {
  border-left: 1px solid;
  margin-left: -1px;
  position: relative;
  z-index: 1;
}
/* hover/focus must close the box exactly like .on does — but WITHOUT
   margin-left (a -1px pull shifts the whole right-anchored row on
   hover). An inset shadow paints the missing left edge in place. */
.lang a + a:hover, .lang a + a:focus-visible {
  box-shadow: inset 1px 0 0 currentColor;
}

@media (max-width: 480px) {
  .agent { width: 96px; } /* 2x of 48px — stays integer */
  .contact { flex-direction: column; align-items: center; gap: 0.9rem; }
  .contact svg { display: none; } /* mobile: the URLs say enough */
  .lang { font-size: 0.6rem; }
  .lang a { min-width: 2.1rem; padding: 0.3rem 0.35rem; }
}

/* ---- "and more" spotlight (22 Oct) ---- */
.kw { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kw:hover, .kw:focus { opacity: 0.75; outline: none; }