.telemetry-section { scroll-margin-top:24px; }
.telemetry-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:18px; align-items:stretch; }
.telemetry-map-panel,.telemetry-sector-panel,.telemetry-trace-panel { overflow:hidden; border-radius:20px; }
.telemetry-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:26px 27px 20px; }
.telemetry-panel-head h3 { margin:0; color:#263042; font-size:21px; letter-spacing:-.035em; }
.telemetry-panel-head p { margin:7px 0 0; color:#6b788b; font-size:14px; line-height:1.5; }
.telemetry-source { flex:none; color:#8a3445; background:#fbeced; border-radius:100px; padding:8px 11px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.telemetry-map-stage { position:relative; display:grid; place-items:center; min-height:334px; overflow:hidden; background:#171d27; isolation:isolate; }
.telemetry-map-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 48%,#273449 0%,transparent 52%),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size:auto,30px 30px,30px 30px; opacity:.7; }
.telemetry-map-stage img { position:relative; z-index:1; display:block; width:100%; max-height:350px; object-fit:contain; padding:30px 20px; filter:drop-shadow(0 0 12px #ffffff33); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s; }
.telemetry-map-stage:hover img { transform:scale(1.045); filter:drop-shadow(0 0 18px #ffffff55); }
.telemetry-map-stage img:not([src]),.telemetry-map-stage img.is-missing { display:none; }
.telemetry-map-scan { position:absolute; z-index:2; top:0; bottom:0; width:120px; pointer-events:none; background:linear-gradient(90deg,transparent,#e53b5522,transparent); transform:translateX(-150%); animation:lapstats-scan 9s ease-in-out infinite; }
.telemetry-map-empty { position:absolute; z-index:2; color:#b9c7d8; text-align:center; padding:20px; font-size:14px; }
.telemetry-map-stage.has-image .telemetry-map-empty { display:none; }
.telemetry-map-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 27px 22px; color:#687587; font-size:13px; line-height:1.5; }
.telemetry-map-footer strong { color:#263042; font-size:15px; white-space:nowrap; }
.telemetry-map-footer span { max-width:320px; text-align:right; }
.telemetry-play,.telemetry-load { border:1px solid #dce2e9; background:#fff; color:#993248; border-radius:11px; padding:10px 14px; font:700 13px 'Plus Jakarta Sans',sans-serif; cursor:pointer; white-space:nowrap; transition:background .2s,transform .2s,border-color .2s; }
.telemetry-play:hover:not(:disabled),.telemetry-load:hover:not(:disabled) { background:#fbeced; border-color:#d5a4ad; transform:translateY(-2px); }
.telemetry-play:disabled,.telemetry-load:disabled { color:#98a3b2; cursor:not-allowed; }
.telemetry-sector-focus { margin:0 27px 17px; min-height:76px; display:flex; align-items:center; color:#243247; font-size:17px; line-height:1.5; font-weight:700; }
.telemetry-sector-focus strong { color:#b42f44; font-size:27px; font-variant-numeric:tabular-nums; }
.telemetry-sector-list { display:grid; gap:9px; padding:0 27px 18px; }
.telemetry-sector { width:100%; display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:14px; align-items:center; border:1px solid #e5eaf0; background:#f8fafc; border-radius:13px; padding:12px 14px; text-align:left; color:#263042; cursor:pointer; transition:background .24s,border-color .24s,transform .24s,box-shadow .24s; }
.telemetry-sector:hover { transform:translateX(3px); border-color:#d5a4ad; }
.telemetry-sector.is-active { background:#fff3f4; border-color:#d57484; box-shadow:0 6px 20px #a72f4512; }
.telemetry-sector:focus-visible,.telemetry-play:focus-visible,.telemetry-load:focus-visible { outline:3px solid #bf3046; outline-offset:3px; }
.telemetry-sector b { font-size:14px; }
.telemetry-sector small { color:#647186; font-size:12px; line-height:1.4; }
.telemetry-sector em { font-style:normal; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; }
.telemetry-sector em.is-gain { color:#1b8a60; }
.telemetry-sector em.is-loss { color:#c02d3b; }
.telemetry-sector-track { height:6px; border-radius:99px; background:#e9eef4; overflow:hidden; margin-top:7px; }
.telemetry-sector-track i { display:block; height:100%; border-radius:inherit; background:#c02d3b; width:var(--width); transform-origin:left; animation:lapstats-reveal .7s cubic-bezier(.2,.8,.2,1) both; }
.telemetry-sector.is-gain .telemetry-sector-track i { background:#27956c; }
.telemetry-scrubber { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:6px 27px 25px; color:#6b788b; font-size:13px; font-weight:700; }
.telemetry-scrubber input { width:100%; accent-color:#c02d3b; }
.telemetry-coach { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.telemetry-insight { border:1px solid #e2e7ed; border-radius:17px; background:#fff; padding:20px 21px; min-height:126px; animation:lapstats-rise .5s ease both; }
.telemetry-insight:nth-child(2) { animation-delay:.09s; }.telemetry-insight:nth-child(3) { animation-delay:.18s; }
.telemetry-insight span { display:block; color:#9d3448; text-transform:uppercase; font-size:11px; letter-spacing:.09em; font-weight:800; margin-bottom:9px; }
.telemetry-insight strong { display:block; color:#263042; font-size:16px; line-height:1.35; }
.telemetry-insight p { color:#687587; font-size:13px; line-height:1.55; margin:7px 0 0; }
.telemetry-trace-panel { margin-top:18px; }
.telemetry-trace-state { margin:0 27px 18px; color:#647186; font-size:14px; }
.telemetry-trace-chart { min-height:100px; margin:0 20px; }
.telemetry-trace-chart svg { width:100%; display:block; min-height:285px; font-family:'Plus Jakarta Sans',sans-serif; }
.telemetry-trace-chart svg text { fill:#5a687b; font-size:13px; }
.telemetry-trace-chart .trace-grid { stroke:#e6ebf0; stroke-width:1; }
.telemetry-trace-chart .trace-line { fill:none; stroke-width:3.3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--trace-length); stroke-dashoffset:var(--trace-length); animation:lapstats-trace 1.25s cubic-bezier(.2,.8,.2,1) forwards; }
.telemetry-trace-chart .trace-dot { stroke:#fff; stroke-width:1.5; cursor:crosshair; }
.telemetry-trace-chart .trace-cursor { stroke:#8c9aab; stroke-width:1.5; stroke-dasharray:5 5; }
.telemetry-trace-legend { display:flex; flex-wrap:wrap; gap:15px; margin:12px 7px 8px; font-size:13px; color:#4e5d70; }
.telemetry-trace-legend span { display:inline-flex; align-items:center; gap:8px; }
.telemetry-trace-legend i { width:9px; height:9px; border-radius:50%; background:var(--color); }
.telemetry-trace-control { display:flex; align-items:center; gap:14px; margin:15px 7px; color:#334155; font-size:13px; font-weight:700; }
.telemetry-trace-control input { flex:1; accent-color:#c02d3b; }
.telemetry-caveat { border-top:1px solid #edf0f3; margin:17px 27px 0; padding:17px 0 23px; color:#677488; font-size:13px; line-height:1.55; }
@keyframes lapstats-scan { 0%,18% { transform:translateX(-150%); } 52%,100% { transform:translateX(900%); } }
@keyframes lapstats-reveal { from { transform:scaleX(.05); } to { transform:scaleX(1); } }
@keyframes lapstats-rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes lapstats-trace { to { stroke-dashoffset:0; } }
@media(max-width:980px) { .telemetry-grid { grid-template-columns:1fr; }.telemetry-coach { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .telemetry-map-stage { min-height:230px; }.telemetry-map-stage img { padding:20px 10px; }.telemetry-map-footer { display:block; }.telemetry-map-footer span { display:block; text-align:left; margin-top:6px; }.telemetry-panel-head { padding:22px 20px 18px; }.telemetry-sector-focus { margin:0 20px 15px; }.telemetry-sector-list { padding:0 20px 17px; }.telemetry-scrubber { grid-template-columns:1fr auto; padding:3px 20px 22px; }.telemetry-scrubber label { grid-column:1/-1; }.telemetry-coach { grid-template-columns:1fr; }.telemetry-trace-chart { overflow-x:auto; }.telemetry-trace-chart svg { min-width:620px; }.telemetry-trace-control { flex-wrap:wrap; }.telemetry-trace-control input { min-width:180px; }.telemetry-caveat { margin:15px 20px 0; } }
@media(prefers-reduced-motion:reduce) { .telemetry-map-scan,.telemetry-sector-track i,.telemetry-insight { animation:none; }.telemetry-trace-chart .trace-line { animation:none; stroke-dasharray:none; stroke-dashoffset:0; }.telemetry-map-stage img,.telemetry-sector,.telemetry-play,.telemetry-load { transition:none; } }
