/* ughs, главная. Тёмная: фон из самой тёмной ступени лайма (чернила коллекции), лайм
   остаётся только там, где он родной, в самих угхах, и в редких живых отметках. */
:root{
  --bg:#0F1209;
  --card:#161A0E;
  --hover:#1C2113;
  --fg:#ECEFE2;
  --fg-2:#A3A995;
  --fg-3:#8A907D;              /* не темнее: мелкий текст на карточке держит 4.5:1 */
  --line:#272D1B;
  --line-2:rgba(236,239,226,.26);
  --lime:#CCFF01;
  --down:#F07A5F;
  /* стекло панелей: светлее сверху, как свет на матовом листе */
  --glass:linear-gradient(165deg, rgba(236,239,226,.10), rgba(236,239,226,.03) 45%, rgba(236,239,226,.055));
  --glass-line:rgba(236,239,226,.13);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --font:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px; --gut:24px;
  color-scheme:dark;
  /* мелкое зерно и крупные «облака» неровной краски для шелкографии */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
/* фон: шелкография, растр под углом 18° с мягкими облаками краски (scripts/silk_texture.py), плитка бесшовная */
body{margin:0; background:var(--bg) url(/silk.webp) 0 0 / 900px 900px repeat; color:var(--fg); font-family:var(--font); font-size:15px; line-height:1.45;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body.locked{overflow:hidden}
/* зерно по всей странице, поверх фона и под содержимым */
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--noise); opacity:.06}
.top,main,.foot{position:relative; z-index:1}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime); outline-offset:2px; border-radius:6px}
[hidden]{display:none !important}

/* ── шапка ─────────────────────────────────────────────────────────── */
.top{max-width:var(--wrap); margin:0 auto; padding:20px var(--gut) 14px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.mark{font-weight:800; font-size:40px; letter-spacing:-.05em; line-height:1; text-decoration:none; font-variation-settings:"opsz" 96}
.nav{display:flex; align-items:center; gap:22px; font-weight:500; font-size:15px}
.nav a{text-decoration:none; color:var(--fg-2)}
.nav a:not(.ico):hover{color:var(--fg)}
.nav .ico{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--glass-line); background:rgba(236,239,226,.05); color:var(--fg)}
.nav .ico:hover{border-color:var(--fg-3)}

main{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}

/* ── стойка: коллекция полосой, под ней три токена ────────────────── */
.rack{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:6px}
.tile{border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; min-width:0; position:relative}

/* стекло: большие панели матовые, сквозь них размыто видна шелкография фона (и на страницах Лаборатории и истории) */
.coll,.rows,.tcard,.labx,.labx-how,.labx-next,.story{background:var(--glass); border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(255,255,255,.02), 0 30px 60px -32px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(7px) saturate(1.5); backdrop-filter:blur(7px) saturate(1.5)}

.coll{grid-column:1 / -1; flex-direction:row; gap:22px; padding:14px}
.coll-art{flex:0 0 auto; width:196px; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--lime);
  border:0; padding:0; cursor:pointer; display:block}
.coll-art img{width:100%; height:100%; display:block; image-rendering:pixelated}
.coll-body{display:flex; flex-direction:column; min-width:0; flex:1; padding:4px 4px 2px 0}
.coll-name{margin:0; font-size:46px; font-weight:800; letter-spacing:-.05em; line-height:.95; font-variation-settings:"opsz" 96}
.coll-sub{margin:7px 0 0; color:var(--fg-2); font-size:14.5px}
.coll-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 18px}
.coll-stats div{min-width:0}
.coll-stats dt{font-size:12.5px; color:var(--fg-2)}
.coll-stats dd{margin:3px 0 0; font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.coll-stats small{display:block; margin-top:2px; font-size:12.5px; color:var(--fg-3); font-variant-numeric:tabular-nums}
.coll-strip{flex:0 0 auto; margin-left:auto; display:grid; grid-template-columns:repeat(4, 92px); grid-auto-rows:92px; gap:8px; align-content:center}
.coll-strip button{padding:0; border:0; border-radius:var(--r-sm); overflow:hidden; background:var(--lime); cursor:pointer}
.coll-strip img{width:100%; height:100%; display:block; image-rendering:pixelated}
.coll-strip button:hover{outline:2px solid var(--fg); outline-offset:2px}

.acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:999px;
  background:var(--fg); color:var(--bg); border:1px solid var(--fg); font:700 14px/1 var(--font); text-decoration:none;
  white-space:nowrap; cursor:pointer}
.btn:hover{background:#fff; border-color:#fff}
.btn.ghost{color:var(--fg)}
.btn.done{background:var(--lime); color:var(--bg); border-color:var(--lime)}
.btn .s{display:none}

/* токены: три одинаковые стеклянные таблички, как карточка коллекции: аватарка на лайме, имя, строка, кнопка.
   Токены равные, поэтому без выделения; вся табличка ведёт на покупку. Аватарки с их страниц на PONS
   в родном размере (tok/*.webp), пиксельные растягиваются без размытия, у $TEST крупнее и сглаживается. */
.toks{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.tcard{display:grid; grid-template-columns:60px minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 14px 12px 12px;
  border-radius:var(--r-lg); color:inherit; text-decoration:none; min-width:0}
.tcard:hover{border-color:rgba(236,239,226,.28)}
.tcard-av{width:60px; height:60px; border-radius:12px; background:var(--lime); image-rendering:pixelated; display:block}
.tcard-av.smooth{image-rendering:auto}
.tcard-txt{min-width:0; display:flex; flex-direction:column; gap:3px}
.tcard-txt b{font-size:21px; font-weight:800; letter-spacing:-.035em; line-height:1.05}
.tcard-txt small{font-size:12.5px; line-height:1.35; color:var(--fg-2)}
.tcard-buy{height:36px; padding:0 16px}
.tcard:hover .tcard-buy{background:#fff; border-color:#fff}

/* ── лента ──────────────────────────────────────────────────────────── */
.feed{margin-top:46px}
.feed-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.feed-head h2{margin:0; font-size:30px; font-weight:800; letter-spacing:-.04em; line-height:1}
.feed-live{margin:0; display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--fg-2)}
.feed-live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lime)}
.chips{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
/* стеклянные кнопки: светлее сверху, размытый фон под ними, как у панелей */
.chip,.more,.btn.ghost{background:linear-gradient(180deg, rgba(236,239,226,.13), rgba(236,239,226,.05)); border:1px solid rgba(236,239,226,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px -10px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4)}
.chip{height:32px; padding:0 13px; border-radius:999px; color:var(--fg-2); font:600 13.5px/1 var(--font); cursor:pointer}
.chip:hover,.more:hover,.btn.ghost:hover{background:linear-gradient(180deg, rgba(236,239,226,.2), rgba(236,239,226,.08)); border-color:rgba(236,239,226,.3); color:var(--fg)}
.chip.on{background:var(--fg); color:var(--bg); border-color:var(--fg)}

.rows{list-style:none; margin:0; padding:0; border-radius:var(--r-lg); overflow:hidden}
.rows:empty{min-height:120px}
.row{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; padding:11px 16px;
  border:0; border-top:1px solid rgba(236,239,226,.075); color:inherit; text-decoration:none; width:100%; background:none;
  font:inherit; text-align:left; cursor:pointer}
.rows li:first-child .row{border-top:0}
.row:hover{background:rgba(236,239,226,.045)}
.r-ic{display:block; position:relative; width:44px; height:44px; border-radius:var(--r-sm); overflow:hidden; background:var(--lime)}
.r-ic img{width:100%; height:100%; display:block; image-rendering:pixelated}
.r-ic img.smooth{image-rendering:auto}
.r-ic.stack{overflow:visible; background:none}
.r-ic.stack img{position:absolute; width:34px; height:34px; border-radius:9px; border:2px solid #1A1F12; background:var(--lime)}
.r-ic.stack img:nth-child(1){left:0; top:0}
.r-ic.stack img:nth-child(2){left:6px; top:5px}
.r-ic.stack img:nth-child(3){left:12px; top:10px}
/* запасной значок токена без аватарки */
.r-ic.tk{display:grid; place-items:center; background:var(--fg); color:var(--bg); font-weight:800; font-size:10.5px; letter-spacing:-.01em}
.r-txt{display:block; min-width:0}
.r-what{display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.r-what b{font-weight:700}
.r-what .sold{color:var(--fg-2); font-weight:600}
.row.lab .r-what b:first-child{color:var(--lime)}
.r-sub{display:block; margin-top:2px; font-size:13px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.r-amt{display:block; text-align:right; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap}
.r-amt small{display:block; margin-top:2px; font-weight:500; font-size:12.5px; color:var(--fg-3)}
.row.new{animation:fresh 2.2s ease-out}
@keyframes fresh{from{background:rgba(204,255,1,.16)}to{background:transparent}}
.feed-empty{padding:40px 16px; text-align:center; color:var(--fg-2)}
.more{display:block; margin:12px auto 0; height:38px; padding:0 18px; border-radius:999px; font:600 14px/1 var(--font); color:var(--fg); cursor:pointer}

/* ── лаборатория: лаймовая полоса во всю ширину, плоская краска, как у шелкографии ─────── */
.band{position:relative; z-index:1; margin-top:64px; background:var(--lime); color:var(--bg)}
.band-in{max-width:var(--wrap); margin:0 auto; padding:56px var(--gut) 44px}
.band-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:40px; align-items:end}
.band-title{position:relative; margin:0; font-size:112px; font-weight:800; letter-spacing:-.055em; line-height:.8; white-space:nowrap;
  font-variation-settings:"opsz" 96}
.pr-a{position:relative; display:block; color:var(--bg); -webkit-text-stroke:2px var(--bg)}
.pr-b{position:absolute; left:0; top:0; display:block; color:transparent; background:radial-gradient(circle, rgba(15,18,9,.5) 1.4px, transparent 1.95px) 0 0 / 5.5px 5.5px;
  -webkit-background-clip:text; background-clip:text; transform:translate(8px, 7px)}
.band-text p{margin:0 0 18px; max-width:50ch; font-size:17px; line-height:1.5; font-weight:500}
.band .btn{background:var(--bg); color:var(--lime); border-color:var(--bg)}
.band .btn:hover{background:#000; border-color:#000}
.band .btn.ghost{background:transparent; color:var(--bg); border-color:rgba(15,18,9,.55); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
.band .btn.ghost:hover{border-color:var(--bg); background:transparent}
.band .btn:focus-visible{outline-color:var(--bg)}
.band-steps{list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 12px}
.band-steps li{display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:0 10px; min-width:0}
.band-steps img{grid-column:1 / -1; width:100%; height:auto; aspect-ratio:1; display:block; image-rendering:pixelated; margin-bottom:6px}
.band-steps b{font-size:20px; font-weight:800; letter-spacing:-.03em}
.band-steps span{font-size:13.5px; opacity:.6; font-variant-numeric:tabular-nums}

/* ── подвал ───────────────────────────────────────────────────────── */
.foot{max-width:var(--wrap); margin:0 auto; padding:40px var(--gut) 44px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--fg-3)}
.foot-links{display:flex; gap:18px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--fg)}

/* ── карточка угха ────────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55)}
.sheet{position:fixed; top:0; right:0; bottom:0; z-index:50; width:min(420px, 100%); overflow-y:auto; padding:22px;
  background:rgba(15,18,9,.8); border-left:1px solid var(--glass-line); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
  transform:translateX(102%); transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.sheet.open{transform:none}
.sheet-x{position:absolute; z-index:2; top:30px; right:30px; width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-line);
  background:rgba(15,18,9,.7); cursor:pointer; font-size:14px; color:var(--fg)}
.sheet-art{display:block; width:100%; height:auto; aspect-ratio:1; border-radius:var(--r-md); background:var(--lime); image-rendering:pixelated}
.sheet-name{margin:16px 0 4px; font-size:28px; font-weight:800; letter-spacing:-.04em}
.sheet-meta{margin:0 0 14px; display:flex; gap:12px; flex-wrap:wrap; font-size:13.5px; color:var(--fg-2)}
.sheet-meta a{color:var(--fg)}
.sheet-traits{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.tr{padding:8px 10px; border:1px solid rgba(236,239,226,.1); border-radius:var(--r-sm); background:rgba(236,239,226,.045); min-width:0}
.tr span{display:block; font-size:11.5px; color:var(--fg-2)}
.tr b{display:block; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr i{font-style:normal; font-size:11.5px; color:var(--fg-3)}
.tr.rare{border-color:var(--lime)}
.sheet-label{margin:18px 0 8px; font-size:13px; color:var(--fg-2)}
.sheet-lab{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.sheet-lab img{width:100%; height:auto; aspect-ratio:1; border-radius:var(--r-sm); background:var(--lime); image-rendering:pixelated}
.sheet .acts{margin-top:18px}

/* ── узкие экраны ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  .coll-strip{grid-template-columns:repeat(3, 84px); grid-auto-rows:84px}
  .coll-strip button:nth-child(n+7){display:none}
}
@media (max-width:900px){
  .coll-strip{display:none}
}
@media (max-width:760px){
  :root{--gut:16px}
  .mark{font-size:34px}
  .nav{gap:14px; font-size:14.5px}
  .nav a[href="#activity"]{display:none}
  .rack{gap:8px}
  .coll{gap:12px; padding:10px}
  .coll-art{width:118px; align-self:flex-start}
  .coll-body{padding:2px 0 0}
  .coll-name{font-size:30px}
  .coll-sub{display:none}
  .coll-stats{gap:8px; margin:8px 0 10px}
  .coll-stats dt{font-size:11.5px}
  .coll-stats dd{font-size:16px}
  .coll-stats small{font-size:11.5px}
  .coll .btn{height:34px; padding:0 13px; font-size:13px}
  .btn .l{display:none}
  .btn .s{display:inline}
  .rack{grid-template-columns:1fr}
  .toks{grid-template-columns:1fr; gap:8px}
  .tcard{grid-template-columns:52px minmax(0,1fr) auto; gap:12px; padding:10px 12px 10px 10px}
  .tcard-av{width:52px; height:52px; border-radius:10px}
  .tcard-txt b{font-size:19px}
  .tcard-txt small{font-size:12px}
  .feed{margin-top:34px}
  .feed-head h2{font-size:26px}
  .chips{margin-left:0; width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px}
  .row{grid-template-columns:40px minmax(0,1fr) auto; gap:11px; padding:10px 12px}
  .r-ic{width:40px; height:40px}
  .r-what{font-size:14px}
  .band{margin-top:44px}
  .band-in{padding:36px var(--gut) 30px}
  .band-head{grid-template-columns:1fr; gap:18px}
  .band-title{font-size:64px}
  .band-text p{font-size:15.5px}
  .band-steps{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 12px; margin-top:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .row.new{animation:none}
  .sheet{transition:none}
}