:root { --ink:#e8edf7; --muted:#9ca9c0; --canvas:#0b1020; --panel:#121a2c; --line:#26324a; --accent:#79e0c2; --accent-deep:#1e6d5f; --warning:#f3c878; --danger:#f48787; --radius:18px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(900px 500px at 85% -10%,#17334a 0%,transparent 70%),var(--canvas); }
button { font:inherit; }
a { color:inherit; }
.skip-link { position:absolute; left:1rem; top:-4rem; padding:.7rem 1rem; z-index:4; background:#fff; color:#111827; border-radius:8px; }
.skip-link:focus { top:1rem; }
.topbar { height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1200px)/2)); background:#0b1020d9; backdrop-filter:blur(14px); position:sticky; top:0; z-index:3; }
.brand { display:flex; align-items:center; gap:10px; line-height:1.15; }.brand strong { display:block; letter-spacing:-.02em; }.brand small { color:var(--muted); font-size:.76rem; }.brand-mark { display:grid; place-content:center; width:34px; height:34px; border-radius:11px; color:#081315; background:var(--accent); font-size:1.55rem; font-weight:800; }
.topbar-actions { display:flex; gap:10px; align-items:center; }.mode-badge,.status { padding:6px 9px; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap; }.mode-badge { color:#b9eee0; border:1px solid #2e7468; background:#123d39; }.button-secondary { padding:8px 12px; color:var(--ink); border:1px solid #41506b; border-radius:9px; background:transparent; cursor:pointer; }.button-secondary:hover { border-color:var(--accent); color:var(--accent); }.button-secondary:focus-visible,a:focus-visible { outline:3px solid var(--warning); outline-offset:3px; }
.shell { width:min(1200px,calc(100% - 40px)); margin:0 auto; }.hero { padding:72px 0 38px; display:flex; justify-content:space-between; gap:28px; align-items:end; }.eyebrow { color:var(--accent); font-size:.72rem; letter-spacing:.14em; font-weight:800; margin:0 0 9px; }.hero h1,.section-heading h2 { letter-spacing:-.045em; margin:0; }.hero h1 { font-size:clamp(2.35rem,6vw,4.5rem); max-width:700px; line-height:.98; }.subtitle { max-width:640px; color:var(--muted); line-height:1.6; margin:18px 0 0; }.capture-card { min-width:230px; padding:18px; border-radius:var(--radius); border:1px solid #315267; background:linear-gradient(145deg,#14253b,#0f1829); display:grid; gap:6px; }.capture-card .label { font-size:.77rem; color:var(--muted); }.capture-card strong { font-size:1.05rem; }.status { width:max-content; }.neutral { color:#c5d0e3; background:#1c2940; }.fresh { color:#b9eee0; background:#123d39; }.stale { color:#ffdb93; background:#49391e; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:30px; }.metrics article { min-height:112px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#11192aab; display:flex; flex-direction:column; justify-content:space-between; }.metrics span,.metrics small { color:var(--muted); font-size:.78rem; }.metrics strong { font-size:2rem; letter-spacing:-.06em; }
.section-nav { display:flex; gap:20px; border-bottom:1px solid var(--line); margin-bottom:30px; }.section-nav a { padding:11px 0; text-decoration:none; color:var(--muted); font-weight:700; font-size:.84rem; }.section-nav a:hover { color:var(--accent); }
.panel { border:1px solid var(--line); border-radius:var(--radius); background:#11192ad9; padding:24px; margin:0 0 20px; box-shadow:0 18px 50px #00000018; }.section-heading { display:flex; justify-content:space-between; gap:24px; align-items:start; margin-bottom:20px; }.section-heading h2 { font-size:1.45rem; }.section-heading > p { color:var(--muted); margin:2px 0 0; font-size:.86rem; max-width:360px; line-height:1.5; }.compact { margin-bottom:14px; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:670px; } th { color:var(--muted); font-size:.72rem; letter-spacing:.06em; text-align:left; text-transform:uppercase; padding:0 12px 12px; } td { padding:14px 12px; border-top:1px solid var(--line); font-size:.88rem; } td:first-child,th:first-child { padding-left:0; } td:last-child,th:last-child { padding-right:0; }.market-name { max-width:370px; font-weight:700; }.mono { color:var(--muted); font-family:"SFMono-Regular",Consolas,monospace; font-size:.77rem; }.positive { color:var(--accent); font-weight:800; }.negative { color:var(--danger); font-weight:800; }.unknown { color:var(--muted); }
.empty-state { border:1px dashed #40506a; border-radius:12px; padding:23px; color:var(--muted); display:grid; gap:4px; line-height:1.45; }.empty-state strong { color:var(--ink); }.two-column { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.two-column .panel { margin:0 0 20px; }.data-list { display:grid; gap:9px; }.data-row { border-top:1px solid var(--line); padding:11px 0; display:flex; justify-content:space-between; gap:12px; align-items:center; }.data-row:first-child { border-top:0; }.data-row strong { display:block; font-size:.9rem; }.data-row small { color:var(--muted); display:block; margin-top:3px; }.range { color:var(--accent); font-weight:800; white-space:nowrap; }
.rules-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }.rule-card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#0e1626; }.rule-card h3 { margin:0 0 5px; font-size:1rem; }.rule-card p { color:var(--muted); font-size:.83rem; line-height:1.5; }.rule-card a { color:var(--accent); font-size:.8rem; }.bucket-list { color:var(--muted); font-size:.78rem; line-height:1.5; }footer { display:flex; justify-content:space-between; gap:12px; max-width:1200px; width:calc(100% - 40px); margin:25px auto; color:var(--muted); font-size:.76rem; }
@media (max-width:760px) { .topbar { padding:0 20px; }.mode-badge { display:none; }.shell { width:min(100% - 28px,1200px); }.hero { padding-top:48px; flex-direction:column; align-items:start; }.capture-card { width:100%; }.metrics { grid-template-columns:repeat(2,1fr); }.section-heading { flex-direction:column; gap:10px; }.two-column { grid-template-columns:1fr; gap:0; }.panel { padding:18px; } footer { width:calc(100% - 28px); flex-direction:column; } }