:root{--bg:#f4f5f6;--card:#fff;--ink:#0b1014;--soft-ink:#2b3138;--muted:#6b7280;--line:#e3e5e8;--line-soft:#ecedef;--teal:#1f6b6a;--teal-soft:#e3eded;--teal-faint:#f1f6f5;--amber:#b85528;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh;font:16px/1.5 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,sans-serif}.page{max-width:720px;margin:0 auto;padding:64px 28px 56px}.head{border-bottom:1px solid var(--line);align-items:baseline;gap:14px;padding-bottom:28px;display:flex}.brand{letter-spacing:-.02em;margin:0;font-size:26px;font-weight:600;line-height:1}.brand-dot{background:var(--teal);border-radius:50%;width:7px;height:7px;margin-left:4px;display:inline-block;transform:translateY(-4px)}.tagline{color:var(--muted);margin:0;font-size:14px}.lede{color:var(--soft-ink);max-width:50ch;margin:36px 0 32px;font-size:19px;line-height:1.45}.lede em{color:var(--teal);background:var(--teal-faint);border-radius:4px;padding:1px 6px;font-style:normal}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 28px 24px}.label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-family:ui-monospace,JetBrains Mono,SF Mono,monospace;font-size:11px;font-weight:500;display:block}.inputs{grid-template-columns:1fr 1fr;gap:20px 24px;display:grid}.field{display:block}.field-row{grid-template-columns:1fr auto;align-items:stretch;gap:8px;display:grid}.input,.toggle button{color:var(--ink);background:var(--bg);border:1px solid var(--line);appearance:none;border-radius:8px;outline:none;width:100%;padding:10px 12px;font-family:ui-monospace,JetBrains Mono,SF Mono,monospace;font-size:15px;transition:border-color .15s}.input:focus{border-color:var(--teal);background:#fff}.input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.toggle{background:var(--bg);border:1px solid var(--line);border-radius:8px;gap:0;padding:2px;display:inline-flex}.toggle button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;width:auto;padding:6px 12px;font-size:13px;transition:background .15s,color .15s}.toggle button[aria-pressed=true]{background:var(--ink);color:#fff}.time-fields{grid-template-columns:repeat(3,1fr);align-items:center;gap:6px;display:grid}.time-sep{text-align:center;color:var(--muted);font-family:ui-monospace,JetBrains Mono,monospace}.result{border-top:1px solid var(--line-soft);grid-template-columns:1fr auto;align-items:end;gap:24px;margin-top:32px;padding-top:28px;display:grid}.pace-primary{letter-spacing:-.03em;color:var(--ink);font-family:ui-monospace,JetBrains Mono,SF Mono,monospace;font-size:56px;font-weight:500;line-height:1}.pace-primary .unit{color:var(--muted);letter-spacing:0;margin-left:8px;font-size:18px;font-weight:400}.pace-secondary{text-align:right;color:var(--muted);font-family:ui-monospace,JetBrains Mono,monospace;font-size:14px;line-height:1.7}.predictions{background:var(--teal-faint);border-radius:10px;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;padding:22px 24px;display:grid}.pred{flex-direction:column;gap:6px;display:flex}.pred-label{color:var(--teal);letter-spacing:.1em;text-transform:uppercase;font-family:ui-monospace,JetBrains Mono,monospace;font-size:11px}.pred-time{color:var(--ink);font-family:ui-monospace,JetBrains Mono,monospace;font-size:18px;font-weight:500}.note{color:var(--muted);margin:28px 0 0;font-size:13px;line-height:1.55}.note code{background:var(--bg);border:1px solid var(--line);color:var(--soft-ink);border-radius:3px;padding:1px 5px;font-family:ui-monospace,JetBrains Mono,monospace;font-size:12px}footer{border-top:1px solid var(--line);color:var(--muted);letter-spacing:.06em;justify-content:space-between;align-items:center;margin-top:48px;padding-top:20px;font-family:ui-monospace,JetBrains Mono,monospace;font-size:11px;display:flex}@media (max-width:560px){.page{padding:40px 20px 48px}.inputs{grid-template-columns:1fr}.result{grid-template-columns:1fr;align-items:start}.pace-secondary{text-align:left}.predictions{grid-template-columns:repeat(2,1fr)}.pace-primary{font-size:44px}}
