/* the landing's proof of speed (public/js/proof.js) */
.proof-sec { padding-top: 96px; }
.proof { display: grid; gap: 14px; }
.proof-empty { display: flex; align-items: center; gap: 22px; padding: 26px 28px; border-radius: 22px; border: 1px dashed var(--line2); background: radial-gradient(500px 160px at 0% 50%, rgba(255, 111, 145, .08), transparent 70%), var(--s1); }
.proof-empty img { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); animation: breathe 4s ease-in-out infinite; }
.proof-empty b { font: 640 22px/1.2 var(--display); letter-spacing: -.02em; }
.proof-empty p { margin: 8px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 640px; }
.proof-head { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 22px 24px; border-radius: 22px; border: 1px solid rgba(61, 220, 151, .25); background: radial-gradient(600px 200px at 0% 0%, rgba(61, 220, 151, .1), transparent 70%), var(--s1); }
@media (min-width: 860px) { .proof-head { grid-template-columns: auto minmax(0, 1fr); gap: 40px; } }
.ph-big { display: flex; align-items: baseline; gap: 14px; }
.ph-big b { font: 600 clamp(56px, 8vw, 96px)/1 var(--mono); letter-spacing: -.05em; color: var(--good); }
.ph-big span { font: 600 18px/1.25 var(--display); color: var(--ink2); max-width: 180px; }
.ph-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ph-cells > div { background: var(--s1); padding: 14px 16px; }
.ph-cells .k { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ph-cells .v { font: 600 20px/1.2 var(--mono); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proof-list { display: grid; gap: 10px; }
.proof-row { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--s2); }
@media (min-width: 980px) { .proof-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 26px; } }
.proof-row.ok { border-color: rgba(61, 220, 151, .22); }
.pr-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.pr-l b { font: 640 17px/1.2 var(--display); }
.pr-l .muted { font-size: 12.5px; }
.pr-kind { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 7px; }
.pr-kind.snipe { color: var(--sniper); background: rgba(255, 111, 145, .12); } .pr-kind.copy { color: var(--copy); background: rgba(92, 200, 255, .12); }
.pr-gap { font: 600 12px/1 var(--mono); padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--ink2); }
.pr-gap.zero { background: var(--good); color: #04140C; }
.pr-bloom { font: 600 12px/1 var(--mono); padding: 6px 10px; border-radius: 999px; background: rgba(255, 107, 107, .12); color: var(--bad); }
.pr-ver { font: 500 11.5px/1 var(--mono); color: var(--good); } .pr-ver.wait { color: var(--muted); }
/* the slot ruler: slot 0 = the slot of what it reacted to */
.ruler { position: relative; height: 64px; }
.ruler .ticks { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); border-top: 1px solid var(--line2); }
.ruler .ticks i { font: 500 10px/1 var(--mono); font-style: normal; color: var(--faint); padding-top: 6px; text-align: center; border-left: 1px dashed var(--line); height: 20px; }
.ruler .ticks i.zero { color: var(--good); background: rgba(61, 220, 151, .06); }
.ruler .mark { position: absolute; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; text-decoration: none; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line2); background: var(--s1); white-space: nowrap; transition: transform .15s var(--ease), border-color .15s; }
.ruler .mark:hover { transform: translateX(-50%) translateY(-2px); border-color: var(--line3); }
.ruler .mark b { font: 600 11px/1 var(--sans); }
.ruler .mark span { font: 500 10px/1 var(--mono); color: var(--muted); }
.ruler .mark.sig { bottom: 22px; z-index: 1; margin-left: -34px; }
.ruler .mark.pips { border-color: rgba(255, 181, 71, .6); background: rgba(255, 181, 71, .1); z-index: 2; margin-left: 34px; } .ruler .mark.pips b { color: var(--amber); }
.ruler .mark.pips.zero { border-color: var(--good); background: rgba(61, 220, 151, .12); } .ruler .mark.pips.zero b { color: var(--good); }
.ruler .mark.bloom { border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .08); } .ruler .mark.bloom b { color: var(--bad); }
.proof-note { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 820px; }
@media (max-width: 640px) { .proof-empty { flex-direction: column; text-align: center; } .ph-cells { grid-template-columns: minmax(0, 1fr); } .ruler .mark.sig { margin-left: -26px; } .ruler .mark.pips { margin-left: 26px; } }
.proof-sec .race-link { gap: 10px; flex: none; }
.proof-sec .race-link .led { width: 8px; height: 8px; border-radius: 50%; background: #04140C; box-shadow: none; animation: pulse 1.6s ease-in-out infinite; }