:root{--paper:#f5f4ef;--ink:#202928;--green:#183f35;--muted:#687171;--line:#ced1cb;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:15px Arial,Helvetica,sans-serif;color:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:5px;padding:10px 15px}button:hover{background:#e7e9e1}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-underline-offset:3px}header{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.brand{font:29px Georgia,serif;text-decoration:none}.brand strong{color:var(--green)}nav{display:flex;align-items:center;gap:40px}nav a{text-decoration:none}nav button{border:0}main{max-width:1600px;padding:18px 20px 30px;margin:auto}h1{font:clamp(34px,4.1vw,62px)/1.12 Georgia,serif;letter-spacing:-1.8px;margin:0 18px 6px}.intro{font:21px/1.45 Georgia,serif;color:#4f595d;margin:0 18px 16px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}#viewport{position:relative;height:min(62vh,650px);min-height:410px;border-radius:5px;overflow:hidden;background:#c4d7df}canvas{display:block;width:100%;height:100%}#status{position:absolute;top:16px;left:16px;max-width:65%;padding:10px 13px;border-radius:4px;background:var(--green);color:white;font-size:14px}.cameras{position:absolute;right:16px;top:16px;display:flex;background:var(--paper);border-radius:4px;overflow:hidden}.cameras button{border:0;border-radius:0}.cameras .selected{background:var(--green);color:white}.speed{position:absolute;bottom:17px;left:24px;color:white;font-size:21px;text-shadow:0 1px 6px #202928}.speed span{font:66px Georgia,serif}#clock{position:absolute;bottom:27px;right:20px;color:white;text-shadow:0 1px 5px #222}aside{padding:6px 2px;display:flex;flex-direction:column;min-width:0}label{display:block;font-size:15px;margin-bottom:19px}select,input[type=number]{display:block;background:#fafaf7;border:1px solid #c7ccc7;border-radius:5px;width:100%;padding:10px 12px;margin-top:7px}.primary{width:100%;color:white;background:var(--green);border:0;padding:13px;font-family:Georgia,serif;font-size:18px}.primary:hover{background:#245546}.note{font:13px/1.55 Arial,sans-serif;color:var(--muted);margin:12px 0}.decisions{border-top:1px solid var(--line);padding-top:14px;margin-top:8px;min-height:140px}h2{font:19px Georgia,serif;margin:7px 0 12px}#stream{font:13px/1.55 Arial,sans-serif;overflow:auto;max-height:160px;min-height:75px;color:var(--muted)}.decision{padding:8px 0;border-bottom:1px solid var(--line)}.decision b{color:var(--ink);font-weight:600}.tokens{font-size:12px;line-height:1.55}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:5px;padding:20px 30px;margin-top:17px;font:17px Georgia,serif}.metrics>div{padding-left:32px;border-left:1px solid var(--line)}.metrics>div:first-child{padding-left:0;border:0}.metrics strong{display:block;font:40px Georgia,serif;margin-top:7px}#method{margin:16px 18px 25px}.tools{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;gap:20px}.tools>div{margin-right:auto}.tools p{margin:0}.tools select{max-width:370px;margin:0}.playback{display:flex;align-items:center;gap:16px;margin:18px 0}.playback[hidden]{display:none}.playback input{flex:1;accent-color:var(--green)}details{margin-top:25px;border-top:1px solid var(--line);padding:20px 0;max-width:100%;font-size:14px;line-height:1.65}summary{cursor:pointer}details p{max-width:900px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #73bca8;outline-offset:3px}@media(max-width:950px){.workspace{grid-template-columns:minmax(0,1fr) 270px}.intro{font-size:18px}.tools{flex-wrap:wrap}.tools>div{width:100%}#viewport{min-height:440px}.metrics{padding:16px}.metrics>div{padding-left:16px}.metrics strong{font-size:32px}}@media(max-width:700px){header{padding:0 16px;height:58px}.brand{font-size:24px}nav{gap:8px;font-size:13px}nav button{font-size:13px;padding:8px}main{padding:20px 12px}h1{margin:0 4px 12px;letter-spacing:-1px;font-size:38px}.intro{margin:0 4px 20px;font-size:17px}.workspace{grid-template-columns:1fr;gap:18px}#viewport{height:430px;min-height:0}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{margin-bottom:8px;font-size:14px}select,input[type=number]{font-size:14px;padding:11px 7px}.decisions{min-height:110px}#stream{max-height:150px}.metrics{grid-template-columns:1fr 1fr;gap:20px;padding:20px}.metrics>div:nth-child(3){padding:0;border:0}.metrics strong{font-size:32px}.tools{gap:12px}.tools select{max-width:100%}#method{margin:16px 3px}.cameras{right:10px;top:10px}.cameras button{font-size:13px;padding:9px}#status{top:10px;left:10px;max-width:52%;font-size:12px}.speed span{font-size:56px}}
@media(max-width:420px){.fields{grid-template-columns:1fr}select,input[type=number]{padding:12px;font-size:15px}}

.comparison{border-top:1px solid var(--line);padding-top:22px;margin-top:25px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.4;text-align:left}th{font-weight:500;color:var(--muted);font-size:12px}td,th{padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}td:first-child,th:first-child{padding-left:0}
@media(min-width:701px){header{height:54px}h1{line-height:1.03}.intro{line-height:1.25;margin-bottom:12px}#viewport{height:min(64vh,650px)}}
@media(max-width:700px){h1{line-height:1.12}.intro{line-height:1.45}}