:root { color-scheme: light; --text: #273244; --muted: #6b7280; --border: #e5e7eb; --accent: #ea580c; --accent-text: #c44908; --soft: #fff5eb; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--text); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button, a, input, select, summary { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); }
main { max-width: 1500px; padding: 25px 28px 22px; margin: 0 auto; }
.app-header { margin-bottom: 28px; }
h1 { font-family: "Source Sans Pro", ui-sans-serif, system-ui, sans-serif; text-align: center; margin: 0 0 20px; font-size: 25px; line-height: 1.3; letter-spacing: normal; font-weight: 600; }
h1 span { color: var(--muted); font-weight: inherit; }
.intro { margin: 0 0 6px; font-size: 14px; }
.intro a { text-decoration: none; }
h2 { margin: 0 0 3px; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.view-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.view-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 0 0 12px; margin-bottom: -1px; color: var(--muted); font-size: 15px; font-weight: 600; }
.view-tabs button[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
[hidden] { display: none !important; }
.secondary-button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font-size: 11px; white-space: nowrap; }
.secondary-button:hover:not(:disabled) { background: #f8fafb; border-color: #c6cdd6; }
fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.toolbar { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(230px, 1.25fr) minmax(135px, .8fr) minmax(185px, 1fr); gap: 12px; }
.field { display: grid; gap: 5px; }
.field > span { color: var(--muted); font-size: 11px; font-weight: 550; }
input, select { width: 100%; min-width: 0; height: 35px; border: 1px solid #dce2e9; border-radius: 5px; padding: 0 10px; background: #fff; color: var(--text); font-size: 12px; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206l4%204%204-4%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
input::placeholder { color: #88929f; }
.scope-line { display: flex; justify-content: space-between; gap: 15px; padding: 12px 1px 9px; font-size: 11px; color: var(--muted); }
.table-shell { overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
.leaderboard-table { min-width: 800px; table-layout: fixed; }
.leaderboard-table .rank-column { width: 54px; }
.leaderboard-table .method-column { width: 190px; }
.leaderboard-table .category-column { width: 80px; }
.leaderboard-table .input-column { width: 160px; }
th { padding: 11px 15px; background: #fafafa; border-bottom: 1px solid var(--border); color: var(--muted); text-align: right; white-space: nowrap; font-size: 12px; font-weight: 550; }
td { padding: 12px 15px; border-bottom: 1px solid #f0f2f5; text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbff; }
.leaderboard-table th:nth-child(-n+2), .leaderboard-table td:nth-child(-n+2), .leaderboard-table th:nth-child(4), .leaderboard-table td:nth-child(4) { text-align: left; }
.leaderboard-table .category-cell { text-align: left; padding-inline: 8px; }
.leaderboard-table th:nth-child(n+5), .leaderboard-table td:nth-child(n+5) { text-align: center; padding-inline: 10px; }
.rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 54px; }
.top-rank { color: var(--accent-text); font-weight: 650; }
.method-name { font-weight: 600; font-size: 12px; }
.category-pill { display: inline-block; background: #eff6ff; color: #2563eb; border-radius: 4px; padding: 3px 7px; font-size: 10px; }
.input-pill { display: inline-block; background: #f5f7fa; color: #5f6f86; border-radius: 4px; padding: 3px 7px; font-size: 10px; }
.with-effects { background: var(--soft); color: var(--accent-text); }
.score { font-variant-numeric: tabular-nums; }
.sort-score { background: #fffaf5; }
.best-score { color: var(--accent-text); font-weight: 700; }
.sort-button { padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 550; }
.sort-button:hover, .active-sort { color: var(--accent-text); }
.table-footer { display: flex; justify-content: space-between; gap: 15px; padding: 9px 1px 0; color: var(--muted); font-size: 11px; }
.loading-cell { text-align: center !important; padding: 32px; color: var(--muted); }
.methodology { margin-top: 30px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 15px 0; }
summary { cursor: pointer; font-size: 12px; font-weight: 550; }
.methodology-body { padding: 8px 0 3px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.methodology-body p { margin: 10px 0; }
.methodology-body ol { padding-left: 22px; }
.methodology-body strong { color: var(--text); font-weight: 550; }
.page-footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 4px; color: var(--muted); font-size: 10px; }
.notice { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff6ee; border: 1px solid #eed4c0; padding: 12px; border-radius: 6px; color: #8b4020; font-size: 12px; margin: 12px 0; }
.hidden { display: none !important; }
.explorer-toolbar { grid-template-columns: 1.3fr .7fr 1.2fr .6fr; }
.explorer-toolbar .field:nth-last-child(-n+2) { grid-column: span 2; }
.sample-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0; }
.sample-navigation { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 10px; color: var(--muted); }
.sample-navigation #sample-count { margin-right: 8px; font-size: 11px; }
.sample-metadata { flex: 1; min-width: 0; margin: 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
#sample-content[aria-busy="true"] { opacity: .55; pointer-events: none; }
.plot-shell { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#sample-plot { width: 100%; min-height: 545px; }
.plot-note { color: var(--muted); font-size: 11px; margin: 7px 0 18px; }
.forecast-options { margin: 20px 0 26px; }
.forecast-options summary { margin-bottom: 12px; font-size: 13px; }
.sample-scores input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.sample-score-shell { --score-header-height: 38px; --score-row-height: 40px; height: calc(var(--score-header-height) + 5 * var(--score-row-height) + 2px); overscroll-behavior: contain; }
.sample-scores { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 800px; }
.sample-scores thead tr { height: var(--score-header-height); }
.sample-scores tbody tr { height: var(--score-row-height); }
.sample-score-shell th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border); }
.trend-table { table-layout: fixed; }
.trend-table th { width: 25%; }
.sample-scores th, .sample-scores td, .trend-table th, .trend-table td { text-align: left; }
.sample-scores th:first-child, .sample-scores td:first-child { width: 100px; text-align: center; }
.sample-scores th:not(:first-child) { width: calc((100% - 100px) / 4); }

.sample-scores td { padding: 9px 15px; }
.sample-scores input { cursor: pointer; }
.effect-section { margin-top: 26px; }
.effect-section h2 { font-size: 15px; margin-bottom: 12px; }
.macro-overview { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.macro-overview strong { font-weight: 550; color: var(--text); margin-right: 7px; }
.micro-table { table-layout: fixed; }
.micro-table th:first-child { width: 40px; }
.micro-table th:nth-child(n+2):nth-child(-n+6) { width: calc((100% - 260px) / 5); }
.micro-table th:nth-child(7), .micro-table th:nth-child(8) { width: 70px; }
.micro-table th:nth-child(9) { width: 80px; }
.micro-table th, .micro-table td { text-align: left; padding-inline: 10px; white-space: normal; overflow-wrap: anywhere; }
.micro-table th:first-child, .micro-table td:first-child { text-align: center; }
@media (max-width: 900px) { .toolbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  main { padding: 23px 16px 16px; }
  h1 span { display: block; margin-top: 5px; }
  .intro { font-size: 12px; }
  .toolbar { gap: 10px; }
  .view-tabs { gap: 18px; }
  .view-tabs button { font-size: 13px; }
  .sample-heading { flex-wrap: wrap; gap: 8px; }
  .sample-metadata { flex-basis: 100%; }
  .sample-navigation { margin-left: auto; max-width: 100%; }
  h2 { font-size: 16px; }
  .scope-line, .table-footer, .page-footer { flex-direction: column; gap: 4px; }
}