:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #203c31; background: #f3f7f5; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 0 0, #e1f3e8, transparent 50%); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #72b996; outline-offset: 5px; }
button:disabled { cursor: wait; }
[hidden] { display: none !important; }
.page { max-width: 1060px; margin: auto; padding: 0 40px; }
.topbar { height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; gap: 5px; align-items: baseline; font-size: 29px; font-weight: 800; letter-spacing: -1.6px; color: inherit; text-decoration: none; }
.brand-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b9868; }
.domain { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #547364; padding: 8px 12px; border: 1px solid #d5e4da; border-radius: 99px; }
.dot { width: 6px; height: 6px; background: #419b6b; border-radius: 50%; }
.intro { padding: 27px 0 31px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: #648572; letter-spacing: 1.3px; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 43px); line-height: 1.15; font-weight: 650; letter-spacing: -1.7px; }
.intro-copy { margin: 13px 0 0; color: #738579; font-size: 16px; line-height: 1.6; }
.test-panel { padding: 32px 36px 20px; background: #fff; border: 1px solid #e2eae4; border-radius: 23px; box-shadow: 0 15px 45px #25433506; }
.test-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.speed-label { font-size: 13px; color: #6d8175; }
.speed-reading { display: flex; align-items: baseline; gap: 14px; margin: 7px 0 6px; }
#speed { font-size: clamp(62px, 8vw, 90px); font-weight: 600; line-height: 1.12; letter-spacing: -5px; font-variant-numeric: tabular-nums; }
.speed-unit { font-size: 17px; color: #7b8e82; font-weight: 450; }
.stage { font-size: 13px; color: #61816b; min-height: 20px; line-height: 1.5; }
.stage.error { color: #b34f37; }
.actions { display: flex; flex-direction: column; align-items: stretch; min-width: 223px; max-width: 290px; }
.primary { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 16px 19px; border: 0; border-radius: 12px; background: #244e3c; color: #fff; font-size: 14px; font-weight: 550; transition: background .18s, transform .18s; }
.primary:hover:enabled { background: #31654c; transform: translateY(-1px); }
.primary:disabled { background: #dbe9df; color: #6d8a77; }
.primary span { font-size: 20px; line-height: 16px; }
.secondary { border: 1px solid #dbe6de; background: #fff; border-radius: 10px; color: #395c47; padding: 9px 15px; font-size: 13px; margin-top: 9px; }
.secondary:hover { background: #f4f8f5; }
.traffic { margin: 10px 0 0; color: #87978b; font-size: 11px; text-align: center; line-height: 1.5; }
.progress { height: 3px; background: #edf3ee; border-radius: 4px; margin: 29px 0 25px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: #54a777; transition: width .2s; }
.chart-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; color: #819286; }
.phase { color: #4f795c; }
.chart-container { display: flex; gap: 12px; height: 119px; margin-top: 17px; }
.chart-scale { display: flex; flex-direction: column; justify-content: space-between; width: 30px; padding-bottom: 1px; text-align: right; font-size: 10px; color: #99a79d; font-variant-numeric: tabular-nums; }
.chart { position: relative; flex: 1; min-width: 0; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid { fill: none; stroke: #edf2ee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #a2afa5; }
.chart-time { display: flex; justify-content: space-between; margin: 9px 0 0 42px; font-size: 10px; color: #99a79d; font-variant-numeric: tabular-nums; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 15px; }
.metric { padding: 22px 25px; border: 1px solid #e2eae4; border-radius: 17px; background: #fff; }
.metric-accent { background: #eaf3ec; border-color: #dce8df; }
.metric-title { color: #6f8476; font-size: 12px; }
.metric-result { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 5px; font-variant-numeric: tabular-nums; }
.metric-result span:first-child { font-size: 31px; font-weight: 550; letter-spacing: -1.1px; }
.metric-result span:last-child { font-size: 11px; color: #809386; }
.metric p { margin: 0; color: #91a094; font-size: 10px; line-height: 1.5; }
.history-section { margin-top: 33px; padding: 0 2px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
h2 { margin: 0; font-size: 15px; font-weight: 550; letter-spacing: -.2px; }
.section-heading p { margin: 7px 0 0; font-size: 11px; color: #8a9b8e; }
.text-button { padding: 5px 0; background: none; border: 0; color: #728b79; font-size: 11px; }
.text-button:hover { color: #254e38; }
.history-empty { padding: 19px 0; margin: 14px 0 0; border-top: 1px solid #e0e9e2; font-size: 12px; color: #8d9e91; }
.table-wrap { overflow-x: auto; margin-top: 19px; border-top: 1px solid #dfe8e1; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
th { padding: 14px 15px 10px 0; font-size: 10px; font-weight: 450; color: #91a095; }
td { padding: 11px 15px 11px 0; border-bottom: 1px solid #e5ece6; color: #4c6d56; }
th:last-child, td:last-child { text-align: right; padding-right: 0; }
.footnote { font-size: 10px; color: #91a094; line-height: 1.8; margin: 19px 2px 0; }
footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 39px; padding: 19px 2px 26px; border-top: 1px solid #dfe8e1; font-size: 10px; color: #a2afa6; }
footer span:first-child { font-weight: 700; color: #7f9386; letter-spacing: -.4px; }
.noscript { padding: 18px; background: #fff3df; border-radius: 12px; line-height: 1.6; }
@media (max-width: 650px) {
  .page { padding: 0 19px; }
  .topbar { height: 79px; }
  .brand { font-size: 25px; }
  .domain { font-size: 10px; padding: 7px 10px; }
  .intro { padding-top: 22px; padding-bottom: 24px; }
  h1 { font-size: 32px; max-width: 320px; }
  .intro-copy { font-size: 14px; max-width: 300px; }
  .test-panel { padding: 25px 23px 18px; border-radius: 19px; }
  .test-top { align-items: stretch; flex-direction: column; gap: 20px; }
  .actions { max-width: none; min-width: 0; }
  #speed { font-size: 74px; }
  .speed-unit { font-size: 14px; }
  .traffic { font-size: 10px; }
  .progress { margin: 20px 0 19px; }
  .chart-header { font-size: 9px; }
  .chart-container { height: 102px; gap: 9px; }
  .chart-scale { width: 23px; font-size: 9px; }
  .chart-time { margin-left: 32px; }
  .chart-empty { font-size: 10px; }
  .metrics { gap: 8px; }
  .metric { padding: 17px 11px; border-radius: 13px; }
  .metric-title { font-size: 10px; }
  .metric-result { flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 9px; }
  .metric-result span:first-child { font-size: 27px; }
  .metric-result span:last-child { font-size: 9px; }
  .metric p { display: none; }
  .history-section { margin-top: 29px; }
  footer { margin-top: 28px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }