/* Reserved bands: header, living scene, caption, and footer. */
:root { --muted: rgba(220,255,237,.72); }
.ui .brand { top: 24px; left: 24px; font-size: 15px; }
.ui .status { top: 53px; left: 24px; right: auto; font-size: 11px; }
.ui .infra { opacity: 1 !important; font-size: 12px; letter-spacing: .04em; }
.ui .infra-block { opacity: 1; width: auto; min-width: 0; max-width: none; font-size: inherit; transform: none !important; }
.ui .infra-a { top: auto; bottom: 25px; right: 24px; width: 230px; }
.ui .infra-b { display: none; }
.ui .infra-c { top: 26px; right: 24px; bottom: auto; width: 300px; }
.ui .traffic-total .metric-value { font-size: 15px; }
.ui .traffic-total .metric-value { max-width: 56%; overflow-wrap: anywhere; }
.ui .traffic-coverage { padding-bottom: 5px; border-bottom: 1px solid #25382e; }
.ui .infra-block .kicker, .ui .infra-line .metric { color: #a4bfb1; }
.ui .infra-line .metric-value { color: #dcffed; }
.ui .telemetry { left: 24px; bottom: 25px; width: 205px; font-size: 12px; color: #a4bfb1; letter-spacing: .04em; }
.ui .telemetry .value { color: #dcffed; }
.ui .center-copy { display: block; bottom: 132px; font-size: 12px; letter-spacing: .18em; color: #a4bfb1; width: 100%; left: 0; transform: none; text-align: center; }
.ui .center-copy span { font-size: inherit; }
.ui .index { display: none; }
.ui .event-message { top: auto; bottom: 160px; max-width: 80%; font-size: 11px; transform: translateX(-50%); }
.ui .event-message.active { transform: translateX(-50%); }
#project-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.project-target { position: absolute; width: 156px; height: 112px; padding: 77px 3px 4px; border: 0; background: transparent; color: var(--accent); font: 13px/1.3 "SFMono-Regular", Consolas, monospace; cursor: pointer; pointer-events: auto; text-align: center; border-radius: 9px; white-space: nowrap; text-shadow: 0 1px 6px #020303, 0 0 12px #020303; }
.project-target[data-central] { height: 52px; padding: 9px 3px; color: #dcffed; }
.project-target .project-marker { display: block; font-size: 9px; letter-spacing: .14em; opacity: .8; margin-top: 4px; }
.project-target[aria-pressed="true"] { background: rgba(145,255,209,.06); }
.project-target:focus-visible, #project-picker:focus-visible, #close-project:focus-visible { outline: 2px solid #dcffed; outline-offset: 4px; }
.project-controls { position: absolute; z-index: 15; left: 24px; top: 91px; color: #a4bfb1; font: 12px/1.4 Consolas, monospace; }
.project-controls label { display: block; margin-bottom: 6px; letter-spacing: .08em; }
#project-picker { background: #08120e; border: 1px solid #395b4b; color: #dcffed; font: inherit; padding: 9px 30px 9px 10px; border-radius: 3px; width: 205px; cursor: pointer; }
#project-panel { position: absolute; z-index: 30; left: auto; right: 18px; top: 225px; bottom: 130px; height: calc(100dvh - 355px); width: min(360px, 42vw); margin: 0; max-width: none; max-height: none; border: 1px solid #3b5d4b; border-radius: 9px; padding: 24px; background: #060f0b; color: #dcffed; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 16px 64px #0009; font: 14px/1.65 Consolas, monospace; }
#project-panel::backdrop { background: transparent; }
#project-panel h2 { margin: 15px 0 4px; font-size: 23px; font-weight: 500; color: var(--accent); }
#project-panel h3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #a4bfb1; margin: 25px 0 8px; }
#project-panel p { margin: 12px 0; }
#project-panel ul { padding-left: 19px; margin: 7px 0; }
#project-panel li { margin: 5px 0; }
#project-panel .stage { color: var(--accent); font-size: 12px; }
#project-panel dl { margin: 0; }
#project-panel dl div { display: flex; justify-content: space-between; gap: 18px; margin: 9px 0; }
#project-panel dt { color: #a4bfb1; }
#project-panel dd { margin: 0; text-align: right; }
.panel-note { color: #a4bfb1; font-size: 12px; }
.project-traffic { margin: 22px 0; padding: 0 0 16px; border-bottom: 1px solid #25382e; }
.traffic-count { color: var(--accent); font-size: 29px; line-height: 1.35; overflow-wrap: anywhere; }
#project-panel .traffic-activity { color: #dcffed; font-size: 13px; margin: 7px 0 12px; }
#project-trend { width: 100%; height: 56px; display: block; color: var(--accent); }
#project-trend[hidden] { display: none; }
#project-panel dd { overflow-wrap: anywhere; min-width: 0; }
#close-project { position: sticky; top: 0; float: right; background: #0b1c14; border: 1px solid #4c6c5c; color: #dcffed; border-radius: 3px; padding: 8px 11px; font: inherit; cursor: pointer; }
body.project-open .ui .center-copy { visibility: hidden; }
@media (max-width: 720px) {
  .ui .brand { top: 18px; left: 16px; font-size: 14px; }
  .ui .status { top: 46px; left: 16px; font-size: 11px; max-width: none; text-align: left; }
  .project-controls { top: 74px; left: 16px; right: 16px; }
  .project-controls label { display: none; }
  #project-picker { width: 100%; font-size: 14px; }
  .ui .infra-c { top: auto; bottom: 100px; left: 16px; right: 16px; width: auto; }
  .ui .infra-c .kicker { display: none; }
  .ui .infra-c .infra-line { margin: 3px 0; }
  .ui .infra-a { bottom: 18px; right: 16px; width: 145px; }
  .ui .infra-a .kicker { display: none; }
  .ui .infra { font-size: 12px; letter-spacing: 0; }
  .ui .infra-line { gap: 8px; }
  .ui .telemetry { left: 16px; bottom: 18px; width: calc(100% - 193px); font-size: 12px; column-gap: 6px; row-gap: 7px; }
  .ui .center-copy { bottom: 232px; font-size: 10px; letter-spacing: .09em; }
  .ui .event-message { bottom: 254px; font-size: 10px; }
  .project-target { width: 136px; font-size: 12px; height: 97px; padding-top: 63px; }
  .project-target[data-central] { height: 43px; padding-top: 7px; }
  .project-target[data-central] { background: radial-gradient(ellipse, #04100ee8 20%, #04100e00 73%); }
  #project-panel { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; height: min(62dvh, 540px); padding: 18px; font-size: 14px; }
  #project-panel::backdrop { background: #0003; }
}
@media (max-height: 520px) and (min-width: 721px) {
  .ui .infra-c { font-size: 11px; top: 16px; }
  .project-controls { top: 75px; }
  .project-controls label { display: none; }
  .ui .center-copy { bottom: 108px; }
  #project-panel { top: 16px; bottom: 16px; height: calc(100dvh - 32px); }
  body.project-open .ui .infra-c { visibility: hidden; }
}
@media (max-height: 550px) and (max-width: 720px) {
  .ui .brand { top: 12px; }
  .ui .status { display: none; }
  .project-controls { left: auto; right: 12px; top: 10px; width: 43%; }
  #project-picker { font-size: 12px; padding: 7px; }
  .ui .infra-c { bottom: 82px; font-size: 11px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .ui .infra-c .traffic-coverage { border: 0; padding-bottom: 0; }
  .ui .infra-a { bottom: 9px; }
  .ui .telemetry { bottom: 9px; }
  .ui .center-copy { bottom: 164px; font-size: 9px; }
  .ui .event-message { bottom: 184px; }
  .project-target { height: 75px; padding-top: 45px; }
  #project-panel { height: 82dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .noise, .brand-dot { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}
@media (min-height: 551px) and (max-height: 620px) and (max-width: 720px) {
  .project-target { height: 76px; padding-top: 44px; }
  .project-target[data-central] { height: 43px; padding-top: 7px; }
}