/* ── Reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Colour tokens — light mode (default) ───────────────────── These match PaperMod's light theme palette closely. Each token is overridden in the dark-mode block below. */ :root { --bg: #ffffff; --bg2: #f3f4f6; --border: #d1d5db; --text: #111827; --muted: #6b7280; --red: #c0392b; /* Data-series colours are the same in both modes */ --col-signal: #2563eb; --col-dist: #16a34a; --col-score: #b45309; --col-anom: #c0392b; /* Chart internals (passed to Chart.js via JS) */ --chart-grid: rgba(0, 0, 0, 0.07); --chart-tick: rgba(0, 0, 0, 0.45); --radius: 4px; } /* ── Colour tokens — dark mode ──────────────────────────────── Triggered by the OS/browser preference, which PaperMod's toggle also sets via the attribute. We target both mechanisms so either one works. */ @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --bg2: #242424; --border: #3a3a3a; --text: #e5e5e5; --muted: #888888; --red: #e05252; --chart-grid: rgba(255, 255, 255, 0.07); --chart-tick: rgba(255, 255, 255, 0.40); } } /* PaperMod sets data-theme="dark" on when toggled. This mirrors the media query so the toggle works too. */ html[data-theme="dark"] { --bg: #1a1a1a; --bg2: #242424; --border: #3a3a3a; --text: #e5e5e5; --muted: #888888; --red: #e05252; --chart-grid: rgba(255, 255, 255, 0.07); --chart-tick: rgba(255, 255, 255, 0.40); } /* ── Layout ───────────────────────────────────────────────────── */ body { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.5; background: var(--bg); color: var(--text); padding: 28px 32px 40px; max-width: 820px; margin: 0 auto; } h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 4px; } .subtitle { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 28px; } /* ── Parameter controls ───────────────────────────────────────── */ .ctrl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 580px) { .ctrl-grid { grid-template-columns: repeat(2, 1fr); } } .ctrl label { display: block; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .ctrl input[type="range"] { width: 100%; accent-color: var(--col-signal); margin-bottom: 4px; } .ctrl .val { font-size: 15px; font-weight: 600; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .btn { font-family: inherit; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 16px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; border-radius: var(--radius); transition: background 0.12s, border-color 0.12s; } .btn:hover { background: var(--bg2); border-color: var(--muted); } .btn.reset { border-color: var(--red); color: var(--red); } .btn.reset:hover { background: color-mix(in srgb, var(--red) 10%, transparent); } /* ── Stat tiles ───────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; } @media (max-width: 580px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } .stat { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; } .stat .label { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .stat .value { font-size: 20px; font-weight: 600; } /* Anomaly count tile gets its own accent colour */ .stat.anom .value { color: var(--red); } /* ── Warmup notice ────────────────────────────────────────────── */ .warmup-note { font-size: 11px; color: var(--muted); margin-bottom: 12px; min-height: 18px; } /* ── Chart panels ─────────────────────────────────────────────── */ .chart-block { margin-bottom: 14px; } .chart-label { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } canvas { display: block; width: 100% !important; } /* ── Legend ───────────────────────────────────────────────────── */ .legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--muted); } .leg { display: flex; align-items: center; gap: 6px; } .leg-line { width: 16px; height: 2px; border-radius: 1px; flex-shrink: 0; } .leg-dash { width: 16px; height: 0; border-top: 2px dashed var(--red); flex-shrink: 0; } .leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }