@font-face{font-family:'Inter Tight';src:url('fonts/InterTight-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('fonts/InterTight-Italic-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/Newsreader-Italic-Variable.woff2') format('woff2-variations');font-weight:200 800;font-style:italic;font-display:swap}

:root{
  --ink:#0c0d0e;
  --ink-2:#14161a;
  --ink-3:#1c1f25;
  --rule:#2a2e36;
  --rule-strong:#3a3f4a;
  --bone:#e8e3d8;
  --bone-2:#b5b1a8;
  --mute:#6e6b65;
  --signal:#c89236;
  --signal-soft:#6b4d1c;
  --alarm:#a83e2c;
  --cool:#4a6b7c;

  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-text:'Inter Tight',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --font-serif:'Newsreader',Georgia,serif;

  --t-display:clamp(2.5rem,4vw,4rem);
  --t-h1:1.953rem;
  --t-h2:1.563rem;
  --t-body:1rem;
  --t-small:.875rem;
  --t-mono:.8125rem;
  --t-caption:.75rem;

  --pad-page:24px;
  --pad-section:32px;
  --gap-tight:8px;
  --gap:16px;
  --gap-loose:24px;
}

@media (max-width:767px){:root{--pad-page:16px;--pad-section:20px}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink);color:var(--bone);font-family:var(--font-text);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{font-feature-settings:"ss01","cv11"}
body{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 240px)}

a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--signal);border-bottom-color:var(--signal)}

.mono,code,kbd{font-family:var(--font-mono);font-variant-numeric:tabular-nums slashed-zero}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.caps{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em}
.serif{font-family:var(--font-serif);font-style:italic}

hr{border:0;border-top:1px solid var(--rule);margin:var(--gap) 0}
hr.strong{border-top-color:var(--rule-strong)}

.page{display:flex;flex-direction:column;min-height:100vh;max-width:1440px;margin:0 auto;padding:0 var(--pad-page)}

.masthead{padding:var(--pad-section) 0 var(--gap);border-bottom:1px solid var(--rule)}
.masthead-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap);flex-wrap:wrap}
.masthead-brand{font-family:var(--font-display);font-weight:700;font-size:var(--t-body);letter-spacing:.04em;text-transform:uppercase}
.masthead-brand .mark{color:var(--signal);margin-right:.4em}
.masthead-loc{font-family:var(--font-display);font-size:var(--t-small);color:var(--bone-2);text-transform:uppercase;letter-spacing:.06em}
.masthead-clock{font-family:var(--font-mono);font-size:var(--t-small);color:var(--mute);font-variant-numeric:tabular-nums}
.masthead-dek{margin:var(--gap) 0 0;font-family:var(--font-text);font-size:var(--t-small);color:var(--bone-2);max-width:60ch}

.main{display:grid;grid-template-columns:1fr 380px;gap:var(--pad-section);padding:var(--pad-section) 0;flex:1}
@media (max-width:1023px){.main{grid-template-columns:1fr;gap:var(--gap-loose)}}

.stage{position:relative;min-height:520px;border:1px solid var(--rule);background:var(--ink-2);overflow:hidden}
.stage-hint{position:absolute;bottom:12px;right:12px;font-size:.6875rem;letter-spacing:.12em;color:var(--mute);background:rgba(12,13,14,.72);padding:6px 10px;border:1px solid var(--rule);text-transform:uppercase;pointer-events:none;z-index:3;backdrop-filter:blur(2px)}
.stage-legend{position:absolute;top:12px;left:12px;display:flex;gap:14px;align-items:center;font-family:var(--font-display);font-size:var(--t-caption);color:var(--bone-2);background:rgba(12,13,14,.72);padding:6px 10px;border:1px solid var(--rule);pointer-events:none;z-index:3;backdrop-filter:blur(2px)}
.stage-legend .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px}
.stage-legend .dot-server{background:var(--signal);box-shadow:0 0 0 1px var(--signal-soft)}
.stage-legend .dot-attack{background:var(--alarm);box-shadow:0 0 0 1px #6b1a10}
@media (max-width:767px){.stage{min-height:50vh}}
#globe-canvas,#map-2d{position:absolute;inset:0;width:100%;height:100%;display:block}
#globe-canvas{pointer-events:auto;cursor:grab;touch-action:none;z-index:1}
#globe-canvas:active{cursor:grabbing}
#map-2d[hidden]{display:none!important}

.feed{display:flex;flex-direction:column;gap:0;border:1px solid var(--rule);background:var(--ink-2);max-height:720px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.feed::-webkit-scrollbar{width:6px}
.feed::-webkit-scrollbar-thumb{background:var(--rule-strong)}
.feed-head{padding:var(--gap) var(--gap-loose);border-bottom:1px solid var(--rule);display:flex;align-items:baseline;justify-content:space-between;position:sticky;top:0;background:var(--ink-2);z-index:1}
.feed-head .label{font-family:var(--font-display);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.feed-head .pulse{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 var(--signal);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,146,54,.5)}80%,100%{box-shadow:0 0 0 8px rgba(200,146,54,0)}}

.row{padding:var(--gap) var(--gap-loose);border-bottom:1px solid var(--rule);position:relative;transition:background .15s ease}
.row:hover{background:var(--ink-3)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .15s ease}
.row:hover::before,.row.fresh::before{background:var(--signal)}
.row.fresh{animation:rowin .4s cubic-bezier(.2,.7,.3,1)}
@keyframes rowin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.row-meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap);font-family:var(--font-mono);font-size:var(--t-caption);color:var(--mute);margin-bottom:6px}
.row-ago{color:var(--mute)}
.row-id{display:flex;gap:10px;align-items:baseline;margin-bottom:4px}
.row-ip{font-family:var(--font-mono);font-size:var(--t-mono);color:var(--bone)}
.row-geo{font-family:var(--font-display);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--bone-2)}
.row-headline{font-family:var(--font-text);font-size:var(--t-body);color:var(--bone);margin:6px 0 4px}
.row-payload{font-family:var(--font-mono);font-size:var(--t-mono);color:var(--mute);margin:0 0 var(--gap-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-payload .red{color:var(--bone-2)}
.row-stage{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.row-stage .bars{font-family:var(--font-mono);letter-spacing:1px}
.row-stage .bars .on{color:var(--signal)}
.row-stage.alarm .bars .on{color:var(--alarm)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:var(--pad-section) 0 0}
@media (max-width:767px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:var(--gap-loose);border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.stat:last-child{border-right:0}
@media (max-width:767px){.stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--rule)}}
.stat-label{font-family:var(--font-display);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.stat-value{font-family:var(--font-display);font-size:var(--t-h1);font-weight:600;color:var(--bone);font-variant-numeric:tabular-nums;line-height:1}
.stat-sub{font-family:var(--font-text);font-size:var(--t-small);color:var(--mute)}

.colophon{padding:var(--pad-section) 0;display:flex;flex-direction:column;gap:var(--gap)}
.pull-quote{font-family:var(--font-serif);font-size:1.25rem;line-height:1.45;color:var(--bone-2);max-width:48ch;margin:0;padding-left:var(--gap-loose);border-left:2px solid var(--rule-strong)}
.pull-quote cite{display:block;margin-top:8px;font-style:normal;font-family:var(--font-display);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}

.foot{padding:var(--gap-loose) 0;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--gap);font-family:var(--font-mono);font-size:var(--t-caption);color:var(--mute)}
.foot a{color:var(--mute);border-bottom-color:var(--rule)}
.foot a:hover{color:var(--bone);border-bottom-color:var(--bone-2)}

.skel{background:linear-gradient(90deg,var(--ink-2) 0%,var(--ink-3) 50%,var(--ink-2) 100%);background-size:200% 100%;animation:shimmer 1.6s linear infinite;color:transparent;border-radius:1px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

.idle .stage,.idle .feed{opacity:.7;transition:opacity 1s ease}
.idle .stage{transform:scale(.98);transform-origin:center;transition:opacity 1s ease,transform 1s ease}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .pulse{animation:none}
}

noscript .nojs{margin:24px;padding:var(--pad-section);border:1px solid var(--rule);background:var(--ink-2);color:var(--bone-2);font-family:var(--font-text)}