.tr-veil { position: fixed; inset: 0; z-index: 9990; background: rgba(4,6,14,.72); transition: clip-path .25s ease; }
  .tr-ring { position: fixed; z-index: 9991; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 2px #F2B53A, 0 0 0 6px rgba(242,181,58,.28), 0 0 24px rgba(242,181,58,.45); transition: all .25s ease; }
  .tr-card { position: fixed; z-index: 9992; width: min(340px, calc(100vw - 32px)); background: linear-gradient(#1D2238, #151A2C); color: #fff; border: 1px solid rgba(242,181,58,.45); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6); padding: 16px 16px 14px; font: 14px/1.55 var(--body, system-ui, sans-serif); transition: top .25s ease, left .25s ease; }
  .tr-card h4 { margin: 0 0 6px; font: 800 16px/1.3 var(--body, system-ui, sans-serif); color: #FFD27A; padding-right: 44px; }
  .tr-card p { margin: 0; color: #D6D4EE; }
  .tr-card .tr-n { position: absolute; top: 16px; right: 16px; font: 700 11.5px var(--body, system-ui, sans-serif); color: #8E8CBE; font-variant-numeric: tabular-nums; }
  .tr-card .tr-hint { margin-top: 10px; font-size: 12px; color: #F2B53A; }
  .tr-bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
  .tr-bar button { all: unset; cursor: pointer; font: 800 12.5px var(--body, system-ui, sans-serif); padding: 8px 14px; border-radius: 999px; }
  .tr-skip { color: #A9A7DA; margin-right: auto; padding-left: 2px !important; } .tr-skip:hover { color: #fff; }
  .tr-prev { color: #fff; border: 1px solid rgba(255,255,255,.2); } .tr-prev:hover { border-color: #fff; } .tr-prev[hidden] { display: none; }
  .tr-next { background: #F2B53A; color: #1B1340; } .tr-next:hover { background: #FFD27A; }
  .tr-bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .tr-dots { display: flex; gap: 4px; margin-top: 12px; } .tr-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); } .tr-dots i.on { background: #F2B53A; width: 16px; border-radius: 3px; }
  .tr-help { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px 10px 12px; border: 0; border-radius: 999px; background: #F2B53A; color: #1B1340; font: 800 13px var(--body, system-ui, sans-serif); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
  .tr-help b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1B1340; color: #F2B53A; font-size: 12px; }
  .tr-help:hover { background: #FFD27A; } .tr-help:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  @media (max-width: 640px) { .tr-card { left: 16px !important; right: 16px; width: auto; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
  @media (prefers-reduced-motion: reduce) { .tr-veil, .tr-ring, .tr-card { transition: none; } }