.demo-notice{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff3d5;border:1px solid #e6c67a;color:#755414;padding:13px 18px;border-radius:12px;margin:18px 0}.demo-plate{border:3px solid #193d3e;border-radius:12px;padding:14px 25px;font-size:30px;font-weight:800;letter-spacing:3px;background:white;text-align:center}.demo-plate small{display:block;font-size:10px;letter-spacing:3px;margin-top:6px}.demo-cockpit{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}.demo-car-card{background:linear-gradient(155deg,#133e3b,#1c6258);border-radius:18px;padding:24px;color:white;text-align:center}.demo-car-card svg{width:100%;margin:15px 0}.demo-car-card small{color:#b9d5cf;font-size:11px}.demo-car-card h2{color:white;font-size:20px}.demo-speed strong{font-size:76px;font-variant-numeric:tabular-nums;line-height:1.2}.demo-speed span{display:block;color:#c1dcd6}.demo-controls,.demo-map-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}.demo-controls label{font-size:12px}.demo-controls select{width:auto;padding:8px}.demo-map-controls{margin-top:10px}.demo-map-controls .button{font-size:12px;padding:8px 12px}#demo-map{height:380px;border-radius:16px;background:#e0ede9}#demo-seek{width:100%;accent-color:#157b69}.demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.demo-metric{border:1px solid #dae6e1;padding:18px;background:white;border-radius:13px}.demo-metric span{display:block;font-size:12px;color:#607b79}.demo-metric strong{display:block;font-size:23px;margin-top:8px}.demo-lower{display:grid;grid-template-columns:1fr 1fr;gap:22px}.demo-events{padding-left:22px;max-height:380px;overflow:auto}.demo-events li{padding:9px 0;border-bottom:1px solid #e5ece9}.demo-events time{font-size:12px;color:#718b85;display:block}.demo-actions{display:flex;gap:8px;flex-wrap:wrap}.demo-marker{width:48px;height:62px;position:absolute;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 5px #193d3e88)}.demo-marker img{width:48px;height:62px}.demo-marker.offline{opacity:.45}@media(max-width:1100px){.demo-cockpit{grid-template-columns:1fr}.demo-car-card{display:none}.demo-metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.demo-metrics{grid-template-columns:repeat(2,1fr)}.demo-lower{grid-template-columns:1fr}.demo-plate{font-size:22px}.demo-controls .button{padding:10px}#demo-map{height:320px}}
.demo-car-card p{color:#c1dcd6}.demo-map-controls label{display:flex;align-items:center;gap:7px;margin:0}.demo-map-controls input{width:auto;margin:0}

.demo-plate{font-size:clamp(17px,2.2vw,26px);letter-spacing:1px;overflow-wrap:anywhere}

.demo-kia-photo{display:block;width:100%;height:auto;object-fit:contain;margin:22px 0}.demo-car-card small a{color:#d5eee6;text-decoration:underline}.demo-marker{width:112px;height:56px;border:0;border-radius:0;background:transparent;box-shadow:none;filter:none}.demo-marker img{width:112px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 2px #102f3977)}.demo-heading{position:absolute;top:-19px;left:44px;color:#087a63;font-size:24px;line-height:24px;transform-origin:center}.demo-cockpit{grid-template-columns:320px minmax(0,1fr)}@media(max-width:1100px){.demo-cockpit{grid-template-columns:1fr}.demo-car-card{display:block}.demo-kia-photo{max-width:380px;margin:0 auto}.demo-speed strong{font-size:46px}}
.demo-car-card small{display:block;margin-top:6px}

/* Motion effects are exclusively visual and stop with playback or signal loss. */
.demo-marker{transition:opacity .25s;isolation:isolate}.demo-marker img{position:relative;z-index:2}.demo-marker-speed{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:12px;padding:3px 9px;background:#103e36;color:#fff;font:600 11px system-ui;box-shadow:0 2px 7px #153e4533}.demo-track-halo{position:absolute;left:19px;top:27px;width:74px;height:22px;border:1px solid #25bf97;border-radius:50%;opacity:0;z-index:-1;pointer-events:none}.demo-marker.tracking .demo-track-halo{animation:demo-tracking-pulse 2s ease-out infinite}.demo-marker.tracking{box-shadow:none}.demo-marker.braking .demo-marker-speed{background:#8d6016}.demo-marker.offline .demo-marker-speed{background:#62726e}.demo-marker.offline .demo-track-halo{animation:none;opacity:0}@keyframes demo-tracking-pulse{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1.5);opacity:0}}@media(prefers-reduced-motion:reduce){.demo-track-halo{animation:none!important}.demo-marker{transition:none}}
/* Telemetry console */
.telemetry-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:35px 0 12px}.telemetry-heading h2{font-size:29px;margin:6px 0}.telemetry-heading p{margin:0;color:#66827b}.telemetry-status{display:inline-flex;padding:10px 15px;border:1px solid #c6e4d7;background:#e4f4ec;color:#18664e;border-radius:30px;font-size:12px;font-weight:700;white-space:nowrap}.telemetry-status::before{content:'●';margin-right:8px}.telemetry-status.is-offline{background:#fef0df;color:#995d20;border-color:#efd0aa}.telemetry-disclaimer{font-size:12px;color:#637a75;margin-bottom:20px}.telemetry-disclaimer summary{cursor:pointer}.demo-metrics{gap:14px;margin-top:16px}.demo-metric{position:relative;padding:20px;border-radius:18px;overflow:hidden;min-width:0}.metric-top{display:flex;gap:9px;align-items:center}.demo-metric .metric-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:#edf5f1;color:#17755d;font-size:19px}.metric-reading{display:flex;align-items:baseline;gap:6px;margin:13px 0 5px;min-height:36px;flex-wrap:wrap}.demo-metric .metric-number{margin:0;font-size:23px;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.demo-metric .metric-unit{font-size:11px}.metric-note{display:block;color:#82938c;font-size:10px;margin-top:10px}.metric-gauge{min-height:210px;background:linear-gradient(145deg,#153f37,#246d59);border:0}.metric-gauge .metric-top span,.metric-gauge .metric-unit,.metric-gauge .metric-note{color:#bfdccd}.metric-gauge .metric-icon{background:#ffffff16;color:#daeee1}.metric-gauge .metric-reading{position:relative;z-index:2;justify-content:center;flex-direction:column;align-items:center;margin-top:42px;margin-bottom:18px}.metric-gauge .metric-number{color:white;font-size:34px}.metric-gauge svg.metric-gauge{position:absolute;left:14%;top:63px;width:72%;height:105px;min-height:0;background:none;overflow:visible}.gauge-track,.gauge-fill{fill:none;stroke-width:8;stroke-linecap:round}.gauge-track{stroke:#ffffff15}.gauge-fill{stroke:#78e3b0;transition:stroke-dasharray .4s ease}.metric-gauge.metric-alert .gauge-fill{stroke:#ffc077}.metric-gauge .metric-note{text-align:center}.metric-bar{height:7px;background:#e7f0eb;border-radius:8px;overflow:hidden;margin-top:24px}.metric-bar i{display:block;height:100%;width:100%;background:#299975;transform-origin:left;transition:transform .4s ease}.metric-bar.metric-missing i{background:#afbbb6}.demo-metric.metric-bar{height:auto;background:#fff;margin-top:0}.metric-bar .metric-number{font-size:34px;margin-top:18px}.metric-missing{opacity:.7}.metric-missing .metric-number{letter-spacing:0}.demo-lower{align-items:start;grid-template-columns:1fr 1fr}.demo-lower .form-panel{padding:26px;border-radius:18px;margin-top:12px}.demo-lower h2{margin:7px 0 8px;font-size:23px}.demo-lower p{font-size:13px;line-height:1.6}.demo-events{list-style:none;padding:0 0 0 17px;margin:22px 0 0;max-height:350px}.demo-events li{position:relative;padding:0 12px 20px 21px;border:0;border-left:1px solid #d9e7df}.demo-events li::before{content:'';position:absolute;width:9px;height:9px;background:#39a47e;border:3px solid #e6f4ec;border-radius:50%;left:-8px;top:0}.demo-events li.event-warning::before{background:#d49e46;border-color:#fff2dd}.demo-events li.event-alert::before{background:#d26942;border-color:#ffeadf}.demo-events time{font-size:10px;font-weight:600;letter-spacing:.4px;margin-bottom:5px;color:#85998f}.demo-events li>span{font-size:13px;line-height:1.5;display:block}.demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}.demo-actions .button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:15px;gap:6px;white-space:normal;border-radius:12px}.demo-actions small{font-size:10px;line-height:1.4;font-weight:400;color:#7d9088}.demo-actions .scene-active{background:#e9f5ee;border-color:#52a68a;box-shadow:inset 3px 0 #238965}.demo-scope{padding-top:12px;border-top:1px solid #e5ece8;font-size:12px;color:#647d73}.demo-scope summary{cursor:pointer;font-weight:600}.demo-scope a{display:inline-block;margin-top:8px}@media(max-width:1100px){.demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.telemetry-heading{align-items:flex-start;flex-direction:column}.telemetry-heading h2{font-size:25px}.demo-metric{padding:15px}.demo-metric .metric-number{font-size:21px}.metric-gauge .metric-number{font-size:30px}.demo-actions{grid-template-columns:1fr}.demo-lower .form-panel{padding:20px}}@media(prefers-reduced-motion:reduce){.gauge-fill,.metric-bar i{transition:none}}

.demo-metric.metric-bar{border-radius:18px}.metric-icon{flex-shrink:0}

/* Monitoring navigation and trip context */
.demo-section-nav{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:#e6efea;border-radius:14px;margin:18px 0}.demo-section-nav a{padding:11px 18px;border-radius:9px;font-weight:650;font-size:13px;color:#245c4c;text-decoration:none}.demo-section-nav a:hover,.demo-section-nav a:focus-visible{background:white;box-shadow:0 2px 6px #163e3510}.demo-trip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #d7e6df;border-radius:15px;background:white;margin-bottom:14px;overflow:hidden}.demo-trip>div{padding:18px 22px;border-right:1px solid #e6eeea}.demo-trip small{display:block;color:#657f75;font-size:12px}.demo-trip strong{display:block;font-size:22px;margin-top:7px;color:#1d493d;font-variant-numeric:tabular-nums}.demo-live-alert{padding:13px 18px;border-left:4px solid #2d9775;background:#e8f4ed;border-radius:9px;color:#285843;font-size:13px;margin:0 0 18px}.demo-live-alert.needs-attention{background:#fff1dd;color:#83551f;border-color:#d99230}.event-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.event-filters button{background:#f0f5f2;border:1px solid #dbe7df;color:#436c59;border-radius:20px;padding:8px 14px;cursor:pointer;font:inherit;font-size:12px}.event-filters button[aria-pressed=true]{background:#1d7058;border-color:#1d7058;color:white}.event-jump{display:block;width:100%;text-align:left;border:0;background:none;padding:4px;color:inherit;font:inherit;cursor:pointer;border-radius:6px}.event-jump:hover,.event-jump:focus-visible{background:#edf5ef;outline:2px solid #bad8c7}.event-jump>span{font-size:13px;line-height:1.5}#demo-monitor,#demo-trip,#demo-telemetry,#demo-activity{scroll-margin-top:24px}#demo-map{height:460px}@media(max-width:650px){.demo-trip{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-trip>div{padding:14px;border-bottom:1px solid #e6eeea}.demo-trip strong{font-size:18px}.demo-section-nav a{padding:9px;font-size:12px}#demo-map{height:360px}}

.public-demo-content{padding-top:20px;padding-bottom:44px}.public-gps-demo .site-header nav{display:flex;gap:20px;align-items:center}.public-gps-demo .demo-notice{margin-top:0}@media(max-width:650px){.public-gps-demo .site-header{flex-wrap:wrap;gap:16px;padding-top:18px;padding-bottom:18px}.public-gps-demo .site-header nav{gap:12px;font-size:12px}}