.art {
  --bg-deep:#0a0a1a; --panel:#12122a; --panel-2:#191936; --border:#2a2a4e; --border-light:#3a3a5e;
  --text:#e8e8f0; --dim:#9090aa; --faint:#5b5b78;
  --green:#10b981; --green-2:#34d399; --amber:#f59e0b; --amber-2:#fbbf24; --purple:#8b5cf6; --purple-2:#a78bfa;
  --indigo:#6366f1; --indigo-2:#a5b4fc; --red:#f87171; --pink:#f9a8b4;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
/* Plan tiles (ported from the approved mockup, 2026-10-23). Everything scoped under .art; keyframes prefixed ta-. */
/* ——— shared art frame ——— */
  .art { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-bottom: 1px solid var(--border); container-type: inline-size; font-family: var(--font); isolation: isolate; }
  .art * { box-sizing: border-box; }
  .art .pill { display: inline-flex; align-items: center; gap: 1.2cqw; font-weight: 700; border-radius: 999px; white-space: nowrap; line-height: 1; }
  .art .dot { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; }
  .art .tfrow { position: absolute; left: 4cqw; right: 4cqw; display: flex; gap: 1.4cqw; }
  .art .tf { flex: 1; text-align: center; font-size: 2.3cqw; font-weight: 700; padding: 1.6cqw 0; border-radius: 1.6cqw; border: 1px solid var(--border); color: var(--faint); background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: center; gap: .8cqw; }
  .art .tf.on { color: #fff; border-color: transparent; }
  .art .lock { width: 2cqw; height: 2.4cqw; display: inline-block; }
  .art .mini { background: var(--panel); border: 1px solid var(--border); border-radius: 2.4cqw; padding: 2.4cqw; display: flex; flex-direction: column; gap: 1.2cqw; }
  .art .mini .hd { display: flex; align-items: baseline; gap: 1.2cqw; }
  .art .mini .star { color: var(--faint); font-size: 2.6cqw; }
  .art .mini .sym { font-weight: 800; font-size: 3.2cqw; color: var(--text); letter-spacing: -0.01em; }
  .art .mini .px { margin-left: auto; font-family: var(--mono); font-size: 2.3cqw; color: var(--dim); font-weight: 500; }
  .art .mini svg { width: 100%; height: 7cqw; display: block; overflow: visible; }
  .art .mini .badge { align-self: center; font-size: 2cqw; letter-spacing: .12em; font-weight: 800; padding: 1cqw 2.4cqw; border-radius: 1.2cqw; }
  .art .badge.long { background: rgba(16,185,129,.16); color: var(--green-2); }
  .art .badge.short { background: rgba(248,113,113,.16); color: var(--pink); }
  .art .dots { display: flex; gap: .9cqw; justify-content: center; }
  .art .dots i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #2c2c46; }
  .art .dots i.on { background: var(--green-2); box-shadow: 0 0 1.2cqw var(--green-2); }
  .art .spark path.l { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .art .spark path.a { opacity: .18; }

  /* ——— FREE: see it work ——— */
  .art.free { background: radial-gradient(120% 90% at 50% 110%, rgba(99,102,241,.22), transparent 60%), var(--bg-deep); }
  .art.free::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(165,180,252,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(165,180,252,.07) 1px, transparent 1px); background-size: 12.5% 20%; }
  .art.free .tfrow { top: 5cqw; }
  .art.free .tf.on { background: var(--indigo); box-shadow: 0 0 3cqw rgba(99,102,241,.5); }
  .art.free .grid { position: absolute; left: 4cqw; right: 4cqw; top: 17.5cqw; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; align-content: start; -webkit-mask-image: linear-gradient(#000 70%, transparent 97%); mask-image: linear-gradient(#000 70%, transparent 97%); }
  .art.free .grid .mini { gap: 1cqw; padding: 2cqw; }
  .art.free .grid .mini svg { height: 5.6cqw; }
  .art.free .mini .pin { font-size: 1.6cqw; color: var(--indigo-2); font-weight: 700; letter-spacing: .08em; }
  .art.free .up { border: 1px dashed rgba(165,180,252,.5); border-radius: 2.4cqw; background: rgba(99,102,241,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; color: var(--indigo-2); font-size: 2.2cqw; font-weight: 700; min-height: 19cqw; }
  .art.free .up svg { width: 4cqw; height: 4.8cqw; }
  .art.free .up span { font-size: 1.7cqw; color: var(--faint); font-weight: 500; }
  .art.free .delay { position: absolute; left: 4cqw; bottom: 3.4cqw; z-index: 2; font-size: 2.3cqw; padding: 1.4cqw 2.6cqw; background: rgba(251,191,36,.12); color: var(--amber-2); border: 1px solid rgba(251,191,36,.3); }
  .art.free .delay svg { width: 2.4cqw; height: 2.4cqw; }
  .art.free .count { position: absolute; right: 4cqw; bottom: 3.6cqw; z-index: 2; font-size: 2.3cqw; color: var(--indigo-2); font-weight: 700; }
  .art.free .count span { color: var(--faint); font-weight: 500; }

  /* --- MACRO: follow the money (the trailer's Money Flow: cash fans out, dots run faster where more is moving) --- */
  .art.macro { background: radial-gradient(70% 60% at 45% 45%, rgba(245,158,11,.22), rgba(245,158,11,.04) 55%, transparent 75%), linear-gradient(160deg, #1c1305, #12100a 50%, #0a0a1a); }
  .art.macro .eyebrow { position: absolute; left: 4cqw; top: 4.2cqw; display: flex; align-items: center; gap: 1.4cqw; font-size: 1.9cqw; font-weight: 700; letter-spacing: .2em; color: #9aa3c7; }
  .art.macro .eyebrow .dot { background: var(--green-2); box-shadow: 0 0 1.6cqw var(--green-2); animation: ta-pulse 1.8s ease-in-out infinite; }
  .art.macro .eyebrow b { color: var(--green-2); letter-spacing: .08em; }
  .art.macro .regime { position: absolute; right: 4cqw; top: 4cqw; font-size: 2.1cqw; padding: 1.2cqw 2.4cqw; background: rgba(52,211,153,.12); color: var(--green-2); border: 1px solid rgba(52,211,153,.4); }
  .art.macro .head { position: absolute; left: 4cqw; right: 4cqw; top: 9.5cqw; font-size: 3cqw; font-weight: 800; color: #eef0fb; letter-spacing: -0.01em; line-height: 1.2; }
  .art.macro .head em { font-style: normal; color: #86efac; } .art.macro .head em.out { color: var(--red); }
  .art.macro .flowsvg { position: absolute; left: 4cqw; right: 4cqw; top: 17cqw; height: 34cqw; }
  .art.macro .flowsvg svg { width: 100%; height: 100%; overflow: visible; font-family: var(--font); }
  .art.macro .flowsvg .ln { fill: none; opacity: .38; }
  .art.macro .flowsvg .lbl { fill: #eef0fb; font-size: 4.4px; font-weight: 700; }
  .art.macro .flowsvg .io { font-size: 3.2px; font-weight: 600; font-family: var(--mono); }
  .art.macro .flowsvg .cash { fill: #15153a; stroke: #3a3a6e; stroke-width: .6; }
  .art.macro .flowsvg .cashlbl { fill: #c5c9e6; font-size: 4px; font-weight: 700; text-anchor: middle; }
  .art.macro .flowsvg .end { fill: none; stroke-width: .7; }
  .art.macro .gauge { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; }
  .art.macro .gauge .lbls { display: flex; justify-content: space-between; font-size: 1.8cqw; letter-spacing: .14em; color: #8f96b8; font-weight: 600; }
  .art.macro .gauge .lbls span:last-child { color: var(--green-2); }
  .art.macro .gauge .bar { position: relative; height: 1.8cqw; border-radius: 2cqw; margin-top: 1.2cqw; background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #86efac); }
  .art.macro .gauge .knob { position: absolute; top: -1cqw; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 2.4cqw var(--green-2); left: calc(84% - 1.9cqw); animation: ta-swingto 10s ease-in-out infinite; }
  @keyframes ta-swingto { 0%, 8% { left: calc(50% - 1.9cqw); box-shadow: 0 0 .8cqw #fff; } 40%, 100% { left: calc(84% - 1.9cqw); box-shadow: 0 0 2.4cqw var(--green-2); } }

  /* ——— BASIC: the whole scanner, live ——— */
  .art.basic { background: radial-gradient(90% 70% at 70% 30%, rgba(16,185,129,.22), transparent 65%), linear-gradient(160deg, #06120f, #0a0a1a 60%); }
  .art.basic .tfrow { top: 5cqw; }
  .art.basic .tf.on { background: rgba(16,185,129,.9); box-shadow: 0 0 2.4cqw rgba(16,185,129,.45); }
  .art.basic .live { position: absolute; right: 4cqw; top: 15.5cqw; font-size: 2.2cqw; padding: 1.3cqw 2.4cqw; background: rgba(16,185,129,.14); color: var(--green-2); border: 1px solid rgba(16,185,129,.4); z-index: 3; }
  .art.basic .live .dot { background: var(--green-2); box-shadow: 0 0 1.6cqw var(--green-2); animation: ta-pulse 1.6s ease-in-out infinite; }
  .art.basic .lib { position: absolute; left: 4cqw; right: 4cqw; top: 22cqw; bottom: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .art.basic .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.4cqw; animation: ta-libscroll 22s linear infinite; }
  .art.basic .cell { background: rgba(18,18,42,.9); border: 1px solid var(--border); border-radius: 1.6cqw; padding: 1.4cqw; }
  .art.basic .cell .s { font-size: 1.9cqw; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; }
  .art.basic .cell .s i { font-style: normal; font-size: 1.6cqw; }
  .art.basic .cell svg { width: 100%; height: 3.6cqw; display: block; margin-top: .8cqw; }
  .art.basic .focus { position: absolute; left: 50%; top: 36cqw; transform: translateX(-50%); width: 36cqw; z-index: 2; box-shadow: 0 0 5cqw rgba(16,185,129,.35), 0 3cqw 6cqw rgba(0,0,0,.6); border-color: rgba(52,211,153,.6); }
  .art.basic .focus .px { color: var(--text); }
  .art.basic .focus .lead { font-size: 2cqw; color: var(--green-2); text-align: center; font-weight: 600; }

  /* ——— PREMIUM: alert on the whole market ——— */
  .art.premium { background: radial-gradient(80% 70% at 25% 30%, rgba(139,92,246,.30), transparent 65%), linear-gradient(160deg, #120a24, #0a0a1a 60%); }
  .art.premium .bell { position: absolute; left: 7cqw; top: 9cqw; width: 22cqw; height: 22cqw; }
  .art.premium .bell svg { width: 100%; height: 100%; overflow: visible; }
  .art.premium .bell .ring { fill: none; stroke: var(--purple-2); stroke-width: 1.2; transform-origin: 50% 50%; animation: ta-ring 3.2s ease-out infinite; opacity: 0; }
  .art.premium .bell .ring:nth-child(2) { animation-delay: 1.05s; } .art.premium .bell .ring:nth-child(3) { animation-delay: 2.1s; }
  .art.premium .bellbody { animation: ta-swing 3.2s ease-in-out infinite; transform-origin: 50% 12%; }
  .art.premium .scope { position: absolute; left: 5cqw; top: 34cqw; width: 26cqw; text-align: center; font-size: 2cqw; color: var(--purple-2); font-weight: 700; line-height: 1.35; }
  .art.premium .scope span { display: block; color: var(--faint); font-weight: 500; }
  .art.premium .feed { position: absolute; left: 35cqw; right: 4cqw; top: 6cqw; display: flex; flex-direction: column; gap: 1.8cqw; }
  .art.premium .al { display: flex; align-items: center; gap: 2cqw; background: rgba(139,92,246,.10); border: 1px solid rgba(167,139,250,.35); border-radius: 2cqw; padding: 1.8cqw 2.2cqw; animation: ta-slidein 9s ease-out infinite; }
  .art.premium .al:nth-child(1) { animation-delay: -8.2s; } .art.premium .al:nth-child(2) { animation-delay: -7.6s; } .art.premium .al:nth-child(3) { animation-delay: -7s; }
  .art.premium .al .ic { width: 5.4cqw; height: 5.4cqw; border-radius: 1.4cqw; background: #060612; display: grid; place-items: center; flex: none; }
  .art.premium .al .ic svg { width: 3.4cqw; height: 3.4cqw; }
  .art.premium .al .t { font-size: 2.4cqw; font-weight: 700; color: #f1ecff; white-space: nowrap; }
  .art.premium .al .t em { font-style: normal; color: var(--pink); } .art.premium .al .t em.g { color: var(--green-2); }
  .art.premium .al .b { font-size: 1.9cqw; color: #b9aee0; margin-top: .4cqw; white-space: nowrap; }
  .art.premium .lenses { position: absolute; left: 35cqw; right: 4cqw; bottom: 4.5cqw; }
  .art.premium .lenses .lbl { font-size: 1.9cqw; color: var(--faint); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.2cqw; }
  .art.premium .lens { display: flex; gap: 1.2cqw; }
  .art.premium .lens i { flex: 1; font-style: normal; text-align: center; font-size: 1.8cqw; font-weight: 700; padding: 1.2cqw 0; border-radius: 1.2cqw; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--dim); }
  .art.premium .lens i.v { color: var(--green-2); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
  .art.premium .lens i.w { color: var(--amber-2); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }

  /* ——— MAX: everything, done for you (the exploded stack) ——— */
  .art.max { background: radial-gradient(70% 60% at 50% 55%, rgba(245,158,11,.22), transparent 65%), radial-gradient(60% 50% at 50% 100%, rgba(16,185,129,.18), transparent 70%), linear-gradient(160deg, #1a1306, #0a0a1a 55%); }
  .art.max .scene { position: absolute; inset: 0; perspective: 230cqw; z-index: 1; }
  .art.max .stack { position: absolute; left: 46%; top: 66%; width: 50cqw; height: 27cqw; margin-left: -25cqw; margin-top: -13.5cqw; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-30deg); animation: ta-orbit 14s ease-in-out infinite; }
  .art.max .layer { position: absolute; inset: 0; border-radius: 2.4cqw; background: linear-gradient(150deg, rgba(18,18,42,.96), rgba(8,14,20,.96)); border: 1px solid rgba(110,231,183,.45); box-shadow: 0 0 4cqw rgba(16,185,129,.28), 0 4cqw 8cqw rgba(0,0,0,.55); padding: 2.2cqw 2.4cqw; }
  .art.max .layer .lt { font-size: 1.9cqw; font-weight: 700; letter-spacing: .22em; color: #8fb3a6; }
  .art.max .layer.l1 { transform: translateZ(0); } .art.max .layer.l2 { transform: translateZ(8.5cqw); } .art.max .layer.l3 { transform: translateZ(17cqw); }
  .art.max .layer.l4 { transform: translateZ(25.5cqw); border-color: rgba(251,191,36,.7); box-shadow: 0 0 5cqw rgba(245,158,11,.35), 0 4cqw 8cqw rgba(0,0,0,.55); }
  .art.max .layer.l4 .lt { color: var(--amber-2); }
  .art.max .cards { display: flex; gap: 1.4cqw; margin-top: 1.6cqw; }
  .art.max .cards i { flex: 1; height: 14cqw; border-radius: 1.4cqw; background: rgba(255,255,255,.05); border: 1px solid var(--border); position: relative; }
  .art.max .cards i::after { content: ""; position: absolute; left: 1cqw; right: 1cqw; bottom: 2cqw; height: .9cqw; border-radius: 1cqw; background: var(--green-2); opacity: .7; }
  .art.max .lines { display: flex; flex-direction: column; gap: 1.4cqw; margin-top: 1.8cqw; }
  .art.max .lines i { height: 4.6cqw; border-radius: 1.2cqw; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.35); }
  .art.max .chain { display: flex; align-items: center; gap: 1.4cqw; margin-top: 3cqw; }
  .art.max .chain i { flex: 1; height: 8cqw; border-radius: 1.4cqw; border: 1px solid rgba(110,231,183,.55); }
  .art.max .chain i.btc { border-color: rgba(247,147,26,.8); background: rgba(247,147,26,.12); }
  .art.max .chain s { width: 3cqw; height: .5cqw; background: var(--green-2); display: block; }
  .art.max .tiles { display: flex; gap: 1.2cqw; margin-top: 2cqw; }
  .art.max .tiles i { flex: 1; height: 13cqw; border-radius: 1.4cqw; }
  .art.max .names { position: absolute; right: 4cqw; top: 6cqw; z-index: 2; display: flex; flex-direction: column; gap: 1.5cqw; text-align: right; }
  .art.max .names span { font-size: 2.2cqw; font-weight: 800; color: #eafff6; display: flex; align-items: center; justify-content: flex-end; gap: 1.4cqw; }
  .art.max .names span::after { content: ""; width: 5cqw; height: .4cqw; background: var(--green-2); box-shadow: 0 0 1.4cqw var(--green); }
  .art.max .names span.top { color: var(--amber-2); } .art.max .names span.top::after { background: var(--amber-2); box-shadow: 0 0 1.4cqw var(--amber); }
  .art.max .tg { position: absolute; left: 4cqw; top: 4.5cqw; z-index: 3; font-size: 2.2cqw; padding: 1.4cqw 2.4cqw; background: rgba(16,185,129,.12); color: var(--green-2); border: 1px solid rgba(16,185,129,.4); z-index: 3; }
  .art.max .tg svg { width: 2.6cqw; height: 2.6cqw; }
  .art.max .tg .dot { background: var(--green-2); box-shadow: 0 0 1.6cqw var(--green-2); animation: ta-pulse 1.6s ease-in-out infinite; }
  .art.max .all { position: absolute; left: 4cqw; bottom: 4cqw; font-size: 2.3cqw; color: #d6b36a; font-weight: 600; }
  .art.max .all b { color: var(--amber-2); }

  @keyframes ta-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.75); } }
  @keyframes ta-libscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @keyframes ta-ring { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
  @keyframes ta-swing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(10deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(5deg); } 60% { transform: rotate(0); } }
  @keyframes ta-slidein { 0% { opacity: 0; transform: translateX(6cqw); } 7% { opacity: 1; transform: translateX(0); } 92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2cqw); } }
  @keyframes ta-orbit { 0%, 100% { transform: rotateX(58deg) rotateZ(-30deg); } 50% { transform: rotateX(54deg) rotateZ(-22deg); } }
  @keyframes ta-draw { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
  .art .spark path.l { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ta-draw 9s ease-out infinite; }
  @media (prefers-reduced-motion: reduce) { .art *, .art *::after { animation: none !important; } .art .al { opacity: 1; transform: none; } }