:root {
  color-scheme: dark;
  --background: #101614;
  --surface: #18211d;
  --surface-high: #1d2822;
  --line: #34413a;
  --text: #eef2e9;
  --muted: #a9b6aa;
  --lime: #c7f86e;
  --warn: #ffc68c;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-family: system-ui, 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, summary, label.button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.shell { max-width: 1376px; width: calc(100% - 96px); margin-inline: auto; }
.top { border-bottom: 1px solid var(--line); }
.nav { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; letter-spacing: -.05em; }
.brand-light { font-weight: 550; }
.brand-icon { display: grid; place-items: center; width: 34px; height: 34px; background: var(--lime); color: #142011; border-radius: 9px; }
.brand-icon svg { width: 25px; }
.brand-icon path, .file-icon path { stroke: currentColor; stroke-width: 2.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.local { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.local i { width: 7px; height: 7px; border-radius: 100%; background: var(--lime); box-shadow: 0 0 9px #c7f86e65; }
.hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(315px, .8fr); align-items: center; gap: clamp(20px, 5vw, 90px); padding: 49px 0 42px; }
.kicker { color: var(--lime); font: 700 11px/1.4 var(--mono); letter-spacing: .13em; margin: 0 0 10px; }
.kicker span { color: #7e9683; margin-inline: 4px; }
h1 { margin: 0; font-size: clamp(38px, 5.05vw, 77px); font-weight: 680; line-height: 1.01; letter-spacing: -.073em; }
h1 em { font-style: normal; color: var(--lime); }
.intro { max-width: 51ch; margin: 17px 0 0; font-size: 15px; line-height: 1.62; color: var(--muted); }
.import-box { background: linear-gradient(145deg, #223025, #18211d 71%); border: 1px dashed #567043; border-radius: 15px; padding: 21px; transition: border-color .18s, background .18s; }
.import-box.drag { border-color: var(--lime); background: #293c23; }
.import-head, .import-actions, .formats { display: flex; align-items: center; gap: 11px; }
.import-head strong { font-size: 17px; font-weight: 660; }
.import-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.file-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; background: #32472b; color: var(--lime); border-radius: 10px; }
.file-icon svg { width: 21px; }
.import-actions { margin: 17px 0 13px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; font-size: 13px; font-weight: 700; text-align: center; }
.button:disabled { opacity: .55; cursor: default; }
.primary { background: var(--lime); color: #19230f; }
.primary:hover:not(:disabled) { background: #dafc9c; }
.quiet, .outline { background: #202a23; color: var(--text); border-color: #3c4b40; }
.quiet:hover, .outline:hover { background: #2b3b2d; }
.formats { flex-wrap: wrap; gap: 6px; }
.formats span, .tag { color: #d4e3cf; background: #2b382e; border: 1px solid #465448; font: 700 10px/1 var(--mono); padding: 4px 6px; border-radius: 4px; }
.formats small { color: var(--muted); font-size: 11px; margin-left: 2px; }
.ride-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 13px; }
.ride-label { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ride-label .kicker { margin: 0; }
.tag { color: var(--lime); }
h2 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.035em; font-weight: 670; overflow-wrap: anywhere; }
.ride-heading h2 { font-size: clamp(22px, 2.45vw, 32px); }
.ride-meta { color: var(--muted); font-size: 12px; padding-bottom: 3px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; }
.metric-label { display: block; color: #d0dbd0; font-size: 12px; font-weight: 650; }
.metric p { margin: 5px 0 1px; color: var(--muted); font-size: 14px; }
.metric strong { color: var(--text); font: 650 clamp(25px, 3.1vw, 38px)/1.1 var(--mono); letter-spacing: -.07em; }
.metric:first-child strong { color: var(--lime); }
.metric small { display: block; color: var(--muted); font-size: 11px; }
.status { font-size: 12px; line-height: 1.45; margin: 9px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.status.warning { color: var(--warn); }
.import-status { margin: -25px 0 22px; }
.fit-status { background: #211f18; border: 1px solid #514737; padding: 9px 12px; border-radius: 6px; }
.sensitivity { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.sensitivity summary { padding: 9px 12px; color: #d0dbd0; }
.sensitivity-body { max-width: 540px; padding: 0 12px 12px; }
.sensitivity table { width: 100%; border-collapse: collapse; text-align: left; }
.sensitivity th, .sensitivity td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.sensitivity th[scope=row] { font-weight: 450; }
.sensitivity thead th:not(:first-child), .sensitivity td { text-align: right; }
.sensitivity td { font-family: var(--mono); white-space: nowrap; }
.workspace { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(290px, 1fr); align-items: start; gap: 14px; margin-top: 17px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; }
.panel-header { min-height: 70px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 9px; padding: 12px 15px; }
.panel-header .kicker { margin-bottom: 4px; }
.segmented { display: flex; gap: 3px; align-items: center; background: #121b16; border: 1px solid var(--line); padding: 3px; border-radius: 7px; }
.segmented label, .segmented button { color: var(--muted); font-size: 11px; padding: 4px 7px; white-space: nowrap; }
.segmented label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
input[type=checkbox], input[type=range] { accent-color: var(--lime); margin: 0; }
.segmented button { border: 0; background: transparent; border-radius: 4px; }
.segmented button[aria-pressed=true] { background: #2f4229; color: var(--lime); }
.map { position: relative; height: clamp(290px, 32vw, 430px); background-color: #152821; background-image: radial-gradient(ellipse at 43% 32%, #28453580, transparent 75%), linear-gradient(#36584955 1px, transparent 1px), linear-gradient(90deg, #36584955 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; overflow: hidden; border-block: 1px solid var(--line); }
#route-map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#route-map:active { cursor: grabbing; }
#route-map:focus-visible { outline-offset: -3px; }
.map-tools { position: absolute; left: 12px; top: 12px; display: grid; gap: 4px; }
.map-tools button { width: 32px; height: 32px; border: 1px solid #57715e; color: var(--text); background: #14251e; border-radius: 6px; font: 600 17px/1 var(--mono); }
.map-tools button:hover { background: #334938; }
.north { position: absolute; right: 14px; top: 13px; text-align: center; background: #17271f; border: 1px solid #4e6b58; border-radius: 6px; color: #d6ebd8; font-size: 13px; line-height: 1.1; padding: 5px 6px; pointer-events: none; }
.north small { display: block; font: 700 10px var(--mono); }
.map-scale, .attribution { position: absolute; bottom: 7px; border-radius: 3px; background: #13221de6; padding: 3px 6px; font: 10px var(--mono); color: #ebf4e9; }
.map-scale { left: 8px; border-bottom: 2px solid #a3bcb0; text-align: center; pointer-events: none; }
.attribution { right: 7px; }
.map-foot { display: flex; gap: 7px 19px; flex-wrap: wrap; color: var(--muted); padding: 11px 15px; font-size: 11px; }
.map-foot span { display: flex; gap: 6px; align-items: center; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.route-dot { background: var(--lime); }.grid-dot { border: 1px solid #7ca78c; border-radius: 1px; }.selected-dot { background: #fff; }
.wind-key { color: #83e1ed; font: 700 15px/1 var(--mono); }
.wind-cell-speed { font: 700 10px var(--mono); fill: #d8faff; stroke: #13241c; stroke-width: 2.3px; paint-order: stroke fill; }
.weather-body, .settings-body { padding: 0 15px 15px; }
.point-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; background: #222e26; color: var(--lime); border: 1px solid #3d4c40; border-radius: 7px; padding: 9px; font: 700 12px var(--mono); }
.point-header time { font: 11px system-ui, sans-serif; color: var(--muted); text-align: right; }
.weather-values { margin: 8px 0 0; }
.weather-values div { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 8px 0; }
.weather-values dt { font-size: 12px; color: #d0dbd0; }
.weather-values dt span { font-size: 10px; color: var(--muted); }
.weather-values dd { margin: 0; font: 650 12px/1.3 var(--mono); text-align: right; flex-shrink: 0; }
.source { color: #c5d4c4; font-size: 11px; margin: 9px 0 12px; line-height: 1.5; min-height: 17px; }
.hint { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.43; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 15px 4px; min-height: 24px; }
.chart-legend span { color: var(--muted); font-size: 11px; }
.chart-legend i { display: inline-block; vertical-align: middle; width: 12px; border-top: 2px solid var(--series); margin-right: 5px; }
.chart { position: relative; height: 263px; margin-inline: 7px; }
.chart svg { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.chart svg.has-data { cursor: crosshair; }
.chart text { font: 10px var(--mono); fill: #c0cec1; }
.chart #chart-empty { position: absolute; top: 35%; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 13px; padding: 0 20px; pointer-events: none; }
.scrub { display: flex; align-items: center; gap: 10px; padding: 3px 15px 12px; color: var(--muted); font-size: 11px; }
.scrub input { flex: 1; min-width: 40px; }
.scrub output { min-width: 63px; color: var(--text); font-family: var(--mono); text-align: right; }
.chart-reading { margin: 0; padding: 8px 15px 11px; border-top: 1px solid var(--line); color: #d1ddce; font: 11px/1.55 var(--mono); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fields label { display: block; min-width: 0; color: #d0dbd0; font-size: 11px; }
.fields label span { color: var(--muted); }
.fields input, .fields select { display: block; width: 100%; min-height: 34px; color: var(--text); background: #121b16; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; padding: 4px 7px; font-size: 13px; }
.manual { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 9px; color: #d0dbd0; font-size: 12px; }
.check { display: flex; gap: 6px; align-items: center; margin: 9px 0; }
.settings-body > .button { width: 100%; justify-content: space-between; margin-top: 13px; }
.method { margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; }
.method-copy { color: var(--muted); max-width: 100ch; line-height: 1.6; }
.method-copy strong { color: var(--text); }
.footer { display: flex; justify-content: space-between; gap: 15px; padding-block: 23px; color: var(--muted); font: 11px var(--mono); }
@media (max-width: 1050px) { .shell { width: calc(100% - 52px); } }
@media (max-width: 780px) { .hero { grid-template-columns: 1fr; gap: 20px; padding: 33px 0 26px; } .import-box { max-width: 560px; } .workspace { grid-template-columns: 1fr; } .import-status { margin: -17px 0 16px; } }
@media (max-width: 470px) { .shell { width: calc(100% - 28px); } .nav { height: 54px; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .metric { padding: 10px; } .map { height: 288px; } .local { font-size: 10px; } .hero h1 { font-size: 37px; } .panel-header { padding-inline: 11px; } }