/* BOT BUDDIES */
@font-face { font-family: "Silk"; src: url(../fonts/silkscreen-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silk"; src: url(../fonts/silkscreen-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #fbf5e6; --card: #fffdf7; --ink: #1b1a2e; --mute: #55526b; --dim: #8a879c; --line: #1b1a2e;
  --mint: #5fe0b0; --coral: #ff8a7a; --lemon: #ffe066; --sky: #6cc4ff; --grape: #b58cff; --pink: #ff8fd0; --red: #e5484d;
  --pix: "Silk", "JetBrains Mono", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(rgba(27,26,46,.09) 1.2px, transparent 1.4px) 0 0 / 22px 22px; }
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
code, pre { font-family: var(--mono); font-size: .88em; }
button, input, select { font: inherit; color: inherit; }
.wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }
.fine { color: var(--mute); font-size: 13.5px; line-height: 1.6; }
.card { background: var(--card); border: 3px solid var(--line); box-shadow: 6px 6px 0 var(--line); border-radius: 4px; }

/* bar */
.bar { position: sticky; top: 0; z-index: 30; background: rgba(251,245,230,.94); backdrop-filter: blur(8px); border-bottom: 3px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.logo img { image-rendering: pixelated; }
.logo b { font: 400 20px var(--pix); }
.logo b span { color: #1aa57a; }
.nav { display: flex; gap: 18px; }
.nav a { font-size: 14.5px; font-weight: 700; text-decoration: none; color: var(--mute); }
.nav a:hover { color: var(--ink); }
.spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--mono); letter-spacing: .08em; padding: 6px 10px; border: 3px solid var(--line); background: var(--mint); white-space: nowrap; box-shadow: 3px 3px 0 var(--line); }
.pill i { width: 9px; height: 9px; background: var(--ink); }
.pill.preview { background: var(--lemon); }
.pill.closed { background: var(--coral); }
.burger { display: none; background: var(--card); border: 3px solid var(--line); width: 42px; height: 38px; font-size: 20px; cursor: pointer; }
.notice { background: var(--lemon); border-bottom: 3px solid var(--line); font-size: 13.5px; text-align: center; padding: 9px 20px; }
.notice b { font-family: var(--mono); letter-spacing: .06em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 3px solid var(--line); background: var(--card); color: var(--ink); font: 400 15px var(--pix); cursor: pointer; white-space: nowrap; box-shadow: 4px 4px 0 var(--line); text-decoration: none; transition: transform .08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 var(--line); }
.btn.mint { background: var(--mint); }
.btn.sm { padding: 8px 14px; font-size: 13px; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 48px; align-items: center; padding: 50px 0 26px; }
.tag { display: inline-flex; align-items: center; gap: 10px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border: 3px solid var(--line); background: var(--card); box-shadow: 3px 3px 0 var(--line); }
.tag i { width: 9px; height: 9px; background: var(--mint); border: 2px solid var(--line); }
h1 { font: 400 98px/0.95 var(--pix); margin: 24px 0 14px; text-transform: uppercase; }
h1 em { font-style: normal; color: var(--mint); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink); }
.sub { font: 400 28px/1.3 var(--pix); margin: 0 0 14px; }
.lede { color: var(--mute); font-size: 17px; max-width: 610px; margin: 0 0 26px; }
.lede b { color: var(--ink); }
.cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bot { position: relative; border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--line); background: var(--card); overflow: hidden; border-radius: 4px; }
.bot img { width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.hero-r .bot:nth-child(odd) { animation: bob 2.4s ease-in-out infinite; }
.hero-r .bot:nth-child(even) { animation: bob 2.4s ease-in-out -1.2s infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* strip */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.tile { background: var(--card); border: 3px solid var(--line); box-shadow: 5px 5px 0 var(--line); padding: 12px 16px; border-radius: 4px; min-width: 0; }
.tile:nth-child(1) { background: #e7fbf2; } .tile:nth-child(2) { background: #fff6cf; } .tile:nth-child(3) { background: #ffe6e1; } .tile:nth-child(4) { background: #e5f2ff; }
small { display: block; color: var(--mute); font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tile b { display: block; font: 400 32px/1.2 var(--pix); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile b em { font-style: normal; font-size: 18px; }

/* sections */
.sec { padding: 56px 0 6px; }
.sec-h { margin-bottom: 22px; max-width: 820px; }
.sec-h h2 { font: 400 38px/1.15 var(--pix); margin: 0 0 8px; }
.sec-h p { color: var(--mute); margin: 0; font-size: 16.5px; }
h3 { font: 700 18px var(--sans); margin: 0 0 8px; }

/* whitelist */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step { padding: 18px; position: relative; display: flex; flex-direction: column; }
.step .n { position: absolute; right: 12px; top: 6px; font: 400 34px var(--pix); color: #d8d2c0; }
.step p { color: var(--mute); font-size: 14.5px; margin: 0 0 14px; flex: 1; }
.step p b { color: var(--ink); }
.step:nth-child(1) { background: #e7fbf2; } .step:nth-child(2) { background: #ffe6f4; } .step:nth-child(3) { background: #fff6cf; } .step:nth-child(4) { background: #e5f2ff; }
.step .row { display: flex; gap: 10px; flex-wrap: wrap; }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0 12px; align-items: start; }
.form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.form input:not([type]), .form input[type="text"], .search input { border: 3px solid var(--line); background: #fff; padding: 11px 12px; font: 15px var(--mono); border-radius: 3px; outline: none; min-width: 0; }
.form input:focus, .search input:focus { box-shadow: 0 0 0 3px var(--sky); }
.hint { font-weight: 400; font-size: 12.5px; color: var(--mute); }
.hint code { background: #efe9d8; padding: 1px 5px; }
.checks { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 3px dashed #cfc7b2; }
.form .ck { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.ck input { width: 20px; height: 20px; accent-color: #1aa57a; }
.err { margin: 0; padding: 10px 12px; background: #ffe6e1; border: 3px solid var(--line); font-size: 14px; }
.code { border: 3px solid var(--line); background: var(--lemon); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.code b { font: 400 30px var(--pix); letter-spacing: .04em; }
.posttext { margin: 0; white-space: pre-wrap; background: #fff; border: 3px dashed #cfc7b2; padding: 12px; font-size: 13.5px; color: var(--mute); min-height: 66px; }
.done { border: 3px solid var(--line); background: var(--mint); padding: 14px; font-weight: 700; }
.done span { display: block; font-weight: 400; font-size: 14px; margin-top: 4px; }
.done.review { background: var(--lemon); }

/* status */
.search { display: flex; gap: 12px; padding: 14px; }
.search input { flex: 1; }
.result { margin-top: 16px; padding: 18px 20px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; }
.result img { width: 96px; height: 96px; image-rendering: pixelated; border: 3px solid var(--line); }
.result h3 { font: 400 22px var(--pix); margin: 0 0 4px; }
.badge { display: inline-block; font: 700 12px var(--mono); letter-spacing: .08em; padding: 3px 8px; border: 2px solid var(--line); text-transform: uppercase; margin-left: 6px; vertical-align: 3px; }
.b-verified, .b-approved { background: var(--mint); } .b-pending { background: var(--lemon); } .b-review { background: var(--sky); } .b-rejected, .b-none { background: var(--coral); }
.result p { margin: 4px 0 0; color: var(--mute); font-size: 14.5px; }
.result code { overflow-wrap: anywhere; }

/* bots */
.gallery { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.traits { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.traits span { font: 700 12.5px var(--mono); border: 2px solid var(--line); background: var(--card); padding: 4px 9px; }
.traits span b { color: var(--mute); font-weight: 400; }
.mintplan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mp { padding: 14px 16px; }
.mp b { display: block; font: 400 30px/1.25 var(--pix); }
.mp > span { font-size: 13.5px; color: var(--mute); }
.mp.wl { background: var(--mint); }
.mp.wl > span { color: var(--ink); }

/* token */
.tokenbox { padding: 20px 22px; }
.tbar { display: flex; height: 34px; border: 3px solid var(--line); overflow: hidden; }
.tbar i { display: block; height: 100%; }
.t-h { background: var(--mint); } .t-l { background: var(--sky); border-left: 3px solid var(--line); } .t-t { background: var(--pink); border-left: 3px solid var(--line); }
.tleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 6px; }
.tleg div { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; align-items: start; }
.tleg i { width: 16px; height: 16px; border: 2px solid var(--line); margin-top: 3px; grid-row: span 2; }
.tleg b { font-size: 15.5px; }
.tleg span { color: var(--mute); font-size: 14px; }

/* agents */
.agentrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 14px; }
.steps li { counter-increment: s; position: relative; padding-left: 46px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border: 3px solid var(--line); background: var(--lemon); font: 400 14px/26px var(--pix); text-align: center; }
.steps b { display: block; margin-bottom: 6px; }
pre { margin: 0; background: var(--ink); color: #e8f7ef; border: 3px solid var(--line); padding: 12px 14px; overflow-x: auto; line-height: 1.6; }
.chat { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px 13px; font-size: 14px; max-width: 90%; border: 2px solid var(--line); border-radius: 3px; }
.msg.u { align-self: flex-end; background: var(--mint); }
.msg.a { align-self: flex-start; background: #f3eee0; }
.msg code { background: #fff; padding: 1px 5px; }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faq details { background: var(--card); border: 3px solid var(--line); padding: 14px 16px; box-shadow: 4px 4px 0 var(--line); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: "+"; font-family: var(--pix); }
.faq details[open] summary::after { content: "-"; }
.faq details p { color: var(--mute); margin: 10px 0 0; font-size: 14.5px; }
.risk { margin-top: 18px; padding: 16px 18px; background: #ffe6e1; font-size: 14.5px; }

/* footer */
.foot { border-top: 3px solid var(--line); margin-top: 64px; padding: 24px 0 40px; background: var(--card); }
.links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; }

/* responsive */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; }
  h1 { font-size: 80px; }
  .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 3px solid var(--line); padding: 8px 20px 14px; }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; font-size: 16px; }
  .burger { display: block; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 34px; }
  .steps4, .strip, .mintplan { grid-template-columns: 1fr 1fr; }
  .formrow, .agentrow, .faq, .tleg { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .bar .wrap { gap: 10px; }
  .logo b { font-size: 16px; }
  .pill { font-size: 10.5px; padding: 5px 8px; }
  h1 { font-size: 58px; }
  h1 em { -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
  .sub { font-size: 21px; }
  .sec-h h2 { font-size: 29px; }
  .cta .btn { flex: 1 1 100%; }
  .tile b { font-size: 19px; white-space: normal; }
  .tile b em { font-size: 13px; }
  .steps4 { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search { flex-direction: column; }
  .result { grid-template-columns: 64px minmax(0, 1fr); }
  .result img { width: 64px; height: 64px; }
  .code b { font-size: 24px; }
}
body.shot * { transition: none !important; animation: none !important; }
body.shot { scroll-behavior: auto; }