:root{--bg:#eef2f7;--surface:#fff;--ink:#0b1220;--muted:#5b6b7f;--line:#dbe3ec;--accent:#2563eb;--accent-ink:#fff;--danger:#d1344a;color:var(--ink);background:var(--bg);font-synthesis:none;-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}html,body{height:100%;margin:0;overflow:hidden}#root{height:100%}*{box-sizing:border-box}#main{flex-direction:column;height:100dvh;display:flex}#topbar{background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;flex-shrink:0;gap:10px;padding:12px 14px;display:flex;box-shadow:0 1px 3px #0b12200d}.topbar-row{align-items:center;gap:12px;display:flex}#title-text{letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;margin:0;font-size:clamp(1.5rem,6vw,2.15rem);font-weight:800;line-height:1.05;overflow:hidden}.segmented{background:var(--bg);border:1px solid var(--line);border-radius:999px;flex-shrink:0;gap:2px;padding:3px;display:inline-flex}.segmented button{appearance:none;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.4em .85em;font-size:.9rem;font-weight:600;transition:color .12s,background .12s}.segmented button:hover{color:var(--ink)}.segmented button.active{background:var(--accent);color:var(--accent-ink)}.search-row{gap:8px;display:flex}#location-input{min-width:0;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;flex:auto;padding:.55em .8em;font-size:16px}#location-input::placeholder{color:var(--muted)}#location-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #2563eb26}.btn{font:inherit;cursor:pointer;border:1px solid #0000;border-radius:10px;flex-shrink:0;padding:.55em 1.05em;font-size:15px;font-weight:600;transition:background .12s,border-color .12s,transform 50ms}.btn:active{transform:translateY(1px)}.btn-go{background:var(--accent);color:var(--accent-ink)}.btn-go:hover{background:#1d4ed8}.btn-gps{background:var(--surface);color:var(--ink);border-color:var(--line)}.btn-gps:hover{border-color:var(--muted)}.btn:focus-visible,.segmented button:focus-visible,#location-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#status-text{color:var(--danger);font-size:.9rem;font-weight:600}#charts{flex:1;grid-template-rows:repeat(3,1fr);gap:6px;min-height:0;padding:6px;display:grid}.chart-container{background:var(--surface);border:1px solid var(--line);border-radius:12px;flex-direction:column;min-height:0;padding:4px 8px 2px;display:flex;overflow:hidden}.chart-legend{flex-shrink:0;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 2px 3px;display:flex}.legend-items{flex-wrap:wrap;gap:2px 12px;display:flex}.legend-item{color:var(--ink);white-space:nowrap;align-items:center;gap:5px;font-size:.78rem;font-weight:600;display:inline-flex}.legend-dot{border-radius:50%;flex-shrink:0;width:9px;height:9px}.legend-unit{color:var(--muted);flex-shrink:0;font-size:.72rem;font-weight:600}.chart-canvas{flex:1;min-height:0;position:relative}@media (width>=640px){#topbar{flex-flow:wrap;align-items:center}.topbar-row{flex:100%}.search-row{flex:100%;max-width:520px}}