:root {
  --bazaar-ink: #080817;
  --bazaar-panel: rgba(15, 14, 38, 0.88);
  --bazaar-panel-strong: #12112c;
  --bazaar-gold: #f1c56b;
  --bazaar-gold-pale: #ffe7a8;
  --bazaar-violet: #a96cff;
  --bazaar-cyan: #65dcff;
  --bazaar-magenta: #f06cff;
  --bazaar-teal: #62dfc7;
  --bazaar-line: rgba(241, 197, 107, 0.24);
  --bazaar-copy: #f7f2ff;
  --bazaar-muted: #b7b3cf;
}

.bazaar-page {
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 15% 12%, rgba(91, 53, 183, 0.22), transparent 30%),
    radial-gradient(circle at 88% 28%, rgba(25, 130, 184, 0.16), transparent 28%),
    linear-gradient(180deg, #080817 0%, #0b0920 52%, #060714 100%);
  color: var(--bazaar-copy);
}

/* Soft ambient light supports the portal artwork without patterned dots or disks. */
.bazaar-page::before { content: none; }

.cosmos-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 5% 35%, rgba(104, 48, 174, .13), transparent 65%),
    radial-gradient(ellipse at 95% 80%, rgba(91, 59, 168, .1), transparent 65%);
}

.bazaar-page a {
  text-decoration: none;
}

.bazaar-page :focus-visible {
  outline: 3px solid var(--bazaar-gold-pale);
  outline-offset: 4px;
}

.bazaar-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  width: min(1480px, calc(100% - 48px));
  min-height: 84px;
  margin: 18px auto 0;
  padding: 12px 18px;
  border: 1px solid rgba(241, 197, 107, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 17, 44, 0.9), rgba(8, 8, 23, 0.86));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), 0 0 40px rgba(115, 74, 216, 0.07) inset;
  backdrop-filter: blur(18px);
}

.bazaar-brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 48px;
  gap: 13px;
  color: var(--bazaar-copy);
}

.bazaar-brand-mark {
  display: block;
  width: 40px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: contain;
}

.bazaar-brand-mark + span,
.bazaar-brand > span:last-child {
  display: grid;
  gap: 3px;
}

.bazaar-brand-mark + span strong,
.bazaar-brand > span:last-child strong {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.18em;
}

.bazaar-brand-mark + span small,
.bazaar-brand > span:last-child small {
  color: var(--bazaar-gold);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
}

.bazaar-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.bazaar-nav a {
  display: grid;
  min-height: 44px;
  padding: 0 18px;
  place-items: center;
  border-radius: 999px;
  color: #c6c1d6;
  font: 650 14px/1 var(--sans);
  letter-spacing: 0.04em;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.bazaar-nav a:hover,
.bazaar-nav a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(241, 197, 107, 0.18), rgba(169, 108, 255, 0.13));
  box-shadow: 0 0 22px rgba(169, 108, 255, 0.12) inset;
  color: #fff6dc;
}

.nexus-link {
  justify-self: end;
  display: grid;
  min-height: 44px;
  padding: 0 12px;
  place-items: center;
  color: var(--bazaar-gold-pale);
  font: 650 14px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bazaar-hero {
  position: relative;
  display: grid;
  align-items: end;
  width: min(1480px, calc(100% - 48px));
  min-height: min(820px, calc(100vh - 128px));
  margin: 18px auto 0;
  overflow: hidden;
  border: 1px solid rgba(241, 197, 107, 0.28);
  border-radius: 28px;
  background: #080817;
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.48), 0 0 50px rgba(102, 70, 210, 0.12);
  isolation: isolate;
}

.bazaar-hero::before {
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(255, 231, 168, 0.14);
  border-radius: 20px;
  content: "";
  pointer-events: none;
}

.bazaar-hero-art,
.bazaar-hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bazaar-hero-art {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.02);
}

.bazaar-hero-scrim {
  background:
    linear-gradient(90deg, rgba(5, 6, 19, 0.1) 0%, rgba(5, 6, 19, 0) 55%),
    linear-gradient(0deg, rgba(5, 6, 19, 0.92) 0%, rgba(5, 6, 19, 0.08) 48%, transparent 72%);
}

.bazaar-hero-copy {
  position: relative;
  z-index: 3;
  width: min(750px, 70%);
  padding: 64px 58px 84px;
}

.bazaar-eyebrow,
.bazaar-kicker {
  color: var(--bazaar-gold);
  font: 700 14px/1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bazaar-eyebrow span {
  display: inline-block;
  margin-right: 7px;
  color: var(--bazaar-cyan);
  filter: drop-shadow(0 0 8px rgba(101, 220, 255, 0.8));
}

.bazaar-hero h1,
.market-hero h1,
.registry-hero h1 {
  max-width: 900px;
  margin: 18px 0 20px;
  font-family: var(--serif);
  font-size: clamp(48px, 6.6vw, 104px);
  font-weight: 400;
  line-height: 0.89;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.bazaar-hero h1 em,
.market-hero h1 em,
.registry-hero h1 em,
.bazaar-heading h2 em,
.portal-copy h2 em,
.bazaar-boundary h2 em,
.district-section h2 em,
.dedicated-deployment h2 em {
  color: var(--bazaar-gold-pale);
  font-weight: 400;
}

.bazaar-hero-copy > p:not(.bazaar-eyebrow) {
  max-width: 680px;
  color: #ddd9ea;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.65;
}

.bazaar-actions,
.deployment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bazaar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid rgba(241, 197, 107, 0.24);
  border-radius: 10px;
  font: 750 14px/1 var(--sans);
  letter-spacing: 0.025em;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.bazaar-button:hover {
  transform: translateY(-2px);
}

.bazaar-button-primary {
  background: linear-gradient(135deg, #ffe8a7, #d9a74e);
  box-shadow: 0 10px 34px rgba(214, 160, 65, 0.2), 0 0 24px rgba(255, 227, 155, 0.12) inset;
  color: #171124;
}

.bazaar-button-ghost {
  background: rgba(12, 12, 31, 0.66);
  color: #f7f2ff;
  backdrop-filter: blur(12px);
}

.bazaar-button-ghost:hover {
  border-color: rgba(169, 108, 255, 0.55);
  box-shadow: 0 0 28px rgba(169, 108, 255, 0.18);
}

.bazaar-hero-ledger {
  position: absolute;
  right: 42px;
  bottom: 34px;
  z-index: 3;
  display: flex;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(241, 197, 107, 0.2);
  border-radius: 12px;
  background: rgba(7, 7, 20, 0.78);
  backdrop-filter: blur(14px);
}

.bazaar-hero-ledger span {
  display: grid;
  min-width: 112px;
  padding: 13px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  color: #aaa5be;
  font: 600 14px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bazaar-hero-ledger span:first-child {
  border-left: 0;
}

.bazaar-hero-ledger strong {
  color: var(--bazaar-gold-pale);
  font-size: 15px;
}

.market-marquee {
  width: 100%;
  margin: 22px 0 0;
  overflow: hidden;
  border-block: 1px solid rgba(241, 197, 107, 0.14);
  background: rgba(9, 8, 25, 0.76);
}

.market-marquee div {
  display: flex;
  width: max-content;
  min-width: 100%;
  justify-content: space-around;
  gap: 44px;
  padding: 13px 24px;
  animation: bazaar-drift 32s linear infinite alternate;
}

.market-marquee span {
  color: #cfc9df;
  font: 650 14px/1 var(--mono);
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.market-marquee span::first-letter {
  color: var(--bazaar-gold);
}

.bazaar-section {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0;
}

.bazaar-heading,
.compact-heading {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 28px;
}

.bazaar-heading h2,
.portal-copy h2,
.bazaar-boundary h2,
.rules-heading h2,
.dedicated-deployment h2 {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.bazaar-heading > p,
.compact-heading > p {
  color: var(--bazaar-muted);
  font-size: 16px;
  line-height: 1.8;
}

.market-callout {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(98, 223, 199, 0.18);
  border-radius: 14px;
  background: rgba(98, 223, 199, 0.04);
}

.market-callout p {
  margin: 0;
  color: var(--bazaar-muted);
  font: 14px/1.7 var(--mono);
}

.market-callout strong {
  color: #dffcf6;
  text-transform: uppercase;
}

.pulse-orb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bazaar-teal);
  box-shadow: 0 0 0 5px rgba(98, 223, 199, 0.08), 0 0 20px var(--bazaar-teal);
  animation: bazaar-pulse 2.4s ease-in-out infinite;
}

.stall-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stall-grid[aria-busy="true"] {
  min-height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  background: linear-gradient(110deg, rgba(255,255,255,0.015) 30%, rgba(169,108,255,0.08) 50%, rgba(255,255,255,0.015) 70%) 0 0 / 200% 100%;
  animation: bazaar-shimmer 2s linear infinite;
}

.stall-card {
  position: relative;
  display: flex;
  min-height: 370px;
  flex-direction: column;
  padding: 28px 24px 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stall-accent) 36%, rgba(255,255,255,0.12));
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--stall-accent) 16%, transparent), transparent 35%),
    linear-gradient(160deg, rgba(24, 22, 55, 0.98), rgba(10, 10, 28, 0.98));
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.28), 0 0 25px color-mix(in srgb, var(--stall-accent) 7%, transparent) inset;
  color: var(--bazaar-copy);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.stall-card:hover {
  z-index: 2;
  border-color: color-mix(in srgb, var(--stall-accent) 72%, #fff 12%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38), 0 0 35px color-mix(in srgb, var(--stall-accent) 15%, transparent);
  transform: translateY(-7px);
}

.stall-awning {
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--stall-accent) 0 28px, color-mix(in srgb, var(--stall-accent) 38%, #17132f) 28px 56px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--stall-accent) 45%, transparent);
}

.stall-top,
.stall-foot,
.stall-meta,
.stall-badges {
  display: flex;
  align-items: center;
}

.stall-top {
  justify-content: space-between;
  gap: 14px;
}

.stall-mark {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--stall-accent) 65%, #fff 10%);
  border-radius: 15px 15px 4px 15px;
  background: color-mix(in srgb, var(--stall-accent) 14%, rgba(9,9,25,0.8));
  box-shadow: 0 0 24px color-mix(in srgb, var(--stall-accent) 18%, transparent);
  color: #fff;
  font: 750 14px/1 var(--mono);
}

.stall-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.stall-badge {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #c8c2da;
  font: 650 14px/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stall-available {
  border-color: rgba(98, 223, 199, 0.3);
  color: #baf6e9;
}

.stall-preview {
  border-color: rgba(241, 197, 107, 0.3);
  color: var(--bazaar-gold-pale);
}

.stall-card h3 {
  margin: 32px 0 12px;
  color: #fff;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
}

.stall-card > p {
  margin: 0;
  color: #bdb8d0;
  font-size: 14px;
  line-height: 1.7;
}

.stall-meta {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.stall-meta span {
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  color: #aaa5bd;
  font: 14px/1 var(--mono);
  text-transform: uppercase;
}

.stall-foot {
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.stall-foot small {
  color: #8f8aa3;
  font: 14px/1.4 var(--mono);
}

.stall-foot strong {
  color: var(--bazaar-gold-pale);
  font: 700 14px/1 var(--sans);
  white-space: nowrap;
}

.bazaar-status {
  margin: 18px 0 0;
  color: #aaa5bd;
  font: 14px/1.5 var(--mono);
  text-align: center;
}

.center-action {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.district-section {
  position: relative;
}

.district-section::before {
  position: absolute;
  inset: 70px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bazaar-line), transparent);
  content: "";
}

.district-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.district-card {
  position: relative;
  display: grid;
  min-height: 250px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(24,21,53,0.96), rgba(10,9,28,0.94));
  color: var(--bazaar-copy);
  transition: transform 220ms ease, border-color 220ms ease;
}

.district-card:hover {
  border-color: currentColor;
  transform: translateY(-5px);
}

.district-card small {
  color: currentColor;
  font: 700 14px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.district-card h3 {
  margin: 24px 0 10px;
  font-family: var(--serif);
  font-size: clamp(32px, 3.7vw, 50px);
  font-weight: 400;
}

.district-card p {
  max-width: 440px;
  margin: 0;
  color: #bcb6cf;
  font-size: 14px;
  line-height: 1.7;
}

.district-card b {
  align-self: end;
  margin-top: 30px;
  font: 700 14px/1 var(--sans);
}

.district-sigil {
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 28px;
  filter: drop-shadow(0 0 12px currentColor);
}

.district-cognition { color: #ca8cff; }
.district-guardian { color: #ff8f78; }
.district-foundry { color: #69d8d0; }
.district-archive { color: #f0c56b; }

.portal-stage {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  min-height: 460px;
  padding: 36px;
  overflow: hidden;
  border: 1px solid rgba(169, 108, 255, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 50%, rgba(102, 73, 218, 0.18), transparent 31%),
    linear-gradient(135deg, rgba(18, 17, 45, 0.97), rgba(8, 8, 24, 0.98));
}

.portal-rings {
  position: relative;
  display: grid;
  width: min(450px, 100%);
  aspect-ratio: 1;
  place-items: center;
  margin: auto;
}

.portal-rings::before,
.portal-rings::after,
.portal-rings i {
  position: absolute;
  border: 1px solid rgba(169, 108, 255, 0.32);
  border-radius: 50%;
  content: "";
}

.portal-rings::before { inset: 5%; box-shadow: 0 0 45px rgba(101,220,255,0.12), 0 0 40px rgba(169,108,255,0.12) inset; }
.portal-rings::after { inset: 19%; border-color: rgba(241,197,107,0.35); }
.portal-rings i:nth-child(1) { inset: 0 43%; border-radius: 2px; transform: rotate(42deg); }
.portal-rings i:nth-child(2) { inset: 43% 0; border-radius: 2px; transform: rotate(-18deg); }
.portal-rings i:nth-child(3) { inset: 30%; border-style: dashed; animation: bazaar-spin 20s linear infinite; }

.portal-rings strong {
  display: grid;
  width: 130px;
  height: 130px;
  place-items: center;
  border: 1px solid var(--bazaar-gold);
  background: radial-gradient(circle, rgba(169,108,255,0.22), #0d0c28 70%);
  box-shadow: 0 0 60px rgba(169,108,255,0.35), 0 0 24px rgba(241,197,107,0.2) inset;
  color: var(--bazaar-gold-pale);
  font: 500 46px/1 var(--serif);
  transform: rotate(45deg);
}

.portal-rings strong::first-line {
  transform: rotate(-45deg);
}

.portal-copy {
  max-width: 620px;
  justify-self: end;
}

.portal-copy > p:not(.bazaar-kicker) {
  color: var(--bazaar-muted);
  font-size: 15px;
  line-height: 1.8;
}

.portal-types {
  display: grid;
  gap: 8px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.portal-types li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}

.portal-types li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(241,197,107,0.24);
  border-radius: 50%;
  color: var(--bazaar-gold);
  font: 14px/1 var(--mono);
}

.portal-types div {
  display: grid;
  gap: 4px;
}

.portal-types strong { font-size: 14px; }
.portal-types small { color: #9690a8; font: 14px/1 var(--mono); }

.bazaar-boundary {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr auto;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
  padding: 38px 42px;
  border: 1px solid rgba(241,197,107,0.2);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(241,197,107,0.07), rgba(169,108,255,0.06));
}

.bazaar-boundary h2 {
  font-size: clamp(34px, 4.1vw, 58px);
}

.bazaar-boundary > p {
  color: #b8b2ca;
  font-size: 14px;
  line-height: 1.75;
}

.bazaar-boundary > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--bazaar-gold-pale);
  font: 700 14px/1 var(--sans);
  white-space: nowrap;
}

.bazaar-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1480px, calc(100% - 48px));
  min-height: 130px;
  margin: 0 auto 24px;
  padding: 24px;
  border-top: 1px solid var(--bazaar-line);
}

.bazaar-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.bazaar-footer-links a,
.bazaar-footer > p {
  color: #928da4;
  font: 14px/1.4 var(--mono);
  text-transform: uppercase;
}

.bazaar-footer-links a:hover { color: var(--bazaar-gold-pale); }
.bazaar-footer > p { justify-self: end; }

/* Bazaar Floor */
.market-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  width: min(1320px, calc(100% - 48px));
  min-height: 0;
  margin: 0 auto;
  padding: 28px 0;
}

.market-hero > div:first-child { max-width: 900px; }
.market-hero > div:first-child > p:not(.bazaar-eyebrow),
.registry-copy > p:not(.bazaar-eyebrow) {
  max-width: 690px;
  color: var(--bazaar-muted);
  font-size: 17px;
  line-height: 1.75;
}

.market-portal-art {
  width: 100%;
  max-width: 360px;
  justify-self: end;
  filter: drop-shadow(0 0 16px rgba(133, 69, 233, 0.26));
}

.market-portal-art img {
  display: block;
  width: 100%;
  height: auto;
  /* Keep the approved artwork intact inside the doorway silhouette. */
  mask-image: url("./public/bazaar-portal-mask.svg");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.marketplace-page .section-shell {
  padding-block: 40px;
  width: min(1320px, calc(100% - 48px));
}

.bazaar-floor {
  position: relative;
  padding-top: 36px;
}

.bazaar-floor::before {
  position: absolute;
  top: 12px;
  left: 50%;
  width: min(900px, 80vw);
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(169,108,255,0.14), transparent 70%);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}

.bazaar-heading-row {
  margin-bottom: 32px;
}

.marketplace-page .catalog-toolbar {
  border-color: rgba(241,197,107,0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22,20,51,0.94), rgba(10,10,27,0.94));
  box-shadow: 0 18px 50px rgba(0,0,0,0.2);
}

.marketplace-page .search-field,
.marketplace-page .select-field,
.marketplace-page .toolbar-button {
  min-height: 48px;
}

.marketplace-page .category-filters {
  gap: 8px;
}

.marketplace-page .filter-chip {
  min-height: 38px;
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}

.marketplace-page .filter-chip[aria-pressed="true"] {
  border-color: rgba(241,197,107,0.5);
  background: linear-gradient(135deg, rgba(241,197,107,0.18), rgba(169,108,255,0.12));
  box-shadow: 0 0 20px rgba(241,197,107,0.08) inset;
}

.marketplace-page .app-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.marketplace-page .app-card {
  position: relative;
  min-height: 0;
  padding-top: 31px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--app-accent) 30%, rgba(255,255,255,0.1));
  border-radius: 19px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--app-accent) 13%, transparent), transparent 31%),
    linear-gradient(155deg, rgba(25,22,56,0.98), rgba(10,10,28,0.98));
  box-shadow: 0 22px 55px rgba(0,0,0,0.28), 0 0 25px color-mix(in srgb, var(--app-accent) 7%, transparent) inset;
}

.marketplace-page .app-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--app-accent) 0 26px, color-mix(in srgb, var(--app-accent) 30%, #17132f) 26px 52px);
  box-shadow: 0 0 17px color-mix(in srgb, var(--app-accent) 28%, transparent);
  content: "";
}

.marketplace-page .app-card:hover {
  border-color: color-mix(in srgb, var(--app-accent) 70%, #fff 10%);
  box-shadow: 0 31px 70px rgba(0,0,0,0.38), 0 0 36px color-mix(in srgb, var(--app-accent) 13%, transparent);
  transform: translateY(-6px);
}

.marketplace-page .app-mark {
  border-color: color-mix(in srgb, var(--app-accent) 70%, #fff 10%);
  border-radius: 15px 15px 4px 15px;
  box-shadow: 0 0 25px color-mix(in srgb, var(--app-accent) 18%, transparent);
}

.marketplace-page .app-title-row h3 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}

.listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.listing-meta span {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  color: #aaa5bd;
  font: 14px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.marketplace-page .app-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.marketplace-page .card-primary-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
  padding: 10px 20px;
  white-space: nowrap;
  border: 1px solid #e6bd67;
  border-radius: 16px 4px 16px 4px;
  background: linear-gradient(135deg, #4b2778, #211234 70%);
  box-shadow: 0 0 18px rgba(158,88,243,.32), inset 0 0 12px rgba(239,192,102,.12);
  color: #ffe8aa;
  font: 700 16px/1.4 var(--sans);
  letter-spacing: .02em;
}
.marketplace-page .card-primary-link:hover {
  color: #fff4d5;
  background: linear-gradient(135deg, #67369e, #34204e);
  box-shadow: 0 0 26px rgba(171,107,255,.5), inset 0 0 14px rgba(239,192,102,.2);
}
.marketplace-page .card-primary-link:focus-visible,
.marketplace-page .card-secondary-link:focus-visible {
  outline: 2px solid #ffe8aa;
  outline-offset: 4px;
}
.marketplace-page .card-secondary-link {
  flex: 1 1 190px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #d4c3eb;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

.route-status {
  min-height: 24px;
  margin: 0;
  color: var(--bazaar-gold-pale);
  font: 14px/1.4 var(--mono);
}

.portal-workbench {
  padding-top: 120px;
  padding-bottom: 130px;
}

.marketplace-page .source-list-panel,
.marketplace-page .source-editor {
  border-color: rgba(169,108,255,0.18);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(23,21,52,0.96), rgba(10,10,28,0.96));
}

.marketplace-page .source-action,
.marketplace-page .text-button {
  min-height: 44px;
  padding: 8px 12px;
}

.portal-registry-link {
  margin: 20px 0 0;
  color: #9f99b2;
  font: 14px/1.6 var(--mono);
  text-align: right;
}

.portal-registry-link a { color: var(--bazaar-gold-pale); }

.app-dialog {
  width: min(880px, calc(100% - 32px));
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(241,197,107,0.34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--dialog-accent, #a96cff) 20%, transparent), transparent 35%),
    linear-gradient(150deg, #1a1738, #09091d 70%);
  box-shadow: 0 40px 130px rgba(0,0,0,0.72), 0 0 55px rgba(169,108,255,0.15);
  color: var(--bazaar-copy);
}

.app-dialog::backdrop {
  background: rgba(3, 3, 12, 0.82);
  backdrop-filter: blur(9px);
}

.dialog-close {
  position: sticky;
  top: 18px;
  z-index: 4;
  display: grid;
  width: 46px;
  height: 46px;
  float: right;
  margin: 18px 18px -64px 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(8,8,23,0.8);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.dialog-stall {
  padding: 58px;
}

.dialog-overline,
.dialog-badges,
.dialog-categories,
.dialog-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dialog-overline {
  color: var(--bazaar-gold);
  font: 700 14px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dialog-mark {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 24px 0;
  place-items: center;
  border: 1px solid var(--dialog-accent);
  border-radius: 20px 20px 6px 20px;
  background: color-mix(in srgb, var(--dialog-accent) 13%, #0b0a20);
  box-shadow: 0 0 32px color-mix(in srgb, var(--dialog-accent) 20%, transparent);
  color: #fff;
  font: 800 15px/1 var(--mono);
}

.dialog-stall h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(44px, 7vw, 78px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.dialog-summary {
  max-width: 700px;
  margin: 18px 0 0;
  color: #d7d1e4;
  font-size: 18px;
  line-height: 1.65;
}

.dialog-description {
  max-width: 720px;
  margin: 26px 0;
  color: #aaa4bc;
  font-size: 14px;
  line-height: 1.8;
}

.dialog-badges span,
.dialog-categories span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: #c6bfd5;
  font: 14px/1 var(--mono);
  text-transform: uppercase;
}

.dialog-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0;
}

.dialog-detail-grid div {
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}

.dialog-detail-grid small {
  display: block;
  margin-bottom: 6px;
  color: #858096;
  font: 14px/1 var(--mono);
  text-transform: uppercase;
}

.dialog-detail-grid strong { font-size: 14px; }

.dialog-capabilities {
  margin: 26px 0;
  padding: 20px;
  border-left: 2px solid var(--dialog-accent);
  background: color-mix(in srgb, var(--dialog-accent) 5%, transparent);
  color: #c7c1d6;
  font: 14px/1.8 var(--mono);
}

.dialog-links { margin-top: 30px; }
.dialog-links a { min-height: 48px; }

.dialog-boundary {
  margin-top: 30px;
  padding: 16px 18px;
  border: 1px solid rgba(241,197,107,0.16);
  border-radius: 10px;
  background: rgba(241,197,107,0.04);
  color: #aca6ba;
  font: 14px/1.65 var(--mono);
}

/* Portal Registry */
.registry-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
  align-items: center;
  width: min(1320px, calc(100% - 48px));
  min-height: 0;
  margin: 0 auto;
  gap: 28px;
  padding: 32px 0 48px;
}

.registry-copy { max-width: 780px; }
.registry-copy .bazaar-button { margin-top: 20px; }

.registry-map {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  justify-self: end;
}

.registry-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 190px;
  justify-items: center;
  gap: 10px;
  padding: 24px 0;
  background: radial-gradient(ellipse, rgba(115, 53, 229, 0.32), transparent 70%);
  text-align: center;
  transform: translate(-50%, -50%);
}

.registry-core img { display: block; width: 100px; height: 146px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(157, 89, 255, 0.55)); }
.registry-core strong { color: var(--bazaar-gold-pale); font: 500 14px/1.3 var(--serif); letter-spacing: 0.08em; }
.registry-core span { color: #c8badf; font: 14px/1.4 var(--mono); }

.registry-orbit {
  position: absolute;
  border: 1px solid rgba(169,108,255,0.55);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(112,53,218,0.13), transparent 70%);
  box-shadow: 0 0 24px rgba(153,92,255,0.22), 0 0 35px rgba(101,220,255,0.1) inset;
}

.orbit-a { inset: 8%; }
.orbit-b { inset: 19%; border-color: rgba(241,197,107,0.45); border-style: dotted; animation: bazaar-spin 26s linear infinite; }

.registry-node {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  width: 190px;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(241,197,107,0.5);
  border-radius: 18px 4px 18px 4px;
  background: linear-gradient(135deg, rgba(41,25,70,0.97), rgba(13,12,34,0.97));
  box-shadow: 0 0 22px rgba(151,86,243,0.18), 0 0 16px rgba(241,197,107,0.08) inset;
}

.registry-node > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 14px/1 var(--mono);
  background: radial-gradient(circle, rgba(161,98,249,0.28), transparent);
  box-shadow: 0 0 16px currentColor, 0 0 10px rgba(165,110,255,0.2) inset;
}

.registry-node div { display: grid; gap: 4px; }
.registry-node strong { color: #fff; font-size: 14px; }
.registry-node small { color: #c4b8d7; font: 14px/1.3 var(--mono); }
.registry-public { top: 5%; left: 0; color: var(--bazaar-cyan); }
.registry-private { top: 37%; right: 0; color: var(--bazaar-magenta); }
.registry-intranet { bottom: 4%; left: 5%; color: var(--bazaar-gold); }

/* Offset paths keep the labels upright while their centers follow the orbit. */
@supports (offset-path: ellipse(35% 43% at 50% 50%)) {
  .registry-node {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    offset-path: ellipse(35% 43% at 50% 50%);
    offset-rotate: 0deg;
    offset-anchor: center;
    animation: registry-travel 72s linear infinite;
  }
  .registry-public { offset-distance: 0%; animation-delay: -36s; }
  .registry-private { offset-distance: 33.333%; animation-delay: -60s; }
  .registry-intranet { offset-distance: 66.667%; animation-delay: -12s; }
  .orbit-a { inset: 7% 15%; }
}

@keyframes registry-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.registry-map:hover .registry-node,
.registry-map:focus-within .registry-node,
.registry-map:has(.registry-motion-control input:checked) .registry-node {
  animation-play-state: paused;
}

.registry-motion-control {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--bazaar-gold-pale);
  font: 14px/1.4 var(--mono);
  cursor: pointer;
}
.registry-motion-control input { accent-color: #b884f5; }
.registry-motion-control:focus-within { outline: 2px solid var(--bazaar-gold); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .registry-node { animation: none; }
  .registry-motion-control { display: none; }
}

.realm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.realm-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 34px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(24,21,54,0.97), rgba(9,9,27,0.98));
}

.realm-icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 24px currentColor;
  font-size: 24px;
}

.realm-public { color: var(--bazaar-cyan); }
.realm-private { color: var(--bazaar-magenta); }
.realm-intranet { color: var(--bazaar-gold); }
.realm-number { margin: 28px 0 10px; font: 700 14px/1 var(--mono); letter-spacing: 0.15em; }
.realm-card h3 { margin: 0; color: #fff; font: 400 35px/1 var(--serif); }
.realm-card > p:not(.realm-number) { color: #afa9c1; font-size: 14px; line-height: 1.75; }
.realm-card ul { display: grid; gap: 8px; margin: 20px 0; padding: 0; color: #c6bfd5; font: 14px/1.5 var(--mono); list-style: none; }
.realm-card li::before { margin-right: 8px; color: currentColor; content: "✦"; }
.realm-card > a { margin-top: auto; color: currentColor; font: 700 14px/1.4 var(--sans); }

.portal-rules {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 36px;
}

.rules-heading { position: sticky; top: 30px; align-self: start; }
.rules-heading h2 { font-size: clamp(42px, 5vw, 70px); }
.rules-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rules-list li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.rules-list li > span { color: var(--bazaar-gold); font: 700 14px/1 var(--mono); }
.rules-list h3 { margin: 0 0 8px; font: 500 24px/1.2 var(--serif); }
.rules-list p { margin: 0; color: #aaa4ba; font-size: 14px; line-height: 1.75; }

.dedicated-deployment {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
  padding: 32px;
  border: 1px solid rgba(241,197,107,0.2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(241,197,107,0.06), rgba(169,108,255,0.07));
}

.deployment-seal {
  display: grid;
  width: 140px;
  min-height: 210px;
  place-items: center;
  background: radial-gradient(ellipse, rgba(151,78,245,0.32), transparent 70%);
}

.deployment-seal img {
  display: block;
  width: 120px;
  height: 175px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(166,100,255,0.5));
}

.dedicated-deployment {
  border-color: rgba(241,197,107,0.45);
  background: radial-gradient(ellipse at 10% 50%, rgba(118,51,214,0.2), transparent 48%), linear-gradient(135deg, rgba(37,23,62,0.85), rgba(12,11,30,0.92));
  box-shadow: 0 0 35px rgba(145,77,230,0.13), 0 0 24px rgba(241,197,107,0.05) inset;
}

.deployment-actions .bazaar-button-ghost {
  border-color: rgba(182,125,249,0.5);
  background: linear-gradient(135deg, rgba(89,43,139,0.3), rgba(18,13,36,0.8));
  box-shadow: 0 0 18px rgba(158,86,241,0.12);
}

.dedicated-deployment h2 { font-size: clamp(38px, 4.7vw, 64px); }
.dedicated-deployment > div:nth-child(2) > p:last-child { color: #aaa4ba; font-size: 14px; line-height: 1.75; }
.deployment-actions { display: grid; margin: 0; }

@keyframes bazaar-drift {
  to { transform: translateX(-5%); }
}

@keyframes bazaar-pulse {
  50% { opacity: 0.55; transform: scale(0.8); }
}

@keyframes bazaar-spin {
  to { transform: rotate(360deg); }
}

@keyframes bazaar-shimmer {
  to { background-position: -200% 0; }
}

@media (max-width: 1160px) {
  .bazaar-header { grid-template-columns: 1fr auto; }
  .bazaar-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; order: 3; }
  .nexus-link { grid-column: 2; grid-row: 1; }
  .bazaar-hero { min-height: 760px; }
  .bazaar-hero-copy { width: 80%; }
  .bazaar-hero-ledger { right: 24px; bottom: 24px; }
  .stall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketplace-page .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bazaar-boundary { grid-template-columns: 1fr 1fr; }
  .bazaar-boundary > a { grid-column: 1 / -1; justify-self: start; }
  .registry-hero { grid-template-columns: 1fr; }
  .registry-copy { padding-top: 0; }
  .registry-map { justify-self: center; width: min(480px, 90vw); margin-bottom: 28px; }
  .dedicated-deployment { grid-template-columns: 130px 1fr; }
  .deployment-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .bazaar-header { width: min(100% - 24px, 1480px); margin-top: 10px; padding: 10px 12px; }
  .bazaar-nav { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .bazaar-nav a { flex: 0 0 auto; min-height: 44px; padding-inline: 15px; }
  .nexus-link { font-size: 0; }
  .nexus-link span { font-size: 16px; }
  .bazaar-hero { width: calc(100% - 24px); min-height: 760px; border-radius: 20px; }
  .bazaar-hero-art { object-position: 64% center; }
  .bazaar-hero-scrim { background: linear-gradient(0deg, rgba(5,6,19,0.96), rgba(5,6,19,0.12) 75%); }
  .bazaar-hero-copy { width: 100%; padding: 40px 28px 150px; }
  .bazaar-hero-copy > p:not(.bazaar-eyebrow) { font-size: 15px; }
  .bazaar-hero-ledger { right: 18px; bottom: 18px; left: 18px; }
  .bazaar-hero-ledger span { min-width: 0; flex: 1; padding: 11px; }
  .bazaar-section,
  .marketplace-page .section-shell,
  .market-hero,
  .registry-hero { width: calc(100% - 28px); }
  .bazaar-section { padding: 36px 0; }
  .bazaar-heading,
  .compact-heading,
  .market-hero,
  .portal-stage,
  .portal-rules { grid-template-columns: 1fr; }
  .bazaar-heading,
  .compact-heading { gap: 24px; }
  .market-callout { justify-self: start; }
  .district-grid { grid-template-columns: 1fr; }
  .portal-stage { padding: 36px 24px; }
  .portal-rings { width: min(360px, 90vw); }
  .bazaar-boundary { grid-template-columns: 1fr; gap: 20px; padding: 30px; }
  .bazaar-boundary > a { grid-column: auto; }
  .bazaar-footer { grid-template-columns: 1fr; gap: 24px; width: calc(100% - 28px); text-align: center; }
  .bazaar-footer .bazaar-brand { justify-self: center; }
  .bazaar-footer > p { justify-self: center; }
  .market-hero { min-height: auto; padding: 28px 0; }
  .market-portal-art { width: min(320px, 85vw); justify-self: center; margin-top: 28px; }
  .realm-grid { grid-template-columns: 1fr; }
  .realm-card { min-height: 0; }
  .rules-heading { position: static; }
  .dedicated-deployment { grid-template-columns: 1fr; }
  .deployment-seal { margin: 0 auto; }
  .deployment-actions { grid-column: auto; grid-template-columns: 1fr; }
  .dialog-stall { padding: 58px 28px 34px; }
}

@media (max-width: 580px) {
  .bazaar-brand-mark + span small,
  .bazaar-brand > span:last-child small { display: none; }
  .bazaar-brand-mark + span strong,
  .bazaar-brand > span:last-child strong { font-size: 14px; }
  .bazaar-header { min-height: 74px; }
  .bazaar-hero { min-height: 700px; }
  .bazaar-hero h1,
  .market-hero h1,
  .registry-hero h1 { font-size: clamp(43px, 14vw, 64px); }
  .bazaar-hero-copy { padding: 30px 20px 154px; }
  .bazaar-actions .bazaar-button { width: 100%; }
  .bazaar-hero-ledger strong { font-size: 14px; }
  .bazaar-hero-ledger span { font-size: 14px; }
  .market-marquee div { gap: 26px; }
  .stall-grid,
  .marketplace-page .app-grid { grid-template-columns: 1fr; }
  .stall-card { min-height: 345px; }
  .district-card { min-height: 0; padding: 24px; }
  .portal-stage { padding-inline: 16px; }
  .registry-map { transform: scale(0.82); margin-block: -40px; }
  .registry-node { width: 160px; }
  .rules-list li { grid-template-columns: 38px 1fr; gap: 10px; }
  .dialog-detail-grid { grid-template-columns: 1fr; }
  .dialog-stall { padding-inline: 20px; }
  .dialog-summary { font-size: 15px; }
  .bazaar-footer-links { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .market-marquee div,
  .pulse-orb,
  .portal-rings i:nth-child(3),
  .orbit-b,
  .stall-grid[aria-busy="true"] {
    animation: none;
  }

  .stall-card,
  .district-card,
  .bazaar-button,
  .marketplace-page .app-card {
    transition: none;
  }
}

/* Named celestial destinations are real links over their matching artwork. */
.selected-skies { position: relative; width: 100%; max-width: 540px; margin: auto; }
.selected-skies > img { display: block; width: 100%; height: auto; mask-image: radial-gradient(ellipse, #000 57%, transparent 76%); }
.sky-link { position: absolute; display: flex; align-items: end; justify-content: center; width: 28%; height: 20%; border-radius: 50%; text-align: center; color: #ffe9a6; }
.sky-link span {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 150%;
  transform: translate(-50%, 2px);
  padding: 0;
  border: 0;
  background: none;
  color: #fff0bc;
  font-family: var(--sans);
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0;
  -webkit-text-stroke: 3px #100b24;
  paint-order: stroke fill;
  text-shadow: 0 2px 4px #080514, 0 0 7px #080514;
  pointer-events: none;
}
.sky-link span br { display: initial; }

.sky-public { left: 8%; top: 20%; }
.sky-private { left: 36%; top: 6%; }
.sky-intranet { left: 63%; top: 20%; }
.sky-link:hover, .sky-link:focus-visible { outline: 2px solid #f4d486; outline-offset: 4px; box-shadow: 0 0 22px rgba(160,103,249,.65); }
.realm-card[id] { scroll-margin-top: 24px; }
.realm-card:target { outline: 2px solid var(--bazaar-gold); outline-offset: 5px; }

/* Readable text sizes throughout the public site. */
.bazaar-site { font-size: 16px; }
.bazaar-nav a, .nexus-link, .bazaar-button { font-size: 16px; line-height: 1.4; }
.bazaar-brand > span:last-child small { line-height: 1.4; letter-spacing: .06em; }
.portal-types strong, .registry-node strong, .dialog-detail-grid strong { font-size: 16px; line-height: 1.4; }
.portal-types small, .registry-node small, .bazaar-footer, .realm-card ul { font-size: 14px; line-height: 1.5; }
.stall-card p, .district-card p, .portal-copy > p:not(.bazaar-kicker),
.bazaar-boundary p, .realm-card > p:not(.realm-number), .rules-list p,
.dedicated-deployment > div:nth-child(2) > p:last-child,
.marketplace-page .app-card p { font-size: 16px; line-height: 1.65; color: #d1cadf; }
.portal-types small, .registry-node small, .registry-core span { color: #d1cadf; }
.bazaar-footer-links { flex-wrap: wrap; }
.registry-node { width: 210px; }
.registry-node > span { width: 30px; height: 30px; }
.registry-map { margin-inline: 12px; }
@media (max-width: 580px) {
  .registry-node { width: 170px; padding: 10px; gap: 6px; }
  .registry-map { transform: none; margin-block: 12px 38px; }
  .registry-node > span { display: none; }
  .bazaar-brand > span:last-child strong { font-size: 14px; }
  .nexus-link { font-size: 14px; }
}

/* Let enlarged badges and bullet text grow without squeezing their content. */
.card-badges, .listing-meta, .app-categories { flex-wrap: wrap; gap: 8px; }
.status-badge, .listing-meta span, .app-categories li { font-size: 14px; line-height: 1.45; padding: 5px 9px; }
.marketplace-page .listing-meta span, .marketplace-page .app-categories li {
  color: #e0d5ec;
  border-color: rgba(223,182,105,.3);
  background: rgba(76,39,108,.22);
}
.portal-types li { align-items: center; }
.portal-types li > span { flex: 0 0 auto; }
.realm-card ul li { font-size: 16px; line-height: 1.6; }

/* A single legible, engraved-style wordmark and its subtitle. */
.bazaar-brand > span:last-child {
  display: grid;
  justify-items: start;
  gap: 5px;
}
.bazaar-brand > span:last-child strong {
  color: #ffe7a8;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .045em;
  text-shadow: 0 0 14px rgba(195,135,60,.22);
}
.bazaar-brand > span:last-child small {
  display: block;
  color: #eee0c4;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
}
.bazaar-brand-mark { width: 46px; height: 67px; }
@media (max-width: 580px) {
  .bazaar-brand { gap: 10px; }
  .bazaar-brand > span:last-child strong { font-size: 20px; }
  .bazaar-brand > span:last-child small { display: block; font-size: 14px; }
  .bazaar-header { grid-template-columns: minmax(0, 1fr); }
  .bazaar-header .nexus-link { grid-column: 1; grid-row: auto; justify-self: start; }
  .bazaar-header .bazaar-nav { grid-row: auto; }
}

.bazaar-header .nexus-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffe7a8;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .025em;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(195,135,60,.18);
}
.bazaar-header .nexus-link span { font-size: 16px; line-height: 1; }
.bazaar-header .nexus-link:hover { color: #fff4d5; text-shadow: 0 0 14px rgba(169,108,255,.65); }
/* Keep the wordmark prominent and navigation within the same visual rhythm. */
.bazaar-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 92px;
  padding: 14px 20px;
}
.bazaar-header .bazaar-brand { gap: 12px; }
.bazaar-header .bazaar-brand-mark { width: 40px; height: 58px; }
.bazaar-header .bazaar-brand strong { font-size: 22px; letter-spacing: .035em; }
.bazaar-header .bazaar-brand small { font-size: 14px; font-weight: 400; letter-spacing: .015em; color: #d9cba9; }
.bazaar-header .bazaar-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: auto;
  padding: 0;
  gap: 4px;
  border: 0;
  background: none;
  box-shadow: none;
}
.bazaar-header .bazaar-nav a {
  padding: 10px 12px;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 9px;
}
.bazaar-header .nexus-link {
  grid-column: 3;
  grid-row: 1;
  font-size: 15px;
  font-weight: 400;
  color: #d9cba9;
  letter-spacing: 0;
}
@media (max-width: 959px) {
  .bazaar-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .bazaar-header .nexus-link { grid-column: 2; }
  .bazaar-header .bazaar-nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 580px) {
  .bazaar-header { padding: 12px; }
  .bazaar-header .bazaar-brand strong { font-size: 20px; }
  .bazaar-header .nexus-link { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .bazaar-header .bazaar-nav { width: 100%; justify-content: center; flex-wrap: wrap; overflow: visible; }
  .bazaar-header .bazaar-nav a { padding-inline: 10px; font-size: 16px; }
}
/* Pair the registry introduction with a compact, contained portal orbit. */
.registry-hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
  gap: 32px;
  padding-block: 36px 32px;
}
.registry-hero h1 { font-size: clamp(42px, 4.5vw, 68px); line-height: 1.05; }
.registry-map {
  width: 100%;
  max-width: 480px;
  height: 380px;
  aspect-ratio: auto;
  margin: 0 0 28px;
  justify-self: end;
}
.registry-core { width: 160px; gap: 6px; padding: 16px 0; }
.registry-core img { width: 76px; height: 111px; }
.registry-node { width: 170px; padding: 10px; gap: 8px; }
.registry-node small { font-family: var(--sans); }
@supports (offset-path: ellipse(30% 38% at 50% 50%)) {
  .registry-node { offset-path: ellipse(30% 38% at 50% 50%); }
  .registry-map .orbit-a { inset: 12% 20%; }
}
@media (max-width: 760px) {
  .registry-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .registry-map { width: 100%; max-width: 420px; justify-self: center; }
}
@media (max-width: 420px) {
  .registry-node { width: 144px; }
  .registry-core { width: 140px; }
}
.registry-map .registry-core strong,
.registry-map .registry-core > span { display: none; }
/* Numbered wayfinding echoes the cyan, violet and gold lights of the bazaar. */
.portal-types li, .rules-list li, .district-card, .realm-card, .registry-node { --number-glow: #75dcff; }
.portal-types li:nth-child(3n + 2), .rules-list li:nth-child(3n + 2),
.district-card:nth-child(3n + 2), .realm-private, .registry-private { --number-glow: #c18aff; }
.portal-types li:nth-child(3n), .rules-list li:nth-child(3n),
.district-card:nth-child(3n), .realm-intranet, .registry-intranet { --number-glow: #f1c56b; }
.portal-types li > span, .rules-list li > span, .registry-node > span {
  color: #fff3d2;
  font: 700 16px/1 var(--mono);
  border: 1px solid var(--number-glow);
  background: radial-gradient(circle at 45% 35%, color-mix(in srgb, var(--number-glow) 25%, #211139), #110c25 78%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--number-glow) 35%, transparent), inset 0 0 12px color-mix(in srgb, var(--number-glow) 20%, transparent);
  text-shadow: 0 0 7px var(--number-glow), 0 0 16px var(--number-glow);
}
.rules-list li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.realm-number, .district-card > small {
  color: color-mix(in srgb, var(--number-glow) 45%, white);
  text-shadow: 0 0 8px color-mix(in srgb, var(--number-glow) 65%, transparent), 0 0 20px color-mix(in srgb, var(--number-glow) 35%, transparent);
}
.marketplace-page .app-mark.has-store-logo, .dialog-mark.has-store-logo {
  padding: 4px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.store-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Each store sits in a softly lit violet setting with its own accent color. */
.marketplace-page .app-mark,
.marketplace-page .app-mark.has-store-logo,
.dialog-mark,
.dialog-mark.has-store-logo {
  --store-glow: var(--app-accent, var(--dialog-accent, #a96cff));
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--store-glow) 27%, #281442), #160d2b 85%);
  border: 1px solid color-mix(in srgb, var(--store-glow) 55%, #64478b);
  box-shadow: 0 0 20px color-mix(in srgb, var(--store-glow) 32%, transparent), 0 0 34px rgba(151,83,237,.2), inset 0 0 14px rgba(181,130,255,.18);
}
.marketplace-page .app-mark { width: 64px; height: 64px; flex: 0 0 64px; }
.marketplace-page .app-mark.has-store-logo, .dialog-mark.has-store-logo { padding: 7px; }
/* Compact market wayfinding, with a clear illuminated selection. */
.marketplace-page .catalog-meta { display: grid; gap: 12px; margin: 20px 0 24px; }
.marketplace-page .category-filters { padding: 0; gap: 8px; }
.marketplace-page .filter-chip {
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid rgba(224,188,121,.24);
  border-radius: 12px 4px 12px 4px;
  background: linear-gradient(140deg, rgba(61,36,88,.3), rgba(16,12,33,.7));
  color: #e2d8ef;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .01em;
}
.marketplace-page .filter-chip:hover {
  color: #fff2cf;
  border-color: #bd8ae6;
  background: #302044;
  box-shadow: 0 0 14px rgba(161,98,238,.2);
}
.marketplace-page .filter-chip[aria-pressed="true"] {
  color: #fff1c7;
  border-color: #e4c37c;
  background: linear-gradient(135deg, #62417c, #322044);
  box-shadow: 0 0 18px rgba(176,111,255,.3), inset 0 0 12px rgba(238,196,112,.12);
  text-shadow: 0 0 9px rgba(238,197,115,.3);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.marketplace-page #catalog-status {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(224,188,121,.15);
  color: #cfc3dd;
  font-family: var(--sans);
  font-size: 14px;
  text-align: right;
}
.marketplace-page .market-hero { padding-bottom: 12px; }
.marketplace-page .bazaar-floor { border-top: 0; padding-top: 16px; }
.marketplace-page .catalog-heading { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.marketplace-page #exchange-title { max-width: none; font-size: clamp(24px, 3.8vw, 50px); }
.marketplace-page .catalog-heading > p { max-width: 760px; margin: 0; }
/* Let light spill from the doorway into its surroundings. */
.market-portal-art { position: relative; isolation: isolate; }
.market-portal-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 0 -6% -20%;
  background: radial-gradient(ellipse at 56% 58%, rgba(134,66,228,.22), rgba(102,62,171,.08) 42%, transparent 70%);
  pointer-events: none;
}
.market-portal-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -28%;
  right: 0;
  bottom: 0;
  height: 20%;
  background: radial-gradient(ellipse, rgba(170,108,251,.2), rgba(211,168,92,.05) 38%, transparent 70%);
  pointer-events: none;
}
.market-portal-art img { mask-image: url("./public/bazaar-portal-mask.svg?blend=2"); }
/* Preserve the full banner composition at every window width. */
.bazaar-hero { display: block; min-height: 0; }
.bazaar-hero-art { position: relative; inset: auto; display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.bazaar-hero-scrim { display: none; }
.bazaar-hero::before { content: none; }
.bazaar-hero-copy { width: 100%; padding: 28px clamp(20px, 4vw, 58px) 24px; background: radial-gradient(ellipse at 70% 0, rgba(121,67,204,.18), transparent 70%); }
.bazaar-hero h1 { font-size: clamp(34px, 4vw, 60px); line-height: 1.08; max-width: 1100px; }
.bazaar-hero-copy > p:not(.bazaar-eyebrow) { max-width: 920px; }
.bazaar-hero-ledger { position: relative; inset: auto; margin: 0 clamp(20px, 4vw, 58px) 28px; width: fit-content; max-width: calc(100% - 40px); flex-wrap: wrap; }
.bazaar-hero-ledger span { min-width: 0; flex: 1 1 130px; }
.bazaar-hero #hero-title { font-size: clamp(26px, 3.6vw, 54px); max-width: none; }
/* Home lives in the brand; the remaining destinations share one balanced row. */
.bazaar-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; }
.bazaar-header .bazaar-nav { grid-column: 2; grid-row: 1; justify-self: center; gap: 10px; width: auto; }
.bazaar-header .nexus-link { grid-column: 3; grid-row: 1; }
.bazaar-header .bazaar-nav a { padding-inline: 16px; }
@media (max-width: 740px) {
  .bazaar-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .bazaar-header .nexus-link { grid-column: 2; grid-row: 1; }
  .bazaar-header .bazaar-nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .bazaar-header .nexus-link { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
}
/* Luminous calls to action share the portals' gold and violet light. */
.bazaar-button-primary {
  border: 1px solid #ffe5a2;
  background: linear-gradient(125deg, #fff0b7, #e7c574 60%, #cf9e51);
  box-shadow: 0 0 20px rgba(236,192,105,.28), 0 0 38px rgba(165,92,244,.24), inset 0 1px 7px rgba(255,247,215,.6);
}
.bazaar-button-ghost {
  border-color: rgba(200,151,250,.65);
  background: linear-gradient(135deg, rgba(82,43,116,.62), rgba(24,15,44,.94));
  color: #fff0c9;
  box-shadow: 0 0 18px rgba(168,98,246,.22), inset 0 0 16px rgba(184,118,246,.12);
}
.bazaar-button-primary:hover, .bazaar-button-primary:focus-visible {
  box-shadow: 0 0 26px rgba(247,202,115,.46), 0 0 46px rgba(168,95,250,.35), inset 0 1px 8px rgba(255,249,226,.7);
}
.bazaar-button-ghost:hover, .bazaar-button-ghost:focus-visible {
  border-color: #f1d08b;
  box-shadow: 0 0 26px rgba(185,119,255,.42), inset 0 0 20px rgba(180,109,245,.18);
}
/* Approved option 2: violet with antique gold trim. */
.bazaar-button-primary, .button-primary {
  border: 1px solid #99805b;
  border-radius: 12px 4px 12px 4px;
  background: linear-gradient(135deg, #34204d, #1b112f);
  color: #eadfc7;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  box-shadow: 0 0 23px #9f58ec55, inset 0 0 12px #ac8e5420;
}
.bazaar-button-primary:hover, .bazaar-button-primary:focus-visible,
.button-primary:hover, .button-primary:focus-visible {
  background: linear-gradient(135deg, #34204d, #1b112f);
  color: #eadfc7;
  box-shadow: 0 0 23px #9f58ec55, inset 0 0 12px #ac8e5420;
  filter: brightness(1.2);
}
/* A slow, staggered shimmer keeps the list itself steady. */
.realm-card li::before {
  display: inline-block;
  animation: bazaar-star-twinkle 4.8s ease-in-out infinite;
}
.realm-card li:nth-child(2)::before { animation-delay: -1.6s; }
.realm-card li:nth-child(3)::before { animation-delay: -3.2s; }
@keyframes bazaar-star-twinkle {
  0%, 100% { opacity: .65; transform: scale(.9); text-shadow: 0 0 3px currentColor; }
  50% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 8px currentColor, 0 0 15px #b782ef; }
}
@media (prefers-reduced-motion: reduce) {
  .realm-card li::before { animation: none; text-shadow: 0 0 6px currentColor; }
}
/* Shared twinkle for star and numbered bullet markers throughout the bazaar. */
.bazaar-eyebrow > span,
.portal-types li > span,
.rules-list li > span,
.registry-node > span {
  animation: bazaar-star-twinkle 4.8s ease-in-out infinite;
}
.portal-types li:nth-child(3n + 2) > span,
.rules-list li:nth-child(3n + 2) > span,
.registry-private > span { animation-delay: -1.6s; }
.portal-types li:nth-child(3n) > span,
.rules-list li:nth-child(3n) > span,
.registry-intranet > span { animation-delay: -3.2s; }
.realm-card:nth-child(2) li::before { animation-delay: -.8s; }
.realm-card:nth-child(3) li::before { animation-delay: -2.4s; }
@media (prefers-reduced-motion: reduce) {
  .bazaar-eyebrow > span, .portal-types li > span,
  .rules-list li > span, .registry-node > span {
    animation: none;
    text-shadow: 0 0 6px currentColor;
  }
}
/* Shared star field: scrolls with the document, with no discarded image layers. */
.bazaar-page { background: #080817; position: relative; isolation: isolate; }
.cosmos-layer { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; background: linear-gradient(160deg, #080c20, #100c25 55%, #080b1b); }
.cosmos-sky { display: none; }
.cosmos-layer::before { content: none; }
.cosmos-layer::after { content: ''; position: absolute; inset: -55px -5%; pointer-events: none; background: url('./public/bazaar-stars.svg?stars=2') center / cover no-repeat; animation: stellar-current 12s ease-in-out infinite alternate; }
@keyframes stellar-current { from { transform: translate3d(22px,-30px,0); opacity: .5; } to { transform: translate3d(-22px,32px,0); opacity: 1; } }
.sky-constellation, .sky-glint, .sky-meteor { position: absolute; pointer-events: none; }
.sky-constellation { width: clamp(130px,19vw,250px); color: #aec9ff; opacity: .23; animation: constellation-breathe 19s ease-in-out infinite; }
.sky-constellation path { fill: none; stroke: currentColor; stroke-width: .5; opacity: .45; }
.sky-constellation circle { fill: #d9e6ff; filter: drop-shadow(0 0 3px #9581ff); }
.sky-glint { color: #c7dbff; font-size: 13px; opacity: .4; text-shadow: 0 0 7px #93aaff; animation: sky-glimmer 11s ease-in-out infinite, star-drift 31s ease-in-out infinite alternate; }
.sky-meteor { width: 100px; height: 1px; opacity: 0; background: linear-gradient(90deg,transparent,#8da9f688,#e3edff); box-shadow: 0 0 5px #a6a0ff88; }
@keyframes star-drift { from { translate: 0 -8px; } to { translate: 8px 12px; } }
@keyframes constellation-breathe { 0%,100% { opacity: .14; } 50% { opacity: .38; } }
@keyframes sky-glimmer { 0%,70%,100% { opacity: .2; scale: .8; } 80% { opacity: .8; scale: 1.12; } }
@media (prefers-reduced-motion: reduce) { .cosmos-layer::after, .sky-constellation, .sky-glint { animation: none; } .sky-meteor { display: none; } }
.district-sigil, .realm-icon {
  animation: bazaar-symbol-float 7s ease-in-out infinite;
}
.district-card:nth-child(2n) .district-sigil,
.realm-card:nth-child(2n) .realm-icon { animation-delay: -3.5s; }
@keyframes bazaar-symbol-float {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 4px currentColor); }
  50% { transform: translateY(-5px); filter: drop-shadow(0 0 11px currentColor); }
}
.selected-skies > img, .deployment-seal > img {
  animation: bazaar-art-glimmer 9s ease-in-out infinite alternate;
}
@keyframes bazaar-art-glimmer {
  from { filter: drop-shadow(0 0 7px rgba(159,94,235,.16)); }
  to { filter: drop-shadow(0 0 18px rgba(171,108,251,.36)); }
}
@media (prefers-reduced-motion: reduce) {
  .cosmos-layer, .district-sigil, .realm-icon,
  .selected-skies > img, .deployment-seal > img { animation: none; }
}
/* Compact portal controls with the same luminous finish as the bazaar. */
.marketplace-page .portal-workbench { padding-top: 32px; padding-bottom: 24px; }
.marketplace-page .portal-workbench .section-heading { display: block; margin-bottom: 24px; }
.marketplace-page #sources-title { max-width: none; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.15; margin-bottom: 16px; }
.marketplace-page .portal-workbench .section-heading > p { max-width: 78ch; margin: 0; font-size: 18px; line-height: 1.6; }
.marketplace-page .portal-workbench .section-kicker { margin-bottom: 12px; }
.marketplace-page .source-list-panel { padding: clamp(18px, 2.5vw, 30px); border-color: #9e7be044; background: linear-gradient(125deg, #211632aa, #100e20dd); box-shadow: inset 0 1px 0 #dfbcff0d, 0 0 26px #9566d30d; }
.marketplace-page .source-list-panel .panel-heading { margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.marketplace-page .source-list-panel h3 { font-size: 28px; }
.marketplace-page .source-row { padding: 18px; min-height: 0; border-color: #a28dc42e; background: #0c0b1b88; }
.marketplace-page .source-row-heading { flex-wrap: wrap; }
.marketplace-page .source-row-heading strong { font-family: Palatino, 'Palatino Linotype', Georgia, serif; font-size: 22px; color: #f0e7ff; }
.marketplace-page .source-row .built-in-label { font-size: 13px; letter-spacing: .08em; color: #d1b9f5; border-color: #ad84de55; padding: 3px 8px; }
.marketplace-page .source-endpoint { font-size: 15px; line-height: 1.5; color: #bab4cb; }
.marketplace-page .source-result { font-size: 16px; line-height: 1.5; margin-top: 6px; }
.marketplace-page .source-ready .source-result { color: #afe3df; }
.marketplace-page .source-action, .marketplace-page #reset-sources { padding: 10px 16px; min-height: 44px; border: 1px solid #99805b; border-radius: 10px; background: linear-gradient(135deg, #34204d, #1b112f); color: #eadfc7; font-family: Palatino, 'Palatino Linotype', Georgia, serif; font-size: 17px; text-decoration: none; box-shadow: 0 0 18px #9f58ec30, inset 0 0 12px #ac8e5415; }
.marketplace-page .source-action:hover, .marketplace-page #reset-sources:hover { filter: brightness(1.2); }
.marketplace-page .portal-registry-link { margin-top: 18px; font-size: 16px; }
@media (max-width: 620px) { .marketplace-page .source-row { flex-wrap: wrap; } .marketplace-page .source-actions { width: 100%; justify-content: flex-end; } }

.marketplace-page #app-grid { scroll-margin-top: 24px; }

.marketplace-page #category-filters { scroll-margin-top: 16px; }
/* Readable, closely grouped sections for the project guide. */
.guide-page .bazaar-section { padding: 28px 0; min-height: 0; scroll-margin-top: 20px; }
.guide-page .registry-intro { padding-top: 32px; gap: 20px; }
.guide-page .rules-heading { position: static; margin-bottom: 12px; }
.guide-page .rules-heading h2 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.15; margin: 0; }
.guide-page .bazaar-kicker { margin-bottom: 10px; }
.guide-page .bazaar-section > p { margin: 10px 0; line-height: 1.6; }
.guide-page .deployment-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.guide-page .deployment-actions .bazaar-button { flex: 0 1 auto; }
.guide-page .bazaar-footer { margin-top: 24px; padding-top: 24px; }
/* Give the guide a varied reading rhythm: introduction, paired notes, gate, source. */
.guide-page main { width: min(1320px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; grid-template-areas: 'intro intro' 'project ownership' 'private private' 'source source'; }
.guide-page main > .bazaar-section { width: 100%; margin: 0; }
.guide-page .registry-intro { grid-area: intro; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 18px 36px; padding: 34px 0 16px; }
.guide-page .registry-intro > div { grid-row: span 2; }
.guide-page .registry-intro h1 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.08; }
.guide-page .guide-jumps { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.guide-page .guide-jumps a { font-size: 17px; color: #d7b5ff; text-underline-offset: 6px; }
.guide-page #project { grid-area: project; --guide-accent: #8ccfdf; }
.guide-page #security { grid-area: ownership; --guide-accent: #c09be9; }
.guide-page #project, .guide-page #security { padding: 26px; border: 1px solid color-mix(in srgb, var(--guide-accent) 30%, transparent); border-radius: 20px 6px; background: linear-gradient(125deg, #211a35cf, #0c0c1ce6); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--guide-accent) 25%, transparent); }
.guide-page #project h2, .guide-page #security h2 { color: var(--guide-accent); font-size: clamp(28px, 2.8vw, 38px); }
.guide-page #private-catalogs { grid-area: private; position: relative; padding: 30px 32px 30px 150px; border: 1px solid #b68be650; border-radius: 24px; background: radial-gradient(ellipse at 0 50%, #823bc32c, transparent 55%), linear-gradient(110deg, #18132be6, #0d0c1ceb); }
.guide-page #private-catalogs::before { content: ''; position: absolute; top: 36px; left: 32px; width: 80px; height: 120px; background: url('./public/portal-logo.svg') center / contain no-repeat; filter: drop-shadow(0 0 18px #a365ec55); }
.guide-page #private-catalogs h2 { color: #ead8ff; }
.guide-page #source { grid-area: source; padding: 22px 0 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 30px; align-items: center; }
.guide-page #source .rules-heading { margin: 0; }
.guide-page #source h2 { font-size: 32px; }
.guide-page #source > p { grid-column: 1; font-size: 17px; }
.guide-page #source .deployment-actions { grid-column: 2; grid-row: 1 / 3; margin: 0; }
@media (max-width: 760px) {
 .guide-page main { width: calc(100% - 32px); grid-template-columns: 1fr; grid-template-areas: 'intro' 'project' 'ownership' 'private' 'source'; gap: 16px; }
 .guide-page .registry-intro { grid-template-columns: 1fr; }
 .guide-page #private-catalogs { padding: 24px; }
 .guide-page #private-catalogs::before { display: none; }
 .guide-page #source { display: block; }
 .guide-page #source .deployment-actions { margin-top: 16px; }
}

.guide-page #source .deployment-actions { flex-direction: column; align-items: stretch; max-width: 360px; }
/* Let header content claim its actual width instead of overlapping grid tracks. */
.bazaar-header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.bazaar-header .bazaar-brand { flex: 0 1 auto; min-width: 0; }
.bazaar-header .bazaar-nav { display: flex; flex: 1 0 auto; flex-wrap: wrap; justify-content: center; width: auto; min-width: 0; }
.bazaar-header .nexus-link { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 1250px) {
 .bazaar-header .bazaar-nav { order: 3; flex-basis: 100%; }
}
@media (max-width: 520px) {
 .bazaar-header .bazaar-brand { flex-basis: 100%; justify-content: center; }
 .bazaar-header .bazaar-brand strong { font-size: clamp(17px, 4.7vw, 22px); }
 .bazaar-header .bazaar-brand small { font-size: 12px; }
 .bazaar-header .nexus-link { order: 4; margin: 0 auto; }
 .bazaar-header .bazaar-nav a { padding: 10px; }
}

.registry-hero .registry-skies { width: 100%; max-width: 460px; justify-self: center; margin: 0; }
.registry-hero .registry-skies > img { animation: none; }
.registry-skies .portal-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portal-stars-turn { animation: portal-stars-turn 14s ease-in-out infinite alternate; }
@keyframes portal-stars-turn { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .registry-skies .portal-motion { display: none; } }
.catalog-portal-type { color: #b9eaff; border: 1px solid #86cfea66; border-radius: 20px; padding: 3px 10px; font-size: 14px; box-shadow: 0 0 12px #75c9f222; }
.portal-selection-hint { color: #d5c3ed; font-size: 18px; }
.realm-card .realm-icon + h3 { margin-top: 18px; }

.realm-card h3 { font-family: Palatino, 'Palatino Linotype', Georgia, serif; font-size: 28px; line-height: 1.2; margin: 18px 0 14px; color: #eee0ff; }
/* Keep the homepage's district-to-portal transition compact. */
.district-section { padding-bottom: 16px; }
.district-section + .portal-preview { padding-top: 12px; }
.portal-preview .portal-stage { padding-block: 24px; }
/* Compact registry rhythm, retaining readable copy and complete portal artwork. */
.registry-page .registry-hero { padding-block: 20px 8px; gap: 24px; }
.registry-page .registry-skies { max-width: 370px; }
.registry-page .bazaar-section { padding-block: 24px; }
.registry-page .registry-section { padding-top: 12px; }
.registry-page .compact-heading { margin-bottom: 20px; gap: 24px; }
.registry-page .realm-card { padding: 24px; }
.registry-page .realm-card h3 { margin-block: 14px 10px; }
.registry-page .realm-card > p { margin-block: 0 10px; }
.registry-page .realm-card ul { margin-block: 10px 18px; gap: 6px; }
.registry-page .portal-rules { gap: 26px; }
.registry-page .rules-list li { padding-block: 16px; gap: 16px; }
.registry-page .dedicated-deployment { margin-top: 12px; margin-bottom: 24px; padding: 24px; gap: 24px; }
.registry-page .bazaar-footer { margin-top: 24px; }
@media (max-width: 760px) {
 .registry-page .registry-hero { gap: 12px; }
 .registry-page .registry-skies { max-width: 330px; }
 .registry-page .realm-card { padding: 22px; }
}
.sky-link span small { display: block; font-size: 12px; line-height: 1.25; margin-top: 3px; }
.portal-availability { color: #dbc5f3; font-size: 16px; line-height: 1.5; }
.guide-page main { grid-template-areas: 'intro intro' 'project ownership' 'private private' 'intranet intranet' 'source source'; }
.guide-page .intranet-guide { grid-area: intranet; border-top: 1px solid #b68be633; }
@media (max-width: 760px) { .guide-page main { grid-template-areas: 'intro' 'project' 'ownership' 'private' 'intranet' 'source'; } }
/* Consistent, compact three-link navigation across the site. */
.bazaar-header { min-height: 76px; padding: 10px 18px; gap: 10px 16px; border-radius: 20px; }
.bazaar-header .bazaar-brand { flex: 0 1 auto; gap: 10px; }
.bazaar-header .bazaar-brand-mark { width: 34px; height: 50px; }
.bazaar-header .bazaar-brand strong { font-size: 20px; }
.bazaar-header .bazaar-brand small { font-size: 12px; }
.bazaar-header .bazaar-nav { order: 0; flex: 1 0 auto; flex-basis: auto; gap: 3px; }
.bazaar-header .bazaar-nav a { font-size: 16px; padding: 9px 10px; }
.bazaar-header .nexus-link { font-size: 14px; }
@media (max-width: 900px) {
 .bazaar-header .bazaar-nav { order: 3; flex-basis: 100%; }
}
@media (max-width: 520px) {
 .bazaar-header .bazaar-brand { flex-basis: 100%; }
 .bazaar-header .bazaar-nav { gap: 2px; }
 .bazaar-header .bazaar-nav a { padding: 8px; }
 .bazaar-header .nexus-link { order: 4; }
}
/* Parent-site link follows the compact TWiN Home pattern used by sibling sites. */
.bazaar-header .nexus-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid #99805b88; border-radius: 8px; background: #21152f77; color: #eadfc7; font-family: 'Palatino Linotype', Georgia, serif; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.bazaar-header .nexus-link:hover { background: #34204d; border-color: #c6a56e; box-shadow: 0 0 14px #a96cff30; }
/* Separate deployment guidance from developer resources with defined surfaces. */
.guide-page #intranet-catalogs { padding: 28px; border: 1px solid #83cadb55; border-left: 3px solid #83cadb99; border-radius: 18px; background: linear-gradient(125deg, #152232f5, #111322fa); box-shadow: 0 0 22px #6dbbdb0d; }
.guide-page #intranet-catalogs .bazaar-kicker { color: #b4e5ec; }
.guide-page #intranet-catalogs > p { max-width: 82ch; }
.guide-page #intranet-catalogs .portal-availability { display: inline-block; padding: 5px 12px; border: 1px solid #89bfcd40; border-radius: 8px; background: #9bcee10c; font-size: 16px; color: #cce7ee; }
.guide-page #source { padding: 26px 28px; margin-top: 4px; border: 1px solid #b297694d; border-radius: 18px; background: #131020f5; grid-template-columns: minmax(0, 1fr) minmax(230px, 340px); gap: 12px 28px; }
.guide-page #source > p { max-width: 66ch; color: #c8c0d7; line-height: 1.65; }
.guide-page #source .deployment-actions { width: 100%; min-width: 0; padding-left: 22px; border-left: 1px solid #b2976933; }
.guide-page #source .bazaar-button { white-space: normal; text-align: center; font-size: 17px; line-height: 1.4; padding: 12px 16px; min-width: 0; }
@media (max-width: 760px) {
 .guide-page #intranet-catalogs, .guide-page #source { padding: 22px; }
 .guide-page #source { display: block; }
 .guide-page #source .deployment-actions { max-width: none; padding: 16px 0 0; border-left: 0; border-top: 1px solid #b2976933; }
}
/* Open guide composition echoes the registry's headings and luminous wayfinding. */
.guide-page #project, .guide-page #security { padding: 22px 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--guide-accent) 35%, transparent); border-radius: 0; background: none; box-shadow: none; }
.guide-page main { column-gap: 40px; row-gap: 24px; }
.guide-page #project .bazaar-kicker, .guide-page #security .bazaar-kicker { color: var(--guide-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--guide-accent) 35%, transparent); }
.guide-page #private-catalogs { border: 0; border-radius: 0; background: radial-gradient(ellipse at 3% 45%, #823bc324, transparent 62%); padding-top: 24px; padding-bottom: 24px; }
.guide-page #intranet-catalogs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px 36px; padding: 26px 0; border: 0; border-top: 1px solid #83cadb33; border-radius: 0; background: none; box-shadow: none; }
.guide-page #intranet-catalogs .rules-heading { grid-column: 1; grid-row: 1 / 5; }
.guide-page #intranet-catalogs > p { grid-column: 2; margin: 0; }
.guide-page #intranet-catalogs .portal-availability { padding: 0; border: 0; border-radius: 0; background: none; color: #b4e5ec; margin-bottom: 6px; }
.guide-page #intranet-catalogs h2 { color: #d5edf2; }
.guide-page #source { padding: 24px 0; border: 0; border-top: 1px solid #b297694d; border-radius: 0; background: none; }
.guide-page #source .deployment-actions { border-left: 0; padding-left: 0; }
@media (max-width: 760px) {
 .guide-page main { gap: 18px; }
 .guide-page #intranet-catalogs { display: block; }
 .guide-page #intranet-catalogs > p { margin-top: 12px; }
 .guide-page #private-catalogs { padding-inline: 0; }
}
.guide-page .registry-intro { display: block; padding: 22px 0 4px; }
.guide-page .registry-intro #guide-title { font-family: Palatino, 'Palatino Linotype', Georgia, serif; font-size: clamp(32px, 3.2vw, 44px); font-weight: 400; margin: 0 0 10px; }
.guide-page .registry-intro > p { max-width: 70ch; margin: 0; }
.guide-technical { margin-top: 16px; }
.guide-technical summary { cursor: pointer; color: #c7afe8; font-size: 17px; padding: 8px 0; }
.guide-technical p { font-size: 17px; line-height: 1.6; color: #c8c0d7; }
/* The guide shares the registry's cyan, violet and gold portal accents. */
.guide-page #guide-title { color: #f1e5ff; text-shadow: 0 0 24px #b277ed30; }
.guide-page #project { --guide-accent: #8bdce9; }
.guide-page #security { --guide-accent: #cd9af3; }
.guide-page #project h2 { color: #9ce5ed; text-shadow: 0 0 20px #75dcff25; }
.guide-page #security h2 { color: #d4a8f5; text-shadow: 0 0 20px #bf81ef30; }
.guide-page #private-catalogs { background: radial-gradient(ellipse at 5% 45%, #9345dc30, transparent 65%); }
.guide-page #private-catalogs .bazaar-kicker, .guide-page #private-catalogs .portal-availability { color: #d6afff; }
.guide-page #private-catalogs h2 { color: #d6afff; text-shadow: 0 0 22px #b26ceb30; }
.guide-page #intranet-catalogs { border-top-color: #d4ae6655; background: radial-gradient(ellipse at 0 35%, #cf9b4312, transparent 60%); }
.guide-page #intranet-catalogs .bazaar-kicker, .guide-page #intranet-catalogs .portal-availability { color: #e5c580; }
.guide-page #intranet-catalogs h2 { color: #f0d99c; text-shadow: 0 0 20px #e6b75822; }
.guide-page #source .bazaar-kicker { color: #a7dce9; }
.guide-page #source h2 { color: #c4bbf2; text-shadow: 0 0 20px #aa8bef25; }
.guide-page #project .bazaar-kicker::before, .guide-page #security .bazaar-kicker::before { content: '✦'; display: inline-block; margin-right: 10px; color: var(--guide-accent); text-shadow: 0 0 10px var(--guide-accent); animation: sky-glimmer 11s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .guide-page #project .bazaar-kicker::before, .guide-page #security .bazaar-kicker::before { animation: none; } }
/* Ownership has its own coral accent, distinct from the private portal's violet. */
.guide-page #security { --guide-accent: #f3a58e; }
.guide-page #security h2 { color: #f3a58e; text-shadow: 0 0 20px #f3987825; }