/* Interaction accents inherit the brand palette; layout belongs to style/brand.css. */
#viz-tooltip {
  position: fixed;
  inset: auto;
  z-index: 1500;
  margin: 0;
  padding: 9px 12px;
  width: max-content;
  max-width: min(320px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 11px;
  background: var(--surface-raised, var(--surface));
  color: var(--text);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--text) 12%, transparent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  user-select: none;
}
#viz-tooltip[hidden] { display: none !important; }
#viz-tooltip::backdrop { display: none; }
.chart-svg [data-chart-month], .chart-svg [data-order] { cursor: pointer; }
.chart-svg [data-chart-month] > :is(rect, circle, path),
.chart-svg [data-order] > :is(rect, circle, path) {
  transition: stroke 160ms ease, stroke-opacity 160ms ease, opacity 160ms ease;
}
.chart-svg .viz-active > rect,
.chart-svg .viz-active > circle:not([fill="transparent"]) {
  stroke: var(--accent);
  stroke-opacity: 1;
}
.chart-svg .viz-active:focus-visible { outline: 1px solid var(--focus, var(--accent)); outline-offset: 3px; }
.viz-crosshair {
  stroke: var(--accent);
  stroke-width: .8;
  stroke-dasharray: 3 5;
  opacity: .5;
  pointer-events: none;
}
:is(.hero-card,.activity-card,.target-card,.trend-card,.profit-card,.product-card,.offer-card,.auth-card)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(310px circle at var(--mx, 50%) var(--my, 24%), color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 0%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, box-shadow 220ms ease;
}
:is(.hero-card,.activity-card,.target-card,.trend-card,.profit-card,.product-card,.offer-card,.auth-card):focus-within::after {
  opacity: .65;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus, var(--accent)) 32%, transparent);
}
:is(.btn,.round-action,.icon-button):focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus, var(--accent)) 50%, transparent), 0 4px 17px color-mix(in srgb, var(--accent) 12%, transparent);
}
:is(.round-action,.btn[data-product],.btn[type="submit"]) > svg {
  transition: translate 170ms ease;
}
:is(.text-button,.product-info h2 button,a:not(.brand):not(.btn)):focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
#ambient-scene { pointer-events: none; }
#ambient-scene .ambient-top { width: 1080px; left: calc(38% - 540px); top: -550px; }
#ambient-scene .ambient-side { width: 1000px; right: -540px; top: 9%; }
#ambient-scene .ambient-bottom { width: 1080px; left: -420px; bottom: -480px; }
.auth-active #ambient-scene .ambient-top { width: 1140px; top: -540px; left: calc(41% - 570px); }
.auth-active #ambient-scene .ambient-side { width: 1080px; right: -540px; }
.auth-active #ambient-scene .ambient-bottom { width: 1140px; bottom: -480px; left: -430px; }
#ambient-scene .ambient-shape[data-depth] {
  --parallax-x: 0px;
  --parallax-y: 0px;
  --parallax-rotation: 0deg;
  --parallax-scale: 1;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) rotate(var(--parallax-rotation)) scale(var(--parallax-scale));
}
#ambient-scene .ambient-layer {
  --ambient-drift-x: 70px;
  --ambient-drift-y: 48px;
  --ambient-drift-rotation: 5deg;
  --ambient-scale-from: .92;
  --ambient-scale-to: 1.16;
  transform: rotate(var(--ambient-rotation, 0deg));
}
#ambient-scene .ambient-top .ambient-layer { --ambient-cycle: 18s; }
#ambient-scene .ambient-side .ambient-layer { --ambient-cycle: 21s; }
#ambient-scene .ambient-bottom .ambient-layer { --ambient-cycle: 19s; }
:is(.hero-card,.activity-card,.target-card,.trend-card,.profit-card,.product-card,.offer-card,.auth-card).is-hovered::after {
    opacity: .8;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  /* Hover feedback does not depend on an animation frame or decorative motion. */
  :is(.hero-card,.activity-card,.target-card,.trend-card,.profit-card,.product-card,.offer-card,.auth-card):hover::after {
    opacity: .8;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  :is(.btn,.round-action,.icon-button):not(:disabled):hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 17px color-mix(in srgb, var(--accent) 10%, transparent);
  }
  :is(.round-action,.btn[data-product],.btn[type="submit"]):not(:disabled):hover > svg { translate: 2px -1px; }
  :is(.text-button,.product-info h2 button,a:not(.brand):not(.btn)):hover {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-interaction-motion="on"] #ambient-scene .ambient-layer {
    animation: agl-ambient-drift var(--ambient-cycle, 19s) ease-in-out var(--ambient-delay, 0s) infinite alternate;
  }
}
@keyframes agl-ambient-drift {
  from { transform: translate3d(calc(-1 * var(--ambient-drift-x)), var(--ambient-drift-y), 0) rotate(calc(var(--ambient-rotation, 0deg) - var(--ambient-drift-rotation))) scale(var(--ambient-scale-from)); }
  to { transform: translate3d(var(--ambient-drift-x), calc(-1 * var(--ambient-drift-y)), 0) rotate(calc(var(--ambient-rotation, 0deg) + var(--ambient-drift-rotation))) scale(var(--ambient-scale-to)); }
}
html[data-interactions-paused="true"] #ambient-scene .ambient-layer { animation-play-state: paused; }
@media (hover: none), (pointer: coarse) {
  #ambient-scene .ambient-layer { --ambient-drift-x: 28px; --ambient-drift-y: 20px; --ambient-drift-rotation: 2deg; --ambient-scale-from: .96; --ambient-scale-to: 1.08; }
}
html[data-ambient-pointer="mouse"] #ambient-scene .ambient-layer,
html[data-ambient-pointer="pen"] #ambient-scene .ambient-layer {
  --ambient-drift-x: 70px;
  --ambient-drift-y: 48px;
  --ambient-drift-rotation: 5deg;
  --ambient-scale-from: .92;
  --ambient-scale-to: 1.16;
}
html[data-ambient-pointer="touch"] #ambient-scene .ambient-layer {
  --ambient-drift-x: 28px;
  --ambient-drift-y: 20px;
  --ambient-drift-rotation: 2deg;
  --ambient-scale-from: .96;
  --ambient-scale-to: 1.08;
}
@media (max-width: 760px) {
  #ambient-scene .ambient-top, .auth-active #ambient-scene .ambient-top { width: 760px; left: -210px; top: -430px; }
  #ambient-scene .ambient-side, .auth-active #ambient-scene .ambient-side { width: 740px; right: -500px; top: 25%; }
  #ambient-scene .ambient-bottom, .auth-active #ambient-scene .ambient-bottom { width: 820px; left: -390px; bottom: -450px; }
}
html[data-interaction-motion="off"] #ambient-scene .ambient-shape[data-depth] { transform: none; }
html[data-interaction-motion="off"] #ambient-scene[data-ambient-active] { --ambient-pointer-x: 50%; --ambient-pointer-y: 50%; }
@media (prefers-reduced-motion: reduce) {
  #ambient-scene .ambient-shape[data-depth] { transform: none; }
  #ambient-scene .ambient-layer { animation: none; }
  :is(.round-action,.btn[data-product],.btn[type="submit"]) > svg { translate: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #viz-tooltip, .viz-active, .chart-svg :is(rect,circle,path),
  :is(.hero-card,.activity-card,.target-card,.trend-card,.profit-card,.product-card,.offer-card,.auth-card)::after {
    transition: none;
  }
}
@media (forced-colors: active) {
  #viz-tooltip { border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .viz-crosshair { stroke: Highlight; }
  :is(.hero-card,.activity-card,.target-card,.trend-card,.profit-card,.product-card,.offer-card,.auth-card)::after { display: none; }
}