:root {
  color-scheme: dark;
  --night: #0b1320;
  --panel: #111e2e;
  --panel-light: #17283b;
  --paper: #f4f0e6;
  --muted: #9dafc0;
  --line: rgba(196, 215, 230, .18);
  --mint: #70f0bd;
  --gold: #ffd166;
  --coral: #ff7a69;
  --blue: #72b9ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(circle at 8% 4%, rgba(114, 185, 255, .18), transparent 28rem),
    radial-gradient(circle at 92% 38%, rgba(112, 240, 189, .09), transparent 34rem),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--night);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  color: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a { font: inherit; }

.tracker {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  width: min(1180px, 100%);
  margin: auto;
  padding: clamp(16px, 3vw, 34px);
}

.topbar { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 4px 2px 8px; }
.kicker, .label { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: .1rem 0 0; font-size: clamp(2rem, 6vw, 4.2rem); line-height: .92; letter-spacing: -.065em; }
.source-status { padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.source-status.live { border-color: rgba(112, 240, 189, .45); color: var(--mint); }
.source-status.fallback { border-color: rgba(255, 209, 102, .45); color: var(--gold); }

.panel { border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(23,40,59,.95), rgba(12,24,38,.96)); box-shadow: 0 22px 55px rgba(0,0,0,.2); }
.official { grid-column: 1 / 8; padding: clamp(18px, 3vw, 30px); }
.estimate { grid-column: 8 / -1; padding: clamp(18px, 3vw, 30px); background: linear-gradient(145deg, rgba(25,53,59,.96), rgba(12,29,38,.97)); }
.history { grid-column: 1 / 9; padding: clamp(18px, 3vw, 28px); }
.explainer { grid-column: 9 / -1; padding: clamp(18px, 3vw, 28px); }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.section-heading h2, .explainer h2 { margin: .35rem 0 0; font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: -.025em; }
.official-label { color: var(--blue); }
.estimate-label { color: var(--mint); }
.as-of { margin: 0; color: var(--muted); font-size: .72rem; white-space: nowrap; }

.debt-number { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.official-number { margin: clamp(22px, 5vw, 44px) 0 .7rem; color: var(--paper); font-size: clamp(2rem, 4.6vw, 4rem); line-height: .98; }
.estimate-number { margin: clamp(22px, 5vw, 44px) 0 .7rem; color: var(--mint); font-size: clamp(1.7rem, 3.5vw, 3rem); line-height: 1.02; text-shadow: 0 0 24px rgba(112,240,189,.14); }
.daily-change, .rate { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 750; }
.positive { color: var(--coral); }
.negative { color: var(--mint); }
.disclaimer { margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; line-height: 1.55; }
.moving-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(112,240,189,.1); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(112,240,189,0); } }

.breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1.6rem; }
.breakdown article { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,13,23,.26); }
.breakdown-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .68rem; font-weight: 800; }
.breakdown-heading strong { color: var(--paper); }
.breakdown article p { margin: .55rem 0 .7rem; font: 850 clamp(.9rem, 1.7vw, 1.15rem) ui-monospace, SFMono-Regular, Menlo, monospace; }
.meter { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .5s ease; }
.meter.intragov span { background: var(--gold); }

#trend-chart { display: block; width: 100%; height: 190px; margin-top: 20px; }
.recent-records { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 12px; }
.record { padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,13,23,.24); }
.record time { display: block; color: var(--muted); font-size: .62rem; }
.record strong { display: block; margin-top: 4px; font-size: .72rem; }
.record small { display: block; margin-top: 3px; font-size: .62rem; font-weight: 800; }
.refresh { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--paper); font-size: .7rem; font-weight: 850; cursor: pointer; }
.refresh:hover { border-color: var(--mint); color: var(--mint); }
.refresh:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.refresh:disabled { cursor: wait; opacity: .55; }

.definitions { display: grid; gap: 12px; margin-top: 1.3rem; }
.definitions p, .source-note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.58; }
.definitions strong { color: var(--paper); }
.source-note { margin-top: 1.35rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.source-note a { color: var(--gold); text-underline-offset: .2em; }

@media (max-width: 860px) {
  .official, .estimate, .history, .explainer { grid-column: 1 / -1; }
  .recent-records { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
}

@media (max-width: 540px) {
  .tracker { padding: 12px; }
  .topbar { align-items: start; }
  .source-status { max-width: 135px; text-align: center; }
  .breakdown { grid-template-columns: 1fr; }
  .official-number { font-size: clamp(1.58rem, 7.7vw, 2.2rem); }
  .estimate-number { font-size: clamp(1.45rem, 7vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}