/* Self-hosted type stack (latin subset, woff2). All three are variable
   faces, so one @font-face per family with a weight RANGE — per-weight rules
   would refetch identical bytes.

   display : Newsreader       — engraved editorial serif, star-catalogue masthead
   body    : Familjen Grotesk — grotesk with character, not an Inter clone
   mono    : Spline Sans Mono — observatory readout for IDs and telemetry */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/newsreader-var.woff2') format('woff2');}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/familjen-var.woff2') format('woff2');}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/spline-mono-var.woff2') format('woff2');}

/* Planetss — cosmic vector theme.
   Deliberately NOT pixel-art: rounded geometric sans, thick ink outlines,
   flat colour blocks, orbital motion. Palette lifted from the art itself. */

:root{
  --ink:#171210;          /* deep void */
  --ink2:#1f1815;
  --card:#251d1a;
  --line:#3b2f29;
  --txt:#f4ece4;
  --dim:#ab9789;
  --lime:#10cac4;         /* crust */
  --orange:#f0761f;       /* mantle */
  --cyan:#8eab9d;         /* core / creatures */
  --neon:#00b258;         /* flora */
  --tan:#f47484;
  --r:2px;
  --mx:1240px;

  /* type system: condensed display / grotesk body / wide technical mono */
  --disp:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Familjen Grotesk',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--txt);
  font-family:var(--sans);
  line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,select,input{font-family:inherit}

/* width:100% (not the canvas innerWidth attribute) — innerWidth includes the
   scrollbar, which pushed the canvas 15px past clientWidth. */
#void{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;max-width:100%}
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ───── deep-space backdrop layers ─────
   All three are fixed + pointer-events:none and sit UNDER content (z-index 0/1).
   max-width:100% on every one: a fixed layer sized off innerWidth includes the
   scrollbar and reintroduces horizontal overflow. */
/* The drifting scale lives on ::before, NOT on #nebula itself. Scaling a
   fixed inset:0 element grows its own box past clientWidth (measured 1350px on
   a 1265px viewport = 61px of page overflow). Clipping it with overflow:hidden
   on the parent keeps the motion and costs zero layout width. */
#nebula{
  position:fixed;inset:0;z-index:0;pointer-events:none;max-width:100%;
  overflow:hidden;
}
#nebula::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(52vw 40vw at 12% 8%,rgba(142,171,157,.13),transparent 62%),
    radial-gradient(46vw 38vw at 88% 22%,rgba(16,202,196,.10),transparent 64%),
    radial-gradient(60vw 46vw at 70% 88%,rgba(240,118,31,.09),transparent 66%);
  
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.07)}
}
#comets{position:fixed;inset:0;z-index:1;pointer-events:none;max-width:100%;overflow:hidden}
#comets i{
  position:absolute;top:-12%;left:var(--x,20%);width:2px;height:120px;border-radius:2px;
  background:linear-gradient(to bottom,transparent,rgba(238,242,255,.85),transparent);
  transform:rotate(22deg);opacity:0;
  opacity:0;
}
#comets i:nth-child(1){--x:18%;--d:11s;--t:1s}
#comets i:nth-child(2){--x:56%;--d:14s;--t:5s}
#comets i:nth-child(3){--x:82%;--d:9s;--t:8s}
@keyframes streak{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(22deg)}
  8%{opacity:.9}
  60%{opacity:.35}
  100%{opacity:0;transform:translate3d(-34vw,128vh,0) rotate(22deg)}
}
/* Respect reduced-motion: kill the ambient drift/streaks, keep the art. */
@media (prefers-reduced-motion:reduce){
  #nebula,#comets i{animation:none}
  #comets{display:none}
}

section,header,footer{position:relative;z-index:2}
.wrap{max-width:var(--mx);margin:0 auto;padding:96px 24px}

/* ───── telemetry strip ───── */
#telemetry{
  position:relative;z-index:55;border-bottom:1px solid var(--line);
  background:#1a1411;
}
.telrow{
  display:flex;align-items:center;gap:26px;padding:9px 24px;overflow-x:auto;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  scrollbar-width:none;
}
.telrow::-webkit-scrollbar{display:none}
.tel{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto}
.tel b{color:var(--txt);font-weight:700;letter-spacing:.01em}
.tel-end{margin-left:auto;color:var(--orange);font-weight:700}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--dim);
  box-shadow:0 0 0 3px rgba(171,151,137,.14);flex:0 0 auto;
}
.dot.live{background:var(--neon);box-shadow:0 0 0 3px rgba(16,202,196,.16);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ───── nav ───── */
#nav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:24px;
  padding:14px 24px;background:rgba(26,20,17,.9);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;letter-spacing:-.005em;font-size:23px}
.mark{position:relative;width:26px;height:26px;flex:none}
.mark i{position:absolute;border-radius:50%;display:block}
.mark i:nth-child(1){inset:5px;background:var(--lime);border:2px solid #120d0b}
.mark i:nth-child(2){inset:0;border:2px solid var(--cyan);opacity:.65}
.mark i:nth-child(3){width:5px;height:5px;background:var(--orange);top:1px;left:11px;border:1px solid #120d0b}
.links{display:flex;gap:26px;margin-left:auto;font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--dim)}
.links a:hover{color:var(--lime)}
#burger{display:none;background:none;border:0;cursor:pointer;width:34px;height:34px;flex-direction:column;gap:6px;justify-content:center;align-items:center}
#burger span{display:block;width:20px;height:2px;background:var(--txt)}
#drawer{
  display:none;position:sticky;top:59px;z-index:59;flex-direction:column;
  background:var(--ink2);border-bottom:1px solid var(--line);
}
#drawer.on{display:flex}
#drawer a{padding:14px 24px;border-top:1px solid var(--line);font-weight:600}

/* ───── buttons ───── */
.btn{
  border:2px solid transparent;border-radius:2px;padding:12px 24px;
  font-weight:700;font-size:13.5px;letter-spacing:.04em;cursor:pointer;
  transition:transform .14s,box-shadow .18s,background .18s,color .18s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn.sm{padding:8px 16px;font-size:12.5px}
.btn.wide{width:100%;padding:15px 24px;font-size:15px}
.btn-primary{background:var(--lime);color:#06211f;border-color:#06211f;box-shadow:0 4px 0 #0a6b68}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 #0a6b68}
.btn-primary:disabled{background:#2f2622;color:#8a7a6e;border-color:#241c19;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--txt);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}

/* ───── hero ───── */
.hero{
  max-width:var(--mx);margin:0 auto;
  padding:clamp(46px,6vw,96px) 24px clamp(62px,8vw,108px);
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(30px,4.6vw,68px);align-items:start;
}
.pill{
  display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--cyan);border:1.5px solid rgba(142,171,157,.35);
  background:rgba(142,171,157,.07);padding:7px 14px;border-radius:2px;margin-bottom:22px;
}
.hero h1{
  font-family:var(--disp);
  font-size:clamp(46px,7.2vw,96px);line-height:.97;font-weight:500;
  letter-spacing:-.021em;
}
.hero h1 em{font-style:normal;color:var(--lime);box-shadow:inset 0 -.09em 0 rgba(16,202,196,.28)}
.lede{color:var(--dim);font-size:17px;max-width:54ch;margin:22px 0 30px}
.lede b{color:var(--txt);font-weight:700}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-size:21px;font-weight:700;font-family:var(--mono);letter-spacing:.005em}
.hero-stats span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}

.hero-art{display:flex;align-items:center;justify-content:center}
.orbit{position:relative;width:min(100%,460px);aspect-ratio:1}
/* orbital rings — decorative, sit behind the planet (core is z-index auto>0).
   The wrapper clips the rings' LAYOUT box: a square div rotated 45° grows its
   bounding box by 1.41x (measured 39px of page overflow at 1024px), even though
   a border-radius:50% circle looks identical at every angle. Clipping the
   wrapper removes the overflow with zero visual change. */
.rings{position:absolute;inset:0;overflow:hidden;border-radius:50%;pointer-events:none}
.ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(171,151,137,.28);
}
/* Both insets must be >= 0: the .rings wrapper clips, so a negative inset
   would silently cut the outer ring off instead of showing it. */
.ring.r1{inset:7%}
/* r2 is a SOLID circle: rotating it produces no visible change while its
   rotated bounding box measured 733px (vs 463px) and pushed the page 61px
   wide. Outer ring stays static and inset stays inside the orbit box. */
.ring.r2{inset:0;border-style:solid;border-color:rgba(142,171,157,.16)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}
.core{
  position:absolute;inset:16%;border-radius:50%;overflow:hidden;
  border:3px solid #120d0b;box-shadow:0 0 0 6px rgba(16,202,196,.12),0 30px 70px rgba(0,0,0,.6);
}
.core img{width:100%;height:100%;object-fit:cover}
.sat{
  position:absolute;width:23%;border-radius:50%;border:2.5px solid #120d0b;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
}
.s1{top:-2%;left:38%}
.s2{right:-3%;top:40%}
.s3{bottom:-2%;left:30%}
.s4{left:-4%;top:32%;width:18%}
@keyframes bob{50%{transform:translateY(-14px)}}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%)}
.scroll-hint span{display:block;width:22px;height:34px;border:2px solid var(--line);border-radius:2px;position:relative}
.scroll-hint span:after{content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;background:var(--lime);border-radius:2px;transform:translateX(-50%);animation:sd 1.5s infinite}
@keyframes sd{0%,100%{opacity:0;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,9px)}}

/* ───── section heads ───── */
.eyebrow{
  display:inline-block;margin-bottom:12px;
  font-family:var(--mono);
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);
}
.eyebrow::before{
  content:'';display:inline-block;width:26px;height:1.5px;vertical-align:middle;
  margin-right:10px;background:linear-gradient(90deg,transparent,var(--cyan));
}
.sec-head{margin-bottom:40px;max-width:66ch;border-left:2px solid var(--line);padding-left:22px}
.sec-head h2{font-family:var(--disp);font-size:clamp(31px,4.3vw,55px);font-weight:500;letter-spacing:-.018em;line-height:1.02}
.sec-head p{color:var(--dim);margin-top:12px;font-size:16.5px}

/* ───── notice ───── */
.notice{
  border:1.5px dashed rgba(240,118,31,.45);background:rgba(240,118,31,.07);
  border-radius:var(--r);padding:18px 20px;margin-bottom:30px;
}
.notice b{color:var(--orange);display:block;margin-bottom:4px}
.notice span{color:var(--dim);font-size:14.5px}

/* ───── mint ───── */
/* minmax(0,Xfr) NOT Xfr: a grid track's automatic minimum is min-content, so
   wide children (the 6-col pick grid) stretched each lane to 381px inside a
   339px column and overflowed the page by 24px. */
.mint-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px}
.lane{
  background:var(--card);border:1px solid var(--line);
  border-top:2px solid var(--lime);border-radius:2px;
  padding:30px 26px 26px;position:relative;min-width:0;
}
.lane-tag{
  position:absolute;top:-11px;left:22px;background:var(--lime);color:#06211f;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;padding:4px 11px;border-radius:2px;
}
.lane-tag.alt{background:var(--cyan)}
.lane h3{font-family:var(--disp);font-size:32px;font-weight:500;letter-spacing:-.017em;margin-top:7px}
.lane-sub{color:var(--dim);font-size:14.5px;margin:8px 0 20px}
.qty{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.qty button{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--line);
  background:var(--ink2);color:var(--txt);font-size:22px;font-weight:700;cursor:pointer;flex:none;
}
.qty button:hover{border-color:var(--lime);color:var(--lime)}
.qty-val{flex:1;text-align:center}
.qty-val b{display:block;font-size:29px;font-weight:700;font-family:var(--mono);letter-spacing:.005em;line-height:1}
.qty-val span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.qrow{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;
}
.qrow span{color:var(--dim)}
.qrow b{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.005em;min-width:0;text-align:right}
.lane .btn.wide{margin-top:18px}

.pickbar{display:flex;gap:10px;margin-bottom:16px}
.pickbar input{
  flex:1;min-width:0;background:var(--ink);border:1px solid var(--line);
  border-radius:2px;padding:12px 18px;color:var(--txt);font-size:14.5px;
}
.pickbar input:focus{outline:none;border-color:var(--lime)}
.pickgrid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:7px;
}
.cell{
  position:relative;aspect-ratio:1;border-radius:2px;overflow:hidden;cursor:pointer;
  border:2px solid var(--line);background:#221a17;
  background-repeat:no-repeat;transition:border-color .15s,transform .15s;
}
.cell:hover{border-color:var(--lime);transform:scale(1.06);z-index:3}
.cell.sel{border-color:var(--lime);box-shadow:0 0 0 3px rgba(16,202,196,.3)}
.cell.sel:after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,33,31,.6);color:var(--lime);font-weight:900;font-size:18px;
}
.cell i{
  position:absolute;bottom:0;left:0;right:0;font-style:normal;font-size:9px;
  text-align:center;background:rgba(18,13,11,.82);color:var(--dim);
  font-family:var(--mono);font-size:7.5px;letter-spacing:.005em;padding:1px 0;
}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.pager span{font-size:11.5px;color:var(--dim);font-family:var(--mono);letter-spacing:.005em}
.tray{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;min-height:38px;
  padding:9px;background:var(--ink);border:1px solid var(--line);border-radius:2px;
}
.tray-empty{color:var(--dim);font-size:13px;padding:3px 4px}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:rgba(16,202,196,.12);
  border:1px solid rgba(16,202,196,.4);color:var(--lime);border-radius:2px;
  padding:4px 8px 4px 10px;font-size:11px;font-weight:400;font-family:var(--mono);letter-spacing:.005em;
}
.chip button{background:none;border:0;color:var(--lime);cursor:pointer;font-size:15px;line-height:1;padding:0}

/* ───── explore ───── */
.layers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:36px}
.layer{
  background:var(--card);border:1px solid var(--line);border-radius:2px;padding:16px;
  border-top:3px solid var(--lime);min-width:0;
}
.layer:nth-child(2){border-top-color:var(--neon)}
.layer:nth-child(3){border-top-color:var(--cyan)}
.layer:nth-child(4){border-top-color:var(--orange)}
.layer:nth-child(5){border-top-color:#efb014}
.layer:nth-child(6){border-top-color:var(--tan)}
.layer b{display:block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);overflow-wrap:anywhere}
.layer span{display:block;font-size:23px;font-weight:700;font-family:var(--mono);letter-spacing:.005em;line-height:1.2}
.layer i{font-style:normal;font-size:11.5px;color:var(--dim)}
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.gcard{
  position:relative;border:2px solid var(--line);border-radius:2px;overflow:hidden;
  cursor:pointer;background:#221a17;transition:border-color .15s,transform .15s;
}
.gcard:hover{border-color:var(--lime);transform:scale(1.03);z-index:3}
.gcard img{aspect-ratio:1;object-fit:cover;width:100%}
.gcard b{
  position:absolute;left:0;right:0;bottom:0;font-size:10.5px;font-weight:700;
  background:rgba(18,13,11,.85);color:var(--dim);text-align:center;padding:3px 0;
  font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.005em;
}

/* ───── atlas ───── */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.filters select{
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:10px 16px;color:var(--txt);font-size:13.5px;cursor:pointer;max-width:230px;
}
.filters select:focus{outline:none;border-color:var(--lime)}
.fcount{margin-left:auto;font-size:11.5px;color:var(--dim);font-family:var(--mono);letter-spacing:.005em}
.atlasgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}

/* ───── roadmap ───── */
.road{display:grid;gap:14px}
.rd{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:2px;padding:20px 22px;
}
.rd b{font-family:var(--disp);font-size:24px;font-weight:500;letter-spacing:-.014em;display:block;margin-bottom:5px}
.rd span{color:var(--dim);font-size:14.5px}
.rd i{
  font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;
  padding:5px 11px;border-radius:2px;background:var(--ink);color:var(--dim);
  border:1px solid var(--line);white-space:nowrap;
}
.rd.done{border-left-color:var(--lime)}
.rd.done i{background:rgba(16,202,196,.15);color:var(--lime);border-color:rgba(16,202,196,.4)}
.rd.next{border-left-color:var(--orange)}
.rd.next i{background:rgba(240,118,31,.14);color:var(--orange);border-color:rgba(240,118,31,.4)}

/* ───── faq ───── */
.faq{display:grid;gap:10px}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:2px;padding:18px 22px;
}
.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:'+';color:var(--lime);font-weight:900;margin-right:10px}
.faq details[open] summary:before{content:'−'}
.faq p{color:var(--dim);margin-top:12px;font-size:15px}
.faq p b{color:var(--txt)}

/* ───── footer ───── */
footer{border-top:1px solid var(--line);margin-top:40px;background:var(--ink2)}
.fwrap{display:flex;justify-content:space-between;gap:26px;padding:40px 24px;flex-wrap:wrap}
.fwrap b{display:block;font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px}
.fwrap span{color:var(--dim);font-size:14px;max-width:46ch;display:block}
.fsoc{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.soon{
  font-size:12.5px;color:var(--dim);border:1px dashed var(--line);
  border-radius:2px;padding:7px 14px;
}

/* ───── modals ───── */
.modal{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:#120d0b;padding:20px;
}
.modal.on{display:flex}
.sheet{
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  width:100%;max-width:430px;max-height:88vh;overflow:auto;
}
.wide-sheet{max-width:820px}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.sheet-head b{font-family:var(--disp);font-size:23px;font-weight:500;letter-spacing:-.012em}
.x{background:none;border:0;color:var(--dim);font-size:26px;cursor:pointer;line-height:1}
.x:hover{color:var(--txt)}
.wlist{padding:14px}
.wrow{
  display:flex;align-items:center;gap:13px;width:100%;padding:13px 15px;
  background:var(--ink2);border:1px solid var(--line);border-radius:2px;
  color:var(--txt);font-weight:700;font-size:15px;cursor:pointer;margin-bottom:9px;text-align:left;
}
.wrow:hover{border-color:var(--lime)}
.wrow img{width:28px;height:28px;border-radius:2px;flex:none}
.wmsg{padding:0 22px 20px;color:var(--dim);font-size:14px}
.wmsg a{color:var(--lime);text-decoration:underline}

.tm-body{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:22px}
.tm-art #tmArt{
  width:100%;aspect-ratio:1;border-radius:2px;border:2px solid var(--line);
  background-color:#221a17;background-repeat:no-repeat;
}
.tm-rank{
  background:var(--ink2);border:1px solid var(--line);border-radius:2px;
  padding:14px 16px;margin-bottom:14px;
}
.tm-rank span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;display:block}
.tm-rank b{font-size:22px;font-weight:700;font-family:var(--mono);letter-spacing:.005em}
.tm-rank i{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.05em;margin-left:9px;color:var(--lime)}
.tm-traits{display:grid;gap:7px;margin-bottom:16px}
.tt{
  display:flex;justify-content:space-between;gap:10px;font-size:13.5px;
  padding:9px 13px;background:var(--ink2);border:1px solid var(--line);border-radius:2px;
}
.tt span{color:var(--dim);flex:none}
.tt b{font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}

#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:200;
  background:var(--card);border:1.5px solid var(--lime);color:var(--txt);
  padding:13px 22px;border-radius:2px;font-size:14.5px;font-weight:600;
  transition:transform .3s;max-width:90vw;text-align:center;
}
#toast.on{transform:translate(-50%,0)}
#toast.bad{border-color:var(--orange)}

/* ───── responsive ───── */
@media(max-width:1080px){
  .layers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal{grid-template-columns:repeat(4,1fr)}
  .atlasgrid{grid-template-columns:repeat(8,1fr)}
}
@media(max-width:900px){
  .links{display:none}
  #burger{display:flex}
  .hero{grid-template-columns:1fr;padding-top:44px;gap:40px}
  .hero-art{order:-1}
  .orbit{width:min(100%,340px)}
  .mint-grid{grid-template-columns:minmax(0,1fr)}
  .tm-body{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wrap{padding:64px 18px}
  .layers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal{grid-template-columns:repeat(3,1fr)}
  .atlasgrid{grid-template-columns:repeat(5,1fr)}
  .pickgrid{grid-template-columns:repeat(6,1fr)}
  .hero-stats{gap:22px}
  .hero-stats b{font-size:18px}
  .rd{grid-template-columns:1fr}
  #nav{gap:12px;padding:12px 18px}
  #connectBtn{padding:10px 16px;font-size:13px}
  .filters select{max-width:100%;flex:1 1 140px}
  .fcount{margin-left:0;flex-basis:100%}
}
@media(max-width:380px){
  .pickgrid{grid-template-columns:repeat(5,1fr)}
  .atlasgrid{grid-template-columns:repeat(4,1fr)}
}