/* reefhub splash – very dark anthracite #121316, white logo, pink #E6007E accent, Inter (self-hosted). No effects on the logo. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
:root { --bg: #121316; --fg: #ffffff; --muted: rgba(255,255,255,.62); --pink: #e6007e; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px 24px; }
.logo { display: block; width: clamp(104px, 11vw, 148px); height: auto; }

.term { width: min(25rem, 100%); margin-top: 52px; }
.screen {
  font: 400 15px/1.95 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: rgba(255,255,255,.82); letter-spacing: 0; white-space: nowrap;
}
.screen .l { display: block; }
.screen .pr { color: var(--muted); }
.screen .tag { color: var(--muted); }
.screen .tag b { font-weight: 400; color: var(--pink); }
.screen .last { color: var(--fg); font-weight: 600; }
.screen .last .tag { font-weight: 400; }

/* the same hard-switched cursor as on the fynix site, in reefhub pink */
.cur { display: inline-block; width: .6em; height: 1.15em; margin-left: .15em; vertical-align: -.2em; background: var(--pink); animation: cursor-blink 1.4s steps(1, end) infinite; }
.l > .cur { margin-left: .1em; }
.screen > .cur { display: none; }
.screen .l .cur { display: inline-block; }
@keyframes cursor-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* with JS the lines are revealed one after another; without JS everything is visible */
html.js .screen .l { visibility: hidden; }          /* keep the space, so the logo does not jump */
html.js .screen .l.on { visibility: visible; }
html.js .cur { display: none; }
html.js .l > .cur.on { display: inline-block; }

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

footer { padding: 20px 24px 28px; text-align: center; font-size: 13px; line-height: 1.7; color: var(--muted); }
footer p { margin: 0; }
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
footer a:hover, footer a:focus-visible { color: var(--fg); border-color: var(--pink); }

@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }

/* legal page */
main.doc { display: block; flex: 1 0 auto; max-width: 640px; margin: 0 auto; padding: 64px 24px 24px; width: 100%; }
.doc h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 28px 0 24px; }
.doc h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 32px 0 8px; }
.doc p { margin: 0 0 10px; }
.doc strong { font-weight: 600; }
.doc a { color: var(--fg); border-bottom: 1px solid rgba(255,255,255,.3); text-decoration: none; }
.doc a.home { display: inline-block; border-bottom: 0; }
.doc .home img { width: 44px; height: auto; display: block; }