@font-face { font-family: 'Grotesk'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('console/fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('console/fonts/jetbrains-mono-400.woff2') format('woff2'); }
:root {
  --t-bg: #F3F5F8; --t-ink: #0F1B2D; --t-mute: #5E6B80; --t-rule: rgba(15,27,45,0.15);
  --t-navy: #0B1F3A; --t-card: #FFFFFF; --t-accent: #1F4FD1;
  --t-ok: #1E7A4C; --t-warn: #9A5B00; --t-fail: #B42318;
}
.tour { margin: 0; background: var(--t-bg); color: var(--t-ink);
  font-family: 'Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; }
.tour-sheet { max-width: 880px; margin: 0 auto; padding: 48px 16px 64px; }
.tour-eyebrow { font-size: 12px; font-weight: 600; color: var(--t-mute); margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 0.06em; }
.tour-eyebrow a { color: inherit; }
.tour h1 { font-size: 34px; line-height: 1.15; font-weight: 650; letter-spacing: -0.03em;
  margin: 0 0 16px; }
.tour-lede { font-size: 17px; margin: 0 0 16px; max-width: 68ch; }
.tour-sim { border-left: 3px solid var(--t-warn); background: var(--t-card);
  padding: 12px 16px; margin: 0 0 32px; max-width: 68ch; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-rule); }
.step { border-bottom: 1px solid var(--t-rule); padding: 16px 0; }
.step-link { display: flex; gap: 16px; align-items: baseline; color: var(--t-ink);
  text-decoration: none; }
.step-link:hover .step-t, .step-link:focus-visible .step-t { color: var(--t-accent);
  text-decoration: underline; }
.step-n { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 13px;
  color: var(--t-mute); flex: none; width: 2.2em; }
.step-t { font-size: 19px; font-weight: 620; }
.step-p { margin: 4px 0 0 calc(2.2em + 16px); color: var(--t-ink); max-width: 64ch; }
.tour-foot { color: var(--t-mute); margin-top: 32px; max-width: 68ch; }
.tour a { color: var(--t-accent); }
.tour-cmd code, .tour code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; }
.verify { background: var(--t-card); border: 1px solid var(--t-rule); padding: 16px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12.5px;
  line-height: 1.5; overflow-x: auto; white-space: pre; letter-spacing: 0; }
.v-ok { color: var(--t-ok); } .v-warn { color: var(--t-warn); }
.v-fail { color: var(--t-fail); } .v-verdict { font-weight: 600; color: var(--t-ok); }
/* The tour bar stays in view: one row at every width, so a step link that lands deep
   in a page still shows the step and the way on. Anchors stop below it. */
:root { --tour-h: 44px; }
[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--tour-h) + 16px); }
.tour-bar { position: sticky; top: 0; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 16px;
  min-height: var(--tour-h); box-sizing: border-box; padding: 6px 16px;
  background: var(--t-navy); color: #FFFFFF; white-space: nowrap;
  font-family: 'Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px;
  line-height: 1.4; letter-spacing: -0.01em; }
.tour-bar a { color: #FFFFFF; }
.tour-bar a:focus-visible { outline: 2px solid #9DBBF5; outline-offset: 2px; }
.tour-home { font-weight: 600; text-decoration: none; flex: none; }
.tour-here { color: #B8C4D6; display: flex; gap: 8px; min-width: 0; flex: 0 1 auto; }
.tour-n { flex: none; }
.tour-t { color: #FFFFFF; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tour-chip { text-decoration: underline; text-underline-offset: 2px; flex: none; }
.tour-note { color: #B8C4D6; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  flex: 0 1 auto; }
.tour-prev { margin-left: auto; text-decoration: none; flex: none; }
.tour-next { font-weight: 600; text-decoration: none; flex: none;
  border: 1px solid rgba(255,255,255,0.5); padding: 4px 10px; }
.tour-note + .tour-next { margin-left: auto; }
.tn-short { display: none; }
.tour-skip { position: absolute; left: 16px; top: 8px; z-index: 10; padding: 8px 12px;
  background: var(--t-card); color: var(--t-accent); transform: translateY(-200%); }
.tour-skip:focus-visible { transform: none; }
.tour-sheet:focus { outline: none; }
.verify:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.tour-try { margin: 16px 0 0; max-width: 68ch; }
/* A link the demo cannot follow is not a link: text, marked as out of reach, in the
   muted ink (not faded, which would fail contrast). A button is drawn as the demo's
   "Read-only demo" note is. */
.demo-off { cursor: not-allowed; }
.hit.demo-off.link, .tabs .hit.demo-off { color: #5E6B80; text-decoration: none; }
.hit.demo-off.cta { color: #5E6B80; background: transparent;
  border: 1px dashed rgba(15,27,45,0.3); }
.demo-ro { display: inline-block; margin: 8px 0; padding: 6px 12px; font-size: 13px;
  color: #5E6B80; border: 1px dashed rgba(15,27,45,0.3); background: #FFFFFF;
  cursor: not-allowed; }
/* A digest is one unbreakable word; let it break rather than widen the page. */
.sheet p, .sheet dd, .sheet li { overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .tour-sheet { padding-top: 32px; }
  .tour h1 { font-size: 27px; }
  .step-p { margin-left: 0; }
}
@media (max-width: 1199px) { .tour-note { display: none; } }
@media (max-width: 719px) {
  .tour-bar { gap: 12px; padding: 6px 12px; }
  .tn-long { display: none; }
  .tn-short { display: inline; }
}