:root {
  /* Interprets “trade” as a brutalist tropical fish auction full of defensive banter. Roboto Flex compresses for insults and expands for vulnerable admissions. Roboto Flex* Flex** `TSUNDERE.TRADE` Roboto Flex* Flex** for huge variable-width declarations Space Grotesk* Grotesk** for conversational copy */
  --black: #0A0B0D;
  --cement: #777B82;
  --frost: #DCEEFF;
  --cyan: #A9F3FF;
  --coral: #FF5E7A;
  --orange: #FF9B2F;
  --tank: #06263A;
  --green: #62FF9A;
  --space: 'Space Grotesk', Inter, system-ui, sans-serif;
  --roboto: 'Roboto Flex', Roboto, Arial, system-ui, sans-serif;
  --fraunces: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--frost);
  font-family: var(--space);
  overflow-x: hidden;
  background-image:
    linear-gradient(90deg, rgba(220, 238, 255, .04) 1px, transparent 1px),
    linear-gradient(rgba(220, 238, 255, .025) 1px, transparent 1px),
    radial-gradient(circle at 12% 20%, rgba(255, 94, 122, .14), transparent 28rem),
    radial-gradient(circle at 88% 32%, rgba(169, 243, 255, .16), transparent 24rem);
  background-size: 46px 46px, 46px 46px, auto, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px);
  mix-blend-mode: overlay;
}

.market { min-height: 100vh; }

.scene { position: relative; padding: clamp(28px, 5vw, 72px); }

.cold-open {
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 9px solid var(--frost);
  background:
    linear-gradient(135deg, rgba(119,123,130,.16), transparent 42%),
    radial-gradient(circle at 60% 55%, rgba(6,38,58,.95), transparent 31rem);
}

.warehouse-sign {
  position: absolute;
  left: -4vw;
  top: 12vh;
  width: 116vw;
  font-family: var(--roboto);
  font-size: clamp(78px, 18vw, 280px);
  line-height: .72;
  font-weight: 1000;
  font-stretch: 38%;
  letter-spacing: -.095em;
  color: transparent;
  -webkit-text-stroke: clamp(1px, .25vw, 4px) rgba(220, 238, 255, .92);
  opacity: .9;
  animation: flexMood 5s ease-in-out infinite alternate;
}

.warehouse-sign::after {
  content: attr(data-wide);
  position: absolute;
  left: 2vw;
  top: 52%;
  color: rgba(255, 94, 122, .16);
  -webkit-text-stroke: 0;
  font-stretch: 151%;
  letter-spacing: -.13em;
  filter: blur(2px);
}

@keyframes flexMood {
  from { font-variation-settings: 'wght' 1000, 'wdth' 45, 'opsz' 144; transform: translateX(-1.5vw) skewX(-2deg); }
  to { font-variation-settings: 'wght' 620, 'wdth' 132, 'opsz' 30; transform: translateX(1vw) skewX(1deg); }
}

.frost-pane {
  position: absolute;
  background: rgba(220, 238, 255, .16);
  border: 2px solid rgba(220, 238, 255, .45);
  box-shadow: 0 22px 70px rgba(169, 243, 255, .12), inset 0 0 28px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  transform: rotate(var(--r));
  animation: drift 9s ease-in-out infinite alternate;
}

.pane-a { --r: -4deg; width: 34vw; height: 22vh; left: 8vw; top: 17vh; }
.pane-b { --r: 3deg; width: 24vw; height: 44vh; right: 11vw; top: 31vh; animation-delay: -2s; }
.pane-c { --r: 1deg; width: 42vw; height: 14vh; left: 34vw; bottom: 13vh; animation-delay: -5s; }

@keyframes drift { to { transform: translate3d(2vw, -2vh, 0) rotate(calc(var(--r) * -1)); } }

.tape-nav {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 20;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tape-nav a,
.snap-slip,
.bid-tag,
.sticker,
.stamp,
.scene-label,
.unroll-button {
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.tape-nav a {
  color: var(--black);
  text-decoration: none;
  background: var(--frost);
  padding: 10px 14px;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--coral);
  transform: rotate(var(--nav-r, -2deg));
}
.tape-nav a:nth-child(2) { --nav-r: 2deg; box-shadow: 4px 4px 0 var(--orange); }
.tape-nav a:nth-child(3) { --nav-r: -1deg; box-shadow: 4px 4px 0 var(--green); }

.snap-slip {
  position: absolute;
  left: clamp(18px, 9vw, 120px);
  bottom: 13vh;
  z-index: 10;
  color: var(--black);
  background: var(--orange);
  border: 4px solid var(--black);
  padding: 18px 22px;
  font-size: clamp(15px, 2vw, 26px);
  box-shadow: 10px 10px 0 var(--cyan);
  transform: rotate(-2deg);
  animation: snapIn .8s cubic-bezier(.2,1.4,.2,1) .45s both;
}

@keyframes snapIn { from { transform: translateY(-80px) rotate(8deg) scale(.88); opacity: 0; } }

.fish { position: absolute; z-index: 3; }
.hero-fish { left: 18vw; top: 43vh; width: 185px; height: 78px; animation: dart 7s ease-in-out infinite; transition: transform .35s ease; }
.hero-fish .body { position: absolute; width: 118px; height: 58px; border-radius: 60% 45% 55% 50%; background: linear-gradient(90deg, var(--coral), var(--orange)); left: 45px; top: 10px; box-shadow: 0 0 35px rgba(255,94,122,.75); }
.hero-fish .tail { position: absolute; width: 64px; height: 64px; left: 0; top: 8px; background: var(--coral); clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%); }
.hero-fish .fin { position: absolute; width: 44px; height: 30px; background: var(--green); left: 86px; clip-path: polygon(0 100%, 55% 0, 100% 100%); opacity: .9; }
.hero-fish .top { top: -4px; }
.hero-fish .bottom { bottom: -2px; transform: rotate(180deg); }

@keyframes dart { 0%,100% { transform: translateX(-18vw) scaleX(1); } 45% { transform: translateX(52vw) scaleX(1); } 46% { transform: translateX(52vw) scaleX(-1); } 88% { transform: translateX(-18vw) scaleX(-1); } }

.masonry-scene { min-height: 100vh; background: linear-gradient(180deg, var(--black), #111318); }
.masonry-scene.deep { background: linear-gradient(180deg, #071a26, var(--black)); }
.scene-label { display: inline-block; margin-bottom: 24px; padding: 10px 16px; background: var(--coral); color: var(--black); border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--frost); transform: rotate(-1deg); }
.scene-label.orange { background: var(--orange); }
.scene-label.green { background: var(--green); }

.masonry-wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(58px, auto);
  gap: clamp(14px, 2vw, 30px);
  align-items: stretch;
}

.crate {
  position: relative;
  min-height: 170px;
  padding: clamp(18px, 2.8vw, 36px);
  border: 3px solid rgba(220,238,255,.72);
  background: rgba(119, 123, 130, .18);
  box-shadow: 10px 10px 0 rgba(10, 11, 13, .85), inset 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}

.focus-panel { filter: blur(3px) saturate(.75); opacity: .74; transition: filter .55s ease, opacity .55s ease, transform .55s ease, background .55s ease; }
.focus-panel.in-focus, .focus-panel:hover { filter: blur(0) saturate(1.15); opacity: 1; transform: translateY(-4px); }

.tall { grid-column: span 4; grid-row: span 7; }
.square { grid-column: span 4; grid-row: span 5; }
.thin { grid-column: span 8; grid-row: span 2; }
.receipt { grid-column: span 3; grid-row: span 6; }
.concrete-note { grid-column: span 5; grid-row: span 5; }
.wide { grid-column: span 7; grid-row: span 5; }

.frost-card { background: rgba(220,238,255,.13); backdrop-filter: blur(12px); }
.crate h2, .offer-slab h2, .receipt-roll h2 { margin: 18px 0 12px; font-family: var(--roboto); font-size: clamp(38px, 6vw, 92px); line-height: .82; font-stretch: 65%; letter-spacing: -.07em; color: var(--frost); }
.crate h3 { font-family: var(--fraunces); font-size: clamp(28px, 3vw, 44px); color: var(--cyan); margin: 0 0 16px; }
.crate p, .offer-slab p, .receipt-roll p { font-size: clamp(17px, 1.55vw, 24px); line-height: 1.2; max-width: 760px; }

.stamp, .sticker { display: inline-block; padding: 8px 12px; border: 3px solid var(--black); color: var(--black); transform: rotate(-8deg); }
.rejected { background: var(--coral); }
.fine, .sticker { background: var(--green); }
.barcode { height: 90px; margin-top: 30px; background: repeating-linear-gradient(90deg, var(--black) 0 6px, transparent 6px 12px, var(--cyan) 12px 15px, transparent 15px 24px); opacity: .7; }

.bid-tag, .unroll-button { border: 3px solid var(--black); background: var(--orange); color: var(--black); padding: 12px 16px; cursor: pointer; box-shadow: 6px 6px 0 var(--black); font-size: 15px; }
.bid-tag:hover, .unroll-button:hover { background: var(--green); transform: translate(-2px, -2px); }

.aquarium { background: radial-gradient(circle at 30% 30%, rgba(169,243,255,.35), transparent 34%), linear-gradient(160deg, rgba(6,38,58,.9), rgba(10,11,13,.7)); }
.betta { position: absolute; width: 150px; height: 100px; left: 18%; top: 32%; transition: transform .28s ease; }
.betta span { display: block; width: 105px; height: 70px; border-radius: 55%; background: var(--coral); box-shadow: -34px 0 0 var(--orange), 0 0 30px var(--coral); }
.aside { position: absolute; bottom: 20px; right: 18px; max-width: 240px; font-family: var(--fraunces); color: var(--cyan); }

.bid-slip { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--frost); color: var(--black); transform: rotate(1deg); }
.bid-slip strong { font-family: var(--roboto); font-size: clamp(30px, 4vw, 72px); font-stretch: 50%; }
.bid-slip em { color: var(--coral); font-style: normal; font-weight: 700; }
.receipt ol { margin: 0; padding-left: 24px; font-size: 19px; line-height: 1.7; }
.speech { font-family: var(--fraunces); font-size: clamp(28px, 3.8vw, 58px); line-height: .95; color: var(--frost); }
.clownfish { position: absolute; right: 22px; bottom: 24px; width: 140px; height: 70px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 28px rgba(255,155,47,.55); transition: transform .28s ease; }
.clownfish span { position: absolute; width: 14px; height: 70px; background: var(--frost); top: 0; }
.clownfish span:nth-child(1) { left: 32px; } .clownfish span:nth-child(2) { left: 70px; } .clownfish span:nth-child(3) { right: 8px; height: 50px; top: 10px; }

.tank-window { background: linear-gradient(120deg, rgba(169,243,255,.18), rgba(6,38,58,.92)); }
.neon-lines i { position: absolute; height: 5px; width: 34%; background: var(--green); box-shadow: 0 0 22px var(--green); left: var(--x); top: var(--y); transform: rotate(var(--rot)); }
.neon-lines i:nth-child(1) { --x: 16%; --y: 68%; --rot: -7deg; } .neon-lines i:nth-child(2) { --x: 47%; --y: 30%; --rot: 4deg; background: var(--coral); box-shadow: 0 0 22px var(--coral); } .neon-lines i:nth-child(3) { --x: 58%; --y: 72%; --rot: 9deg; } .neon-lines i:nth-child(4) { --x: 8%; --y: 42%; --rot: 2deg; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.puffer-panel { display: grid; place-items: center; background: rgba(255,94,122,.12); }
.puffer { width: 118px; height: 118px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, var(--frost) 0 6px, transparent 7px), var(--orange); box-shadow: 0 0 35px rgba(255,155,47,.6); transition: transform .28s ease; }
.ticker { display: flex; align-items: center; justify-content: space-around; color: var(--black); background: var(--cyan); font-weight: 700; text-transform: uppercase; }
.price-rewrite { display: flex; align-items: end; gap: 18px; flex-wrap: wrap; margin-top: 36px; }
.price-rewrite del { color: var(--coral); font-size: 42px; } .price-rewrite strong { color: var(--green); font-size: 74px; line-height: .8; } .price-rewrite small { color: var(--cyan); text-transform: uppercase; }

.offer-slab { max-width: 1160px; min-height: 65vh; margin: 0 auto; padding: clamp(24px, 5vw, 72px); border: 5px solid var(--frost); background: rgba(220,238,255,.1); box-shadow: 16px 16px 0 var(--tank); backdrop-filter: blur(16px); }
.offer-slab h2 { color: var(--green); font-size: clamp(58px, 10vw, 142px); }
.offer-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; max-width: 520px; margin-top: 34px; padding: 18px; background: var(--black); border: 2px solid var(--cement); text-transform: uppercase; }
.offer-grid span:nth-child(even) { color: var(--orange); }

.receipt-scene { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, rgba(98,255,154,.14), transparent 26rem), var(--black); }
.receipt-roll { width: min(780px, 94vw); padding: clamp(24px, 5vw, 58px); background: linear-gradient(180deg, rgba(220,238,255,.94), rgba(169,243,255,.8)); color: var(--black); border: 4px solid var(--black); box-shadow: 18px 18px 0 var(--coral); transform-origin: top; }
.receipt-roll h2 { color: var(--black); font-family: var(--fraunces); letter-spacing: -.04em; }
.receipt-head { border-bottom: 4px solid var(--black); padding-bottom: 12px; text-transform: uppercase; font-weight: 700; }
.receipt-roll ul { list-style: none; padding: 0; margin: 28px 0; }
.receipt-roll li { display: flex; justify-content: space-between; border-bottom: 2px dashed var(--black); padding: 10px 0; text-transform: uppercase; }
.hidden-message { max-height: 0; overflow: hidden; margin-top: 18px; font-family: var(--fraunces); font-size: clamp(24px, 4vw, 46px); line-height: 1; color: var(--coral); transition: max-height .8s ease, filter .8s ease; filter: blur(8px); }
.receipt-roll.unrolled .hidden-message { max-height: 220px; filter: blur(0); }

@media (max-width: 880px) {
  .tape-nav { position: absolute; }
  .masonry-wall { grid-template-columns: 1fr; }
  .tall, .square, .thin, .receipt, .concrete-note, .wide { grid-column: span 1; grid-row: auto; }
  .bid-slip, .ticker { flex-direction: column; align-items: flex-start; }
  .warehouse-sign { top: 16vh; }
}