:root {
      --midnight: #101724;
      --midnight-deep: #080d16;
      --slate: #283448;
      --slate-2: #334157;
      --ember: #ff795b;
      --copper: #e6b69a;
      --ivory: #f5f1eb;
      --muted: #9aa3b2;
      --line: rgba(230,182,154,.18);
      --panel: rgba(21,29,43,.86);
      --fresh: #83d6ba;
      --stale: #e6b69a;
      --unknown: #a7afbe;
      --radius: 16px;
      --shadow: 0 28px 90px rgba(0,0,0,.34);
    }

    * { box-sizing: border-box; }
    html { background: var(--midnight-deep); color-scheme: dark; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ivory);
      background:
        radial-gradient(circle at 82% 3%, rgba(255,121,91,.11), transparent 27rem),
        linear-gradient(180deg, #101724 0%, #0c121d 100%);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: .01em;
    }

    button, input { font: inherit; }
    button { color: inherit; }
    button:focus-visible, input:focus-visible, a:focus-visible {
      outline: 2px solid var(--ember);
      outline-offset: 3px;
    }

    .ambient {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .42;
      background-image:
        linear-gradient(rgba(230,182,154,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230,182,154,.035) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: linear-gradient(to bottom, black, transparent 82%);
    }

    .topbar {
      height: 72px;
      border-bottom: 1px solid var(--line);
      background: rgba(8,13,22,.78);
      backdrop-filter: blur(18px);
      display: flex;
      align-items: center;
      padding: 0 24px;
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .product-nav { display: flex; align-items: center; gap: 6px; margin-left: 30px; }
    .product-nav a, .product-nav button {
      min-height: 42px;
      padding: 0 15px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #aeb5c2;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 650;
    }
    .product-nav .active { color: var(--ivory); background: rgba(230,182,154,.09); }
    .product-nav .active::before { content: ""; width: 6px; height: 6px; background: var(--ember); border-radius: 50%; box-shadow: 0 0 16px rgba(255,121,91,.8); }
    .product-nav button { cursor: not-allowed; opacity: .55; }
    .product-nav small { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; color: var(--copper); }

    .preview-flag {
      margin-left: auto;
      padding: 8px 12px;
      border: 1px solid rgba(255,121,91,.28);
      border-radius: 999px;
      color: var(--copper);
      background: rgba(255,121,91,.06);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .12em;
      white-space: nowrap;
    }

    .page { max-width: 1600px; margin: 0 auto; padding: 28px 24px 48px; }

    .page-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 30px;
      align-items: end;
      margin-bottom: 24px;
    }
    .eyebrow { margin: 0 0 9px; color: var(--ember); font-size: 11px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
    h1 { margin: 0; font-size: clamp(30px, 3vw, 48px); line-height: 1; letter-spacing: -.035em; }
    .page-head p:last-child { margin: 12px 0 0; max-width: 760px; color: #a8b0be; font-size: 14px; line-height: 1.6; }
    .head-meta { text-align: right; }
    .head-meta span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
    .head-meta strong { display: block; margin-top: 7px; color: var(--ivory); font-size: 13px; font-weight: 650; }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) auto auto;
      gap: 10px;
      margin-bottom: 14px;
    }
    .search-wrap { position: relative; }
    .search-wrap svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; color: #778296; }
    .search-wrap input {
      width: 100%; height: 46px; padding: 0 16px 0 44px;
      border: 1px solid var(--line); border-radius: 12px;
      color: var(--ivory); background: rgba(14,21,33,.78);
    }
    .search-wrap input::placeholder { color: #6f798a; }
    .filter-button {
      height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
      background: rgba(14,21,33,.78); color: #c8cdd5; font-size: 12px; font-weight: 650;
    }
    .filter-button:disabled { cursor: default; opacity: .74; }

    .state-strip {
      display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px;
      padding: 11px 13px; margin-bottom: 14px;
      border: 1px solid rgba(230,182,154,.12); border-radius: 12px;
      background: rgba(14,21,33,.56);
    }
    .state-strip > span:first-child { margin-right: 4px; color: #747f91; font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }

    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      min-height: 24px; padding: 0 8px; border-radius: 999px;
      border: 1px solid rgba(230,182,154,.2); color: #bbc2cd; background: rgba(40,52,72,.54);
      font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    }
    .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8d97a7; }
    .tag.observed::before { background: var(--fresh); }
    .tag.derived::before { background: var(--copper); }
    .tag.simulated::before { background: var(--ember); }
    .tag.unavailable::before, .tag.unknown::before { background: transparent; border: 1px solid #8892a2; }
    .tag.fresh { color: #a9e8d4; border-color: rgba(131,214,186,.27); }
    .tag.fresh::before { background: var(--fresh); }
    .tag.stale { color: #e7c8b6; }
    .tag.stale::before { background: var(--stale); }

    .route-error { margin-bottom: 14px; padding: 24px; border: 1px solid rgba(255,121,91,.34); border-radius: 14px; background: linear-gradient(135deg, rgba(255,121,91,.08), rgba(40,52,72,.28)); }
    .route-error[hidden] { display: none; }
    .route-error > span { color: var(--ember); font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
    .route-error h2 { margin: 10px 0 0; font-size: 26px; }
    .route-error p { max-width: 720px; margin: 11px 0 0; color: #b7bec9; font-size: 11px; line-height: 1.6; }
    .route-error code { display: block; width: fit-content; max-width: 100%; margin-top: 15px; padding: 9px 11px; overflow-wrap: anywhere; border: 1px solid rgba(230,182,154,.16); background: rgba(11,17,27,.72); color: var(--copper); font-size: 9px; }
    .route-error a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 14px; color: var(--ivory); font-size: 10px; text-underline-offset: 5px; }
    [data-discover-workspace][hidden] { display: none; }

    .workspace {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr) 320px;
      gap: 14px;
      align-items: start;
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .panel-head { padding: 15px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .panel-head span { color: #818b9b; font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
    .panel-head strong { display: block; color: var(--ivory); font-size: 12px; }

    .token-list { padding: 8px; }
    .token-empty { margin: 0; padding: 18px 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
    .token-option {
      width: 100%; padding: 13px 12px; margin: 0 0 6px; border: 1px solid transparent; border-radius: 12px;
      background: transparent; text-align: left; cursor: pointer;
    }
    .token-option:hover { background: rgba(230,182,154,.045); }
    .token-option.active { background: linear-gradient(90deg, rgba(255,121,91,.10), rgba(40,52,72,.45)); border-color: rgba(255,121,91,.25); }
    .token-top { display: flex; align-items: center; gap: 10px; }
    .asset-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #1e293b; border: 1px solid rgba(230,182,154,.24); color: var(--copper); font-size: 11px; font-weight: 800; }
    .token-name strong { display: block; font-size: 12px; }
    .token-name span { display: block; margin-top: 3px; color: #7f8999; font-size: 10px; }
    .market-count { margin-left: auto; color: #aab2bf; font-size: 10px; }
    .token-meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; min-width: 0; margin: 11px 0 0 44px; padding-right: 12px; }
    .token-meta .tag {
      flex: 0 0 auto; width: fit-content; min-height: 22px; padding-inline: 6px; gap: 5px;
      font-size: 8px; letter-spacing: .025em; text-transform: none;
    }
    .token-meta .tag::before { flex: 0 0 5px; }

    .unranked-note { padding: 14px 16px 16px; border-top: 1px solid var(--line); color: #858f9f; font-size: 10px; line-height: 1.55; }
    .unranked-note strong { color: var(--copper); }

    .identity {
      padding: 20px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      border-bottom: 1px solid var(--line);
    }
    .identity-main { display: flex; align-items: center; gap: 14px; }
    .identity-main .asset-icon { width: 46px; height: 46px; font-size: 14px; }
    .identity h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
    .identity h2 span { margin-left: 7px; color: #7f8999; font-weight: 520; }
    .identity p { margin: 6px 0 0; color: #9aa3b1; font-size: 11px; }
    .synthetic { display: inline-flex; margin-left: 9px; padding: 4px 7px; vertical-align: 2px; border: 1px solid rgba(255,121,91,.24); border-radius: 6px; color: var(--copper); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
    .price-block { text-align: right; }
    .price-block span { color: #7f8999; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
    .price-block strong { display: block; margin-top: 5px; font-size: 25px; font-variant-numeric: tabular-nums; }
    .price-block small { display: block; margin-top: 4px; color: var(--fresh); font-size: 10px; }
    .price-block small.stale { color: var(--stale); }
    .price-block small.unknown { color: var(--unknown); }

    .chart-area { padding: 18px 20px 13px; }
    .chart-labels { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
    .chart-labels strong { font-size: 11px; }
    .chart-labels span { color: #7e8898; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
    .chart-box { height: 238px; border: 1px solid rgba(230,182,154,.12); border-radius: 13px; overflow: hidden; background: linear-gradient(180deg, rgba(40,52,72,.22), rgba(16,23,36,.05)); }
    .chart-box svg { display: block; width: 100%; height: 100%; }

    .context-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .context-item { min-width: 0; padding: 14px 16px; background: rgba(13,20,31,.92); }
    .context-item span { display: flex; align-items: center; gap: 6px; color: #7d8797; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
    .context-item strong { display: block; margin-top: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
    .context-item small { display: block; margin-top: 5px; color: #858f9f; font-size: 9px; }

    .market-section { padding: 18px 20px 20px; }
    .section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
    .section-title h3 { margin: 0; font-size: 14px; }
    .section-title p { margin: 5px 0 0; color: #7e8898; font-size: 10px; }
    .section-title > span { color: var(--copper); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

    .market-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
    .market-row {
      width: 100%; display: grid; grid-template-columns: 1.05fr .8fr 1.15fr 1.1fr .8fr; gap: 12px; align-items: center;
      padding: 12px; border: 0; border-bottom: 1px solid rgba(230,182,154,.11); background: rgba(12,18,29,.55); text-align: left; cursor: pointer;
    }
    .market-row:last-child { border-bottom: 0; }
    .market-row:hover { background: rgba(40,52,72,.4); }
    .market-row.active { background: linear-gradient(90deg, rgba(255,121,91,.09), rgba(40,52,72,.4)); box-shadow: inset 3px 0 var(--ember); }
    .market-cell span { display: block; color: #747f90; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
    .market-cell strong { display: block; margin-top: 5px; overflow: hidden; color: #dfe2e7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

    .right-stack { display: grid; gap: 14px; }
    .status-body { padding: 16px; }
    .selected-market { padding: 13px; margin-bottom: 14px; border: 1px solid rgba(255,121,91,.18); border-radius: 11px; background: rgba(255,121,91,.055); }
    .selected-market span { color: var(--ember); font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
    .selected-market strong { display: block; margin-top: 6px; font-size: 13px; }
    .selected-market small { display: block; margin-top: 5px; color: #9099a8; font-size: 9px; }
    .analyze-market-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: 11px; color: var(--ember); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
    .analyze-market-link:hover { color: var(--ivory); }

    .ledger { margin: 0; }
    .ledger > div { display: grid; grid-template-columns: 105px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(230,182,154,.10); }
    .ledger > div:last-child { border-bottom: 0; }
    .ledger dt { color: #768193; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
    .ledger dd { min-width: 0; margin: 0; color: #cbd0d8; font-size: 10px; line-height: 1.45; }
    .ledger dd .tag { margin: -4px 0; }
    .ledger > .freshness-row { grid-template-columns: 68px minmax(0, 1fr); column-gap: 7px; }
    .ledger .freshness-row dd { display: flex; justify-content: flex-end; }
    .ledger .freshness-row .tag { max-width: 100%; }
    .ledger .freshness-row .tag::before {
      flex: 0 0 5px;
      width: 5px;
      height: 5px;
      min-width: 5px;
      min-height: 5px;
    }

    .warning {
      margin-top: 13px; padding: 12px; border-left: 2px solid var(--copper); border-radius: 4px 10px 10px 4px;
      background: rgba(230,182,154,.07); color: #b7bec8; font-size: 10px; line-height: 1.55;
    }

    .simulation { padding: 16px; }
    .simulation-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
    .simulation-top strong { font-size: 12px; }
    .simulation-value { margin: 16px 0 5px; font-size: 24px; font-weight: 700; }
    .simulation p { margin: 0; color: #858f9f; font-size: 10px; line-height: 1.55; }
    .simulation-boundary { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid rgba(230,182,154,.12); }
    .impact-bar { height: 8px; margin: 15px 0 12px; border-radius: 999px; overflow: hidden; background: #1a2434; }
    .impact-bar i { display: block; width: 73%; height: 100%; background: linear-gradient(90deg, var(--copper), var(--ember)); border-radius: inherit; }

    .footer-note { margin: 20px 0 0; color: #6f7989; font-size: 10px; line-height: 1.55; text-align: center; }

    @media (max-width: 1180px) {
      .workspace { grid-template-columns: 250px minmax(0,1fr); }
      .right-stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
      .context-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 820px) {
      .topbar { height: auto; min-height: 68px; padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
      .brand { min-width: auto; }
      .brand img:last-child { width: 92px; }
      .product-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
      .product-nav a, .product-nav button { padding: 0 12px; }
      .page { padding: 22px 14px 36px; }
      .page-head { grid-template-columns: 1fr; }
      .head-meta { text-align: left; }
      .toolbar { grid-template-columns: 1fr auto; }
      .toolbar .filter-button:last-child { display: none; }
      .workspace { display: block; }
      .asset-browser { margin-bottom: 14px; }
      .token-list { display: flex; gap: 8px; overflow-x: auto; padding: 9px; }
      .token-option { min-width: 238px; margin: 0; }
      .unranked-note { display: none; }
      .main-panel { margin-bottom: 14px; }
      .right-stack { display: grid; grid-template-columns: 1fr 1fr; }
      .market-row { grid-template-columns: 1.1fr .8fr 1.15fr .85fr; }
      .market-cell.origin { display: none; }
    }

    @media (max-width: 590px) {
      .preview-flag { max-width: none; padding: 7px 9px; font-size: 9px; }
      .page-head p:last-child { font-size: 13px; }
      .toolbar { grid-template-columns: 1fr; }
      .toolbar .filter-button { width: 100%; }
      .state-strip { align-items: flex-start; overflow-x: auto; flex-wrap: nowrap; }
      .state-strip > span:first-child { display: none; }
      .identity { grid-template-columns: 1fr; }
      .price-block { text-align: left; padding-left: 60px; }
      .chart-area { padding-inline: 14px; }
      .chart-box { height: 210px; }
      .context-grid { grid-template-columns: 1fr 1fr; }
      .context-item { padding: 12px; }
      .market-section { padding: 16px 12px; }
      .market-table { border: 0; overflow: visible; display: grid; gap: 8px; }
      .market-row { grid-template-columns: 1fr 1fr; gap: 12px; border: 1px solid var(--line); border-radius: 11px; }
      .market-row.active { box-shadow: inset 3px 0 var(--ember); }
      .market-cell.origin { display: block; }
      .right-stack { grid-template-columns: 1fr; }
      .ledger > div { grid-template-columns: 92px 1fr; }
    }

    @media (max-width: 720px) {
      .ledger > .freshness-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
      .ledger .freshness-row dd { justify-content: flex-start; }
      .ledger .freshness-row .tag {
        width: fit-content;
        height: auto;
        min-height: 24px;
        padding-block: 5px;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
      }
    }

/* Website integration layer. The product-preview information architecture above is unchanged. */
.discover-page { padding-top: 116px; }
.discover-architecture { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.architecture-step { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; background: rgba(14,21,33,.92); }
.discover-architecture a.architecture-step { color: inherit; text-decoration: none; }
.discover-architecture a.architecture-step:hover { background: rgba(40,52,72,.72); }
.architecture-step strong, .architecture-step small { display: block; }
.architecture-step strong { font-size: 12px; }
.architecture-step small { margin-top: 3px; color: #7f8999; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.architecture-step > span:first-child { color: rgba(230,182,154,.48); font-family: var(--font-mono); font-size: 9px; }
.architecture-step.active { background: linear-gradient(90deg, rgba(255,121,91,.10), rgba(40,52,72,.45)); box-shadow: inset 0 -2px var(--ember); }
.architecture-step.active > span:first-child { color: var(--ember); }
.architecture-step.reserved { color: #aeb5c2; }
.architecture-step.reserved em { color: var(--copper); font-size: 8px; font-style: normal; letter-spacing: .09em; text-transform: uppercase; }
.discover-page + .site-footer { margin-top: 0; }

@media (max-width: 760px) {
  .discover-page { padding-top: 96px; }
  .discover-architecture { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .discover-architecture { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .architecture-step { min-width: 180px; scroll-snap-align: start; }
}