:root {
  --ink: #17130e;
  --paper: #f4ecd7;
  --cream: #fff9e9;
  --yellow: #f2b90c;
  --acid: #e7ff3f;
  --orange: #d96c2c;
  --brown: #7b3f1e;
  --green: #21483b;
  --line: rgba(23, 19, 14, 0.22);
  --display: "Bowlby One SC", sans-serif;
  --scribble: "Caveat Brush", cursive;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  transition: background-color 0.35s, color 0.35s;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { max-width: 100%; }
::selection { color: var(--cream); background: var(--orange); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.cursor-halo {
  position: fixed;
  z-index: 49;
  width: 38px;
  height: 38px;
  left: 0;
  top: 0;
  border: 2px solid var(--orange);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s, background-color 0.2s;
  mix-blend-mode: multiply;
}
.cursor-halo.is-visible { opacity: 0.7; }
.cursor-halo.is-hovering { width: 64px; height: 64px; background: rgba(242, 185, 12, 0.25); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 76px;
  padding: 0 clamp(20px, 5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(244, 236, 215, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 15px/0.78 var(--display);
  letter-spacing: -0.4px;
}
.brand img { width: 45px; height: 45px; object-fit: contain; }
.brand span { display: grid; }
.brand em { color: var(--orange); font-style: normal; }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 34px); }
.main-nav a, footer a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  text-transform: uppercase;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 3px;
  background: var(--orange);
  transition: right 0.2s;
}
.main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }
.header-buy {
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--orange);
  text-decoration: none;
  font: 500 11px var(--mono);
  text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s, color 0.2s, background 0.2s;
}
.header-buy:hover { color: var(--ink); background: var(--yellow); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.header-buy img { width: 19px; height: 19px; object-fit: contain; }

.marquee {
  position: relative;
  z-index: 6;
  height: 43px;
  overflow: hidden;
  color: var(--cream);
  background: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.marquee-track {
  width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 37px;
  animation: marquee 21s linear infinite;
}
.marquee-track span, .marquee-track b { font-size: 10px; letter-spacing: 1.5px; }
.marquee-track b { color: var(--yellow); font-weight: 500; }
.marquee-track span::before, .marquee-track b::before { content: "●"; margin-right: 37px; color: var(--orange); }

.section { padding-left: clamp(20px, 7vw, 116px); padding-right: clamp(20px, 7vw, 116px); }
.eyebrow {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.eyebrow span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(217, 108, 44, 0.16);
}

.hero {
  position: relative;
  min-height: clamp(650px, calc(100svh - 119px), 860px);
  display: grid;
  grid-template-columns: minmax(470px, 0.92fr) minmax(500px, 1.08fr);
  align-items: stretch;
  gap: 0;
  padding-right: 0;
  overflow: hidden;
  color: var(--cream);
  background: #120e09;
  border-bottom: 1px solid rgba(242, 185, 12, 0.55);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 43% 0 0;
  background: url("assets/leopard-pattern.png") center/460px auto repeat;
  opacity: 0.055;
  pointer-events: none;
}
.hero-ghost {
  position: absolute;
  z-index: 0;
  left: -0.03em;
  bottom: -0.19em;
  color: rgba(242, 185, 12, 0.045);
  font: 400 clamp(170px, 22vw, 360px)/0.75 var(--display);
  letter-spacing: -14px;
  pointer-events: none;
  user-select: none;
}
.hero-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
  align-self: center;
  padding: 50px clamp(30px, 4vw, 70px) 50px 0;
}
.hero-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.hero-kicker-row .eyebrow { margin: 0; color: #d8cdb9; }
.hero-kicker-row .eyebrow span { background: var(--yellow); box-shadow: 0 0 0 5px rgba(242, 185, 12, 0.13); }
.hero-edition {
  padding: 6px 8px;
  color: var(--yellow);
  border: 1px solid rgba(242, 185, 12, 0.55);
  font-size: 8px;
  text-transform: uppercase;
  transform: rotate(2deg);
}
.hero h1, .section-heading h2, .vibe h2, .gallery h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 720px;
  font-size: clamp(52px, 5.65vw, 91px);
  line-height: 0.84;
  letter-spacing: -3px;
  text-shadow: 4px 4px 0 #000;
}
.hero h1 span, .hero h1 i { display: block; }
.hero h1 span:nth-child(2) { color: #f0bf43; }
.hero h1 i { color: var(--orange); text-shadow: 4px 4px 0 #000, 0 0 30px rgba(242, 185, 12, 0.22); }
.hero h1 i, .section-heading h2 i, .vibe h2 i, .gallery h2 i { color: var(--orange); font-style: normal; }
.hero-description { max-width: 520px; margin: 26px 0; color: #d6cbb8; font-size: 13px; line-height: 1.72; }
.hero-cta-row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 11px; }
.hero-buy-main {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  color: var(--ink);
  background: var(--yellow);
  border: 1px solid var(--yellow);
  box-shadow: 6px 6px 0 var(--orange);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.hero-buy-main:hover { background: var(--acid); transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--orange); }
.hero-buy-main img { width: 41px; height: 41px; object-fit: contain; }
.hero-buy-main > span { display: grid; gap: 3px; }
.hero-buy-main small { font-size: 8px; letter-spacing: 0.7px; }
.hero-buy-main strong { font: 400 14px var(--display); white-space: nowrap; }
.hero-buy-main b { margin-left: auto; padding: 7px 6px; color: var(--cream); background: var(--ink); font-size: 8px; font-weight: 500; }
.ticker-card {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 11px 12px;
  color: var(--cream);
  border: 1px solid rgba(242, 185, 12, 0.55);
  background: rgba(255, 249, 233, 0.055);
}
.ticker-card > span { color: #9f9585; font-size: 8px; text-transform: uppercase; }
.ticker-card strong { font: 400 clamp(11px, 1vw, 14px) var(--display); }
.copy-button {
  padding: 8px 7px;
  border: 1px solid rgba(255, 249, 233, 0.3);
  color: var(--yellow);
  background: var(--ink);
  font: 500 9px var(--mono);
  cursor: pointer;
}
.copy-button:hover { color: var(--ink); background: var(--yellow); }
.wild-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 249, 233, 0.35);
  color: var(--cream);
  background: transparent;
  font: 500 9px var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}
.wild-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 12px rgba(242, 185, 12, 0.7); transition: transform 0.2s, background 0.2s; }
.wild-toggle[aria-pressed="true"] { color: var(--ink); background: var(--acid); }
.wild-toggle[aria-pressed="true"] .wild-toggle-dot { background: var(--orange); transform: scale(1.35); }
.hero-tools { margin-top: 13px; display: grid; grid-template-columns: max-content max-content minmax(110px, 1fr); gap: 9px; }
.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 249, 233, 0.35);
  color: var(--cream);
  background: rgba(255, 249, 233, 0.055);
  text-decoration: none;
  font-size: 10px;
  transition: transform 0.18s, background 0.18s, box-shadow 0.18s;
}
.action-button:hover { color: var(--ink); transform: translate(-2px, -2px); background: var(--yellow); box-shadow: 3px 3px 0 var(--orange); }
.action-button img, .x-icon { width: 20px; height: 20px; object-fit: contain; }
.x-icon { fill: currentColor; }
.hero-values { margin-top: 25px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 249, 233, 0.22); }
.hero-values span { padding: 14px 10px 0 0; color: #8f8678; font-size: 8px; text-transform: uppercase; }
.hero-values span + span { padding-left: 13px; border-left: 1px solid rgba(255, 249, 233, 0.22); }
.hero-values b { display: block; margin-bottom: 6px; color: var(--yellow); font: 400 17px var(--display); }

.hero-visual {
  position: relative;
  z-index: 3;
  min-height: 650px;
  padding: 20px 0;
  perspective: 1100px;
  overflow: visible;
}
.poster-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  background: #080604;
  border: 1px solid rgba(242, 185, 12, 0.62);
  border-right: 0;
  box-shadow: -12px 12px 0 rgba(217, 108, 44, 0.32);
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-origin: center;
  transition: transform 0.18s ease-out, box-shadow 0.25s;
}
.hero-character {
  position: absolute;
  z-index: 1;
  inset: -1.5%;
  width: 103%;
  height: 103%;
  max-width: none;
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(1.08) contrast(1.04);
  animation: posterBreathe 7s ease-in-out infinite;
}
.poster-topline {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 17px;
  right: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: var(--cream);
  font-size: 8px;
  text-transform: uppercase;
}
.poster-topline > span { padding: 8px 9px; background: rgba(8, 6, 4, 0.88); border: 1px solid rgba(242, 185, 12, 0.5); }
.poster-live { display: flex; align-items: center; gap: 7px; }
.poster-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); animation: pulse 1.3s ease-in-out infinite; }
.poster-brand {
  position: absolute;
  z-index: 4;
  left: 17px;
  top: 67px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 7px;
  color: var(--cream);
  background: rgba(8, 6, 4, 0.86);
  border-left: 3px solid var(--orange);
  font-size: 8px;
  line-height: 1.45;
  text-transform: uppercase;
}
.poster-brand img { width: 31px; height: 31px; object-fit: contain; }
.poster-note {
  position: absolute;
  z-index: 4;
  top: 21%;
  right: 20px;
  margin: 0;
  padding: 11px 14px;
  color: var(--ink);
  background: var(--acid);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--orange);
  font: 400 24px/0.8 var(--scribble);
  transform: rotate(4deg);
}
.poster-footer {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 67px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 16px;
  color: var(--cream);
  background: rgba(8, 6, 4, 0.91);
  border-top: 1px solid rgba(242, 185, 12, 0.65);
}
.live-ticker {
  position: static;
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--cream);
  background: transparent;
  font-size: 9px;
  letter-spacing: 0.4px;
}
.live-ticker span { width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #79df7b; animation: pulse 1.3s ease-in-out infinite; }
.live-ticker strong { color: var(--yellow); font-weight: 500; }
.live-ticker em { font-style: normal; }
.poster-code { display: grid; gap: 4px; padding-left: 15px; border-left: 1px solid rgba(255, 249, 233, 0.3); text-align: right; }
.poster-code small { color: #9b9285; font-size: 7px; }
.poster-code strong { color: var(--yellow); font: 400 12px var(--display); }

.vibe {
  min-height: 850px;
  padding-top: 120px;
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(55px, 8vw, 130px);
  align-items: center;
  color: var(--cream);
  background: var(--ink);
  border-top: 1px solid var(--ink);
}
.vibe-art { position: relative; min-height: 590px; }
.pattern-frame {
  position: absolute;
  inset: 0 6% 6% 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: url("assets/leopard-pattern.png") center/520px auto repeat;
  border: 2px solid var(--cream);
  box-shadow: 14px 14px 0 var(--orange);
  transform: rotate(-2deg);
}
.pattern-frame::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--ink);
}
.vibe-logo { position: relative; z-index: 2; width: 68%; filter: drop-shadow(8px 9px 0 rgba(23, 19, 14, 0.3)); }
.vibe-stamp {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 25px;
  padding: 12px;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--cream);
  font: 15px/0.9 var(--display);
  transform: rotate(-7deg);
}
.claw-sticker {
  position: absolute;
  z-index: 5;
  right: -8%;
  bottom: -3%;
  width: 54%;
  filter: drop-shadow(8px 9px 0 rgba(0, 0, 0, 0.32));
  animation: stickerWiggle 5s ease-in-out infinite;
}
.vibe .eyebrow span { background: var(--yellow); box-shadow: 0 0 0 5px rgba(242, 185, 12, 0.15); }
.vibe h2 { max-width: 800px; font-size: clamp(48px, 6.1vw, 94px); line-height: 0.9; letter-spacing: -2.5px; }
.vibe h2 i { color: var(--yellow); }
.vibe-lead { max-width: 600px; min-height: 80px; margin: 28px 0 24px; color: #d9d0bc; font-size: 14px; line-height: 1.75; }
.mood-picker { display: flex; gap: 8px; margin-bottom: 42px; }
.mood-button {
  min-width: 95px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 249, 233, 0.45);
  color: var(--cream);
  background: transparent;
  font: 500 10px var(--mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.18s;
}
.mood-button:hover { transform: translateY(-3px); }
.mood-button.is-active { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.trait-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 249, 233, 0.25); }
.trait-grid article { min-height: 185px; padding: 20px 18px 0 0; border-right: 1px solid rgba(255, 249, 233, 0.25); }
.trait-grid article + article { padding-left: 18px; }
.trait-grid article:last-child { border-right: 0; }
.trait-grid small { display: block; margin-bottom: 37px; color: var(--yellow); font-size: 9px; }
.trait-grid strong { display: block; margin-bottom: 9px; font: 16px/1 var(--display); text-transform: uppercase; }
.trait-grid p { margin: 0; color: #aea795; font-size: 10px; line-height: 1.65; }

.roadmap {
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
  color: var(--cream);
  background: var(--green);
}
.roadmap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 20px;
  background: url("assets/leopard-pattern.png") center/380px auto repeat;
  border-bottom: 1px solid var(--ink);
}
.roadmap-watermark { position: absolute; right: -120px; top: 20px; width: 520px; opacity: 0.07; transform: rotate(-16deg); }
.section-heading { position: relative; z-index: 2; max-width: 820px; }
.section-heading h2 { font-size: clamp(44px, 6.2vw, 92px); line-height: 0.9; letter-spacing: -2px; }
.section-heading h2 i { color: var(--yellow); }
.section-heading > p:last-child { max-width: 580px; margin: 24px 0 48px; color: #d2dfce; font-size: 13px; line-height: 1.75; }
.roadmap .eyebrow span { background: var(--yellow); box-shadow: 0 0 0 5px rgba(242, 185, 12, 0.15); }
.roadmap-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 249, 233, 0.3);
}
.roadmap-list li {
  position: relative;
  min-height: 360px;
  padding: 24px 25px 70px 0;
  margin-right: 25px;
  border-right: 1px solid rgba(255, 249, 233, 0.3);
  cursor: pointer;
  outline: none;
  transition: transform 0.22s, background 0.22s, padding 0.22s;
}
.roadmap-list li:last-child { margin-right: 0; border-right: 0; }
.roadmap-list li:hover, .roadmap-list li:focus-visible, .roadmap-list li.is-active { padding-left: 16px; background: rgba(255, 249, 233, 0.07); transform: translateY(-8px); }
.roadmap-list li.is-active { box-shadow: inset 0 -5px 0 var(--yellow); }
.phase { color: #bcd1c2; font-size: 9px; text-transform: uppercase; }
.roadmap-list h3 { max-width: 175px; margin: 50px 0 14px; font: 21px/0.95 var(--display); }
.roadmap-list p { max-width: 220px; margin: 0; color: #d2dfce; font-size: 11px; line-height: 1.7; }
.roadmap-list b { position: absolute; left: 0; bottom: 22px; color: var(--yellow); font: 18px var(--display); transition: left 0.22s; }
.roadmap-list li:hover b, .roadmap-list li.is-active b { left: 16px; }
.phase-extra {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: var(--yellow);
  font-size: 9px;
  line-height: 1.6;
  opacity: 0;
  transition: max-height 0.3s, margin 0.3s, opacity 0.3s;
}
.roadmap-list li.is-active .phase-extra { max-height: 80px; margin-top: 18px; opacity: 1; }

.gallery {
  position: relative;
  padding-top: 115px;
  padding-bottom: 135px;
  overflow: hidden;
  background: var(--yellow);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.gallery::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 19%;
  height: 100%;
  background: url("assets/leopard-pattern.png") center/380px auto repeat;
  border-left: 1px solid var(--ink);
  opacity: 0.8;
}
.gallery-heading { position: relative; z-index: 2; max-width: 810px; }
.gallery h2 { font-size: clamp(46px, 6.5vw, 98px); line-height: 0.88; letter-spacing: -2.5px; }
.gallery h2 i { color: var(--cream); text-shadow: 3px 3px 0 var(--ink); }
.gallery-heading > p:last-child { margin: 22px 0 43px; max-width: 490px; font-size: 12px; line-height: 1.7; }
.gallery-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.2fr 0.85fr 1fr; gap: clamp(16px, 2.3vw, 34px); align-items: end; max-width: 1140px; }
.gallery-card {
  position: relative;
  display: grid;
  padding: 14px;
  text-align: left;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.24s, box-shadow 0.24s;
}
.gallery-card:hover { transform: translate(-4px, -8px) rotate(0deg) !important; box-shadow: 13px 15px 0 var(--orange); }
.gallery-card img { width: 100%; height: 330px; object-fit: contain; background: #efe3c7; border: 1px solid var(--ink); }
.gallery-card strong { margin-top: 14px; font: 18px var(--display); }
.gallery-card em { margin-top: 4px; color: #706554; font: 15px var(--scribble); }
.card-index { position: absolute; z-index: 2; top: 23px; left: 23px; padding: 6px 8px; color: var(--cream); background: var(--ink); font-size: 8px; }
.card-portrait { transform: rotate(-2deg); }
.card-mark { transform: translateY(32px) rotate(3deg); }
.card-claw { transform: rotate(-1deg); }
.card-mark img { padding: 35px; background: var(--orange); }
.card-claw img { background: var(--ink); }

.chart {
  position: relative;
  padding-top: 120px;
  padding-bottom: 135px;
  overflow: hidden;
  background: #e8ddbd;
}
.chart-pattern {
  position: absolute;
  top: -95px;
  right: -90px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: url("assets/leopard-pattern.png") center/350px auto repeat;
  border: 2px solid var(--ink);
  opacity: 0.9;
  animation: spin 36s linear infinite;
}
.chart-heading h2 i { color: var(--orange); }
.chart-heading > p:last-child { color: #625847; }
.chart-heading code, .chart-placeholder code { color: var(--orange); font-family: var(--mono); }
.chart-shell {
  position: relative;
  z-index: 2;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: 10px 10px 0 var(--orange);
}
.chart-topbar { height: 49px; padding: 0 16px; display: flex; align-items: center; gap: 9px; color: var(--cream); font-size: 9px; }
.chart-topbar a { margin-left: auto; color: var(--yellow); text-decoration: none; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #75cf7f; animation: pulse 1.4s ease-in-out infinite; }
.dexscreener-embed { height: min(70vh, 650px); min-height: 460px; background: #111; }
.dexscreener-embed iframe { width: 100%; height: 100%; border: 0; }
.chart-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 30px; text-align: center; color: var(--cream); }
.chart-placeholder img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 0 15px rgba(242, 185, 12, 0.38)); animation: iconBob 4s ease-in-out infinite; }
.chart-placeholder strong { font: 24px var(--display); text-transform: uppercase; }
.chart-placeholder span { max-width: 390px; color: #aaa397; font-size: 11px; line-height: 1.7; }

footer {
  padding: 24px clamp(20px, 7vw, 116px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #d6cfbf;
  background: var(--ink);
  font-size: 9px;
}
footer a { color: var(--yellow); }

.lightbox {
  width: min(880px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 18px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 12px 12px 0 var(--orange);
}
.lightbox::backdrop { background: rgba(15, 12, 9, 0.86); backdrop-filter: blur(6px); }
.lightbox img { display: block; width: 100%; height: min(70vh, 680px); object-fit: contain; background: #e9ddbf; border: 1px solid var(--ink); }
.lightbox p { margin: 15px 0 0; font: 22px var(--scribble); }
.lightbox-close { float: right; margin: 0 0 12px 12px; padding: 8px 11px; border: 1px solid var(--ink); background: var(--yellow); font: 500 9px var(--mono); text-transform: uppercase; cursor: pointer; }

[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

body.wild-mode { --yellow: #ddff2e; --orange: #ff642d; }
body.wild-mode .marquee-track { animation-duration: 7s; }
body.wild-mode .hero::before, body.wild-mode .pattern-frame, body.wild-mode .gallery::after { background-size: 300px auto; }
body.wild-mode .hero-character { animation-duration: 2.7s; filter: saturate(1.18) contrast(1.08); }
body.wild-mode .poster-surface { box-shadow: -12px 12px 0 rgba(255, 100, 45, 0.65), 0 0 42px rgba(221, 255, 46, 0.16); }
body.wild-mode .poster-note { animation: wildShake 0.42s steps(2, end) infinite; }
body.wild-mode .vibe-logo { animation: wildShake 0.35s steps(2, end) infinite; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { transform: scale(0.55); opacity: 0.45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes iconBob { 50% { transform: translateY(-9px) rotate(4deg); } }
@keyframes stickerWiggle { 50% { transform: translateY(-11px) rotate(3deg); } }
@keyframes wildShake { 25% { transform: rotate(-1deg) translateX(-2px); } 75% { transform: rotate(1deg) translateX(2px); } }
@keyframes posterBreathe {
  0%, 100% { transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.03); }
  50% { transform: translate3d(var(--px, 0), calc(var(--py, 0) - 5px), 0) scale(1.055); }
}
@keyframes characterFloat {
  0%, 100% { transform: translate3d(var(--px, 0), var(--py, 0), 0); }
  50% { transform: translate3d(var(--px, 0), calc(var(--py, 0) - 9px), 0); }
}
@keyframes clawFloat {
  0%, 100% { transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(-8deg); }
  50% { transform: translate3d(var(--px, 0), calc(var(--py, 0) - 13px), 0) rotate(-2deg); }
}

@media (max-width: 1080px) {
  .main-nav { gap: 15px; }
  .hero { grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr); }
  .hero h1 { font-size: clamp(46px, 5.7vw, 72px); }
  .hero-cta-row { grid-template-columns: 1fr; }
  .hero-buy-main { min-height: 59px; }
  .vibe { gap: 55px; }
  .vibe-art { min-height: 500px; }
  .gallery-card img { height: 270px; }
}

@media (max-width: 880px) {
  .cursor-halo { display: none; }
  .site-header { height: 68px; }
  .main-nav { display: none; }
  .marquee { height: 39px; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 0; padding-left: 20px; padding-right: 20px; }
  .hero::before { inset: 0; }
  .hero-ghost { top: 310px; bottom: auto; }
  .hero-copy { padding: 70px 0 52px; }
  .hero h1 { font-size: clamp(52px, 10vw, 80px); }
  .hero-cta-row { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .hero-visual { min-height: 620px; height: min(112vw, 780px); margin: 0 -20px; padding: 16px 0 0; }
  .poster-surface { min-height: 0; border-left: 0; box-shadow: none; }
  .hero-character { inset: -1.5%; width: 103%; height: 103%; }
  .vibe { min-height: auto; grid-template-columns: 1fr; padding-top: 85px; padding-bottom: 90px; }
  .vibe-art { min-height: 560px; max-width: 600px; width: 100%; margin: 0 auto; }
  .vibe-copy { max-width: 700px; }
  .roadmap, .gallery, .chart { padding-top: 90px; padding-bottom: 95px; }
  .roadmap-list { grid-template-columns: repeat(2, 1fr); }
  .roadmap-list li:nth-child(2) { margin-right: 0; border-right: 0; }
  .roadmap-list li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 249, 233, 0.3); }
  .gallery::after { width: 10%; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); padding-right: 6%; }
  .gallery-card:last-child { grid-column: 1 / -1; width: 52%; justify-self: center; }
  .card-mark { transform: translateY(0) rotate(3deg); }
}

@media (max-width: 560px) {
  html, body, main { width: 100%; max-width: 100%; overflow-x: hidden; }
  .site-header { padding: 0 15px; }
  .site-header { width: 100vw; overflow: hidden; }
  .brand, .header-buy { flex: 0 0 auto; }
  .brand img { width: 39px; height: 39px; }
  .brand { font-size: 12px; }
  .header-buy { padding: 9px 10px; font-size: 9px; box-shadow: 3px 3px 0 var(--orange); }
  .header-buy img { display: none; }
  .section { padding-left: 20px; padding-right: 20px; }
  .hero h1, .section-heading h2, .vibe h2, .gallery h2 { letter-spacing: -1.5px; }
  .hero { display: block; min-width: 0; width: 100%; max-width: 100%; }
  .hero-copy { width: 100%; min-width: 0; padding-top: 38px; padding-bottom: 28px; }
  .hero-kicker-row { align-items: flex-start; margin-bottom: 20px; }
  .hero-edition { margin-top: -3px; }
  .hero h1 { max-width: 100%; font-size: clamp(36px, 10.8vw, 58px); line-height: 0.94; letter-spacing: -1px; }
  .hero-description { width: 100%; max-width: none; font-size: 12px; overflow-wrap: anywhere; }
  .hero-cta-row { grid-template-columns: 1fr; }
  .hero-buy-main { min-height: 64px; }
  .ticker-card { justify-content: space-between; }
  .hero-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-tools .action-button { min-width: 0; padding-left: 6px; padding-right: 6px; }
  .hero-tools .wild-toggle { grid-column: 1 / -1; }
  .hero-values { display: none; }
  .hero-visual { min-height: 0; height: auto; aspect-ratio: 4 / 5; padding-top: 12px; }
  .poster-surface { height: 100%; }
  .hero-character { inset: -1.5%; width: 103%; height: 103%; }
  .poster-brand { display: none; }
  .poster-note { top: 18%; right: 12px; padding: 9px 11px; font-size: 20px; }
  .poster-topline { top: 12px; left: 12px; right: 12px; }
  .poster-footer { padding: 10px 12px; }
  .poster-code small { display: none; }
  .poster-code strong { font-size: 10px; }
  .vibe { gap: 50px; }
  .vibe-art { min-height: 400px; }
  .pattern-frame { inset: 0 4% 8% 0; box-shadow: 8px 8px 0 var(--orange); background-size: 360px auto; }
  .vibe-logo { width: 72%; }
  .claw-sticker { width: 50%; right: -4%; }
  .vibe h2 { font-size: clamp(43px, 13vw, 65px); }
  .vibe-lead { min-height: 100px; font-size: 12px; }
  .mood-picker { display: grid; grid-template-columns: repeat(3, 1fr); }
  .mood-button { min-width: 0; padding: 10px 5px; }
  .trait-grid { grid-template-columns: 1fr; }
  .trait-grid article, .trait-grid article + article { min-height: auto; padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(255, 249, 233, 0.25); }
  .trait-grid article:last-child { border-bottom: 0; }
  .trait-grid small { margin-bottom: 13px; }
  .roadmap-list { grid-template-columns: 1fr; }
  .roadmap-list li, .roadmap-list li:nth-child(2) { min-height: 275px; margin-right: 0; border-right: 0; border-bottom: 1px solid rgba(255, 249, 233, 0.3); }
  .roadmap-list li:last-child { border-bottom: 0; }
  .roadmap-list h3 { margin-top: 34px; }
  .gallery::after { display: none; }
  .gallery-grid { grid-template-columns: 1fr; padding-right: 0; gap: 28px; }
  .gallery-card, .gallery-card:last-child { width: 100%; grid-column: auto; transform: rotate(-1deg); }
  .gallery-card:nth-child(2) { transform: rotate(1deg); }
  .gallery-card img { height: 310px; }
  .chart-pattern { width: 230px; height: 230px; right: -100px; }
  .dexscreener-embed { min-height: 390px; }
  .chart-shell { box-shadow: 6px 6px 0 var(--orange); }
  footer { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

[hidden] { display: none !important; }