.tour-root {
  position:fixed;
  inset:0;
  z-index:100000;
  isolation:isolate;
  touch-action:pan-y;
  font-family:inherit;
  color:#e5e5eb;
}
.tour-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.tour-ring {
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  border:1px solid rgba(205,187,136,.7);
  border-radius:16px;
  box-shadow:0 0 0 4px rgba(205,187,136,.06),0 0 30px rgba(205,187,136,.12);
  box-sizing:border-box;
}
.tour-card {
  position:absolute;
  left:0;
  top:0;
  box-sizing:border-box;
  padding:22px;
  border:1px solid #ffffff1f;
  border-radius:20px;
  background:linear-gradient(145deg,#25262c,#17181c);
  box-shadow:0 24px 80px #0009, inset 0 1px 0 #ffffff0d;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  max-height:calc(100dvh - 24px);
  overflow:auto;
  overscroll-behavior:contain;
}
.tour-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.tour-eyebrow {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.4px;
  color:#92929d;
}
.tour-card button {
  font:inherit;
  cursor:pointer;
}
.tour-close {
  border:0;
  background:none;
  color:#a5a6ad;
  font-size:24px!important;
  padding:0 4px;
}
.tour-progress {
  height:3px;
  background:#ffffff12;
  border-radius:4px;
  margin:12px 0 14px;
  overflow:hidden;
}
.tour-progress span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#b8ab8b,#e2d6b5);
  transition:width .4s ease;
  border-radius:4px;
}
.tour-count {
  font-size:10px;
  letter-spacing:1px;
  color:#cdbb88;
}
.tour-card h2 {
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.4px;
  margin:9px 0 12px;
  color:#e5e5eb;
}
.tour-card p {
  font-size:14px;
  line-height:1.65;
  color:#b8b8c3;
  margin:0;
  min-height:94px;
}
.tour-card #tour-description {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  min-height:0;
}
.tour-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
  gap:8px;
}
.tour-actions>div {
  display:flex;
  gap:8px;
}
.tour-skip,.tour-back {
  padding:9px 6px;
  border:0;
  background:none;
  color:#a5a6ad;
  font-size:12px!important;
}
.tour-back:disabled {
  opacity:.25;
  cursor:default;
}
.tour-next {
  background:#d0d0d1;
  color:#1a1b1f;
  border:1px solid #e2e2e3;
  border-radius:10px;
  padding:10px 15px;
  font-size:13px!important;
  font-weight:700!important;
  box-shadow:0 3px 12px #0003;
}
.tour-next:hover {
  background:#e2e2e3;
}
.tour-root button:focus-visible {
  outline:2px solid #cdbb88;
  outline-offset:4px;
}
.tour-cursor {
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  font-size:32px;
  color:white;
  text-shadow:0 2px 5px #000;
  transition:transform .14s linear,opacity .2s;
  z-index:1;
}
@media(max-width:700px) {
  .tour-card {
    padding:17px;
    border-radius:16px;
  }
  .tour-card h2 {
    font-size:19px;
  }
  .tour-card p {
    font-size:13px;
    min-height:86px;
  }
  .tour-actions {
    margin-top:12px;
  }
  .tour-eyebrow {
    font-size:8px;
    letter-spacing:1px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .tour-card,.tour-progress span,.tour-cursor {
    transition:none;
  }
  .tour-cursor {
    display:none;
  }
}

.account-tutorial { border-bottom: 0; }
.account-tutorial #onboarding-start { gap: 6px; }

/* Keep the tutorial inside the visible viewport, including iPhone safe areas. */
.tour-root {
  inset: auto;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding: var(--tour-safe-top, max(12px, env(safe-area-inset-top))) var(--tour-safe-right, max(12px, env(safe-area-inset-right))) var(--tour-safe-bottom, max(12px, env(safe-area-inset-bottom))) var(--tour-safe-left, max(12px, env(safe-area-inset-left)));
}
.tour-cursor {
  width: 24px;
  height: 32px;
  font-size: inherit;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px #0008);
}
.tour-cursor svg { display: block; width: 100%; height: 100%; }
.tour-scroll-space { pointer-events: none; }
.tour-mobile .tour-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 16px;
  overflow: hidden;
  transition: none;
}
.tour-mobile .tour-topline,
.tour-mobile .tour-progress,
.tour-mobile .tour-count,
.tour-mobile .tour-card h2,
.tour-mobile .tour-actions { flex-shrink: 0; }
.tour-mobile .tour-card h2 {
  min-height: var(--tour-title-height, 0);
  font-size: 17px;
  line-height: 1.25;
  margin: 7px 0 8px;
}
.tour-mobile .tour-card .tour-visual-text {
  height: var(--tour-text-height, auto);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tour-mobile .tour-progress { margin: 7px 0 8px; }
.tour-mobile .tour-eyebrow { font-size: 8px; letter-spacing: 1px; }
.tour-mobile .tour-close { min-width: 32px; min-height: 32px; }
.tour-mobile .tour-actions { margin-top: 10px; }
.tour-mobile .tour-actions button { min-height: 44px; }
.tour-mobile .tour-actions > div { gap: 5px; }
.tour-mobile .tour-next { padding: 10px 12px; }
.tour-constrained-target {
  max-height: var(--tour-target-height);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.tour-constrained-target > * { flex-shrink: 0; }
#main-panel.tour-mobile-charts #price-chart {
  height: calc(var(--price-chart-height) * var(--tour-price-factor, 1)) !important;
  min-height: calc(var(--price-chart-height) * var(--tour-price-factor, 1));
  max-height: calc(var(--price-chart-height) * var(--tour-price-factor, 1));
}
#main-panel.tour-mobile-charts #rsi-chart {
  height: calc(var(--rsi-chart-height) * var(--tour-rsi-factor, 1)) !important;
  min-height: calc(var(--rsi-chart-height) * var(--tour-rsi-factor, 1));
  max-height: calc(var(--rsi-chart-height) * var(--tour-rsi-factor, 1));
}
#main-panel.tour-mobile-charts .card-price { padding-bottom: 38px; }
#main-panel.tour-mobile-charts .card-price .card-header { margin-bottom: 5px; }
#main-panel.tour-mobile-charts .drawing-button { min-width: 28px; width: 28px; min-height: 28px; height: 28px; }
#main-panel.tour-mobile-charts .card-price > .chart-resize-handle { min-width: 60px; height: 30px; bottom: 3px; right: 6px; }
#main-panel.tour-mobile-charts .chart-resize-label { font-size: 9px; }
#main-panel.tour-mobile-charts .drawing-status { font-size: 9px; bottom: 8px; }
@media (max-height: 450px) {
  .tour-mobile .tour-card { padding: 10px 14px; }
  .tour-mobile .tour-topline { min-height: 24px; }
  .tour-mobile .tour-close { min-height: 24px; }
  .tour-mobile .tour-progress { margin: 4px 0 5px; }
  .tour-mobile .tour-card h2 { margin: 4px 0 5px; font-size: 16px; }
  .tour-mobile .tour-actions { margin-top: 5px; }
  .tour-mobile .tour-actions button { min-height: 36px; }
}
#main-panel.tour-mobile-charts .card-price,
#main-panel.tour-mobile-charts .card-rsi { min-height: 0; }
.tour-mobile .tour-card button { line-height: 1.2; }
.tour-mobile .tour-close { height: 28px; min-height: 28px; line-height: 1; font-size: 22px !important; }
@media (max-height: 450px) {
  #main-panel.tour-mobile-charts .card-price { padding-top: 4px; padding-bottom: 30px; }
  #main-panel.tour-mobile-charts .drawing-toolbar { padding: 2px; }
  #main-panel.tour-mobile-charts .drawing-button { min-width: 24px; width: 24px; min-height: 24px; height: 24px; }
  #main-panel.tour-mobile-charts .card-price .card-header { margin-bottom: 3px; }
  #main-panel.tour-mobile-charts .card-price > .chart-resize-handle { height: 26px; }
}
.tour-constrained-target.reasons-section { height: var(--tour-target-height); }

/* In landscape, a side card leaves enough height for a readable chart. */
#tl-root.tour-landscape-page > .hero,
#tl-root.tour-landscape-page > #main-panel {
  align-self: flex-start;
  width: var(--tour-context-width) !important;
  max-width: var(--tour-context-width) !important;
}
#tl-root.tour-phone-page .mobile-row { min-width: 0; }
#tl-root.tour-phone-page .mobile-row .pair-input-wrapper { flex: 1 1 0; min-width: 0; width: auto; }
#tl-root.tour-phone-page .pair-input { min-width: 0; width: 0; }
#tl-root.tour-phone-page .mobile-row .select-wrapper { flex: 0 0 88px; min-width: 0; width: 88px; box-sizing: border-box; }
#tl-root.tour-landscape-page > #main-panel { grid-template-columns: minmax(0, 1fr) !important; }
#tl-root.tour-landscape-page .side-column { zoom: 1 !important; }
#tl-root.tour-landscape-page .charts-column { width: 100%; min-width: 0; }
#tl-root.tour-landscape-page .control-strip { flex-direction: column; width: 100%; box-sizing: border-box; }
#tl-root.tour-landscape-page .mobile-row { width: 100%; min-width: 0; }
#tl-root.tour-landscape-page .pair-input-wrapper { min-width: 0; }
#tl-root.tour-landscape-page .side-toggle { width: 100%; }
#tl-root.tour-landscape-page .mobile-row .select-wrapper { flex: 0 0 64px; width: 64px; min-width: 64px; }
#tl-root.tour-landscape-page .mobile-row .pair-input-wrapper { flex: 1 1 0; width: auto; min-width: 0; }
#tl-root.tour-landscape-page .pair-input { min-width: 0; width: 0; padding-inline: 9px 24px; font-size: 12px; }
#tl-root.tour-landscape-page .side-toggle .side-btn { min-width: 0; }

/* Phone animation surfaces use native-size tiles, with no enlarged raster edges. */
.tour-mobile-shade { display: none; position: absolute; inset: 0; pointer-events: none; }
.tour-mobile .tour-mobile-shade { display: block; }
.tour-mobile .tour-shade { display: none; }
.tour-shade-piece {
  position: absolute; left: 0; top: 0;
  background: rgba(9,9,12,.8); transform-origin: 0 0; will-change: transform;
}
.tour-shade-corner {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px;
  transform-origin: 0 0; will-change: transform;
}
.tour-corner-0 { background: radial-gradient(circle at 100% 100%,transparent 11.5px,rgba(9,9,12,.8) 12px); }
.tour-corner-1 { background: radial-gradient(circle at 0 100%,transparent 11.5px,rgba(9,9,12,.8) 12px); }
.tour-corner-2 { background: radial-gradient(circle at 100% 0,transparent 11.5px,rgba(9,9,12,.8) 12px); }
.tour-corner-3 { background: radial-gradient(circle at 0 0,transparent 11.5px,rgba(9,9,12,.8) 12px); }
.tour-mobile .tour-ring { border-radius: 12px; box-shadow: none; }
.tour-mobile .tour-card { contain: layout paint; will-change: transform; }
.tour-mobile .tour-cursor { transition: transform .08s linear, opacity .15s; }
.tour-pan-preview { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; contain: layout paint; }
.tour-pan-preview canvas {
  display: block; position: absolute; left: 0; top: 0;
  min-height: 0 !important; max-height: none !important; max-width: none !important;
  transform-origin: 0 0; will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .tour-mobile .tour-cursor { transition: none; } }