:root {
      --ink: #0A1628;
      --ink2: #0F2138;
      --paper: #FFFFFF;
      --paper2: #F7F9FC;
      --paper3: #EEF2F8;
      --line: #E1E7F0;
      --muted: #5E6E85;
      --muted2: #8FA0B8;
      --blue: #3B9BE5;
      --blue-d: #2A7BC4;
      --green: #5DC158;
      --green-d: #46A444;
      --gold: #F5A623
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      opacity: 0;
      animation: fadeIn .5s ease-out forwards
    }

    @keyframes fadeIn {
      to {
        opacity: 1
      }
    }

    /* HEADER */
    .hdr {
      background: var(--ink);
      padding: 18px 32px;
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .hdr-in {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px
    }

    .hdr-logo {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0
    }

    .hdr-logo img {
      height: 40px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: .95;
      transition: opacity .25s
    }

    .hdr-logo:hover img {
      opacity: 1
    }

    .hdr-back {
      color: rgba(255, 255, 255, .75);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .14em;
      padding: 9px 16px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      transition: all .25s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap
    }

    .hdr-back:hover {
      background: rgba(255, 255, 255, .06);
      color: #fff;
      border-color: rgba(255, 255, 255, .3)
    }

    /* ARTICLE HERO */
    .art-hero {
      background: linear-gradient(180deg, var(--paper2), var(--paper));
      padding: 64px 32px 48px;
      border-bottom: 1px solid var(--line);
      position: relative;
      overflow: hidden
    }

    .art-hero::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(245, 166, 35, .06), transparent 60%);
      pointer-events: none
    }

    .art-hero-in {
      max-width: 820px;
      margin: 0 auto;
      position: relative;
      z-index: 1
    }

    .art-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--blue-d);
      margin-bottom: 24px
    }

    .art-eyebrow::before {
      content: '';
      width: 32px;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      border-radius: 2px
    }

    .art-cat-pin {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(245, 166, 35, .95);
      padding: 6px 13px;
      border-radius: 6px;
      margin-bottom: 24px;
      box-shadow: 0 6px 16px -4px rgba(245, 166, 35, .45)
    }

    h1.art-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(32px, 4.5vw, 52px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.035em;
      color: var(--ink);
      margin-bottom: 18px
    }

    .art-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: var(--muted);
      font-style: italic;
      margin-bottom: 24px
    }

    .art-meta {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .1em;
      text-transform: uppercase;
      padding-top: 24px;
      border-top: 1px solid var(--line)
    }

    .art-meta-dot {
      width: 4px;
      height: 4px;
      background: var(--muted);
      border-radius: 50%
    }

    .art-meta .live {
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .art-meta .live::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    /* HERO CHART */
    .art-chart {
      background: linear-gradient(135deg, #1A1208 0%, #2D1F0A 100%);
      border-radius: 16px;
      height: 280px;
      margin-top: 36px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(245, 166, 35, .15)
    }

    .art-chart svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0
    }

    .art-chart-line {
      stroke-dasharray: 2000;
      stroke-dashoffset: 2000;
      animation: drawLine 3s 1s cubic-bezier(.4, 0, .2, 1) forwards
    }

    @keyframes drawLine {
      to {
        stroke-dashoffset: 0
      }
    }

    .art-chart-pulse {
      filter: drop-shadow(0 0 8px currentColor);
      opacity: 0;
      animation: fadeInPulse .4s 3.5s ease forwards, dotPulse 1.8s 4s ease-in-out infinite
    }

    @keyframes fadeInPulse {
      to {
        opacity: 1
      }
    }

    @keyframes dotPulse {

      0%,
      100% {
        transform: scale(1);
        transform-origin: center
      }

      50% {
        transform: scale(1.6);
        transform-origin: center
      }
    }

    .art-chart-label {
      position: absolute;
      top: 18px;
      left: 20px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .6);
      background: rgba(0, 0, 0, .4);
      backdrop-filter: blur(6px);
      padding: 6px 11px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, .08)
    }

    .art-chart-price {
      position: absolute;
      top: 18px;
      right: 20px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      color: var(--gold);
      background: rgba(245, 166, 35, .12);
      padding: 6px 11px;
      border-radius: 5px;
      border: 1px solid rgba(245, 166, 35, .25);
      letter-spacing: .04em
    }

    /* ARTICLE BODY */
    .art-body {
      padding: 56px 32px 80px
    }

    .art-body-in {
      max-width: 720px;
      margin: 0 auto
    }

    .art-lead {
      font-family: 'Source Serif Pro', 'Georgia', serif;
      font-size: 21px;
      line-height: 1.6;
      color: var(--ink);
      font-weight: 400;
      margin-bottom: 48px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--line)
    }

    .art-section {
      margin-bottom: 40px
    }

    .art-section h2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -.025em;
      color: var(--ink);
      margin-bottom: 18px;
      line-height: 1.25
    }

    .art-section h3 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.015em;
      color: var(--ink);
      margin: 24px 0 12px
    }

    .art-section h3.bull {
      color: var(--green-d)
    }

    .art-section h3.bear {
      color: #DC2626
    }

    .art-section p {
      font-family: 'Inter', sans-serif;
      font-size: 16.5px;
      line-height: 1.78;
      color: var(--ink);
      margin-bottom: 18px
    }

    .art-section p strong {
      font-weight: 700;
      color: var(--ink)
    }

    .art-list {
      list-style: none;
      margin: 18px 0 24px;
      padding: 0
    }

    .art-list li {
      position: relative;
      padding: 0 0 18px 28px;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink)
    }

    .art-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 11px;
      width: 14px;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      border-radius: 2px
    }

    .art-list li strong {
      font-weight: 700;
      color: var(--ink)
    }

    .art-pro-tip {
      background: linear-gradient(135deg, rgba(59, 155, 229, .06), rgba(93, 193, 88, .04));
      border-left: 3px solid var(--blue);
      border-radius: 8px;
      padding: 20px 24px;
      margin: 28px 0;
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--ink)
    }

    .art-pro-tip strong {
      color: var(--blue-d);
      font-weight: 700;
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: 8px
    }

    .art-bottom-line {
      background: var(--ink);
      color: #fff;
      padding: 28px 32px;
      border-radius: 12px;
      margin-top: 40px;
      position: relative;
      overflow: hidden
    }

    .art-bottom-line::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--green))
    }

    .art-bottom-line-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 10px
    }

    .art-bottom-line-label::before {
      content: '';
      width: 24px;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      border-radius: 2px
    }

    .art-bottom-line p {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255, 255, 255, .85);
      margin: 0
    }

    /* AUTHOR FOOTER */
    .art-author {
      margin-top: 56px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 14px
    }

    .art-author-av {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--green));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 17px;
      flex-shrink: 0
    }

    .art-author-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 15.5px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.01em
    }

    .art-author-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .06em;
      margin-top: 2px
    }

    /* CTA */
    .bottom-cta {
      background: var(--ink);
      padding: 72px 32px;
      text-align: center;
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .bottom-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 800px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(59, 155, 229, .12), rgba(93, 193, 88, .06), transparent 60%);
      transform: translate(-50%, -50%);
      pointer-events: none
    }

    .bottom-cta-in {
      max-width: 680px;
      margin: 0 auto;
      position: relative;
      z-index: 1
    }

    .bottom-cta h2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: clamp(28px, 3.5vw, 38px);
      font-weight: 700;
      letter-spacing: -.035em;
      line-height: 1.1;
      margin-bottom: 14px
    }

    .bottom-cta h2 .grad {
      background: linear-gradient(135deg, #5DB3F0, #7FD073);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .bottom-cta p {
      color: rgba(255, 255, 255, .6);
      font-size: 15px;
      margin-bottom: 28px;
      line-height: 1.55
    }

    .bottom-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      background: #fff;
      padding: 15px 28px;
      border-radius: 10px;
      text-decoration: none;
      transition: transform .3s, box-shadow .3s;
      position: relative;
      overflow: hidden
    }

    .bottom-cta-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--blue), var(--green));
      transform: translateY(100%);
      transition: transform .35s
    }

    .bottom-cta-btn:hover {
      transform: translateY(-2px);
      color: #fff;
      box-shadow: 0 16px 36px -10px rgba(59, 155, 229, .5)
    }

    .bottom-cta-btn:hover::before {
      transform: translateY(0)
    }

    .bottom-cta-btn span {
      position: relative;
      z-index: 1
    }

    /* FOOTER */
    .foot {
      background: var(--paper);
      padding: 36px 32px;
      text-align: center;
      border-top: 1px solid var(--line)
    }

    .foot-in {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap
    }

    .foot-back {
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .1em;
      padding: 10px 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      transition: all .25s;
      text-decoration: none
    }

    .foot-back:hover {
      background: var(--paper2);
      color: var(--ink);
      border-color: #CCD5E2
    }

    .foot-disclaimer {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      color: var(--muted);
      letter-spacing: .06em;
      text-transform: uppercase
    }

    @media(max-width:680px) {
      .hdr {
        padding: 14px 20px
      }

      .hdr-logo img {
        height: 34px
      }

      .hdr-back {
        font-size: 10px;
        padding: 7px 12px
      }

      .art-hero {
        padding: 40px 20px 36px
      }

      h1.art-title {
        font-size: 28px
      }

      .art-subtitle {
        font-size: 14px
      }

      .art-chart {
        height: 200px;
        margin-top: 28px
      }

      .art-meta {
        font-size: 10px;
        gap: 10px
      }

      .art-body {
        padding: 40px 20px 64px
      }

      .art-lead {
        font-size: 17px;
        margin-bottom: 32px;
        padding-bottom: 24px
      }

      .art-section {
        margin-bottom: 32px
      }

      .art-section h2 {
        font-size: 22px;
        margin-bottom: 14px
      }

      .art-section h3 {
        font-size: 16px
      }

      .art-section p,
      .art-list li {
        font-size: 15px
      }

      .art-pro-tip {
        padding: 16px 18px;
        font-size: 14px
      }

      .art-bottom-line {
        padding: 24px
      }

      .art-bottom-line p {
        font-size: 14.5px
      }

      .bottom-cta {
        padding: 48px 20px
      }
    }