:root{
  --bg:#020408;--panel:#050b12eF;--panel-hi:#07131ceF;
  --cyan:#16eaff;--cyan-d:#0088bd;--green:#36ff91;--pink:#ff25e6;
  --yellow:#ffd21c;--red:#ff3048;--blue:#38a7ff;--text:#dffcff;--muted:#6d8c95;
  --line:#0bdcff;--grid:rgba(20,190,230,.075);
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);font-family:'Share Tech Mono',monospace;background:#02050a}
body:before{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),url('prototype-bg.png') center top/cover no-repeat;opacity:.68;filter:saturate(.92) contrast(1.05);pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);mix-blend-mode:screen;opacity:.42}
.boot-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#010307;color:var(--cyan);transition:opacity .7s}.boot-screen.done{opacity:0;pointer-events:none}.boot-box{width:min(720px,90vw);padding:34px;border:1px solid var(--cyan);background:#01070cf5;box-shadow:0 0 70px #10eaff1c,inset 0 0 40px #10eaff0c}.boot-title{font:4.4rem/1 'VT323';letter-spacing:2px;text-shadow:0 0 18px var(--cyan)}.boot-sub{color:var(--pink);margin:7px 0 34px}.boot-line{margin-bottom:12px}.progress{height:13px;border:1px solid var(--cyan);padding:2px}.progress span{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 18px var(--cyan);transition:width .1s}.boot-text{margin-top:12px;color:var(--green);min-height:20px}
.site{position:relative;z-index:1;width:min(1536px,97vw);margin:0 auto;padding:12px 0 18px;opacity:0;transition:opacity .8s}.shell-visible{opacity:1}
.panel{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(5,14,22,.94),rgba(2,7,12,.97));border:1px solid #0edcff;box-shadow:0 0 18px #10eaff0d,inset 0 0 30px #10eaff08;clip-path:polygon(0 0,97.7% 0,100% 4.5%,100% 100%,2.1% 100%,0 94%)}
.panel:before{content:"";position:absolute;inset:5px;border:1px solid #10eaff1d;pointer-events:none}.panel:after{content:"";position:absolute;left:9%;right:20%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.62}
.hero{min-height:202px;padding:24px 150px 20px;text-align:center;border-color:#16cfff;background:linear-gradient(90deg,#030a10ee,#07101be0 50%,#030a10ee)}
.hero:before{inset:7px;border-color:#12dfff27}.hero:after{left:19%;right:19%;top:auto;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent);opacity:.85}
.hero-title{font:clamp(4rem,8.2vw,7.7rem)/.76 'VT323';letter-spacing:5px;color:#f1ffff;text-shadow:3px 0 var(--pink),-3px 0 var(--cyan),0 0 32px #10eaff99;margin-top:6px}.welcome{margin-top:13px;color:var(--green);font:2.35rem/1 'VT323';letter-spacing:4px;text-shadow:0 0 12px #36ff9140}.subtitle{margin-top:8px;color:var(--cyan);font-size:13px;line-height:1.4;letter-spacing:.4px}.micro{position:absolute;top:13px;font-size:11px;line-height:1.25;color:var(--cyan);text-align:left}.micro span{color:#71929b}.micro.left{left:18px}.micro.right{right:18px;text-align:left}.glitch{animation:glitch 7s infinite}@keyframes glitch{0%,94%,100%{transform:none}95%{transform:translate(3px,-1px)}96%{transform:translate(-4px,1px)}97%{transform:translate(1px,0)}}
.grid{display:grid;grid-template-columns:1.02fr 1.48fr 1.02fr;gap:9px;margin-top:9px}.left-col,.center-col,.right-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.mascot{height:220px;background:linear-gradient(90deg,#071219ee,#03090ff5),radial-gradient(circle at 19% 53%,#ff69002c,transparent 34%);border-color:#0bdcff}.mascot:before{border-color:#0bdcff2d}
.robot{position:absolute;left:20px;top:25px;width:210px;height:165px;filter:drop-shadow(0 0 11px #36ff9140);transform:rotate(-6deg)}.robot-head{position:absolute;left:20px;top:12px;width:132px;height:104px;border:5px solid #24454e;border-radius:12px 22px 15px 16px;background:linear-gradient(145deg,#2a4952,#071116);box-shadow:inset 0 0 18px #36ff9114,0 0 12px #000}.robot-screen{position:absolute;inset:12px;border:2px solid #1b3941;border-radius:7px;background:#071116;display:grid;place-items:center;color:var(--green);font-size:34px;text-shadow:0 0 14px var(--green)}.robot-eye{position:absolute;left:57px;top:38px;width:54px;height:30px;border:3px solid var(--green);border-radius:50%;box-shadow:0 0 12px var(--green);clip-path:polygon(0 50%,18% 15%,82% 15%,100% 50%,82% 85%,18% 85%)}.robot-arm{position:absolute;width:70px;height:16px;border:5px solid #29434b;border-radius:10px;background:#0b1519}.robot-arm.a{left:4px;top:104px;transform:rotate(35deg)}.robot-arm.b{right:3px;top:114px;transform:rotate(-28deg)}
.speech{position:absolute;right:17px;top:27px;border:1px solid var(--cyan);padding:13px 17px;text-align:center;color:var(--cyan);font-size:18px;line-height:1.02;background:#02090ec7;box-shadow:0 0 14px #10eaff0d}.speech small{color:#718d94}.coffee{position:absolute;left:27px;bottom:16px;color:var(--yellow);font-weight:bold;font-size:17px;line-height:1.02;transform:rotate(-5deg);text-shadow:0 0 8px #ffd21c30}
h2{font-size:15px;letter-spacing:1.4px;margin:0 0 11px;color:var(--cyan)}.status{padding:17px 18px}.status-row{display:flex;align-items:center;gap:9px;min-height:29px;font-size:12px;border-bottom:1px dotted #10eaff1d}.status-row i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px currentColor;flex:0 0 auto}.status-row i.warn{background:var(--yellow)}.status-row i.bad{background:var(--red)}.status-row b{margin-left:auto;font-weight:normal;color:var(--green)}.status-row b.yellow{color:var(--yellow)}.status-row b.red{color:var(--red)}
.activity{padding:17px;min-height:278px;flex:1}.activity h2{margin-bottom:8px}#activityLog{color:var(--green);font-size:11px;line-height:1.75}.cursor{color:var(--green);margin-top:5px}.cursor span{display:inline-block;width:7px;height:14px;background:var(--green);animation:blink .8s steps(1) infinite;vertical-align:-2px}@keyframes blink{50%{opacity:0}}
.motd{min-height:305px;padding:20px 22px;border-color:var(--pink);box-shadow:0 0 25px #ff25e610,inset 0 0 35px #ff25e605}.motd h2{color:var(--pink);font-size:16px}.motd h2:before{content:'⚠ ';}.motd #motdText{font-size:19px;line-height:1.55;color:#ff65ee;white-space:pre-line;padding:13px 10px 4px;text-shadow:0 0 8px #ff25e622}.signature{text-align:right;color:var(--pink);margin-top:9px}
.announcements{padding:18px 19px;min-height:367px}.announcement{display:grid;grid-template-columns:36px 1fr 42px;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid #10eaff18;font-size:11px;line-height:1.35}.announcement .icon{font-size:21px;text-align:center}.announcement .tag{font-size:10px;letter-spacing:1px;color:var(--green);margin-bottom:3px}.announcement:nth-child(2) .tag{color:var(--yellow)}.announcement:nth-child(4) .tag{color:var(--red)}.announcement .time{color:#71939b;text-align:right;font-size:9px}
.threat{padding:17px;min-height:206px}.threat-body{display:flex;gap:18px;align-items:center}.dial{width:134px;height:134px;flex:0 0 134px;border-radius:50%;display:grid;place-items:center;font-size:29px;color:#fff;background:conic-gradient(var(--green) 0 42%,var(--yellow) 42% 67%,var(--red) 67% 70%,#18242b 70% 100%);position:relative;box-shadow:0 0 22px #ffd21c1f}.dial:before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid #ffffff22}.dial:after{content:"";position:absolute;inset:13px;border-radius:50%;background:#061018;border:1px solid #ffffff1f}.dial span{position:relative;z-index:2}.bars{flex:1;display:flex;flex-direction:column;gap:10px;font-size:9px}.bars label{color:var(--cyan)}.bars span{display:block;height:8px;border:1px solid #145765;margin-top:4px;background:linear-gradient(90deg,var(--cyan) 0 62%,transparent 62%)}.bars label:nth-child(2) span{background:linear-gradient(90deg,var(--cyan) 0 35%,transparent 35%)}.bars label:nth-child(3) span{background:linear-gradient(90deg,var(--yellow) 0 88%,transparent 88%)}.bars label:nth-child(4) span{background:linear-gradient(90deg,var(--red) 0 96%,transparent 96%)}
.button-panel{padding:15px 17px 13px;text-align:center;border-color:var(--red);min-height:286px;background:radial-gradient(circle at 50% 57%,#ff233014,transparent 42%),#050b10f5}.button-panel h2{color:var(--red);font-size:21px;margin-bottom:7px}.button-panel:after{background:linear-gradient(90deg,transparent,var(--red),transparent)}#dangerButton{width:145px;height:145px;border-radius:50%;border:7px solid #68121b;background:radial-gradient(circle at 35% 28%,#ff7780,#e51f32 55%,#760812);color:#290207;font:bold 18px 'Share Tech Mono';box-shadow:0 0 32px #ff334859,inset 0 -11px 16px #3c000075;cursor:pointer;transition:.12s}#dangerButton:hover{transform:scale(1.035)}#dangerButton:active{transform:scale(.93)}#buttonMessage{color:#ff5968;font-size:10px;line-height:1.35;margin-top:8px}
.live-feed{min-height:249px;padding:17px;color:var(--green);overflow:hidden}.live-feed h2{color:var(--cyan)}#feed{
  position:absolute;
  left:17px;
  right:17px;
  top:48px;
  bottom:15px;
  overflow:hidden;
  font-size:11px;
  line-height:1.65;
  padding-right:54px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
#feed div{
  flex:0 0 auto;
  animation:feedIn .45s ease-out;
}
@keyframes feedIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}.cat{position:absolute;right:21px;bottom:12px;font-size:46px;color:var(--green);text-shadow:0 0 12px var(--green)}
.footer{margin-top:9px;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;color:var(--yellow);border-color:#806f14;font-size:10px;background:#080b0feF}.footer span{color:#9e8e37}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;z-index:80;padding:13px 18px;border:1px solid var(--yellow);color:var(--yellow);background:#05090d;box-shadow:0 0 25px #ffd21c26;transition:.25s;text-align:center;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1080px){.grid{grid-template-columns:1fr 1fr}.right-col{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.hero{padding-left:100px;padding-right:100px}.footer{gap:20px}}
@media(max-width:720px){.site{width:94vw}.grid{grid-template-columns:1fr}.right-col{grid-column:auto;display:flex}.hero{padding:55px 15px 25px;min-height:235px}.micro{font-size:9px}.hero-title{font-size:4rem}.welcome{font-size:1.8rem}.subtitle{font-size:11px}.robot{left:8px;transform:scale(.82) rotate(-6deg);transform-origin:left top}.speech{right:8px;font-size:13px}.threat-body{flex-direction:column}.footer{flex-direction:column;align-items:flex-start}.motd{min-height:330px}}
.hero-corner{position:absolute;bottom:10px;font-size:8px;letter-spacing:1.4px;color:#50747d;opacity:.85}.hero-corner-left{left:19px}.hero-corner-right{right:19px;color:#6d5f20}

/* Exact artwork panels from the original SYSTEMAI.PARTY prototype. */
.art-panel{background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:0;box-shadow:none;clip-path:none;padding:0;}
.art-panel:before,.art-panel:after{display:none}
.mascot{height:235px;background-image:url('assets/panel-mascot.png');}
.threat{height:245px;background-image:url('assets/panel-threat.png');}
.button-panel{height:245px;min-height:245px;background-image:url('assets/panel-button.png');}
.live-feed{height:242px;min-height:242px;background-image:url('assets/panel-feed.png');}
#dangerButton{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%);width:146px;height:146px;border:0;border-radius:50%;background:transparent;color:transparent;box-shadow:none;cursor:pointer;font-size:0;z-index:3;}
#dangerButton:hover{transform:translate(-50%,-48%) scale(1.035);background:transparent;box-shadow:none}
#dangerButton:active{transform:translate(-50%,-48%) scale(.93);}
.button-panel.pressed{filter:brightness(1.08) saturate(1.12);}
@media(max-width:720px){.mascot{height:210px}.threat,.button-panel{height:220px;min-height:220px}.live-feed{height:220px;min-height:220px}#dangerButton{width:125px;height:125px}}
.announcement-new{animation:announcementIn .65s ease-out}.toast[data-type="achievement"]{border-color:var(--green);color:var(--green);box-shadow:0 0 30px #36ff9130}@keyframes announcementIn{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}


/* ============================================================
   KNOWN-GOOD INTERACTIVE PANELS
   ============================================================ */

/* Functional Live System Feed */
.live-feed{
  height:auto;
  min-height:249px;
  padding:17px;
  color:var(--green);
  overflow:hidden;
  background-image:none;
}

.live-feed h2{
  color:var(--cyan);
}

#feed{
  position:static;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  overflow:visible;
  font-size:11px;
  line-height:1.65;
  padding-right:54px;
  display:block;
  flex-direction:initial;
  justify-content:initial;
}

#feed div{
  flex:none;
  animation:none;
}

.cat{
  position:absolute;
  right:21px;
  bottom:12px;
  font-size:46px;
  color:var(--green);
  text-shadow:0 0 12px var(--green);
}

/* Known-good visible DO NOT PRESS button */
.button-panel{
  padding:15px 17px 13px;
  text-align:center;
  border-color:var(--red);
  min-height:286px;
  height:auto;
  background:
    radial-gradient(circle at 50% 57%,#ff233014,transparent 42%),
    #050b10f5;
}

.button-panel h2{
  color:var(--red);
  font-size:21px;
  margin-bottom:7px;
}

.button-panel:after{
  background:linear-gradient(90deg,transparent,var(--red),transparent);
}

#dangerButton{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  width:145px;
  height:145px;
  border-radius:50%;
  border:7px solid #68121b;
  background:
    radial-gradient(circle at 35% 28%,#ff7780,#e51f32 55%,#760812);
  color:#290207;
  font:bold 18px 'Share Tech Mono';
  box-shadow:
    0 0 32px #ff334859,
    inset 0 -11px 16px #3c000075;
  cursor:pointer;
  transition:.12s;
  z-index:3;
}

#dangerButton:hover{
  transform:scale(1.035);
}

#dangerButton:active{
  transform:scale(.93);
}

#buttonMessage{
  color:#ff5968;
  font-size:10px;
  line-height:1.35;
  margin-top:8px;
}

.button-panel.pressed{
  filter:brightness(1.08) saturate(1.12);
}

@media(max-width:720px){
  .live-feed{
    height:auto;
    min-height:249px;
  }

  .button-panel{
    height:auto;
    min-height:286px;
  }

  #dangerButton{
    width:125px;
    height:125px;
  }
}