:root { color-scheme: dark; --page: #17171f; --ink: #d7d7e0; --dim: #8b90a0; --accent: #9d90ff; --line: #34344a; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--ink); }
body { font: 14px/1.4 "IBM Plex Sans", "Inter", system-ui, sans-serif; }

/* The stage: a column of fixed width, centred. The page script places the
   chrome and the terminal in it, the terminal at whole cells (resize() in
   src/main.ts), so nothing but cells shows inside its box. The page around
   it is the colour of the tour's page (internal/tour), so before the reveal
   the terminal's edges do not show. */
#stage { position: fixed; top: 0; bottom: 10px; left: 50%; transform: translateX(-50%); width: min(1280px, calc(100vw - 16px)); }
#chrome, #term { position: absolute; left: 0; }
#chrome {
  top: 0; height: 30px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  font: 12px/1 system-ui, sans-serif; color: var(--dim); white-space: nowrap; overflow: hidden;
  border-radius: 12px 12px 0 0; opacity: 0; transition: opacity .6s ease, background .6s ease;
}
#chrome i { width: 11px; height: 11px; border-radius: 50%; flex: none; background: #f07a7a; }
#chrome i:nth-child(2) { background: #e8c872; }
#chrome i:nth-child(3) { background: #7fd4a0; }
#chrome span { margin-left: 10px; }
#term { top: 30px; transition: box-shadow .6s ease; }

/* The reveal: the window the tour's frame grew into is this one. */
#stage.revealed #chrome { opacity: 1; background: #262633; box-shadow: 0 0 0 1px var(--line); }
#stage.revealed #term { box-shadow: 0 0 0 1px var(--line), 0 24px 80px rgba(0, 0, 0, .55); }

#status { position: fixed; inset: auto 0 45% 0; text-align: center; color: var(--dim); margin: 0; }
#status[hidden] { display: none; }