#tlVeil{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center; padding:16px;
    background: radial-gradient(120% 90% at 50% 45%, rgba(10,12,18,.30), rgba(6,5,3,.82));
    opacity:0; visibility:hidden;
    transition: opacity .32s ease, visibility .32s;
  }
  #tlVeil.show{ opacity:1; visibility:visible; }
  #tlVeil *{ box-sizing:border-box; }
  #tlVeil img{ max-width:none; }

  .tl-popup{
    --bg:#0e0c08; --panel:#1c160e; --panel-2:#241c11; --line:#3c3120;
    --line-soft:#2a2216; --ink:#f3ecdd; --ink-dim:#b7ab93; --ink-faint:#83765f;
    --focus:#ffd166;
    width:min(1240px, 96vw); height:min(820px, 94vh);
    background: linear-gradient(180deg, #1a140c, #140f09);
    border:1px solid var(--line); border-radius:26px;
    box-shadow: 0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
    display:flex; flex-direction:column; overflow:hidden; position:relative;
    color:var(--ink); font-family:'Coda', ui-sans-serif, system-ui, sans-serif;
    transform: scale(.97); opacity:0;
    transition: opacity .28s ease, transform .28s ease;
  }
  #tlVeil.show .tl-popup{ opacity:1; transform:scale(1); }

  .tl-header{ flex:none; display:flex; align-items:flex-start; gap:18px; padding:22px 26px 16px; border-bottom:1px solid var(--line-soft); }
  .tl-header .tl-titles{ flex:1; min-width:0; }
  .tl-eyebrow{ font-family:'Space Mono', ui-monospace, monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; margin:0 0 8px; }
  .tl-eyebrow .tl-dot{ width:6px; height:6px; border-radius:50%; background:#e4572e; box-shadow:0 0 10px #e4572e; flex:none; }
  .tl-popup h1{ font-family:'Bitcount Grid Single', ui-monospace, monospace; font-weight:700; font-size:clamp(19px,2.4vw,27px); line-height:1.2; margin:0; color:var(--ink); }
  .tl-controls{ display:flex; align-items:center; gap:8px; flex:none; margin-top:2px; }
  .tl-popup button.tl-ctl{
    font-family:'Bitcount Grid Single', ui-monospace, monospace; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
    background:var(--panel); border:1px solid var(--line); color:var(--ink); padding:9px 14px; border-radius:100px;
    cursor:pointer; display:inline-flex; align-items:center; gap:7px;
    transition:background .15s, border-color .15s, transform .1s; white-space:nowrap;
  }
  .tl-popup button.tl-ctl:hover{ background:var(--panel-2); border-color:#584a30; }
  .tl-popup button.tl-ctl:active{ transform:scale(.96); }
  .tl-popup button.tl-ctl:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
  .tl-popup button.tl-ctl svg{ width:13px; height:13px; flex:none; }
  .tl-btn-close{ width:34px; height:34px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; }
  .tl-progress-chip{ font-family:'Space Mono', ui-monospace, monospace; font-size:11px; color:var(--ink-faint); letter-spacing:.04em; font-variant-numeric:tabular-nums; align-self:center; margin-right:4px; white-space:nowrap; }

  /* Session 25: horizontal, and it never scrolls. The stage is laid out at
     its natural size and then scaled down (never up) to fit the body, so
     the whole journey is always in view at once — a popup, not a page. */
  .tl-body{ flex:1; min-height:0; overflow:hidden; position:relative; }
  .tl-stage{ position:absolute; top:0; left:0; transform-origin:0 0; }
  .tl-stage svg{ position:absolute; top:0; left:0; display:block; pointer-events:none; }
  .tl-blob-hit{ pointer-events:all; cursor:pointer; }
  .tl-blob-hit:focus-visible .tl-focus-ring{ opacity:1; }
  .tl-focus-ring{ opacity:0; transition:opacity .15s; }

  .tl-card{ position:absolute; width:var(--card-w,230px); opacity:.28; transition:opacity .5s ease; pointer-events:all; cursor:pointer; }
  .tl-card.tl-lit{ opacity:1; }
  .tl-card.tl-current .tl-card-title{ color:#fff; }
  .tl-card-chip{ font-family:'Space Mono', ui-monospace, monospace; font-size:14.5px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 5px; }
  .tl-card-title{ font-family:'Bitcount Grid Single', ui-monospace, monospace; font-weight:700; font-size:14.5px; line-height:1.3; margin:0 0 5px; color:var(--ink); }
  .tl-card-body{ font-size:12.5px; line-height:1.5; color:var(--ink-dim); margin:0; }

  /* narrow screens: no room for eight cards, so one caption under the
     ribbon shows whichever stop the ball is on (or you tapped) */
  .tl-caption{ position:absolute; text-align:center; }
  .tl-caption .tl-card-title{ font-size:15px; }
  .tl-caption .tl-card-body{ font-size:13px; }

  @media (max-width:620px){
    .tl-popup{ border-radius:18px; }
    .tl-header{ flex-wrap:wrap; padding:16px 16px 12px; }
    .tl-popup h1{ font-size:17px; }
    .tl-controls{ width:100%; justify-content:flex-start; margin-top:6px; }
  }
  @media (prefers-reduced-motion: reduce){
    .tl-card{ transition:none; }
  }