/* Roles from the reference palette; dark mode is its own selected set. Theme: OS setting by default, overridden by data-theme on . */ .viz-root { color-scheme: light; --surface-1: #fcfcfb; --page: #f9f9f7; --text-primary: #0b0b0b; --text-strong: #000000; --text-secondary: #52514e; --muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --line-base: rgba(137, 135, 129, 0.5); --shadow: rgba(0, 0, 0, 0.14); --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948; --series-9: #01678e; --series-10: #7a4503; --series-11: #a282ce; --series-12: #536a23; --series-13: #943d7d; --series-14: #128ca1; --series-15: #ad6173; } html { background: #f9f9f7; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { background: #1f1f1f; } :root:where(:not([data-theme="light"])) .viz-root { color-scheme: dark; --surface-1: #272727; --page: #1f1f1f; --text-primary: #e4e4e4; --text-strong: #ffffff; --text-secondary: #b9b9b9; --muted: #8c8c8c; --grid: #383838; --axis: #4b4b4b; --border: rgba(255, 255, 255, 0.12); --line-base: rgba(205, 205, 205, 0.38); --shadow: rgba(0, 0, 0, 0.45); --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; --series-9: #197aa3; --series-10: #ac743d; --series-11: #8c59c6; --series-12: #7e994b; --series-13: #a95191; --series-14: #10a7bf; --series-15: #c8798a; } } :root[data-theme="dark"] { background: #1f1f1f; } :root[data-theme="dark"] .viz-root { color-scheme: dark; --surface-1: #272727; --page: #1f1f1f; --text-primary: #e4e4e4; --text-strong: #ffffff; --text-secondary: #b9b9b9; --muted: #8c8c8c; --grid: #383838; --axis: #4b4b4b; --border: rgba(255, 255, 255, 0.12); --line-base: rgba(205, 205, 205, 0.38); --shadow: rgba(0, 0, 0, 0.45); --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; --series-9: #197aa3; --series-10: #ac743d; --series-11: #8c59c6; --series-12: #7e994b; --series-13: #a95191; --series-14: #10a7bf; --series-15: #c8798a; } /* Per-list branding. Accents mark the current selection in every control; chart line colours are untouched. Each list uses its own site's typeface. */ .viz-root { --accent: var(--text-primary); --accent-ink: var(--surface-1); --accent-soft: var(--grid); } .viz-root[data-list="aredl"] { --accent: #ff6f00; --accent-ink: #ffffff; --accent-soft: rgba(255, 111, 0, 0.16); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; } .viz-root[data-list="pointercrate"] { --accent: #0881c6; --accent-ink: #ffffff; --accent-soft: rgba(8, 129, 198, 0.16); font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Pointercrate's blue squares down both sides of the page, desktop only. The artwork is one full-width image with a square band at each edge, so each side is a fixed strip showing just its own band, drawn at half the size pointercrate.com uses. The padding keeps the bands clear of content. */ @media (min-width: 1000px) { .viz-root[data-list="pointercrate"] { padding-inline: calc(6.5vw + 16px); } .viz-root[data-list="pointercrate"]::before, .viz-root[data-list="pointercrate"]::after { content: ""; position: fixed; top: 0; bottom: 0; width: 6.5vw; pointer-events: none; background-image: url("/assets/pointercrate-squares-425f47de.png"); background-size: 50vw auto; background-repeat: repeat-y; } .viz-root[data-list="pointercrate"]::before { left: 0; background-position: left top; } .viz-root[data-list="pointercrate"]::after { right: 0; background-position: right top; } } html, body { margin: 0; height: 100%; } body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; } .viz-root { background: var(--page); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: 20px clamp(16px, 3vw, 32px) 28px; box-sizing: border-box; } .topbar { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: end; justify-content: space-between; } h1 { font-size: 22px; margin: 0; font-weight: 600; letter-spacing: -0.01em; } h2 { font-size: 15px; margin: 0 0 4px; font-weight: 600; } .sub, .hint, .muted { margin: 0; color: var(--text-secondary); } .sub { margin-top: 2px; } .hint { font-size: 13px; color: var(--muted); } /* Controls */ .controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .group { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-1); } .group-wrap { flex-wrap: wrap; } .group-wrap button { flex: 1 1 auto; } /* wrapped rows fill the width evenly */ .group button, .group a { font: inherit; color: var(--text-secondary); background: transparent; border: 0; padding: 6px 12px; cursor: pointer; border-right: 1px solid var(--border); text-decoration: none; display: inline-block; } .group button:last-child, .group a:last-child { border-right: 0; } .group button:hover, .group a:hover { background: var(--accent-soft); color: var(--text-primary); } .group button.is-active, .group a.is-active { color: var(--accent-ink); font-weight: 600; background: var(--accent); } .list-switch { margin-top: 10px; font-size: 13px; } .list-switch a { padding: 4px 12px; } .ghost { font: inherit; color: var(--text-secondary); cursor: pointer; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); } .ghost:hover { background: var(--accent-soft); color: var(--text-primary); } .search input { font: inherit; padding: 6px 10px; min-width: 220px; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; } .check { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; cursor: pointer; } .check input { accent-color: var(--accent); } .search input:focus-visible, .group button:focus-visible, .group a:focus-visible, .ghost:focus-visible, .menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Display menu: secondary settings live in one dropdown */ .menu { position: relative; } .menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; user-select: none; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } .menu[open] > summary { background: var(--accent-soft); color: var(--text-primary); } .menu[open] > summary::after { margin-top: 3px; transform: rotate(225deg); } .menu-panel { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(92vw, 540px); display: grid; gap: 10px; padding: 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow); } .menu-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .menu-label { width: 56px; flex: none; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .menu-help { margin: -4px 0 2px 68px; max-width: 440px; font-size: 12px; line-height: 1.5; color: var(--muted); } /* Legend */ .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; min-height: 22px; font-size: 13px; } .legend .key { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); } .legend .key i { display: inline-block; width: 18px; height: 0; border-top: 2px solid currentColor; } .legend .key b { color: var(--text-primary); font-weight: 600; } .legend .key button { font: inherit; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 2px; } .legend .key button:hover { color: var(--text-primary); } .mode-note { margin: -4px 0 0; font-size: 13px; color: var(--muted); } /* Chart */ .chart { position: relative; flex: none; min-height: 520px; height: 70vh; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .chart canvas, .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; } .chart svg { pointer-events: none; overflow: visible; } .chart .axes { z-index: 0; } /* gridlines sit under the lines */ .chart canvas { z-index: 1; } .chart .overlay { z-index: 2; } /* crosshair sits over them */ .axis text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .axis line, .axis path { stroke: var(--axis); } .axis .domain { display: none; } .axis-y .tick line { stroke: var(--grid); } .axis-marks path { fill: var(--accent); } .axis-marks text { fill: var(--accent); font-size: 11px; font-weight: 600; } .crosshair { stroke: var(--axis); stroke-width: 1; } .tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .tags.touch .tag { pointer-events: auto; cursor: pointer; } /* a finger pins by tapping the box */ .tag { position: absolute; display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 3px 8px; font-size: 12px; line-height: 1.3; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px var(--shadow); } .tag i { display: inline-block; width: 12px; border-top: 2px solid currentColor; flex: none; } .tag b { font-variant-numeric: tabular-nums; } .tag span { color: var(--text-secondary); } .tag.hovered { border-color: var(--accent); font-weight: 600; } .tag.hovered span { color: var(--text-primary); } .crosshair-date { position: absolute; transform: translateX(-50%); z-index: 3; pointer-events: none; font-size: 11px; font-variant-numeric: tabular-nums; padding: 2px 6px; white-space: nowrap; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; } /* Loading and error state over the chart */ .status { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--text-secondary); background: var(--surface-1); } .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--grid); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } .status.is-error .spinner { display: none; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } } /* Pinned table */ .table-view { margin-top: 4px; } .table-view table { border-collapse: collapse; width: 100%; max-width: 900px; font-size: 13px; } .table-view th, .table-view td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--grid); } .table-view th { color: var(--muted); font-weight: 500; } .table-view td.num { font-variant-numeric: tabular-nums; } .table-view td i { display: inline-block; width: 14px; border-top: 2px solid currentColor; margin-right: 8px; vertical-align: middle; } .table-view .unpin { font: inherit; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 4px; margin-left: 6px; line-height: 1; } .table-view .unpin:hover { color: var(--text-primary); } /* Links and footer */ .table-view td a, .site-footer a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; } .table-view td a:hover, .site-footer a:hover { color: var(--accent); text-decoration-color: currentColor; } .site-footer { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--grid); display: grid; gap: 4px; font-size: 12px; color: var(--muted); } .site-footer p { margin: 0; } .site-footer .github { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; } .site-footer .github svg { width: 16px; height: 16px; flex: none; } .site-footer .github span { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; } .site-footer .github:hover { color: var(--accent); } .site-footer .github:hover span { text-decoration-color: currentColor; } /* 404 */ .not-found { justify-content: center; align-items: flex-start; gap: 10px; max-width: 640px; margin: 0 auto; } .not-found .eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); } .not-found h1 { font-size: 30px; } .viz-root [hidden] { display: none !important; } .mobile-only { display: none; } @media (max-width: 700px) { .desktop-only { display: none !important; } .mobile-only { display: inline; } .legend { display: none; } .col-verifier { display: none; } .chart { height: 60vh; min-height: 380px; } .search input { min-width: 140px; } .controls { position: relative; } .menu { position: static; } .menu-panel { left: 0; right: 0; width: auto; max-width: none; } .menu-help { margin-left: 0; } }