/* Dark is the built-in palette; light is applied through data-theme="light", which an inline script in sets before first paint — from the saved preference, or from the OS one when the setting is "system". Every colour in the file goes through these variables so the two themes stay in step. */ :root { color-scheme: dark; --bg: #000000; --fg: #ffffff; --fg-soft: #cccccc; --muted: #6f6f6f; --dim: #444444; --accent: #3987e5; --accent-2: #2ad4c8; --surface: #0d0d0d; /* sheet cards, sticky table head */ --raised: #131313; /* tooltip, select */ --hover: #111111; --pressed: #1a1a1a; --line: #262626; /* visible borders */ --line-btn: #333333; --line-btn-hover: #555555; --line-soft: #1e1e1e; /* container hairlines */ --line-hair: #171717; /* table row dividers */ --scrim: rgba(0, 0, 0, .7); --shadow: none; /* Slots 1 and 2 of the dark categorical palette: adjacent-pair CVD ΔE 26.8, both ≥ 3:1 against the black surface. */ --series-down: #3987e5; --series-up: #d95926; --grid: #1b1b1b; --tick: #8a8a8a; --crosshair: #3a3a3a; --marker-ring: #000000; /* ring that lifts the hover dot off the surface */ } /* Light counterparts. The series colours are darkened rather than reused: #3987e5/#d95926 sit at 3.6:1 and 3.9:1 on white, these at 4.5:1 and 5.1:1, and the blue/orange pair stays separable under CVD. */ :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --fg: #101014; --fg-soft: #35353d; --muted: #62626b; --dim: #a2a2ac; --accent: #2f7bdd; --accent-2: #12a79c; --surface: #f6f7f9; --raised: #ffffff; --hover: #eef0f4; --pressed: #e6e8ee; --line: #dcdee4; --line-btn: #cbcdd6; --line-btn-hover: #9fa2ae; --line-soft: #e6e7ec; --line-hair: #edeef2; --scrim: rgba(16, 16, 20, .38); --shadow: 0 18px 48px rgba(16, 16, 20, .18); --series-down: #2f77d0; --series-up: #c2450f; --grid: #e7e8ed; --tick: #63636c; --crosshair: #c3c4cc; --marker-ring: #ffffff; } * { box-sizing: border-box; } /* Layout rules below set display on .sheet/.chart-wrap/.details, and a class selector outranks the UA rule for [hidden] — without this every "hidden" block (both modal sheets included) stays on screen. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--fg); font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif; font-weight: 300; display: flex; flex-direction: column; min-height: 100dvh; -webkit-font-smoothing: antialiased; } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(20px, 5vw, 56px); } .logo { display: inline-flex; flex-direction: column; gap: 6px; } .logo-word { font-size: 34px; font-weight: 700; letter-spacing: 1px; } .logo-bar { height: 4px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; } .topbar-right { display: flex; align-items: center; gap: 18px; } .lang-switch { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .lang-switch button { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; letter-spacing: .04em; cursor: pointer; padding: 5px 11px; border-radius: 999px; } .lang-switch button:hover { color: var(--fg); } .lang-switch button[aria-pressed="true"] { background: var(--pressed); color: var(--fg); } .link-btn { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 6px 2px; } .link-btn:hover { color: var(--fg); } /* ---------- stage ---------- */ .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 0 20px 40px; text-align: center; } .speed-line { display: flex; align-items: baseline; justify-content: center; gap: 14px; line-height: 1; } .arrow { font-size: clamp(28px, 5vw, 46px); color: var(--dim); transform: translateY(-0.15em); transition: color .3s ease, opacity .3s ease; opacity: 0; } .arrow.on { opacity: 1; } .arrow.up { transform: translateY(-0.15em) rotate(180deg); } .value { /* The floor rises less than the ceiling: below ~370px the clamp bottoms out, and a five-character reading ("999.9") already fills the line there. */ font-size: clamp(96px, 26vw, 260px); font-weight: 300; letter-spacing: -0.02em; color: var(--muted); transition: color .5s ease; font-variant-numeric: tabular-nums; } .unit { font-size: clamp(20px, 3.4vw, 34px); color: var(--muted); transition: color .5s ease; } body.done .value, body.done .unit { color: var(--fg); } .status { margin: 18px 0 0; min-height: 22px; font-size: clamp(15px, 2vw, 19px); color: var(--muted); } /* Upload sits under the headline number, not inside the collapsed details: measuring it for eight seconds only to hide it behind a button wasted both the time and the traffic. Size and label carry the hierarchy — one big number answers "is my internet fine", this line answers the rest. */ .uplink { margin: 16px 0 0; font-size: clamp(15px, 2vw, 19px); color: var(--muted); display: flex; align-items: baseline; justify-content: center; gap: 8px; } .uplink-arrow { color: var(--series-up); /* same ink as the upload curve in the chart */ font-size: .9em; } .uplink-value { color: var(--muted); font-variant-numeric: tabular-nums; transition: color .5s ease; } body.done .uplink-value { color: var(--fg); } .status .dots::after { content: ""; animation: dots 1.4s steps(4, end) infinite; } @keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; min-height: 44px; } .ghost-btn { background: none; color: var(--fg); border: 1px solid var(--line-btn); border-radius: 999px; padding: 11px 22px; font: inherit; font-size: 15px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .ghost-btn:hover { background: var(--hover); border-color: var(--line-btn-hover); } .replay { display: inline-block; font-size: 17px; transform: translateY(1px); } /* ---------- live chart ---------- */ .chart-wrap { width: min(680px, 100%); display: flex; flex-direction: column; gap: 12px; } .legend { display: flex; gap: 20px; justify-content: center; font-size: 13px; color: var(--tick); } .legend-item { display: inline-flex; align-items: center; gap: 8px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot.dl { background: var(--series-down); } .dot.ul { background: var(--series-up); } .canvas-box { position: relative; height: 150px; } #chart { width: 100%; height: 100%; display: block; touch-action: none; } .tooltip { position: absolute; pointer-events: none; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; line-height: 1.5; color: var(--fg); white-space: nowrap; transform: translate(-50%, -115%); z-index: 3; } .tooltip b { font-weight: 500; } .tooltip .tip-phase { color: var(--tick); } /* ---------- data table ---------- */ .data-table { width: min(680px, 100%); max-height: 260px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 10px; } .data-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .data-table th, .data-table td { padding: 7px 14px; text-align: right; border-bottom: 1px solid var(--line-hair); } .data-table th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-weight: 400; } .data-table td:first-child, .data-table th:first-child { text-align: left; } .data-table tr:last-child td { border-bottom: 0; } /* ---------- share ---------- */ .share-card { width: min(620px, 100%); } #sharePreview { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line-soft); /* The exported card is dark by design, so its backdrop stays dark too. */ background: #000; } .share-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* ---------- history ---------- */ .history { width: min(680px, 100%); display: flex; flex-direction: column; gap: 10px; } .history-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--muted); padding: 0 4px; } .history .current td { color: var(--fg); } .history .current td:first-child::before { content: "•"; color: var(--series-down); margin-right: 7px; } /* ---------- details ---------- */ .details { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: clamp(20px, 6vw, 70px); padding-top: 8px; } .metric-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .metric-value { font-size: clamp(26px, 4.5vw, 38px); font-weight: 200; font-variant-numeric: tabular-nums; } .metric-value i { font-style: normal; font-size: 14px; color: var(--muted); margin-left: 6px; } /* ---------- footer ---------- */ .footer { padding: 18px clamp(20px, 5vw, 56px) 26px; color: var(--dim); font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- settings sheet ---------- */ .sheet { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; } .sheet-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 26px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; } .sheet-card h2 { margin: 0; font-size: 19px; font-weight: 400; } .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--fg-soft); } .row select { background: var(--raised); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }