/* Journey demo chrome only (rail + behind-the-scenes), for pages that keep their own design system.
   Tokens are scoped to the chrome so they never override the host page's :root. */
#rail.rail,.bts,.bts-btn{--ink:#001B27;--red:#F54529;--amber:#F2A33A;--ok:#1F8A5B;--jb:"JetBrains Mono",ui-monospace,Menlo,monospace;--sg:"Space Grotesk",system-ui,sans-serif;box-sizing:border-box}
#rail.rail *,.bts *,.bts-btn *{box-sizing:border-box}
#rail.rail .wrap{max-width:1320px;margin:0 auto;padding:0 16px}
#rail.rail a{text-decoration:none}
#rail.rail .led,.bts .led,.bts-btn .led{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none}
.bts .led.on,.bts-btn .led.on{background:var(--red)}
.bts ol{margin:0}
.bts p{margin:0}
.bts-btn{cursor:pointer}
@media (prefers-reduced-motion:reduce){.bts-btn,.bts li{animation:none!important}}
/* journey rail (demo chrome) */
#rail.rail{background:var(--ink);color:#C3D0D7;font-family:var(--jb);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
#rail.rail .wrap{display:flex;align-items:center;gap:10px;min-height:42px;overflow-x:auto;scrollbar-width:none}
#rail.rail .wrap::-webkit-scrollbar{display:none}
#rail.rail .tag{color:var(--amber);white-space:nowrap;margin-right:6px}
#rail.rail a{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(140,190,215,.2);white-space:nowrap;color:#C3D0D7}
#rail.rail a:hover{border-color:rgba(140,190,215,.5);color:#fff}
#rail.rail a b{font-weight:500;color:#fff}
#rail.rail a .led{background:#2B4552;box-shadow:none}
#rail.rail a.done .led{background:var(--ok)}
#rail.rail a[aria-current="step"]{background:#fff;color:var(--ink);border-color:#fff}
#rail.rail a[aria-current="step"] b{color:var(--ink)}
#rail.rail a[aria-current="step"] .led{background:var(--red)}
#rail.rail .sep{color:#5E7985}
#rail.rail .rt{margin-left:auto;white-space:nowrap;color:#8FA6B1}
/* behind the scenes drawer (demo chrome) */
.bts-btn{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border:1px solid #000;border-radius:3px;
  background:var(--ink);color:#fff;font:500 12px/1 var(--jb);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 0 #000,0 14px 34px rgba(0,27,39,.28)}
.bts-btn .n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;background:var(--red);border-radius:2px;font-weight:700}
.bts-btn.bump{animation:bump .5s ease}
@keyframes bump{30%{transform:translateY(-5px)}}
.bts{position:fixed;right:18px;bottom:74px;z-index:81;width:min(430px,calc(100vw - 36px));max-height:min(70vh,640px);display:flex;flex-direction:column;
  background:#01141E;color:#DCE6EB;border:1px solid #000;border-radius:3px;box-shadow:0 24px 60px rgba(0,27,39,.4)}
.bts[hidden]{display:none}
.bts-h{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid rgba(140,190,215,.18);font:500 11px/1.3 var(--jb);letter-spacing:.08em;text-transform:uppercase;color:#C3D0D7}
.bts-h b{color:#fff;font-weight:500}
.bts-h button{margin-left:auto;background:none;border:1px solid rgba(140,190,215,.3);color:#C3D0D7;font:500 10px/1 var(--jb);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px}
.bts-h button:hover{color:#fff;border-color:#fff}
.bts-note{padding:10px 14px;font:400 13px/1.45 var(--sg);color:#AFC2CB;border-bottom:1px solid rgba(140,190,215,.12)}
.bts ol{list-style:none;overflow:auto;padding:6px 0}
.bts li{display:grid;grid-template-columns:52px 70px minmax(0,1fr);gap:8px;padding:9px 14px;border-bottom:1px solid rgba(140,190,215,.08);font:400 13.5px/1.4 var(--sg);color:#E6EEF2}
.bts li.new{animation:flashin 1.2s ease}
@keyframes flashin{0%{background:rgba(245,69,41,.28)}100%{background:transparent}}
.bts li time{font:400 11px/1.9 var(--jb);color:#8FA6B1}
.bts li .k{font:700 10px/1 var(--jb);letter-spacing:.06em;text-transform:uppercase;align-self:start;margin-top:3px;padding:4px 5px;border:1px solid currentColor;text-align:center}
.bts li .k.email{color:#7CC4F0}.bts li .k.alert{color:#FF8A73}.bts li .k.timer{color:var(--amber)}.bts li .k.data{color:#8FD6A8}.bts li .k.stop{color:#B8C6CD}
.bts li small{display:block;color:#AFC2CB;font-size:12.5px}
.bts .empty{padding:18px 14px;color:#8FA6B1;font-size:14px}
@media (max-width:560px){.bts-btn{right:12px;bottom:12px}.bts{right:12px;bottom:66px;width:calc(100vw - 24px)}}
.keys>*{flex:1 1 auto;justify-content:center}
html body .keys>*{flex:1 1 auto;justify-content:center}