/* EvalPipe — light enterprise analytics surface. * * A calm, data-first product UI: light-gray canvas, white cards with hairline * borders and restrained shadows, one measured slate-blue accent for * interaction, and semantic green/red/amber reserved for outcomes only. * Tabular monospace numerals; system typography. No gradients, glows or glass. * Accessibility: AA contrast, visible focus, reduced motion respected, * keyboard-reachable chart marks, server-rendered table twins for every chart. */ /* Self-hosted IBM Plex — a technical, corporate typeface (not the Inter/Geist default). woff2, latin subset, served locally so the app stays offline-capable. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } :root { color-scheme: light; --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f6f7f9; --surface-hover: #f0f2f5; --border: #e5e7eb; --border-strong: #d3d7de; --ink: #14181f; --ink-2: #58606c; --muted: #838b98; --grid: #eceef2; --baseline: #d3d7de; --accent: #2f6feb; --accent-hover: #1f59cf; --accent-soft: rgba(47, 111, 235, 0.09); --on-accent: #ffffff; --series-1: #2f6feb; --series-2: #0ca678; --good: #16a34a; --good-text: #157f3c; --good-bg: #eaf6ee; --good-border: #c2e6cd; --bad: #dc2626; --bad-text: #b42318; --bad-bg: #fcecec; --bad-border: #f2cbc7; --warn-text: #b25409; --warn-bg: #fdf3e7; --warn-border: #f3dcb3; --sidebar: #ffffff; --side-border: #e5e7eb; --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06); --shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 1px 3px rgba(17, 24, 39, 0.04); --shadow-md: 0 10px 28px rgba(17, 24, 39, 0.12); --r: 10px; --r-sm: 6px; --r-pill: 999px; --speed: 150ms; --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } /* --------------------------------------------------------------- dark theme Opt-in via data-theme="dark" on (set by the toggle before paint). Only the tokens change; every rule already reads them. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1216; --surface: #161b22; --surface-2: #1c222b; --surface-hover: #232a34; --border: #2a323d; --border-strong: #3a4552; --ink: #e7eaef; --ink-2: #a5adba; --muted: #7b8494; --grid: #232a33; --baseline: #3a424e; --accent: #5b8cff; --accent-hover: #7aa2ff; --accent-soft: rgba(91, 140, 255, 0.14); --on-accent: #0b1120; --series-1: #5b8cff; --series-2: #2dd4a7; --good: #34d399; --good-text: #6ee7b7; --good-bg: rgba(52, 211, 153, 0.13); --good-border: rgba(52, 211, 153, 0.30); --bad: #f87171; --bad-text: #fca5a5; --bad-bg: rgba(248, 113, 113, 0.13); --bad-border: rgba(248, 113, 113, 0.30); --warn-text: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.12); --warn-border: rgba(251, 191, 36, 0.28); --sidebar: #12161c; --side-border: #232a33; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; } button, a, summary, select, input, textarea { transition: background-color var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease, box-shadow var(--speed) ease, transform var(--speed) ease; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 10px 16px; z-index: 100; } .skip-link:focus { left: 12px; top: 12px; } .mono, code { font-family: var(--font-mono); font-size: 0.9em; } /* ------------------------------------------------------------- app shell */ .app { display: flex; min-height: 100vh; } .sidebar { width: 244px; flex: none; background: var(--sidebar); border-right: 1px solid var(--side-border); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 14px; gap: 8px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); padding: 6px 8px 16px; } .brand:hover { text-decoration: none; color: var(--ink); } .brand svg { display: block; } .side-nav { display: flex; flex-direction: column; gap: 2px; } .side-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); padding: 14px 10px 6px; } .side-label:first-child { padding-top: 4px; } .side-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; } .side-nav a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .side-nav a:first-of-type svg { fill: currentColor; stroke: none; } .side-nav a:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; } .side-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); } .side-foot { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid var(--side-border); } .side-tag { font-size: 12px; color: var(--ink-2); line-height: 1.5; } .side-ver { font-size: 11px; color: var(--muted); margin-top: 6px; font-family: var(--font-mono); } .theme-toggle { display: inline-flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 13px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } .theme-toggle:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--border-strong); } .theme-toggle svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: inline; } .main { flex: 1; min-width: 0; } .content { max-width: 1200px; margin: 0 auto; padding: 40px 44px 84px; } @media (max-width: 900px) { .app { flex-direction: column; } .sidebar { width: auto; height: auto; position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; gap: 4px; padding: 10px 14px; overflow-x: auto; } .brand { padding: 0 12px 0 4px; } .side-label { display: none; } .side-foot { display: flex; align-items: center; margin: 0 0 0 auto; padding: 0; border: none; } .side-foot .side-tag, .side-foot .side-ver { display: none; } .theme-toggle { width: auto; margin: 0; padding: 7px 9px; } .theme-toggle .theme-label { display: none; } .side-nav { flex-direction: row; gap: 2px; } .side-nav a { white-space: nowrap; padding: 8px 12px; } .content { padding: 26px 20px 64px; } } /* -------------------------------------------------------------- headings */ .page-title { font-size: 25px; font-weight: 660; letter-spacing: -0.025em; margin: 0 0 6px; } .page-subtitle { color: var(--ink-2); margin: 0 0 28px; font-size: 14.5px; max-width: 760px; } .breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; } .breadcrumb a { color: var(--ink-2); } .breadcrumb a:hover { color: var(--accent); } /* ------------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; } .card h2 { font-size: 15px; font-weight: 620; letter-spacing: -0.01em; margin: 0 0 3px; } .card .card-note { font-size: 13px; color: var(--ink-2); margin: 0 0 18px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; } .stack > * + * { margin-top: 16px; } @media (max-width: 1024px) { .grid.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .grid.cols-2 { grid-template-columns: 1fr; } } @media (max-width: 520px) { .grid.kpis { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- stat tiles */ .stat-tile .label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); } .stat-tile .value { font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; margin-top: 9px; color: var(--ink); } .stat-tile .delta { font-size: 12.5px; margin-top: 8px; font-weight: 550; display: inline-flex; align-items: center; gap: 4px; } .stat-tile .delta.up { color: var(--good-text); } .stat-tile .delta.down { color: var(--bad-text); } .stat-tile .delta.flat { color: var(--ink-2); } .stat-tile .desc { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.45; } .stat-tile .footnote { font-size: 12px; color: var(--muted); margin-top: 8px; } .stat-tile .footnote strong { color: var(--ink-2); font-weight: 600; } /* ------------------------------------------------------------------ tables */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.data th { text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); padding: 10px 14px; white-space: nowrap; } table.data td { padding: 12px 14px; border-bottom: 1px solid var(--grid); vertical-align: top; } table.data tbody tr:hover td { background: var(--surface-2); } table.data tr:last-child td { border-bottom: none; } table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12.5px; } table.data a { font-family: var(--font-mono); font-size: 12.5px; } .empty-state { text-align: center; padding: 64px 20px; color: var(--ink-2); } .empty-state code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 8px; font-size: 13px; } /* ------------------------------------------------------------- status chips */ .chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 2px 10px; font-size: 12px; font-weight: 550; white-space: nowrap; border: 1px solid transparent; } .chip svg { flex: none; } .chip.completed, .chip.pass { background: var(--good-bg); color: var(--good-text); border-color: var(--good-border); } .chip.running { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--good-border); } .chip.failed, .chip.fail { background: var(--bad-bg); color: var(--bad-text); border-color: var(--bad-border); } /* Subtle marker for offline-simulator runs (no real model was called). */ .tag-sim { display: inline-block; vertical-align: middle; border-radius: var(--r-pill); padding: 1px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; background: rgba(148, 163, 184, 0.14); color: var(--muted); border: 1px solid var(--border); } /* -------------------------------------------------------------- verdict banners */ .verdict { display: flex; align-items: flex-start; gap: 13px; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 17px 19px; background: var(--surface); } .verdict svg { flex: none; margin-top: 1px; } .verdict .title { font-weight: 620; font-size: 15.5px; letter-spacing: -0.01em; } .verdict .detail { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; } .verdict.good { border-left-color: var(--good); background: var(--good-bg); } .verdict.good .title { color: var(--good-text); } .verdict.bad { border-left-color: var(--bad); background: var(--bad-bg); } .verdict.bad .title { color: var(--bad-text); } .verdict.neutral { border-left-color: var(--warn-text); background: var(--warn-bg); } .verdict.neutral .title { color: var(--warn-text); } .warnings { margin: 16px 0 0; padding: 0; list-style: none; } .warnings li { font-size: 13px; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--r-sm); padding: 10px 13px; margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; } /* -------------------------------------------------------------------- forms */ label { font-size: 12.5px; font-weight: 550; color: var(--ink-2); display: block; margin-bottom: 7px; } select, input[type="text"], input[type="number"], input[type="url"], textarea { width: 100%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 13.5px; } select:hover, input:hover, textarea:hover { border-color: var(--muted); } select:focus, input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } select { cursor: pointer; } textarea { resize: vertical; min-height: 92px; } ::placeholder { color: var(--muted); } .field { margin-bottom: 17px; } .field .hint { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 6px; } .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); padding: 10px 20px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn.loading { color: transparent; position: relative; } .btn.loading::after { content: ""; position: absolute; width: 15px; height: 15px; top: calc(50% - 7.5px); left: calc(50% - 7.5px); border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: var(--on-accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .btn.secondary { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); box-shadow: none; } .btn.secondary:hover { background: var(--surface-hover); border-color: var(--muted); } fieldset.card { border: 1px solid var(--border); box-shadow: none; margin: 0; background: var(--surface); } fieldset.card legend { font-weight: 620; font-size: 14px; color: var(--ink); padding: 0 8px; } /* -------------------------------------------------------------- segmented */ .segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-2); padding: 3px; gap: 2px; } .segmented a { padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; } .segmented a:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; } .segmented a[aria-current="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; } .filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; } .filter-row h2 { font-size: 17px; margin: 0; font-weight: 620; letter-spacing: -0.01em; } /* ------------------------------------------------------- integrations strip */ .integrations { display: flex; gap: 10px; flex-wrap: wrap; } .integration { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 12px; } .integration .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; } .integration.on { color: var(--ink); } .integration.on .dot { background: var(--good); } .integration.off { opacity: 0.72; } .int-env { color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); } .metric-toggles { display: flex; gap: 8px; flex-wrap: wrap; } .toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; text-transform: none; letter-spacing: 0; } .toggle:hover { border-color: var(--muted); color: var(--ink); } .toggle input { accent-color: var(--accent); width: 15px; height: 15px; } /* -------------------------------------------------------------------- charts */ .chart-card .chart { position: relative; } .chart svg { display: block; width: 100%; height: auto; } .chart text { font-family: var(--font-sans); } .chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin: 0 0 12px; } .chart-legend .key { display: inline-flex; align-items: center; gap: 7px; } .chart-legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .viz-tooltip { position: fixed; pointer-events: none; background: #1d2430; color: #f5f6f8; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-sm); padding: 8px 11px; font-size: 12.5px; line-height: 1.5; max-width: 300px; z-index: 50; box-shadow: var(--shadow-md); opacity: 0; transition: opacity 110ms ease; } .viz-tooltip.visible { opacity: 1; } .viz-tooltip .tip-title { font-weight: 600; } details.chart-data { margin-top: 14px; } details.chart-data summary { cursor: pointer; font-size: 13px; color: var(--ink-2); user-select: none; display: inline-flex; align-items: center; gap: 6px; } details.chart-data summary:hover { color: var(--accent); } details.chart-data table { margin-top: 12px; } /* --------------------------------------------------------------- playground */ .pg-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .pg-columns.pg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .pg-columns, .pg-columns.pg-3 { grid-template-columns: 1fr; } } #pg-conclusion { margin-top: 18px; } #pg-results { margin-top: 16px; } .ranking { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; } .rank-item { font-size: 12.5px; color: var(--ink); } .rank-item b { color: var(--accent-hover); margin-right: 2px; } .rank-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); } .pg-output { white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px; font-size: 13.5px; min-height: 76px; } .pg-meta { display: flex; gap: 20px; font-size: 12.5px; color: var(--ink-2); margin-top: 12px; flex-wrap: wrap; } .pg-meta strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .pg-error { color: var(--bad-text); background: var(--bad-bg); border: 1px solid var(--bad-border); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; } .result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .result-model { font-weight: 620; font-size: 14.5px; word-break: break-word; } .result-tag { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; white-space: nowrap; } .result-verdict { font-family: var(--font-mono); font-size: 12px; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.03em; } .result-verdict.pass { color: var(--good-text); } .result-verdict.fail { color: var(--bad-text); } .score-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .score-chip { font-family: var(--font-mono); font-size: 11px; border-radius: 6px; padding: 2px 8px; border: 1px solid; } .score-chip.pass { color: var(--good-text); background: var(--good-bg); border-color: var(--good-border); } .score-chip.fail { color: var(--bad-text); background: var(--bad-bg); border-color: var(--bad-border); } /* ------------------------------------------------------------------ details */ details.row-details summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 500; user-select: none; } details.row-details summary:hover { text-decoration: underline; } .detail-block { margin: 13px 0 4px; } .detail-block h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .detail-block p { margin: 0; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; } .score-list { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; } .score-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; } .score-list .name { font-weight: 550; min-width: 190px; } .score-list .detail { color: var(--ink-2); } /* copy button + id lists */ .copy-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 24px; height: 22px; padding: 0; margin-left: 4px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; } .copy-btn:hover { background: var(--surface-hover); color: var(--ink); } .copy-btn.copied { color: var(--good-text); border-color: var(--good-border); background: var(--good-bg); } .id-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .id-list code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 12px; } .table-filter { font-size: 13px; } .nowrap { white-space: nowrap; } .text-2 { color: var(--ink-2); } .text-muted { color: var(--muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }