/* log2tune.com. App colours from the Log2Tune source (TimePlotPanel, VECorrectionTable, HeatColor). */
:root {
  --bg:#0a0a0c;--panel:#101216;--line:#22262d;--dock:#17485a;
  --accent:#2ea8ff;--accent-hover:#5cbcff;--accent-ink:#04121d;--teal:#17c3b2;
  --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;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:16px;--max:1240px;--head:56px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after {box-sizing:border-box}
html {color-scheme:dark;-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scroll-padding-top:var(--head);scrollbar-width:thin;scrollbar-color:#2a3a4a transparent}
::-webkit-scrollbar {width:10px;height:10px}
::-webkit-scrollbar-track {background:transparent}
::-webkit-scrollbar-thumb {background:#223040;border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover {background:#2e4760}
::selection {background:rgba(46,168,255,.35);color:#fff}
body {margin:0;color:var(--text);font:16px/1.55 var(--font);font-variant-numeric:tabular-nums;overflow-wrap:break-word;overflow-x:clip}
@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)}
@media (min-width:720px) {:root {--gutter:32px}}
.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, h2, h3 {margin:0;letter-spacing:-0.02em}
h2 {font-size:clamp(30px, 4.6vw, 54px);line-height:1.05;font-weight:700;margin-bottom:14px}
h3 {font-size:18px;line-height:1.25;font-weight:650}
p {margin:0}

/* Background: 3D grid floor + drifting glows */
.bg {position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg::before {content:"";position:absolute;left:-50%;right:-50%;top:30%;height:140%;
  background-image:linear-gradient(rgba(120,170,220,.09) 1px, transparent 1px),linear-gradient(90deg, rgba(120,170,220,.09) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(700px) rotateX(62deg) translate3d(0, var(--gy, 0px), 0);will-change:transform;transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 45%, transparent 90%);mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 45%, transparent 90%)}
.glow {position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.g1 {width:70vmax;height:70vmax;left:-25vmax;top:-45vmax;background:radial-gradient(closest-side, rgba(46,168,255,.55), transparent);transform:translate3d(0, calc(var(--sy, 0) * -.1px), 0)}
.g2 {width:55vmax;height:55vmax;right:-28vmax;top:25vh;background:radial-gradient(closest-side, rgba(23,195,178,.28), transparent);transform:translate3d(0, calc(var(--sy, 0) * -.05px), 0)}
.g3 {width:60vmax;height:60vmax;left:15vw;bottom:-45vmax;background:radial-gradient(closest-side, rgba(90,110,255,.22), transparent)}

/* Glass */
.glass {background:linear-gradient(180deg, rgba(24,28,35,.72), rgba(14,16,20,.62));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(120,170,220,.14);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.85)}

/* Buttons */
.btn {display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:10px;font:600 16px/1 var(--font);text-decoration:none;vertical-align:top;transition:translate .2s var(--ease), box-shadow .2s var(--ease), background-color .2s}
.btn svg {width:18px;height:18px;flex:none}
.btn-primary {background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 40px -12px rgba(46,168,255,.8), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover {background:var(--accent-hover);translate:0 -2px;box-shadow:0 18px 50px -12px rgba(46,168,255,.95), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-big {min-height:56px;padding:0 30px;font-size:17px;border-radius:12px}

/* Header */
.topbar {position:sticky;top:0;z-index:30;height:var(--head);background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06)}
.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:5px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800}
.topbar nav {display:flex;gap:24px;margin-left:auto}
.topbar nav a {display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;text-decoration:none;transition:color .2s}
.topbar nav a:hover {color:var(--text)}
@media (max-width:640px) {.topbar nav a:not(:last-child) {display:none}.topbar nav a:last-child {font-size:15px;color:var(--text)}}

/* Hero */
.hero {padding:clamp(56px, 10vw, 120px) 0 clamp(40px, 8vw, 96px);text-align:center}
.hero h1 {font-size:clamp(58px, 12vw, 148px);line-height:.92;font-weight:800;letter-spacing:-0.05em;
  background:linear-gradient(180deg, #fff 30%, #9cc9ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead {max-width:32ch;margin:22px auto 0;font-size:clamp(19px, 2.4vw, 26px);line-height:1.35;color:var(--text-2)}
.hero .btn {margin-top:32px}
.stage {position:relative;max-width:1120px;margin:clamp(48px, 8vw, 88px) auto 0;perspective:1800px;--p:1}
.stage-glow {position:absolute;left:8%;right:8%;top:10%;bottom:-6%;z-index:-1;background:radial-gradient(closest-side, rgba(46,168,255,.45), transparent);filter:blur(50px);opacity:calc(.35 + var(--p) * .65)}
.shot-desk {width:100%;border-radius:12px;border:1px solid rgba(46,168,255,.28);background:#08080a;transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--p)) * 28deg - var(--hy, 0) * 4deg)) rotateY(calc(var(--hx, 0) * 6deg)) scale(calc(.84 + var(--p) * .16));transition:transform .25s ease-out;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03)}
.shot-phone {position:absolute;right:-1%;bottom:-9%;width:21%;border-radius:22px;border:1px solid rgba(255,255,255,.12);
  transform:translate3d(calc(var(--hx, 0) * -18px), calc((1 - var(--p)) * 140px + var(--hy, 0) * -12px), 0) rotate(calc((1 - var(--p)) * -8deg));transition:transform .25s ease-out;cursor:zoom-in;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.95), 0 0 60px -20px rgba(46,168,255,.5)}
@media (max-width:719px) {.shot-desk {border-radius:8px}.shot-phone {width:34%;right:-2%;bottom:-16%;border-radius:14px}.stage {margin-bottom:64px}}
html.motion .in-1, html.motion .in-2, html.motion .in-3, html.motion .stage {opacity:0;translate:0 30px;filter:blur(12px);transition:opacity 1s var(--ease), translate 1.1s var(--ease), filter 1s var(--ease)}
html.motion .in-2 {transition-delay:.12s}
html.motion .in-3 {transition-delay:.24s}
html.motion .stage {transition-delay:.36s;translate:0 60px}
html.motion.ready .in-1, html.motion.ready .in-2, html.motion.ready .in-3, html.motion.ready .stage {opacity:1;translate:0 0;filter:none}

/* Sections */
section.sec {padding-block:clamp(72px, 12vw, 150px);scroll-margin-top:var(--head)}
.center {text-align:center}

/* Fall-in reveals */
html.motion [data-reveal] {opacity:0;translate:0 40px;filter:blur(10px);transition:opacity .9s var(--ease) var(--d, 0ms), translate 1s var(--ease) var(--d, 0ms), scale 1s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms)}
html.motion [data-reveal=zoom] {translate:0 0;scale:.9}
html.motion [data-reveal].in {opacity:1;translate:0 0;scale:1;filter:none}

/* ---------- Playback (#drive) ---------- */
.pb {position:relative}
.pb-probe {display:none}
.pb-head {text-align:center;margin-bottom:28px}
.pb-head p {color:var(--muted);font-size:clamp(16px, 1.8vw, 19px)}
.pb-sent {height:0}
.pb-panel {margin:0 auto;max-width:1100px;border:1px solid rgba(46,168,255,.25);border-radius:14px;background:rgba(14,16,20,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:10px;display:flex;flex-direction:column;gap:8px;contain:layout paint;line-height:1.2;box-shadow:0 40px 90px -40px rgba(0,0,0,.95), 0 0 80px -40px rgba(46,168,255,.45)}
@media (min-width:720px) {.pb-panel {padding:16px;gap:10px}}

/* Life */
.bg::after {content:"";position:absolute;left:0;top:0;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side, rgba(46,168,255,.11), transparent);transform:translate(calc(var(--cx, -2000px) - 360px), calc(var(--cy, -2000px) - 360px))}
html.motion .hero h1 {background-image:linear-gradient(100deg, #fff 0%, #fff 38%, #bfe3ff 46%, #fff 54%, #9cc9ee 100%);background-size:260% 100%;animation:shine 7s ease-in-out infinite}
@keyframes shine {0%, 20% {background-position:100% 0} 70%, 100% {background-position:0 0}}
html.motion .shot-phone {animation:bob 6s ease-in-out infinite}
@keyframes bob {50% {translate:0 -12px}}
html.motion .stage-glow {animation:breathe 6s ease-in-out infinite}
@keyframes breathe {50% {scale:1.08}}
[data-zoom] {cursor:zoom-in}
.pulse {position:relative}
html.motion .pulse::after {content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(46,168,255,.7);pointer-events:none;animation:ring 2.8s var(--ease) infinite}
@keyframes ring {0% {opacity:.8;scale:.97} 70%, 100% {opacity:0;scale:1.16}}
html.motion [data-split] .w {display:inline-block;opacity:0;translate:0 .45em;filter:blur(8px);transition:opacity .7s var(--ease) calc(var(--i) * 80ms), translate .8s var(--ease) calc(var(--i) * 80ms), filter .7s var(--ease) calc(var(--i) * 80ms)}
html.motion [data-split].in .w {opacity:1;translate:0 0;filter:none}

/* Zoomed screenshot */
.zoom {position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:3vmin;background:rgba(5,6,8,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;cursor:zoom-out}
html.zoomed .zoom {opacity:1;visibility:visible}
.zoom img {max-width:100%;max-height:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px -20px #000;scale:.94;transition:scale .4s var(--ease)}
.zoom img.tall {max-height:94vh;max-height:94svh;border-radius:22px}
html.zoomed .zoom img {scale:1}

/* Haze that drifts to the panel in view, and a fine grain over everything */
.haze {position:absolute;left:0;top:0;width:1100px;height:820px;margin:-410px 0 0 -550px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(46,168,255,.26), rgba(46,168,255,.09) 55%, transparent);filter:blur(30px);transform:translate3d(50vw, 45vh, 0);will-change:transform}
@media (max-width:719px) {.haze {width:640px;height:620px;margin:-310px 0 0 -320px}}
.noise {position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Glass edges catch the light */
.glass {position:relative}
.glass::after {content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.02) 35%, rgba(46,168,255,.10) 70%, rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}

/* Nav underline slides in */
.topbar nav a {position:relative}
.topbar nav a::after {content:"";position:absolute;left:0;right:0;bottom:11px;height:1.5px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.topbar nav a:hover::after {transform:scaleX(1)}

/* Shine sweeps across the button on hover */
.btn-primary {background-image:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);background-size:250% 100%;background-position:130% 0;background-repeat:no-repeat;
  transition:translate .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, background-position .8s var(--ease)}
.btn-primary:hover {background-position:-30% 0}

.pb-panel {position:relative}
/* (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)}


.pb-howto {margin:16px 0 0;text-align:center;color:var(--muted);font-size:14px}
.howto-static {display:none}
.pb-space {height:0}

.pb-panel {opacity:calc(.15 + var(--en, 1) * .85);scale:calc(.9 + var(--en, 1) * .1);translate:0 calc((1 - var(--en, 1)) * 60px)}
.pb-panel::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%)}
.pb-plot, .pb-track {cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pb-track {height:24px;margin:-6px 0}
.pb-line {top:10px}
.pb-knobw {top:6px}
.pb-knobw i {transition:scale .2s var(--ease), box-shadow .2s}
.pb-track:hover .pb-knobw i, .scrubbing .pb-knobw i {scale:1.35;box-shadow:0 0 0 2px var(--panel), 0 0 14px rgba(46,168,255,.9)}
.pb-plot:hover .pb-cur, .scrubbing .pb-cur {border-left-color:#fff;box-shadow:-1px 0 12px rgba(255,255,255,.35)}
.scrubbing {cursor:ew-resize}
.pb-plot {height:300px}
@media (min-width:720px) {.pb-plot {height:360px}}
.pb-lab {border-radius:4px;border:1px solid rgba(255,255,255,.06);background:rgba(8,10,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root {--ch-tps:#7CFF5A;--ch-spd:#00D4FF}

/* STATIC: 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-static {display:inline}
}
/* SCROLL: the panel pins and scrolling scrubs the drive */
@media (prefers-reduced-motion:no-preference) and (min-height:521px) {
  html.js .pb-stick {position:sticky;top:calc(var(--head) + 10px);height:calc(100vh - var(--head) - 20px);height:calc(100svh - var(--head) - 20px);max-height:780px}
  html.js .pb-panel {height:100%}
  html.js .pb-plot {flex:1 1 0;min-height:180px;height:auto}
  html.js .pb-space {height:200vh;height:200svh}
  html.js .pb-howto {display:none}
}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (max-width:719px) {html.js .ve-wrap {--row:15px;--head:14px}}

/* How it works: the line runs box to box and each box traces and lights as it arrives */
#loop h2, #tabs h2 {text-align:center}
.flow {position:relative;margin-top:44px}
.flow ol {list-style:none;margin:0;padding:0 0 0 34px;display:grid;gap:16px;position:relative}
.flow li {position:relative;z-index:1;padding:22px 20px 24px 72px;border-radius:16px;background:#0f1217;border:1px solid rgba(255,255,255,.07);--lit:1;--from:0deg}
html.motion .flow li {--lit:0}
.flow .trace {position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--from), var(--accent), var(--teal) calc(var(--lit) * 360deg), transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.flow li::after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 44px -8px rgba(46,168,255,.6), inset 0 0 34px -12px rgba(46,168,255,.35);opacity:calc(var(--lit) * var(--lit))}
.flow li::before {content:"";position:absolute;left:-21px;top:50%;width:20px;height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:var(--lit)}
.flow b {position:absolute;left:18px;top:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:15px;font-weight:700;
  background:color-mix(in srgb, var(--accent) calc(var(--lit) * 100%), #0d1a26);color:color-mix(in srgb, var(--accent-ink) calc(var(--lit) * 100%), var(--accent));
  border:1px solid rgba(46,168,255,.5);box-shadow:0 0 calc(var(--lit) * 26px) -4px rgba(46,168,255,.9)}
.flow h3 {margin-bottom:6px}
.flow p {color:var(--muted);font-size:15px}
.flow-line {position:absolute;left:13px;top:40px;height:calc(100% - 80px);width:2px;z-index:0;background:rgba(255,255,255,.08);border-radius:2px}
.flow-line i {position:absolute;inset:0;border-radius:inherit;background:linear-gradient(var(--accent), var(--teal));box-shadow:0 0 16px rgba(46,168,255,.9);transform-origin:top;transform:scaleY(var(--p, 1))}
html.motion .flow-line i {transform:scaleY(var(--p, 0))}
@media (min-width:960px) {
  .flow ol {grid-template-columns:repeat(5, minmax(0, 1fr));gap:28px;padding:0}
  .flow li {padding:84px 20px 26px;--from:-90deg}
  .flow li::before {display:none}
  .flow b {left:20px;top:22px}
  .flow-line {top:50%;left:10%;width:80%;height:2px;margin-top:-1px}
  .flow-line i {transform-origin:left;transform:scaleX(var(--p, 1))}
  html.motion .flow-line i {transform:scaleX(var(--p, 0))}
}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (min-width:960px) {
  html.motion #loop {padding:0;height:calc(100vh + 900px);height:calc(100svh + 900px)}
  html.motion #loop > .wrap {position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));display:flex;flex-direction:column;justify-content:center}
}

/* What's in it */
.tiles {display:grid;gap:16px;margin-top:44px;grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (min-width:960px) {.tiles {grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px}}
@media (max-width:479px) {.tiles {grid-template-columns:minmax(0, 1fr)}}
.tile {padding:26px 24px 28px;min-height:150px;transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transition:transform .25s ease-out, opacity .9s var(--ease) var(--d, 0ms), translate 1s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms);
  background-image:radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(46,168,255,.16), transparent 60%), linear-gradient(180deg, rgba(24,28,35,.72), rgba(14,16,20,.62))}
.tile h3 {margin-bottom:8px}
.tile p {color:var(--muted);font-size:15px}
@media (max-width:719px) {.tile {min-height:0;padding:22px 20px}}

/* What you need */
.needs-card {position:relative;max-width:1000px;margin:0 auto;padding:clamp(26px, 5vw, 56px)}
.needs {list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr))}
.needs li {display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.needs li::before {content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.needs li.opt {color:var(--muted)}
.needs li.opt::before {background:var(--muted);box-shadow:none}
.not-for {margin-top:20px;color:var(--muted);font-size:15px}

/* L2T Logger: phones slide sideways as you scroll; the centre one pops */
.logger-head {text-align:center;margin-bottom:22px}
.logger-head p {color:var(--muted);font-size:clamp(16px, 1.8vw, 19px)}
.rail {overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:10px 0 16px}
.rail-track {display:flex;gap:18px;padding:0 var(--gutter);width:max-content}
.rail figure {position:relative;margin:0;scroll-snap-align:center;perspective:1100px;--focus:1}
.rail img {width:min(62vw, 250px);border:1px solid rgba(255,255,255,.14);border-radius:20px;box-shadow:0 30px 60px -25px rgba(0,0,0,.95);cursor:zoom-in}
.rail figcaption {margin-top:14px;font-size:15px;font-weight:600;color:var(--text);text-align:center}
.logger-note {margin-top:18px;text-align:center;color:var(--muted);font-size:15px}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) {
  html.motion section.logger {padding:0;height:calc(100vh + var(--travel, 1600px));height:calc(100svh + var(--travel, 1600px));--ph:min(60vh, 640px);--ph:min(60svh, 640px)}
  html.motion .logger-pin {position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  html.motion .logger-head, html.motion .logger-note {opacity:var(--fade, 1)}
  html.motion .rail {overflow:visible;scroll-snap-type:none;padding:14px 0 10px;opacity:var(--fade, 1);translate:0 calc((1 - var(--fade, 1)) * 70px);scale:calc(.9 + var(--fade, 1) * .1)}
  html.motion .rail-track {gap:44px;padding:0 calc(50vw - var(--ph) * .2309);will-change:transform}
  html.motion .rail figure {--focus:0}
  html.motion .rail figure::after {content:"";position:absolute;left:5%;right:5%;top:25%;bottom:12%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side, rgba(46,168,255,.55), transparent);filter:blur(36px);opacity:calc(var(--focus) * .9)}
  html.motion .rail img {width:auto;height:var(--ph);transform:rotateY(var(--ry, 0deg)) scale(calc(.74 + var(--focus) * .38));filter:brightness(calc(.42 + var(--focus) * .58)) saturate(calc(.55 + var(--focus) * .45))}
  html.motion .rail figcaption {opacity:calc(.25 + var(--focus) * .75);margin-top:calc(8px + var(--focus) * 18px)}
  @media (max-width:719px) {html.motion section.logger {--ph:min(52vh, 470px);--ph:min(52svh, 470px)}html.motion .rail-track {gap:26px}}
}

/* Download */
.cta {max-width:820px;margin:0 auto;text-align:center;padding:clamp(40px, 7vw, 80px) clamp(22px, 5vw, 60px);position:relative;overflow:hidden}
.cta::before {content:"";position:absolute;left:50%;top:-60%;width:120%;aspect-ratio:1;translate:-50% 0;background:radial-gradient(closest-side, rgba(46,168,255,.28), transparent);z-index:-1}
.cta p {color:var(--text-2);font-size:clamp(17px, 2vw, 20px)}
.cta .btn {margin-top:28px}
.cta .small {margin-top:22px;font-size:14px;color:var(--muted)}

/* Footer */
.footer {padding:48px 0 60px;border-top:1px solid rgba(255,255,255,.06);background:rgba(8,8,10,.6)}
.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)}
.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)}

/* Privacy page */
.doc {max-width:760px;padding:48px var(--gutter) 64px;margin:0 auto}
.doc h1 {margin:0 0 6px;font-size:clamp(34px, 5vw, 48px)}
.doc .effective {margin:0 0 32px;color:var(--muted)}
.doc h2 {margin:32px 0 8px;font-size:19px;letter-spacing:0}
.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:3px}

@media (prefers-reduced-motion:reduce) {*, *::before, *::after {transition:none !important;scroll-behavior:auto !important}}

html.motion .tile[data-reveal] {transition:transform .25s ease-out, opacity .9s var(--ease) var(--d, 0ms), translate 1s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms)}
.tile h3 {transition:color .2s}
.tile:hover h3 {color:var(--accent)}

/* ---------- pass 3 ---------- */
.hero h1 {line-height:1.02;padding:.04em .06em .34em;margin:-.04em 0 -.3em}
.bg::before {content:none}

/* haze: brighter, sized to the panel it sits behind */
.haze {width:1000px;height:700px;margin:-350px 0 0 -500px;background:radial-gradient(closest-side, rgba(46,168,255,.4), rgba(46,168,255,.17) 50%, rgba(46,168,255,.05) 75%, transparent);filter:none;transform-origin:50% 50%}
.haze-2 {background:radial-gradient(closest-side, rgba(23,195,178,.22), transparent 70%)}
@media (max-width:719px) {.haze {width:1000px;height:700px;margin:-350px 0 0 -500px}}

/* operating point on the VE table */
.ve-vx {border-left-color:rgba(0,0,12,.8)}
.ve-hy {border-top-color:rgba(0,0,12,.8)}

/* VE table on phones: same look as the app (square cells, dark grid, values), just smaller */
@media (max-width:719px) {
  .ve-wrap {--lab:28px;--head:14px;--row:15px}
  .ve {border-spacing:0}
  .ve td {font-size:7.6px;letter-spacing:-.02em;border-radius:0;box-shadow:inset -1px -1px 0 var(--ve-grid)}
  .ve thead th:nth-child(odd):not(:first-child), .ve tbody tr:nth-child(even) th {visibility:visible}
  .ve th[scope=row] {font:8.5px/var(--row) var(--font);padding-right:4px}
  .ve thead th {font-size:8px}
  .ve-ov {left:var(--lab);top:var(--head);right:0;bottom:0}
}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (max-width:719px) {
  html.js .ve-wrap {--row:13px;--head:13px;--lab:28px}
  html.js .pb-panel {padding:8px;gap:6px}
  html.js .pb-lab {font-size:10.5px;top:2px;left:3px}
  html.js .pb-stick {top:calc(var(--head) + 6px);height:calc(100vh - var(--head) - 12px);height:calc(100svh - var(--head) - 12px)}
}
/* How it works pins on phones too, so the line stops at each box */
@media (prefers-reduced-motion:no-preference) and (min-height:600px) and (max-width:959px) {
  html.motion #loop {padding:0;height:calc(100vh + 1100px);height:calc(100svh + 1100px)}
  html.motion #loop > .wrap {position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));display:flex;flex-direction:column;justify-content:center}
  html.motion .flow {margin-top:24px}
  html.motion .flow ol {gap:12px}
  html.motion .flow li {padding:16px 16px 18px 64px}
  html.motion .flow b {left:14px;top:16px;width:34px;height:34px}
}

/* running light around the playback panel and the download card */
@property --beam {syntax:'<angle>';inherits:false;initial-value:0deg}
.beam::before {content:"";position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;translate:none;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--beam), transparent 0deg, rgba(46,168,255,.0) 250deg, rgba(46,168,255,.9) 320deg, #bfe6ff 345deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine) {html.motion .beam::before {animation:beam 6s linear infinite}}
@keyframes beam {to {--beam:360deg}}
.cta {background-image:radial-gradient(ellipse at 50% -10%, rgba(46,168,255,.28), transparent 60%), linear-gradient(180deg, rgba(24,28,35,.72), rgba(14,16,20,.62))}

/* tile icons, checklist ticks */
.tile .ico {width:30px;height:30px;margin-bottom:14px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(46,168,255,.55));transition:transform .3s var(--ease)}
.tile:hover .ico {transform:translateY(-2px) scale(1.08)}
.needs li::before {width:18px;height:18px;border-radius:50%;background:rgba(46,168,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea8ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 12px rgba(46,168,255,.35)}
.needs li.opt::before {background-color:rgba(255,255,255,.06);filter:grayscale(1) opacity(.7);box-shadow:none}

/* hero: reflection under the screenshot, zoom hint */
@media (hover:hover) {.shot-desk {-webkit-box-reflect:below 6px linear-gradient(transparent 78%, rgba(255,255,255,.10))}}
.zoom-hint {position:absolute;right:26%;top:12px;z-index:3;opacity:clamp(0, (var(--p) - .9) * 10, 1);display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(10,12,16,.7);border:1px solid rgba(255,255,255,.14);pointer-events:none}
.zoom-hint svg {width:16px;height:16px;fill:none;stroke:#cfe8ff;stroke-width:2;stroke-linecap:round}
@media (max-width:719px) {.zoom-hint {right:38%;top:8px;width:30px;height:30px}}

/* logger: phones are rendered large and only ever scaled down (sharp); dimming is an overlay, not a filter */
@media (prefers-reduced-motion:no-preference) and (min-height:521px) {
  html.motion .rail img {height:calc(var(--ph) * 1.12);transform:rotateY(var(--ry, 0deg)) scale(calc(.64 + var(--focus) * .36));filter:none}
  html.motion .rail figure::before {content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--ph) * 1.12);border-radius:20px;background:#05070a;opacity:calc((1 - var(--focus)) * .6);transform:rotateY(var(--ry, 0deg)) scale(calc(.64 + var(--focus) * .36));pointer-events:none;z-index:1}
  html.motion .rail {touch-action:pan-y;cursor:grab}
  html.motion .rail.swiping {cursor:grabbing}
  html.motion .rail-track {padding:0 calc(50vw - var(--ph) * .2586)}
}

/* phones and touch screens: keep it smooth */
@media (hover:none), (max-width:719px) {
  .noise {display:none}
  .glass, .pb-panel, .pb-lab, .topbar {-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass {background:linear-gradient(180deg, rgba(22,26,33,.94), rgba(14,16,20,.94))}
  .pb-panel {background:rgba(14,16,20,.97)}
  .topbar {background:rgba(10,10,12,.92)}
  .shot-desk, .shot-phone {transition:none}
  html.motion [data-reveal], html.motion [data-split] .w, html.motion .in-1, html.motion .in-2, html.motion .in-3, html.motion .stage {filter:none !important}
  .glow {filter:blur(60px)}
  .zoom {-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,6,8,.96)}
}
html.zoomed .shot-phone, html.zoomed .stage-glow, html.zoomed .hero h1, html.zoomed .pulse::after, html.zoomed .beam::before {animation-play-state:paused}
.zoom img {will-change:transform}

/* the title shine repaints text every frame: desktop mice only */
@media (hover:none), (pointer:coarse) {html.motion .hero h1 {animation:none;background-position:0 0}}

/* screenshot viewer */
.zoom {touch-action:none;overscroll-behavior:contain;display:block;padding:0;cursor:default}
.zoom img {position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;max-width:94vw;max-height:88vh;max-height:88svh;scale:1;
  transform-origin:0 0;will-change:transform;border-radius:10px;cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.zoom img.anim {transition:transform .28s var(--ease)}
html.zoomed .zoom img {scale:1}
.zoom-x {position:absolute;top:max(12px, env(safe-area-inset-top));right:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);background:rgba(16,18,22,.85);color:#fff;cursor:pointer}
.zoom-x svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* suite screenshot: lossless full-res, dead flat at rest (no cursor lean), shown as wide as the screen allows */
.shot-desk {transform:rotateX(calc((1 - var(--p)) * 28deg)) scale(calc(.84 + var(--p) * .16));transition:none;image-rendering:auto}
@media (min-width:1240px) {.stage {max-width:none;width:min(1400px, calc(100vw - 48px));margin-left:calc(50% - min(700px, 50vw - 24px))}}

/* soft glows are gradients already: no blur filters (huge layers to redraw, especially when zoomed) */
.glow, .stage-glow, html.motion .rail figure::after {filter:none}
.stage-glow {background:radial-gradient(closest-side, rgba(46,168,255,.34), rgba(46,168,255,.1) 60%, transparent)}
/* while pinch-zoomed */
html.pinched .bg, html.pinched .stage-glow, html.pinched .rail figure::after {display:none}
html.pinched *, html.pinched *::before, html.pinched *::after {animation-play-state:paused !important}
html.pinched .shot-desk {-webkit-box-reflect:none}


/* VE table on phones: taller rows, bigger values, a lighter crosshair */
@media (max-width:719px) {
  .ve-wrap {--row:17px}
  .ve td {font-size:8.3px}
  .ve th[scope=row] {font-size:9px}
  .ve thead th {font-size:8.5px}
}
@media (prefers-reduced-motion:no-preference) and (min-height:521px) and (max-width:719px) {html.js .ve-wrap {--row:16px;--head:14px}}

/* Windows download: coming soon (plain, not clickable) */
.btn-soon {cursor:default;background:rgba(255,255,255,.05);color:var(--text-2);border:1px solid rgba(255,255,255,.14);box-shadow:none;white-space:nowrap}
.btn-soon svg {opacity:.7}
.btn-soon {max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
@media (max-width:479px) {.btn-soon.btn-big {padding:10px 16px;font-size:15px;min-height:50px}}

/* crosshair exactly as the suite draws it (VECorrectionTable: #00000C, 1.3px), every screen size */
.ve-vx {border-left:1.3px solid #00000C;margin-left:-.65px}
.ve-hy {border-top:1.3px solid #00000C;margin-top:-.65px}

/* viewer image: positioned and sized by script; never a GPU-scaled bitmap */
.zoom img {left:0;top:0;right:auto;bottom:auto;margin:0;max-width:none;max-height:none;width:auto;height:auto;scale:none;will-change:auto;transform-origin:0 0}
.zoom img.anim {transition:transform .28s var(--ease), width .28s var(--ease), height .28s var(--ease)}

/* Docs pages */
.doc-back {display:inline-flex;align-items:center;min-height:44px;margin:0 0 6px;color:var(--muted);font-size:14px;text-decoration:none}
.doc-back:hover {color:var(--text)}
.doc h1 + p, .doc h1 + ul {margin-top:16px}
.doc h3 {margin:26px 0 8px;font-size:17px;letter-spacing:0;color:var(--text)}
.doc ul, .doc ol {margin:0 0 16px;padding-left:22px;color:var(--text-2)}
.doc li {margin:0 0 6px}
.doc li::marker {color:var(--accent)}
.doc strong {color:var(--text)}
.doc hr {margin:36px 0;border:0;border-top:1px solid rgba(255,255,255,.08)}
.doc-table {margin:8px 0 22px;overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:rgba(16,18,22,.6)}
.doc table {width:100%;border-collapse:collapse;font-size:14px}
.doc table.wide {min-width:680px}
.doc table.wide th, .doc table.wide td {white-space:nowrap}
.doc th, .doc td {padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc thead th {background:#15181d;color:var(--text);font-weight:600}
.doc td {color:var(--text-2)}
.doc tbody tr:last-child td {border-bottom:0}
.doc .katex {color:var(--text);font-size:1.12em}
.doc .katex-display {margin:18px 0;padding:4px 0;overflow-x:auto;overflow-y:hidden}
.doc .caution {margin:8px 0 0}
.doc .doc-list {list-style:none;margin:24px 0 0;padding:0}
.doc-list li {margin:0;border-top:1px solid var(--line)}
.doc-list li:last-child {border-bottom:1px solid var(--line)}
.doc-list a {display:block;padding:14px 0;text-decoration:none}
.doc-list b {display:block;color:var(--text);font-weight:600;transition:color .2s}
.doc-list span {color:var(--muted);font-size:15px}
.doc-list a:hover b {color:var(--accent)}