/* The skin pages' own layer, on top of the original sheet and extra.css.
   Semantic classes rather than utilities, because the compiled sheet only
   has the utilities the original markup used. Everything reads the colour
   tokens set in extra.css, so a new palette is one edit there. */

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 1.5rem 0 1rem;
}
@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    padding: 2.5rem 0 1.5rem;
  }
}
.hero-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 80%, transparent);
  border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.hero-kicker b {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}
.hero-title em {
  font-style: normal;
  color: var(--primary);
}
.hero-lead {
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* The stage: one skin at a time, lit from below in its rarity colour. */
.stage {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background:
    radial-gradient(90% 70% at 50% 100%, color-mix(in oklab, var(--rarity, var(--primary)) 38%, transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 45%, color-mix(in oklab, var(--rarity, var(--primary)) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #121821, #0b0e12);
  overflow: hidden;
  transition: background 600ms ease;
}
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(70% 60% at 50% 55%, #000, transparent);
}
.stage::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 16%;
  height: 10%;
  border-radius: 50%;
  background: color-mix(in oklab, var(--rarity, var(--primary)) 45%, transparent);
  filter: blur(28px);
  opacity: 0.55;
}
.stage-skin {
  position: absolute;
  inset: 20% 8% 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.96) rotate(-4deg);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}
.stage-skin[data-on='true'] {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-4deg);
  animation: stage-float 6s ease-in-out infinite;
}
.stage-skin img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55));
}
@keyframes stage-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
.stage-label {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: 1.1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  z-index: 2;
}
.stage-rarity {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rarity, var(--primary));
}
.stage-dots {
  position: absolute;
  bottom: 4.5rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 0.35rem;
  z-index: 2;
}
.stage-dots button {
  width: 1.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 200ms ease, width 200ms ease;
}
.stage-dots button[aria-current='true'] {
  width: 2.25rem;
  background: var(--primary);
}
@media (prefers-reduced-motion: reduce) {
  .stage-skin,
  .stage-skin[data-on='true'] {
    animation: none;
    transition: opacity 200ms ease;
  }
}

/* The unlock card that sits across the stage's corner. */
.unlock {
  position: relative;
  margin: -3.25rem 1rem 0;
  z-index: 3;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  padding: 0.9rem 1rem;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}
@media (min-width: 64rem) {
  .unlock {
    margin: -3.5rem 2rem 0 -2rem;
  }
}
.meter {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 70%, #fff 0%), var(--primary));
  box-shadow: 0 0 16px color-mix(in oklab, var(--primary) 60%, transparent);
  transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.meter > i[data-done='true'] {
  background: var(--up);
  box-shadow: 0 0 16px color-mix(in oklab, var(--up) 55%, transparent);
}

/* ------------------------------------------------------------ figures */

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.figures > div {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.figures dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
}
.figures dd {
  margin-top: 0.35rem;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- section headings */

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
}
.sec-head h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.875rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.sec-head p {
  max-width: 36rem;
  margin-top: 0.4rem;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.sec-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ----------------------------------------------------- the three panes */

.flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 64rem) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--card);
  overflow: hidden;
}
.pane-view {
  position: relative;
  min-height: 15.5rem;
  padding: 1.1rem;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in oklab, var(--primary) 7%, transparent), transparent 70%),
    var(--panel);
  border-bottom: 1px solid var(--border);
}
.pane-copy {
  padding: 1rem 1.2rem 1.25rem;
}
.pane-copy h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.pane-copy p {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.mini {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}
.mini-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.6rem;
}
.mini-row + .mini-row {
  border-top: 1px solid var(--border);
}

/* A Steam trade offer, the way the client shows it. */
.offer {
  border: 1px solid #2a475e;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #1b2838, #16202d);
  overflow: hidden;
}
.offer-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: #171d25;
  font-size: 0.75rem;
  color: #c6d4df;
}
.offer-head b {
  color: #66c0f4;
  font-weight: 600;
}
.offer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 0.35rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #d2efa9;
  background: linear-gradient(90deg, #5c7e10, #6b8e23);
}

/* ------------------------------------------------------------ the shelf */

.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tiers a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color 150ms ease, border-color 150ms ease;
}
.tiers a:hover {
  color: var(--foreground);
}
.tiers a[aria-current='true'] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 40rem) {
  .shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .shelf {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.skin-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease;
}
.skin-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--rarity, var(--primary)) 55%, transparent);
}
.skin-tile .skin-art img {
  transition: transform 300ms ease;
}
.skin-tile:hover .skin-art img {
  transform: scale(1.06) rotate(-2deg);
}

/* ------------------------------------------------------- closing band */

.band {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
  border-radius: 1.5rem;
  padding: 2.25rem 1.5rem;
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in oklab, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, color-mix(in oklab, var(--ct) 18%, transparent), transparent 60%),
    var(--card);
}
@media (min-width: 48rem) {
  .band {
    padding: 3rem;
  }
}

/* --------------------------------------------------- the claim reveal */

.reveal-shade {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 7, 10, 0.82);
  backdrop-filter: blur(6px);
  animation: page-in 200ms ease both;
}
.reveal-box {
  width: min(760px, 100%);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
}
.reel {
  position: relative;
  height: 9.5rem;
  overflow: hidden;
  background: #0b0e12;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.reel-track {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0;
  will-change: transform;
}
.reel-item {
  flex: 0 0 9rem;
  height: 8rem;
  border-radius: 0.6rem;
  overflow: hidden;
}
.reel-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  translate: -1px 0;
  background: var(--primary);
  box-shadow: 0 0 14px var(--primary);
  z-index: 2;
}
.reveal-win {
  animation: win-pop 700ms cubic-bezier(0.2, 0.9, 0.2, 1.2) both;
}
@keyframes win-pop {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------- utilities the pages need */
.gap-20 { gap: 5rem; }
.h-16 { height: 4rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.border-\[\#2a475e\] { border-color: #2a475e; }
.text-\[\#8f98a0\] { color: #8f98a0; }
.text-\[\#c6d4df\] { color: #c6d4df; }
@media (min-width: 40rem) {
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 48rem) {
  .md\:flex-row { flex-direction: row; }
  .md\:items-end { align-items: flex-end; }
  .md\:justify-between { justify-content: space-between; }
}
.min-h-\[132px\] { min-height: 132px; }
.rounded-\[0\.6rem\] { border-radius: 0.6rem; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.col-span-4 { grid-column: span 4 / span 4; }
@media (min-width: 40rem) {
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .lg\:sticky { position: sticky; }
  .lg\:top-24 { top: 6rem; }
}
.gap-16 { gap: 4rem; }

/* ======================================================================
   Atmosphere: the whole site sits in the light of a CS2 menu. A warm glow
   from the top, the cold CT blue from below, a faint map grid, and a slow
   drift so the page is never quite still. Fixed behind everything, never
   in the way of a click, and still for anybody who asked for less motion.
   ====================================================================== */

html {
  background-color: var(--background);
}
body {
  background-color: transparent;
}
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* The logo's own language behind every page: the orange slab cutting across
   at the logo's angle, fine hatch lines in the corners like the ones either
   side of the monogram, the warm and cold glows, and a grain over all of it
   so the dark is never flat. */
body::before {
  background:
    radial-gradient(60vw 46vh at 74% -6%, color-mix(in oklab, var(--primary) 30%, transparent), transparent 70%),
    radial-gradient(50vw 44vh at 6% 108%, color-mix(in oklab, var(--ct) 30%, transparent), transparent 70%),
    linear-gradient(115deg, transparent 0 58%, color-mix(in oklab, var(--primary) 9%, transparent) 58% 72%, transparent 72%),
    linear-gradient(115deg, transparent 0 74%, color-mix(in oklab, var(--primary) 5%, transparent) 74% 76%, transparent 76%);
  animation: atmos-drift 26s ease-in-out infinite alternate;
}
body::after {
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 9px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 160px 160px;
  mask-image:
    linear-gradient(115deg, #000 0 16%, transparent 34% 70%, rgba(0, 0, 0, 0.8) 88%),
    linear-gradient(#000, #000);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}
@keyframes atmos-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* The rail and the bar let the atmosphere through. */
aside.bg-background {
  background-color: color-mix(in oklab, var(--background) 78%, transparent);
  backdrop-filter: blur(14px);
}
header.sticky {
  background-color: color-mix(in oklab, var(--background) 72%, transparent);
}

/* Cards: a lit top edge and a little depth, so they sit on the glow. */
.tile {
  background-color: color-mix(in oklab, var(--card) 88%, transparent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 50px -30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
}
.card-lift:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 50px -24px rgba(0, 0, 0, 0.9),
    0 0 0 1px color-mix(in oklab, var(--primary) 18%, transparent);
}

/* Page headers on every inner page: a glow in the corner, the map grid,
   and the crosshair as a watermark, instead of two faint rules. */
.tile.ledger-lines {
  isolation: isolate;
  background-image:
    radial-gradient(70% 140% at 100% 0%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, color-mix(in oklab, var(--ct) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
}
.tile.ledger-lines::before {
  /* Two CS2 agents standing in the corner of every page header, fading
     into the panel on their left so the words stay the thing you read. */
  top: 0.75rem;
  bottom: 0;
  right: 1.5rem;
  left: auto;
  width: min(34%, 22rem);
  height: auto;
  translate: none;
  background: url('/brand/agents.png') right bottom / contain no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 35%);
  opacity: 0.9;
  z-index: -1;
}
.tile.ledger-lines::after {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary) 30%, color-mix(in oklab, var(--primary) 30%, transparent) 70%, transparent);
  opacity: 0.8;
}
.tile.ledger-lines h1 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* The primary button glows on hover, like the menu's Play button. */
.btn-primary:hover {
  box-shadow: 0 2px 0 var(--lip), 0 0 28px -4px color-mix(in oklab, var(--primary) 70%, transparent);
}

/* The rail's current page, lit in the accent. */
.rail-on {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--foreground);
}
.rail-on svg {
  color: var(--primary);
}
.rail-bar {
  background: var(--primary) !important;
  box-shadow: 0 0 10px var(--primary);
}
/* A header with its own button in the corner: the agents stand beside it,
   not behind it. */
@media (min-width: 64rem) {
  .tile.ledger-lines:has(.btn)::before {
    right: 12.5rem;
    width: min(28%, 18rem);
  }
  .tile.ledger-lines:has(.btn + .btn)::before {
    top: 4rem;
    right: 1.5rem;
    width: min(22%, 15rem);
  }
}
@media (max-width: 47.99rem) {
  .tile.ledger-lines::before {
    opacity: 0.35;
  }
}

/* A header whose copy keeps clear of the agents on the right. */
@media (min-width: 64rem) {
  .head-copy {
    max-width: 66%;
  }
}
.head-stat {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    color-mix(in oklab, var(--panel) 80%, transparent);
  overflow: hidden;
}
.head-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--foreground);
  opacity: 0.6;
}
.head-stat dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.head-stat dd {
  margin-top: 0.35rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.head-stat p {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.head-stat-gold {
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 60%),
    color-mix(in oklab, var(--panel) 80%, transparent);
}
.head-stat-gold::before {
  background: var(--primary);
  opacity: 1;
  box-shadow: 0 0 12px var(--primary);
}
.head-stat-gold dd {
  color: var(--primary);
}
.w-fit { width: fit-content; }
.py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
@media (min-width: 40rem) {
  .sm\:py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
}

/* --------------------------------------------------- the market viewer */

.viewer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  width: min(1120px, 100%);
  max-height: calc(100vh - 2rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
}
.viewer-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted-foreground);
}
.viewer-close:hover { color: var(--foreground); }
.viewer-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 100%, color-mix(in oklab, var(--rarity) 40%, transparent), transparent 70%),
    radial-gradient(55% 45% at 50% 48%, color-mix(in oklab, var(--rarity) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #121821, #0b0e12);
}
.viewer-stage:active { cursor: grabbing; }
.viewer-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(70% 60% at 50% 55%, #000, transparent);
  pointer-events: none;
}
.viewer-stage::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 14%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}
.viewer-skin {
  position: relative;
  z-index: 1;
  width: min(86%, 720px);
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px color-mix(in oklab, var(--rarity) 30%, transparent));
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}
.viewer-tools {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  z-index: 2;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(11, 14, 18, 0.8);
  backdrop-filter: blur(8px);
  cursor: default;
}
.viewer-tools button {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  color: var(--muted-foreground);
}
.viewer-tools button:hover { color: var(--foreground); background: var(--panel); }
.viewer-hint {
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.viewer-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border-left: 1px solid var(--border);
  overflow-y: auto;
}
.viewer-price {
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, var(--border));
  border-radius: 1rem;
  background: linear-gradient(160deg, color-mix(in oklab, var(--gold) 10%, transparent), transparent 70%), var(--panel);
}
.viewer-wear {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  font-size: 11px;
  color: var(--muted-foreground);
  transition: border-color 150ms ease, color 150ms ease;
}
.viewer-wear:hover { color: var(--foreground); }
.viewer-wear.is-on {
  border-color: var(--primary);
  color: var(--foreground);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}
@media (max-width: 860px) {
  .reveal-shade:has(.viewer) { align-items: flex-start; overflow-y: auto; }
  .viewer { grid-template-columns: 1fr; max-height: none; }
  .viewer-stage { min-height: 340px; }
  .viewer-side { border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
}
.cursor-zoom-in { cursor: zoom-in; }

/* --------------------------------------------------- the rail, again */

aside.bg-background {
  background:
    radial-gradient(140% 26% at 0% 0%, color-mix(in oklab, var(--primary) 13%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--background) 70%, transparent), color-mix(in oklab, #07090c 90%, transparent));
  border-right-color: rgba(255, 255, 255, 0.06);
}
/* The logo's hatch, faint, in the rail's top corner. */
aside.bg-background::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 8px);
  mask-image: linear-gradient(180deg, #000, transparent);
  pointer-events: none;
}
aside.bg-background > * { position: relative; }
.rail-brand { transition: opacity 150ms ease; }
.rail-brand:hover { opacity: 0.9; }
.rail-kicker {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}
.rail-group {
  padding: 0 0.75rem 0.45rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
}
.rail-rule {
  display: block;
  height: 1px;
  margin: 0 0.75rem 0.5rem;
  background: var(--border);
}
.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 14px;
  color: var(--muted-foreground);
  transition: color 150ms ease, background-color 150ms ease;
}
.rail-item:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.04);
}
.rail-item[aria-current='page'] {
  color: var(--foreground);
  font-weight: 500;
  background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 20%, transparent), color-mix(in oklab, var(--primary) 2%, transparent) 90%);
}
.rail-item[aria-current='page'] svg { color: var(--primary); }
/* The current page's marker: a short bar cut at the logo's angle. */
.rail-item[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 20%;
  bottom: 20%;
  width: 4px;
  background: var(--primary);
  clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
  filter: drop-shadow(0 0 6px var(--primary));
}
.rail-foot {
  display: block;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background:
    linear-gradient(115deg, color-mix(in oklab, var(--primary) 11%, transparent), transparent 60%),
    color-mix(in oklab, var(--card) 80%, transparent);
  transition: border-color 150ms ease;
}
.rail-foot:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.rail-live {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #3fb950;
  animation: live-ping 2s ease-out infinite;
}
@keyframes live-ping {
  0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.55); }
  80%, 100% { box-shadow: 0 0 0 6px rgba(63, 185, 80, 0); }
}

/* --------------------------------------------------- the token strip */

.token-strip {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--primary) 10%, transparent), transparent 40%),
    color-mix(in oklab, #07090c 72%, transparent);
  overflow: hidden;
}
.token-strip::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 340px;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 8px);
  mask-image: linear-gradient(90deg, #000, transparent);
  pointer-events: none;
}
.token-strip::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0.55;
}
.token-strip > div { position: relative; z-index: 1; }
.token-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 45%, transparent), 0 0 18px -4px var(--primary);
}
.token-mark img { width: 100%; height: 100%; }
.token-soon {
  display: none;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.4rem;
  padding: 0.22rem 0.65rem;
  border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in oklab, var(--primary) 80%, white);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  white-space: nowrap;
}
.token-soon i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
  animation: live-ping-o 2s ease-out infinite;
}
@keyframes live-ping-o {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 60%, transparent); }
  80%, 100% { box-shadow: 0 0 0 6px transparent; }
}
@media (min-width: 40rem) { .token-soon { display: inline-flex; } }
.token-figures {
  display: none;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.token-figures > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0 1.1rem;
  white-space: nowrap;
}
.token-figures > div + div { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.token-figures dt {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.token-figures dd {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 72rem) { .token-figures { display: flex; } }
.token-cta { margin-left: auto; flex-shrink: 0; }
@media (min-width: 72rem) { .token-cta { margin-left: 0; } }
.token-buy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2rem;
  padding: 0 0.9rem;
  border: 1px dashed color-mix(in oklab, var(--primary) 40%, var(--border));
  border-radius: 0.6rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: not-allowed;
}
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.max-w-\[9rem\] { max-width: 9rem; }
.ml-1 { margin-left: 0.25rem; }
.overflow-y-auto { overflow-y: auto; }
.pt-5 { padding-top: 1.25rem; }
.size-\[17px\] { width: 17px; height: 17px; }
.token-mc {
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.token-mc b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }