@font-face{font-family:HighSpeed;src:url(/fonts/High-Speed.ttf) format("truetype");font-display:swap}:root{--bg: #f6f5f2;--ink: #0b0b0c;--ink-soft: #2a2a2d;--ink-muted: #7a7a80;--line: #0b0b0c;--surface: #ffffff;--surface-2: #efede8;--accent: oklch(.7 .18 45);--accent-ink: oklch(.28 .09 45);--accent-soft: oklch(.94 .05 65);--radius-sm: 10px;--radius-md: 16px;--radius-lg: 22px;--radius-pill: 999px;--shadow-sm: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);--shadow-md: 0 4px 14px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.05);--h-speed: "HighSpeed", "Arial Black", system-ui, sans-serif;--h-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}.dark{--bg: #0b0b0c;--ink: #f4f2ec;--ink-soft: #d9d6cd;--ink-muted: #8a8a90;--line: #f4f2ec;--surface: #161618;--surface-2: #1f1f22;--accent: oklch(.72 .19 45);--accent-ink: oklch(.95 .08 65);--accent-soft: oklch(.28 .08 45)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--h-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}button,input{font-family:inherit;color:inherit}.stage{width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 800px at 50% -10%,rgba(0,0,0,.04),transparent 60%),var(--bg)}.phone{width:min(400px,100vw);height:min(780px,100vh);background:var(--surface);border-radius:44px;box-shadow:0 60px 120px #0000002e,0 20px 40px #0000001a,0 0 0 1px #0000000f;overflow:hidden;position:relative;display:flex;flex-direction:column}.phone:before{content:"";position:absolute;top:12px;left:50%;transform:translate(-50%);width:118px;height:32px;background:#000;border-radius:20px;z-index:40}@media(max-width:460px){.phone{width:100vw;height:100vh;border-radius:0;box-shadow:none}.phone:before{display:none}.stage{background:var(--bg)}}.safe-top{height:40px;flex-shrink:0}.app-header{padding:8px 16px 2px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}.brand{display:flex;align-items:center;gap:14px;width:100%}.brand-logo{width:54px;height:54px;flex-shrink:0}.brand-logo svg,.brand-logo img{width:100%;height:100%;display:block}.brand-title{flex:1;font-family:var(--h-speed);font-style:italic;font-weight:900;font-size:clamp(22px,7.5vw,30px);line-height:1;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;white-space:nowrap;text-align:left;display:flex;flex-wrap:wrap;gap:0 .35em;align-items:baseline}.brand-title span{display:inline}.brand-settings{display:flex;align-items:center;gap:4px;flex-shrink:0}.brand-settings .chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1.5px solid var(--line);border-radius:10px;padding:5px 9px;font-family:var(--h-speed);font-style:italic;font-size:11px;letter-spacing:.08em;color:var(--ink);cursor:pointer}.brand-settings .chip:active{transform:scale(.95)}.brand-settings .chip.icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px;border-radius:10px}.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 14px 0;flex-shrink:0}.nav button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:7px 4px;font-family:var(--h-speed);font-style:italic;font-size:12px;letter-spacing:.08em;color:var(--ink);cursor:pointer;transition:all .18s ease;text-transform:uppercase}.nav button:active{transform:scale(.96)}.nav button.active{background:var(--ink);color:var(--bg)}.speed-line{height:18px;margin:6px -14px;background-image:url(/images/speed-line.svg);background-repeat:no-repeat;background-size:100% 100%;background-position:center;flex-shrink:0}.hero{flex-shrink:0;border:1.5px solid var(--line);border-radius:18px;background:var(--surface);padding:6px 10px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:10px;align-items:center}.hero-grid .sep{background:var(--line);height:60%;margin:0 auto;align-self:center;opacity:.2}.hero-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.hero-stat .label{font-family:var(--h-speed);font-style:italic;font-size:11px;letter-spacing:.14em;color:var(--ink-muted);text-transform:uppercase}.hero-stat .val{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}.hero-stat .unit{font-family:var(--h-speed);font-style:italic;font-size:11px;letter-spacing:.12em;color:var(--ink-muted);margin-top:2px}.speedo{width:100%;aspect-ratio:3.2;max-height:80px}.card{border:1.5px solid var(--line);border-radius:14px;background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:0}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-head .t{font-family:var(--h-speed);font-style:italic;font-size:15px;letter-spacing:.14em;color:var(--ink-muted);text-transform:uppercase}.card-head .big{font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.card-head .big .u{font-family:var(--h-speed);font-style:italic;font-size:15px;color:var(--ink-muted);margin-left:4px}.chip-row{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:0}.chip-row .chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:12px;font-family:var(--h-speed);font-style:italic;font-size:11px;letter-spacing:.06em;cursor:pointer;transition:all .18s ease;color:var(--ink);white-space:nowrap;flex-shrink:0}.chip-row .chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.mode-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface-2);border:1px solid transparent;border-radius:6px;padding:6px 10px;font-family:var(--h-speed);font-style:italic;font-size:9px;letter-spacing:.1em;color:var(--ink-muted);cursor:pointer;transition:all .15s ease;text-transform:uppercase}.mode-toggle.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.mode-toggle:active{transform:scale(.95)}.hms{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.hms-cell{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border-radius:10px;background:var(--surface-2)}.hms-cell input{background:transparent;border:none;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;width:100%;outline:none;padding:0;color:var(--ink);line-height:1.05}.hms-cell input:focus{outline:2px solid var(--accent);border-radius:6px}.hms-cell .l{font-family:var(--h-speed);font-style:italic;font-size:10px;letter-spacing:.12em;color:var(--ink-muted)}.dark .speed-line,.dark .brand-logo img{filter:invert(1)}.page{flex:1;display:flex;flex-direction:column;padding:2px 12px 10px;gap:8px;overflow-y:auto;overflow-x:hidden;min-height:0;-webkit-overflow-scrolling:touch}.page::-webkit-scrollbar{width:0;display:none}.page{scrollbar-width:none}.block{display:flex;flex-direction:column;gap:4px}.block-label{font-family:var(--h-speed);font-style:italic;font-size:11px;letter-spacing:.12em;color:var(--ink-muted);text-transform:uppercase;padding-left:4px}.txt-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 8px;font-size:15px;font-variant-numeric:tabular-nums;font-weight:600;width:100%;outline:none;min-width:0;text-align:center}.txt-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 25%,transparent)}.txt-input.readonly{background:var(--surface-2);color:var(--ink)}.unit{font-family:var(--h-speed);font-style:italic;font-size:15px;letter-spacing:.08em;color:var(--ink);text-transform:uppercase;font-weight:600;white-space:nowrap}.field-row{display:flex;align-items:center;gap:10px}.field-row .txt-input{max-width:120px}.pill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:6px 2px;font-family:var(--h-speed);font-style:italic;font-size:11px;letter-spacing:.04em;cursor:pointer;transition:all .18s ease;color:var(--ink);white-space:nowrap}.pill:active{transform:scale(.96)}.pill.active{background:var(--accent);border-color:var(--accent);color:#fff}.sp-display{display:flex;gap:6px;align-items:stretch;justify-content:center}.sp-cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1.5px solid transparent;border-radius:8px;padding:4px 8px;display:flex;align-items:baseline;gap:4px;cursor:pointer;color:var(--ink-muted);transition:all .15s ease}.sp-cell.active{border-color:var(--accent);color:var(--ink);background:color-mix(in oklch,var(--accent) 12%,transparent)}.sp-cell .sp-val{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.sp-cell .sp-unit{font-family:var(--h-speed);font-style:italic;font-size:15px;letter-spacing:.08em;color:var(--ink-muted)}.td-display{display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums}.td-seg{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1.5px solid transparent;border-radius:6px;padding:2px 6px;font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink-muted);cursor:pointer;transition:all .15s ease}.td-seg.active{border-color:var(--accent);color:var(--ink);background:color-mix(in oklch,var(--accent) 12%,transparent)}.td-colon{font-size:18px;font-weight:800;color:var(--ink-muted);padding:0 1px}.slider-row{display:flex;align-items:center;gap:10px}.slider-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:38px;height:38px;border-radius:8px;background:var(--surface);border:1.5px solid var(--line);font-size:22px;font-weight:700;cursor:pointer;flex-shrink:0;color:var(--ink);display:flex;align-items:center;justify-content:center;line-height:1}.slider-btn:active{transform:scale(.92);background:var(--surface-2)}.slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:4px;background:var(--surface-2);outline:none;position:relative;accent-color:var(--accent)}.slider::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--val, 0%),var(--surface-2) var(--val, 0%));border:1px solid var(--line)}.slider::-moz-range-track{height:6px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line)}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);box-shadow:0 2px 6px #00000026;margin-top:-8px;cursor:pointer}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);box-shadow:0 2px 6px #00000026;cursor:pointer}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result{border:1.5px solid var(--line);border-radius:18px;padding:10px 10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface)}.result-label{font-family:var(--h-speed);font-style:italic;font-size:14px;letter-spacing:.14em;color:var(--ink)}.result-value{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;color:var(--ink)}.result-unit{font-family:var(--h-speed);font-style:italic;font-size:11px;letter-spacing:.1em;color:var(--ink-muted)}.time-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.time-cell{display:flex;align-items:center;gap:6px;justify-content:center}.time-cell .txt-input{max-width:68px;padding:10px 6px}.distance-combo{display:flex;align-items:center;gap:8px;justify-content:flex-start}.distance-combo .txt-input{max-width:96px}.tweaks{position:fixed;right:16px;bottom:16px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;font-family:var(--h-body);font-size:13px;display:none;flex-direction:column;gap:8px;box-shadow:var(--shadow-md);z-index:100;min-width:180px}.tweaks.open{display:flex}.tweaks h4{margin:0 0 4px;font-family:var(--h-speed);font-style:italic;letter-spacing:.1em;font-size:14px}.tweaks label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.tweaks select,.tweaks button.tw{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}.mas-dial-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;margin:0 -14px;container-type:size}.mas-dial{width:min(100cqw,100cqh);height:min(100cqw,100cqh);position:relative}.mas-dial svg{width:100%;height:100%;display:block}.mas-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 22%}.mas-center .v{font-size:clamp(36px,14vw,56px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}.mas-center .u{font-family:var(--h-speed);font-style:italic;font-size:clamp(12px,3.4vw,15px);letter-spacing:.14em;color:var(--ink-muted);margin-top:4px}.mas-center .pace{margin-top:10px;font-size:clamp(14px,4vw,18px);color:var(--ink-soft);font-variant-numeric:tabular-nums;font-weight:700}.mas-center .zlabel{margin-top:8px;font-size:clamp(11px,3vw,13px);font-weight:700;line-height:1.25;padding:4px 10px;border-radius:999px;background:var(--surface-2)}.zone-list{display:flex;flex-direction:column;gap:6px}.zone{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;padding:10px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);font-size:13px;cursor:pointer;transition:all .15s ease}.zone.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.zone-pct{font-family:var(--h-speed);font-style:italic;letter-spacing:.08em;font-weight:700;font-size:14px}.zone-name{font-weight:600}.zone-val{font-variant-numeric:tabular-nums;text-align:right;font-weight:700;font-size:13px;white-space:nowrap}.zone-unit{font-family:var(--h-speed);font-style:italic;font-size:10px;letter-spacing:.06em;opacity:.7;margin-left:2px}.mas-input-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface)}.mas-input-row label{font-family:var(--h-speed);font-style:italic;font-size:13px;letter-spacing:.08em}.mas-input-row input{background:transparent;border:none;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;width:70px;text-align:center;outline:none;color:var(--ink)}.mas-input-row input:focus{outline:2px solid var(--accent);border-radius:6px}
