:root {
  --background: #09070f;
  --surface: #131019;
  --surface-panel: #19141f;
  --surface-raised: #211a29;
  --foreground: #f7f2fa;
  --muted-foreground: #a79cac;
  --border: #342b3e;
  --border-soft: #251e2d;
  --primary: #e33187;
  --primary-2: #8c4cff;
  --amber: #f6aa1c;
  --success: #66d7a6;
  --cyan: #65d7f4;
  --destructive: #ff6f7c;
  --ring: rgba(227, 49, 135, 0.42);
  --gradient-action: linear-gradient(
    120deg,
    #7a36ed 0%,
    #d52a85 55%,
    #f29d28 100%
  );
  --gradient-page: radial-gradient(
    circle at 68% -20%,
    #3f1c50 0,
    transparent 38%
  );
  --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.28);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: var(--background);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--foreground);
  background: var(--gradient-page), var(--background);
  font:
    15px/1.5 Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

code,
pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

code {
  color: #e8c9ff;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h3 {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted-foreground);
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.08;
  pointer-events: none;
}

.ambient-one {
  top: 24%;
  left: -260px;
  background: var(--primary);
}

.ambient-two {
  right: -180px;
  bottom: -250px;
  background: var(--primary-2);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(9, 7, 15, 0.9);
  backdrop-filter: blur(20px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gradient-action);
  color: white;
  letter-spacing: 0;
  box-shadow: 0 0 26px rgba(227, 49, 135, 0.25);
}

.brand-product {
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  color: #746a7c;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.environment {
  color: #8d8294;
  font:
    700 10px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
  text-align: center;
}

.pulse,
.connected-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 14px var(--success);
}

#header-actions {
  display: flex;
  justify-content: flex-end;
}

.identity-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 650;
}

.identity-chip .connected-dot {
  margin-right: 0;
}

.shell {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto 100px;
}

.hero {
  padding: 74px 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: 56px;
}

.eyebrow {
  margin: 0 0 12px;
  color: #e879c0;
  font:
    800 10px/1.2 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.16em;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

h1 span {
  color: #a99faf;
}

.hero-copy {
  margin: 0 0 6px;
  max-width: 500px;
  color: var(--muted-foreground);
  font-size: 17px;
}

.tabs {
  position: sticky;
  top: 68px;
  z-index: 15;
  margin: 0 -10px 20px;
  padding: 10px;
  display: flex;
  gap: 6px;
  background: rgba(9, 7, 15, 0.88);
  backdrop-filter: blur(20px);
}

.tab {
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  transition: 160ms ease;
}

.tab:hover {
  color: var(--foreground);
}

.tab.active {
  border-color: var(--border);
  background: var(--surface-panel);
  color: var(--foreground);
}

.tab-count {
  min-width: 22px;
  height: 22px;
  margin-left: 7px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 99px;
  background: var(--surface-raised);
  font-size: 10px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.panel,
.flow-card,
.activity-card,
.auth-gate,
.context-strip {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(
    145deg,
    rgba(27, 21, 34, 0.96),
    rgba(15, 12, 20, 0.98)
  );
  box-shadow: var(--shadow-panel);
}

.context-strip {
  margin-bottom: 18px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 15px;
  box-shadow: none;
}

.context-strip p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 12px;
}

.context-badge,
.observer {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(101, 215, 244, 0.22);
  border-radius: 7px;
  background: rgba(101, 215, 244, 0.08);
  color: var(--cyan);
  font:
    750 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
}

.auth-gate {
  min-height: 360px;
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: center;
  gap: clamp(36px, 8vw, 100px);
  overflow: hidden;
  position: relative;
}

.auth-gate::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: var(--gradient-action);
  filter: blur(90px);
  opacity: 0.12;
  pointer-events: none;
}

.auth-copy,
.auth-action {
  position: relative;
  z-index: 1;
}

.auth-copy > p:not(.eyebrow) {
  max-width: 650px;
  color: var(--muted-foreground);
  font-size: 16px;
}

.auth-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--gradient-action);
  font-size: 20px;
  font-weight: 850;
}

.privacy-row {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.privacy-row span {
  padding: 6px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: #cfc5d4;
  font-size: 10px;
}

.auth-action {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(7, 5, 10, 0.5);
}

soundiva-connect {
  width: 100%;
}

soundiva-connect::part(button) {
  border-color: rgba(255, 255, 255, 0.18);
  background: #221a2b;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.widget-caption {
  margin: 12px 0 0;
  color: #7e7385;
  font-size: 10px;
  text-align: center;
}

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

.main-column,
.side-column,
.docs-content {
  display: grid;
  align-content: start;
  gap: 18px;
}

.flow-card,
.activity-card,
.panel {
  padding: 22px;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

.flow-steps::before {
  content: "";
  height: 1px;
  position: absolute;
  top: 17px;
  left: 9%;
  right: 9%;
  background: var(--border);
}

.flow-step {
  position: relative;
  color: #706678;
  font-size: 10px;
  font-weight: 750;
  text-align: center;
}

.flow-dot {
  width: 35px;
  height: 35px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: #756b7d;
  font-size: 11px;
}

.flow-step.done,
.flow-step.active {
  color: var(--foreground);
}

.flow-step.done .flow-dot {
  border-color: transparent;
  background: var(--gradient-action);
  color: white;
}

.flow-step.active .flow-dot {
  border-color: var(--primary);
  color: #ff9fd2;
  box-shadow: 0 0 0 5px rgba(227, 49, 135, 0.08);
}

.activity-head,
.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.activity-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}

.game-catalog {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.game-option {
  min-width: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.game-option span,
.access-decision span {
  color: var(--cyan);
  font:
    750 9px/1.2 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.1em;
}

.game-option h3 {
  margin: 8px 0 6px;
}

.game-option p,
.access-decision p {
  margin: 0;
  color: #928797;
  font-size: 12px;
  line-height: 1.55;
}

.access-decision {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 111, 124, 0.28);
  border-radius: 14px;
  background: rgba(255, 111, 124, 0.07);
}

.access-decision > div {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.access-decision strong {
  color: #ffadb5;
  font-size: 11px;
}

.access-decision pre {
  margin: 12px 0 0;
  padding: 12px;
  overflow: auto;
  border-radius: 10px;
  background: #09070d;
  color: #e8dfe9;
  font-size: 11px;
}

.access-decision.uncertain {
  border-color: rgba(255, 187, 92, 0.3);
  background: rgba(255, 187, 92, 0.07);
}

.partner-game-frame {
  width: 100%;
  min-height: 540px;
  margin-top: 20px;
  display: block;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: #0c0911;
}

.status-pill {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: #afa4b5;
  font:
    750 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-pill.open {
  border-color: rgba(101, 215, 244, 0.25);
  color: var(--cyan);
}

.status-pill.completed,
.status-pill.cancelled {
  border-color: rgba(102, 215, 166, 0.25);
  color: var(--success);
}

.setup {
  padding: 24px 0 4px;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr auto;
  align-items: end;
  gap: 12px;
}

.field {
  display: grid;
  gap: 8px;
  color: #b9afbf;
  font-size: 11px;
  font-weight: 700;
}

.field input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: #0c0910;
  color: var(--foreground);
}

.field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.form-note,
.panel-note {
  margin: 12px 0 0;
  color: #817687;
  font-size: 10px;
}

.primary,
.secondary,
.danger,
.ghost {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: 150ms ease;
}

.primary {
  background: var(--gradient-action);
  background-origin: border-box;
  background-repeat: no-repeat;
  color: white;
  box-shadow: 0 10px 28px rgba(174, 36, 129, 0.22);
}

.secondary {
  border-color: rgba(140, 76, 255, 0.35);
  background: rgba(140, 76, 255, 0.12);
  color: #c8aaff;
}

.danger {
  border-color: rgba(255, 111, 124, 0.28);
  background: rgba(255, 111, 124, 0.08);
  color: #ffadb5;
}

.ghost {
  border-color: var(--border);
  background: transparent;
  color: #a99fac;
}

.compact {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 10px;
}

.primary:hover,
.secondary:hover,
.danger:hover,
.ghost:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

button:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

.play-area {
  padding: 26px 0 8px;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 32px;
}

.score-orb {
  width: 170px;
  height: 170px;
  padding: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-action);
  box-shadow: 0 0 70px rgba(142, 55, 186, 0.16);
}

.score-orb > div {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 4px;
  border-radius: 50%;
  background: #120e17;
  text-align: center;
}

.score-orb span {
  color: #8d8294;
  font-size: 9px;
}

.score-orb strong {
  font-size: 34px;
  letter-spacing: -0.05em;
}

.moves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.move {
  min-height: 78px;
  padding: 11px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: #9d929f;
  cursor: pointer;
  font-size: 10px;
}

.move strong {
  color: var(--foreground);
  font-size: 18px;
}

.move.consume:hover {
  border-color: rgba(255, 111, 124, 0.55);
}

.move.award:hover {
  border-color: rgba(102, 215, 166, 0.55);
}

.move.no-change:hover {
  border-color: rgba(101, 215, 244, 0.55);
}

.terminal-actions {
  margin-top: 16px;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  border-top: 1px solid var(--border-soft);
}

.terminal-actions .ghost {
  margin-left: auto;
}

.panel-title h3 {
  margin-bottom: 0;
}

.exchange-preview {
  box-shadow: none;
}

.preview-sequence {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.preview-sequence > div {
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.16);
}

.preview-sequence code {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-sequence small {
  grid-column: 1 / -1;
  color: #857a8b;
  font-size: 9px;
}

.preview-sequence i {
  color: #6f6575;
  font:
    700 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
  font-style: normal;
  text-transform: uppercase;
}

.local-notice {
  margin: 16px 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(101, 215, 244, 0.15);
  border-radius: 11px;
  background: rgba(101, 215, 244, 0.05);
  font-size: 11px;
}

.local-notice span {
  color: var(--muted-foreground);
}

.live-preview {
  padding: 0 !important;
  border: 0 !important;
}

.expectation {
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(102, 215, 166, 0.04);
}

.expectation span {
  color: var(--success);
  font:
    750 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.expectation p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 11px;
}

.terminal-summary {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.terminal-summary div,
.metric {
  padding: 12px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.terminal-summary span,
.metric span {
  color: #84798a;
  font-size: 9px;
}

.terminal-summary strong,
.metric strong {
  font-size: 14px;
}

.balance-main {
  padding: 26px 0 20px;
  display: grid;
  text-align: center;
}

.balance-main strong {
  font-size: 43px;
  line-height: 1;
  letter-spacing: -0.055em;
}

.balance-main span {
  margin-top: 7px;
  color: #887d8e;
  font-size: 10px;
}

.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.event-list {
  margin-top: 14px;
  display: grid;
  gap: 1px;
}

.event {
  padding: 10px 0;
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--border-soft);
}

.event:last-child {
  border-bottom: 0;
}

.event strong {
  color: #d2c8d6;
  font:
    650 10px/1.4 "SFMono-Regular",
    Consolas,
    monospace;
}

.event span {
  overflow: hidden;
  color: #786e7e;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transcript-panel {
  margin-top: 18px;
}

.trace-note {
  font-size: 9px;
}

.transcript-list {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.exchange {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(5, 4, 7, 0.25);
}

.exchange summary {
  min-height: 48px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 28px 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.exchange summary::-webkit-details-marker {
  display: none;
}

.sequence {
  color: #605766;
  font:
    700 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.method {
  color: #f093c9;
  font:
    800 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.path {
  overflow: hidden;
  color: #d4cbd8;
  font:
    600 10px/1 "SFMono-Regular",
    Consolas,
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.http-status,
.replay {
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(102, 215, 166, 0.08);
  color: var(--success);
  font:
    750 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.http-status.error {
  background: rgba(255, 111, 124, 0.08);
  color: var(--destructive);
}

.replay {
  background: rgba(246, 170, 28, 0.08);
  color: var(--amber);
}

.exchange-meta {
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border-soft);
  color: #6f6575;
  font:
    600 8px/1.3 "SFMono-Regular",
    Consolas,
    monospace;
}

.exchange-body,
.endpoint-body,
.two-code {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid var(--border-soft);
}

.code-block {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: #0b0810;
}

.code-block label {
  padding: 8px 10px;
  display: block;
  border-bottom: 1px solid var(--border-soft);
  color: #84798a;
  font:
    750 8px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
}

pre {
  margin: 0;
  padding: 12px;
  overflow: auto;
  color: #cabfd0;
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.empty {
  padding: 36px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  color: #8c8192;
  text-align: center;
}

/* Documentation */
.docs-intro {
  margin-bottom: 18px;
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
}

.docs-intro .muted {
  max-width: 760px;
  margin-bottom: 0;
}

.doc-chips {
  max-width: 360px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.doc-chips span {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #b2a7b8;
  font-size: 9px;
  font-weight: 700;
}

.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.docs-nav {
  position: sticky;
  top: 138px;
  display: grid;
  gap: 3px;
  box-shadow: none;
}

.docs-nav a {
  padding: 8px 10px;
  border-radius: 8px;
  color: #9f94a5;
  font-size: 11px;
  text-decoration: none;
}

.docs-nav a:hover {
  background: rgba(255, 255, 255, 0.035);
  color: var(--foreground);
}

.doc-section {
  padding: clamp(24px, 4vw, 42px);
  box-shadow: none;
}

.doc-section > p:not(.eyebrow) {
  max-width: 800px;
  color: var(--muted-foreground);
}

.try-api {
  border-color: rgba(101, 215, 244, 0.24);
  background:
    linear-gradient(140deg, rgba(101, 215, 244, 0.045), transparent 44%),
    var(--surface-panel);
}

.api-origin-card {
  margin: 22px 0 6px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(101, 215, 244, 0.28);
  border-radius: 12px;
  background: rgba(101, 215, 244, 0.045);
}

.api-origin-card > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.api-origin-card span,
.api-origin-card small {
  color: #7f9ca5;
  font:
    750 8px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
}

.api-origin-card code {
  overflow-wrap: anywhere;
  color: var(--cyan);
  font-size: clamp(12px, 2vw, 17px);
}

.api-origin-card small {
  flex: none;
  color: #718188;
  letter-spacing: 0;
}

.try-it-card {
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid rgba(102, 215, 166, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(102, 215, 166, 0.045), transparent 52%),
    rgba(8, 12, 13, 0.52);
}

.try-it-copy {
  padding: 22px;
  border-bottom: 1px solid var(--border-soft);
}

.try-it-heading,
.try-it-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.try-it-heading h3 {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 25px);
}

.try-it-copy > p {
  max-width: 820px;
  margin: 14px 0 0;
  color: #aaa0af;
  font-size: 12px;
}

.try-it-badge {
  flex: none;
  padding: 7px 9px;
  border: 1px solid rgba(102, 215, 166, 0.25);
  border-radius: 7px;
  background: rgba(102, 215, 166, 0.07);
  color: var(--success);
  font:
    800 8px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.08em;
}

.try-it-requirements {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.try-it-requirements > div {
  min-width: 0;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}

.try-it-requirements strong {
  color: #e3dce6;
  font-size: 10px;
}

.try-it-requirements span {
  color: #8f8495;
  font-size: 9px;
}

.try-it-form {
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.try-it-form .field small {
  color: #746a7b;
  font-size: 9px;
  font-weight: 500;
}

.try-it-form[aria-busy="true"] input {
  opacity: 0.65;
}

.try-it-actions {
  grid-column: 1 / -1;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.try-it-actions span {
  color: #817687;
  font-size: 10px;
}

.try-it-actions span[data-status="running"] {
  color: var(--cyan);
}

.try-it-actions span[data-status="success"] {
  color: var(--success);
}

.try-it-actions span[data-status="error"] {
  color: var(--destructive);
}

.try-it-result {
  margin: 0 22px 22px;
  padding: 17px;
  border: 1px solid rgba(102, 215, 166, 0.2);
  border-radius: 12px;
  background: rgba(102, 215, 166, 0.035);
}

.try-it-result-head > div {
  display: grid;
  gap: 4px;
}

.try-it-result-head span,
.try-it-session dt {
  color: #7f8f88;
  font:
    750 8px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.07em;
}

.try-it-result-head > span {
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(102, 215, 166, 0.08);
  color: var(--success);
}

.try-it-steps {
  margin: 15px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
}

.try-it-steps li {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.12);
}

.try-it-steps li > span:first-child {
  color: var(--success);
  font-weight: 900;
}

.try-it-steps li > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.try-it-steps strong {
  color: #d8d0dc;
  font-size: 10px;
}

.try-it-steps code {
  overflow: hidden;
  color: #7f7485;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.try-it-step-status {
  color: var(--cyan);
  font:
    750 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.try-it-session {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.try-it-session > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
}

.try-it-session dt,
.try-it-session dd {
  margin: 0;
}

.try-it-session dd {
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: #d6ceda;
  font-size: 11px;
  font-weight: 750;
}

.try-it-security-note {
  margin: 0;
  padding: 0 22px 22px;
  color: #776d7d;
  font-size: 9px;
}

.callout.critical {
  border-color: rgba(255, 111, 124, 0.24);
  border-left-color: var(--destructive);
  background: rgba(255, 111, 124, 0.045);
}

.terminal-quickstart {
  margin-top: 14px;
}

.terminal-quickstart pre {
  max-height: 580px;
  white-space: pre;
}

.terminal-alternative {
  margin-top: 20px;
}

.actor-flow {
  margin: 26px 0;
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: center;
  gap: 8px;
}

.actor {
  min-width: 0;
  min-height: 116px;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.actor span {
  color: #7f7485;
  font:
    700 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.actor strong {
  margin-top: 14px;
  font-size: 12px;
}

.actor small {
  color: #897e8f;
  font-size: 9px;
}

.actor-flow i {
  color: #6f6476;
  font-style: normal;
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.rule-grid > div {
  padding: 15px;
  border-left: 2px solid var(--primary-2);
  border-radius: 0 10px 10px 0;
  background: rgba(140, 76, 255, 0.045);
}

.rule-grid p {
  margin: 5px 0 0;
  color: #94899a;
  font-size: 10px;
}

.two-code {
  margin: 22px 0 12px;
  padding: 0;
  border: 0;
}

.callout {
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 11px;
  background: rgba(246, 170, 28, 0.035);
}

.callout.secure {
  border-left-color: var(--success);
  background: rgba(102, 215, 166, 0.035);
}

.callout.compatibility {
  border-left-color: var(--cyan);
  background: rgba(101, 215, 244, 0.035);
}

.callout p {
  margin: 4px 0 0;
  color: #a095a6;
  font-size: 11px;
}

.endpoint {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(4, 3, 6, 0.2);
}

.endpoint summary {
  min-height: 54px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 45px minmax(0, auto) 1fr;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.endpoint summary::-webkit-details-marker {
  display: none;
}

.endpoint summary code {
  overflow-wrap: anywhere;
  font-size: 10px;
}

.endpoint summary > span:last-child {
  color: #807586;
  font-size: 10px;
  text-align: right;
}

.endpoint-body > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 11px;
}

.single-response {
  grid-template-columns: 1fr;
}

.field-table {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
}

.field-row {
  min-height: 43px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 1fr 2.2fr 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft);
  color: #a59aa9;
  font-size: 10px;
}

.field-row:last-child {
  border-bottom: 0;
}

.field-head {
  background: rgba(255, 255, 255, 0.03);
  color: #817687;
  font:
    750 8px/1 "SFMono-Regular",
    Consolas,
    monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.local-flow {
  margin: 22px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto 1.15fr;
  align-items: center;
  gap: 8px;
}

.local-flow div {
  min-height: 70px;
  padding: 11px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.local-flow span {
  color: #a196a7;
  font-size: 9px;
}

.local-flow strong {
  color: #766b7c;
  font:
    700 8px/1 "SFMono-Regular",
    Consolas,
    monospace;
  text-transform: uppercase;
}

.local-flow i {
  color: #776c7d;
  font-style: normal;
}

.local-flow .aggregate {
  border-color: rgba(227, 49, 135, 0.3);
  background: rgba(227, 49, 135, 0.06);
}

.local-flow .aggregate strong {
  color: #ee80bc;
}

.outcome-grid {
  margin: 22px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.outcome-grid article {
  min-width: 0;
  padding: 15px;
  display: grid;
  align-content: start;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}

.outcome-grid pre {
  margin-top: 10px;
  padding: 0;
  font-size: 9px;
}

.outcome-grid small {
  color: #887d8e;
  font-size: 9px;
}

.outcome {
  width: max-content;
  padding: 5px 7px;
  border-radius: 6px;
  font:
    750 8px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.outcome.consumption {
  background: rgba(255, 111, 124, 0.08);
  color: var(--destructive);
}

.outcome.award {
  background: rgba(102, 215, 166, 0.08);
  color: var(--success);
}

.outcome.unchanged {
  background: rgba(101, 215, 244, 0.08);
  color: var(--cyan);
}

.rule-list {
  margin-top: 20px;
  display: grid;
  gap: 1px;
}

.rule-list > div {
  padding: 13px 0;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.rule-list > div:last-child {
  border-bottom: 0;
}

.rule-list span {
  color: #756a7b;
  font:
    700 9px/1.5 "SFMono-Regular",
    Consolas,
    monospace;
}

.rule-list p {
  margin: 0;
  color: #a095a6;
  font-size: 11px;
}

.rule-list strong {
  color: #ded6e2;
}

.status-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.status-grid span {
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  color: #8f8495;
  font-size: 9px;
}

.status-grid strong {
  margin-right: 5px;
  color: #dfd6e3;
}

.checklist {
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
}

.checklist li {
  padding: 12px 12px 12px 38px;
  position: relative;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: #a79cae;
  font-size: 10px;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  top: 11px;
  left: 13px;
  color: var(--success);
  font-weight: 900;
}

/* Acceptance */
.acceptance-head {
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.acceptance-head .muted {
  max-width: 780px;
  margin-bottom: 0;
}

.acceptance-results {
  margin-top: 18px;
}

.test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.test-case {
  min-height: 76px;
  padding: 14px;
  display: grid;
  grid-template-columns: 45px 24px 1fr;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.test-case.pass {
  border-color: rgba(102, 215, 166, 0.2);
}

.test-case.fail {
  border-color: rgba(255, 111, 124, 0.28);
}

.test-id {
  color: #84798a;
  font:
    700 9px/1 "SFMono-Regular",
    Consolas,
    monospace;
}

.test-mark {
  color: var(--success);
  font-size: 17px;
}

.test-case.fail .test-mark {
  color: var(--destructive);
}

.test-case strong,
.test-case small {
  display: block;
}

.test-case strong {
  font-size: 11px;
}

.test-case small {
  margin-top: 3px;
  color: #827788;
  font-size: 9px;
}

.acceptance-evidence {
  margin-top: 18px;
  box-shadow: none;
}

.acceptance-evidence > summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.acceptance-evidence > summary::-webkit-details-marker {
  display: none;
}

.acceptance-evidence > summary span {
  color: #857a8b;
  font-size: 10px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  max-width: min(420px, calc(100vw - 48px));
  padding: 13px 16px;
  border: 1px solid rgba(255, 111, 124, 0.25);
  border-radius: 11px;
  background: #27151d;
  box-shadow: var(--shadow-panel);
  color: #ffd4d9;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1050px) {
  .journey-grid {
    grid-template-columns: 1fr;
  }

  .side-column {
    grid-template-columns: 1fr 1fr;
  }

  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
  }

  .docs-nav .eyebrow {
    width: 100%;
  }

  .actor-flow {
    grid-template-columns: 1fr;
  }

  .actor-flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .actor {
    min-height: auto;
  }

  .actor strong {
    margin-top: 4px;
  }
}

@media (max-width: 760px) {
  .topbar {
    min-height: 62px;
    grid-template-columns: 1fr auto;
  }

  .environment,
  .brand-product,
  .identity-chip > span:not(.connected-dot) {
    display: none;
  }

  .tabs {
    top: 62px;
    overflow-x: auto;
  }

  .tab {
    white-space: nowrap;
  }

  .shell {
    width: min(100% - 24px, 1280px);
  }

  .hero {
    padding: 48px 0 32px;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-copy {
    font-size: 14px;
  }

  .context-strip,
  .auth-gate,
  .docs-intro,
  .acceptance-head {
    grid-template-columns: 1fr;
  }

  .context-strip,
  .acceptance-head {
    align-items: flex-start;
  }

  .auth-gate {
    padding: 28px 20px;
    gap: 28px;
  }

  .flow-card {
    overflow-x: auto;
  }

  .flow-steps {
    min-width: 560px;
  }

  .setup,
  .play-area,
  .moves,
  .side-column,
  .exchange-body,
  .endpoint-body,
  .two-code,
  .rule-grid,
  .try-it-requirements,
  .try-it-form,
  .try-it-session,
  .outcome-grid,
  .status-grid,
  .checklist,
  .test-grid,
  .game-catalog {
    grid-template-columns: 1fr;
  }

  .play-area {
    justify-items: center;
  }

  .play-area > div:last-child {
    width: 100%;
  }

  .moves {
    grid-template-columns: repeat(3, 1fr);
  }

  .terminal-actions .ghost {
    margin-left: 0;
  }

  .preview-sequence,
  .local-flow {
    grid-template-columns: 1fr;
  }

  .preview-sequence i,
  .local-flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .local-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .docs-intro {
    align-items: start;
  }

  .doc-chips {
    justify-content: flex-start;
  }

  .try-it-heading,
  .try-it-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .try-it-actions button {
    width: 100%;
  }

  .field-row {
    grid-template-columns: 0.8fr 1.5fr;
  }

  .field-row > span:last-child {
    display: none;
  }

  .endpoint summary {
    grid-template-columns: 42px 1fr;
  }

  .endpoint summary > span:last-child {
    display: none;
  }

  .exchange summary {
    grid-template-columns: 24px 42px minmax(0, 1fr) auto;
  }

  .exchange summary > span:last-child,
  .replay {
    display: none;
  }

  .exchange-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .trace-note {
    display: none;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 38px;
  }

  .panel,
  .flow-card,
  .activity-card,
  .doc-section {
    padding: 17px;
  }

  .moves {
    grid-template-columns: 1fr;
  }

  .terminal-summary {
    grid-template-columns: 1fr;
  }

  .privacy-row {
    display: grid;
  }

  .partner-game-frame {
    min-height: 760px;
  }
}

/* Points playground */
.points-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}
.point-key {
  display: block;
  padding: 14px 16px;
  background: #211a32;
  border-left: 3px solid #b999f9;
  border-radius: 4px 12px 12px 4px;
  font-weight: 650;
  color: #dbc9ff;
}
.point-key.winnings {
  border-color: #66d7a6;
  color: #91e6bf;
  background: #132b25;
}
.point-key small {
  display: block;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
}
.game-catalog {
  gap: 18px;
}
.game-option {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #16111f;
}
.game-art {
  height: 135px;
  background: radial-gradient(ellipse at center, #8c4cff33, transparent 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.game-art .art-ring {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid #b999f9;
  border-radius: 50%;
  font-size: 34px;
  color: #dfc6ff;
  box-shadow:
    0 0 0 8px #b999f907,
    0 0 0 20px #b999f904;
}
.game-art .art-ring.second {
  border-color: #66d7a6;
  color: #91e6bf;
}
.game-option-content {
  padding: 22px;
}
.game-option h3 {
  font-size: 26px;
  margin: 10px 0;
}
.game-option p {
  min-height: 68px;
  line-height: 1.65;
}
.game-option label {
  display: block;
  font-size: 12px;
  color: var(--muted-foreground);
}
.game-option select {
  display: block;
  width: 100%;
  margin: 8px 0 18px;
  padding: 12px;
  border: 1px solid #493b56;
  border-radius: 10px;
  color: var(--foreground);
  background: #0f0b16;
  font: inherit;
  font-size: 12px;
}
.game-option .primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e33187;
  box-shadow: none;
}
.denial-example {
  margin: 22px 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.denial-example summary {
  cursor: pointer;
}
.denial-example p {
  margin: 12px 0;
}
.source-head,
.source-row {
  display: grid;
  grid-template-columns: 1fr 60px 70px;
  align-items: center;
  gap: 10px;
}
.source-head {
  font-size: 11px;
  color: var(--muted-foreground);
  padding: 8px 0;
}
.source-row {
  border-bottom: 1px solid var(--border-soft);
  padding: 17px 0;
  font-variant-numeric: tabular-nums;
}
.source-row > span:not(:first-child),
.source-head > span:not(:first-child),
.source-row > strong {
  text-align: right;
}
.source-row i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background: #b999f9;
}
.source-row.winnings i {
  background: #66d7a6;
}
.source-row.winnings strong {
  color: #91e6bf;
}
.source-row.bonus strong {
  color: #dbc9ff;
}
.source-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.source-total strong {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.source-total small {
  font-size: 10px;
  color: var(--muted-foreground);
}
.accounting-rules {
  display: grid;
  gap: 5px;
  padding: 16px;
  background: #100c16;
  border-radius: 12px;
  font-size: 12px;
}
.accounting-rules > span {
  color: var(--muted-foreground);
}
.accounting-rules > strong {
  margin-bottom: 8px;
  font-weight: 500;
}
.partner-game-frame {
  min-height: 660px;
}
#ledger-card h3 {
  font-size: 20px;
}
#ledger-card .balance-main strong {
  font-size: 24px;
}
.hero {
  padding-top: 45px;
  padding-bottom: 35px;
}
.hero h1 {
  font-size: clamp(34px, 4vw, 52px);
}
#activity-card > .activity-head h2 {
  font-size: 28px;
}
button:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .points-intro {
    grid-template-columns: 1fr;
  }
  .game-option p {
    min-height: 0;
  }
  .game-art {
    height: 110px;
  }
  .partner-game-frame {
    min-height: 1040px;
  }
  .source-head,
  .source-row {
    grid-template-columns: 1fr 55px 65px;
  }
  .game-catalog {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 28px;
  }
}

.game-option .primary span {
  color: inherit;
  font: inherit;
  letter-spacing: normal;
}
/* The partner shell contains only placement, never account data. */
soundiva-login, soundiva-balance, soundiva-profile {
  display: block;
  min-width: 0;
}
soundiva-profile[mode="modal"] {
  min-height: 0;
}
.profile-lab-actions {
  display: grid;
  flex-shrink: 0;
  gap: 16px;
}
.profile-lab-actions .balance-preview-background-label {
  grid-template-columns: auto 1fr;
  align-items: center;
}
body[data-widget-ready="true"] .topbar {
  min-height: 104px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
body[data-widget-ready="true"] .tabs {
  top: 104px;
}
.profile-balance-mount {
  width: 294px;
  flex: 0 0 294px;
  max-width: 100%;
  justify-self: end;
}
.profile-lab-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 26px;
}
.profile-lab-intro h2 {
  font-size: clamp(28px, 3vw, 42px);
  margin: 8px 0 14px;
  letter-spacing: -0.035em;
}
.profile-lab-intro p {
  max-width: 720px;
}
.profile-lab-intro button {
  flex-shrink: 0;
}
.profile-widget-status {
  font-size: 12px;
  line-height: 1.7;
  color: #d4b56c;
  margin-top: 14px;
}
.profile-embed-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 12px;
  color: #ada7be;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.profile-embed-label span:first-child {
  color: #e3be68;
  font-weight: 700;
}
.profile-inline-mount {
  min-height: 0;
}
.profile-integration-example {
  margin-top: 24px;
}
.profile-integration-example summary {
  cursor: pointer;
  font-weight: 600;
}
.profile-integration-example pre {
  margin: 20px 0 0;
  overflow-x: auto;
  color: #c3bdd4;
  font-size: 12px;
  line-height: 1.7;
}
@media (max-width: 1100px) {
  body[data-widget-ready="true"] .topbar {
    min-height: 150px;
    padding-block: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }
  body[data-widget-ready="true"] .topbar .environment {
    display: none;
  }
  body[data-widget-ready="true"] .topbar #header-actions {
    grid-column: 2;
    grid-row: 1;
  }
  body[data-widget-ready="true"] .topbar .profile-balance-mount {
    grid-column: 1 / -1;
  }
  body[data-widget-ready="true"] .tabs {
    top: 150px;
  }
}
@media (max-width: 700px) {
  .profile-lab-intro {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }
  .profile-embed-label {
    gap: 12px;
    font-size: 9px;
    letter-spacing: 0;
  }
}
@media (max-width: 640px) {
  body[data-widget-ready="true"] .topbar {
    height: 126px;
    min-height: 126px;
    grid-template-rows: 30px 56px;
    align-content: center;
  }
  .profile-balance-mount {
    width: 170px;
    flex-basis: 170px;
  }
  body[data-widget-ready="true"] .topbar .profile-balance-mount {
    grid-row: 2;
  }
  body[data-widget-ready="true"] .tabs {
    top: 126px;
  }
}

.balance-theme-lab { margin-top: 24px; padding: 24px; }
.balance-theme-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.balance-theme-heading h3 { margin: 8px 0; font-size: 22px; }
.balance-theme-heading .muted { max-width: 560px; font-size: 13px; line-height: 1.6; }
.balance-preview-background-label { display: grid; flex-shrink: 0; gap: 8px; color: #bcb5ce; font-size: 12px; }
.balance-preview-background-label select { min-height: 40px; padding: 8px 32px 8px 12px; border: 1px solid #514462; border-radius: 10px; background: #20192e; color: #f7f5ff; font: inherit; }
.balance-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.balance-theme-options button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 46px; padding: 10px 12px; border: 1px solid #4b405d; border-radius: 12px; background: #1b1626; color: #c9c2d8; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.balance-theme-options button:hover { background: #2e233f; }
.balance-theme-options button[aria-pressed="true"] { border-color: #c0a0ff; background: #362650; color: #fff; box-shadow: 0 0 0 1px #c0a0ff; }
.balance-theme-options button:focus-visible, .balance-preview-background-label select:focus-visible { outline: 2px solid #ead3a5; outline-offset: 3px; }
.balance-theme-options button:disabled { opacity: .5; cursor: wait; }
.balance-theme-swatch { display: block; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid #ffffff66; border-radius: 6px; }
.swatch-neutral { background: transparent; }
.swatch-dark { background: #131313; }
.swatch-light { background: #fff; }
.swatch-brand-neutral { background: linear-gradient(90deg, #17133a, #2b1436); }
.swatch-brand-dark { border-color: #fe6c20; background: linear-gradient(90deg, #17133a, #2b1436); }
.swatch-brand-light { background: linear-gradient(90deg, #9105ff, #de269e, #ff6e1f); }
.balance-theme-previews { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; padding: 24px; border: 1px solid #ffffff0d; border-radius: 18px; background: #17151e; color: #e5deef; }
.balance-theme-previews[data-background="light"] { border-color: #ffffff44; background: #eae8ee; color: #30263d; }
.balance-theme-preview { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 12px; }
.balance-preview-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 12px; font-weight: 600; }
.balance-preview-label span { opacity: .55; font-size: 10px; font-weight: 400; }
.balance-theme-desktop { width: 294px; max-width: 100%; min-height: 80px; }
.balance-theme-compact { width: 170px; max-width: 100%; min-height: 56px; }
.balance-theme-note { margin: 14px 0 0; color: #aaa1bb; font-size: 11px; line-height: 1.7; }
.widget-color-customization { margin: 20px 0; padding: 20px; border: 1px solid #4b405d; border-radius: 16px; background: #171321; }
.widget-color-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.widget-color-heading h4 { margin: 0 0 6px; color: #f7f5ff; font-size: 15px; }
.widget-color-heading p { margin: 0; color: #aaa1bb; font-size: 12px; line-height: 1.6; }
.widget-color-selects { display: flex; flex-wrap: wrap; gap: 12px; }
.widget-color-selects label, .widget-color-fields label { display: grid; gap: 8px; color: #bcb5ce; font-size: 11px; }
.widget-color-selects select { min-height: 36px; max-width: 100%; padding: 7px 28px 7px 10px; border: 1px solid #514462; border-radius: 8px; background: #20192e; color: #f7f5ff; font: inherit; font-size: 12px; }
.widget-color-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.widget-color-fields label > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.widget-color-fields input[type="color"] { flex: 0 0 30px; width: 30px; height: 30px; padding: 2px; border: 1px solid #665782; border-radius: 8px; background: #25203b; cursor: pointer; }
.widget-color-fields output { font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; letter-spacing: .03em; }
.widget-color-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.widget-color-actions button { min-height: 36px; padding: 8px 14px; font-size: 12px; }
.widget-color-actions p { flex: 1 1 240px; margin: 0; color: #aaa1bb; font-size: 11px; line-height: 1.6; }
.widget-color-customization :is(input, select, button):focus-visible { outline: 2px solid #ead3a5; outline-offset: 3px; }
.widget-color-customization :disabled { opacity: .5; cursor: wait; }
@media (max-width: 1100px) {
  .widget-color-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .balance-theme-lab { padding: 18px; }
  .balance-theme-heading { flex-direction: column; gap: 12px; }
  .balance-preview-background-label { grid-template-columns: auto auto; align-items: center; gap: 12px; }
  .balance-theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balance-theme-previews { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 24px; }
  .widget-color-customization { padding: 16px; }
  .widget-color-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}