:root{
  --moss:#4a7c3f;
  --moss-deep:#3c6633;
  --moss-dark:#2f5228;
  --lime:#b8e64a;
  --lime-dim:#8fbf35;
  --cream:#f5eeda;
  --cream-dim:#e3dac2;
  --brown:#2a1e0f;
  --brown-soft:#3a2c19;

  --font-display:"Playfair Display", Georgia, serif;
  --font-body:"Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --strip-h:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:900ms;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--moss);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--lime);color:var(--brown)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--font-mono)}

/* ---------- ticker strip ---------- */
#ticker-strip{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--strip-h);
  display:flex;align-items:center;gap:10px;
  padding:0 16px;
  background:var(--brown);
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(184,230,74,.28);
  overflow-x:auto;
  scrollbar-width:none;
  white-space:nowrap;
}
#ticker-strip::-webkit-scrollbar{display:none}
#ticker-strip .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--lime);flex:none;
  box-shadow:0 0 0 0 rgba(184,230,74,.6);
  animation:pulse 4.5s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(184,230,74,.55)}
  70%{box-shadow:0 0 0 10px rgba(184,230,74,0)}
  100%{box-shadow:0 0 0 0 rgba(184,230,74,0)}
}
#ticker-strip .ticker{color:var(--lime);font-weight:700;letter-spacing:.09em}
#ticker-strip .sep{opacity:.4}
#ticker-strip .ca-label{opacity:.6}
#ticker-strip .ca{color:var(--cream-dim)}
#ticker-strip a{
  color:var(--lime);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(184,230,74,.35);
  transition:color var(--slow) var(--ease),border-color var(--slow) var(--ease);
}
#ticker-strip a:hover{color:var(--cream);border-color:var(--cream)}
#copy{
  font:inherit;font-size:11px;letter-spacing:.12em;
  background:transparent;color:var(--cream);
  border:1px solid rgba(245,238,218,.4);
  padding:3px 9px;cursor:pointer;
  transition:background 700ms var(--ease),color 700ms var(--ease),border-color 700ms var(--ease);
}
#copy:hover{border-color:var(--lime);color:var(--lime)}
#copy.copied{background:var(--lime);border-color:var(--lime);color:var(--brown)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:calc(var(--strip-h) + 96px) 0 260px;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(184,230,74,.14), transparent 60%),
    linear-gradient(180deg,var(--moss) 0%, var(--moss-deep) 100%);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(42,30,15,.18) 1px, transparent 1px);
  background-size:5px 5px;
  opacity:.5;
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}

.mark{
  display:flex;align-items:center;gap:12px;
  color:var(--lime);
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;animation:rise 1.6s var(--ease) .1s forwards;
}
.mark span{color:var(--cream-dim)}

.hero-title{
  font-family:var(--font-display);
  font-weight:900;
  margin:.22em 0 0;
  line-height:.86;
  letter-spacing:-.03em;
  font-size:clamp(3.6rem,13.5vw,11rem);
  color:var(--cream);
  text-shadow:0 6px 0 rgba(42,30,15,.18);
}
.hero-title span{display:block;opacity:0}
.hero-title .l1{animation:rise 2s var(--ease) .25s forwards}
.hero-title .l2{
  color:var(--lime);margin-left:.06em;
  animation:rise 2s var(--ease) .55s forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.tagline{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,3.1vw,2.3rem);
  margin:.6em 0 0;font-weight:500;color:var(--cream);
  opacity:0;animation:rise 2s var(--ease) .9s forwards;
}
.tagline em{color:var(--lime);font-style:italic}
.subline{
  font-size:clamp(.95rem,1.4vw,1.12rem);
  color:rgba(245,238,218,.72);
  margin:.5em 0 0;max-width:44ch;
  opacity:0;animation:rise 2s var(--ease) 1.15s forwards;
}

.hero-actions{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;
  opacity:0;animation:rise 2s var(--ease) 1.4s forwards;
}
.btn{
  display:inline-block;text-decoration:none;
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:15px 26px;border:1px solid transparent;
  transition:background var(--slow) var(--ease),color var(--slow) var(--ease),
             border-color var(--slow) var(--ease),transform var(--slow) var(--ease);
}
.btn-primary{background:var(--lime);color:var(--brown);border-color:var(--lime)}
.btn-primary:hover{background:var(--cream);border-color:var(--cream);transform:translateY(-2px)}
.btn-ghost{color:var(--cream);border-color:rgba(245,238,218,.4)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.btn.small{padding:10px 16px;font-size:11.5px}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:0;margin:64px 0 0;padding:0 0 0 300px;
  border-top:1px solid rgba(245,238,218,.18);
  opacity:0;animation:rise 2s var(--ease) 1.65s forwards;
}
@media (max-width:900px){
  .hero-stats{padding-left:0}
}
.hero-stats > div{
  padding:18px 30px 22px 0;margin-right:30px;
  border-right:1px solid rgba(245,238,218,.14);
}
.hero-stats > div:last-child{border-right:0}
.hero-stats dt{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,238,218,.55);
}
.hero-stats dd{
  margin:6px 0 0;font-family:var(--font-display);
  font-size:1.9rem;font-weight:700;color:var(--lime);line-height:1;
}

/* ---------- crawl lane ---------- */
.crawl-lane{
  position:relative;z-index:2;
  height:120px;margin-top:56px;
  width:100%;
}
.crawl-lane .trail{
  position:absolute;left:0;right:0;bottom:16px;height:40px;width:100%;
  opacity:.15;
}
.trail-fill{
  transform-origin:left center;
  animation:trailGrow 60s linear infinite;
}
@keyframes trailGrow{
  0%{transform:scaleX(0)}
  100%{transform:scaleX(1)}
}
.snail-walker{
  position:absolute;bottom:14px;left:0;
  animation:crawl 60s linear infinite;
  will-change:transform;
}
@keyframes crawl{
  0%{transform:translateX(-90px)}
  100%{transform:translateX(100vw)}
}
.snail-walker .snail{
  animation:bob 5.5s ease-in-out infinite;
  filter:drop-shadow(0 3px 0 rgba(42,30,15,.25));
}
@keyframes bob{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(-2px) scaleY(1.02)}
}
.snail-walker .glow{
  position:absolute;left:6px;bottom:-10px;
  width:96px;height:34px;
  background:radial-gradient(ellipse at center, rgba(184,230,74,.4), rgba(184,230,74,0) 70%);
  animation:bob 5.5s ease-in-out infinite;
}
.snail .eyes{animation:blink 9s steps(1,end) infinite}
@keyframes blink{0%,96%{opacity:1}97%,100%{opacity:0}}

/* ---------- sections ---------- */
.section{padding:104px 0}
.section.alt{background:var(--moss-dark)}
.sec-head{max-width:62ch;margin-bottom:44px}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);margin:0 0 14px;
}
.sec-head h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  line-height:1.02;letter-spacing:-.02em;margin:0;color:var(--cream);
}
.sec-sub{color:rgba(245,238,218,.7);margin:16px 0 0;font-size:1.03rem}

/* ---------- terminal ---------- */
.terminal{
  background:var(--brown);
  border:1px solid rgba(184,230,74,.22);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.55);
}
.term-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  border-bottom:1px solid rgba(245,238,218,.12);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  color:rgba(245,238,218,.6);
}
.term-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none;animation:pulse 4.5s var(--ease) infinite}
.term-title{color:var(--cream-dim)}
.term-status{margin-left:auto;color:var(--lime);letter-spacing:.14em;font-size:10.5px}
.term-body{
  margin:0;padding:24px 20px 20px;
  font-family:var(--font-mono);
  font-size:13px;line-height:2.05;
  color:var(--cream-dim);
  overflow-x:auto;
  white-space:pre;
}
.term-body .t{color:var(--lime-dim)}
.term-body .buy{color:var(--lime);font-weight:700}
.term-body .sell{color:#e8b04a;font-weight:700}
.term-body .amt{color:var(--cream)}
.term-body .tk{color:var(--cream);font-weight:700}
.term-body .dim{color:rgba(245,238,218,.45)}
.term-body .line{display:block;opacity:0;animation:lineIn 1.4s var(--ease) forwards}
@keyframes lineIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.cursor{
  display:inline-block;width:8px;height:15px;
  background:var(--lime);vertical-align:-2px;margin-left:4px;
  animation:blinkCur 1.4s steps(1,end) infinite;
}
@keyframes blinkCur{0%,50%{opacity:1}51%,100%{opacity:0}}
.term-foot{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid rgba(245,238,218,.12);
  font-family:var(--font-mono);font-size:11.5px;
  color:rgba(245,238,218,.55);letter-spacing:.06em;
}
.next-label{text-transform:uppercase;letter-spacing:.16em;font-size:10.5px}
.countdown{
  font-size:1.4rem;color:var(--lime);font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.term-note{margin-left:auto;font-style:normal;opacity:.75}

/* ---------- leaderboard ---------- */
.table-scroll{overflow-x:auto}
table.bags{
  width:100%;border-collapse:collapse;
  background:var(--cream);color:var(--brown);
  min-width:560px;
}
table.bags thead th{
  text-align:left;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;
  padding:16px 20px;
  color:var(--brown-soft);
  background:var(--cream-dim);
  border-bottom:1px solid rgba(42,30,15,.22);
}
table.bags td{
  padding:17px 20px;
  border-bottom:1px solid rgba(42,30,15,.1);
  font-size:14.5px;
}
table.bags tbody tr{transition:background 700ms var(--ease)}
table.bags tbody tr:hover{background:#fbf7ea}
table.bags tbody tr:last-child td{border-bottom:0}
.c-rank,td.rank{width:80px;font-family:var(--font-mono);font-weight:700}
td.rank{color:var(--moss-dark)}
tr.top td{background:rgba(184,230,74,.22)}
tr.top:hover td{background:rgba(184,230,74,.3)}
td.wallet{font-family:var(--font-mono);letter-spacing:.02em}
td.wallet .crown{color:var(--moss);margin-left:8px;font-family:var(--font-body);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
td.days{font-weight:700}
.table-note{
  font-family:var(--font-mono);font-size:11px;
  color:rgba(245,238,218,.5);margin:16px 0 0;letter-spacing:.04em;
}

/* ---------- doctrine ---------- */
.doctrine-wrap{max-width:900px}
.doctrine{
  background:var(--cream);color:var(--brown);
  padding:clamp(28px,5vw,64px);
  border-left:4px solid var(--lime);
}
.doctrine p{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.55vw,1.28rem);
  line-height:1.72;margin:0 0 1.35em;
  color:#2a1e0f;
}
.doctrine p:last-child{margin-bottom:0}
.doctrine .drop{
  float:left;font-family:var(--font-display);font-weight:900;
  font-size:4.1em;line-height:.78;margin:.06em .1em 0 0;color:var(--moss);
}

/* ---------- steps ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.steps .card{
  background:var(--moss-deep);
  border:1px solid rgba(184,230,74,.2);
  padding:34px 28px 30px;
  transition:transform var(--slow) var(--ease),border-color var(--slow) var(--ease),background var(--slow) var(--ease);
}
.steps .card:hover{transform:translateY(-5px);border-color:rgba(184,230,74,.55);background:#417037}
.step-num{
  display:block;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.22em;color:var(--lime);margin-bottom:22px;
}
.steps h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,2.6vw,2.15rem);
  margin:0 0 12px;letter-spacing:-.02em;color:var(--cream);line-height:1.05;
}
.steps p{margin:0;color:rgba(245,238,218,.72);font-size:.98rem}

/* ---------- footer ---------- */
.footer{
  background:var(--brown);
  padding:72px 0 56px;
  border-top:1px solid rgba(184,230,74,.22);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  gap:44px;align-items:start;
}
.footer-brand{color:var(--lime)}
.footer-count{
  font-family:var(--font-mono);font-size:12.5px;
  color:rgba(245,238,218,.65);margin:20px 0 0;letter-spacing:.03em;
}
.footer-count strong{color:var(--lime)}
.fl{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(245,238,218,.5);margin:0 0 8px;
}
.ca-foot{
  font-size:12.5px;color:var(--cream);margin:0 0 16px;
  word-break:break-all;
}
.footer-legal p{
  font-size:12.5px;line-height:1.7;color:rgba(245,238,218,.55);margin:0 0 12px;
}
.disclaimer strong{
  color:var(--lime);font-family:var(--font-mono);
  font-size:12px;letter-spacing:.16em;
}
.copy-line{opacity:.7}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .section{padding:76px 0}
  .hero{padding-top:calc(var(--strip-h) + 64px)}
  .hero-stats > div{padding-right:20px;margin-right:20px}
  .hero-stats dd{font-size:1.5rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap,.hero-inner{padding:0 18px}
  #ticker-strip{font-size:11px;gap:8px}
  .hero-title{line-height:.92}
  .crawl-lane{height:86px;margin-top:40px}
  .snail-walker .snail{width:64px;height:44px}
  .snail-walker .glow{width:70px}
  .term-body{font-size:11.5px;line-height:1.9}
  .term-note{margin-left:0;width:100%}
  .hero-stats > div{border-right:0;padding:12px 0;margin:0;width:50%}
  .hero-stats{border-bottom:1px solid rgba(245,238,218,.14)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero-title span,.tagline,.subline,.mark,.hero-actions,.hero-stats{opacity:1 !important}
  .snail-walker{transform:translateX(30vw)}
  .trail-fill{transform:scaleX(.32)}
}

/* ============ ADJUSTMENTS FOR TOP MARKET-TICKER (32px) ============ */
/* Push the branded snail ticker-strip DOWN so market-ticker (32px) is above it */
#ticker-strip{top:32px !important}
/* Ensure hero clears both bars (32 + strip-h) */
.hero{padding-top:calc(32px + var(--strip-h))}

/* ============ LIVE WIRE SECTION ============ */
.section.wire{
  background:linear-gradient(180deg, var(--moss) 0%, var(--moss-deep) 100%);
  position:relative;
  overflow:hidden;
}
.section.wire::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(184,230,74,0.10) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(143,191,53,0.08) 0%, transparent 40%);
  pointer-events:none;
}
.section.wire > .wrap{position:relative;z-index:1}

.wire-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:36px;
}
@media (max-width:900px){.wire-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.wire-grid{grid-template-columns:1fr}}

.wire-card{
  background:rgba(42, 30, 15, 0.35);
  border:1px solid rgba(184,230,74,0.25);
  border-radius:2px;
  padding:22px 20px 24px;
  position:relative;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color 200ms ease, transform 200ms ease;
}
.wire-card:hover{border-color:rgba(184,230,74,0.55);transform:translateY(-2px)}
.wire-card::after{
  content:"";
  position:absolute;top:0;left:0;height:2px;width:34px;
  background:var(--lime);
}
.wire-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(245,238,218,0.55);
  margin:0 0 12px;
}
.wire-value{
  font-family:var(--font-mono);
  font-size:28px;
  font-weight:700;
  color:var(--cream);
  margin:0 0 6px;
  line-height:1.05;
  letter-spacing:-0.02em;
  min-height:32px;
}
.wire-sub{
  font-family:var(--font-mono);
  font-size:12px;
  color:rgba(245,238,218,0.55);
  margin:0;
  letter-spacing:0.02em;
}
.wire-sub .up{color:#b8e64a}
.wire-sub .down{color:#e6884a}

.wire-foot{
  margin-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:rgba(245,238,218,0.55);
  padding-top:16px;
  border-top:1px dashed rgba(245,238,218,0.15);
}
.wire-status{display:inline-flex;align-items:center;gap:8px}
.wire-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(245,238,218,0.35);
  box-shadow:0 0 0 0 rgba(245,238,218,0);
}
.wire-dot.live{
  background:var(--lime);
  animation:wirePulse 2.4s ease-in-out infinite;
}
@keyframes wirePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(184,230,74,0.55)}
  50%{box-shadow:0 0 0 8px rgba(184,230,74,0)}
}

/* ============ FOOTER LINKS ============ */
.footer-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ============ CA-OVERLAY TWEAKS (green vs default) ============ */
/* Hide ca-overlay's own top strip since we already have one; only show the floating card */
#gud-ca-strip{display:none !important}
body{padding-top:0 !important}

/* Override ca-overlay BUY button to use snail lime instead of hardcoded green */
.gud-heroca .btn.buy{
  background:linear-gradient(180deg, var(--lime), var(--lime-dim)) !important;
  color:var(--brown) !important;
  font-weight:700 !important;
}
.gud-heroca .btn.chart{
  border-color:rgba(184,230,74,0.55) !important;
  color:var(--cream) !important;
}
.gud-heroca .btn.chart:hover{
  border-color:var(--lime) !important;
  color:var(--lime) !important;
  background:rgba(184,230,74,0.10) !important;
}
.gud-heroca .live{color:var(--lime) !important}
.gud-heroca .live .d{background:var(--lime) !important;box-shadow:0 0 8px var(--lime) !important}
.gud-heroca .addr{border-color:rgba(184,230,74,0.35) !important}

/* ============ SLOW WAVE (audio player) — snail palette, bottom-LEFT ============ */
.snail-feed{
  position:fixed;
  left:20px;bottom:20px;
  z-index:9998;
  width:260px;
  background:var(--cream);
  color:var(--brown);
  border:1px solid rgba(74,124,63,0.35);
  border-radius:2px;
  box-shadow:0 18px 40px -18px rgba(42,30,15,0.55), 0 2px 6px rgba(42,30,15,0.15);
  font-family:var(--font-mono);
  overflow:hidden;
  animation:sfeedIn 480ms cubic-bezier(.22,.61,.36,1) 800ms both;
}
@keyframes sfeedIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.sfeed-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:var(--moss-dark);
  color:var(--cream);
  border-bottom:1px solid rgba(184,230,74,0.45);
  font-size:9.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.sfeed-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 0 rgba(184,230,74,0.75);
  animation:sfeedPulse 1.8s ease-in-out infinite;
}
@keyframes sfeedPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(184,230,74,0.75)}
  50%{box-shadow:0 0 0 6px rgba(184,230,74,0)}
}
.sfeed-label{flex:1;color:var(--lime)}
.sfeed-close{
  background:transparent;border:none;color:var(--cream);
  font-family:var(--font-mono);font-size:16px;line-height:1;
  padding:0 4px;cursor:pointer;opacity:0.6;
  transition:opacity 160ms;
}
.sfeed-close:hover{opacity:1;color:var(--lime)}

.sfeed-body{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px 10px;
}
.sfeed-meter{
  display:flex;align-items:flex-end;gap:2px;
  height:26px;width:52px;
  padding:2px 0;
}
.sfeed-meter span{
  display:block;width:3px;
  background:var(--moss-dark);
  opacity:0.28;
  height:20%;
  transition:height 90ms ease-out, background 180ms;
  border-radius:1px;
}
.snail-feed.playing .sfeed-meter span{opacity:1;background:var(--moss-deep)}
.snail-feed.playing .sfeed-meter span:nth-child(3n){background:var(--lime-dim)}
.snail-feed.playing .sfeed-meter span:nth-child(4n){background:var(--lime)}

.sfeed-track{flex:1;min-width:0}
.sfeed-title{
  margin:0;font-family:var(--font-display);
  font-size:15px;font-weight:600;
  color:var(--brown);
  line-height:1.2;
  letter-spacing:-0.005em;
}
.sfeed-sub{
  margin:2px 0 0;font-size:9.5px;
  color:rgba(42,30,15,0.55);
  letter-spacing:0.10em;
  text-transform:uppercase;
}

.sfeed-controls{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px 12px;
  border-top:1px dashed rgba(42,30,15,0.18);
}
.sfeed-btn{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--moss-dark);
  color:var(--cream);
  border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform 160ms, background 160ms, color 160ms;
  flex-shrink:0;
}
.sfeed-btn:hover{background:var(--lime);color:var(--brown);transform:scale(1.05)}
.sfeed-btn svg{margin-left:2px}
.snail-feed.playing .sfeed-btn.play svg{display:none}
.snail-feed.playing .sfeed-btn.play::before{
  content:"";
  width:10px;height:12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0/3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0/3px 100% no-repeat;
}

.sfeed-vol{
  flex:1;
  -webkit-appearance:none;appearance:none;
  height:2px;
  background:rgba(42,30,15,0.20);
  border-radius:1px;outline:none;cursor:pointer;
}
.sfeed-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:10px;height:10px;border-radius:50%;
  background:var(--lime);border:1px solid var(--lime-dim);cursor:pointer;
}
.sfeed-vol::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;
  background:var(--lime);border:1px solid var(--lime-dim);cursor:pointer;
}
.sfeed-time{
  font-size:10px;
  color:rgba(42,30,15,0.55);
  letter-spacing:0.06em;
  min-width:32px;text-align:right;
}

/* Minimized "WAVE" pill (bottom-left) */
.sfeed-open[hidden]{display:none !important}
.sfeed-open{
  position:fixed;
  left:20px;bottom:20px;
  z-index:9998;
  z-index:9998;
  background:var(--moss-dark);
  color:var(--cream);
  border:1px solid var(--lime-dim);
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:2px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 18px -8px rgba(42,30,15,0.5);
  transition:background 160ms, color 160ms;
}
.sfeed-open:hover{background:var(--lime);color:var(--brown)}
.sfeed-open-dot{
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  animation:sfeedPulse 1.8s ease-in-out infinite;
}

@media (max-width:500px){
  .snail-feed{
    left:12px;right:12px;bottom:12px;width:auto;
  }
  .sfeed-open{left:12px;bottom:12px}
}