:root {
  --bg: #070b12;
  --bg-soft: #0a101a;
  --panel: #0d141f;
  --panel-raised: #111a27;
  --panel-bright: #152131;
  --text: #eef7ff;
  --text-soft: #afbdd0;
  --muted: #74869d;
  --faint: #4f6074;
  --line: rgba(155, 188, 225, 0.12);
  --line-strong: rgba(155, 188, 225, 0.22);
  --cyan: #71e5ee;
  --cyan-bright: #a3f4f7;
  --blue: #7995ff;
  --violet: #9a8bff;
  --green: #5bd3a5;
  --amber: #eabf7a;
  --red: #ee7483;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --font: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 1024px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(113, 229, 238, 0.8);
  outline-offset: 2px;
}

.screen {
  min-height: 100vh;
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  text-align: left;
}

.brand-mark {
  position: relative;
  width: 28px;
  height: 28px;
  display: block;
  transform: skewY(-7deg);
}

.brand-mark span {
  position: absolute;
  left: 2px;
  height: 5px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(113, 229, 238, 0.28);
}

.brand-mark span:nth-child(1) {
  top: 3px;
  width: 23px;
}

.brand-mark span:nth-child(2) {
  top: 11px;
  width: 17px;
}

.brand-mark span:nth-child(3) {
  top: 19px;
  width: 9px;
}

.brand-word {
  font-size: 19px;
  font-weight: 760;
  letter-spacing: 0.13em;
}

.brand-network {
  margin-left: 2px;
  padding: 4px 6px 3px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.brand-compact {
  height: 66px;
  width: 100%;
}

.brand-compact .brand-word {
  font-size: 18px;
}

.status-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--muted);
}

.status-green {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(91, 211, 165, 0.09);
}

.status-amber {
  background: var(--amber);
}

.is-pulsing {
  box-shadow: 0 0 0 4px rgba(91, 211, 165, 0.08);
}

.pill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.pill-success {
  border-color: rgba(91, 211, 165, 0.2);
  background: rgba(91, 211, 165, 0.08);
  color: #9ce9c9;
}

.pill-neutral {
  color: var(--muted);
}

.primary-button,
.ghost-button,
.network-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}

.primary-button {
  background: var(--cyan);
  color: #071014;
  box-shadow: 0 10px 30px rgba(88, 213, 224, 0.14);
}

.primary-button span {
  font-size: 16px;
}

.primary-compact {
  min-height: 38px;
  padding: 0 15px;
  font-size: 12px;
}

.ghost-button,
.network-button {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-soft);
}

.network-button {
  min-height: 38px;
  gap: 8px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 11px;
}

.button-mark {
  color: var(--cyan);
  font-size: 20px;
  line-height: 1;
}

.hash-text {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: -0.02em;
}

.mini-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(113, 229, 238, 0.22);
  border-radius: 9px;
  background: rgba(113, 229, 238, 0.07);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
}

.progress-fill {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--cyan);
}

.progress-green {
  background: var(--green);
}

.copy-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-soft);
  font-size: 11px;
}

.mobile-bottom-nav,
.mobile-trade-dock,
.mobile-app-brand,
.mobile-explorer-brand {
  display: none;
}

/* Website */

.site-screen {
  position: relative;
  min-height: 1024px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 38%, rgba(45, 104, 130, 0.13), transparent 32%),
    linear-gradient(180deg, #080d15 0%, #070b12 70%);
}

.site-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, black, transparent 75%);
}

.site-nav {
  position: relative;
  z-index: 10;
  height: 76px;
  display: grid;
  grid-template-columns: 260px 1fr 330px;
  align-items: center;
  padding: 0 56px;
  border-bottom: 1px solid rgba(155, 188, 225, 0.1);
  background: rgba(7, 11, 18, 0.74);
  backdrop-filter: blur(18px);
}

.site-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.site-links button {
  padding: 9px 0;
  background: transparent;
  color: #8fa0b5;
  font-size: 12px;
  transition: color 140ms ease, transform 140ms var(--ease-out);
}

.site-links .is-current {
  color: var(--text);
}

.site-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.site-hero {
  position: relative;
  z-index: 1;
  width: min(1328px, calc(100% - 112px));
  height: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(520px, 0.94fr) minmax(560px, 1.06fr);
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding: 24px 0 0 8px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(113, 229, 238, 0.4);
}

.hero-copy h1 {
  max-width: 670px;
  margin: 30px 0 21px;
  font-size: clamp(48px, 4.1vw, 66px);
  line-height: 1.18;
  font-weight: 660;
  letter-spacing: -0.055em;
}

.hero-copy h1 span {
  color: var(--cyan-bright);
  text-shadow: 0 16px 55px rgba(113, 229, 238, 0.13);
}

.hero-copy > p {
  max-width: 590px;
  margin: 0;
  color: #9aabc0;
  font-size: 15px;
  line-height: 1.9;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 31px;
}

.hero-footnotes {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  color: #6f8298;
  font-size: 11px;
}

.hero-footnotes span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-footnotes i {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid rgba(91, 211, 165, 0.42);
  border-radius: 50%;
  position: relative;
}

.hero-footnotes i::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--green);
}

.hero-visual {
  position: relative;
  height: 580px;
  margin-right: -22px;
}

.visual-grid {
  position: absolute;
  width: 540px;
  height: 500px;
  right: 18px;
  top: 22px;
  transform: perspective(700px) rotateX(63deg) rotateZ(-19deg) translateY(42px);
  background-image: linear-gradient(rgba(113, 229, 238, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 229, 238, 0.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle, black 10%, transparent 68%);
  opacity: 0.75;
}

.orbit {
  position: absolute;
  right: 112px;
  top: 90px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(113, 229, 238, 0.13);
  border-radius: 50%;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(113, 229, 238, 0.7);
}

.orbit::before { left: 37px; top: 68px; }
.orbit::after { right: 18px; bottom: 104px; }

.orbit-two {
  right: 152px;
  top: 130px;
  width: 300px;
  height: 300px;
  border-style: dashed;
  transform: rotate(27deg);
}

.orbit-three {
  right: 195px;
  top: 173px;
  width: 214px;
  height: 214px;
  border-color: rgba(113, 229, 238, 0.19);
  box-shadow: inset 0 0 65px rgba(113, 229, 238, 0.04), 0 0 85px rgba(61, 139, 160, 0.07);
}

.core-badge {
  position: absolute;
  z-index: 2;
  right: 251px;
  top: 228px;
  width: 104px;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0, 94% 23%, 94% 75%, 50% 100%, 6% 75%, 6% 23%);
  background: linear-gradient(145deg, rgba(128, 244, 247, 0.28), rgba(28, 71, 87, 0.22));
  border: 1px solid rgba(163, 244, 247, 0.5);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
}

.core-badge::before {
  content: "";
  position: absolute;
  inset: 8px;
  clip-path: inherit;
  background: #0a1720;
}

.core-badge::after {
  content: "";
  position: absolute;
  inset: 18px;
  clip-path: inherit;
  border: 1px solid rgba(113, 229, 238, 0.27);
}

.core-f {
  position: relative;
  z-index: 1;
  color: var(--cyan-bright);
  font-size: 48px;
  font-weight: 800;
  line-height: 0.9;
  transform: skewY(-7deg);
}

.core-badge small {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  color: #71a6b2;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.25em;
}

.orbit-node {
  position: absolute;
  z-index: 4;
  min-width: 190px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(155, 188, 225, 0.16);
  border-radius: 10px;
  background: rgba(12, 20, 31, 0.86);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.node-index {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(113, 229, 238, 0.18);
  border-radius: 7px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 8px;
}

.orbit-node div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.orbit-node b {
  font-size: 11px;
  font-weight: 680;
}

.orbit-node small {
  color: var(--muted);
  font-size: 8px;
}

.node-check {
  width: 18px;
  height: 18px;
  display: block;
  border: 1px solid rgba(91, 211, 165, 0.3);
  border-radius: 50%;
  position: relative;
}

.node-check::before {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 9px;
}

.orbit-node strong {
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
}

.node-rules { right: 339px; top: 105px; }
.node-funds { right: 26px; top: 183px; }
.node-oracle { right: 342px; top: 388px; }

.node-votes {
  display: flex;
  gap: 3px;
}

.node-votes i {
  width: 4px;
  height: 15px;
  display: block;
  border-radius: 3px;
  background: var(--green);
}

.node-votes .off {
  background: rgba(255, 255, 255, 0.12);
}

.hero-ticket {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 6px;
  width: 348px;
  padding: 17px;
  border: 1px solid rgba(113, 229, 238, 0.17);
  border-radius: 13px;
  background: rgba(11, 18, 28, 0.91);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.ticket-top,
.ticket-hash,
.ticket-market,
.ticket-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticket-top > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.ticket-market {
  justify-content: flex-start;
  margin: 15px 0;
}

.ticket-market div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-market small,
.ticket-metrics small {
  color: var(--muted);
  font-size: 8px;
}

.ticket-market b {
  font-size: 11px;
  font-weight: 670;
}

.ticket-metrics {
  margin-bottom: 10px;
}

.ticket-metrics span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ticket-metrics b {
  font-family: var(--mono);
  font-size: 10px;
}

.ticket-hash {
  margin-top: 10px;
  color: var(--muted);
  font-size: 8px;
}

.ticket-hash span:last-child {
  color: var(--cyan);
}

.proof-band {
  position: relative;
  z-index: 2;
  width: calc(100% - 112px);
  max-width: 1328px;
  height: 276px;
  margin: 0 auto;
  padding: 30px 36px;
  border: 1px solid rgba(155, 188, 225, 0.11);
  background: rgba(11, 17, 27, 0.76);
  box-shadow: var(--shadow);
}

.proof-band::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 48px;
  width: 2px;
  height: 54px;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(113, 229, 238, 0.45);
}

.proof-band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.proof-band-head div {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.proof-band-head span {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.proof-band-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
}

.proof-band-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr;
  align-items: center;
  gap: 0;
  margin-top: 26px;
}

.evidence-card {
  min-height: 124px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 13px;
  padding: 19px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
}

.evidence-icon {
  width: 42px;
  height: 42px;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(113, 229, 238, 0.16);
  border-radius: 9px;
  background: rgba(113, 229, 238, 0.05);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 9px;
}

.evidence-card div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evidence-card small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.evidence-card h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.evidence-card > strong {
  grid-column: 1 / -1;
  align-self: end;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #b7c8d8;
  font-family: var(--mono);
  font-size: 11px;
}

.evidence-connector {
  display: flex;
  align-items: center;
}

.evidence-connector span {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(113, 229, 238, 0.45), var(--line));
  position: relative;
}

.evidence-connector span::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
  transform: rotate(45deg);
}

/* Shared app surfaces */

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.dapp-screen {
  min-height: 1024px;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  overflow: hidden;
}

.app-sidebar {
  height: 100vh;
  min-height: 1024px;
  display: flex;
  flex-direction: column;
  padding: 0 18px 17px;
  border-right: 1px solid var(--line);
  background: #090e17;
}

.sidebar-section-label {
  margin: 12px 12px 8px;
  color: #4e6075;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.side-gap {
  margin-top: 20px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav button {
  min-height: 40px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7f91a8;
  font-size: 12px;
  text-align: left;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out);
}

.sidebar-nav button.active {
  border-color: rgba(113, 229, 238, 0.09);
  background: rgba(113, 229, 238, 0.075);
  color: var(--cyan-bright);
}

.sidebar-nav em {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: rgba(121, 149, 255, 0.13);
  color: #a8b8ff;
  font-size: 9px;
  font-style: normal;
}

.glyph {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #65788d;
  font-family: var(--mono);
  font-size: 11px;
}

.glyph.is-active {
  background: rgba(113, 229, 238, 0.07);
  color: var(--cyan);
}

.sidebar-spacer {
  flex: 1;
}

.vault-mini {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}

.vault-mini-head,
.vault-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vault-mini-head {
  margin-bottom: 10px;
  font-size: 9px;
}

.vault-mini-head span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}

.vault-mini-head b {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 9px;
}

.vault-mini-row {
  margin-top: 9px;
  color: var(--muted);
  font-size: 8px;
}

.vault-mini-row strong {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 8px;
}

.wallet-card {
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.018);
  text-align: left;
}

.wallet-avatar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(113, 229, 238, 0.2), rgba(121, 149, 255, 0.1));
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 8px;
}

.wallet-card > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wallet-card b {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 8px;
}

.wallet-card small {
  color: var(--muted);
  font-size: 7px;
}

.wallet-card i {
  color: var(--muted);
  font-style: normal;
}

.app-workspace {
  min-width: 0;
  background: #080d15;
}

.app-topbar {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 14, 23, 0.92);
}

.market-switcher {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.market-switcher button {
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.market-switcher button.active {
  border-bottom-color: var(--cyan);
  background: rgba(113, 229, 238, 0.025);
  color: var(--text);
}

.market-switcher button > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.market-switcher small {
  color: var(--muted);
  font-size: 7px;
}

.market-switcher b {
  font-size: 11px;
  font-weight: 680;
}

.market-switcher .mini-logo {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.topbar-actions,
.explorer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-soft);
  font-size: 17px;
}

.notification-button {
  position: relative;
  font-size: 14px;
}

.notification-button i {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

.proof-shortcut {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(113, 229, 238, 0.18);
  border-radius: 8px;
  background: rgba(113, 229, 238, 0.05);
  color: #a9e8eb;
  font-size: 10px;
}

.proof-shortcut span {
  color: var(--cyan);
  font-size: 16px;
}

.proof-shortcut b {
  font-size: 11px;
}

.app-content {
  height: calc(100vh - 66px);
  min-height: 958px;
  overflow: hidden;
  padding: 20px 24px 18px;
}

.market-title-row {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.breadcrumb,
.explorer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f7187;
  font-size: 9px;
}

.breadcrumb span,
.explorer-breadcrumb span {
  color: #3f5063;
}

.title-with-status {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 7px;
}

.title-with-status h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.market-title-row p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.countdown-card {
  min-width: 174px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 15px;
  align-items: center;
  padding: 9px 13px;
  border: 1px solid rgba(234, 191, 122, 0.16);
  border-radius: 9px;
  background: rgba(234, 191, 122, 0.04);
}

.countdown-card small {
  color: var(--amber);
  font-size: 8px;
}

.countdown-card strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #f3d4a4;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.04em;
}

.countdown-card span {
  color: #6e7e91;
  font-family: var(--mono);
  font-size: 7px;
}

.market-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}

.metric {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 4px 10px;
  padding: 11px 16px;
  border-right: 1px solid var(--line);
}

.metric:last-child {
  border-right: 0;
}

.metric-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 8px;
}

.metric-value {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 680;
}

.metric-meta {
  align-self: center;
  color: #627489;
  font-size: 7px;
}

.metric-cyan .metric-value {
  color: var(--cyan-bright);
}

.metric-green .metric-value {
  color: var(--green);
}

.trade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.72fr);
  gap: 14px;
  margin-top: 14px;
}

.market-panel,
.order-panel {
  height: 482px;
  padding: 18px;
}

.panel-head,
.compact-panel-title,
.detail-card-head,
.outcome-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel-head > div:first-child,
.compact-panel-title > span,
.detail-card-head > div,
.outcome-proof-head > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-head small,
.compact-panel-title small,
.detail-card-head small,
.outcome-proof-head small {
  color: #53667b;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.13em;
}

.panel-head h2,
.detail-card-head h2,
.outcome-proof-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.market-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.market-view-tabs button {
  min-height: 27px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 8px;
}

.market-view-tabs button.active {
  background: var(--panel-bright);
  color: var(--text);
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.outcome-card {
  position: relative;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms var(--ease-out);
}

.outcome-card.selected {
  border-color: rgba(113, 229, 238, 0.42);
  background: rgba(113, 229, 238, 0.065);
  box-shadow: inset 0 0 0 1px rgba(113, 229, 238, 0.05);
}

.outcome-card.tone-violet.selected {
  border-color: rgba(154, 139, 255, 0.42);
  background: rgba(154, 139, 255, 0.06);
}

.outcome-symbol {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(113, 229, 238, 0.18);
  border-radius: 10px;
  background: rgba(113, 229, 238, 0.055);
  color: var(--cyan-bright);
  font-size: 17px;
  font-weight: 720;
}

.tone-violet .outcome-symbol,
.outcome-symbol.tone-violet {
  border-color: rgba(154, 139, 255, 0.2);
  background: rgba(154, 139, 255, 0.06);
  color: #c4baff;
}

.outcome-card > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.outcome-card small {
  color: var(--muted);
  font-size: 8px;
}

.outcome-card b {
  font-family: var(--mono);
  font-size: 15px;
}

.selection-mark {
  position: absolute;
  right: 9px;
  top: 9px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.selected .selection-mark {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 3px #101f28;
  background: var(--cyan);
}

.number-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.number-strip-head > span {
  font-size: 10px;
  font-weight: 650;
}

.number-strip-head small {
  margin-left: 8px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 400;
}

.number-strip-head button {
  background: transparent;
  color: #7790aa;
  font-size: 8px;
}

.number-strip-head b {
  margin-left: 5px;
  color: var(--cyan);
}

.number-strip {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;
  margin-top: 9px;
}

.number-strip button {
  min-height: 53px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.012);
}

.number-strip button.highlight {
  border-color: rgba(113, 229, 238, 0.28);
  background: rgba(113, 229, 238, 0.055);
}

.number-strip b {
  font-family: var(--mono);
  font-size: 12px;
}

.number-strip small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
}

.number-strip .highlight b {
  color: var(--cyan);
}

.market-proof-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(230px, 1.1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(113, 229, 238, 0.13);
  border-radius: 9px;
  background: rgba(113, 229, 238, 0.035);
}

.market-proof-copy {
  display: flex;
  align-items: center;
  gap: 10px;
}

.proof-diamond {
  color: var(--cyan);
  font-size: 23px;
}

.market-proof-copy div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.market-proof-copy b {
  font-size: 9px;
}

.market-proof-copy small {
  color: var(--muted);
  font-size: 7px;
}

.market-proof-steps {
  display: flex;
  align-items: center;
}

.market-proof-steps span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #5b6d82;
  font-size: 6px;
}

.market-proof-steps i {
  width: 12px;
  height: 12px;
  display: block;
  border: 1px solid #425266;
  border-radius: 50%;
}

.market-proof-steps span.done {
  color: #8ecdbc;
}

.market-proof-steps .done i {
  border-color: var(--green);
  background: var(--green);
  box-shadow: inset 0 0 0 3px #11271f;
}

.market-proof-steps > b {
  width: 27px;
  height: 1px;
  display: block;
  margin: 0 5px 10px;
  background: #293848;
}

.market-proof-row > button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(113, 229, 238, 0.15);
  border-radius: 6px;
  background: rgba(113, 229, 238, 0.05);
  color: var(--cyan);
  font-size: 8px;
}

.order-panel {
  display: flex;
  flex-direction: column;
}

.order-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.selected-outcome {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
}

.selected-outcome > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.outcome-symbol.compact {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 15px;
}

.selected-outcome > div > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.selected-outcome small {
  color: var(--muted);
  font-size: 7px;
}

.selected-outcome b {
  font-size: 10px;
}

.selected-outcome > strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--cyan-bright);
  font-family: var(--mono);
  font-size: 22px;
}

.selected-outcome > strong small {
  font-family: var(--font);
  font-size: 7px;
  font-weight: 500;
}

.amount-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 8px;
}

.amount-label span:last-child {
  color: var(--muted);
}

.amount-input {
  height: 47px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding: 0 9px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}

.amount-input:focus-within {
  border-color: rgba(113, 229, 238, 0.35);
}

.amount-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 650;
}

.amount-input > span {
  color: var(--text-soft);
  font-size: 8px;
}

.amount-input button {
  min-height: 27px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(113, 229, 238, 0.08);
  color: var(--cyan);
  font-size: 7px;
  font-weight: 700;
}

.quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 7px;
}

.quick-amounts button {
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.015);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
}

.quick-amounts button.active {
  border-color: rgba(113, 229, 238, 0.18);
  color: var(--cyan);
}

.order-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 13px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.order-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 8px;
}

.order-summary strong {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
}

.order-summary .positive {
  color: var(--green);
}

.coverage-notice {
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 7px 9px;
  border: 1px solid rgba(91, 211, 165, 0.15);
  border-radius: 8px;
  background: rgba(91, 211, 165, 0.045);
}

.notice-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(91, 211, 165, 0.11);
  color: var(--green);
  font-size: 10px;
}

.coverage-notice > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.coverage-notice b {
  font-size: 8px;
}

.coverage-notice small {
  color: var(--muted);
  font-size: 7px;
}

.coverage-notice > strong {
  color: var(--green);
  font-size: 7px;
}

.order-button {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 11px;
  border-radius: 8px;
  background: var(--cyan);
  color: #071216;
  font-size: 10px;
  font-weight: 750;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}

.order-button:disabled,
.mobile-trade-dock > button:disabled {
  background: #2b3b42;
  box-shadow: none;
  color: #748895;
}

.order-button span {
  font-size: 14px;
}

.order-disclaimer {
  margin: 8px 0 0;
  color: #526376;
  font-size: 6.5px;
  line-height: 1.5;
  text-align: center;
}

.lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 14px;
  margin-top: 14px;
}

.risk-card,
.oracle-card {
  height: 206px;
  padding: 15px 17px;
}

.compact-panel-title b {
  font-size: 11px;
  font-weight: 650;
}

.compact-panel-title > button,
.detail-card-head > button {
  background: transparent;
  color: #71869d;
  font-size: 8px;
}

.risk-body {
  display: grid;
  grid-template-columns: 116px 1fr minmax(220px, 1.35fr);
  align-items: center;
  gap: 17px;
  height: 147px;
}

.risk-ring {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) 0 68%, rgba(255, 255, 255, 0.06) 68% 100%);
  position: relative;
}

.risk-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--panel);
}

.risk-ring div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.risk-ring strong {
  color: var(--cyan-bright);
  font-family: var(--mono);
  font-size: 15px;
}

.risk-ring small {
  color: var(--muted);
  font-size: 7px;
}

.risk-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.risk-stats span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.risk-stats small {
  color: var(--muted);
  font-size: 7px;
}

.risk-stats b {
  font-family: var(--mono);
  font-size: 9px;
}

.mini-chart {
  position: relative;
  height: 108px;
  padding-bottom: 18px;
}

.chart-grid-lines {
  position: absolute;
  inset: 0 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-grid-lines i {
  height: 1px;
  display: block;
  background: var(--line);
}

.chart-bars {
  position: absolute;
  inset: 8px 0 18px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.chart-bars span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(113, 229, 238, 0.68), rgba(113, 229, 238, 0.06));
}

.chart-labels {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  color: #526478;
  font-family: var(--mono);
  font-size: 6px;
}

.oracle-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.oracle-mini-grid > div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.012);
}

.oracle-mini-grid .mini-logo {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  border-radius: 6px;
  font-size: 8px;
}

.oracle-mini-grid span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.oracle-mini-grid b {
  font-size: 7px;
}

.oracle-mini-grid small {
  color: var(--muted);
  font-size: 6px;
}

.oracle-mini-grid i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.oracle-mini-grid .waiting i {
  background: #485a6e;
}

.success-toast,
.search-toast {
  position: fixed;
  z-index: 50;
  right: 24px;
  bottom: 24px;
  min-width: 385px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid rgba(91, 211, 165, 0.22);
  border-radius: 11px;
  background: rgba(12, 25, 24, 0.96);
  box-shadow: var(--shadow);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}

@starting-style {
  .success-toast,
  .search-toast {
    opacity: 0;
    transform: translateY(100%);
  }
}

.success-toast > span,
.search-toast > span {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(91, 211, 165, 0.12);
  color: var(--green);
}

.success-toast div,
.search-toast div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.success-toast b,
.search-toast b {
  font-size: 10px;
}

.success-toast small,
.search-toast small {
  color: var(--muted);
  font-size: 7px;
}

/* Explorer */

.explorer-screen {
  min-height: 1024px;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  background: #080d15;
}

.explorer-sidebar {
  min-height: 1024px;
  display: flex;
  flex-direction: column;
  padding: 0 18px 18px;
  border-right: 1px solid var(--line);
  background: #090e17;
}

.explorer-sidebar .brand-compact {
  height: 58px;
}

.explorer-brand-sub {
  margin: -5px 0 22px 39px;
  color: #4f6074;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.17em;
}

.explorer-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 22px;
}

.explorer-nav-group > small {
  margin: 0 10px 6px;
  color: #4d5f74;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.explorer-nav-group button {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border-radius: 7px;
  background: transparent;
  color: #77899f;
  font-size: 11px;
  text-align: left;
}

.explorer-nav-group button.active {
  background: rgba(113, 229, 238, 0.055);
  color: var(--cyan-bright);
}

.explorer-nav-group button > i {
  position: absolute;
  right: -18px;
  top: 8px;
  width: 2px;
  height: 22px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(113, 229, 238, 0.45);
}

.explorer-side-footer {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.012);
}

.explorer-side-footer span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-soft);
  font-size: 8px;
}

.explorer-side-footer small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
}

.explorer-workspace {
  min-width: 0;
}

.explorer-topbar {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 14, 23, 0.92);
}

.explorer-search {
  width: min(520px, 46vw);
  height: 36px;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}

.explorer-search > span,
.explorer-search > button:first-child {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: #6f8196;
  font-size: 16px;
}

.explorer-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 10px;
}

.explorer-search input::placeholder {
  color: #506174;
}

.explorer-search kbd {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  color: #596b7f;
  font-family: var(--font);
  font-size: 7px;
}

.explorer-actions > button:first-child {
  background: transparent;
  color: #74869b;
  font-size: 9px;
}

.explorer-content {
  height: calc(100vh - 66px);
  min-height: 958px;
  overflow: hidden;
  padding: 17px 24px;
}

.explorer-breadcrumb button {
  padding: 0;
  background: transparent;
  color: #70839a;
  font-size: 9px;
}

.explorer-breadcrumb strong {
  color: #9db0c6;
  font-family: var(--mono);
  font-size: 8px;
}

.explorer-title-row {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.market-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.market-identity .mini-logo {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  font-size: 13px;
}

.market-identity > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.market-identity > div > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.market-identity h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.market-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.explorer-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.explorer-title-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.018);
  color: #8295aa;
  font-size: 8px;
}

.explorer-title-actions .outline-accent {
  border-color: rgba(113, 229, 238, 0.18);
  color: var(--cyan);
}

.verified-banner {
  min-height: 108px;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid rgba(91, 211, 165, 0.18);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(91, 211, 165, 0.08), rgba(91, 211, 165, 0.015) 56%, transparent),
    var(--panel);
  position: relative;
  overflow: hidden;
}

.verified-banner::after {
  content: "VERIFIED";
  position: absolute;
  right: 340px;
  top: -4px;
  color: rgba(91, 211, 165, 0.035);
  font-family: var(--mono);
  font-size: 74px;
  font-weight: 800;
  letter-spacing: -0.08em;
}

.verified-seal {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(91, 211, 165, 0.24);
  border-radius: 50%;
  background: rgba(91, 211, 165, 0.07);
  position: relative;
}

.verified-seal::before,
.verified-seal::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(91, 211, 165, 0.2);
  border-radius: 50%;
}

.verified-seal::after {
  inset: 13px;
  border-style: solid;
}

.verified-seal span {
  color: var(--green);
  font-size: 15px;
}

.verified-banner > div:nth-child(2) {
  position: relative;
  z-index: 1;
}

.verified-banner > div:nth-child(2) small {
  color: var(--green);
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.verified-banner h2 {
  margin: 6px 0 5px;
  font-size: 16px;
  font-weight: 670;
}

.verified-banner p {
  margin: 0;
  color: #788ba0;
  font-size: 8px;
}

.verified-meta {
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
}

.verified-meta span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.verified-meta small {
  color: var(--muted);
  font-size: 7px;
}

.verified-meta b {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
}

.proof-check-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 11px;
}

.proof-check-card {
  position: relative;
  min-height: 107px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  overflow: hidden;
}

.proof-check-index {
  position: absolute;
  right: 10px;
  top: 7px;
  color: rgba(113, 229, 238, 0.08);
  font-family: var(--mono);
  font-size: 31px;
  font-weight: 800;
}

.proof-check-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.check-ring {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(91, 211, 165, 0.22);
  border-radius: 50%;
  background: rgba(91, 211, 165, 0.06);
  color: var(--green);
  font-size: 8px;
}

.proof-check-title h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 650;
}

.proof-check-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 6px;
}

.proof-check-card > strong {
  display: block;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #b5c7d7;
  font-family: var(--mono);
  font-size: 9px;
}

.explorer-tabs {
  height: 43px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-top: 8px;
  border-bottom: 1px solid var(--line);
}

.explorer-tabs button {
  height: 42px;
  padding: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #718398;
  font-size: 9px;
}

.explorer-tabs button.active {
  border-bottom-color: var(--cyan);
  color: var(--cyan-bright);
}

.explorer-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.72fr);
  gap: 11px;
  margin-top: 11px;
}

.explorer-left-stack,
.explorer-right-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proof-detail-card,
.outcome-proof-card,
.oracle-proof-card,
.reserve-proof-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.proof-detail-card {
  min-height: 252px;
  padding: 15px 17px;
}

.rule-hash-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(113, 229, 238, 0.11);
  border-radius: 8px;
  background: rgba(113, 229, 238, 0.028);
}

.hash-glyph {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(113, 229, 238, 0.07);
  color: var(--cyan);
  font-family: var(--mono);
}

.rule-hash-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rule-hash-row small {
  color: var(--muted);
  font-size: 6px;
}

.rule-hash-row .hash-text {
  color: #a9c1cd;
  font-size: 8px;
}

.timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

.timeline-step {
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.timeline-step > span {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  border: 1px solid rgba(91, 211, 165, 0.24);
  border-radius: 50%;
  background: rgba(91, 211, 165, 0.06);
  color: var(--green);
  font-size: 7px;
}

.timeline-step b {
  font-size: 7px;
}

.timeline-step small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 6px;
}

.timeline > i {
  width: min(48px, 5vw);
  height: 1px;
  display: block;
  margin-bottom: 29px;
  background: rgba(91, 211, 165, 0.25);
}

.rule-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.rule-spec-grid span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px;
  border-right: 1px solid var(--line);
}

.rule-spec-grid span:first-child {
  padding-left: 0;
}

.rule-spec-grid span:last-child {
  border-right: 0;
}

.rule-spec-grid small {
  color: var(--muted);
  font-size: 6px;
}

.rule-spec-grid b {
  font-size: 8px;
  font-weight: 600;
}

.transaction-card {
  min-height: 236px;
}

.transaction-card table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  table-layout: fixed;
}

.transaction-card th,
.transaction-card td {
  height: 29px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(155, 188, 225, 0.07);
  color: #8799ae;
  font-size: 7px;
  text-align: left;
}

.transaction-card th {
  color: #55677c;
  font-size: 6px;
  font-weight: 600;
}

.transaction-card th:first-child,
.transaction-card td:first-child {
  padding-left: 0;
}

.transaction-card td:first-child {
  color: #a8b9ca;
}

.event-dot {
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.table-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
}

.table-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.outcome-proof-card {
  min-height: 243px;
  padding: 15px;
  position: relative;
  overflow: hidden;
}

.outcome-proof-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -78px;
  bottom: -92px;
  border: 1px solid rgba(113, 229, 238, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(113, 229, 238, 0.015), 0 0 0 44px rgba(113, 229, 238, 0.01);
}

.final-number {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.final-number > span {
  color: var(--cyan-bright);
  font-family: var(--mono);
  font-size: 52px;
  font-weight: 720;
  line-height: 1;
  text-shadow: 0 0 34px rgba(113, 229, 238, 0.18);
}

.final-number i {
  position: absolute;
  width: 82px;
  height: 82px;
  border: 1px dashed rgba(113, 229, 238, 0.16);
  border-radius: 50%;
}

.winning-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.winning-tags span {
  padding: 4px 7px;
  border: 1px solid rgba(113, 229, 238, 0.15);
  border-radius: 5px;
  background: rgba(113, 229, 238, 0.045);
  color: #a5dfe3;
  font-size: 7px;
}

.result-proof-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 7px;
}

.result-proof-row strong,
.result-proof-row .hash-text {
  color: #a6b7c7;
  font-size: 7px;
}

.oracle-proof-card {
  min-height: 260px;
  padding: 14px 15px;
}

.oracle-proof-card .detail-card-head > strong {
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
}

.oracle-votes {
  margin-top: 9px;
}

.oracle-votes > div {
  min-height: 36px;
  display: grid;
  grid-template-columns: 22px 25px 1fr 32px 16px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(155, 188, 225, 0.07);
}

.oracle-index {
  color: #4e6073;
  font-family: var(--mono);
  font-size: 6px;
}

.oracle-votes .mini-logo {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 6px;
  font-size: 7px;
}

.oracle-votes > div > span:nth-child(3) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oracle-votes b {
  font-size: 7px;
}

.oracle-votes small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 6px;
}

.oracle-votes > div > strong {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 8px;
}

.oracle-votes > div > i {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(91, 211, 165, 0.07);
  color: var(--green);
  font-size: 6px;
  font-style: normal;
}

.oracle-votes .waiting > strong,
.oracle-votes .waiting > i {
  color: #536477;
}

.oracle-proof-link {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.012);
  color: #778ca2;
  font-size: 7px;
}

.oracle-proof-link span {
  color: var(--cyan);
}

.reserve-proof-card {
  min-height: 111px;
  padding: 14px 15px;
}

.reserve-proof-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.reserve-proof-card > div > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.reserve-proof-card small {
  color: #53667b;
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.reserve-proof-card h2 {
  margin: 0;
  font-size: 11px;
}

.reserve-proof-card > div > strong {
  color: var(--green);
  font-family: var(--mono);
  font-size: 15px;
}

.reserve-proof-card p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 6px;
}

.reserve-proof-card p span {
  display: flex;
  gap: 5px;
}

.reserve-proof-card p b {
  color: #a3b6c7;
  font-family: var(--mono);
  font-weight: 600;
}

.search-toast {
  grid-template-columns: 34px 1fr;
  min-width: 280px;
}

button:active:not(:disabled) {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover,
  .order-button:hover,
  .mobile-trade-dock > button:hover {
    transform: translateY(-1px);
    background: var(--cyan-bright);
  }

  .ghost-button:hover,
  .network-button:hover,
  .icon-button:hover,
  .copy-button:hover {
    border-color: rgba(113, 229, 238, 0.35);
    color: var(--text);
  }

  .site-links button:hover {
    color: var(--text);
  }

  .sidebar-nav button:hover {
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-soft);
  }

  .outcome-card:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
  }

  .number-strip button:hover,
  .quick-amounts button:hover,
  .explorer-tabs button:hover {
    border-color: rgba(113, 229, 238, 0.28);
    color: var(--cyan);
  }

  .explorer-nav-group button:hover {
    background: rgba(113, 229, 238, 0.055);
    color: var(--cyan-bright);
  }

  .market-switcher button:hover,
  .proof-shortcut:hover {
    background: rgba(113, 229, 238, 0.045);
    color: var(--text);
  }
}

@media (max-width: 1280px) {
  .site-nav { padding: 0 34px; grid-template-columns: 220px 1fr 300px; }
  .site-links { gap: 20px; }
  .site-hero, .proof-band { width: calc(100% - 68px); }
  .site-hero { grid-template-columns: 0.9fr 1.1fr; }
  .hero-copy h1 { font-size: 49px; }
  .node-funds { right: 8px; }
  .app-content, .explorer-content { padding-left: 18px; padding-right: 18px; }
  .market-panel, .order-panel { padding: 15px; }
  .outcome-card { padding: 10px; }
  .risk-body { grid-template-columns: 105px 0.8fr 1.2fr; }
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    font-size: 13px;
  }

  .screen {
    width: 100%;
    min-height: 100dvh;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
  }

  .brand-mark span:nth-child(1) { width: 20px; }
  .brand-mark span:nth-child(2) { width: 15px; }
  .brand-mark span:nth-child(3) { width: 8px; }

  .brand-word {
    font-size: 16px;
  }

  .brand-network {
    display: none;
  }

  .primary-button,
  .ghost-button,
  .network-button {
    min-height: 44px;
  }

  /* Mobile website */

  .site-screen {
    min-height: 100dvh;
    overflow: visible;
    background:
      radial-gradient(circle at 78% 52%, rgba(45, 104, 130, 0.12), transparent 34%),
      linear-gradient(180deg, #080d15 0%, #070b12 74%);
  }

  .site-nav {
    position: sticky;
    top: 0;
    height: 64px;
    grid-template-columns: 1fr auto;
    padding: 0 16px;
    backdrop-filter: blur(20px);
  }

  .site-links,
  .site-actions .network-button {
    display: none;
  }

  .site-actions {
    justify-content: flex-end;
  }

  .site-actions .primary-button {
    min-height: 40px;
    padding: 0 13px;
  }

  .site-hero {
    width: auto;
    height: auto;
    min-height: 742px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 16px;
  }

  .hero-copy {
    padding: 48px 0 0;
  }

  .eyebrow {
    gap: 9px;
    font-size: 8px;
    letter-spacing: 0.14em;
  }

  .eyebrow-line {
    width: 24px;
  }

  .hero-copy h1 {
    margin: 23px 0 17px;
    font-size: 39px;
    line-height: 1.2;
    letter-spacing: -0.055em;
  }

  .hero-copy > p {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.78;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 8px;
    margin-top: 23px;
  }

  .hero-actions button {
    min-width: 0;
    padding: 0 12px;
    font-size: 11px;
  }

  .hero-footnotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 14px;
    margin-top: 18px;
    font-size: 9px;
  }

  .hero-footnotes span:last-child {
    grid-column: 1 / -1;
  }

  .hero-visual {
    height: 302px;
    flex: 0 0 302px;
    margin: 15px 0 0;
  }

  .visual-grid {
    width: 390px;
    height: 300px;
    right: -70px;
    top: -5px;
    background-size: 30px 30px;
  }

  .orbit {
    right: 45px;
    top: 4px;
    width: 270px;
    height: 270px;
  }

  .orbit-two {
    right: 78px;
    top: 37px;
    width: 204px;
    height: 204px;
  }

  .orbit-three {
    right: 112px;
    top: 72px;
    width: 136px;
    height: 136px;
  }

  .core-badge {
    right: 142px;
    top: 99px;
    width: 78px;
    height: 88px;
  }

  .core-f {
    font-size: 35px;
  }

  .core-badge small {
    margin-top: 6px;
    font-size: 5px;
  }

  .orbit-node {
    display: none;
  }

  .hero-ticket {
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 13px;
    border-radius: 11px;
  }

  .ticket-market {
    margin: 10px 0;
  }

  .ticket-metrics {
    margin-bottom: 8px;
  }

  .proof-band {
    width: auto;
    height: auto;
    margin: 18px 16px 28px;
    padding: 22px 18px;
  }

  .proof-band-head {
    align-items: flex-start;
  }

  .proof-band-head div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .proof-band-head p {
    display: none;
  }

  .evidence-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
  }

  .evidence-connector {
    display: none;
  }

  .evidence-card {
    min-height: 112px;
    padding: 13px;
    grid-template-columns: 34px 1fr;
    gap: 0 9px;
  }

  .evidence-icon {
    width: 34px;
    height: 34px;
  }

  /* Mobile DApp */

  .dapp-screen {
    min-height: 100dvh;
    display: block;
    padding-bottom: calc(148px + env(safe-area-inset-bottom));
    overflow: visible;
  }

  .app-sidebar {
    display: none;
  }

  .app-workspace {
    width: 100%;
  }

  .app-topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    height: 60px;
    gap: 7px;
    padding: 0 12px;
    backdrop-filter: blur(18px);
  }

  .mobile-app-brand {
    width: 88px;
    display: block;
  }

  .mobile-app-brand .brand-compact {
    height: 44px;
  }

  .mobile-app-brand .brand-word {
    font-size: 13px;
  }

  .market-switcher {
    flex: 1;
    min-width: 0;
    gap: 0;
  }

  .market-switcher button {
    min-width: 0;
    flex: 1;
    justify-content: center;
    padding: 0 4px;
  }

  .market-switcher .mini-logo,
  .market-switcher small {
    display: none;
  }

  .market-switcher b {
    font-size: 8px;
  }

  .topbar-actions {
    gap: 0;
  }

  .topbar-actions .icon-button {
    display: none;
  }

  .proof-shortcut {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .proof-shortcut span {
    font-size: 18px;
  }

  .proof-shortcut b {
    display: none;
  }

  .app-content {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 14px 14px 24px;
  }

  .market-title-row {
    position: relative;
    min-height: 90px;
    align-items: flex-start;
  }

  .breadcrumb {
    display: none;
  }

  .title-with-status {
    max-width: 225px;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    margin-top: 3px;
  }

  .title-with-status h1 {
    font-size: 17px;
    line-height: 1.35;
  }

  .market-title-row p {
    max-width: 215px;
    margin-top: 7px;
    font-size: 8px;
  }

  .countdown-card {
    position: absolute;
    right: 0;
    top: 2px;
    min-width: 112px;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 9px 10px;
    text-align: right;
  }

  .countdown-card strong {
    grid-row: auto;
    grid-column: auto;
    font-size: 15px;
  }

  .market-metrics-row {
    grid-template-columns: 1fr 1fr;
    margin-top: 6px;
  }

  .metric {
    min-height: 64px;
    padding: 10px 11px;
  }

  .metric:nth-child(2) {
    border-right: 0;
  }

  .metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .metric-value {
    font-size: 13px;
  }

  .metric-meta {
    font-size: 6px;
  }

  .trade-layout {
    display: block;
    margin-top: 10px;
  }

  .market-panel,
  .order-panel {
    width: 100%;
    height: auto;
    padding: 14px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .market-view-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .market-view-tabs button {
    min-height: 34px;
    flex: 1;
    white-space: nowrap;
  }

  .outcome-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 12px;
  }

  .outcome-card {
    min-height: 77px;
    padding: 10px;
  }

  .outcome-symbol {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 15px;
  }

  .number-strip-head {
    margin-top: 15px;
  }

  .number-strip-head > button {
    max-width: 112px;
    line-height: 1.4;
    text-align: right;
  }

  .number-strip {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }

  .number-strip button:nth-child(n + 6) {
    display: none;
  }

  .number-strip button {
    min-height: 49px;
  }

  .market-proof-row {
    min-height: 58px;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 13px;
    padding: 8px 10px;
  }

  .market-proof-steps {
    display: none;
  }

  .market-proof-copy {
    min-width: 0;
  }

  .market-proof-copy .hash-text {
    display: inline-block;
    max-width: 106px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .market-proof-row > button {
    min-height: 40px;
  }

  .order-panel {
    margin-top: 10px;
  }

  .order-head {
    flex-direction: row;
  }

  .lower-grid {
    display: block;
    margin-top: 10px;
  }

  .risk-card,
  .oracle-card {
    height: auto;
    min-height: 206px;
    padding: 14px;
  }

  .oracle-card {
    margin-top: 10px;
  }

  .risk-body {
    grid-template-columns: 94px 1fr;
    height: auto;
    min-height: 145px;
  }

  .mini-chart {
    display: none;
  }

  .oracle-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-trade-dock {
    position: fixed;
    z-index: 39;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--line-strong);
    background: rgba(11, 18, 28, 0.96);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(20px);
  }

  .mobile-trade-dock > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-trade-dock > div > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .mobile-trade-dock small {
    color: var(--muted);
    font-size: 7px;
  }

  .mobile-trade-dock b {
    overflow: hidden;
    color: var(--cyan-bright);
    font-family: var(--mono);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-trade-dock > button {
    min-width: 116px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 8px;
    background: var(--cyan);
    color: #071216;
    font-size: 10px;
    font-weight: 750;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 4px 10px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: rgba(8, 13, 21, 0.98);
    backdrop-filter: blur(20px);
  }

  .mobile-bottom-nav button {
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    color: #677a90;
    font-size: 7px;
  }

  .mobile-bottom-nav button.active {
    color: var(--cyan);
  }

  .mobile-bottom-nav .glyph {
    height: 27px;
  }

  .success-toast,
  .search-toast {
    left: 12px;
    right: 12px;
    bottom: calc(154px + env(safe-area-inset-bottom));
    min-width: 0;
    width: auto;
    grid-template-columns: 34px 1fr;
  }

  .success-toast .hash-text {
    display: none;
  }

  /* Mobile explorer */

  .explorer-screen {
    min-height: 100dvh;
    display: block;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .explorer-sidebar {
    display: none;
  }

  .explorer-workspace {
    width: 100%;
  }

  .explorer-topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    height: 108px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 44px 42px;
    gap: 6px 10px;
    padding: 8px 14px;
    backdrop-filter: blur(18px);
  }

  .mobile-explorer-brand {
    display: block;
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-explorer-brand .brand-compact {
    height: 42px;
  }

  .mobile-explorer-brand .brand-word {
    font-size: 14px;
  }

  .explorer-search {
    width: 100%;
    height: 40px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .explorer-search kbd {
    display: none;
  }

  .explorer-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .explorer-actions > button:first-child,
  .explorer-actions .network-button {
    display: none;
  }

  .explorer-actions .primary-button {
    min-height: 40px;
    padding: 0 12px;
  }

  .explorer-content {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 12px 14px 24px;
  }

  .explorer-title-row {
    min-height: 82px;
    align-items: flex-start;
    padding-top: 11px;
  }

  .market-identity {
    min-width: 0;
    align-items: flex-start;
    gap: 10px;
  }

  .market-identity .mini-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .market-identity > div > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .market-identity h1 {
    max-width: 270px;
    font-size: 16px;
    line-height: 1.35;
  }

  .market-identity p {
    max-width: 285px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .explorer-title-actions {
    display: none;
  }

  .verified-banner {
    min-height: 116px;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .verified-banner::after {
    right: -12px;
    top: 30px;
    font-size: 48px;
  }

  .verified-seal {
    width: 46px;
    height: 46px;
  }

  .verified-banner h2 {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.45;
  }

  .verified-banner p {
    font-size: 7px;
    line-height: 1.6;
  }

  .verified-meta {
    display: none;
  }

  .proof-check-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 9px;
  }

  .proof-check-card {
    min-height: 94px;
    padding: 10px;
  }

  .proof-check-index {
    font-size: 25px;
  }

  .proof-check-title {
    align-items: flex-start;
    gap: 7px;
  }

  .proof-check-title p {
    max-width: 105px;
    line-height: 1.45;
  }

  .proof-check-card > strong {
    margin-top: 9px;
    padding-top: 8px;
    font-size: 8px;
  }

  .explorer-tabs {
    height: 43px;
    gap: 21px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .explorer-tabs::-webkit-scrollbar {
    display: none;
  }

  .explorer-tabs button {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
  }

  .explorer-main-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 9px;
  }

  .explorer-right-stack {
    order: -1;
  }

  .outcome-proof-card {
    min-height: 230px;
  }

  .proof-detail-card,
  .oracle-proof-card,
  .reserve-proof-card {
    width: 100%;
  }

  .rule-hash-row {
    grid-template-columns: 31px minmax(0, 1fr) auto;
  }

  .rule-hash-row .hash-text {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timeline {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .timeline-step {
    min-width: 66px;
  }

  .timeline > i {
    min-width: 26px;
  }

  .rule-spec-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px 0;
  }

  .rule-spec-grid span:nth-child(2) {
    border-right: 0;
  }

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

  .transaction-card table {
    min-width: 560px;
  }
}

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

  button:active:not(:disabled) {
    transform: none;
  }

  .success-toast,
  .search-toast {
    transform: none;
    transition: opacity 120ms ease;
  }
}

/* Mobile website v3: native scroll story and thumb dock */

.mobile-story-progress,
.mobile-site-dock {
  display: none;
}

@media (max-width: 700px) {
  .site-screen .site-hero {
    height: calc(100svh - 64px);
    min-height: 780px;
  }

  .site-screen .hero-copy {
    padding-top: 44px;
  }

  .site-screen .hero-copy h1 {
    margin-top: 22px;
    margin-bottom: 16px;
    font-size: clamp(39px, 10.6vw, 46px);
    line-height: 1.07;
  }

  .site-screen .hero-copy > p {
    max-width: 96%;
    font-size: 11px;
    line-height: 1.72;
  }

  .site-screen .hero-actions {
    margin-top: 20px;
  }

  .site-screen .hero-footnotes {
    gap: 8px 12px;
    margin-top: 16px;
  }

  .hero-oracle-hud {
    bottom: 63px;
    padding: 12px 13px;
    border-radius: 10px;
  }

  .hud-price-row {
    margin-top: 12px;
  }

  .hud-price-row strong {
    font-size: 21px;
  }

  .hud-range {
    height: 18px;
    margin: 7px 0 10px;
  }

  .hud-range::before { top: 4px; }
  .hud-range::after { bottom: 3px; }
  .hud-range span { top: 9px; }
  .hud-range i { top: 5px; }

  .hud-meta small {
    font-size: 5px;
  }

  .hud-source-row {
    margin-top: 10px;
    padding-top: 8px;
  }

  .hud-source-row span {
    width: 22px;
    height: 22px;
  }

  .hero-quote-tape {
    bottom: 12px;
    display: flex;
    min-height: 34px;
  }

  .hero-quote-tape > span {
    min-width: 50%;
    flex: 0 0 50%;
    font-size: 7px;
  }

  .oracle-story {
    height: 320svh;
    min-height: 2200px;
  }

  .oracle-story-sticky {
    position: sticky;
    top: 64px;
    height: calc(100svh - 64px);
    min-height: 620px;
    overflow: hidden;
    padding: 26px 16px calc(18px + env(safe-area-inset-bottom));
  }

  .oracle-story-sticky::before {
    background-size: 38px 38px;
    mask-image: linear-gradient(180deg, black, black 78%, transparent);
  }

  .story-kicker {
    padding-bottom: 11px;
  }

  .mobile-story-progress {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
  }

  .mobile-story-progress i {
    height: 2px;
    overflow: hidden;
    background: rgba(212, 242, 226, 0.08);
  }

  .mobile-story-progress i span {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--oracle-acid);
    box-shadow: 0 0 10px rgba(228, 255, 143, 0.28);
    will-change: transform;
  }

  .story-layout {
    position: relative;
    height: calc(100% - 58px);
    display: block;
  }

  .story-copy {
    display: contents;
  }

  .story-copy h2 {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: 21px;
    margin: 0;
    max-width: 340px;
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.14;
  }

  .story-steps {
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    bottom: 0;
    height: 116px;
    margin: 0;
    background: linear-gradient(180deg, rgba(8, 13, 15, 0.1), #080d0f 24%);
  }

  .story-step {
    position: absolute;
    inset: 0;
    min-height: 0;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    padding: 18px 0 13px;
    border-top: 1px solid rgba(212, 242, 226, 0.12);
    border-bottom: 1px solid rgba(212, 242, 226, 0.08);
    opacity: 0;
    will-change: transform, opacity;
  }

  .story-step:first-child {
    opacity: 1;
  }

  .story-step h3 {
    color: #dce7e1;
    font-size: 13px;
  }

  .story-step p {
    max-width: 290px;
    margin-top: 7px;
    color: #7e9188;
    font-size: 9px;
    line-height: 1.55;
  }

  .story-machine {
    position: absolute;
    left: 0;
    right: 0;
    top: 105px;
    width: auto;
    height: 422px;
    margin: 0;
    transform: none;
  }

  .source-stack {
    left: 12px;
    right: 12px;
    top: 17px;
    width: auto;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .oracle-source {
    min-height: 43px;
    grid-template-columns: 24px 1fr;
    gap: 7px;
    padding: 6px 7px;
    background: #101817;
  }

  .oracle-source i {
    width: 24px;
    height: 24px;
  }

  .oracle-source b {
    font-size: 8px;
  }

  .consensus-core {
    left: 50%;
    top: 124px;
    width: 146px;
    height: 146px;
    transform: translateX(-50%);
  }

  .consensus-core > div {
    width: 106px;
    height: 106px;
  }

  .settlement-beam {
    left: 50%;
    top: 278px;
    width: 54px;
    transform: translateX(-50%) rotate(90deg);
  }

  .settlement-block {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 16px;
    width: 218px;
    min-height: 142px;
    padding: 16px;
    transform: translateX(-50%);
  }

  .settlement-block > span {
    margin-top: 20px;
  }

  .proof-seal {
    right: 7px;
    bottom: 7px;
  }

  .site-screen .proof-band {
    padding-top: 70px;
  }

  .mobile-site-dock {
    position: fixed;
    z-index: 70;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    min-height: 58px;
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    background: #111817;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(212, 242, 226, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: transform 220ms var(--ease-out), opacity 160ms ease;
  }

  .mobile-site-dock.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-site-dock button {
    min-height: 46px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 750;
    touch-action: manipulation;
  }

  .dock-secondary {
    background: rgba(212, 242, 226, 0.055);
    color: #bbcbc2;
  }

  .dock-secondary span {
    margin-right: 7px;
    color: var(--oracle-acid);
  }

  .dock-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: var(--oracle-acid);
    color: #111609;
  }

  .oracle-closing {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .oracle-story {
    height: auto;
    min-height: 0;
  }

  .oracle-story-sticky {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 76px 16px 92px;
  }

  .mobile-story-progress,
  .mobile-site-dock {
    display: none;
  }

  .story-layout {
    height: auto;
  }

  .story-copy {
    display: block;
  }

  .story-copy h2 {
    position: static;
    margin-top: 38px;
  }

  .story-steps {
    position: static;
    height: auto;
    margin-top: 26px;
    background: transparent;
  }

  .story-step {
    position: static;
    min-height: 78px;
    opacity: 1 !important;
    transform: none !important;
  }

  .story-machine {
    position: relative;
    top: auto;
    height: 520px;
    margin-top: 44px;
  }

  .source-stack {
    top: 24px;
  }

  .consensus-core {
    top: 171px;
  }

  .settlement-beam {
    top: 334px;
  }

  .settlement-block {
    bottom: 24px;
  }
}

/* Complete product suite */

.progress-amber { background: var(--amber); }
.progress-red { background: var(--red); }

.fairx-motion-root { min-height: 100vh; }

.marketing-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 12%, rgba(64, 132, 156, 0.1), transparent 27%),
    linear-gradient(180deg, #080d15 0%, #070b12 68%);
}

.marketing-nav {
  position: sticky;
  top: 0;
  grid-template-columns: 210px 1fr 270px;
}

.marketing-nav .site-links { gap: 18px; }
.marketing-nav .site-links button { font-size: 11px; }

.marketing-hero {
  width: min(1328px, calc(100% - 112px));
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(480px, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 68px;
  margin: 0 auto;
  padding: 58px 0 44px;
}

.marketing-hero-copy h1 {
  max-width: 690px;
  margin: 28px 0 22px;
  font-size: clamp(46px, 4.2vw, 66px);
  line-height: 1.13;
  font-weight: 650;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.marketing-hero-copy > p {
  max-width: 620px;
  margin: 0;
  color: #9aabc0;
  font-size: 15px;
  line-height: 1.9;
  text-wrap: pretty;
}

.marketing-visual { min-width: 0; }

.marketing-sections {
  width: min(1328px, calc(100% - 112px));
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.marketing-section {
  padding: 86px 0;
  border-bottom: 1px solid var(--line);
}

.section-heading {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: start;
  gap: 20px;
  max-width: 820px;
  margin-bottom: 36px;
}

.section-heading > span {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.section-heading small {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.17em;
}

.section-heading h2 {
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 620;
  letter-spacing: -0.035em;
}

.section-heading p,
.section-copy {
  margin: 13px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.8;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.principle-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.principle-card {
  min-height: 218px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}

.principle-card > span {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 9px;
}

.principle-card h3 {
  margin: 34px 0 9px;
  font-size: 18px;
  font-weight: 630;
}

.principle-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.principle-card strong {
  margin-top: auto;
  padding-top: 22px;
  color: var(--cyan-bright);
  font-family: var(--mono);
  font-size: 12px;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: 90px;
}

.split-section .section-heading { margin-bottom: 0; }

.formula-card,
.order-preview-card,
.boundary-card,
.endpoint-card {
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(14, 22, 34, 0.88);
  box-shadow: var(--shadow);
}

.formula-card { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px 26px; }
.formula-card small { grid-column: 1 / -1; color: var(--cyan); font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; }
.formula-card span { color: var(--muted); font-size: 11px; }
.formula-card strong { color: var(--text); font-family: var(--mono); font-size: 13px; }
.formula-card i { grid-column: 1 / -1; height: 1px; background: var(--line); }

.fairness-core-card,
.stock-quote-visual,
.fair28-visual,
.bridge-card,
.developer-console {
  position: relative;
  width: min(100%, 570px);
  margin-left: auto;
  padding: 30px;
  border: 1px solid rgba(113, 229, 238, 0.16);
  border-radius: 14px;
  background: rgba(11, 18, 28, 0.92);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

.fairness-core-card > .proof-diamond { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid rgba(113, 229, 238, 0.3); border-radius: 12px; color: var(--cyan); font-size: 23px; }
.fairness-core-card > small { color: var(--cyan); font-family: var(--mono); font-size: 8px; letter-spacing: 0.17em; }
.fairness-core-card h2 { max-width: 380px; margin: 10px 0 30px; font-size: 26px; line-height: 1.35; }
.fairness-core-card > div { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); }
.fairness-core-card > div strong { color: var(--text); font-family: var(--mono); }
.fairness-core-card .progress-track { margin-top: 22px; }
.fairness-core-card > p { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; color: var(--green); font-family: var(--mono); font-size: 9px; }

.risk-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.risk-ladder > div { padding: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.risk-ladder > div > span { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.risk-ladder b { font-family: var(--mono); font-size: 15px; }
.risk-ladder small { color: var(--muted); font-size: 9px; }

.audit-strip { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); }
.audit-strip > span { min-height: 98px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border-right: 1px solid var(--line); color: var(--text-soft); font-size: 11px; }
.audit-strip > span:last-child { border-right: 0; }
.audit-strip i { color: var(--faint); font-family: var(--mono); font-size: 7px; font-style: normal; }
.audit-strip b { color: var(--green); font-size: 10px; }

.stock-quote-visual > div:first-child,
.fair28-visual > div:first-child,
.bridge-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stock-quote-visual > div:first-child > span { flex: 1; }
.stock-quote-visual h2 { margin: 6px 0 0; font-family: var(--mono); font-size: 34px; }
.stock-quote-visual small,
.fair28-visual small { color: var(--muted); font-size: 8px; }
.stock-quote-visual .mini-chart { height: 188px; margin: 24px 0; }
.stock-quote-visual > p { display: flex; justify-content: space-between; margin: 0; color: var(--muted); font-size: 9px; }

.order-preview-card > small { color: var(--cyan); font-family: var(--mono); font-size: 8px; }
.order-preview-card > div { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.order-preview-card > div:last-child { border-bottom: 0; }
.order-preview-card b,
.order-preview-card strong { color: var(--text); font-family: var(--mono); }
.order-preview-card strong { color: var(--cyan-bright); }

.metric-showcase { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.metric-showcase .metric { min-height: 112px; }

.fair28-visual h2 { margin: 6px 0 0; font-family: var(--mono); font-size: 24px; }
.fair28-number-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin: 34px 0; }
.fair28-number-row span { height: 58px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-family: var(--mono); }
.fair28-number-row span.active { border-color: rgba(113,229,238,.48); background: rgba(113,229,238,.08); color: var(--cyan); box-shadow: 0 0 28px rgba(113,229,238,.08); }
.fair28-visual > p { display: flex; align-items: center; justify-content: space-between; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.fair28-visual > p strong { color: var(--amber); font-family: var(--mono); font-size: 20px; }

.outcome-risk-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; }
.outcome-risk-grid span { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.outcome-risk-grid b { font-family: var(--mono); font-size: 10px; }
.outcome-risk-grid small { color: var(--muted); font-family: var(--mono); font-size: 6px; }
.outcome-risk-grid span.worst { border-color: rgba(234,191,122,.38); background: rgba(234,191,122,.08); color: var(--amber); }

.process-rail { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr; align-items: stretch; }
.process-rail article { min-height: 170px; padding: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.process-rail article > span { color: var(--cyan); font-family: var(--mono); font-size: 8px; }
.process-rail h3 { margin: 29px 0 8px; font-size: 15px; }
.process-rail p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.process-rail > i { display: grid; place-items: center; color: var(--cyan); font-style: normal; }

.chain-stack { width: min(100%, 560px); margin-left: auto; }
.chain-stack > div { min-height: 76px; display: grid; grid-template-columns: 82px 1fr; align-items: center; padding: 0 22px; border: 1px solid var(--line); background: rgba(11,18,28,.9); }
.chain-stack small { color: var(--cyan); font-family: var(--mono); font-size: 8px; }
.chain-stack strong { font-size: 13px; }
.chain-stack > span { height: 28px; display: grid; place-items: center; color: var(--cyan); }

.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.module-grid article { min-height: 116px; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.module-grid article > span { color: var(--cyan); font-family: var(--mono); font-size: 8px; }
.module-grid h3 { margin: 0 0 6px; font-size: 14px; }
.module-grid p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.module-grid article > b { color: var(--faint); }

.boundary-card { display: flex; flex-direction: column; gap: 0; }
.boundary-card > small { margin-bottom: 10px; color: var(--cyan); font-family: var(--mono); font-size: 8px; }
.boundary-card > span { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.boundary-card > span:last-child { border-bottom: 0; }
.boundary-card i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(91,211,165,.1); color: var(--green); font-style: normal; font-size: 9px; }

.oracle-network-visual { position: relative; width: 520px; height: 400px; margin-left: auto; }
.oracle-network-visual::before,
.oracle-network-visual::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(113,229,238,.14); border-radius: 50%; transform: translate(-50%,-50%); }
.oracle-network-visual::before { width: 300px; height: 300px; }
.oracle-network-visual::after { width: 210px; height: 210px; border-style: dashed; }
.oracle-center { position: absolute; z-index: 2; left: 50%; top: 50%; width: 108px; height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%,-50%); border: 1px solid rgba(113,229,238,.38); border-radius: 50%; background: #0b1a22; box-shadow: 0 0 70px rgba(113,229,238,.1); }
.oracle-center span { color: var(--cyan); font-family: var(--mono); font-size: 36px; }
.oracle-center small { color: var(--muted); font-size: 7px; }
.oracle-satellite { position: absolute; z-index: 3; min-width: 150px; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #0d1622; }
.oracle-satellite > span { display: flex; flex-direction: column; gap: 3px; }
.oracle-satellite b { font-size: 10px; }
.oracle-satellite small { color: var(--green); font-size: 7px; }
.oracle-satellite.waiting { opacity: .55; }
.satellite-1 { left: 16px; top: 34px; }.satellite-2 { right: 0; top: 64px; }.satellite-3 { left: 0; bottom: 74px; }.satellite-4 { right: 10px; bottom: 38px; }.satellite-5 { left: 50%; bottom: 0; transform: translateX(-50%); }

.oracle-ledger { border: 1px solid var(--line); }
.oracle-ledger > div { min-height: 58px; display: grid; grid-template-columns: 1.3fr .7fr 1fr 1.2fr .7fr; align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.oracle-ledger > div:last-child { border-bottom: 0; }
.oracle-ledger-head { min-height: 38px !important; color: var(--muted); font-size: 8px; }
.oracle-ledger > div > span:first-child { display: flex; align-items: center; gap: 9px; }
.oracle-ledger strong { color: var(--cyan); font-family: var(--mono); }
.oracle-ledger b { color: var(--green); font-size: 9px; }

.bridge-card { display: flex; flex-direction: column; gap: 14px; }
.bridge-card-head h2 { margin: 5px 0 0; font-size: 20px; }
.bridge-card-head small { color: var(--cyan); font-family: var(--mono); font-size: 7px; }
.bridge-card > label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 8px; }
.bridge-card > label > button,
.bridge-amount { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); color: var(--text); text-align: left; }
.bridge-card label button b { color: var(--muted); }
.bridge-arrow { width: 28px; height: 28px; display: grid; place-items: center; align-self: center; margin: -3px 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--cyan); }
.bridge-amount input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--mono); font-size: 19px; }
.bridge-amount span { color: var(--text-soft); font-size: 10px; }
.bridge-summary { display: flex; justify-content: space-between; padding: 13px 0; color: var(--muted); font-size: 8px; }
.bridge-summary span { display: flex; flex-direction: column; gap: 4px; }
.bridge-summary b { color: var(--text-soft); }

.isolation-diagram { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; }
.isolation-diagram article { min-height: 160px; padding: 28px; border: 1px solid var(--line); }
.isolation-diagram article small { color: var(--cyan); font-family: var(--mono); font-size: 8px; }
.isolation-diagram h3 { margin: 30px 0 8px; }
.isolation-diagram p { margin: 0; color: var(--muted); font-size: 10px; }
.isolation-diagram > span { position: relative; text-align: center; color: var(--green); font-size: 9px; }
.isolation-diagram > span::before,
.isolation-diagram > span::after { content: ""; position: absolute; top: 50%; width: 34px; height: 1px; background: var(--line-strong); }
.isolation-diagram > span::before { left: 0; }.isolation-diagram > span::after { right: 0; }

.developer-console { padding: 0; overflow: hidden; }
.developer-console > div { height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.developer-console > div i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.developer-console > div i:first-child { background: var(--red); }.developer-console > div i:nth-child(2) { background: var(--amber); }.developer-console > div i:nth-child(3) { background: var(--green); }
.developer-console > div span { margin-left: 7px; color: var(--muted); font-family: var(--mono); font-size: 8px; }
.developer-console pre { min-height: 240px; margin: 0; padding: 28px; color: #b9e6dd; font-family: var(--mono); font-size: 11px; line-height: 2; white-space: pre-wrap; }
.developer-console footer { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.developer-console footer span { display: flex; align-items: center; gap: 8px; }
.developer-console footer b { color: var(--green); }

.endpoint-card > div { min-height: 54px; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.endpoint-card > div:last-child { border-bottom: 0; }
.endpoint-card > div > span { color: var(--muted); font-size: 9px; }
.endpoint-card .hash-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.marketing-footer {
  width: min(1328px, calc(100% - 112px));
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.marketing-footer > div { display: flex; align-items: center; gap: 24px; }
.marketing-footer p { margin: 0; color: var(--muted); font-size: 10px; }
.marketing-footer > button { background: transparent; color: var(--cyan); font-size: 11px; }
.marketing-mobile-nav { display: none; }

/* Application subpages */

.workspace-page-screen { min-height: 100vh; }
.workspace-page-topbar { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(9,14,23,.94); }
.workspace-page-topbar > div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.workspace-page-topbar small { color: var(--cyan); font-family: var(--mono); font-size: 7px; letter-spacing: .14em; }
.workspace-page-topbar h1 { margin: 0; font-size: 20px; font-weight: 660; }
.workspace-page-topbar p { margin: 0; color: var(--muted); font-size: 9px; }
.workspace-page-actions { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; }
.wallet-compact { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); color: var(--text-soft); font-family: var(--mono); font-size: 8px; }
.wallet-compact span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(113,229,238,.08); color: var(--cyan); }
.workspace-page-content { height: calc(100vh - 86px); min-height: 938px; overflow: auto; padding: 22px 28px 32px; background: #080d15; }

.dashboard-metrics,
.stock-market-facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.012); }
.dashboard-metrics .metric { min-height: 86px; }

.dashboard-main-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(310px,.72fr); gap: 16px; margin-top: 16px; }
.dashboard-market-stack,
.dashboard-side-stack { display: flex; flex-direction: column; gap: 14px; }
.workspace-section-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-section-head > span { display: flex; flex-direction: column; gap: 4px; }
.workspace-section-head small { color: var(--muted); font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }
.workspace-section-head h2 { margin: 0; font-size: 14px; }
.workspace-section-head > button,
.workspace-history-card > .workspace-section-head button { background: transparent; color: #7790aa; font-size: 8px; }

.market-launch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.market-launch-grid > button { min-height: 150px; display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); text-align: left; }
.market-launch-grid > button > span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }
.market-launch-grid small { color: var(--muted); font-size: 7px; }
.market-launch-grid h3 { margin: 0; font-size: 16px; }
.market-launch-grid p { margin: 0; color: var(--muted); font-size: 8px; }
.market-launch-grid > button > strong { grid-column: 2; align-self: end; color: var(--cyan); font-size: 9px; }

.workspace-table { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.workspace-table > div { min-height: 48px; display: grid; grid-template-columns: 1.5fr .75fr .9fr .7fr .8fr; align-items: center; gap: 12px; padding: 0 15px; border-bottom: 1px solid var(--line); font-size: 9px; }
.workspace-table > div:last-child { border-bottom: 0; }
.workspace-table-head { min-height: 34px !important; color: var(--muted); font-size: 7px !important; }
.state-cell { color: var(--green); }

.network-health-card,
.claim-card,
.contracts-card { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.network-health-card > div:not(.workspace-section-head),
.contracts-card > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.network-health-card > div:last-child,
.contracts-card > div:last-child { border-bottom: 0; }
.network-health-card strong { color: var(--text-soft); font-family: var(--mono); font-size: 9px; }
.claim-card { background: linear-gradient(145deg, rgba(113,229,238,.08), rgba(13,20,31,.8)); }
.claim-card .proof-diamond { color: var(--cyan); font-size: 23px; }
.claim-card > small,
.contracts-card > small { color: var(--cyan); font-family: var(--mono); font-size: 7px; }
.claim-card h2 { margin: 12px 0 5px; color: var(--cyan-bright); font-family: var(--mono); font-size: 23px; }
.claim-card p { margin: 0 0 16px; color: var(--muted); font-size: 8px; }
.claim-card button { width: 100%; min-height: 36px; border-radius: 7px; background: var(--cyan); color: #071216; font-size: 9px; font-weight: 700; }
.contracts-card .hash-text { color: var(--text-soft); }

.stock-trade-metrics { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); gap: 14px; }
.stock-price-card { min-height: 188px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.stock-price-card > div:first-child { display: flex; align-items: center; gap: 12px; }
.stock-price-card > div:first-child > span { flex: 1; }
.stock-price-card small { color: var(--muted); font-size: 7px; }
.stock-price-card h2 { margin: 4px 0 0; font-family: var(--mono); font-size: 23px; }
.price-positive { float: right; margin-top: -34px; color: var(--green); font-family: var(--mono); font-size: 11px; }
.stock-price-card .mini-chart { height: 86px; margin-top: 12px; }
.stock-market-facts { align-self: stretch; }
.stock-market-facts .metric { min-height: 188px; }

.stock-order-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(310px,.65fr); gap: 14px; margin-top: 14px; }
.direction-panel,
.stock-order-panel { min-height: 394px; padding: 18px; }
.direction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.direction-grid > button { min-height: 236px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.015); text-align: left; }
.direction-grid > button > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--cyan); font-size: 18px; }
.direction-grid > button > small { margin-top: 20px; color: var(--muted); font-size: 8px; }
.direction-grid h3 { margin: 8px 0 0; font-size: 13px; }
.direction-grid strong { margin-top: auto; color: var(--cyan-bright); font-family: var(--mono); font-size: 27px; }
.direction-grid p { margin: 7px 0 0; color: var(--muted); font-size: 8px; }
.direction-grid > button.short > span { color: var(--violet); }
.direction-grid > button.selected { border-color: rgba(113,229,238,.4); background: rgba(113,229,238,.06); }
.direction-grid > button.short.selected { border-color: rgba(154,139,255,.4); background: rgba(154,139,255,.055); }
.stock-proof-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 7px; }
.stock-proof-strip span { display: flex; align-items: center; gap: 6px; }
.stock-proof-strip i { color: var(--green); font-style: normal; }
.stock-order-panel > label,
.vault-control-card > label { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 8px; color: var(--text-soft); font-size: 8px; }
.stock-order-panel > label small,
.vault-control-card > label small { color: var(--muted); }
.stock-order-panel .order-button { width: 100%; }
.stock-order-panel .workspace-section-head > strong { color: var(--cyan); font-family: var(--mono); font-size: 21px; }
.stock-risk-footer { margin-top: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.stock-risk-footer > div { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 12px; }
.stock-risk-footer > div span { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-left: 15px; }
.stock-risk-footer > div span:first-child { padding-left: 0; }
.stock-risk-footer > div span:last-child { border-right: 0; }
.stock-risk-footer small { color: var(--muted); font-size: 7px; }
.stock-risk-footer b { font-family: var(--mono); font-size: 10px; }

.vault-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); gap: 14px; margin-top: 14px; }
.vault-control-card,
.vault-settings-card { min-height: 352px; padding: 18px; }
.segmented-control { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 14px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; }
.segmented-control button { min-height: 34px; border-radius: 6px; background: transparent; color: var(--muted); font-size: 8px; }
.segmented-control button.active { background: var(--panel-bright); color: var(--text); }
.vault-action-note { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; margin-top: 14px; padding: 12px; border: 1px solid rgba(113,229,238,.12); border-radius: 8px; background: rgba(113,229,238,.035); }
.vault-action-note > span { color: var(--cyan); font-size: 18px; }
.vault-action-note p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.65; }
.vault-control-card .order-button { width: 100%; }
.vault-settings-card > div:not(.workspace-section-head):not(.vault-utilization) { min-height: 50px; display: grid; grid-template-columns: 1fr auto 45px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.vault-settings-card strong { color: var(--text-soft); font-family: var(--mono); font-size: 9px; }
.vault-settings-card > div > button { background: transparent; color: var(--cyan); font-size: 7px; }
.vault-utilization { margin-top: 18px; }
.vault-utilization > span { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 8px; }
.vault-utilization b { color: var(--cyan); }
.workspace-history-card { margin-top: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }

.risk-page-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(310px,.65fr); gap: 14px; margin-top: 14px; }
.risk-map-card,
.threshold-card { min-height: 398px; padding: 18px; }
.risk-legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 7px; }
.risk-legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--cyan); }
.risk-result-chart { height: 260px; display: grid; grid-template-columns: repeat(28,1fr); align-items: end; gap: 4px; margin-top: 22px; padding-top: 16px; border-bottom: 1px solid var(--line); background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px); background-size: 100% 25%; }
.risk-result-chart > div { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.risk-result-chart > div > span { width: 100%; max-width: 18px; min-height: 8px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,var(--cyan),rgba(113,229,238,.18)); }
.risk-result-chart > div.worst > span { background: linear-gradient(180deg,var(--amber),rgba(234,191,122,.2)); }
.risk-result-chart b { font-family: var(--mono); font-size: 6px; }
.risk-result-chart small { color: var(--muted); font-family: var(--mono); font-size: 5px; }
.risk-map-card > p { margin: 15px 0 0; color: var(--muted); font-size: 8px; }
.threshold-row { padding: 15px 0; border-bottom: 1px solid var(--line); }
.threshold-row > span { display: flex; justify-content: space-between; margin-bottom: 8px; }
.threshold-row b { font-family: var(--mono); font-size: 9px; }
.threshold-row small { color: var(--muted); font-size: 7px; }
.threshold-current { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 16px; padding: 13px; border: 1px solid rgba(113,229,238,.17); border-radius: 8px; background: rgba(113,229,238,.05); }
.threshold-current span { grid-row: 1 / 3; align-self: center; color: var(--cyan); font-size: 8px; }
.threshold-current strong { color: var(--cyan-bright); font-family: var(--mono); }
.threshold-current small { color: var(--muted); font-size: 7px; }
.risk-event-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
.risk-event-list > div { min-height: 88px; display: grid; grid-template-columns: 24px 1fr; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.risk-event-list > div > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(91,211,165,.1); color: var(--green); }
.risk-event-list > div.warn > span { background: rgba(234,191,122,.1); color: var(--amber); }
.risk-event-list > div.stop > span { background: rgba(238,116,131,.1); color: var(--red); }
.risk-event-list > div > div { display: flex; flex-direction: column; gap: 4px; }
.risk-event-list b { font-size: 8px; }
.risk-event-list small { color: var(--muted); font-size: 6px; line-height: 1.5; }
.risk-event-list time { grid-column: 2; color: var(--faint); font-size: 6px; }

.portfolio-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.portfolio-summary article { min-height: 120px; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.portfolio-summary small { color: var(--muted); font-size: 8px; }
.portfolio-summary h2 { margin: 17px 0 6px; font-family: var(--mono); font-size: 17px; }
.portfolio-summary span { color: var(--muted); font-size: 7px; }
.portfolio-summary button { float: right; margin-top: -20px; background: transparent; color: var(--cyan); font-size: 8px; }
.positive { color: var(--green) !important; }
.cyan-text { color: var(--cyan-bright); }
.portfolio-card { margin-top: 14px; padding: 18px; }
.portfolio-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.portfolio-tabs button { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 13px; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 9px; }
.portfolio-tabs button span { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.05); font-size: 7px; }
.portfolio-tabs button.active { border-bottom-color: var(--cyan); color: var(--text); }
.portfolio-table > div { min-height: 58px; display: grid; grid-template-columns: 1.45fr .7fr .8fr .55fr .85fr .75fr 55px; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 8px; }
.portfolio-table-head { min-height: 36px !important; color: var(--muted); font-size: 7px !important; }
.portfolio-table > div > button { min-height: 28px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.02); color: var(--cyan); font-size: 7px; }
.earnings-proof { min-height: 100px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; margin-top: 14px; padding: 18px; }
.earnings-proof > .proof-diamond { color: var(--cyan); font-size: 24px; }
.earnings-proof small { color: var(--cyan); font-family: var(--mono); font-size: 7px; }
.earnings-proof h2 { margin: 5px 0; font-size: 13px; }
.earnings-proof p { margin: 0; color: var(--muted); font-size: 8px; }
.earnings-proof button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--cyan); font-size: 8px; }

/* Explorer home */

.explorer-home-content { height: calc(100vh - 66px); min-height: 958px; overflow: auto; padding: 40px 34px 32px; }
.explorer-home-hero { min-height: 240px; display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 50px; border-bottom: 1px solid var(--line); }
.explorer-home-hero h1 { margin: 20px 0 14px; font-size: 38px; line-height: 1.2; letter-spacing: -.045em; }
.explorer-home-hero h1 span { color: var(--cyan-bright); }
.explorer-home-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.latest-block { padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.latest-block > small { color: var(--cyan); font-family: var(--mono); font-size: 7px; }
.latest-block h2 { margin: 12px 0 8px; font-family: var(--mono); font-size: 25px; }
.latest-block > span { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 8px; }
.latest-block > div { display: flex; gap: 28px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.latest-block > div span { display: flex; flex-direction: column; gap: 4px; }
.latest-block > div b { color: var(--text-soft); }
.explorer-home-metrics { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 10px; }
.explorer-home-metrics .metric { min-height: 76px; }
.explorer-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.explorer-list-card,
.verified-markets { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.explorer-list-card > div:not(.workspace-section-head) { min-height: 57px; display: grid; grid-template-columns: 30px 1.1fr .75fr 1fr; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.explorer-list-card > div:last-child { border-bottom: 0; }
.block-cube,
.tx-glyph { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--cyan); font-size: 10px; }
.explorer-list-card > div > span:nth-child(2),
.explorer-list-card > div > span:nth-child(3) { display: flex; flex-direction: column; gap: 3px; }
.explorer-list-card b,
.explorer-list-card strong { font-size: 8px; }
.explorer-list-card small { color: var(--muted); font-size: 6px; }
.verified-markets { margin-top: 14px; }
.verified-markets > button { width: 100%; min-height: 68px; display: grid; grid-template-columns: 36px 1fr auto 90px; align-items: center; gap: 12px; border-top: 1px solid var(--line); background: transparent; text-align: left; }
.verified-markets > button > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.verified-markets > button b { font-size: 9px; }
.verified-markets > button small { color: var(--muted); font-size: 7px; }
.verified-markets > button > strong { color: var(--cyan); font-size: 8px; text-align: right; }

@media (hover: hover) and (pointer: fine) {
  .principle-card:hover,
  .module-grid article:hover,
  .market-launch-grid > button:hover,
  .verified-markets > button:hover {
    background: rgba(113,229,238,.035);
  }

  .direction-grid > button:hover,
  .portfolio-table > div > button:hover {
    border-color: rgba(113,229,238,.32);
  }
}

@media (max-width: 1280px) {
  .marketing-nav { grid-template-columns: 180px 1fr 250px; padding: 0 28px; }
  .marketing-nav .site-links { gap: 12px; }
  .marketing-nav .site-links button { font-size: 10px; }
  .marketing-hero,
  .marketing-sections,
  .marketing-footer { width: calc(100% - 68px); }
  .marketing-hero { grid-template-columns: .92fr 1.08fr; gap: 42px; }
  .workspace-page-content { padding-left: 18px; padding-right: 18px; }
  .risk-result-chart { gap: 2px; }
}

@media (max-width: 700px) {
  .site-screen { overflow-x: clip; }
  .site-screen .visual-grid { width: 300px; right: -25px; }
  .marketing-screen { padding-bottom: 72px; }
  .marketing-nav { position: sticky; grid-template-columns: 1fr auto; padding: 0 16px; }
  .marketing-nav .site-links,
  .marketing-nav .network-button { display: none; }
  .marketing-hero { width: auto; min-height: 0; display: flex; flex-direction: column; gap: 34px; margin: 0 16px; padding: 48px 0 38px; }
  .marketing-hero-copy h1 { margin: 21px 0 16px; font-size: 39px; line-height: 1.16; }
  .marketing-hero-copy > p { font-size: 12px; line-height: 1.8; }
  .marketing-visual { width: 100%; }
  .fairness-core-card,
  .stock-quote-visual,
  .fair28-visual,
  .bridge-card,
  .developer-console { width: 100%; padding: 20px; }
  .developer-console { padding: 0; }
  .marketing-sections { width: auto; margin: 0 16px; }
  .marketing-section { padding: 54px 0; }
  .section-heading { grid-template-columns: 30px 1fr; gap: 12px; margin-bottom: 24px; }
  .section-heading h2 { font-size: 25px; }
  .principle-grid,
  .principle-grid.columns-2 { grid-template-columns: 1fr; }
  .principle-card { min-height: 170px; padding: 20px; }
  .principle-card h3 { margin-top: 24px; }
  .split-section { grid-template-columns: 1fr; gap: 28px; }
  .formula-card { grid-template-columns: 1fr; }
  .formula-card small,
  .formula-card i { grid-column: 1; }
  .risk-ladder { grid-template-columns: 1fr 1fr; }
  .audit-strip { grid-template-columns: 1fr 1fr; }
  .audit-strip > span { border-bottom: 1px solid var(--line); }
  .metric-showcase { grid-template-columns: 1fr 1fr; }
  .metric-showcase .metric:nth-child(2) { border-right: 0; }
  .fair28-number-row { gap: 4px; }
  .fair28-number-row span { height: 48px; font-size: 11px; }
  .outcome-risk-grid { grid-template-columns: repeat(7,1fr); gap: 4px; }
  .process-rail { grid-template-columns: 1fr; gap: 8px; }
  .process-rail > i { height: 24px; transform: rotate(90deg); }
  .process-rail article { min-height: 145px; }
  .module-grid { grid-template-columns: 1fr; }
  .oracle-network-visual { width: 100%; height: 360px; }
  .oracle-satellite { min-width: 128px; }
  .oracle-satellite .mini-logo { width: 28px; height: 28px; flex-basis: 28px; }
  .satellite-1 { left: 0; }.satellite-2 { right: 0; }.satellite-3 { left: 0; }.satellite-4 { right: 0; }
  .oracle-ledger { overflow-x: auto; }
  .oracle-ledger > div { min-width: 670px; }
  .isolation-diagram { grid-template-columns: 1fr; gap: 10px; }
  .isolation-diagram > span { min-height: 40px; display: grid; place-items: center; }
  .isolation-diagram > span::before,
  .isolation-diagram > span::after { width: 82px; }
  .endpoint-card { padding: 18px; }
  .endpoint-card > div { grid-template-columns: 72px minmax(0,1fr) auto; }
  .marketing-footer { width: auto; min-height: 170px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 22px; margin: 0 16px; }
  .marketing-footer > div { align-items: flex-start; flex-direction: column; gap: 10px; }
  .marketing-mobile-nav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: calc(66px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4,1fr); padding: 5px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(8,13,21,.96); backdrop-filter: blur(18px); }
  .marketing-mobile-nav button { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; color: var(--muted); font-size: 8px; }
  .marketing-mobile-nav button.active { color: var(--cyan); }
  .marketing-mobile-nav .glyph { height: 24px; }

  .workspace-page-screen { display: block; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .workspace-page-screen .app-sidebar { display: none; }
  .workspace-page-screen .app-workspace { width: 100%; }
  .workspace-page-topbar { min-height: 116px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 16px 14px; }
  .workspace-page-topbar .mobile-app-brand { display: block; grid-column: 1 / -1; height: 44px; }
  .workspace-page-topbar .brand-compact { height: 44px; }
  .workspace-page-topbar > div:nth-child(2) { min-width: 0; }
  .workspace-page-topbar h1 { font-size: 17px; }
  .workspace-page-topbar p { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-page-actions .icon-button,
  .workspace-page-actions .wallet-compact,
  .workspace-page-actions .proof-shortcut { display: none; }
  .workspace-page-content { height: auto; min-height: 0; overflow: visible; padding: 14px 12px 26px; }
  .dashboard-metrics,
  .stock-market-facts { grid-template-columns: 1fr 1fr; }
  .dashboard-metrics .metric,
  .stock-market-facts .metric { min-height: 82px; }
  .dashboard-main-grid,
  .stock-trade-metrics,
  .stock-order-layout,
  .vault-layout,
  .risk-page-grid { grid-template-columns: 1fr; }
  .dashboard-main-grid > *,
  .dashboard-market-stack,
  .dashboard-side-stack,
  .risk-page-grid > *,
  .risk-map-card,
  .threshold-card { min-width: 0; }
  .market-launch-grid { grid-template-columns: 1fr; }
  .market-launch-grid > button { min-height: 130px; }
  .workspace-table { overflow-x: auto; }
  .workspace-table > div { min-width: 580px; }
  .dashboard-side-stack { display: grid; grid-template-columns: 1fr; }
  .stock-price-card { min-height: 178px; }
  .stock-market-facts .metric { min-height: 90px; }
  .direction-grid { grid-template-columns: 1fr 1fr; }
  .direction-grid > button { min-height: 220px; padding: 16px; }
  .stock-proof-strip { align-items: flex-start; flex-direction: column; }
  .stock-order-panel { min-height: 0; }
  .stock-risk-footer > div { grid-template-columns: 1fr 1fr; gap: 13px 0; }
  .stock-risk-footer > div span:nth-child(2) { border-right: 0; }
  .segmented-control button { min-height: 44px; }
  .risk-result-chart { width: 100%; max-width: 100%; overflow-x: auto; grid-template-columns: repeat(28,18px); }
  .risk-event-list { grid-template-columns: 1fr 1fr; }
  .portfolio-summary { grid-template-columns: 1fr 1fr; }
  .portfolio-card { overflow-x: auto; }
  .portfolio-tabs { min-width: 360px; }
  .portfolio-table { min-width: 720px; }
  .earnings-proof { grid-template-columns: 38px 1fr; }
  .earnings-proof > button { grid-column: 1 / -1; min-height: 44px; }

  .explorer-home-screen { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .explorer-home-content { height: auto; min-height: 0; overflow: visible; padding: 30px 14px 26px; }
  .explorer-home-hero { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding-bottom: 34px; }
  .explorer-home-hero h1 { font-size: 32px; }
  .explorer-home-metrics { grid-template-columns: 1fr 1fr; }
  .explorer-home-grid { grid-template-columns: 1fr; }
  .explorer-list-card { overflow-x: auto; }
  .explorer-list-card > div:not(.workspace-section-head) { min-width: 520px; }
  .verified-markets > button { grid-template-columns: 34px 1fr auto; padding: 12px 0; }
  .verified-markets > button > strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-screen *,
  .workspace-page-screen *,
  .explorer-home-screen * { scroll-behavior: auto !important; }
}

/* Website v2: real-world oracle field */

.site-screen {
  --oracle-acid: #e4ff8f;
  --oracle-mint: #bce9d3;
  --oracle-ink: #060a0c;
  --oracle-surface: #0b1112;
  min-height: 100vh;
  overflow: clip;
  background: var(--oracle-ink);
}

.site-screen::before {
  display: none;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--oracle-acid);
  color: #101508;
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-screen .site-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 76px;
  grid-template-columns: minmax(210px, 0.8fr) minmax(520px, 1.5fr) minmax(270px, 0.9fr);
  padding: 0 max(38px, calc((100vw - 1440px) / 2));
  border-bottom-color: rgba(212, 242, 226, 0.08);
  background: rgba(6, 10, 12, 0.88);
  box-shadow: 0 1px rgba(255, 255, 255, 0.018);
  backdrop-filter: blur(14px);
}

.site-screen .brand-mark span {
  background: var(--oracle-acid);
  box-shadow: 0 0 18px rgba(228, 255, 143, 0.2);
}

.site-screen .site-nav .brand {
  min-height: 40px;
}

.site-screen .site-links {
  gap: clamp(16px, 1.8vw, 28px);
}

.site-screen .site-links button {
  color: #8fa39a;
}

.site-screen .network-button {
  border-color: rgba(212, 242, 226, 0.12);
  background: rgba(212, 242, 226, 0.025);
}

.site-screen .site-actions > .primary-button {
  background: var(--oracle-acid);
  color: #101508;
  box-shadow: 0 10px 28px rgba(198, 229, 101, 0.08);
}

.site-screen .site-hero {
  position: relative;
  width: 100%;
  max-width: none;
  height: calc(100svh - 76px);
  min-height: 650px;
  display: block;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.oracle-field-canvas,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oracle-field-canvas {
  z-index: -3;
  display: block;
}

.hero-shade {
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 10, 12, 0.98) 0%, rgba(6, 10, 12, 0.89) 27%, rgba(6, 10, 12, 0.28) 58%, rgba(6, 10, 12, 0.04) 100%),
    linear-gradient(180deg, rgba(6, 10, 12, 0.25), transparent 55%, rgba(6, 10, 12, 0.92));
}

.site-screen .hero-copy {
  position: absolute;
  z-index: 3;
  left: max(56px, calc((100vw - 1328px) / 2));
  top: 50%;
  width: min(670px, calc(100% - 112px));
  padding: 0;
  transform: translateY(-55%);
}

.site-screen .eyebrow {
  gap: 10px;
  color: var(--oracle-mint);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.eyebrow-signal {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oracle-acid);
  box-shadow: 0 0 0 4px rgba(228, 255, 143, 0.08), 0 0 18px rgba(228, 255, 143, 0.4);
}

.site-screen .eyebrow b {
  margin-left: 4px;
  padding: 4px 6px 3px;
  border-radius: 3px;
  background: var(--oracle-acid);
  color: #151a0d;
  font-size: 7px;
  letter-spacing: 0.12em;
}

.site-screen .hero-copy h1 {
  max-width: 680px;
  margin: 31px 0 22px;
  color: #edf3ef;
  font-family: "Arial Narrow", "Avenir Next Condensed", "PingFang SC", sans-serif;
  font-size: clamp(56px, 5vw, 76px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.site-screen .hero-copy h1 span {
  color: var(--oracle-mint);
  text-shadow: none;
}

.site-screen .hero-copy > p {
  max-width: 590px;
  color: #9aada4;
  font-size: 14px;
  line-height: 1.86;
  text-wrap: pretty;
}

.site-screen .hero-actions {
  gap: 20px;
  margin-top: 30px;
}

.oracle-primary {
  min-height: 48px;
  padding: 0 21px;
  border-radius: var(--radius-sm);
  background: var(--oracle-acid);
  color: #111609;
  box-shadow: 0 16px 38px rgba(196, 226, 101, 0.1);
}

.oracle-text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 3px;
  background: transparent;
  color: #c1d2ca;
  font-size: 12px;
  font-weight: 700;
}

.oracle-text-link span {
  color: var(--oracle-acid);
  font-size: 17px;
  transition: transform 160ms var(--ease-out);
}

.site-screen .hero-footnotes {
  gap: 24px;
  margin-top: 26px;
  color: #73867d;
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.site-screen .hero-footnotes i {
  width: 5px;
  height: 5px;
  border: 0;
  background: var(--oracle-acid);
  box-shadow: 0 0 10px rgba(228, 255, 143, 0.38);
}

.site-screen .hero-footnotes i::after {
  display: none;
}

.hero-oracle-hud {
  position: absolute;
  z-index: 4;
  right: max(48px, calc((100vw - 1328px) / 2));
  bottom: 94px;
  width: 336px;
  padding: 16px;
  outline: 1px solid rgba(212, 242, 226, 0.12);
  outline-offset: -1px;
  border-radius: var(--radius-md);
  background: rgba(8, 14, 15, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  font-variant-numeric: tabular-nums;
}

.hud-head,
.hud-price-row,
.hud-meta,
.hud-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hud-head {
  color: #84988f;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.hud-head span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hud-head small {
  color: #61736b;
  font-size: 7px;
}

.hud-price-row {
  align-items: flex-end;
  margin-top: 20px;
}

.hud-price-row > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hud-price-row small,
.hud-meta small {
  color: #657971;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.hud-price-row strong {
  color: #edf5f0;
  font-family: var(--mono);
  font-size: 25px;
  letter-spacing: -0.04em;
}

.hud-price-row > span {
  color: var(--oracle-acid);
  font-family: var(--mono);
  font-size: 10px;
}

.hud-range {
  position: relative;
  height: 28px;
  margin: 12px 0 16px;
  overflow: hidden;
}

.hud-range::before,
.hud-range::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(212, 242, 226, 0.07);
}

.hud-range::before { top: 7px; }
.hud-range::after { bottom: 6px; }

.hud-range span {
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9eb8aa 20%, var(--oracle-acid) 51%, #9eb8aa 75%, transparent);
}

.hud-range i {
  position: absolute;
  left: 63%;
  top: 9px;
  width: 7px;
  height: 9px;
  border-radius: 2px;
  background: var(--oracle-acid);
  box-shadow: 0 0 14px rgba(228, 255, 143, 0.4);
  animation: oracle-hud-pulse 2.4s ease-in-out infinite;
}

.hud-meta {
  gap: 12px;
}

.hud-meta > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.hud-meta b {
  color: #b8c9c0;
  font-family: var(--mono);
  font-size: 9px;
}

.hud-source-row {
  justify-content: flex-start;
  gap: 7px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid rgba(212, 242, 226, 0.08);
}

.hud-source-row span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(212, 242, 226, 0.045);
  color: #74877e;
  font-family: var(--mono);
  font-size: 6px;
  font-weight: 750;
}

.hud-source-row span.active {
  margin-left: auto;
  background: var(--oracle-acid);
  color: #111609;
}

.hero-quote-tape {
  position: absolute;
  z-index: 4;
  left: max(56px, calc((100vw - 1328px) / 2));
  right: max(56px, calc((100vw - 1328px) / 2));
  bottom: 20px;
  min-height: 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  border-top: 1px solid rgba(212, 242, 226, 0.09);
  border-bottom: 1px solid rgba(212, 242, 226, 0.06);
  color: #81958b;
  font-family: var(--mono);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.hero-quote-tape > span {
  padding: 0 18px;
  border-right: 1px solid rgba(212, 242, 226, 0.07);
}

.hero-quote-tape > span:first-child {
  padding-left: 0;
}

.hero-quote-tape > span:last-child {
  border-right: 0;
}

.hero-quote-tape b {
  margin-right: 8px;
  color: #c2d1c9;
}

.hero-quote-tape i {
  margin-left: 8px;
  color: var(--oracle-acid);
  font-style: normal;
}

.hero-quote-tape i.down {
  color: #ef947e;
}

@keyframes oracle-hud-pulse {
  0%, 100% { transform: translateX(-4px); opacity: 0.62; }
  50% { transform: translateX(5px); opacity: 1; }
}

.oracle-story {
  position: relative;
  height: 320vh;
  min-height: 2100px;
  background:
    radial-gradient(circle at 68% 48%, rgba(101, 167, 139, 0.09), transparent 30%),
    #080d0f;
}

.oracle-story-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 690px;
  overflow: hidden;
  padding: 108px max(56px, calc((100vw - 1328px) / 2)) 48px;
}

.oracle-story-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(212, 242, 226, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 242, 226, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, black 30%, black 85%, transparent);
}

.story-kicker {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(212, 242, 226, 0.1);
  color: #73877d;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
}

.story-kicker b {
  color: var(--oracle-acid);
  font-weight: 650;
}

.story-layout {
  position: relative;
  z-index: 2;
  height: calc(100% - 34px);
  display: grid;
  grid-template-columns: minmax(430px, 0.82fr) minmax(620px, 1.18fr);
  align-items: center;
  gap: clamp(36px, 5vw, 90px);
}

.story-copy h2 {
  max-width: 560px;
  margin: 0;
  color: #e5ede8;
  font-family: "Arial Narrow", "Avenir Next Condensed", "PingFang SC", sans-serif;
  font-size: clamp(34px, 3.2vw, 49px);
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.story-steps {
  width: min(520px, 100%);
  margin-top: 42px;
}

.story-step {
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(212, 242, 226, 0.09);
  will-change: opacity;
}

.story-step:last-child {
  border-bottom: 1px solid rgba(212, 242, 226, 0.09);
}

.story-step > span {
  color: var(--oracle-acid);
  font-family: var(--mono);
  font-size: 8px;
}

.story-step h3 {
  margin: 0;
  color: #cbd9d1;
  font-size: 13px;
  font-weight: 680;
}

.story-step p {
  max-width: 420px;
  margin: 6px 0 0;
  color: #70847a;
  font-size: 10px;
  line-height: 1.6;
}

.story-machine {
  position: relative;
  width: 100%;
  height: 530px;
  overflow: hidden;
  border-top: 1px solid rgba(212, 242, 226, 0.1);
  border-bottom: 1px solid rgba(212, 242, 226, 0.08);
  background: rgba(212, 242, 226, 0.012);
}

.machine-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(212, 242, 226, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 242, 226, 0.025) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 52% 50%, black, transparent 78%);
}

.source-stack {
  position: absolute;
  z-index: 3;
  left: 20px;
  top: 90px;
  width: 172px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oracle-source {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  outline: 1px solid rgba(212, 242, 226, 0.1);
  outline-offset: -1px;
  border-radius: var(--radius-sm);
  background: #0d1516;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  font-variant-numeric: tabular-nums;
  will-change: transform, opacity;
}

.oracle-source i {
  width: 28px;
  height: 28px;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(228, 255, 143, 0.08);
  color: var(--oracle-acid);
  font-family: var(--mono);
  font-size: 6px;
  font-style: normal;
}

.oracle-source b {
  align-self: end;
  color: #c4d5cc;
  font-family: var(--mono);
  font-size: 9px;
}

.oracle-source small {
  align-self: start;
  color: #60736a;
  font-family: var(--mono);
  font-size: 6px;
}

.source-lines {
  position: absolute;
  z-index: 2;
  left: 178px;
  top: 112px;
  width: 132px;
}

.source-lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(228, 255, 143, 0.1), rgba(228, 255, 143, 0.6));
  will-change: transform;
}

.source-lines i:nth-child(1) { top: 0; transform: rotate(23deg); }
.source-lines i:nth-child(2) { top: 62px; transform: rotate(8deg); }
.source-lines i:nth-child(3) { top: 124px; transform: rotate(-8deg); }
.source-lines i:nth-child(4) { top: 186px; transform: rotate(-23deg); }

.consensus-core {
  position: absolute;
  z-index: 4;
  left: 278px;
  top: 175px;
  width: 158px;
  height: 158px;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}

.consensus-core > div {
  position: relative;
  z-index: 2;
  width: 116px;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: #111a17;
  box-shadow: inset 0 0 0 1px rgba(228, 255, 143, 0.23), 0 0 50px rgba(109, 164, 115, 0.14);
}

.consensus-core small,
.consensus-core em {
  color: #697d73;
  font-family: var(--mono);
  font-size: 6px;
  font-style: normal;
  letter-spacing: 0.1em;
}

.consensus-core b {
  color: #e9f2ed;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.03em;
}

.consensus-core em {
  color: var(--oracle-acid);
}

.consensus-halo {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(228, 255, 143, 0.12);
  border-radius: 50%;
  will-change: transform, opacity;
}

.halo-two {
  inset: 18px;
  border-style: dashed;
}

.settlement-beam {
  position: absolute;
  z-index: 2;
  left: 422px;
  top: 253px;
  width: 78px;
  height: 1px;
}

.settlement-beam span {
  width: 100%;
  height: 1px;
  display: block;
  background: linear-gradient(90deg, var(--oracle-acid), rgba(228, 255, 143, 0.12));
  box-shadow: 0 0 12px rgba(228, 255, 143, 0.18);
  will-change: transform;
}

.settlement-block {
  position: absolute;
  z-index: 4;
  right: 20px;
  top: 179px;
  width: 204px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  outline: 1px solid rgba(228, 255, 143, 0.18);
  outline-offset: -1px;
  border-radius: var(--radius-md);
  background: #101817;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
  font-variant-numeric: tabular-nums;
  will-change: transform, opacity;
}

.settlement-block small {
  color: #71857b;
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.settlement-block strong {
  margin-top: 12px;
  color: var(--oracle-acid);
  font-family: var(--mono);
  font-size: 12px;
}

.settlement-block > span {
  margin-top: 26px;
  color: #b9cbc1;
  font-family: var(--mono);
  font-size: 7px;
}

.settlement-block > span i {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--oracle-acid);
  color: #12170b;
  font-style: normal;
}

.settlement-block code {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 242, 226, 0.08);
  color: #61746b;
  font-size: 7px;
}

.proof-seal {
  position: absolute;
  z-index: 5;
  right: 46px;
  bottom: 49px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8da097;
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: 0.12em;
  will-change: transform, opacity;
}

.proof-seal span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oracle-acid);
  color: #111609;
  box-shadow: 0 0 24px rgba(228, 255, 143, 0.16);
  font-size: 12px;
}

.site-screen .proof-band {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 104px max(56px, calc((100vw - 1328px) / 2)) 118px;
  border: 0;
  background: #0b1112;
  box-shadow: none;
}

.site-screen .proof-band::before {
  display: none;
}

.site-screen .proof-band-head {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(212, 242, 226, 0.1);
}

.site-screen .proof-band-head span {
  color: var(--oracle-acid);
}

.site-screen .proof-band-head h2 {
  color: #e0e9e4;
  font-family: "Arial Narrow", "Avenir Next Condensed", "PingFang SC", sans-serif;
  font-size: 28px;
  letter-spacing: -0.025em;
}

.site-screen .evidence-grid {
  grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
  margin-top: 0;
}

.site-screen .evidence-card {
  min-height: 158px;
  padding: 28px 0 24px;
  border: 0;
  border-bottom: 1px solid rgba(212, 242, 226, 0.09);
  background: transparent;
}

.site-screen .evidence-icon {
  border: 0;
  border-radius: 50%;
  background: rgba(228, 255, 143, 0.07);
  color: var(--oracle-acid);
}

.site-screen .evidence-card h3 {
  color: #c5d2cb;
}

.site-screen .evidence-card > strong {
  border-top: 0;
  color: #82968c;
  letter-spacing: 0.04em;
}

.site-screen .evidence-connector span {
  background: rgba(228, 255, 143, 0.2);
}

.oracle-closing {
  min-height: 660px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 110px max(56px, calc((100vw - 1328px) / 2)) 0;
  background:
    radial-gradient(circle at 72% 38%, rgba(127, 180, 122, 0.12), transparent 29%),
    #070b0c;
}

.oracle-closing > div > span {
  color: var(--oracle-acid);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.oracle-closing h2 {
  margin: 22px 0 0;
  color: #e8efeb;
  font-family: "Arial Narrow", "Avenir Next Condensed", "PingFang SC", sans-serif;
  font-size: clamp(44px, 5vw, 70px);
  font-weight: 620;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.oracle-closing > .oracle-primary {
  min-width: 200px;
}

.oracle-closing footer {
  grid-column: 1 / -1;
  align-self: end;
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid rgba(212, 242, 226, 0.09);
  color: #60736a;
}

.oracle-closing footer p {
  justify-self: center;
  margin: 0;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.09em;
}

.oracle-closing footer small {
  justify-self: end;
  font-family: var(--mono);
  font-size: 7px;
}

@media (hover: hover) and (pointer: fine) {
  .site-screen .oracle-primary:hover {
    transform: translateY(-2px);
    background: #efffb9;
  }

  .oracle-text-link:hover span {
    transform: translateX(4px);
  }
}

@media (max-width: 1180px) {
  .site-screen .site-nav {
    grid-template-columns: 190px 1fr 252px;
    padding: 0 28px;
  }

  .site-screen .site-links {
    gap: 14px;
  }

  .site-screen .site-links button {
    font-size: 10px;
  }

  .site-screen .hero-copy {
    left: 42px;
    width: 570px;
  }

  .hero-oracle-hud {
    right: 34px;
    width: 310px;
  }

  .hero-quote-tape {
    left: 42px;
    right: 42px;
  }

  .oracle-story-sticky,
  .site-screen .proof-band,
  .oracle-closing {
    padding-left: 42px;
    padding-right: 42px;
  }

  .story-layout {
    grid-template-columns: minmax(380px, 0.8fr) minmax(540px, 1.2fr);
    gap: 30px;
  }

  .story-machine {
    transform: scale(0.9);
    transform-origin: center right;
  }
}

@media (max-width: 700px) {
  .site-screen {
    overflow: visible;
    padding-top: 64px;
    background: var(--oracle-ink);
  }

  .site-screen .site-nav {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 64px;
    grid-template-columns: 1fr auto;
    padding: 0 16px;
    background: rgba(6, 10, 12, 0.92);
    backdrop-filter: blur(12px);
  }

  .site-screen .site-hero {
    width: 100%;
    height: calc(100svh - 64px);
    min-height: 780px;
    margin: 0;
  }

  .site-screen .hero-shade {
    background:
      linear-gradient(180deg, rgba(6, 10, 12, 0.93) 0%, rgba(6, 10, 12, 0.72) 43%, rgba(6, 10, 12, 0.15) 64%, rgba(6, 10, 12, 0.94) 100%),
      linear-gradient(90deg, rgba(6, 10, 12, 0.78), transparent 86%);
  }

  .site-screen .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 44px 16px 0;
    transform: none;
  }

  .site-screen .eyebrow {
    font-size: 7px;
  }

  .site-screen .hero-copy h1 {
    margin: 22px 0 16px;
    font-size: clamp(39px, 10.6vw, 46px);
    line-height: 1.07;
    letter-spacing: -0.044em;
  }

  .site-screen .hero-copy > p {
    max-width: 96%;
    font-size: 11px;
    line-height: 1.72;
  }

  .site-screen .hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
  }

  .site-screen .hero-actions .oracle-primary {
    min-width: 154px;
    padding: 0 15px;
    font-size: 11px;
  }

  .oracle-text-link {
    padding: 0;
    font-size: 10px;
  }

  .site-screen .hero-footnotes {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 16px;
    font-size: 7px;
  }

  .site-screen .hero-footnotes span:last-child {
    grid-column: 1 / -1;
  }

  .hero-oracle-hud {
    right: 16px;
    left: 16px;
    bottom: 63px;
    width: auto;
    padding: 12px 13px;
    border-radius: 10px;
    background: rgba(8, 14, 15, 0.9);
  }

  .hud-price-row {
    margin-top: 12px;
  }

  .hud-price-row strong {
    font-size: 21px;
  }

  .hud-range {
    height: 18px;
    margin: 7px 0 10px;
  }

  .hud-range::before { top: 4px; }
  .hud-range::after { bottom: 3px; }
  .hud-range span { top: 9px; }
  .hud-range i { top: 5px; }

  .hud-meta {
    gap: 7px;
  }

  .hud-source-row {
    margin-top: 10px;
    padding-top: 8px;
  }

  .hud-source-row span {
    width: 22px;
    height: 22px;
  }

  .hero-quote-tape {
    left: 16px;
    right: 16px;
    bottom: 12px;
    grid-template-columns: 1fr 1fr;
    min-height: 38px;
    overflow: hidden;
  }

  .hero-quote-tape > span {
    min-width: 170px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .hero-quote-tape > span:nth-child(n + 3) {
    display: none;
  }

  .oracle-story {
    height: 320svh;
    min-height: 2200px;
  }

  .oracle-story-sticky {
    position: sticky;
    top: 0;
    height: calc(100svh - 64px);
    min-height: 620px;
    overflow: hidden;
    padding: 26px 16px calc(18px + env(safe-area-inset-bottom));
  }

  .oracle-story-sticky::before {
    background-size: 44px 44px;
  }

  .story-layout {
    height: calc(100% - 58px);
    display: block;
  }

  .story-copy {
    display: contents;
  }

  .story-copy h2 {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: 21px;
    max-width: 340px;
    margin: 0;
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.14;
  }

  .story-steps {
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    bottom: 0;
    height: 116px;
    margin: 0;
    background: linear-gradient(180deg, rgba(8, 13, 15, 0.1), #080d0f 24%);
  }

  .story-step {
    position: absolute;
    inset: 0;
    min-height: 0;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    padding: 18px 0 13px;
    border-bottom: 1px solid rgba(212, 242, 226, 0.08);
    opacity: 0;
    will-change: transform, opacity;
  }

  .story-step:first-child {
    opacity: 1;
  }

  .story-step h3 {
    font-size: 12px;
  }

  .story-step p {
    font-size: 9px;
  }

  .story-machine {
    position: absolute;
    left: 0;
    right: 0;
    top: 105px;
    width: auto;
    height: 422px;
    margin: 0;
    transform: none;
  }

  .source-stack {
    left: 12px;
    right: 12px;
    top: 17px;
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .oracle-source {
    min-height: 43px;
    grid-template-columns: 24px 1fr;
    gap: 7px;
    padding: 6px 7px;
  }

  .oracle-source i {
    width: 24px;
    height: 24px;
  }

  .oracle-source b {
    font-size: 8px;
  }

  .source-lines {
    display: none;
  }

  .consensus-core {
    left: 50%;
    top: 124px;
    width: 146px;
    height: 146px;
    transform: translateX(-50%);
  }

  .consensus-core > div {
    width: 106px;
    height: 106px;
  }

  .settlement-beam {
    left: 50%;
    top: 278px;
    width: 54px;
    transform: translateX(-50%) rotate(90deg);
  }

  .settlement-block {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 16px;
    width: 218px;
    min-height: 142px;
    padding: 16px;
    transform: translateX(-50%);
  }

  .settlement-block > span {
    margin-top: 20px;
  }

  .proof-seal {
    right: 7px;
    bottom: 7px;
  }

  .site-screen .proof-band {
    width: 100%;
    margin: 0;
    padding: 78px 16px 88px;
  }

  .site-screen .proof-band-head {
    display: block;
  }

  .site-screen .proof-band-head div {
    display: block;
  }

  .site-screen .proof-band-head h2 {
    margin-top: 12px;
    font-size: 25px;
    line-height: 1.3;
  }

  .site-screen .evidence-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }

  .site-screen .evidence-card {
    min-height: 134px;
    padding: 22px 0 18px;
  }

  .site-screen .evidence-connector {
    display: none;
  }

  .oracle-closing {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 32px;
    padding: 92px 16px calc(88px + env(safe-area-inset-bottom));
  }

  .oracle-closing h2 {
    font-size: 43px;
  }

  .oracle-closing > .oracle-primary {
    align-self: flex-start;
  }

  .oracle-closing footer {
    width: 100%;
    min-height: 128px;
    display: grid;
    grid-template-columns: 1fr auto;
    margin-top: auto;
  }

  .oracle-closing footer p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-screen .hud-range i {
    animation: none;
  }

  .site-screen .story-step,
  .site-screen .oracle-source,
  .site-screen .consensus-core,
  .site-screen .settlement-block,
  .site-screen .proof-seal {
    transform: none !important;
    opacity: 1 !important;
  }
}