:root {
  color-scheme: light;
  --paper: #fffefa;
  --ink: #252823;
  --muted: #62665e;
  --line: #d8dad1;
  --blue: #3978a8;
  --amber: #ad781c;
  --red: #b84335;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", Meiryo, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 1px solid #aeb3a8; border-radius: 2px; background: transparent; color: var(--ink); padding: 5px 12px; }
button:hover { background: #eeeee7; border-color: #72786b; }
button:disabled { opacity: .5; }
:where(button,a,input,select,.marker):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.masthead { min-height: 65px; padding: 14px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ink); }
.wordmark { font-size: 18px; font-weight: 750; letter-spacing: .03em; text-decoration: none; }
.wordmark span { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 22px; letter-spacing: .08em; }
nav { display: flex; gap: 24px; font-size: 12px; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
main { max-width: 1512px; margin: auto; padding: 30px 36px 36px; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
h1 { font-size: 21px; font-weight: 700; letter-spacing: .08em; line-height: 1.5; margin: 0; }
.intro { font-size: 13px; color: var(--muted); margin: 9px 0 22px; max-width: 70em; }
.refresh { display: flex; align-items: center; gap: 12px; font-size: 12px; flex-wrap: wrap; }
.refresh label { display: flex; gap: 5px; align-items: center; }
.refresh input { accent-color: #465b52; }
#refresh-state { display: inline-flex; align-items: center; gap: 7px; min-width: 108px; color: var(--muted); }
#refresh-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #83877e; flex-shrink: 0; }
#refresh-state[data-state="live"]::before { background: #466857; animation: connection-pulse 2.8s ease-in-out infinite; }
#refresh-state[data-state="error"] { color: var(--red); }
#refresh-state[data-state="error"]::before { background: var(--red); }
@keyframes connection-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters label { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.filters input, .filters select { height: 32px; min-width: 190px; max-width: 100%; padding: 3px 8px; border: 1px solid #c8ccc1; border-radius: 2px; background: #fff; color: var(--ink); font-size: 13px; }
.filters input { font-family: var(--mono); }
.filters input::placeholder { color: #74796f; font-family: Meiryo,sans-serif; font-size: 12px; }
.filters button { height: 32px; font-size: 12px; }
.filters a { font-size: 12px; color: var(--muted); }
.summary { display: flex; align-items: baseline; gap: 34px; padding: 27px 0 23px; }
.summary div { display: flex; align-items: baseline; gap: 9px; }
.summary strong { font: 30px/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.summary div:first-child strong { font-size: 48px; font-weight: 600; letter-spacing: -.07em; }
.summary span { font-size: 12px; color: var(--muted); }
.summary p { margin: 0 0 0 auto; max-width: 290px; font-size: 12px; color: var(--muted); }
.atlas { display: grid; grid-template-columns: minmax(0,1fr) 230px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.map-area { min-width: 0; position: relative; background: #f4f3ef; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; gap: 12px; font-size: 12px; color: var(--muted); }
.map-toolbar div { display: flex; gap: 5px; }
.map-toolbar button { padding: 1px 9px; font-size: 12px; background: var(--paper); border-color: #c8ccc1; }
.map-viewport { overflow: hidden; }
#world-map { display: block; width: 100%; height: auto; touch-action: pan-y; }
.graticule { stroke: #b8bcaf; stroke-width: .6; stroke-opacity: .23; fill: none; }
.land { fill: #dedfd6; stroke: #b7bdb0; stroke-width: .6; stroke-linejoin: round; }
.marker { cursor: pointer; }
.marker:hover circle,.marker:focus circle { stroke: #252823; stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 14px 16px 8px; font-size: 12px; }
.legend strong { font: 13px var(--mono); margin-left: 5px; }
.category { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.category::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.authentication::before { background: var(--amber); }
.exploitation::before { background: var(--red); }
#map-detail { min-height: 44px; margin: 0; padding: 4px 16px 16px; font-size: 12px; color: var(--muted); }
.atlas aside { padding: 17px 0 18px 22px; }
.atlas h2 { font-size: 13px; font-weight: 700; letter-spacing: .05em; margin: 0 0 10px; }
.ranking { padding: 0; margin: 0; list-style: none; }
.ranking li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e5e6de; font-size: 13px; }
.ranking strong { font: 15px var(--mono); font-variant-numeric: tabular-nums; }
.ranking small { font: 12px Meiryo,sans-serif; color: var(--muted); }
.unknown { font-size: 12px; margin: 21px 0 8px; color: var(--muted); }
.unknown strong { font: 14px var(--mono); color: var(--ink); }
.map-note { font-size: 12px; line-height: 1.85; color: var(--muted); margin: 0; }
.attribution { font-size: 12px; color: var(--muted); margin: 9px 0 27px; }
.live-strip { margin: 0 0 30px; display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 0 18px; }
.live-strip h2 { font-size: 13px; font-weight: 700; margin: 5px 0; }
.live-strip ol { padding: 0; margin: 0; list-style: none; min-width: 0; }
.live-strip li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 18px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid #ecece5; }
.live-strip code,.live-strip time { font: 12px var(--mono); }
.live-strip time { margin-left: auto; color: var(--muted); }
.live-strip .waiting { color: var(--muted); border: 0; min-height: 35px; }
#live-overflow { grid-column: 2; font-size: 12px; color: var(--muted); }
#live-overflow:empty { display: none; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.section-heading h2 { font-size: 15px; font-weight: 700; letter-spacing: .05em; margin: 0; }
.section-heading span { font-size: 12px; color: var(--muted); }
.table-scroll { overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 13px; }
th,td { text-align: left; padding: 10px 13px; border-bottom: 1px solid #e5e6de; }
th { font-size: 12px; font-weight: 600; color: #4d5549; background: #f1f1ea; }
td { color: #41483d; }
td:first-child { color: var(--ink); font-size: 13px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f4f4ed; }
.empty { padding: 28px 13px; color: var(--muted); white-space: normal; }
footer { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 15px; font-size: 12px; line-height: 1.85; color: var(--muted); }
footer p { margin: 5px 0; }
#japan-target { pointer-events: none; }
#japan-target text { font: 11px Meiryo,sans-serif; fill: var(--ink); paint-order: stroke; stroke: #f4f3ef; stroke-width: 3px; stroke-linejoin: round; }
.flight { pointer-events: none; }
@media (max-width: 1100px) {
  .summary { flex-wrap: wrap; gap: 16px 30px; }
  .summary p { max-width: none; flex-basis: 100%; margin: 0; }
}
@media (max-width: 850px) {
  .masthead { padding: 15px 22px; }
  main { padding: 24px 22px; }
  .wordmark span { display: none; }
  nav { gap: 17px; }
  .atlas { grid-template-columns: 1fr; }
  .atlas aside { padding: 18px 0; }
  .ranking { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .map-note { max-width: 65em; }
  .refresh { justify-content: flex-end; max-width: 230px; gap: 8px 12px; }
  .filters label { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 540px) {
  .masthead { padding: 14px 16px; gap: 12px; }
  .wordmark { font-size: 15px; }
  nav { gap: 14px; }
  nav a:first-child { display: none; }
  main { padding: 23px 16px; }
  .heading { gap: 16px; align-items: flex-start; }
  h1 { font-size: 20px; white-space: nowrap; }
  .refresh { max-width: 178px; }
  .intro { margin-bottom: 18px; line-height: 1.85; }
  .filters { gap: 10px 12px; }
  .filters label { flex: 1; min-width: 130px; }
  .filters input,.filters select { min-width: 0; width: 100%; }
  .summary { padding: 23px 0 19px; gap: 12px 23px; }
  .summary div { gap: 7px; }
  .summary div:first-child { flex-basis: 100%; }
  .summary div:first-child strong { font-size: 43px; }
  .summary strong { font-size: 25px; }
  .map-toolbar { padding: 10px; }
  .legend { padding: 12px 10px 6px; gap: 8px 16px; }
  #map-detail { padding: 5px 10px 13px; }
  .live-strip { grid-template-columns: 1fr; gap: 8px; }
  .live-strip li { gap: 4px 12px; }
  #live-overflow { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flight { display: none; }
  #refresh-state[data-state="live"]::before { animation: none; }
}
.summary strong { display: inline-block; }
#observations td:nth-child(2) { white-space: normal; min-width: 170px; max-width: 260px; line-height: 1.6; }
.record-detail { font: 12px/1.5 Meiryo,sans-serif; padding: 3px 10px; }
#observations td:nth-child(3) { font: 12px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,sans-serif; white-space: normal; min-width: 190px; max-width: 270px; }
#observations td:nth-child(4),#observations td:nth-child(7),#observations td:nth-child(9) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
#observations td:nth-child(4) { white-space: nowrap; }
#observations td:nth-child(6),#observations th:nth-child(6) { text-align: left; font-family: inherit; }
#observations td:nth-child(7),#observations th:nth-child(7) { text-align: right; }
#observations td:nth-child(9),#observations th:nth-child(9) { font-size: 12px; white-space: nowrap; min-width: 140px; }
#observations td:nth-child(10),#observations th:nth-child(10) { text-align: center; }
#record-dialog { width: min(1020px,calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 24px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-top: 3px solid var(--ink); border-radius: 0; }
#record-dialog::backdrop { background: #20251fc0; }
.detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.detail-heading h2 { font-size: 19px; margin: 0; }
#detail-state { min-height: 24px; font-size: 13px; color: var(--muted); }
#detail-state[data-state="error"] { color: var(--red); }
#detail-facts { display: grid; grid-template-columns: 150px minmax(0,1fr); margin: 20px 0; gap: 8px 18px; font-size: 13px; }
#detail-facts dt { color: var(--muted); }
#detail-facts dd { margin: 0; overflow-wrap: anywhere; }
#record-dialog h3 { font-size: 14px; margin: 24px 0 12px; }
.detail-note { font-size: 12px; line-height: 1.9; color: var(--muted); }
.attempts { font-size: 12px; }
.attempts td { font: 12px/1.7 var(--mono); text-align: left; white-space: normal; overflow-wrap: anywhere; min-width: 135px; max-width: 280px; }
.attempts td:first-child { white-space: nowrap; }
.attempts .detail-agent { font: 11px/1.8 var(--mono); color: var(--muted); max-width: none; background: #f1f1ea; }
#private-detail-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--line); }
#private-detail-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
#detail-key { width: 290px; max-width: 100%; border: 1px solid #aeb3a8; padding: 6px; font: 13px var(--mono); }
@media(max-width:540px) { #record-dialog { padding: 18px; } #detail-facts { grid-template-columns: 1fr; gap: 3px; } #detail-facts dd { margin-bottom: 9px; } }
/* Observation map: the map is the workspace; records have their own pages. */
:root { color-scheme: dark; --paper:#141819; --ink:#e5e9e7; --muted:#a0aaa7; --line:#38413f; --blue:#45b7d1; --amber:#dcba63; --red:#ee747d; }
body { background:var(--paper); color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
[hidden] { display:none !important; }
button { color:var(--ink); border-color:#4b5753; background:#222a28; }
button:hover { background:#313b38; border-color:#85918a; }
.masthead { background:#191e1d; border-bottom:1px solid #48514d; color:var(--ink); }
.wordmark { color:#edf3f0; }
.wordmark span,nav { color:#afb8b3; }
.map-page { overflow:hidden; }
.map-page .masthead { height:68px; padding:10px 22px; gap:26px; position:relative; z-index:5; }
.map-page .wordmark { font-size:16px; white-space:nowrap; }
.map-page .wordmark span { margin-left:12px; font-size:11px; }
.map-page .summary { padding:0; margin-left:auto; gap:22px; flex-wrap:nowrap; }
.map-page .summary div { gap:7px; flex-basis:auto; }
.map-page .summary strong,.map-page .summary div:first-child strong { font:600 22px/1 var(--mono); letter-spacing:-.04em; color:#eaf0ed; }
.map-page .summary div:first-child strong { color:#ee747d; }
.map-page .summary span { font-size:11px; color:#abb4ae; }
.map-page .refresh { max-width:none; flex-wrap:nowrap; font-size:11px; }
.map-page #refresh-state { min-width:93px; font-size:11px; }
.map-page #refresh-state[data-state="live"]::before { background:#77bb8e; }
.map-page nav { font-size:12px; gap:16px; white-space:nowrap; }
.map-page main { max-width:none; margin:0; padding:0; height:calc(100dvh - 68px); position:relative; }
.map-page #results,.map-page .atlas,.map-page .map-area,.map-page .map-viewport { height:100%; }
.map-page .atlas { display:block; border:0; }
.map-page .map-area { background:#29343d; position:absolute; inset:0; }
.map-page #world-map { width:100%; height:100%; }
.land { fill:#14191d; stroke:#414e55; stroke-width:.55; }
.graticule { stroke:#889793; stroke-opacity:.08; }
.marker:hover circle,.marker:focus circle { stroke:#e9f2ee; stroke-width:2; }
#japan-target text { fill:#ecf2ef; stroke:#29343d; }
.map-page .map-toolbar { position:absolute; bottom:106px; right:22px; padding:0; flex-direction:column; align-items:flex-end; gap:8px; color:#b6c1bd; font-size:11px; }
.map-toolbar button { background:#1c2422; border-color:#52605a; padding:4px 10px; }
.map-page .atlas aside { position:absolute; left:18px; top:18px; width:214px; padding:15px; border:1px solid #47534d; border-radius:3px; background:#1a211ff2; }
.map-page .atlas h2 { font-size:12px; color:#d7dfda; letter-spacing:.05em; margin-bottom:9px; }
.map-page .atlas h2 span { display:block; font-size:10px; font-weight:400; color:#a0aaa3; margin-top:3px; }
.map-page .ranking { display:block; }
.ranking li { border-color:#35403a; color:#c4ccc6; padding:6px 0; font-size:12px; }
.ranking strong { color:#dde6df; font-size:13px; }
.unknown,.unknown strong { color:#aab6af; }
.map-page .unknown { font-size:11px; margin-bottom:0; margin-top:13px; }
.map-page .live-strip { position:absolute; top:18px; right:18px; width:278px; max-height:calc(100% - 210px); display:flex; flex-direction:column; gap:10px; margin:0; padding:0; }
.map-page .live-strip h2 { margin:0; padding:0 2px; color:#e1e8e3; font-size:12px; }
.map-page .live-strip h2 span { float:right; font-size:10px; color:#a3afa7; font-weight:400; }
.map-page .live-strip ol { overflow:auto; scrollbar-width:thin; scrollbar-color:#526158 transparent; }
.map-page .live-strip li { background:#1b2321ed; border:1px solid #435048; border-left:3px solid var(--blue); border-radius:3px; margin:0 0 7px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:3px 8px; color:#d0dbd3; }
.map-page .live-strip li.authentication { border-left-color:var(--amber); }
.map-page .live-strip li.exploitation { border-left-color:var(--red); }
.map-page .live-strip li>span:nth-child(2) { grid-column:1 / -1; font-size:11px; }
.map-page .live-strip li>a { font-size:11px; text-decoration:none; color:#b1c7bb; }
.map-page .live-strip time { grid-column:2; grid-row:1; font-size:10px; color:#a1afa6; }
.map-page .live-strip code { font-size:11px; color:#c2cfc6; }
.map-page .live-strip .waiting { display:block; border-left:1px solid #435048; color:#b3bfb6; }
.map-bottom { position:absolute; bottom:28px; left:18px; right:18px; background:#19211fed; border:1px solid #435048; padding:12px 16px; }
.map-bottom .legend { padding:0; font-size:12px; color:#cbd6ce; }
.legend strong { color:#e4ece6; }
.map-bottom p { margin:7px 0 0; font-size:11px; color:#b0bdb3; }
.map-bottom p a { float:right; color:#d1e2d6; }
.map-page .attribution { position:absolute; bottom:3px; right:20px; margin:0; font-size:10px; color:#c0ccc4; }
#map-popup { position:absolute; left:38%; top:28%; width:300px; max-width:calc(100% - 32px); padding:15px; background:#1b2420f7; border:1px solid #6b7c6e; border-top:3px solid var(--blue); border-radius:3px; }
#close-popup { float:right; padding:0 6px; border:0; background:transparent; }
#map-detail { padding:0; margin:0 0 12px; min-height:0; font-size:13px; line-height:1.8; color:#e1eae3; }
#map-record { font-size:12px; color:#b9d6c1; }
.records-page main { max-width:1500px; padding-top:30px; }
.records-page h1 { margin:12px 0; }
.records-page h2 { font-size:15px; margin-top:28px; }
.page-note { color:var(--muted); font-size:12px; line-height:1.9; }
.filters input,.filters select { background:#202824; border-color:#536056; color:var(--ink); }
.filters label,.filters a { color:var(--muted); }
.table-scroll { border-top-color:#718075; }
th { background:#252e28; color:#becbc1; }
th,td { border-color:#354039; }
td,td:first-child { color:#d6e1d9; }
tbody tr:hover { background:#202b24; }
.record-detail { display:inline-block; color:#9ed0b2; font-size:12px; white-space:nowrap; text-decoration:none; }
.pagination { display:flex; justify-content:space-between; padding:22px 0; }
.record-facts { display:grid; grid-template-columns:155px minmax(0,1fr); gap:9px 20px; padding:20px 0; font-size:14px; }
.record-facts dt { color:#a6b6aa; }
.record-facts dd { margin:0; overflow-wrap:anywhere; }
.attempts .detail-agent { background:#202b24; color:#aebfb2; }
.back-link { font-size:12px; color:#9ed0b2; }
@media(max-width:1100px) { .map-page .masthead { gap:16px; } .map-page .summary { gap:15px; } .map-page .wordmark span,.map-page .summary div:nth-child(2) { display:none; } .map-page .live-strip { width:245px; } }
@media(max-width:740px) { .map-page .masthead { height:100px; padding:12px 16px; flex-wrap:wrap; gap:8px 18px; } .map-page .summary { margin-left:auto; } .map-page .summary div:nth-child(3) { display:none; } .map-page .refresh { order:3; margin-right:auto; } .map-page nav { order:4; } .map-page main { height:calc(100dvh - 100px); } .map-page .atlas aside { width:150px; top:12px; left:10px; padding:10px; } .map-page .ranking li { font-size:10px; } .map-page .live-strip { width:195px; top:12px; right:10px; max-height:calc(100% - 235px); } .map-page .live-strip li { padding:7px 9px; } .map-page .live-strip h2 span { display:none; } .map-bottom { left:10px; right:10px; bottom:37px; padding:10px; } .map-bottom .legend { font-size:10px; gap:8px; } .map-bottom p { font-size:10px; } .map-page .attribution { bottom:4px; right:10px; left:10px; font-size:9px; } #map-popup { left:16px; top:42%; z-index:3; } .record-facts { grid-template-columns:1fr; gap:3px; } .record-facts dd { margin-bottom:10px; } }