:root{
  --bg:#0b0a0c;--panel:#15131a;--line:#2a2630;--text:#e9e4ee;--muted:#8f8798;
  --ok:#2ecc71;--down:#e83434;--unknown:#8f8798;--fire:#ff6a00;--fire2:#ffb400;--fire3:#ff2d00;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;overflow-x:hidden}
a{color:inherit}
body{position:relative;min-height:100vh}

.top{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--line);position:relative;z-index:3}
.brand{font-weight:700;letter-spacing:.08em;font-size:17px}
.dim{color:var(--muted);font-weight:400}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(232,52,52,.12);border:1px solid rgba(232,52,52,.45);color:var(--down);padding:6px 12px;border-radius:999px;font-weight:600;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--down);box-shadow:0 0 0 0 rgba(232,52,52,.6);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,52,52,.6)}70%{box-shadow:0 0 0 10px rgba(232,52,52,0)}100%{box-shadow:0 0 0 0 rgba(232,52,52,0)}}

main{max-width:860px;margin:0 auto;padding:30px 20px 60px;position:relative;z-index:3}
.hero{text-align:center;padding:10px 0 20px}
h1{font-size:46px;margin:14px 0 4px;letter-spacing:-.02em}
.sub{color:var(--muted);margin:0 0 10px}
#uptime{font-variant-numeric:tabular-nums;color:var(--text)}
h2{font-size:16px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:34px 0 12px}

/* hero photo + live overlays */
.photo{position:relative;width:min(1024px,100%);aspect-ratio:1024/682;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);isolation:isolate}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo>*{position:absolute}
.photo img{position:static}

.fire-zone{left:13%;top:16%;width:36%;height:40%;pointer-events:none}
.glow{position:absolute;left:-40%;top:-30%;width:180%;height:170%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,140,30,.55) 0%,rgba(255,80,0,.25) 35%,rgba(255,40,0,0) 70%);
  animation:glow .9s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.06)}}

.flames{position:absolute;left:0;right:0;bottom:12%;height:100%;filter:blur(2px);mix-blend-mode:screen}
.flame{position:absolute;bottom:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform-origin:bottom center;opacity:.85;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,240,170,.95) 0%,rgba(255,170,40,.9) 35%,rgba(255,90,0,.7) 65%,rgba(255,0,0,0) 100%);
  animation:flicker .8s ease-in-out infinite alternate}
.f1{left:8%;width:22%;height:60%;animation-duration:.72s}
.f2{left:22%;width:28%;height:85%;animation-duration:.95s;animation-delay:-.3s}
.f3{left:40%;width:26%;height:95%;animation-duration:.85s;animation-delay:-.6s}
.f4{left:58%;width:24%;height:75%;animation-duration:.78s;animation-delay:-.15s}
.f5{left:74%;width:18%;height:50%;animation-duration:.66s;animation-delay:-.45s}
.f6{left:30%;width:14%;height:70%;animation-duration:.6s;animation-delay:-.2s;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,230,.9) 0%,rgba(255,220,120,.8) 45%,rgba(255,180,0,0) 100%)}
.f7{left:50%;width:14%;height:80%;animation-duration:.55s;animation-delay:-.5s;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,230,.9) 0%,rgba(255,220,120,.8) 45%,rgba(255,180,0,0) 100%)}
@keyframes flicker{
  0%{transform:scaleY(1) scaleX(1) skewX(0deg);opacity:.75}
  30%{transform:scaleY(1.12) scaleX(.92) skewX(4deg)}
  55%{transform:scaleY(.9) scaleX(1.06) skewX(-5deg);opacity:.95}
  80%{transform:scaleY(1.18) scaleX(.88) skewX(3deg)}
  100%{transform:scaleY(.96) scaleX(1.02) skewX(-2deg);opacity:.7}}

/* heat shimmer: a copy of the photo, displaced by animated turbulence, masked to above the fire */
.haze{left:0;top:0;width:100%;height:100%;background:url(hero.jpg) center/100% 100% no-repeat;filter:url(#heat);
  -webkit-mask:radial-gradient(ellipse 20% 30% at 31% 22%,#000 30%,transparent 100%);mask:radial-gradient(ellipse 20% 30% at 31% 22%,#000 30%,transparent 100%);opacity:.9;pointer-events:none}
/* smoke column */
.smoke-col{left:18%;top:-10%;width:30%;height:45%;pointer-events:none;mix-blend-mode:multiply}
.puff{position:absolute;bottom:0;left:40%;width:34%;aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(40,36,44,.55) 0%,rgba(40,36,44,.25) 45%,rgba(40,36,44,0) 70%);animation:puff 7s linear infinite}
.p1{animation-delay:0s}.p2{animation-delay:.9s;left:30%}.p3{animation-delay:1.8s;left:50%}.p4{animation-delay:2.7s;left:36%}
.p5{animation-delay:3.6s;left:46%}.p6{animation-delay:4.5s;left:28%}.p7{animation-delay:5.4s;left:52%}.p8{animation-delay:6.3s;left:40%}
@keyframes puff{0%{transform:translate(0,0) scale(.5);opacity:0}12%{opacity:.75}100%{transform:translate(70%,-240%) scale(2.6);opacity:0}}

.embers-photo{inset:0;pointer-events:none;mix-blend-mode:screen}
.embers-photo .ember{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffd27a;box-shadow:0 0 6px 2px rgba(255,150,0,.9);animation:ember2 linear infinite}
@keyframes ember2{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}

/* wet pavement reflection */
.reflection{left:8%;top:62%;width:50%;height:40%;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(ellipse at 45% 10%,rgba(255,130,30,.45) 0%,rgba(255,80,0,.15) 35%,rgba(0,0,0,0) 65%);
  animation:glow 1.1s ease-in-out infinite alternate}
.vignette{inset:0;pointer-events:none;background:radial-gradient(ellipse at 35% 40%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}

.live{top:14px;left:14px;display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.6);color:#fff;font-weight:800;font-size:12px;letter-spacing:.14em;padding:6px 10px;border-radius:6px;backdrop-filter:blur(4px)}
.rec{width:9px;height:9px;border-radius:50%;background:#ff2d2d;box-shadow:0 0 8px #ff2d2d;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.caption{right:14px;bottom:12px;background:rgba(0,0,0,.55);color:#ddd;font-size:12px;padding:5px 9px;border-radius:6px;backdrop-filter:blur(4px)}

/* smoke */
.smoke-layer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.smoke{position:absolute;bottom:35%;left:50%;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(120,110,130,.35),rgba(60,55,70,0) 70%);opacity:0;animation:rise 9s linear infinite}
.s1{animation-delay:0s;margin-left:-120px}.s2{animation-delay:1.5s;margin-left:-40px}.s3{animation-delay:3s;margin-left:40px}
.s4{animation-delay:4.5s;margin-left:-80px}.s5{animation-delay:6s;margin-left:10px}.s6{animation-delay:7.5s;margin-left:-20px}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.55}100%{transform:translateY(-110vh) translateX(60px) scale(2.4);opacity:0}}

/* embers */
.embers{position:fixed;inset:0;pointer-events:none;z-index:2}
.ember{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--fire2);box-shadow:0 0 6px 2px rgba(255,150,0,.8);animation:ember linear infinite}
@keyframes ember{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),-70vh) scale(.2);opacity:0}}

/* components */
.components{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.row{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.state{font-weight:600;font-size:13px}
.state.ok{color:var(--ok)}
.state.down{color:var(--down)}
.state.unknown{color:var(--unknown);font-style:italic}
.sub.small{font-size:13px;margin-top:-4px}
.text a{color:#ffb466;text-decoration:none;border-bottom:1px solid rgba(255,180,102,.35)}
.text a:hover{border-bottom-color:#ffb466}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:7px 12px;font-size:13px;color:var(--text);text-decoration:none}
.links a:hover{border-color:var(--fire);color:#ffb466}
.state.fire{color:var(--fire);animation:burn .5s ease-in-out infinite alternate}
@keyframes burn{from{text-shadow:0 0 4px rgba(255,106,0,.6)}to{text-shadow:0 0 14px rgba(255,180,0,.95)}}

.incident{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.incident:last-child{border-bottom:0}
.date{color:var(--muted);font-size:13px;padding-top:2px}

.bars{display:flex;gap:3px;height:34px}
.bar{flex:1;border-radius:2px;background:var(--down);opacity:.85}
.bar.unknown{background:#3a3542}
.bar.fire{background:linear-gradient(180deg,var(--fire2),var(--fire3));animation:burn .6s ease-in-out infinite alternate}
.legend{display:flex;gap:18px;color:var(--muted);font-size:13px;margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend i.down{background:var(--down)}.legend i.unknown{background:#3a3542}.legend i.fire{background:var(--fire)}

footer{text-align:center;color:var(--muted);font-size:13px;padding:20px;border-top:1px solid var(--line);position:relative;z-index:3}

@media (max-width:480px){h1{font-size:34px}.photo{border-radius:8px}.top{padding:14px 16px}.incident{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important}}

/* title glitch */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;clip-path:inset(0 0 0 0);opacity:0}
.glitch::before{color:#ff6a00;animation:glitchA 6s infinite}
.glitch::after{color:#4fd1ff;animation:glitchB 6s infinite}
@keyframes glitchA{0%,88%,100%{opacity:0;transform:none}89%{opacity:.9;transform:translate(-3px,1px);clip-path:inset(10% 0 55% 0)}91%{transform:translate(3px,-1px);clip-path:inset(60% 0 10% 0)}93%{opacity:.9;transform:translate(-2px,0);clip-path:inset(30% 0 40% 0)}95%{opacity:0}}
@keyframes glitchB{0%,88%,100%{opacity:0;transform:none}90%{opacity:.8;transform:translate(3px,-1px);clip-path:inset(55% 0 20% 0)}92%{transform:translate(-3px,1px);clip-path:inset(5% 0 70% 0)}94%{opacity:.8;transform:translate(2px,0);clip-path:inset(40% 0 35% 0)}96%{opacity:0}}
.hero h1{margin-top:26px}