:root{color:#e8edf5;font-synthesis:none;text-rendering:optimizelegibility;background:#080b10;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{color:#e8edf5;background:radial-gradient(circle at top,#131c28 0,#080b10 520px);min-width:320px;margin:0}button{font:inherit}.page{width:min(1200px,100% - 32px);margin:0 auto;padding:48px 0}.header{justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:24px;display:flex}.eyebrow{color:#57bcff;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:700}h1{margin:0;font-size:clamp(32px,5vw,56px);line-height:1}.subtitle{color:#9ba8b8;max-width:650px;margin:14px 0 0;line-height:1.6}.status{color:#cbd5e1;white-space:nowrap;background:#0f1722b3;border:1px solid #243140;border-radius:999px;align-items:center;gap:9px;padding:9px 14px;font-size:13px;display:flex}.status-dot{background:#42df8d;border-radius:50%;width:8px;height:8px;box-shadow:0 0 12px #42df8d}.visualizer{background:radial-gradient(circle at 50% 40%,#18283c 0%,#091019 60%,#05080d 100%);border:1px solid #263443;border-radius:24px;height:min(680px,68vh);min-height:520px;position:relative;overflow:hidden}#scene{position:absolute;inset:0}#scene canvas{width:100%;height:100%;display:block}.glass{-webkit-backdrop-filter:blur(14px);background:#070c14b8;border:1px solid #ffffff1c;box-shadow:0 12px 32px #0003}.legend{border-radius:14px;padding:14px 16px;font-size:12px;position:absolute;top:16px;left:16px}.legend strong{margin-bottom:12px;display:block}.legend-grid{color:#c6d0dc;grid-template-columns:repeat(2,auto);gap:9px 20px;display:grid}.legend-grid span{align-items:center;gap:8px;display:flex}.legend-dot{border-radius:50%;width:8px;height:8px}.vehicle{background:#46bfff}.pedestrian{background:#ff9a52}.cyclist{background:#c395ff}.vegetation{background:#6cdb9b}.scene-controls{border-radius:13px;gap:5px;padding:5px;display:flex;position:absolute;bottom:16px;right:16px}.scene-controls button{color:#dce5ef;cursor:pointer;background:0 0;border:0;border-radius:9px;padding:10px 13px;transition:background .15s,color .15s}.scene-controls button:hover{color:#fff;background:#ffffff14}.interaction-hint{color:#aeb9c7;border-radius:12px;padding:10px 13px;font-size:12px;position:absolute;bottom:16px;left:16px}.stats{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;display:grid}.stat{background:#0d131b;border:1px solid #202d3a;border-radius:15px;padding:16px}.stat span{color:#758395;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;font-size:11px;display:block}.stat strong{font-size:14px}.note{color:#748293;margin-top:16px;font-size:12px}.object-label-wrapper{z-index:10;position:absolute;transform:translate(-50%,-100%)}.object-label{color:#fff;cursor:pointer;white-space:nowrap;background:#060b12eb;border:1px solid #ffffff2e;border-radius:10px;align-items:center;gap:7px;padding:8px 10px;font-size:12px;font-weight:650;transition:transform .16s,background .16s,border .16s;display:flex;box-shadow:0 8px 24px #00000061}.object-label:hover{background:#111b28f5;border-color:#ffffff61;transform:translateY(-2px)}.object-dot{border-radius:50%;width:7px;height:7px;box-shadow:0 0 9px}.object-confidence{color:#99a6b5;font-weight:500}.chevron{color:#8491a1;margin-left:2px;font-size:9px;transition:transform .18s}.object-label-wrapper.open .chevron{transform:rotate(180deg)}.object-details{color:#c8d2de;background:#060b12f5;border:1px solid #ffffff24;border-radius:13px;width:240px;margin-top:7px;padding:13px;display:none;box-shadow:0 15px 35px #00000073}.object-label-wrapper.open .object-details{display:block}.object-details h3{color:#fff;margin:0 0 7px;font-size:13px}.object-details p{color:#9eabb9;margin:0 0 12px;font-size:11px;line-height:1.5}.object-metrics{grid-template-columns:1fr 1fr;gap:7px;display:grid}.object-metric{background:#ffffff0e;border-radius:9px;padding:8px}.object-metric span{color:#7f8b9b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;font-size:9px;display:block}.object-metric strong{color:#fff;font-size:11px}@media (width<=800px){.header{flex-direction:column;align-items:flex-start}.stats{grid-template-columns:1fr 1fr}.interaction-hint{display:none}}@media (width<=540px){.page{width:min(100% - 20px,1200px);padding-top:24px}.visualizer{height:520px;min-height:520px}.legend{top:10px;left:10px}.scene-controls{justify-content:center;bottom:10px;left:10px;right:10px}.scene-controls button{flex:1}.stats{grid-template-columns:1fr}.object-details{width:190px}}
