/* The Skyline demo's start screen and the strip above the app, in QuorX's colours (the same start screen as the
   Black Hole Lab demo). */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.bhl-start, .sky-strip {
  --q-bg: #070908; --q-panel: #0d1210; --q-line: #273932; --q-text: #e7edea; --q-muted: #83948c;
  --q-green: #2fb36f; --q-ink: #04140b; --q-amber: #f0b429;
  font-family: "Inter", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
}
body.sky-idle { background: #070908; }
.sky-app[hidden] { display: none; }

.bhl-start { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(1200px 600px at 50% -10%, rgba(47, 179, 111, .10), transparent 60%), var(--q-bg); color: var(--q-text); }
.bhl-start[hidden] { display: none; }
.bhl-card { width: min(680px, 100%); display: grid; gap: 14px; }
.bhl-back { justify-self: start; color: var(--q-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.bhl-back:hover { color: var(--q-text); }
.bhl-kicker { margin: 6px 0 0; font: 600 12px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--q-green); }
.bhl-card h1 { margin: 0; font: 800 clamp(34px, 6vw, 52px)/1.05 "Inter", system-ui, sans-serif; letter-spacing: -.03em; color: #fff; }
.bhl-lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--q-text); }
.bhl-poster { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--q-line); display: block; }
.bhl-box { margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--q-line); border-left: 3px solid var(--q-green); background: var(--q-panel); display: grid; gap: 6px; }
.bhl-box p { margin: 0; }
.bhl-box-title { font-weight: 700; font-size: 15px; color: var(--q-green); }
.bhl-box-text { font-size: 14px; line-height: 1.55; color: var(--q-muted); }
.bhl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.bhl-btn { min-height: 46px; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--q-green); color: var(--q-ink); font: 700 16px/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.bhl-btn:hover { filter: brightness(1.08); }
.bhl-btn:focus-visible, .bhl-back:focus-visible, .sky-strip a:focus-visible { outline: 2px solid var(--q-green); outline-offset: 3px; }

/* Above the app: the way back to QuorX */
.sky-strip { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 16px; background: #070908; border-bottom: 1px solid var(--q-line); font-size: 13px; color: var(--q-muted); }
.sky-strip a { color: var(--q-text); font-weight: 600; text-decoration: none; }
.sky-strip a:hover { color: var(--q-green); }