:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf0ee;background:#101a1e;font-synthesis:none;font-size:14px;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{color:inherit;border:1px solid #344146;background:#1c292e;border-radius:6px;padding:9px 12px;cursor:pointer}button:hover,select:hover{background:#2b3a3e;border-color:#728782}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #afd9bc;outline-offset:4px}a{color:#b3d5c5;text-decoration:none}a:hover{text-decoration:underline}header{height:70px;border-bottom:1px solid #314047;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#122026}.brand{font-weight:700;color:#e9efed;letter-spacing:2px;display:flex;align-items:center;gap:9px;font-size:14px}.brand>span:last-child{font-weight:400;color:#8c9fa3}.brand-icon{border:1px solid #adc7b5;border-radius:5px;width:28px;height:28px;text-align:center;line-height:26px;color:#b9d9c3;font-size:22px;margin-right:7px}.header-right{display:flex;align-items:center;gap:24px}.status{font-size:10px;letter-spacing:1.6px;color:#a6b8b8;display:flex;align-items:center;gap:8px}.status i{height:6px;width:6px;border-radius:50%;background:#a9d6b5;box-shadow:0 0 10px #8ee5a855}header button{background:transparent;font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 342px;height:calc(100dvh - 70px);min-height:680px}.scene{position:relative;overflow:hidden;background:#bac7c5}#viewport{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.scene-heading{position:absolute;left:32px;top:32px;color:#173036;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:600}.eyebrow span{padding:0 8px;color:#748e90}h1{font-size:46px;letter-spacing:-1.8px;font-weight:500;line-height:1.12;margin:13px 0 10px}.scene-heading p{margin:0;font-size:13px;color:#405d60}.scene-heading p span{margin:0 4px}.data-badge{font-size:10px;border:1px solid #8ea6a2;border-radius:4px;background:#e1e9dfbb;padding:6px 9px;display:inline-block;margin-top:14px}.data-badge span{margin:0 5px;color:#5e7670}.camera-tools{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px;background:#172a2df0;border:1px solid #526866;border-radius:9px;white-space:nowrap;box-shadow:0 5px 20px #10262a22}.camera-tools button{border:0;background:transparent;color:#acbdbb;font-size:11px;padding:9px 12px}.camera-tools button.active{background:#d4e6d7;color:#18322d}.scene-bottom{position:absolute;bottom:0;height:36px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#172a2ddd;font-size:10px;color:#b3c3c1}.compass{position:absolute;right:25px;top:30px;display:flex;flex-direction:column;align-items:center;color:#365250;font-size:11px;gap:5px}.compass span{font-size:24px;display:inline-block}aside{padding:25px 24px;background:#142126;overflow-y:auto;border-left:1px solid #364a4d}.panel-heading{display:flex;justify-content:space-between;color:#94ada9;align-items:center}.version{border:1px solid #3b4c50;border-radius:4px;font-size:10px;padding:3px 5px;color:#8ba19e}h2{font-size:23px;line-height:1.25;font-weight:500;letter-spacing:-.6px;margin:22px 0 10px}.intro{color:#9caeae;font-size:12px;line-height:1.7;margin-bottom:22px}.playback{display:flex;gap:7px}.playback button{padding:9px 10px;font-size:12px}.primary{background:#c4dfcd!important;color:#18352b;border-color:#c4dfcd}.playback select{min-width:0;font-size:11px;padding:7px}.time-row{display:flex;justify-content:space-between;align-items:center;margin-top:15px;font-size:9px;letter-spacing:1.2px;color:#849f9d}.time-row output{font-size:13px;font-family:ui-monospace,monospace;color:#bdd0c9}.control{margin-top:27px}.control label{display:flex;justify-content:space-between;font-size:12px}.control output{color:#c9dfce;font-size:12px}input[type=range]{width:100%;accent-color:#c1d8c5;height:4px;cursor:pointer;margin:20px 0 10px}.range-captions{display:flex;justify-content:space-between;color:#758f90;font-size:10px}.control-note{font-size:10px;line-height:1.7;color:#91a5a4;margin:3px 0 0}.divider{height:1px;background:#304044;margin:24px 0 17px}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;margin:19px 0;cursor:pointer}.switch-row small{display:block;color:#7e9796;font-size:10px;margin-top:5px}.switch-row input{appearance:none;width:30px;height:17px;background:#35474b;border-radius:20px;flex-shrink:0;cursor:pointer;position:relative;transition:background .2s}.switch-row input:before{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;background:#8ba0a0;border-radius:50%;transition:transform .2s}.switch-row input:checked{background:#b2d2bb}.switch-row input:checked:before{transform:translateX(13px);background:#28483c}.metrics{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #314449;border-radius:7px;overflow:hidden}.metrics>div{padding:16px 15px;border-bottom:1px solid #314449}.metrics>div:nth-child(odd){border-right:1px solid #314449}.metrics>div:nth-last-child(-n+2){border-bottom:0}.metrics strong{display:block;font-size:26px;font-weight:450;font-variant-numeric:tabular-nums;letter-spacing:-1px}.metrics span{display:block;font-size:8px;letter-spacing:1px;color:#8da5a2;margin-top:5px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:21px;font-size:10px;color:#b0bfbb}.legend span{display:flex;align-items:center;gap:8px}.legend i{width:8px;height:8px;border-radius:2px;background:#efad49}.legend .cycle{background:#7fcaab}.legend .car{background:#dfe8ec}.legend .bus{background:#df7863}.footnote{font-size:10px;line-height:1.8;color:#8ca19e;margin:20px 0 0}.export{margin-top:17px;width:100%;font-size:11px;background:transparent;color:#b8cbc5}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:20px;background:#142126;color:#c4dfcd;border-radius:8px;max-width:80%;line-height:1.6}dialog{max-width:620px;width:calc(100% - 30px);background:#18292e;color:#dbe8e0;border:1px solid #526761;border-radius:12px;padding:28px;max-height:85vh;line-height:1.7}dialog::backdrop{background:#07151abb;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;color:#b0c4ba}.dialog-top button{border:0;background:transparent}dialog h2{font-size:30px}dialog h3{font-weight:500;margin-top:25px}dialog p,dialog li{font-size:12px;color:#acbdb8}dialog ul{padding-left:19px}.source-card{display:block;background:#23383c;border:1px solid #354d4c;padding:12px 15px;border-radius:6px;margin-bottom:8px}.source-card strong{display:block;font-size:12px;font-weight:500}.source-card span{display:block;color:#a8bdb4;font-size:11px;margin-top:4px}.source-card:hover{text-decoration:none;border-color:#a5c8b1}@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 380px}aside{padding:30px}}@media(max-width:900px){main{grid-template-columns:minmax(0,1fr) 300px}.scene-heading{left:20px;top:25px}h1{font-size:36px}.eyebrow{font-size:8px}aside{padding:22px 17px}.scene-bottom>span{display:none}.camera-tools button{font-size:10px;padding:8px}.header-right{gap:10px}.status{display:none}}@media(max-width:650px){header{padding:0 15px;height:58px}.brand{font-size:11px;letter-spacing:1px}.brand-icon{margin-right:0}.header-right button{font-size:10px}main{display:flex;flex-direction:column;height:auto;min-height:0}.scene{height:65dvh;min-height:420px}.scene-heading{top:20px}h1{font-size:33px}aside{border-left:0;border-top:1px solid #364a4d;padding:25px}.camera-tools{bottom:49px}.metrics{grid-template-columns:repeat(4,1fr)}.metrics>div{border-bottom:0;border-right:1px solid #314449;padding:13px 10px}.metrics>div:last-child{border:0}.metrics span{font-size:7px}.legend{grid-template-columns:repeat(4,1fr)}}

.profile-label{display:block;font-size:11px;color:#a7bdb6;margin-bottom:8px}#profile{width:100%;margin-bottom:8px}.playback{margin-top:18px}.legend .truck{background:#8aaad4}

@media(max-width:1050px){.camera-tools{max-width:calc(100% - 24px);overflow-x:auto}.camera-tools button{flex-shrink:0}}