:root {
      --bg:      #0f1117;
      --surface: #1a1d27;
      --border:  #2a2d3a;
      --text:    #e2e8f0;
      --muted:   #8892a4;
      --accent:  #6c8ebf;
      --green:   #4ade80;
      --orange:  #fb923c;
      --red:     #f87171;
      --mono:    'Fira Code', 'Cascadia Code', Consolas, monospace;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 14px;
      line-height: 1.6;
    }

    header {
      padding: 18px 24px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
      overflow: visible;
    }
    header h1 {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0;
    }
    header h1 .logo-mark {
      display: inline-flex;
      align-items: center;
    }
    header h1 .logo-mark img {
      height: 30px;
      width: auto;
      display: block;
    }
    header h1 .logo-suffix {
      color: var(--muted);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0;
    }
    .badge {
      font-size: 11px;
      background: var(--border);
      color: var(--muted);
      padding: 2px 7px;
      border-radius: 4px;
      font-family: var(--mono);
    }

    nav {
      display: flex;
      padding: 0 24px;
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
    }
    nav button {
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 13px;
      padding: 10px 14px;
      white-space: nowrap;
      transition: color .15s, border-color .15s;
    }
    nav button:hover { color: var(--text); }
    nav button.active { color: var(--accent); border-bottom-color: var(--accent); }

    main { padding: 24px; max-width: 900px; }

    .scenario { display: none; }
    .scenario.active { display: block; }

    h2 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
    .desc { color: var(--muted); font-size: 13px; margin-bottom: 18px; }

    .form-grid { display: grid; gap: 12px; margin-bottom: 14px; }

    label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    input, textarea, select {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-family: var(--mono);
      font-size: 13px;
      padding: 7px 10px;
      width: 100%;
      transition: border-color .15s;
    }
    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
    textarea { resize: vertical; min-height: 76px; }

    button.run {
      background: var(--accent);
      border: none;
      border-radius: 6px;
      color: #fff;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      padding: 7px 18px;
      transition: opacity .15s;
    }
    button.run:hover { opacity: .85; }
    button.run:disabled { opacity: .4; cursor: not-allowed; }

    .response {
      margin-top: 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }
    .resp-header {
      display: flex;
      justify-content: space-between;
      padding: 7px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      color: var(--muted);
    }
    .resp-body { padding: 14px; font-family: var(--mono); font-size: 12px; overflow-x: auto; }

    .ok  { color: var(--green); }
    .err { color: var(--red); }
    .answer-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px 16px;
      margin-bottom: 14px;
      font-family: system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.7;
    }
    .intent-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 3px;
      background: var(--accent);
      color: #fff;
      margin-right: 6px;
      vertical-align: middle;
    }
    .entity-pill {
      display: inline-block;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 12px;
      background: #1e3a5f;
      color: #93c5fd;
      margin: 2px 3px;
      font-family: var(--mono);
    }
    .consistent-yes { color: var(--green); }
    .consistent-no  { color: var(--red); }
    .meta-kv { font-size: 11px; color: var(--muted); }

    table { border-collapse: collapse; width: 100%; }
    th {
      color: var(--muted);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 4px 10px;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }
    td { padding: 5px 10px; vertical-align: top; }
    tr:hover td { background: rgba(255,255,255,.02); }

    .op {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 3px;
      background: var(--border);
      color: var(--muted);
    }
    .TYPE      { background: #1e3a5f; color: #60a5fa; }
    .INSTANCE  { background: #1e3a5f; color: #93c5fd; }
    .PART_OF   { background: #14532d; color: #4ade80; }
    .MEMBER_OF { background: #14532d; color: #86efac; }
    .HAS_ATTR  { background: #431407; color: #fb923c; }
    .CAUSES    { background: #3b0764; color: #c084fc; }
    .ENABLES   { background: #3b0764; color: #d8b4fe; }
    .PREVENTS  { background: #3b0764; color: #f0abfc; }
    .AT        { background: #0c2a2a; color: #2dd4bf; }
    .SAME_AS   { background: #1c1917; color: #a8a29e; }

    .conf { color: var(--muted); }
    .ch { color: var(--green); }
    .cm { color: var(--orange); }
    .cl { color: var(--red); }

    .tag {
      display: inline-block;
      font-size: 11px;
      padding: 1px 6px;
      border-radius: 3px;
      background: var(--border);
      color: var(--muted);
      margin: 1px;
    }
    .bar {
      display: inline-block;
      height: 3px;
      border-radius: 2px;
      background: var(--accent);
      vertical-align: middle;
      margin-right: 6px;
    }
    .empty { color: var(--muted); font-style: italic; }
    .note  { color: var(--muted); font-size: 12px; margin-bottom: 10px; }

    /* Alias cells — every CIF reference rendered server-side becomes
       a click target that rewrites the active input as [ALIAS] and
       re-runs the query. Underline-on-hover signals the affordance
       without making cell text noisy by default. */
    .alias-cell {
      cursor: pointer;
      border-bottom: 1px dashed transparent;
      transition: border-color .12s, color .12s;
    }
    .alias-cell:hover {
      border-bottom-color: var(--accent);
      color: var(--accent);
    }
    /* Unresolved CIF reference — no alias known. The canonical num_id
       form is never rendered visibly per the demo contract; the
       placeholder + tooltip keeps the audit handle reachable without
       polluting the table cell with an unreadable digit string. */
    .alias-cell.unresolved {
      color: var(--muted);
      font-style: italic;
      cursor: default;
    }
    .alias-cell.unresolved:hover {
      border-bottom-color: transparent;
      color: var(--muted);
    }

    /* Example chips — pre-built queries surfaced above each form so
       the user discovers what each scenario can do. Visual weight is
       low (muted background) so they don't compete with the form;
       hover highlights the affordance. */
    .examples-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 8px 0 14px;
    }
    .example-chip {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 3px 10px;
      font-size: 11px;
      cursor: pointer;
      transition: background .12s, border-color .12s, color .12s;
    }
    .example-chip:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    /* Explore — lens switcher. One concept, several lenses; the tabs
       toggle pre-fetched sections in the same result window. Styled as
       a segmented control so it reads as "facets of one thing", not as
       separate queries. */
    .lens-tabs {
      display: flex;
      gap: 4px;
      margin: 4px 0 14px;
      border-bottom: 1px solid var(--border);
    }
    .lens-tab {
      background: transparent;
      color: var(--text);
      border: none;
      border-bottom: 2px solid transparent;
      padding: 6px 14px;
      font-size: 12px;
      cursor: pointer;
      opacity: .7;
      transition: color .12s, border-color .12s, opacity .12s;
    }
    .lens-tab:hover { opacity: 1; }
    .lens-tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      opacity: 1;
    }

    /* Landing — narrative entry point. Sections stack vertically, each
       section explains one slice of CIF (problem, properties, scale,
       how to use the demo). Card grid for the scenario list mirrors
       the navigation order so the reader can either read top-down or
       jump to a specific scenario. */
    .landing { max-width: 900px; }
    .landing h2.lead {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      display: flex;
      align-items: baseline;
      gap: 12px;
      letter-spacing: -.02em;
    }
    .landing h2.lead .lead-logo {
      height: 80px;
      width: auto;
      display: block;
      filter: drop-shadow(0 0 8px rgba(251,146,60,.25));
    }
    .landing h2.lead .lead-suffix {
      font-size: 18px;
      font-weight: 500;
      color: var(--muted);
    }
    .landing .tag-line {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 22px;
      max-width: 720px;
      line-height: 1.5;
    }
    .landing section.l-block {
      margin-bottom: 28px;
    }
    .landing section.l-block > h3 {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 10px;
    }
    .landing p, .landing li {
      font-size: 13px;
      line-height: 1.65;
      color: var(--text);
    }
    .landing p { margin-bottom: 10px; }
    .landing ul { margin-left: 18px; margin-bottom: 12px; }

    .stat-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }
    .stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
    }
    .stat .num {
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--accent);
      display: block;
    }
    .stat .lbl {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-top: 2px;
      display: block;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
    }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
      cursor: pointer;
      transition: border-color .15s, transform .15s;
    }
    .card:hover { border-color: var(--accent); transform: translateY(-1px); }
    .card .title {
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 4px;
    }
    .card .desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.55;
      margin-bottom: 0;
    }
    .card .tip {
      font-size: 11px;
      color: var(--muted);
      font-style: italic;
      margin-top: 6px;
    }
    /* Provider cards live in the same grid as the scenario cards but
       are disclosure-only (no click action, no accent border on hover). */
    .provider-card { cursor: default; }
    .provider-card:hover { border-color: var(--border); transform: none; }
    .provider-card .provider-cc {
      font-family: var(--mono, monospace);
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin: 4px 0 6px;
    }
    .provider-card .provider-cc .lbl {
      font-weight: 400;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .03em;
      text-transform: uppercase;
      margin-left: 4px;
    }
    .provider-card .cap-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 4px;
    }
    .cap-chip {
      display: inline-block;
      font-size: 10px;
      font-family: var(--mono, monospace);
      padding: 2px 6px;
      border-radius: 10px;
      background: rgba(108,142,191,.10);
      color: var(--accent);
      border: 1px solid rgba(108,142,191,.25);
    }
    .provider-card .muted {
      font-size: 11px;
      color: var(--muted);
      font-style: italic;
    }
    .l-footer {
      border-top: 1px solid var(--border);
      padding-top: 14px;
      margin-top: 22px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }
    .l-footer a { color: var(--accent); text-decoration: none; }
    .l-footer a:hover { text-decoration: underline; }
    .principle {
      border-left: 2px solid var(--accent);
      padding: 4px 12px;
      margin-bottom: 12px;
      background: rgba(108,142,191,.05);
    }
    .principle strong { color: var(--text); display: block; margin-bottom: 2px; }
    .principle span   { color: var(--muted); font-size: 12px; }

    /* Ambiguity callout — surfaced when the API can't pick a single
       interpretation. Visually distinct from the data box so the user
       sees "this needs your input" instead of mistaking it for content. */
    .ambig {
      border: 1px solid #b45309;
      background: rgba(180, 83, 9, .08);
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 14px;
    }
    .ambig h3 {
      color: #fbbf24;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 6px;
    }
    .ambig .lead { color: var(--text); font-size: 13px; margin-bottom: 10px; }
    .ambig .group { margin-top: 10px; }
    .ambig .mention {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 4px;
    }
    .ambig .mention strong {
      color: var(--text);
      font-family: var(--mono);
      background: rgba(255,255,255,.06);
      padding: 1px 5px;
      border-radius: 3px;
    }
    .ambig .cand-list { display: flex; flex-direction: column; gap: 4px; }
    .ambig .cand {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      border-radius: 5px;
      background: rgba(255,255,255,.03);
      cursor: pointer;
      transition: background .12s;
    }
    .ambig .cand:hover { background: rgba(255,255,255,.07); }
    .ambig .cand .label { color: var(--text); font-weight: 600; min-width: 140px; }
    .ambig .cand .id    { color: var(--muted); font-family: var(--mono); font-size: 11px; }
    .ambig .cand .hint  { color: var(--muted); font-size: 11px; font-style: italic; margin-left: auto; }
    .ambig .tip {
      margin-top: 10px;
      color: var(--muted);
      font-size: 11px;
      font-style: italic;
    }

    /* Graph scenario — Cytoscape canvas + side panel for the node detail.
       The container is sized explicitly because Cytoscape needs a
       deterministic host size to lay out; height matches the rest of the
       scenario form so the user can scroll the rest of the page without
       fighting the canvas. */
    .graph-wrap {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 14px;
      margin-top: 14px;
    }
    .graph-canvas {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      height: 520px;
      position: relative;
    }
    .graph-side {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 12px;
      max-height: 520px;
      overflow-y: auto;
    }
    .graph-side h3 { font-size: 12px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
    .graph-side .label { color: var(--text); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
    .graph-side .alias { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-bottom: 8px; word-break: break-all; }
    .graph-side .tip { color: var(--muted); font-size: 11px; line-height: 1.5; }
    .nearby-list {
      list-style: none;
      padding: 0;
      margin: 8px 0 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 4px 14px;
    }
    .nearby-list li { padding: 2px 0; font-size: 13px; }
    @media (max-width: 760px) {
      .nearby-list { grid-template-columns: 1fr 1fr; }
    }

    .graph-empty {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-style: italic;
      font-size: 13px;
      pointer-events: none;
    }
    @media (max-width: 760px) {
      .graph-wrap { grid-template-columns: 1fr; }
      .graph-side { max-height: 240px; }
    }