:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e9edf4;background:#0b1018;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#172a3a 0,transparent 36%),#0b1018;min-height:100vh}main{width:min(1100px,calc(100% - 32px));margin:auto;padding:38px 0 70px}header,.row{display:flex;align-items:center;justify-content:space-between;gap:20px}header h1{margin:7px 0 0;font-size:34px;letter-spacing:-1px}.tag{color:#77e5bb;font:700 12px/1 monospace;letter-spacing:1.5px}a{color:#a7bdd5;text-decoration:none}.hero,.card{margin-top:28px;padding:26px;border:1px solid #263446;border-radius:18px;background:#111a25cc;box-shadow:0 16px 60px #0005}.hero>p,.section-head p,.media-card p{max-width:720px;color:#a9b6c7;line-height:1.55;margin:6px 0 0}.preset-block{margin-top:24px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.section-head h2,.card h2{margin:0}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.preset{height:auto;min-height:118px;padding:16px;text-align:left;background:#172230;color:#e9edf4;border:1px solid #34465b}.preset strong,.preset span{display:block}.preset span{margin-top:7px;color:#a9b6c7;font-weight:400;line-height:1.35}.muted{color:#8999aa}.or{display:flex;align-items:center;gap:12px;margin:28px 0 0;color:#718196;font-size:12px}.or:before,.or:after{content:"";height:1px;flex:1;background:#263446}form{display:grid;grid-template-columns:1fr 260px auto;align-items:end;gap:14px;margin-top:18px}label{display:grid;gap:8px;color:#a9b6c7;font-size:13px}.drop{padding:14px 16px;border:1px dashed #4a6179;border-radius:10px;cursor:pointer}.drop input{display:none}.drop span{color:#e9edf4;font-size:15px}.drop small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select,button{height:52px;padding:0 16px;border-radius:10px;border:1px solid #34465b;background:#172230;color:#e9edf4}button{border:0;background:#62d6aa;color:#07110d;font-weight:800;cursor:pointer}button:disabled{opacity:.5;cursor:wait}#message{margin-top:14px;color:#ff9b9b}.progress{height:8px;margin-top:15px;border-radius:99px;background:#243142;overflow:hidden}.progress i{display:block;height:100%;width:0;background:#62d6aa;transition:width .25s}.result-context{margin-top:28px;padding:16px 20px;border-left:3px solid #62d6aa;background:#101a24;color:#c5d1de;line-height:1.5}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0}.metric{padding:18px;border:1px solid #263446;border-radius:14px;background:#111a25}.metric b{display:block;margin-top:8px;font-size:25px}.metric span{color:#8999aa;font-size:12px}.legend{display:flex;flex-wrap:wrap;gap:18px;color:#8999aa;font-size:12px}.legend span:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;background:currentColor}.clear{color:#62d6aa!important}.unknown{color:#f1c46c!important}.obstacle{color:#ff6577!important}.timeline{display:flex;align-items:end;gap:2px;height:110px;margin:18px 0;padding:10px 0;overflow-x:auto}.tick{flex:1 0 4px;min-width:4px;height:35%;border:0;border-radius:2px;background:#62d6aa;padding:0}.tick.UNKNOWN{height:60%;background:#f1c46c}.tick.OBSTACLE{height:100%;background:#ff6577}.details{min-height:70px;padding:14px;border-radius:10px;background:#0b121c;color:#a9b6c7;font:13px/1.5 ui-monospace,monospace;white-space:pre-wrap}.media-card{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:center}.media-card video{width:100%;max-height:440px;border-radius:12px;background:#05080d}.decision-card canvas{display:block;width:100%;height:auto;margin-top:16px;border-radius:12px;background:#08111a}.state-pill{padding:7px 10px;border-radius:999px;background:#263446;font-size:12px}.state-pill.CLEAR{color:#62d6aa}.state-pill.UNKNOWN{color:#f1c46c}.state-pill.OBSTACLE{color:#ff6577}.view-controls{display:flex;gap:18px;margin-top:16px;color:#a9b6c7;font-size:13px}.view-controls label{display:flex;align-items:center;gap:7px}.view-controls input{accent-color:#62d6aa}.hidden{display:none!important}@media(max-width:760px){form,.presets,.media-card{grid-template-columns:1fr}.summary{grid-template-columns:1fr 1fr}header{align-items:flex-start;flex-direction:column}}
