:root {
  --paper:#f3f0e9; --ink:#29322d; --muted:#7d847d; --line:#dedbd2; --bubble:#fffefa; --green:#70953d; --orange:#c77b43; --blue:#6093a0;
  --mono:"DM Mono",monospace; --sans:"Zen Maru Gothic",sans-serif;
}
*{box-sizing:border-box} html{background:var(--paper)} body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);line-height:1.7} button,a{font:inherit}
.app-shell{width:min(100% - 40px,1180px);margin:0 auto}.app-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 2px 17px;border-bottom:1px solid var(--line)}
h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.03em}.header-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:11px;white-space:nowrap}.live-status{display:inline-flex;align-items:center;gap:6px}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(112,149,61,.12)}.live-status--waiting .live-dot{background:var(--muted);box-shadow:none}.live-status--delayed .live-dot{background:var(--orange);box-shadow:0 0 0 3px rgba(199,123,67,.12)}
.newest-count{font-family:var(--mono);font-size:10px;letter-spacing:.03em}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,1.04fr);gap:44px;align-items:start}.feed-pane{min-width:0;max-width:620px}.feed{padding:29px 0 70px}.map-pane{position:sticky;top:0;padding-top:29px}.map-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;color:var(--muted);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}.map-heading__label{display:flex;align-items:center;gap:10px;min-width:0}.map-heading__label span:last-child{color:var(--green);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-nav{display:flex;gap:5px;flex:none}.event-nav button{padding:3px 7px;border:1px solid var(--line);border-radius:4px;background:var(--bubble);color:var(--ink);cursor:pointer;font-size:10px;letter-spacing:0}.event-nav button:hover,.event-nav button:focus-visible{border-color:var(--green);outline:none}.event-nav button:disabled{cursor:not-allowed;opacity:.45}#map{height:calc(100vh - 105px);min-height:440px;border:1px solid var(--line);background:#dfe4dc;box-shadow:0 2px 0 rgba(41,50,45,.025)}.new-events-bar{position:fixed;z-index:10;top:12px;left:50%;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 8px 6px 12px;border:1px solid var(--green);border-radius:20px;background:rgba(255,254,250,.96);box-shadow:0 4px 16px rgba(41,50,45,.14);color:var(--ink);font-size:11px;transform:translateX(-50%)}.new-events-bar[hidden]{display:none}.new-events-bar button{padding:4px 9px;border:0;border-radius:14px;background:var(--green);color:#fff;font-size:11px;cursor:pointer}.new-events-bar button:hover,.new-events-bar button:focus-visible{background:var(--ink);outline:none}.event{display:grid;grid-template-columns:45px minmax(0,1fr);gap:10px;padding-bottom:24px;cursor:pointer}.event:focus-visible{outline:2px solid var(--green);outline-offset:4px}.event--selected .event__bubble{border:2px solid var(--green);box-shadow:0 0 0 4px rgba(112,149,61,.13),0 0 22px rgba(112,149,61,.2)}.event--selected.event--quake .event__bubble{border-color:var(--orange);box-shadow:0 0 0 4px rgba(199,123,67,.14),0 0 22px rgba(199,123,67,.24)}.event--selected.event--weather .event__bubble{border-color:var(--blue);box-shadow:0 0 0 4px rgba(96,147,160,.14),0 0 22px rgba(96,147,160,.22)}.event--selected.event--ocean .event__bubble{border-color:var(--green);box-shadow:0 0 0 4px rgba(112,149,61,.14),0 0 22px rgba(112,149,61,.22)}.event--selected.event--disaster .event__bubble{border-color:#b75536;box-shadow:0 0 0 4px rgba(183,85,54,.14),0 0 22px rgba(183,85,54,.22)}.event--selected.event--space .event__bubble{border-color:#5b549c;box-shadow:0 0 0 4px rgba(91,84,156,.14),0 0 22px rgba(91,84,156,.22)}.event--selected.event--aviation .event__bubble{border-color:#557f9b;box-shadow:0 0 0 4px rgba(85,127,155,.14),0 0 22px rgba(85,127,155,.22)}.event--selected.event--volcano .event__bubble{border-color:#b34e35;box-shadow:0 0 0 4px rgba(179,78,53,.14),0 0 22px rgba(179,78,53,.22)}.event--selected.event--satellite_fire .event__bubble{border-color:#7563a8;box-shadow:0 0 0 4px rgba(117,99,168,.14),0 0 22px rgba(117,99,168,.22)}.event__icon{display:grid;place-items:center;width:35px;height:35px;margin-top:2px;border-radius:50%;color:#fff;font-size:17px;line-height:1}
.event--quake .event__icon{background:var(--orange)}.event--weather .event__icon{background:var(--blue)}.event--ocean .event__icon{background:var(--green)}.event--disaster .event__icon{background:#b75536}.event--space .event__icon{background:#5b549c}.event--aviation .event__icon{background:#557f9b}.event--volcano .event__icon{background:#b34e35}.event--satellite_fire .event__icon{background:#7563a8}.event--unknown .event__icon{background:var(--muted)}.event__column{min-width:0}
.event--incident .event__icon{background:#d45b36}.event--fireball .event__icon{background:#6f5a9e}
.event--selected.event--incident .event__bubble{border-color:#d45b36;box-shadow:0 0 0 4px rgba(212,91,54,.14),0 0 22px rgba(212,91,54,.24)}.event--selected.event--fireball .event__bubble{border-color:#b58a4b;box-shadow:0 0 0 4px rgba(181,138,75,.16),0 0 22px rgba(111,90,158,.24)}
.event--facility .event__icon{background:#9a6b3d}.event--public_health .event__icon{background:#bd6d4a}.event--selected.event--facility .event__bubble{border-color:#9a6b3d;box-shadow:0 0 0 4px rgba(154,107,61,.15),0 0 22px rgba(154,107,61,.24)}.event--selected.event--public_health .event__bubble{border-color:#bd6d4a;box-shadow:0 0 0 4px rgba(189,109,74,.15),0 0 22px rgba(189,109,74,.24)}
.event--alert .event__icon{background:#cc633b}.event--space_weather .event__icon{background:#4d668f}.event--satellite .event__icon{background:#6d5b9d}.event--selected.event--alert .event__bubble{border-color:#cc633b;box-shadow:0 0 0 4px rgba(204,99,59,.15),0 0 22px rgba(204,99,59,.24)}.event--selected.event--space_weather .event__bubble{border-color:#4d668f;box-shadow:0 0 0 4px rgba(77,102,143,.16),0 0 22px rgba(77,102,143,.26)}.event--selected.event--satellite .event__bubble{border-color:#6d5b9d;box-shadow:0 0 0 4px rgba(109,91,157,.16),0 0 22px rgba(109,91,157,.26)}
.event__time{display:block;margin:0 0 5px 2px;color:var(--muted);font:10px var(--mono)}.event__bubble{position:relative;padding:13px 15px 12px;border:1px solid var(--line);border-radius:5px 16px 16px 16px;background:var(--bubble);box-shadow:0 2px 0 rgba(41,50,45,.025)}
.event__bubble:before{content:"";position:absolute;top:0;left:-7px;width:12px;height:12px;border-top:1px solid var(--line);transform:skew(-28deg);background:var(--bubble)}.event__meta{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:7px;color:var(--muted);font-size:11px}.event__category{color:var(--ink);font-weight:700}.event__region{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event__title{position:relative;margin:0;font-size:15px;font-weight:700;line-height:1.55}.event__detail{position:relative;margin:5px 0 0;color:#687169;font-size:12px;line-height:1.65}
.source-toggle{position:relative;display:inline-flex;align-items:center;gap:4px;margin-top:9px;padding:2px 0;border:0;border-bottom:1px solid transparent;color:var(--green);background:transparent;cursor:pointer;font-size:11px}.source-toggle:hover,.source-toggle:focus-visible{border-bottom-color:var(--green);outline:none}.source-toggle:after{content:"＋";font-size:12px}.source-toggle[aria-expanded=true]:after{content:"−"}
.source-disclosure{position:relative;margin-top:10px;padding:9px 10px;border-left:2px solid var(--green);background:rgba(112,149,61,.08);color:var(--muted);font-size:11px}.source-disclosure p{margin:0 0 3px}.source-disclosure p:last-child{margin-bottom:0}.source-disclosure strong{color:var(--ink);font-weight:700}.source-disclosure a{color:var(--green);text-underline-offset:3px;overflow-wrap:anywhere}.source-disclosure a:hover,.source-disclosure a:focus-visible{color:var(--ink);outline:none}
.event-marker{display:grid!important;place-items:center;width:18px!important;height:18px!important;border:0!important;background:transparent!important}.event-marker span{display:block;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--marker-color);box-shadow:0 1px 4px rgba(41,50,45,.35)}.event-marker--selected{z-index:1000!important}.event-marker--selected span{width:22px;height:22px;border-width:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--marker-color) 25%,transparent),0 0 18px var(--marker-color);animation:marker-pulse 1.5s ease-in-out infinite}.map-popup{display:grid;gap:3px;min-width:190px;color:var(--ink);font-family:var(--sans);line-height:1.45}.map-popup strong{font-size:13px}.map-popup time,.map-popup span{color:var(--muted);font-size:10px}.map-popup p{margin:4px 0 0;font-size:11px}.map-popup a{color:var(--green);text-underline-offset:3px}.timeline-popup .leaflet-popup-content-wrapper,.timeline-popup .leaflet-popup-tip{background:var(--bubble)}.timeline-popup .leaflet-popup-content{margin:11px 13px}
.loading-state,.empty-state,.error-state{display:grid;place-items:center;gap:9px;min-height:190px;color:var(--muted);font-size:12px;text-align:center}.loader{width:17px;height:17px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin .9s linear infinite}.empty-state strong,.error-state strong{color:var(--ink);font-size:15px}.error-state strong{color:var(--orange)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marker-pulse{50%{transform:scale(1.18);opacity:.72}}
@media(max-width:800px){.app-shell{width:min(100% - 24px,620px)}.workspace{display:flex;flex-direction:column;gap:0}.feed-pane,.map-pane{width:100%;max-width:none}.map-pane{position:static;padding:0 0 40px;order:2}.feed-pane{order:1}.map-heading{margin-top:4px}#map{height:54vh;min-height:320px}.app-header{padding-top:17px}.header-meta{gap:9px}.event{grid-template-columns:37px minmax(0,1fr);gap:8px}.event__icon{width:31px;height:31px;font-size:15px}.event__bubble{padding:11px 12px}.event__title{font-size:14px}}
@media(min-width:801px){html,body{height:100%;overflow:hidden}.app-header{position:fixed;z-index:20;top:0;left:50%;width:min(calc(100% - 40px),1180px);background:var(--paper);transform:translateX(-50%)}.workspace{height:100vh;padding-top:76px}.feed-pane{height:calc(100vh - 76px);overflow:hidden}.feed{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.map-pane{top:76px;height:calc(100vh - 76px)}#map{height:calc(100% - 31px)}.new-events-bar{z-index:30;top:84px}}
@media(max-width:800px){.app-header{position:static;transform:none}.workspace{height:auto;padding-top:0}.feed-pane{height:auto;overflow:visible}.feed{height:auto;overflow:visible;scrollbar-gutter:auto}.new-events-bar{top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* Keep the compact feed/map layout. Playback controls stay secondary. */
.stream-toolbar{display:flex;align-items:center;gap:12px;padding:10px 2px;font-size:11px;flex-wrap:wrap}.stream-toolbar label{display:flex;align-items:center;gap:5px}.stream-toolbar button,.stream-toolbar select,.load-older{border:1px solid var(--line);border-radius:4px;padding:5px 9px;background:var(--bubble);color:var(--ink);font:inherit;cursor:pointer}.stream-toolbar input{accent-color:var(--green)}#queue-count{color:var(--muted);margin-left:auto;font-size:10px}.stream-notice{font-size:10px;color:var(--muted);margin:0 0 8px}.load-older{display:block;width:100%;font-size:11px;margin:5px 0 10px}.load-older:disabled{opacity:.45;cursor:default}.event-detail{font-size:11px;margin-top:7px;color:var(--muted)}.event-detail summary{cursor:pointer;display:inline-block;text-decoration:underline;text-underline-offset:3px}.event__title,.event__detail{overflow-wrap:anywhere}.event--transport .event__icon{background:#557f9b}.event--network .event__icon{background:#70649a}#source-status-panel{position:fixed;z-index:1500;top:120px;right:max(20px,calc((100vw - 1180px)/2));max-height:65vh;overflow:auto;width:min(480px,calc(100vw - 30px));background:var(--bubble);border:1px solid var(--line);padding:15px;box-shadow:0 4px 18px #0002;font-size:11px}#source-status-panel p{font-size:10px;color:var(--muted)}#source-status-panel div{display:flex;justify-content:space-between;gap:15px;padding:7px 0;border-bottom:1px solid var(--line)}#source-status-panel div span:last-child{white-space:nowrap}.event:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(min-width:801px){.stream-toolbar{position:fixed;top:66px;width:min(calc(100% - 40px),1180px);z-index:25;background:var(--paper)}.stream-notice{position:fixed;top:113px;z-index:24;background:var(--paper);width:min(calc(100% - 40px),1180px);padding-bottom:7px}.workspace{padding-top:142px;gap:34px}.feed-pane{height:calc(100vh - 142px);display:flex;flex-direction:column}.feed{flex:1;min-height:0;padding:15px 0 25px}.map-pane{top:142px;height:calc(100vh - 142px);padding-top:15px}#map{min-height:240px}.app-header{height:66px}.header-meta{font-size:10px}}
@media(max-width:800px){html,body{height:100%;overflow:hidden}.app-shell{height:100dvh;display:flex;flex-direction:column;max-width:700px}.app-header{flex:none;flex-wrap:wrap;gap:5px;padding:10px 0}.app-header h1{font-size:16px}.header-meta{gap:6px;flex-wrap:wrap;font-size:9px}.newest-count{font-size:9px}.event-nav button{padding:2px 5px;font-size:9px}.stream-toolbar{padding:8px 0;gap:8px;flex:none;font-size:10px}.stream-toolbar button,.stream-toolbar select{padding:4px 6px}#queue-count{font-size:9px}.stream-notice{font-size:9px;flex:none;margin-bottom:4px}.workspace{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;gap:0}.map-pane{order:0;flex:none;height:25dvh;min-height:150px;padding:0 0 8px}.map-heading{margin:0 0 4px;font-size:9px}#map{height:calc(100% - 20px);min-height:0}.feed-pane{order:1;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.feed{flex:1;min-height:0;overflow-y:auto;padding:12px 0;overscroll-behavior:contain}.event{padding-bottom:16px}.event__title{font-size:13px}.load-older{flex:none;margin:4px 0 8px;padding:4px;font-size:10px}#source-status-panel{top:120px}}