/* log2tune.com v2. App colours from the Log2Tune source (TimePlotPanel, VECorrectionTable, HeatColor, ThemeColors). */
:root {
  --bg:#0a0a0c;--panel:#101216;--line:#22262d;--dock:#17485a;
  --accent:#2ea8ff;--accent-hover:#5cbcff;--accent-ink:#04121d;
  --text:#e6e8eb;--text-2:#c4c9cf;--muted:#8b929b;--danger:#ff4d57;--caution-text:#d9b7ba;
  --ch-rpm:#4FA8FF;--ch-map:#00E36A;--ch-afr:#FF4FD8;
  --lane-bg:#060608;--lane-sep:#101016;--app-label:#9BA2AF;--app-cursor:#CFD2DA;--app-marker:#FFE000;--app-active:#FFFF00;--app-cross:#00000C;
  --ve-ink:#0A0A0C;--ve-grid:#0C0C10;--track:#1c2230;
  --seg-cruise:#4080C0;--seg-boost:#E07820;--seg-decel:#506888;--seg-transient:#707070;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:16px;--max:1240px;--measure:68ch;
}

*, *::before, *::after {box-sizing:border-box}
html {color-scheme:dark;-webkit-text-size-adjust:100%}
body {margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--font);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
@media (min-width:900px) {body {font-size:17px}}
img {display:block;max-width:100%;height:auto}
:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
a {color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.wrap {max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.vh {position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1 {margin:0 0 16px;font-size:clamp(36px, 6vw, 56px);line-height:1.05;font-weight:700;letter-spacing:-0.025em}
h2 {margin:0 0 16px;font-size:clamp(24px, 3vw, 34px);line-height:1.2;font-weight:650;letter-spacing:-0.015em}
.lead {margin:0 0 12px;max-width:48ch;font-size:clamp(19px, 2.1vw, 22px);line-height:1.4;font-weight:500}

section.sec {padding-block:clamp(56px, 9vw, 112px);border-top:1px solid var(--line);scroll-margin-top:16px}
.col > *, .measure {max-width:var(--measure)}

/* Buttons */
.btn {display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:4px;font:600 15px/1 var(--font);text-decoration:none;vertical-align:top}
.btn svg {width:18px;height:18px;flex:none}
.btn-primary {background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover {background:var(--accent-hover)}

/* Header */
.topbar {height:56px;border-bottom:1px solid var(--line)}
.topbar .wrap {display:flex;align-items:center;height:100%;gap:20px}
.brand {display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text);font-size:14px;font-weight:600;letter-spacing:.02em;text-decoration:none}
.badge {display:inline-flex;align-items:center;height:22px;padding:0 6px;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800}
.topbar nav {display:flex;gap:20px;margin-left:auto}
.topbar nav a {display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;text-decoration:none}
.topbar nav a:hover {color:var(--text);text-decoration:underline}
@media (max-width:640px) {.topbar nav a:not(:last-child) {display:none}
  .topbar nav a:last-child {font-size:15px}
}

/* Hero */
.hero {padding:48px 0 56px}
@media (min-width:900px) {.hero {padding:64px 0 72px}}
.hero-body {margin:0;max-width:62ch;color:var(--text-2)}
.hero .btn {margin-top:24px}
.shot {margin:40px 0 0}
.shot-row {display:flex;align-items:flex-end;gap:16px}
.shot-desk {flex:1 1 auto;min-width:0;border:1px solid var(--dock);border-radius:2px;background:#08080A}
.shot-phone {flex:none;width:24%;border:1px solid #262a31;border-radius:18px}
@media (min-width:960px) {.shot-phone {width:21%}}
@media (max-width:639px) {.shot-row {display:block}
  .shot-phone {width:46%;margin-top:12px}
}

/* ---------- Playback (#drive) ---------- */
.pb {position:relative}
.pb-probe {position:absolute;top:0;left:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none}
.pb-sent {height:0}
.pb-stick {margin-top:24px}
.pb-panel {margin:0;max-width:880px;border:1px solid var(--dock);border-radius:2px;background:var(--panel);padding:8px;display:flex;flex-direction:column;gap:6px;contain:layout paint;line-height:1.2}
@media (min-width:720px) {.pb-panel {padding:12px;gap:8px}}
@media (min-width:960px) {.pb-panel {padding:16px}}

/* (a) playback bar */
.pb-bar {display:grid;grid-template-columns:auto minmax(0, 1fr) auto;gap:10px;align-items:center;min-height:24px;font-size:12px;color:var(--app-label)}
@media (min-width:720px) {.pb-bar {min-height:28px}}
.pb-track {position:relative;height:12px}
.pb-line {position:absolute;left:6px;right:6px;top:4px;height:4px;background:var(--track);border-radius:2px}
.pb-fill {position:absolute;inset:0;background:var(--accent);transform-origin:left}
.pb-knobw {position:absolute;left:6px;right:6px;top:0;height:12px}
.pb-knobw i {display:block;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel)}
.pb-range {display:none;width:100%;height:44px;margin:0;accent-color:var(--accent);touch-action:pan-y}

/* (b) readouts */
.pb-read {display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:20px;margin:0;font-size:12px}
.pb-read > div {display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.pb-read dt {color:var(--app-label)}
.pb-read dd {margin:0;color:var(--text);font-size:14px}
@media (min-width:960px) {.pb-read dd {font-size:15px}}
.pb-read .wide {display:none}
@media (min-width:720px) {.pb-read .wide {display:flex}}
.sw {display:inline-block;width:8px;height:8px;margin-right:6px}
[data-z=C] .sw {background:var(--seg-cruise)}
[data-z=B] .sw {background:var(--seg-boost)}
[data-z=D] .sw {background:var(--seg-decel)}
[data-z=T] .sw {background:var(--seg-transient)}

/* (c) VE table */
.pb-ve {flex:none}
.pb-ve-t {margin:0 0 4px;font-size:12px;color:var(--muted)}
.ve-wrap {position:relative;--lab:34px;--head:13px;--row:11px}
@media (min-width:720px) {.ve-wrap {--lab:40px;--head:16px;--row:18px}}
@media (min-width:960px) {.ve-wrap {--lab:44px;--head:18px;--row:22px}}
.ve {width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font:11px/1 var(--font)}
@media (min-width:1200px) {.ve {font-size:12px}}
.ve th, .ve td {padding:0;height:var(--row);text-align:center;white-space:nowrap;overflow:hidden}
.ve td {box-shadow:inset -1px -1px 0 var(--ve-grid)}
.ve thead th {height:var(--head);color:var(--app-label);font-weight:400}
.ve th[scope=row] {text-align:right;padding-right:6px;color:var(--app-label);font-weight:400}
@media (max-width:719px) {.ve td {font-size:0}
  .ve th[scope=row] {font:10px/var(--row) var(--font)}
  .ve thead th:nth-child(odd):not(:first-child), .ve tbody tr:nth-child(even) th {visibility:hidden}
}
.ve-ov {position:absolute;left:var(--lab);top:var(--head);right:0;bottom:0;overflow:hidden;pointer-events:none}
.ve-vx {position:absolute;inset:0;border-left:1px solid var(--app-cross)}
.ve-hy {position:absolute;inset:0;border-top:1px solid var(--app-cross)}
.ve-hl {position:absolute;left:0;top:0;width:calc(100% / 12);height:calc(100% / 9);box-shadow:inset 0 0 0 2px var(--app-active)}

/* (d) time plot */
.pb-plot {position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;height:200px;background:var(--lane-sep)}
@media (min-width:720px) {.pb-plot {height:240px}}
.pb-lane {position:relative;flex:1;overflow:hidden;background:var(--lane-bg)}
.pb-lane svg {position:absolute;inset:0;width:100%;height:100%}
.tr {fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tg {fill:none;stroke:rgba(207, 210, 218, .55);stroke-width:1;vector-effect:non-scaling-stroke}
.pb-lab {position:absolute;left:4px;top:3px;z-index:1;margin:0;padding:1px 4px;font-size:11px;background:rgba(0, 0, 0, .6);white-space:nowrap}
@media (min-width:720px) {.pb-lab {font-size:12px}}
.pb-lab [data-pb] {color:#fff}
.k-tgt {color:var(--app-label)}
.k-tgt::before {content:"";display:inline-block;width:10px;height:1px;margin:0 4px 3px 8px;background:rgba(207, 210, 218, .55)}
.pb-dotw {position:absolute;inset:0;pointer-events:none}
.pb-dotw i {position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--app-marker)}
.pb-zones {display:block;flex:none;width:100%;height:6px}
.pb-cur {position:absolute;inset:0;z-index:2;border-left:1px solid var(--app-cursor);pointer-events:none}

/* (e) legend */
.pb-legend {display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--muted)}

/* steps */
.pb-steps {margin-top:24px}
.pb-steps p {max-width:60ch;color:var(--text)}
.pb-howto {margin:0 0 16px}
.pb-step {margin:0 0 16px}
.howto-scroll, .howto-static {display:none}

/* STATIC:JS, reduced motion or short viewport */
@media (prefers-reduced-motion:reduce), (max-height:520px) {html.js .pb-range {display:block}
  html.js .pb-track {display:none}
  html.js .pb-bar {min-height:44px}
  html.js .howto-nojs {display:none}
  html.js .howto-static {display:inline}
}

/* SCROLL:scroll position is the playback cursor */
@media (prefers-reduced-motion:no-preference) and (min-height:521px) {html.js .howto-nojs {display:none}
  html.js .howto-scroll {display:inline}
  html.js .pb-stick {position:sticky;top:0;z-index:1;height:62vh;height:62svh;margin:0 calc(-1 * var(--gutter));padding:8px var(--gutter) 10px;background:var(--bg)}
  html.js .pb-panel {height:100%;max-width:none}
  html.js .pb-plot {flex:1 1 0;min-height:96px;height:auto}
  html.js .pb-steps {margin-top:0;padding-top:6vh;padding-top:6svh}
  html.js .pb-howto {margin:0 0 8vh;margin:0 0 8svh}
  html.js .pb-step {margin:0;min-height:44vh;min-height:44svh}
  html.js .pb-step:last-child {min-height:50vh;min-height:50svh}
}
/* short phones: the spec budget omits the stick padding, so give the lanes room (38px+ at 360x560) */
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (max-height:599px) and (max-width:719px) {html.js .ve-wrap {--row:9px}html.js .pb-panel {gap:4px}}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (min-width:720px) and (max-width:959px) {html.js .pb-stick {height:58vh;height:58svh}
}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (min-width:960px) {html.js .pb {display:grid;grid-template-columns:minmax(0, 24rem) minmax(0, 1fr);column-gap:40px}
  html.js .pb-head, html.js .pb-steps {grid-column:1}
  html.js .pb-sent {grid-column:2;grid-row:1}
  html.js .pb-stick {grid-column:2;grid-row:1 / span 2;align-self:start;top:24px;height:min(calc(100vh - 48px), 760px);height:min(calc(100svh - 48px), 760px);margin:0;padding:0;background:none}
  html.js .pb-steps {padding-top:20vh;padding-top:20svh}
  html.js .pb-step {min-height:56vh;min-height:56svh}
  html.js .pb-step:last-child {min-height:60vh;min-height:60svh}
}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (min-width:1200px) {html.js .pb {column-gap:56px}
}

/* Tuning loop */
.loop {margin:0 0 16px;padding-left:1.4em}
.loop li {margin:0 0 12px}
.loop li::marker {color:var(--muted)}

/* What you need */
.needs {max-width:760px;margin:0}
.needs dt {font-size:15px;font-weight:600;color:var(--muted)}
.needs dd {margin:0;font-size:16px;color:var(--text)}
@media (min-width:640px) {.needs {display:grid;grid-template-columns:11rem minmax(0, 1fr)}
  .needs dt, .needs dd {padding:12px 0;border-top:1px solid var(--line)}
  .needs dt:first-of-type, .needs dd:first-of-type {border-top:0}
}
@media (max-width:639px) {.needs dt {margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .needs dt:first-of-type {margin-top:0;padding-top:0;border-top:0}
  .needs dd {margin:4px 0 0}
}
.not-for {margin:20px 0 0;max-width:var(--measure);color:var(--text)}
.moates {max-width:var(--measure);color:var(--text-2)}

/* The six tabs */
.tabs-dl {max-width:900px;margin:0}
.tabs-dl dt {font-size:16px;font-weight:600;color:var(--text)}
.tabs-dl dd {margin:4px 0 18px;color:var(--text-2)}
@media (min-width:800px) {.tabs-dl {display:grid;grid-template-columns:10rem minmax(0, 1fr);gap:20px 24px}
  .tabs-dl dd {margin:0}
}
.tabs-note {max-width:var(--measure);color:var(--text-2)}

/* L2T Logger rail */
.rail {display:grid;grid-auto-flow:column;grid-auto-columns:min(60vw, 260px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 12px;scroll-padding-inline:var(--gutter)}
.rail figure {margin:0;scroll-snap-align:start}
.rail img {border:1px solid #262a31;border-radius:18px}
.rail figcaption {margin-top:10px;font-size:14px;color:var(--muted);text-align:left}
@media (min-width:720px) {.rail {grid-auto-columns:min(34%, 260px)}}
@media (min-width:1100px) {.rail {grid-auto-flow:row;grid-template-columns:repeat(5, minmax(0, 1fr));overflow:visible;margin-inline:0;padding:0;scroll-snap-type:none}
}
.rail-after {margin-top:24px}

/* Download */
#download .btn {margin:8px 0 24px}

/* Footer */
.footer {padding:40px 0 56px;border-top:1px solid var(--line)}
.caution {display:grid;grid-template-columns:20px minmax(0, 1fr);gap:12px;max-width:80ch;padding:4px 0 4px 14px;border-left:2px solid var(--danger);font-size:14px;color:var(--caution-text)}
.caution svg {width:20px;height:20px;color:var(--danger)}
.caution p {margin:0}
.foot-row {display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:22px;font-size:14px;color:var(--muted)}
.foot-row .fl {display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}
.foot-row .fl:hover {color:var(--text);text-decoration:underline}

/* Privacy page */
.doc {max-width:760px;padding:48px var(--gutter) 64px;margin:0 auto}
.doc h1 {margin:0 0 6px}
.doc .effective {margin:0 0 32px;color:var(--muted)}
.doc h2 {margin:32px 0 8px;font-size:19px}
.doc p {margin:0 0 12px;color:var(--text-2)}
.doc code {font-size:14px;color:var(--text);background:#15181d;padding:1px 5px;border-radius:2px}