.observatory-page { background:#101213; padding:24px; color:#f2f4f4; }
.observatory-page::before { display:none; }
.obs { max-width:1320px; margin:32px auto 56px; font-size:1rem; }
.obs *, #detail * { letter-spacing:0; }
.obs h1 { font:700 2rem/1.2 system-ui,sans-serif; margin:8px 0 0; overflow-wrap:anywhere; }
.obs h2, #detail h2 { font-size:1.25rem; line-height:1.4; }
.obs-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.obs-eyebrow { color:#72d8c0; font-size:.875rem; font-weight:650; }
.obs button, #detail button { width:auto; min-height:44px; margin:0; padding:9px 14px; background:#24292b; color:#edf4f1; border:1px solid #454e50; border-radius:5px; font-size:.875rem; box-shadow:none; }
.obs button::before, #detail button::before { display:none; }
.obs button:hover:not(:disabled), #detail button:hover { background:#333d3e; transform:none; box-shadow:none; }
.obs button[aria-pressed="true"] { border-color:#72d8c0; color:#9aead7; background:#18352e; }
.obs-sources { display:flex; flex-wrap:wrap; gap:12px 24px; padding:20px 0; border-bottom:1px solid #343b3d; font-size:.875rem; color:#bec7c7; }
.obs-source::before { content:''; display:inline-block; width:7px; height:7px; margin-right:8px; background:#72d8c0; border-radius:50%; }
.obs-source.stale::before { background:#edbd61; }
.obs-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid #343b3d; padding:24px 0; gap:24px; }
.obs-summary span { display:block; color:#bec7c7; font-size:.875rem; }
.obs-summary strong { font-size:2rem; font-variant-numeric:tabular-nums; }
.obs-movers { padding:24px 0; border-bottom:1px solid #343b3d; }
.obs-movers-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.obs-movers-heading h2 { margin:0; }
.obs-movers-heading h2 span { color:#bec7c7; font-size:.875rem; font-weight:400; margin-left:12px; }
.obs-movers-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.obs-movers-list li { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; align-items:start; gap:12px; padding:16px; min-height:220px; min-width:0; border:1px solid #343e40; border-radius:8px; background:#191f21; }
.obs-mover-rank { color:#aeb8b9; font-variant-numeric:tabular-nums; }
.obs-movers-list strong { text-align:left; font-size:1.5rem; font-variant-numeric:tabular-nums; }
.obs .obs-movers-list .obs-question { overflow-wrap:anywhere; font-size:.9375rem; }
.obs-movers-list .obs-meta { margin-top:12px; }
@media(max-width:1100px) { .obs-movers-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .obs-movers-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { .obs-movers-list { grid-template-columns:minmax(0,1fr); } .obs-movers-list li { min-height:180px; } }
.obs-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding:24px 0; }
.obs-toolbar label { display:grid; gap:6px; font-size:.875rem; color:#bec7c7; flex:1 1 160px; }
.obs-toolbar .obs-search { flex:3 1 260px; }
.obs input, .obs select { width:100%; min-width:0; min-height:44px; border:1px solid #454e50; border-radius:5px; background:#1b2022; color:#f2f4f4; font:inherit; padding:10px; }
.obs-tabs { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid #343b3d; padding-bottom:16px; }
.obs-note { color:#aeb8b9; font-size:.875rem; margin:16px 0; line-height:1.65; }
.obs-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.obs-table th { font-size:.875rem; font-weight:500; text-align:left; color:#b6c2c3; padding:12px 10px; border-bottom:1px solid #454e50; }
.obs-table td { padding:18px 10px; border-bottom:1px solid #2f3638; vertical-align:top; overflow-wrap:anywhere; }
.obs-table th:first-child { width:44%; }
.obs-table th:nth-child(2) { width:16%; }
.obs-table th:nth-child(3) { width:12%; }
.obs-table th:nth-child(4) { width:17%; }
.obs-table th:last-child { width:11%; }
.obs button.obs-question { text-align:left; font-size:1rem; font-weight:600; line-height:1.5; border:0; background:none; padding:0; min-height:0; color:#f2f4f4; }
.obs button.obs-question:hover { color:#9aead7; background:none; }
.obs-meta { display:block; font-size:.8125rem; color:#aeb8b9; margin-top:6px; }
.obs-prob { font-size:1.25rem; font-weight:650; font-variant-numeric:tabular-nums; }
.obs-bar { height:4px; background:#353d40; margin:10px 0; width:100%; max-width:120px; }
.obs-bar span { display:block; height:100%; background:#72d8c0; }
.obs .up, #detail .up { color:#85dfc5; }
.obs .down, #detail .down { color:#f7a3b6; }
.obs-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.obs-actions label { display:flex; align-items:center; gap:8px; min-height:44px; padding:4px; font-size:.875rem; cursor:pointer; }
.obs input[type="checkbox"] { width:18px; min-height:18px; height:18px; accent-color:#72d8c0; }
.obs button.obs-icon { width:44px; height:44px; min-height:44px; padding:11px; }
.obs-icon svg { width:20px; height:20px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.obs-empty { padding:48px 8px; color:#bec7c7; text-align:center; border-bottom:1px solid #343b3d; }
.obs-method { border-top:1px solid #343b3d; padding:20px 0; font-size:.875rem; color:#bec7c7; }
.obs-method summary { cursor:pointer; font-weight:600; color:#edf4f1; }
.obs-method p { margin-top:14px; max-width:900px; }
.obs-brief { display:grid; gap:0; }
.obs-brief article { padding:24px 0; border-bottom:1px solid #343b3d; }
.obs-brief p { margin-top:8px; color:#bec7c7; }
.obs-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:24px 0; }
#detail { position:fixed; margin:auto; background:#191e20; color:#edf4f1; padding:28px; border:1px solid #586263; border-radius:8px; width:min(760px,calc(100% - 32px)); max-height:85vh; overflow:auto; }
#detail::backdrop { background:rgb(0 0 0 / 72%); }
.obs-detail-header { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.obs-detail-header h2 { min-width:0; overflow-wrap:anywhere; }
#detail #close-detail { flex-shrink:0; }
.obs-source, .obs-meta, .obs-compare h2 { overflow-wrap:anywhere; }
.obs-toolbar label { min-width:0; }
#detail p { margin:16px 0; overflow-wrap:anywhere; white-space:pre-line; }
#detail canvas { display:block; width:100%; height:220px; margin:16px 0; }
#detail a { color:#9aead7; }
.obs-compare { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; }
.obs-compare article { padding:24px 0; min-width:0; }
.obs-compare p { margin:12px 0; overflow-wrap:anywhere; }
@media(max-width:760px) {
  .observatory-page { padding:12px; }
  .obs { margin-top:24px; }
  .obs h1 { font-size:1.625rem; }
  .obs-heading { flex-wrap:wrap; gap:16px; }
  .obs-summary { gap:12px; }
  .obs-summary strong { font-size:1.625rem; }
  .obs-summary span { font-size:.875rem; }
  .obs-table thead { display:none; }
  .obs-table, .obs-table tbody { display:block; }
  .obs-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px 0; border-bottom:1px solid #343b3d; gap:12px; }
  .obs-table td { display:block; border:0; padding:0; }
  .obs-table td:first-child { grid-column:1/-1; }
  .obs-table td[data-label]::before { content:attr(data-label); display:block; font-size:.8125rem; color:#aeb8b9; margin-bottom:4px; }
  .obs-tabs button { flex:1 1 auto; }
  .obs input, .obs select { font-size:1rem; }
  .obs button.obs-question { min-height:44px; }
  #detail { padding:16px; width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
  .obs-detail-header { gap:12px; position:sticky; top:-16px; background:#191e20; padding:12px 0; z-index:2; }
  #detail h2 { font-size:1.125rem; }
  .obs-compare { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:360px) { .obs-summary { grid-template-columns:minmax(0,1fr); gap:12px; } .obs-summary > div { display:flex; align-items:center; justify-content:space-between; gap:12px; } .obs-detail-header { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .observatory-page *, .observatory-page *::before { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }