/* ============================================================
   PIXEL ALIENS — Transmission from the Lime Band
   Direction: LIME IS THE CANVAS (inverted from siblings —
   Baihu = lime field on ink; Crocklets = dark swamp + lime accent;
   both own dark-canvas). Here the page IS the signal band: black
   ink structure on live lime, "space" = inverted starfield
   (black stars on lime). Pixel-serif display (Pixolde) + LED
   ticker accent. NOT dark-void, NOT neon-on-dark.
   ============================================================ */

@font-face{font-family:"Pixolde";src:url("./assets/fonts/Pixolde.woff2") format("woff2");font-display:swap;}
@font-face{font-family:"LEDMatrix";src:url("./assets/fonts/LEDMatrix.woff2") format("woff2");font-display:swap;}

:root{
  --lime:#b5ff3a;        /* the band — exact art field */
  --lime-hi:#d4ff7a;
  --lime-deep:#93d81f;
  --ink:#0c0e08;         /* near-black ink structure */
  --ink-soft:#1a1f12;
  --cyan:#12c9ad;        /* accents pulled from the art itself */
  --royal:#2f52c9;
  --orange:#f06a12;
  --violet:#8f2fc9;
  --red:#e0281f;
  --paper:#f3ffd8;
  --disp:"Pixolde","Courier New",monospace;
  --led:"LEDMatrix",monospace;
  --mono:ui-monospace,"SFMono-Regular","Menlo",monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--lime);}
body{
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}

/* ---------- rails ---------- */
.rail{position:fixed;top:0;bottom:0;width:34px;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;gap:24px;padding:120px 0 34px;pointer-events:none;}
.rail-l{left:10px;}.rail-r{right:10px;}
.rail-code{font-family:var(--led);font-size:12px;letter-spacing:2px;writing-mode:vertical-rl;color:var(--ink);opacity:.72;}
.rail-cjk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:5px;writing-mode:vertical-rl;color:var(--ink);opacity:.5;text-transform:uppercase;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:66px;display:flex;align-items:center;
  justify-content:space-between;padding:0 54px;z-index:30;
  background:linear-gradient(to bottom,var(--lime) 40%,rgba(181,255,58,0));}
.brand{font-family:var(--disp);font-size:22px;letter-spacing:1px;color:var(--ink);text-decoration:none;}
.nav-links{display:flex;gap:30px;}
.nav-links a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink);text-decoration:none;opacity:.7;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;
  background:var(--ink);color:var(--lime);border:none;padding:10px 20px;cursor:pointer;
  border-radius:2px;transition:transform .15s;}
.nav-cta:hover{transform:translateY(-2px);}

/* ---------- hero band ticker ---------- */
.hero-band{position:relative;top:0;width:100%;overflow:hidden;background:var(--ink);color:var(--lime);
  padding:9px 0;white-space:nowrap;font-family:var(--led);font-size:14px;letter-spacing:3px;
  display:flex;margin-top:66px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);}
.hero-band span{display:inline-block;animation:marquee 26s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 66px);display:flex;flex-direction:column;position:relative;
  overflow:hidden;}
/* star-map backdrop drawn ON the lime field: ink-tone constellations, orbit rings and
   coordinate glyphs. Ink-on-lime (not lime-on-dark) so the Robinhood lime stays the
   canvas and the space layer reads as a printed chart over it. */
.field-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
/* signal artifacts over the lime field: CRT scanlines + fine static.
   pointer-events none so it never eats clicks. */
.hero-fx{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(12,14,8,.10) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:auto, 140px 140px;opacity:.5;animation:noise 1.1s steps(3) infinite;}
@keyframes noise{0%{background-position:0 0,0 0;}50%{background-position:0 0,-22px 14px;}100%{background-position:0 0,18px -10px;}}
.hero-inner,.hero-band{position:relative;z-index:2;}
/* chromatic-aberration glitch on the display headline */
.title.glitch{position:relative;}
.title.glitch::before,.title.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;
  white-space:pre;pointer-events:none;opacity:.55;}
.title.glitch::before{color:#20e0c0;transform:translate(-3px,0);
  animation:gl-a 3.6s steps(2) infinite;mix-blend-mode:multiply;}
.title.glitch::after{color:#e02060;transform:translate(3px,0);
  animation:gl-b 4.2s steps(2) infinite;mix-blend-mode:multiply;}
@keyframes gl-a{0%,86%,100%{transform:translate(-3px,0);clip-path:none;}88%{transform:translate(-7px,-2px);clip-path:inset(20% 0 55% 0);}92%{transform:translate(4px,1px);clip-path:inset(62% 0 8% 0);}}
@keyframes gl-b{0%,80%,100%{transform:translate(3px,0);clip-path:none;}83%{transform:translate(7px,2px);clip-path:inset(48% 0 24% 0);}90%{transform:translate(-4px,-1px);clip-path:inset(10% 0 70% 0);}}
.hero-inner{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;
  padding:24px 54px 60px;max-width:1340px;margin:0 auto;width:100%;}
.kick{font-family:var(--led);font-size:14px;letter-spacing:3px;color:var(--ink);opacity:.66;margin-bottom:18px;}
.title{font-family:var(--disp);font-size:clamp(64px,10vw,148px);line-height:.86;color:var(--ink);
  letter-spacing:-1px;text-shadow:6px 6px 0 rgba(18,201,173,.5);}
.sub{font-size:16px;line-height:1.65;max-width:452px;margin:26px 0 30px;color:var(--ink);
  background:rgba(243,255,216,.72);border-left:3px solid var(--ink);padding:16px 18px;}
.sub b{background:var(--ink);color:var(--lime);padding:1px 6px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;
  padding:15px 26px;text-decoration:none;cursor:pointer;border-radius:2px;transition:transform .15s;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;}
.btn-primary{background:var(--ink);color:var(--lime);border:2px solid var(--ink);}
.btn-primary:hover{transform:translateY(-3px);}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--lime);}
.hero-stats{display:flex;gap:38px;margin-top:40px;}
.hero-stats div{display:flex;flex-direction:column;}
.hero-stats b{font-family:var(--disp);font-size:30px;color:var(--ink);}
.hero-stats span{font-family:var(--mono);font-size:10px;letter-spacing:2px;opacity:.6;margin-top:4px;}

/* ---------- hero stage ---------- */
.hero-stage{position:relative;height:560px;display:flex;align-items:center;justify-content:center;}
/* dark observation window: gives the starfield a dark ground (light-on-dark = reads as space)
   and gives the front sprite's keyline something to cut against */
/* no drop shadow: shadow made it read as a sticker. Lime bleeds in via the
   inset rule + lime scanline + lime brackets so the window belongs to the page. */
.stage-window{position:absolute;left:6%;top:8%;width:88%;height:80%;
  background:
    linear-gradient(to bottom,rgba(181,255,58,.10),transparent 30%),
    var(--ink);
  overflow:hidden;z-index:0;
  outline:2px solid var(--ink);outline-offset:6px;
  box-shadow:inset 0 0 0 1px rgba(181,255,58,.35);}
.stage-window #stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.win-scan{position:absolute;left:0;right:0;height:2px;background:var(--lime);opacity:.5;
  box-shadow:0 0 12px var(--lime);animation:scan 4.2s linear infinite;z-index:1;}
.win-corner{position:absolute;width:14px;height:14px;border:2px solid var(--lime);z-index:2;}
.win-corner.tl{left:8px;top:8px;border-right:none;border-bottom:none;}
.win-corner.tr{right:8px;top:8px;border-left:none;border-bottom:none;}
.win-corner.bl{left:8px;bottom:8px;border-right:none;border-top:none;}
.win-corner.br{right:8px;bottom:8px;border-left:none;border-top:none;}
.win-label{position:absolute;left:10px;bottom:10px;font-family:var(--led);font-size:11px;
  letter-spacing:2px;color:var(--lime);opacity:.6;z-index:2;}
.cursor{display:inline-block;color:var(--ink);animation:blink 1.05s steps(1) infinite;}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
/* diegetic HUD readout, top-right of the window */
.win-hud{position:absolute;right:10px;top:10px;z-index:2;display:flex;flex-direction:column;
  align-items:flex-end;gap:3px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;
  color:var(--lime);opacity:.72;text-transform:uppercase;}
.win-hud .hud-row{display:flex;gap:6px;align-items:center;}
.win-hud b{color:var(--paper);font-weight:700;font-variant-numeric:tabular-nums;}
.hud-dot{width:6px;height:6px;background:var(--lime);border-radius:50%;
  box-shadow:0 0 6px var(--lime);animation:blink 1.4s steps(1) infinite;}
@media(prefers-reduced-motion:reduce){
  .hero-fx{animation:none;opacity:.3;}
  .title.glitch::before,.title.glitch::after{animation:none;opacity:.3;}
  .cursor,.hud-dot{animation:none;}
}
.specimen{position:absolute;image-rendering:pixelated;}
/* front sprite: bone keyline cuts against BOTH the dark window and the lime field,
   plus a lime rim-light + brightness lift so the charcoal face can't sink into the ink */
.s-lead{width:430px;z-index:3;animation:bob 5s ease-in-out infinite;
  filter:drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper))
         drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper))
         drop-shadow(16px 20px 0 rgba(12,14,8,.42));}
/* back sprites: tighter, fainter shadow = further away.
   back2 pulled clear of the bottom-right bracket so the corner stops tangling. */
.s-back{width:210px;left:2%;top:6%;z-index:1;opacity:.9;transform:rotate(-6deg);
  animation:bob 6.5s ease-in-out infinite;
  filter:drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper))
         drop-shadow(0 2px 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper))
         drop-shadow(5px 6px 0 rgba(12,14,8,.16));}
.s-back2{width:206px;right:-2%;bottom:16%;z-index:4;opacity:1;transform:rotate(5deg);
  animation:bob 7.2s ease-in-out infinite .4s;
  filter:drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper))
         drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper))
         drop-shadow(9px 11px 0 rgba(12,14,8,.24));}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-16px) rotate(var(--r,0deg));}}
.s-back{--r:-6deg;}.s-back2{--r:5deg;}
.stage-tag{position:absolute;bottom:8px;font-family:var(--led);font-size:13px;letter-spacing:2px;
  background:var(--ink);color:var(--lime);padding:5px 12px;z-index:4;}

/* ---------- signal ---------- */
.signal{background:var(--ink);color:var(--paper);padding:100px 54px;}
.sig-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start;}
.sig-lead h2{font-family:var(--disp);font-size:clamp(32px,4vw,54px);line-height:1;color:var(--lime);}
.sig-lead em{color:var(--paper);font-style:normal;border-bottom:4px solid var(--lime);}
.sig-lead p{margin-top:22px;font-size:16px;line-height:1.7;opacity:.82;max-width:400px;}
/* numbered ledger rows, not bordered boxes — differentiates from the traits grid */
.sig-cards{display:flex;flex-direction:column;}
.sig-card{position:relative;display:grid;grid-template-columns:78px 1fr;gap:26px;
  align-items:start;padding:30px 0 30px 4px;border:none;
  border-top:1px solid rgba(248,255,232,.16);transition:padding-left .2s;}
.sig-card:last-child{border-bottom:1px solid rgba(248,255,232,.16);}
.sig-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .25s;}
.sig-card:hover{padding-left:18px;}
.sig-card:hover::before{transform:scaleY(1);}
.sc-n{font-family:var(--disp);font-size:46px;line-height:.85;color:transparent;
  -webkit-text-stroke:2px var(--lime);letter-spacing:-1px;}
.sig-card h3{font-family:var(--disp);font-size:24px;margin:0 0 8px;color:var(--paper);}
.sig-card p{font-size:14px;line-height:1.65;opacity:.7;max-width:430px;}

/* ---------- feed ---------- */
/* tonal separation stops the big flat-lime band from buzzing */
.feed{padding:100px 54px;background:
  linear-gradient(to bottom,rgba(12,14,8,.10),rgba(12,14,8,0) 220px),
  var(--lime);}
.feed-head{max-width:1300px;margin:0 auto 44px;position:relative;}
.feed-live{position:absolute;right:0;bottom:2px;display:flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--lime);font-family:var(--led);font-size:11px;
  letter-spacing:2px;padding:7px 12px;}
.live-dot{width:7px;height:7px;background:var(--lime);border-radius:50%;
  animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}
.feed-head h2{font-family:var(--disp);font-size:clamp(36px,5vw,64px);color:var(--ink);}
.feed-head p{font-size:15px;opacity:.7;margin-top:10px;max-width:460px;}
.feed-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  background:var(--ink);padding:16px;border:2px solid var(--ink);
  box-shadow:10px 10px 0 rgba(12,14,8,.16);}
.feed-cell{aspect-ratio:1;border:1px solid rgba(181,255,58,.22);overflow:hidden;position:relative;
  transition:transform .15s,border-color .15s;}
.feed-cell:hover{transform:translateY(-4px) scale(1.02);border-color:var(--lime);}
.feed-cell img{width:100%;height:100%;image-rendering:pixelated;display:block;}
.feed-cell span{position:absolute;bottom:0;left:0;right:0;font-family:var(--led);font-size:10px;
  background:var(--ink);color:var(--lime);padding:2px 6px;letter-spacing:1px;}

/* ---------- traits ---------- */
.traits{padding:100px 54px;background:var(--ink);color:var(--paper);}
.traits-head{max-width:1300px;margin:0 auto 40px;}
.traits-head h2{font-family:var(--disp);font-size:clamp(32px,4vw,54px);color:var(--lime);}
.traits-head p{font-size:15px;opacity:.72;margin-top:10px;max-width:460px;}
.traits-row{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.trait-chip{border:1px solid rgba(181,255,58,.3);padding:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s;}
.trait-chip:hover{border-color:var(--lime);}
.tc-crop{background:var(--lime);border-bottom:1px solid rgba(181,255,58,.3);
  height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tc-crop img{max-width:88%;max-height:88%;image-rendering:pixelated;
  filter:drop-shadow(3px 3px 0 rgba(12,14,8,.28));}
.tc-meta{padding:16px 18px 18px;}
.tc-meta b{font-family:var(--disp);font-size:18px;color:var(--lime);display:block;margin-bottom:6px;}
.tc-meta span{font-size:13px;opacity:.7;line-height:1.4;}
.tc-tag{position:absolute;top:8px;right:8px;font-family:var(--led);font-size:10px;letter-spacing:1px;
  background:var(--ink);color:var(--lime);padding:3px 7px;font-style:normal;z-index:2;}

/* ---------- mint ---------- */
.mint{padding:100px 54px;background:var(--lime);}
.mint-card{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  border:3px solid var(--ink);background:var(--paper);}
.mint-left{padding:48px 44px;border-right:3px solid var(--ink);}
.mint-left h2{font-family:var(--disp);font-size:clamp(30px,3.6vw,46px);line-height:1;color:var(--ink);margin-top:12px;}
.mint-facts{list-style:none;margin-top:34px;}
.mint-facts li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px dashed rgba(12,14,8,.3);}
.mint-facts span{font-family:var(--mono);font-size:11px;letter-spacing:2px;opacity:.6;}
.mint-facts b{font-family:var(--mono);font-size:14px;}
.mint-right{padding:40px 44px;display:flex;flex-direction:column;align-items:center;}
.decode-window{width:190px;height:190px;border:2px solid var(--ink);position:relative;overflow:hidden;background:var(--lime);}
.decode-window img{width:100%;height:100%;image-rendering:pixelated;}
.decode-scan{position:absolute;left:0;right:0;height:3px;background:var(--cyan);opacity:.8;
  box-shadow:0 0 8px var(--cyan);animation:scan 2.6s linear infinite;}
@keyframes scan{0%{top:-4px;}100%{top:100%;}}
.qty-row{display:flex;align-items:center;gap:18px;margin:26px 0 14px;}
.qty-btn{width:42px;height:42px;font-size:22px;background:var(--ink);color:var(--lime);border:none;cursor:pointer;}
.qty-val{font-family:var(--disp);font-size:30px;min-width:44px;text-align:center;}
.cost-line{font-family:var(--mono);font-size:14px;letter-spacing:1px;margin-bottom:18px;}
.cost-line b{font-family:var(--disp);}
.btn-mint{width:100%;text-align:center;font-size:15px;padding:17px;}
.mint-status{font-family:var(--mono);font-size:12px;margin-top:14px;opacity:.72;text-align:center;min-height:16px;}
.progress{position:relative;width:100%;height:14px;margin-top:20px;border:1px solid var(--ink);
  background:repeating-linear-gradient(-45deg,
    rgba(12,14,8,.42) 0 3px, rgba(12,14,8,0) 3px 7px);}
.progress-bar{height:100%;width:0;min-width:3px;background:var(--ink);transition:width .5s;}
/* 80% free-mint threshold tick, always visible even at 0 fill */
.progress::after{content:"";position:absolute;top:-3px;bottom:-3px;left:80%;width:2px;background:var(--ink);}
.progress-label{width:100%;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:1px;opacity:.66;margin-top:7px;}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:72px 54px 0;}
.foot-top{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1.35fr;gap:60px;
  align-items:start;padding-bottom:52px;}
.foot-mark{font-family:var(--disp);font-size:38px;color:var(--lime);line-height:1;}
.foot-meta{font-family:var(--mono);font-size:12px;line-height:1.6;opacity:.62;margin-top:14px;max-width:300px;}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;justify-items:stretch;}
.foot-ca{text-decoration:none;border-bottom:1px solid var(--lime);transition:opacity .15s;}
.foot-ca:hover{opacity:.7;}
.foot-ca code{color:var(--lime);}
.foot-col h4{font-family:var(--led);font-size:11px;letter-spacing:2px;color:var(--lime);
  margin-bottom:16px;padding-bottom:9px;border-bottom:1px solid rgba(181,255,58,.24);}
.foot-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  font-family:var(--mono);font-size:11px;}
.foot-row span{opacity:.5;letter-spacing:1px;}
.foot-row code{font-family:var(--mono);color:var(--paper);opacity:.9;}
.foot-row code.cid{color:var(--lime);}
.foot-col a{display:block;font-family:var(--mono);font-size:12px;color:var(--paper);opacity:.66;
  text-decoration:none;padding:5px 0;transition:opacity .18s,color .18s;}
.foot-col a:hover{opacity:1;color:var(--lime);}
.foot-bottom{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid rgba(248,255,232,.14);padding:20px 0 26px;
  font-family:var(--led);font-size:10px;letter-spacing:2px;opacity:.5;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .rail{display:none;}
  .nav{padding:0 20px;}
  .nav-links{display:none;}
  .hero-inner{grid-template-columns:1fr;padding:20px 22px 50px;gap:30px;}
  .hero-stage{height:400px;order:-1;}
  .s-lead{width:300px;}.s-back{width:180px;}
  .s-back2{width:170px;right:2%;bottom:10%;}
  .sig-grid{grid-template-columns:1fr;gap:36px;}
  .feed-grid{grid-template-columns:repeat(3,1fr);}
  .traits-row{grid-template-columns:repeat(2,1fr);}
  .mint-card{grid-template-columns:1fr;}
  .mint-left{border-right:none;border-bottom:3px solid var(--ink);}
  .signal,.feed,.traits,.mint{padding:64px 22px;}
  .foot{padding:56px 22px 0;}
  .foot-top{grid-template-columns:1fr;gap:38px;}
  .foot-cols{grid-template-columns:1fr 1fr;gap:26px;}
  .feed-live{position:static;margin-top:16px;width:auto;max-width:100%;
    white-space:normal;line-height:1.4;font-size:10px;}
  .feed-head{margin-bottom:32px;}
}
@media(max-width:520px){
  .feed-grid{grid-template-columns:repeat(2,1fr);}
  .foot-cols{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;gap:8px;}
}

/* ---------- nav: channel links ---------- */
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-ico{font-family:var(--led);font-size:12px;letter-spacing:1px;color:var(--ink);
  text-decoration:none;border:1px solid var(--ink);width:30px;height:30px;
  display:grid;place-items:center;border-radius:2px;transition:background .15s,color .15s;}
.nav-ico:hover{background:var(--ink);color:var(--lime);}

/* ---------- feed cell: button reset + inspect affordance ---------- */
.feed-cell{appearance:none;background:none;padding:0;cursor:pointer;font:inherit;color:inherit;
  border:1px solid rgba(181,255,58,.22);}
.fc-hint{position:absolute;top:0;left:0;right:0;font-family:var(--led);font-size:9px;
  letter-spacing:2px;background:var(--lime);color:var(--ink);padding:3px 6px;text-align:center;
  font-style:normal;opacity:0;transform:translateY(-100%);transition:opacity .15s,transform .15s;}
.feed-cell:hover .fc-hint,.feed-cell:focus-visible .fc-hint{opacity:1;transform:translateY(0);}
.feed-cell:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}

/* ---------- specimen inspector modal ---------- */
.spec-dlg{border:none;padding:0;background:none;max-width:none;max-height:none;width:100%;height:100%;}
.spec-dlg::backdrop{background:rgba(12,14,8,.82);}
.dlg-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(880px,92vw);background:var(--ink);border:2px solid var(--lime);
  box-shadow:12px 12px 0 rgba(12,14,8,.5);padding:0;}
.dlg-close{position:absolute;top:8px;right:10px;z-index:3;background:none;border:none;
  color:var(--lime);font-size:26px;line-height:1;cursor:pointer;font-family:var(--mono);padding:4px 8px;}
.dlg-close:hover{color:var(--paper);}
.dlg-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;align-items:stretch;}
.dlg-art{position:relative;background:var(--lime);border-right:2px solid var(--lime);}
.dlg-art img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated;background:var(--lime);}
.dlg-body{padding:26px 28px 24px;color:var(--paper);min-width:0;}
.dlg-kick{font-family:var(--led);font-size:10px;letter-spacing:3px;color:var(--lime);opacity:.8;}
.dlg-body h3{font-family:var(--disp);font-size:clamp(22px,3vw,32px);color:var(--paper);margin:6px 0 10px;line-height:1;}
.dlg-rare{display:inline-block;font-family:var(--led);font-size:10px;letter-spacing:2px;
  background:var(--lime);color:var(--ink);padding:5px 9px;margin-bottom:16px;}
.dlg-rows{display:flex;flex-direction:column;gap:11px;}
.dr{border-left:2px solid rgba(181,255,58,.35);padding-left:11px;}
.dr-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.dr-top span{font-family:var(--led);font-size:10px;letter-spacing:2px;color:var(--lime);opacity:.85;}
.dr-top b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--paper);text-align:right;}
.dr-bar{height:4px;background:rgba(248,255,232,.12);margin-top:6px;}
.dr-bar i{display:block;height:100%;background:var(--lime);}
.dr-pct{font-family:var(--mono);font-size:10px;letter-spacing:1px;opacity:.55;margin-top:4px;}
.dlg-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.dlg-actions .btn{font-size:11px;padding:11px 16px;}
.dlg-actions .btn-ghost{border-color:var(--lime);color:var(--lime);}
.dlg-note{font-family:var(--mono);font-size:10px;opacity:.45;margin-top:14px;letter-spacing:.5px;}
@media(max-width:700px){
  .dlg-grid{grid-template-columns:1fr;}
  .dlg-art{border-right:none;border-bottom:2px solid var(--lime);max-height:230px;}
  .dlg-body{padding:20px;}
}

/* ---------- alien / deep-space sweetener (decorative only) ---------- */
/* drifting ink motes over the lime band — reads as dust in the signal path */
.motes{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.mote{position:absolute;width:3px;height:3px;background:var(--ink);opacity:.16;
  animation:mote-drift linear infinite;}
@keyframes mote-drift{
  from{transform:translate3d(0,-8vh,0);}
  to{transform:translate3d(0,108vh,0);}
}
/* scanning sweep on the observation window, like a radar pass */
.win-sweep{position:absolute;left:0;right:0;height:36%;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(181,255,58,0),rgba(181,255,58,.13),rgba(181,255,58,0));
  animation:win-sweep 5.5s ease-in-out infinite;}
@keyframes win-sweep{0%,100%{top:-36%;}50%{top:100%;}}
/* orbit ring behind the lead specimen: one thin ellipse, slow rotation */
.orbit{position:absolute;left:50%;top:54%;width:74%;aspect-ratio:1/.34;
  transform:translate(-50%,-50%) rotate(-8deg);border:1px solid rgba(248,255,232,.22);
  border-radius:50%;pointer-events:none;z-index:1;animation:orbit-spin 26s linear infinite;}
.orbit::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;
  background:var(--paper);opacity:.7;}
@keyframes orbit-spin{from{transform:translate(-50%,-50%) rotate(-8deg);}
  to{transform:translate(-50%,-50%) rotate(352deg);}}
@media(prefers-reduced-motion:reduce){
  .mote,.win-sweep,.orbit,.hero-band span{animation:none;}
}