:root {
  color-scheme: dark;
  --bg: #080b13;
  --surface: #0f1421;
  --surface-2: #151b2b;
  --surface-3: #1a2133;
  --border: #293148;
  --border-bright: #3d4865;
  --text: #f4f6ff;
  --muted: #9da7bd;
  --subtle: #737f98;
  --accent: #6670ff;
  --accent-2: #9b5cff;
  --good: #43d39e;
  --warn: #f5b54c;
  --bad: #ff7188;
  --unknown: #8a96ad;
  --radius: 10px;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% -10%, rgba(102, 112, 255, .18), transparent 35rem),
    radial-gradient(circle at 86% 8%, rgba(155, 92, 255, .11), transparent 28rem),
    var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}

button, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #aab0ff;
  outline-offset: 2px;
}
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 20; padding: .65rem 1rem; background: var(--accent); color: white; border-radius: 6px; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(61, 72, 101, .55);
  background: rgba(8, 11, 19, .78);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: white; text-decoration: none; font-size: .86rem; font-weight: 800; letter-spacing: .09em; }
.brand > span:last-child span { color: #9aa2ff; }
.brand-mark { width: 25px; height: 25px; display: flex; align-items: end; gap: 3px; padding: 4px; border: 1px solid #4650c7; border-radius: 6px; background: #11162a; }
.brand-mark i { display: block; width: 4px; border-radius: 2px 2px 0 0; background: linear-gradient(var(--accent-2), var(--accent)); }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 12px; }
.audit-stamp { color: var(--muted); font-size: .78rem; display: flex; align-items: center; gap: .5rem; }
.audit-stamp span { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(67,211,158,.11); }

main { width: min(1680px, 100%); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem); }
.intro { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin: .6rem 0 1.4rem; }
.eyebrow { color: #9ba3ff; letter-spacing: .16em; font-weight: 800; font-size: .72rem; margin: 0 0 .45rem; }
h1 { font-size: clamp(1.7rem, 3.1vw, 2.65rem); letter-spacing: -.04em; line-height: 1.05; margin: 0; }
.lede { margin: .65rem 0 0; max-width: 760px; color: var(--muted); }
.confidence { min-width: 178px; display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, rgba(102,112,255,.12), rgba(155,92,255,.06)); }
.confidence strong { font: 700 1.65rem/1 var(--mono); color: #c7caff; }
.confidence span { color: var(--muted); font-size: .76rem; line-height: 1.25; max-width: 100px; }
.scope-summary { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }
.scope-summary span { padding: .27rem .5rem; color: var(--muted); border: 1px solid rgba(61,72,101,.65); border-radius: 5px; background: rgba(15,20,33,.45); font-size: .7rem; }
.scope-summary strong { color: #c8cbff; font-family: var(--mono); }

.workspace { min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 14px; background: rgba(15,20,33,.92); box-shadow: 0 22px 70px rgba(0,0,0,.28); overflow: hidden; }
.toolbar { display: flex; align-items: end; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(25,32,51,.8), rgba(15,20,33,.8)); }
.toolbar label > span:first-child { display: block; margin-bottom: .38rem; color: var(--muted); font-size: .75rem; font-weight: 650; }
.model-picker { flex: 1 1 360px; max-width: 560px; }
.model-picker > select { width: 100%; min-height: 42px; color: var(--text); border: 1px solid var(--border-bright); border-radius: 8px; padding: .55rem 2.2rem .55rem .72rem; background: #0a0e19; }
.model-picker > select:focus { border-color: #7d84ff; box-shadow: 0 0 0 3px rgba(102,112,255,.15); }
.primary-button { min-height: 42px; padding: .6rem .9rem; color: white; border: 1px solid #7d6cff; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 750; box-shadow: 0 7px 20px rgba(102,112,255,.2); }
.primary-button:hover { filter: brightness(1.08); }
.fps-control { margin-left: auto; }
.fps-control select, .cell-select { min-height: 38px; color: var(--text); border: 1px solid var(--border-bright); border-radius: 7px; padding: .42rem 2rem .42rem .62rem; background: #0b101c; }
.view-toggle { display: flex; border: 1px solid var(--border-bright); border-radius: 8px; overflow: hidden; background: #0b101c; }
.view-toggle button { min-height: 40px; border: 0; color: var(--muted); padding: .5rem .8rem; background: transparent; font-size: .82rem; font-weight: 650; }
.view-toggle button + button { border-left: 1px solid var(--border-bright); }
.view-toggle button.active { color: white; background: #262d47; }
.view-toggle span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: .25rem; border-radius: 99px; background: rgba(155,92,255,.23); font-size: .7rem; }

.table-meta { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1rem; color: var(--subtle); font-size: .74rem; border-bottom: 1px solid var(--border); }
.table-meta p { margin: 0; }.table-meta strong { color: var(--text); }.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: .45rem; border-radius: 50%; background: var(--good); }
.table-scroll-hint { display: none; margin: 0; padding: .48rem 1rem; color: #aeb5d0; border-bottom: 1px solid var(--border); background: rgba(102,112,255,.06); font-size: .72rem; }
.table-wrap { min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; contain: inline-size layout paint; max-height: min(64vh, 820px); }
table { width: 100%; min-width: 1240px; border-collapse: separate; border-spacing: 0; }
th { position: sticky; top: 0; z-index: 3; padding: .7rem .72rem; text-align: left; color: #aab3c8; background: #111725; border-bottom: 1px solid var(--border-bright); font-size: .7rem; line-height: 1.25; letter-spacing: .035em; text-transform: uppercase; }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 2; }
th:first-child { z-index: 4; background: #111725; }
td { padding: .78rem .72rem; vertical-align: middle; border-bottom: 1px solid rgba(41,49,72,.75); background: rgba(15,20,33,.97); }
td:first-child { background: #101622; box-shadow: 8px 0 18px rgba(0,0,0,.13); }
tr:hover td { background-color: #141a29; } tr:hover td:first-child { background-color: #151b2a; }
.model-name { display: flex; align-items: flex-start; gap: .6rem; min-width: 150px; }
.family-chip { flex: 0 0 auto; margin-top: .18rem; padding: .2rem .35rem; color: #c9caff; border: 1px solid #454c8b; border-radius: 4px; background: rgba(102,112,255,.1); font: 700 .63rem/1 var(--mono); }
.model-name strong { display: block; font-size: .9rem; line-height: 1.25; }.model-name small { display: block; color: var(--subtle); font-size: .7rem; margin-top: .2rem; }
.switch { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .78rem; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 99px; background: #30384d; border: 1px solid #48516a; transition: .2s; }
.switch-track::after { content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: #a5aec1; transition: .2s; }
.switch input:checked + .switch-track { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-color: #8a7cff; }.switch input:checked + .switch-track::after { left: 18px; background: white; }
.switch input:disabled + .switch-track { opacity: .38; cursor: not-allowed; }
.extra-settings { display: grid; gap: .4rem; min-width: 165px; }.compact-label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: .4rem; color: var(--subtle); font-size: .68rem; }.compact-label select { min-height: 31px; padding: .25rem 1.3rem .25rem .4rem; font-size: .72rem; }
.latency-value { min-width: 110px; font: 700 .96rem/1.3 var(--mono); letter-spacing: -.035em; }.latency-value small { display: block; margin-top: .2rem; color: var(--subtle); font: 500 .64rem/1.2 var(--sans); letter-spacing: 0; }
.direct { color: #8eeac6; }.calculated { color: #cfd3ff; }.unknown { color: var(--unknown); }
.chain-value { min-width: 128px; margin-top: .55rem; padding: .42rem .5rem; border: 1px solid rgba(102,112,255,.42); border-radius: 6px; background: rgba(102,112,255,.07); }
.chain-chip { display: inline-flex; padding: .14rem .28rem; color: #c9caff; border: 1px solid #454c8b; border-radius: 3px; font: 750 .52rem/1 var(--mono); letter-spacing: .06em; }
.chain-value strong { display: block; margin-top: .26rem; color: #91e5c4; font: 700 .72rem/1.25 var(--mono); letter-spacing: -.02em; }
.chain-value small { display: block; margin-top: .2rem; color: var(--subtle); font: 500 .59rem/1.25 var(--sans); letter-spacing: 0; }
.chain-inactive { opacity: .72; }.chain-inactive strong { color: var(--unknown); }
.fit-grid { display: grid; gap: .28rem; min-width: 186px; }.fit-item { display: grid; grid-template-columns: 64px 88px; gap: .35rem; align-items: center; font-size: .66rem; color: var(--subtle); }.fit-badge { display: inline-flex; align-items: center; justify-content: center; width: 88px; min-height: 21px; padding: .15rem .3rem; border-radius: 4px; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }.fit-good { color: #80e5bd; background: rgba(67,211,158,.1); border: 1px solid rgba(67,211,158,.28); }.fit-warn { color: #ffd27f; background: rgba(245,181,76,.1); border: 1px solid rgba(245,181,76,.28); }.fit-bad { color: #ff9bac; background: rgba(255,113,136,.1); border: 1px solid rgba(255,113,136,.28); }.fit-unknown { color: #aab3c8; background: rgba(138,150,173,.1); border: 1px solid rgba(138,150,173,.26); }
.row-actions { display: flex; align-items: center; gap: .35rem; justify-content: flex-end; }.icon-button { min-width: 34px; height: 34px; display: inline-grid; place-items: center; color: #b8c0d3; border: 1px solid var(--border); border-radius: 7px; background: #141a29; }.icon-button:hover { color: white; border-color: #596584; }.icon-button.danger:hover { color: var(--bad); border-color: rgba(255,113,136,.45); }
.detail-row td { position: static; padding: 0; background: #0b101a; box-shadow: none; }.detail-row:hover td { background: #0b101a; }.detail-panel { display: none; grid-template-columns: minmax(260px, 1.1fr) minmax(300px, 1.5fr) minmax(230px, .9fr); gap: 1rem; padding: 1rem 1.1rem 1.1rem 2rem; border-bottom: 1px solid var(--border-bright); }.detail-row.open .detail-panel { display: grid; }.detail-panel h3 { margin: 0 0 .35rem; color: #aeb5ff; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }.detail-panel p { margin: 0; color: var(--muted); font-size: .78rem; }.source-link { display: block; color: #b6bbff; text-underline-offset: 3px; font-size: .78rem; margin-bottom: .35rem; }.source-meta { color: var(--subtle); font-size: .7rem; }.warning-line { margin-top: .45rem !important; padding-left: .7rem; border-left: 2px solid var(--warn); color: #d7c49c !important; }.provenance { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }.provenance span { padding: .2rem .38rem; border: 1px solid var(--border); border-radius: 4px; color: var(--subtle); font: 600 .64rem/1 var(--mono); }
.source-record + .source-record { margin-top: .7rem; }
.scope-pill { display: inline-flex; margin-top: .65rem; padding: .22rem .42rem; color: #bdc2ff; border: 1px solid #454c8b; border-radius: 4px; background: rgba(102,112,255,.08); font: 650 .65rem/1.2 var(--mono); }
.fit-reasons { display: grid; gap: .32rem; margin-top: .65rem; }
.chain-detail { margin-top: .65rem !important; padding: .55rem .65rem; border: 1px solid rgba(102,112,255,.3); border-radius: 6px; background: rgba(102,112,255,.06); }.chain-detail strong { color: #c6c9ff; }
.na-control, .fixed-value { color: var(--subtle); font-size: .76rem; }
.load-error { display: grid; gap: .3rem; padding: 1.2rem; color: var(--muted); }.load-error strong { color: var(--bad); }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--muted); }.empty-state strong, .empty-state span { display: block; }.empty-state strong { color: var(--text); margin-bottom: .35rem; }
.method-note { display: grid; grid-template-columns: 170px 1fr; gap: 1rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid rgba(61,72,101,.65); border-radius: 10px; background: rgba(15,20,33,.55); }.method-note > strong { color: #c3c7ff; font-size: .82rem; }.method-note p { margin: 0; color: var(--muted); font-size: .78rem; }.method-note b { color: #c9cee1; }.methodology { margin-top: .55rem; color: var(--muted); font-size: .76rem; }.methodology summary { color: #afb5ff; cursor: pointer; }.methodology p { margin-top: .5rem; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; padding: .9rem 1rem 0; border-top: 1px solid var(--border); color: var(--subtle); font-size: .7rem; }
.site-footer a { color: #b6bbff; text-underline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: 1.3rem; z-index: 30; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; padding: .7rem .9rem; border: 1px solid #545e7d; border-radius: 8px; background: #171e2f; color: white; box-shadow: 0 12px 30px rgba(0,0,0,.35); font-size: .82rem; transition: .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) {
  .toolbar { flex-wrap: wrap; }.model-picker { max-width: none; flex-basis: calc(100% - 9rem); }.fps-control { margin-left: 0; }.view-toggle { margin-left: auto; }
  .detail-panel { grid-template-columns: 1fr 1fr; }.detail-panel > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .audit-stamp { display: none; }.intro { grid-template-columns: 1fr; gap: .8rem; }.confidence { justify-self: start; }.toolbar { align-items: stretch; }.model-picker { flex-basis: 100%; }.primary-button { flex: 1; }.fps-control { min-width: 120px; }.fps-control select { width: 100%; }.view-toggle { width: 100%; margin-left: 0; }.view-toggle button { flex: 1; }.table-scroll-hint { display: block; }.method-note { grid-template-columns: 1fr; gap: .35rem; }.detail-panel { grid-template-columns: 1fr; padding-left: 1rem; }.detail-panel > :last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }