*{box-sizing:border-box}body{color:#294633;background:#f4f1e8;margin:0;font:15px/1.5 system-ui}header{border-bottom:1px solid #d7dfcf;justify-content:space-between;height:75px;padding:20px 4vw;display:flex}header a{color:inherit;font-size:24px;font-weight:800;text-decoration:none}header span{letter-spacing:2px;padding-top:10px;font-size:11px}main{grid-template-columns:minmax(0,1fr) 300px;gap:26px;max-width:1500px;margin:25px auto;padding:0 3vw;display:grid}.stage{background:#dbe5d4;border:1px solid #c9d5c1;border-radius:22px;min-height:650px;position:relative;overflow:hidden}canvas{touch-action:none;outline:none;width:100%;height:100%;position:absolute}.badges{pointer-events:none;gap:12px;display:flex;position:absolute;top:20px;left:20px}.badges>*{background:#f8f8eee8;border-radius:20px;padding:8px 15px}.camera{flex-wrap:wrap;gap:7px;display:flex;position:absolute;bottom:18px;left:18px}button,select{font:inherit;color:inherit;cursor:pointer;background:#fbfcf5;border:1px solid #c4d2bc;border-radius:9px;padding:9px 12px}button:hover{background:#e6ecdf}.primary{color:#fff;background:#315c41;border-color:#315c41}h1{margin:4px 0;font-size:32px}aside>p{color:#73816b;margin:0 0 20px}label{justify-content:space-between;align-items:center;margin-top:15px;font-weight:600;display:flex}select{width:100%;margin-top:6px}.buttons{gap:10px;margin-top:22px;display:flex}.buttons button{flex:1}input[type=range]{accent-color:#d8783e;width:100%;margin:12px 0}output{color:#78866e;font-size:13px}.check{justify-content:flex-start;gap:10px;font-size:13px}input[type=checkbox]{accent-color:#315c41}details{border-top:1px solid #d5dfcd;margin-top:20px;padding-top:15px}.note{color:#78866e;margin-top:20px;font-size:12px;line-height:1.6}#loading{background:#dbe5d4ed;place-content:center;display:grid;position:absolute;inset:0}#loading[hidden]{display:none}#status{color:#617452;font-size:12px}button:focus-visible,select:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #de8146}@media (width<=850px){main{grid-template-columns:1fr}.stage{min-height:520px}aside{padding-bottom:25px}header span{display:none}.badges{font-size:12px}}@media (width>=851px){.stage{align-self:start;height:calc(100dvh - 110px);min-height:470px;position:sticky;top:12px}}.drive-controls,.drive-hud,.crosshair{display:none}.drive-mode .drive-controls{display:block}.drive-mode .inspection-controls{display:none}.drive-mode .drive-hud{pointer-events:none;justify-content:space-between;gap:8px;font-size:12px;display:flex;position:absolute;bottom:18px;left:18px;right:18px}.drive-hud>*{background:#f8f8eeed;border-radius:12px;padding:7px 10px}.drive-mode .crosshair{color:#fff;opacity:.8;text-shadow:0 1px 3px #263c26;pointer-events:none;font-size:24px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.instructions{color:#52654f;font-size:13px;line-height:1.55}.camera-settings{border-top:1px solid #d5dfcd;margin-top:20px;padding-top:12px}.camera-settings h2{margin:0 0 6px;font-size:17px}.camera-settings label{gap:6px;margin-top:9px;font-size:12px}.camera-settings input[type=range]{margin:7px 0}.camera-settings output{white-space:nowrap}#camera-values{font-variant-numeric:tabular-nums;background:#e3eadc;border-radius:8px;padding:10px;font-size:12px}.hint{color:#73816b;margin:6px 0 10px;font-size:11px}.drive-mode canvas{-webkit-user-select:none;user-select:none}.drive-mode .badges{gap:6px;top:12px;left:12px}.drive-mode .badges>*{padding:6px 10px;font-size:12px}@media (width<=850px){.drive-mode .stage{height:60dvh;min-height:380px}.drive-mode main{margin-top:12px}}.drive-mode #status{display:none}.control-settings{margin-top:18px}.control-settings h2{font-size:17px}.control-settings label{font-size:12px}.control-settings output{white-space:nowrap}#control-values{background:#e3eadc;border-radius:8px;padding:10px;font-size:12px}#settings-toggle,#settings-close,#settings-shade{display:none}@media (width<=850px),(pointer:coarse){body{overscroll-behavior:none}body>header{display:none}main,.drive-mode main{max-width:none;margin:0;padding:0;display:block}.stage,.drive-mode .stage{border:0;border-radius:0;height:100dvh;min-height:0;position:fixed;inset:0}.badges,.drive-mode .badges{top:max(12px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));flex-wrap:wrap;max-width:65%}.drive-mode .drive-hud{bottom:max(14px,env(safe-area-inset-bottom));font-size:11px;left:10px;right:10px}#settings-toggle{z-index:12;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));background:#f8f8eeeb;padding:8px 10px;font-size:13px;display:block;position:fixed}main>aside{z-index:21;overscroll-behavior:contain;width:min(350px,92vw);height:100dvh;padding:16px 20px max(24px,env(safe-area-inset-bottom));background:#f4f1e8;display:none;position:fixed;inset:0 0 0 auto;overflow-y:auto;box-shadow:-8px 0 30px #182c2233}.settings-open main>aside{display:block}#settings-close{z-index:2;color:#fff;background:#315c41;width:100%;margin-bottom:15px;display:block;position:sticky;top:0}#settings-shade:not([hidden]){z-index:20;background:#14271955;border:0;border-radius:0;width:100%;height:100dvh;display:block;position:fixed;inset:0}.settings-open #settings-toggle{display:none}}.drive-mode .drive-hud{inset:12px 12px auto auto}#drive-state{display:none}@media (width<=850px),(pointer:coarse){.drive-mode .drive-hud{top:max(12px,env(safe-area-inset-top));bottom:auto;left:auto;right:max(12px,env(safe-area-inset-right))}#settings-toggle{top:calc(max(12px,env(safe-area-inset-top)) + 44px)}}#network-progress:empty{display:none}.network-settings{border-top:1px solid #c4d2bc;margin:18px 0;padding-top:10px}.network-settings h2{font-size:17px}.network-settings input{width:100%;padding:8px}.network-settings button{width:100%;margin-top:10px}#network-status{overflow-wrap:anywhere;font-size:12px}.drive-mode .badges{flex-wrap:wrap;max-width:65%}