html { color-scheme: dark; background: #272a34; color: #f2f2f2; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body { margin: 0; }
main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0; }
main.wide { width: min(1180px, calc(100% - 40px)); }
h1 { margin: 0 0 28px; color: #f1b94a; font-size: 24px; }
a { display: inline-block; margin-top: 24px; color: #f1b94a; }
.article-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.table-wrap { overflow: auto; border: 1px solid #4a4e5c; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid #3a3e49; text-align: left; white-space: nowrap; }
th { color: #f1b94a; background: #30333d; }
.chart { width: 100%; height: auto; border: 1px solid #4a4e5c; background: #20232b; }
.series { fill: none; stroke: #f1b94a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.series-1 { stroke: #62b8f6; } .series-2 { stroke: #7fd18a; } .series-3 { stroke: #ef7f7f; } .series-4 { stroke: #b697ef; } .series-5 { stroke: #e29b63; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; list-style: none; color: #b8bbc5; }
.owner-actions { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.owner-actions button { border: 1px solid #6d7180; border-radius: 4px; padding: 6px 10px; background: transparent; color: #f2f2f2; font: inherit; cursor: pointer; }
.owner-actions button:disabled { cursor: default; opacity: 0.55; }
.owner-actions [role="alert"] { color: #ef7f7f; }
:focus-visible { outline: 2px solid #f1b94a; outline-offset: 2px; }
.eyebrow { margin: 0 0 10px; color: #b8bbc5; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
main.pane h1 { margin-bottom: 14px; overflow-wrap: anywhere; }
.pane-description { margin: 0; max-width: 62ch; color: #d5d7de; overflow-wrap: anywhere; }
.pane-facts { margin: 28px 0 0; border: 1px solid #4a4e5c; background: #20232b; }
.pane-facts > div { display: flex; gap: 16px; padding: 8px 12px; border-bottom: 1px solid #3a3e49; }
.pane-facts > div:last-child { border-bottom: none; }
.pane-facts dt { flex: 0 0 clamp(110px, 26%, 200px); color: #b8bbc5; }
.pane-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.handoff { margin-top: 32px; }
.cta { margin: 0; border: 1px solid #f1b94a; border-radius: 4px; padding: 10px 16px; color: #f1b94a; text-decoration: none; }
.cta:hover { background: #f1b94a; color: #20232b; }
.descriptor { margin: 14px 0 0; max-width: 58ch; color: #b8bbc5; }
.layout-share h1 { margin-bottom: 10px; overflow-wrap: anywhere; }
.layout-meta { margin: 0; color: #b8bbc5; }
.layout-workspace { position: relative; display: flex; height: 440px; margin-top: 28px; padding: 10px; border: 1px solid #4a4e5c; background: #181b22; overflow: hidden; }
.layout-split { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; gap: 8px; }
.layout-split.horizontal { flex-direction: row; }
.layout-split.vertical { flex-direction: column; }
.layout-split-child { display: flex; flex-grow: var(--share-ratio); flex-basis: 0; min-width: 0; min-height: 0; }
.layout-pane { display: flex; flex: 1 1 0; min-width: 0; min-height: 42px; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; border: 1px solid #3a4759; background: #20232b; overflow: hidden; }
.layout-pane strong { color: #f1b94a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-pane span { color: #b8bbc5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-pane.missing { color: #b8bbc5; }
.layout-extra-panes { position: absolute; right: 20px; bottom: 20px; display: grid; width: min(360px, 42%); gap: 8px; padding: 8px; border: 1px solid #52657d; background: #181b22; }
@media (max-width: 640px) {
  main { padding: 40px 0; }
  .pane-facts > div { flex-direction: column; gap: 2px; }
  .pane-facts dt { flex: none; }
  .cta { display: block; text-align: center; }
  .layout-workspace { height: 360px; padding: 6px; }
  .layout-split { gap: 4px; }
  .layout-pane { padding: 7px; font-size: 12px; }
  .layout-extra-panes { right: 10px; bottom: 10px; width: 52%; }
}
.snapshot-date, .chart-notes { color: #b8bbc5; font-size: 12px; }
.chart-panel { margin: 28px 0; }
.chart-dates { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.chart-unit { display: block; margin-bottom: 8px; font-size: 12px; }
.chart-plot { display: flex; height: 300px; }
.chart-plot .chart { flex: 1; min-width: 0; height: 100%; }
.chart-y-axis { display: flex; flex-direction: column; justify-content: space-between; padding: 18px 8px 18px 0; width: 76px; flex-shrink: 0; text-align: right; font-size: 12px; line-height: 1; }
.chart-dates { margin-top: 8px; margin-left: 84px; }
.chart-grid { stroke: #4a4e5c; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.series-point { fill: #f1b94a; stroke-width: 4; vector-effect: non-scaling-stroke; }
.series-point.series-0 { stroke: #f1b94a; }
.series-point.series-1 { fill: #62b8f6; } .series-point.series-2 { fill: #7fd18a; } .series-point.series-3 { fill: #ef7f7f; } .series-point.series-4 { fill: #b697ef; } .series-point.series-5 { fill: #e29b63; }
.series-key { display: inline-block; width: 14px; margin-right: 6px; border-top: 2px solid #f1b94a; vertical-align: middle; }
.series-key.series-1 { border-color: #62b8f6; } .series-key.series-2 { border-color: #7fd18a; } .series-key.series-3 { border-color: #ef7f7f; } .series-key.series-4 { border-color: #b697ef; } .series-key.series-5 { border-color: #e29b63; }
.shared-data summary { cursor: pointer; padding: 10px 0; }
.shared-data caption { text-align: left; padding: 10px; }
.shared-data .table-wrap { max-height: 360px; margin-top: 12px; }
@media (max-width: 640px) {
  .chart-dates { flex-wrap: wrap; }
  .chart-dates span:nth-child(2) { order: 3; flex-basis: 100%; text-align: center; }
  .chart-plot { height: 200px; }
  .chart-y-axis { width: 64px; padding-top: 12px; padding-bottom: 12px; }
  .chart-dates { margin-left: 72px; }
  .legend { font-size: 12px; }
}

main.wide h1, .legend li, .chart-notes li, .shared-data caption { overflow-wrap: anywhere; }
.chart-unavailable { color: #b8bbc5; border: 1px solid #4a4e5c; padding: 20px; }
.chart-y-axis { font-variant-numeric: tabular-nums; }