@font-face {
  font-family: "Press Start 2P";
  src: url("/api/press-start-2p.ttf") format("truetype");
  font-display: swap;
}
:root {
  --ink: #b2bfc9; --muted: #778ea0; --bright: #becedb;
  --blue: #a4bccf; --link: #a4bccf; --rule: #313c47;
  --light: #101418; --black: #08090b;
  font-family: "Press Start 2P", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #030405; }
body { margin: 0; color: var(--ink); font: 9px/1.95 "Press Start 2P", monospace; }
body::before { content: ""; position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .045; background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, #000 2px, #000 3px); }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #fff4c6; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #d5b978; outline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.site { width: min(1196px, calc(100% - 40px)); margin: 28px auto 40px; background: var(--black); border: 1px solid #465464; box-shadow: 0 0 0 3px #030405, 0 0 0 4px #20272f; }
.skip-link { position: absolute; top: -100px; left: 12px; padding: 8px; background: #0d1014; z-index: 12; }
.skip-link:focus { top: 4px; }
.header { position: relative; min-height: 130px; padding: 28px 28px 23px; border-top: 5px solid #6e869a; border-bottom: 1px solid #526676; background: #0a0c0f; }
.header-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.header-name a, .header-name a:hover { color: #c0cfdc; font-size: 27px; line-height: 1.6; text-decoration: none; letter-spacing: -1px; }
.header-name span { color: #7b92a4; font-size: 9px; }
.header h1 { margin: 0; color: var(--bright); font-size: 24px; line-height: 1.6; font-weight: normal; }
.header h1 a { color: inherit; text-decoration: none; }
.header p { margin: 11px 0 0; color: #6a8398; font-size: 8px; line-height: 1.8; }
.nav { display: flex; flex-wrap: wrap; background: #08090b; border-bottom: 1px solid #526676; }
.nav a { display: block; padding: 14px 16px; border-right: 1px solid var(--rule); color: #90a3b3; font-size: 8px; line-height: 1.6; text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: #d4dfe8; background: #181e24; }
.nav a[aria-current="page"] { color: #0e1217; background: #96acbe; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: stretch; }
.content { min-width: 0; padding: 25px 27px 36px; }
.content section { margin-top: 30px; }
.content section:first-child { margin-top: 0; }
.crumb { margin: 0 0 20px; color: #60788b; font-size: 7px; }
h1, h2, h3, h4 { color: #acc1d2; font-weight: normal; }
.content h1 { margin: 0 0 19px; padding-bottom: 14px; border-bottom: 1px solid #445261; font-size: 15px; line-height: 1.8; }
.content h2 { margin: 0 0 14px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 10px; line-height: 1.8; }
.content h2::before { content: "> "; color: #536a7c; }
.content h3 { margin: 20px 0 9px; font-size: 9px; line-height: 1.8; }
p { margin: 11px 0; }
.content p:first-child { margin-top: 0; }
ul, ol { padding-left: 21px; }
li { margin: 0 0 9px; }
.service-list { margin: 12px 0 15px; }
.bulletin-list { margin: 8px 0 15px; padding-left: 18px; }
.bulletin-list li { padding: 4px 0; }
.small, small, .meta, .micro { color: var(--muted); font-size: 7px; }
.meta { text-transform: uppercase; }
strong { font-weight: normal; color: #cddbe6; }
.sidebar { min-width: 0; padding: 25px 17px 28px; background: #0a0c0f; border-left: 1px solid var(--rule); font-size: 8px; }
.sidebar h2, .sidebar h3 { margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid #384450; color: #90a5b7; font-size: 8px; line-height: 1.8; }
.sidebar h2:not(:first-child), .sidebar h3:not(:first-child) { margin-top: 30px; }
.sidebar p { margin: 10px 0; }
.sidebar ul { margin: 10px 0; padding-left: 0; list-style: none; }
.sidebar li { margin-bottom: 11px; }
.sidebar li::before { content: "+ "; color: #576c7e; }
.side-ledger { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 7px; }
.side-ledger dt { color: #678095; }
.side-ledger dd { margin: 0; color: #98b0c4; }
.side-camera { display: block; padding: 10px 0; border-bottom: 1px dotted #2d3640; text-decoration: none; }
.side-camera span { display: block; margin-top: 4px; color: #6c8599; font-size: 7px; }
.form { margin: 16px 0 18px; }
.form label { display: block; margin: 0 0 7px; color: #96a9b9; font-size: 8px; }
.form input, .form select, .form textarea { width: min(100%, 440px); min-height: 35px; padding: 8px; border: 1px solid #4d606f; border-radius: 0; background: #030507; color: #c0cfdc; font-size: 8px; }
.form input::placeholder, .form textarea::placeholder { color: #657e92; opacity: 1; }
.form input[type="checkbox"], .form input[type="radio"] { width: auto; min-height: 0; accent-color: #8196a8; }
.form textarea { min-height: 130px; resize: vertical; }
.form button, .form input[type="submit"], button, .archive-action { width: auto; min-height: 35px; padding: 8px 12px; border: 1px solid #647d91; border-radius: 0; background: #11171e; box-shadow: inset 1px 1px #29333d, inset -1px -1px #040608; color: #b4c8d8; font-size: 8px; line-height: 1.8; }
.form button:hover, .form input[type="submit"]:hover, button:hover, .archive-action:hover { background: #1c2630; color: #dee8f0; }
button:active, .archive-action:active { box-shadow: inset 1px 1px #040608; transform: translate(1px, 1px); }
button:disabled { color: #475666; cursor: default; }
button:disabled:hover { color: #475666; background: #11171e; }
.archive-action { display: inline-block; text-decoration: none; }
.form-row, .field { margin: 0 0 17px; }
.search-fields { display: flex; gap: 8px; align-items: stretch; }
.search-fields input { width: min(100%, 340px); }
.filter-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; padding: 16px; border: 1px solid #313b46; background: #0b0e11; }
.filter-form .form-row { min-width: 0; margin: 0; }
.filter-form input, .filter-form select { width: 100%; min-width: 0; }
.filter-form > p { grid-column: 1 / -1; margin: 3px 0 0; }
.listing, .record { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 8px; line-height: 1.9; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table-scroll:focus-visible { outline: 2px solid #d5b978; outline-offset: 2px; }
.table-scroll-hint { margin: 12px 0 -10px; color: #95a9b9; font-size: 8px; }
.table-scroll .listing { margin: 18px 0; }
.listing th, .listing td, .record th, .record td { padding: 11px 8px; vertical-align: top; text-align: left; }
.listing th { color: #abbece; background: #12181e; border-top: 1px solid #46576a; border-bottom: 1px solid #3c4a5a; font-weight: normal; font-size: 7px; }
.listing td { border-bottom: 1px solid #232a32; }
.listing tbody tr:nth-child(even) { background: #0a0d10; }
.listing tbody tr:hover { background: #10161c; }
.record thead th { width: auto; color: #abbece; background: #12181e; border-top: 1px solid #46576a; border-bottom: 1px solid #3c4a5a; font-weight: normal; font-size: 7px; }
.record tbody th { width: 155px; color: #869aab; background: #0e1318; border-bottom: 1px solid #232a32; font-weight: normal; }
.record td { border-bottom: 1px solid #232a32; overflow-wrap: anywhere; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px 0; padding-top: 13px; border-top: 1px solid var(--rule); }
.pager a, .pager span, .pager strong { display: inline-block; padding: 4px 6px; }
.pager strong { color: #070b0f; background: #8a9fb1; font-weight: normal; }
.notice { margin: 20px 0; padding: 14px; border: 1px solid #756a44; border-left: 3px solid #a58d50; background: #0e1216; color: #c7bd94; }
.notice h2 { color: #d1c49a; }
.error { color: #d9a597; }
.back { margin: 0 0 18px; }
pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 15px; border: 1px solid #2d3844; background: #030507; color: #8faac0; font: inherit; }
hr { border: 0; border-top: 1px solid var(--rule); }
.archive-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.archive-heading h2 { border: 0; margin-bottom: 0; }
.archive-heading a { font-size: 7px; white-space: nowrap; }
.archive-intro { display: grid; grid-template-columns: minmax(0, 1fr) 163px; gap: 24px; margin: 0 0 30px; }
.archive-intro .intro-copy p { max-width: 570px; color: #869aab; }
.archive-intro .intro-copy h1 { margin-bottom: 15px; border-bottom: 0; padding-bottom: 0; font-size: 19px; line-height: 1.85; color: #c1d0dc; }
.archive-stamp { align-self: start; border: 1px solid #3a4754; padding: 13px 10px; color: #647c8f; font-size: 7px; }
.archive-stamp b { display: block; margin: 10px 0; color: #a9c1d4; font-weight: normal; font-size: 28px; line-height: 1.5; }
.archive-stamp span { display: block; padding-top: 9px; border-top: 1px solid #2d3843; line-height: 2; }
.archive-kicker { margin-bottom: 11px; color: #6e869a; font-size: 7px; text-transform: uppercase; }
.reel-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.reel-tile { min-width: 0; display: block; padding: 5px; border: 1px solid #3a4755; background: #07090c; color: #a5b5c2; text-decoration: none; }
.reel-tile:hover { border-color: #7892a7; color: #c9d8e5; background: #0c1218; }
.reel-tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; image-rendering: pixelated; background: #111; border: 1px solid #242c35; }
.reel-tile .tile-code { display: flex; align-items: center; justify-content: space-between; margin: 10px 5px 6px; font-size: 8px; line-height: 1.8; }
.reel-tile .tile-code span { color: #698296; font-size: 6px; }
.reel-tile p { margin: 7px 5px; font-size: 7px; line-height: 2; }
.reel-tile .tile-date { color: #627a8e; font-size: 6px; }
.reel-tile .tile-watch { border-top: 1px solid #28333e; padding-top: 8px; color: #96afc4; }
.home-ledger { font-size: 7px; }
.home-ledger th { font-size: 6px; }
.home-ledger td { padding-top: 12px; padding-bottom: 12px; }
.home-ledger .state-review { color: #d2b780; }
.home-ledger .state-filed { color: #6a8397; }
.desk-note { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 13px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dotted #2e3742; font-size: 8px; }
.desk-note time { color: #596e80; font-size: 7px; }
.desk-note p { margin: 0 0 6px; }
.desk-note .micro { line-height: 1.9; }
.recording-player { margin: 18px 0 24px; border: 1px solid #516474; padding: 5px; background: #030406; }
.recording-player:focus-visible { outline: 2px solid #d5b978; outline-offset: 3px; }
.recording-screen { position: relative; border: 1px solid #26303b; background: #000; }
.recording-screen video, .recording-screen canvas, .recording-screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; image-rendering: pixelated; }
.recording-screen video:focus-visible { outline: 2px solid #d5b978; outline-offset: 3px; }
.recording-screen video::-webkit-media-controls,
.recording-screen video::-webkit-media-controls-enclosure,
.recording-screen video::-webkit-media-controls-panel,
.recording-screen video::-webkit-media-controls-start-playback-button,
.recording-screen video::-webkit-media-controls-overlay-play-button { display: none !important; }
.recording-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 11px 7px 7px; border-top: 1px solid #313f4d; font-size: 7px; }
.recording-controls button { min-height: 31px; padding: 6px 9px; font-size: 7px; }
.recording-controls input[type="range"] { min-width: 110px; flex: 1; accent-color: #90a7b9; border-radius: 0; }
.recording-controls .playback-time { color: #95a9b9; font-size: 7px; }
.recording-info { margin: 13px 0; color: #788fa1; font-size: 7px; }
.recording-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 7px 8px; color: #7990a2; font-size: 7px; border-bottom: 1px solid #313f4d; }
.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.camera-card { min-width: 0; display: block; border: 1px solid #374452; padding: 6px; background: #080b0f; color: #a4b8c8; text-decoration: none; }
.camera-card:hover { border-color: #7890a3; background: #0d1319; }
.camera-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; object-fit: contain; border: 1px solid #242c35; }
.camera-card h2, .camera-card h3 { padding: 7px; margin: 0; border: 0; font-size: 9px; }
.camera-card h2::before { content: ""; }
.camera-card-label { display: flex; justify-content: space-between; gap: 9px; padding: 7px 3px 10px; color: #a0b4c4; font-size: 8px; }
.camera-card > a { text-decoration: none; }
.camera-card p { padding: 0 7px; font-size: 8px; color: #70889b; }
.recording-info { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin: 0; padding: 9px 8px; border-bottom: 1px solid #313f4d; color: #7990a2; font-size: 7px; }
.recording-state { position: absolute; top: 9px; right: 10px; padding: 4px 5px; background: #06070ae6; border: 1px solid #364453; color: #8da7bd; font-size: 7px; line-height: 1.6; pointer-events: none; }
.recording-controls { display: block; padding: 12px 8px 6px; }
.transport { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.transport label { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: #788fa1; font-size: 7px; }
.transport select { min-height: 31px; padding: 4px; border: 1px solid #4b5e6d; border-radius: 0; background: #060a0f; color: #a3b7c8; font-size: 7px; }
.timeline-label { display: flex; align-items: center; gap: 13px; padding: 16px 0 13px; color: #6a8398; font-size: 7px; }
.recording-controls input[type="range"] { appearance: none; height: 17px; background: transparent; cursor: pointer; }
.recording-controls input[type="range"]:disabled { cursor: default; opacity: .5; }
.recording-controls input[type="range"]::-webkit-slider-runnable-track { height: 5px; border: 1px solid #354557; background: #0b1118; }
.recording-controls input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 15px; margin-top: -6px; border: 1px solid #aec3d4; border-radius: 0; background: #6a8398; }
.recording-controls input[type="range"]::-moz-range-track { height: 3px; border: 1px solid #354557; background: #0b1118; }
.recording-controls input[type="range"]::-moz-range-thumb { width: 10px; height: 13px; border: 1px solid #aec3d4; border-radius: 0; background: #6a8398; }
.transport-bottom { justify-content: flex-end; padding: 9px 0 0; border-top: 1px dotted #283441; }
.transport-bottom output { margin-right: auto; color: #aec3d4; }
.transport-bottom span { color: #698297; }
.recording-download { margin: 9px 8px 5px; padding-top: 9px; border-top: 1px solid #222d38; font-size: 6px; }
.observations { padding: 16px; border: 1px solid #2c3a48; background: #080b0f; }
.content .observations h2 { padding-top: 0; }
.observation-form { display: flex; align-items: end; gap: 10px; }
.observation-form label { min-width: 0; flex: 1; margin: 0; }
.observation-form input { display: block; width: 100%; margin-top: 9px; }
.observation-form button { white-space: nowrap; }
.observation-list { margin: 16px 0 0; padding: 0; list-style: none; }
.observation-list li { display: flex; align-items: start; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px dotted #323e4b; }
.observation-list li span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 8px; }
.observation-time { padding: 3px 5px; min-height: 26px; font-size: 7px; white-space: nowrap; }
.observation-remove { min-height: 26px; padding: 3px 5px; margin-left: auto; font-size: 6px; color: #7b91a3; background: #0d1115; }
.recording-neighbors { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0; border-top: 1px solid #313e4c; border-bottom: 1px solid #313e4c; font-size: 7px; color: #586d7e; }
.recording-player:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 10px 24px; border: 0; background: #000; }
.recording-player:fullscreen .recording-screen { flex: 1; min-height: 0; border: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.recording-player:fullscreen video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.recording-player:fullscreen .recording-info, .recording-player:fullscreen .recording-controls, .recording-player:fullscreen .recording-download { flex-shrink: 0; width: min(100%, 1100px); align-self: center; }
@media (max-width: 1020px) {
  .site { width: calc(100% - 24px); margin-top: 15px; }
  .header-name a { font-size: 23px; }
  .layout { grid-template-columns: minmax(0, 1fr) 195px; }
  .content { padding: 23px 20px 30px; }
  .nav a { padding: 12px 11px; font-size: 8px; }
  .archive-intro { grid-template-columns: minmax(0, 1fr) 140px; gap: 15px; }
  .archive-intro .intro-copy h1 { font-size: 16px; }
  .reel-wall { gap: 8px; }
  .reel-tile .tile-code { font-size: 7px; }
}
@media (max-width: 760px) {
  .micro, .small, small, .meta { font-size: 8px; }
  .site { width: calc(100% - 14px); margin: 8px auto 20px; }
  .header { min-height: 0; padding: 22px 17px 18px; }
  .header-name a { font-size: 21px; }
  .layout { display: block; }
  .content { padding: 20px 16px 28px; overflow-x: auto; }
  .sidebar { border-left: 0; border-top: 1px solid #384450; padding: 20px 16px; }
  .sidebar h2:not(:first-child), .sidebar h3:not(:first-child) { margin-top: 20px; }
  .side-ledger { max-width: 280px; }
  .side-camera { display: inline-block; margin-right: 20px; min-width: 145px; }
  .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-ledger { min-width: 600px; font-size: 8px; }
  .home-ledger th, .reel-tile .tile-date, .reel-tile .tile-code span, .recording-download, .observation-remove { font-size: 8px; }
  .recording-controls, .recording-controls button, .recording-info, .recording-caption, .transport label, .transport select, .timeline-label { font-size: 8px; }
}
@media (max-width: 480px) {
  body { font-size: 9px; }
  .header-name { gap: 8px; }
  .header-name a { font-size: 18px; }
  .header-name span { font-size: 7px; }
  .header p { font-size: 6px; }
  .nav a { padding: 10px; font-size: 8px; }
  .archive-intro { display: block; }
  .archive-intro .intro-copy h1 { font-size: 15px; }
  .archive-stamp { display: none; }
  .reel-wall { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .reel-tile .tile-code { font-size: 8px; }
  .reel-tile img { aspect-ratio: 16 / 9; }
  .archive-heading { display: block; }
  .archive-heading a { display: inline-block; margin: 0 0 10px; }
  .search-fields input { min-width: 0; flex: 1; }
  .filter-form { grid-template-columns: minmax(0, 1fr); }
  .listing { min-width: 580px; }
  .record { min-width: 0; }
  .record tbody th { width: 105px; }
  .camera-grid { grid-template-columns: minmax(0, 1fr); }
  .recording-controls { gap: 7px; }
  .recording-controls button { font-size: 8px; }
  .transport { gap: 7px; }
  .transport label { margin-left: 0; }
  .transport-bottom output { flex-basis: 100%; }
  .timeline-label { gap: 8px; }
  .observation-form { display: block; }
  .observation-form button { margin-top: 10px; }
  .observation-list li { flex-wrap: wrap; gap: 9px; }
  .observation-list li span { flex-basis: calc(100% - 80px); }
  .recording-neighbors { justify-content: flex-start; font-size: 6px; }
  .recording-player:fullscreen { padding: 6px; }
  .recording-player:fullscreen video { max-height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  button:active, .archive-action:active { transform: none; }
}