@import "tailwindcss";
 :root { --accent: #04FFC4; }
         html, body { background: #07090C; color: #D8E1EA; }
         /* Subtle star field + animated grid */
         .stars {
         background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.15) 0, transparent 40%),
         radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.10) 0, transparent 40%),
         radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.12) 0, transparent 40%),
         radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.08) 0, transparent 40%);
         background-size: 1600px 1200px;
         }
         .gridlines {
         position:absolute; inset:-20% -20% auto -20%; height:100vh; pointer-events:none; opacity:.22;
         background: linear-gradient(transparent 95%, rgba(4,255,196,.35) 100%), linear-gradient(90deg, transparent 95%, rgba(4,255,196,.35) 100%);
         background-size: 40px 40px;
         mask-image: radial-gradient(60% 60% at 50% 40%, black 0%, transparent 100%);
         /* animation: pan 22s linear infinite; */
         }
         @keyframes pan { from{ transform: rotate(0deg) translateY(0) } to { transform: rotate(3deg) translateY(-12px) } }
         /* Utilities */
         .neon-border { border: 1px solid rgba(4,255,196,0.25); box-shadow: 0 0 0 1px rgba(4,255,196,0.08) inset; }
         .title-glow { text-shadow: 0 0 25px rgba(4, 255, 196, 0.35); }
         .glass { background: linear-gradient(180deg, rgba(21,28,36,0.7), rgba(11,15,20,0.55)); backdrop-filter: blur(10px); }
         .accent-gradient { background: linear-gradient(90deg, rgba(4,255,196,.6), rgba(4,255,196,.15), rgba(4,255,196,.6)); background-size: 200% 100%; }
         .reveal { opacity: 0; transform: translateY(24px); }
         .tilt { transform-style: preserve-3d; will-change: transform; }
         /* APY ring */
         .apy-ring { --v: 0; background:
         conic-gradient(var(--accent) calc(var(--v)*1%), transparent 0%),
         radial-gradient(closest-side, rgba(11,15,20,.9) 80%, transparent 81% 100%),
         radial-gradient(closest-side, rgba(4,255,196,.12), rgba(4,255,196,0));
         }
         @media (prefers-reduced-motion: reduce) {
         .gridlines, .accent-gradient, .animate-shimmer, .animate-float { animation: none !important; }
         .reveal { opacity: 1 !important; transform: none !important; }
         }

          @keyframes spin-slow { to { transform: rotate(360deg); } }
         .molecule-orbit {
         position:absolute; border:1px dashed rgba(4,255,196,.22);
         border-radius:9999px; animation: spin-slow linear infinite;
         }
         .molecule-orbit .dot {
         position:absolute; top:-4px; left:50%; transform:translateX(-50%);
         width:8px; height:8px; border-radius:9999px; background: var(--accent);
         box-shadow: 0 0 14px rgba(4,255,196,.7);
         }

             table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
    th, td { border: 1px solid rgba(255,255,255,0.08); padding: 0.75rem 1rem; text-align: left; }
    th { background-color: rgba(255,255,255,0.05); color: var(--accent); font-weight: 600; }
    tr:nth-child(even) td { background-color: rgba(255,255,255,0.02); }

     .loader-ring {
    background:
      conic-gradient(from 0deg,
        rgba(4,255,196,0) 0%,
        rgba(4,255,196,.35) 15%,
        rgba(4,255,196,.7) 35%,
        rgba(4,255,196,.35) 55%,
        rgba(4,255,196,0) 70%,
        rgba(4,255,196,0) 100%);
    filter: drop-shadow(0 0 18px rgba(4,255,196,.35));
    animation: spin 1.2s linear infinite;
    border-radius: 9999px;
    -webkit-mask: radial-gradient(circle at center, #0000 60%, #000 61%);
            mask: radial-gradient(circle at center, #0000 60%, #000 61%);
  }

  /* Inner coin */
  .loader-coin {
    background: radial-gradient(closest-side, rgba(255,255,255,.06), rgba(255,255,255,0));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
      inset 0 0 20px rgba(4,255,196,.10),
      0 0 24px rgba(4,255,196,.10);
    animation: coinPulse 1.6s ease-in-out infinite;
  }

  /* Orbit path + dot */
  .loader-orbit {
    animation: spin 2s linear infinite;
  }
  .loader-dot {
    position: absolute;
    top: -5px; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px; border-radius: 9999px;
    background: var(--accent);
    box-shadow:
      0 0 10px rgba(4,255,196,.9),
      0 0 22px rgba(4,255,196,.45);
  }

  /* Subtext shimmer */
  .loader-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.7), rgba(255,255,255,.35));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
    letter-spacing: 0.02em;
  }

  /* Anims */
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes coinPulse {
    0%, 100% { box-shadow: inset 0 0 14px rgba(4,255,196,.10), 0 0 18px rgba(4,255,196,.12); }
    50%      { box-shadow: inset 0 0 26px rgba(4,255,196,.22), 0 0 28px rgba(4,255,196,.22); }
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* Motion-safe */
  @media (prefers-reduced-motion: reduce) {
    .loader-ring, .loader-orbit, .loader-coin, .loader-shimmer { animation: none !important; }
  }

  .glass{ background:linear-gradient(180deg, rgba(21,28,36,.7), rgba(11,15,20,.55)); backdrop-filter:blur(12px) }
    .neon-border{ border:1px solid rgba(4,255,196,.25); box-shadow:0 0 0 1px rgba(4,255,196,.08) inset }
    .title-glow{ text-shadow:0 0 25px rgba(4,255,196,.35) }
    .stars{
      background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.14) 0, transparent 40%),
        radial-gradient(1px 1px at 36% 78%, rgba(255,255,255,.10) 0, transparent 40%),
        radial-gradient(1px 1px at 74% 34%, rgba(255,255,255,.12) 0, transparent 40%),
        radial-gradient(1px 1px at 90% 66%, rgba(255,255,255,.08) 0, transparent 40%);
      background-size:1600px 1200px;
    }

    /* SHAKE ANIMATION */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.35s ease-in-out;
}

 .code-input,
  .code-input-setup {
    @apply w-12 h-12 text-center text-xl font-mono bg-white/5 border border-white/10 rounded-lg outline-none transition;
  }

  .code-input:focus,
  .code-input-setup:focus {
    @apply border-[var(--accent)]/60 bg-white/10;
  }

  /* Reveal animation (required) */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
.step-ico{
    height: 46px;
    width: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(4, 255, 196, .12);
    border: 1px solid rgba(4, 255, 196, .28);
}

/* ===== Modern Web3 background layer ===== */
.web3-network{
  position:absolute;
  inset:0;
  opacity:.55;            /* overall intensity */
  mix-blend-mode: screen; /* makes it feel “neon in the glass” */
}

.web3-network svg{
  width:100%;
  height:100%;
}

/* Faint “map” lines */
.net-base path{
  fill:none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
}

/* Flow lines (animated dashed gradient) */
.flow{
  fill:none;
  stroke: url(#netGrad);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 8 14;
  opacity: .55;
  animation: dashMove var(--d,18s) linear infinite;
}

.f1{ --d:18s; }
.f2{ --d:22s; }
.f3{ --d:26s; }
.f4{ --d:20s; }
.f5{ --d:24s; }
.f6{ --d:28s; }

@keyframes dashMove{
  to { stroke-dashoffset: -220; }
}

/* Nodes */
.node{
  fill: rgba(4,255,196,.35);
  opacity:.55;
  animation: nodePulse var(--p,3.2s) ease-in-out infinite;
}

.n1{--p:3.4s}.n2{--p:2.9s}.n3{--p:3.7s}.n4{--p:3.1s}
.n5{--p:2.8s}.n6{--p:3.9s}.n7{--p:3.3s}.n8{--p:3.6s}
.n9{--p:2.7s}.n10{--p:3.8s}.n11{--p:3.0s}.n12{--p:4.0s}

@keyframes nodePulse{
  0%,100%{ transform: scale(1); opacity:.45; }
  50%{ transform: scale(1.6); opacity:.7; }
}

/* Halo: modern “web3 glow ring” */
.web3-halo{
  position:absolute;
  inset:-20%;
  opacity:.22;
  filter: blur(18px);
  background:
    conic-gradient(from 180deg,
      rgba(4,255,196,0) 0%,
      rgba(4,255,196,.22) 18%,
      rgba(255,255,255,.10) 32%,
      rgba(4,255,196,.18) 48%,
      rgba(4,255,196,0) 72%,
      rgba(4,255,196,.14) 88%,
      rgba(4,255,196,0) 100%);
  animation: haloSpin 28s linear infinite;
}

@keyframes haloSpin{
  to { transform: rotate(360deg); }
}

/* Optional grain (subtle; doesn’t scream) */
.web3-grain{
  position:absolute;
  inset:0;
  opacity:.08;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 10px);
  filter: blur(.4px);
}

/* Mobile: reduce intensity */
@media (max-width: 768px){
  .web3-network{ opacity:.38; }
  .web3-halo{ opacity:.16; }
  .web3-grain{ opacity:.06; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .flow, .node, .web3-halo{ animation: none !important; }
}


.calc-chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.45rem .7rem;
    border-radius:999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.9);
    font-size:.82rem;
    transition: .2s ease;
    user-select:none;
  }
  .calc-chip:hover{ background: rgba(255,255,255,.06); border-color: rgba(4,255,196,.35); }
  .calc-chip.is-active{
    background: rgba(4,255,196,.14);
    border-color: rgba(4,255,196,.45);
    color: #eafffb;
  }

  .calc-pill{
    padding:.45rem .7rem;
    border-radius:999px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.9);
    font-size:.82rem;
    transition:.2s ease;
    user-select:none;
  }
  .calc-pill:hover{ background: rgba(255,255,255,.06); border-color: rgba(4,255,196,.35); }
  .calc-pill.is-active{
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
    color:#fff;
  }

  .calc-lock{
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    padding:.65rem .6rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.9);
    font-size:.82rem;
    transition:.2s ease;
    user-select:none;
  }
  .calc-lock:hover{ background: rgba(255,255,255,.06); border-color: rgba(4,255,196,.35); }
  .calc-lock.is-active{
    background: rgba(4,255,196,.12);
    border-color: rgba(4,255,196,.45);
    color:#eafffb;
  }

  /* Chart */
  .stake-chart-wrap{
  position:relative;
  height:340px;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);

  overflow: visible; /* IMPORTANT: tooltip can overflow now */
}

.stake-canvas-clip{
  position:absolute;
  inset:0;
  border-radius: inherit;
  overflow: hidden; /* IMPORTANT: canvas stays clipped */
}


  .stake-tooltip{
    position:absolute;
    z-index:5;
    min-width: 220px;
    max-width: 280px;
    padding:.65rem .75rem;
    border-radius: 1rem;
    background: rgba(10,16,26,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    color: #fff;
    pointer-events:none;
    transform: translate(-50%, -110%);
    backdrop-filter: blur(10px);
  }
  .stake-tooltip strong{ display:block; font-size:.9rem; margin-bottom:.25rem; }
  .stake-tooltip .muted{ color: rgba(226,232,240,.75); font-size:.78rem; margin-top:.15rem; }


  .blog-post p{
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.75rem;
  }

  /* Clamp helper (adds "..." automatically) */
.clamp-2, .clamp-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-2{ -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3{ -webkit-line-clamp: 3; line-clamp: 3; }