:root{--bg:#030503;--panel:#060a06;--green:#23ff6b;--green-dim:#14622f;--green-hi:#a9ffcb;--red:#ff2b2b;--amber:#ffcf4d;--border:#123a1c}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--green);font-family:'Share Tech Mono',monospace}
body{min-height:100vh;background-image:repeating-linear-gradient(0deg,rgba(35,255,107,.035) 0,rgba(35,255,107,.035) 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at 50% -10%,rgba(35,255,107,.08),transparent 55%)}
.display{font-family:'Oxanium',sans-serif}
.wrap{max-width:1240px;margin:0 auto;padding:18px 16px 50px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:12px}
h1{font-family:'Oxanium',sans-serif;font-size:clamp(1.3rem,3.6vw,2rem);letter-spacing:.14em;margin:0;color:var(--green-hi)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs a{font-family:'Oxanium',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-decoration:none;color:var(--green);border:1px solid var(--green-dim);padding:6px 12px;border-radius:3px}
.tabs a.on{background:var(--green);color:#021;border-color:var(--green)}
.tabs a:hover{border-color:var(--green)}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.06em;color:var(--green-hi)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.status.off{color:#ff9a9a}.status.off .dot{background:var(--red);box-shadow:0 0 8px var(--red)}
.status.wait{color:var(--amber)}.status.wait .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.scroller{overflow-x:auto;border:1px solid var(--border);box-shadow:0 0 24px rgba(35,255,107,.08);background:var(--panel)}
.stage{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;min-width:0}
.stage img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.lbl{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:#fff;background:rgba(8,17,37,.82);border-radius:.45em;padding:.2em .6em;font-size:clamp(9px,2.1cqw,26px);line-height:1.25;font-family:'Share Tech Mono',monospace;box-shadow:0 0 0 1px rgba(35,255,107,.25)}
.lbl b{font-weight:400;color:var(--green-hi)}
.off .lbl,.lbl.na{color:#9aa}
.ap{position:absolute;transform:translate(-50%,-50%);width:clamp(18px,3.3cqw,40px);height:clamp(18px,3.3cqw,40px);border-radius:50%;background:rgba(8,17,37,.82);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:clamp(9px,1.6cqw,18px)}
.ap.down{border-color:var(--red);color:var(--red)}.ap.na{border-color:#667;color:#667}
.ap svg{width:62%;height:62%}
.note{font-size:.72rem;color:#5fbf85;margin-top:10px;letter-spacing:.04em}
.hint{display:none;font-size:.72rem;color:var(--amber);margin:6px 0 0}
.nav{margin:16px 0 0;font-size:.8rem}.nav a{color:var(--green);margin-right:16px}
@media (max-width:640px){.stage{min-width:600px}.hint{display:block}.status{margin-left:0;width:100%}}