:root{--ink:#172026;--muted:#61707c;--panel:#fff;--line:#d7dee4;--accent:#0f766e;--accent-strong:#0b5f59;--danger:#b42318;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}.shell{touch-action:pan-x pan-y;background:#eef2f4;height:100dvh;min-height:640px;position:relative;overflow:hidden}.map{position:absolute;inset:0}.mapCameraMarker{--marker-color:#2563eb;background:var(--marker-color);cursor:pointer;border:2px solid #fff;border-radius:999px;width:16px;height:16px;display:block;position:relative;box-shadow:0 2px 8px #0f172a47}.mapCameraMarker:before{content:"";border-radius:999px;position:absolute;inset:-10px}.mapCameraMarker.city{width:18px;height:18px}.topbar{top:calc(16px + var(--safe-top));left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right));z-index:2;border:1px solid var(--line);background:#fffffff0;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;max-width:640px;padding:12px 14px;display:flex;position:absolute;box-shadow:0 12px 32px #17202629}.topbar h1,.panel h2{letter-spacing:0;margin:0}.topbar h1{font-size:18px;line-height:1.2}.topbar p{color:var(--muted);margin:2px 0 0;font-size:13px}.toggle{border:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none;background:#f8fafb;border-radius:8px;align-items:center;gap:8px;min-height:36px;padding:0 10px;display:inline-flex}.toggle input{accent-color:var(--accent)}.placesTool{top:calc(88px + var(--safe-top));left:calc(16px + var(--safe-left));z-index:2;position:absolute}.placesButton,.sourceFilters button{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fffffff2;border-radius:8px;font-weight:700;box-shadow:0 8px 20px #1720261f}.placesButton{color:#835600;place-items:center;width:42px;height:42px;font-size:20px;display:grid}.placesButton:hover,.sourceFilters button:hover{border-color:#9aa8b2}.placesPopover{border:1px solid var(--line);background:#fffffff5;border-radius:8px;gap:6px;width:min(310px,100vw - 32px);padding:10px;display:grid;position:absolute;top:50px;left:0;box-shadow:0 16px 40px #1720262e}.placesHeader{gap:2px;padding:2px 2px 6px;display:grid}.placesHeader strong{font-size:14px}.placesHeader span{color:var(--muted);font-size:12px}.placesPopover button{min-height:48px;color:var(--ink);cursor:pointer;text-align:left;background:#f8fafb;border:1px solid #0000;border-radius:7px;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;display:flex}.placesPopover button:hover{border-color:var(--line);background:#fff}.placesPopover button span{gap:1px;display:grid}.placesPopover button strong{font-size:14px}.placesPopover button small,.placesPopover button em{color:var(--muted);font-size:12px;font-style:normal}.cameraSummaryButton{top:calc(16px + var(--safe-top));right:calc(16px + var(--safe-right));z-index:3;border:1px solid var(--line);min-width:72px;min-height:54px;color:var(--ink);cursor:pointer;text-align:left;background:#fffffff2;border-radius:8px;grid-template-rows:auto auto;grid-template-columns:22px auto;align-items:center;column-gap:8px;padding:7px 10px;font-weight:700;display:grid;position:absolute;box-shadow:0 8px 20px #17202624}.cameraSummaryButton:hover{border-color:#9aa8b2}.cameraSummaryButton strong{font-size:18px;line-height:1}.cameraSummaryButton small{color:var(--muted);grid-column:2;font-size:11px;font-weight:700;line-height:1.1}.cameraGlyph{border:2px solid var(--accent-strong);border-radius:5px;grid-row:1/span 2;width:22px;height:16px;position:relative}.cameraGlyph:before{background:var(--accent-strong);content:"";border-radius:3px 3px 0 0;width:8px;height:4px;position:absolute;top:-5px;left:4px}.cameraGlyph:after{background:var(--accent-strong);content:"";border-radius:999px;width:5px;height:5px;position:absolute;top:3px;left:7px}.panel{top:calc(96px + var(--safe-top));right:calc(16px + var(--safe-right));z-index:2;width:min(390px,100vw - 32px);max-height:calc(100dvh - 120px - var(--safe-top) - var(--safe-bottom));border:1px solid var(--line);background:#fffffff5;border-radius:8px;padding:16px;position:absolute;overflow:auto;box-shadow:0 16px 40px #1720262e}.panel.collapsed{display:none}.panelHeader{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.panel h2{font-size:20px;line-height:1.2}.eyebrow{color:var(--accent-strong);text-transform:uppercase;margin-bottom:4px;font-size:12px;font-weight:700;display:block}.iconButton{border:1px solid var(--line);cursor:pointer;background:#f8fafb;border-radius:8px;flex:0 0 34px;place-items:center;width:34px;height:34px;display:grid}.cameraDetail{gap:14px;margin-top:16px;display:grid}.cameraDetail img,.emptyImage,.streamPreview video{aspect-ratio:16/10;border:1px solid var(--line);object-fit:contain;background:#111820;border-radius:6px;width:100%}.streamPreview{gap:8px;display:grid}.streamPreview p{color:var(--muted);margin:0;font-size:13px;line-height:1.35}.streamError{color:var(--danger);font-size:13px;font-weight:700;display:block}.emptyImage{color:#fff;place-items:center;display:grid}dl{gap:8px;margin:0;display:grid}dl div{grid-template-columns:94px 1fr;gap:10px;display:grid}dt{color:var(--muted);font-size:13px}dd{margin:0;font-size:14px;font-weight:650}a{color:var(--accent-strong);font-weight:700;text-decoration:none}a:hover{text-decoration:underline}.summary{gap:14px;margin-top:14px;display:grid}.summary p{color:#33424d;margin:0;line-height:1.45}.stats{grid-template-columns:1fr 1fr;gap:10px;display:grid}.stats div{border:1px solid var(--line);background:#f8fafb;border-radius:8px;min-height:74px;padding:12px}.sourceFilters{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sourceFilters button{min-height:38px;color:var(--muted);box-shadow:none;justify-content:flex-start;align-items:center;gap:8px;padding:0 10px;display:flex}.sourceFilters button.active{color:var(--ink);background:#fff;border-color:#9aa8b2}.sourceFilters strong{margin-left:auto;font-size:13px}.dot{background:#8a98a4;border-radius:999px;flex:0 0 10px;width:10px;height:10px}.dot.wsdot{background:#2563eb}.dot.redmond{background:var(--accent)}.dot.bellevue{background:#7c3aed}.dot.kirkland{background:#c2410c}.dot.idaho{background:#16a34a}.stats strong,.stats span{display:block}.stats strong{font-size:24px;line-height:1.1}.stats span,.timestamp,.note{color:var(--muted);font-size:13px}.error{color:var(--danger);margin:14px 0 0;font-size:14px;font-weight:700}@media (max-width:760px){.shell{min-height:100dvh}.topbar{top:calc(8px + var(--safe-top));left:calc(8px + var(--safe-left));right:calc(78px + var(--safe-right));gap:8px;max-width:none;min-height:56px;padding:9px 10px}.topbar h1{font-size:16px}.topbar p{text-overflow:ellipsis;white-space:nowrap;max-width:42vw;font-size:12px;overflow:hidden}.toggle{gap:6px;min-height:38px;padding:0 8px;font-size:13px}.cameraSummaryButton{top:calc(8px + var(--safe-top));right:calc(8px + var(--safe-right));min-width:62px;min-height:56px;padding:7px 8px}.placesTool{top:calc(76px + var(--safe-top));left:calc(8px + var(--safe-left))}.placesButton{width:44px;height:44px}.placesPopover{max-height:min(420px, calc(100dvh - 148px - var(--safe-top) - var(--safe-bottom)));overflow:auto}.panel{top:auto;right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));left:calc(8px + var(--safe-left));overscroll-behavior:contain;border-radius:10px 10px 8px 8px;width:auto;max-height:min(72dvh,620px);padding:14px}.panel:before{content:"";background:#c6d0d8;border-radius:999px;width:42px;height:4px;margin:-4px auto 10px;display:block}.panel h2{font-size:18px}.iconButton{flex-basis:42px;width:42px;height:42px;font-size:18px}.cameraDetail{gap:12px;margin-top:12px}.cameraDetail img,.emptyImage,.streamPreview video{max-height:42dvh}dl div{grid-template-columns:78px 1fr}.summary{gap:12px}.summary p{font-size:14px}.stats{grid-template-columns:1fr 1fr}.stats div{min-height:64px;padding:10px}.sourceFilters{grid-template-columns:1fr}.sourceFilters button{min-height:44px}.mapCameraMarker{width:18px;height:18px}.mapCameraMarker.city{width:20px;height:20px}}@media (max-width:420px){.topbar{right:calc(72px + var(--safe-right))}.topbar p{max-width:34vw}.toggle span{display:none}.toggle{justify-content:center;width:38px;padding:0}.stats strong{font-size:22px}}