:root {
  --bg:#06080f; --panel:#0d1322; --panel2:#111a2e; --line:#1d2a44; --txt:#e6ecf7;
  --mut:#7e8aa3; --accent:#3b82f6; --accent2:#8b5cf6; --ok:#10b981; --run:#f59e0b; --fail:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 700px at 70% -10%,#11203f 0%,var(--bg) 60%);
  color:var(--txt);font:15px/1.5 "Inter",system-ui,-apple-system,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}
.hidden{display:none !important}

.topbar{display:flex;align-items:center;gap:18px;padding:14px 26px;border-bottom:1px solid var(--line);
  background:rgba(8,12,22,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.brand{font-weight:800;font-size:19px}
.brand span{background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--mut);font-size:13px}
.lib-link{margin-left:auto;color:var(--mut);font-weight:600;border:1px solid var(--line);padding:7px 14px;border-radius:9px}

.view{padding:26px 30px;max-width:1280px;margin:0 auto}
.page-title{font-size:30px;font-weight:900;margin:6px 0 2px}
.sub{color:var(--mut);margin:0 0 22px}
.empty{color:var(--mut);padding:50px;text-align:center}

/* live hero on the library page */
.live-hero{background:linear-gradient(180deg,#0c1426,#080c16);border:1px solid #2a3b5e;
  border-radius:18px;padding:16px 18px 6px;margin-bottom:26px;
  box-shadow:0 0 50px rgba(59,130,246,.18)}
.live-hero-head{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px}
.live-hero-head .open-full{margin-left:auto;font-size:13px;color:var(--accent);font-weight:700}
.live-hero .office{height:520px;transform:perspective(1500px) rotateX(51deg) rotateZ(-45deg) scale(.78);margin:0 auto 8px}
.live-hero .now{margin-top:4px}

/* library grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:pointer;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card .thumb{aspect-ratio:16/9;background:#0a0f1c center/cover no-repeat;position:relative;display:flex;
  align-items:center;justify-content:center;color:#33405c;font-size:40px}
.card .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700}
.card .live-dot{position:absolute;left:8px;top:8px;background:var(--fail);color:#fff;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:800;animation:blink 1.1s infinite}
.card .body{padding:13px 14px}
.card .t{font-weight:700;font-size:15px;line-height:1.3;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{color:var(--mut);font-size:12px;margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:11px;font-weight:600;color:#9fb3d8;background:#15203a;border:1px solid var(--line);padding:2px 9px;border-radius:999px}
@keyframes blink{50%{opacity:.4}}

/* run header */
.run-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.back{color:var(--mut);font-weight:600}
.live{background:var(--fail);color:#fff;font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px;animation:blink 1.1s infinite}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{background:transparent;color:var(--mut);border:1px solid var(--line);padding:9px 18px;border-radius:10px;cursor:pointer;font-weight:700}
.tabs button.active{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent2));border:none}
.tab{display:none}.tab.active{display:block}

/* studio / watch */
.now{text-align:center;font-weight:800;font-size:18px;color:var(--accent);margin-bottom:8px;min-height:24px}
.office{position:relative;width:920px;max-width:100%;height:600px;margin:10px auto;
  transform:perspective(1500px) rotateX(51deg) rotateZ(-45deg) scale(.9);transform-style:preserve-3d;
  background:linear-gradient(135deg,#0b1326,#070b16);border:1px solid var(--line);border-radius:24px}
.room{position:absolute;width:196px;height:150px;border-radius:14px;background:#0b1120;border:2px solid #243a5e;transition:all .4s;color:var(--accent)}
.room .scr{position:absolute;left:30px;top:24px;width:112px;height:62px;border-radius:6px;background:#16203a;opacity:.4;transition:all .4s}
.room .agent{position:absolute;right:24px;bottom:26px;font-size:34px;filter:grayscale(.7) opacity(.5);transition:all .4s}
.room .lbl{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-weight:800;font-size:15px;color:#fff;opacity:.5}
.room.active{box-shadow:0 0 26px rgba(59,130,246,.30)}
.room.active .scr{opacity:1}.room.active .agent{filter:none;opacity:1}
.room.current{box-shadow:0 0 60px currentColor;border-color:currentColor}
.room.current .scr{animation:flick .7s infinite}
.room.current .agent{animation:bob .9s infinite}
.room.done .lbl{opacity:1}
.room .bar{position:absolute;left:30px;bottom:50px;height:6px;width:112px;background:#16203a;border-radius:3px;overflow:hidden;opacity:0;transition:opacity .3s}
.room.current .bar{opacity:1}
.room .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
@keyframes flick{50%{opacity:.55}}
@keyframes bob{50%{transform:translateY(-6px)}}
.flyer{position:absolute;font-size:24px;z-index:5;pointer-events:none;transition:all 1.1s cubic-bezier(.5,0,.3,1)}
.ticker{text-align:center;color:var(--mut);font-family:ui-monospace,Menlo,monospace;font-size:13px;margin-top:14px;min-height:20px}
.tape{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) scale(0);background:#fff;color:#06080f;font-weight:900;font-size:22px;padding:14px 30px;border-radius:14px;box-shadow:0 10px 60px rgba(255,255,255,.3);transition:transform .5s cubic-bezier(.2,1.4,.4,1);z-index:30}
.tape.show{transform:translateX(-50%) scale(1)}

/* ops */
.timeline{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.stagechip{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:600}
.stagechip .pip{width:9px;height:9px;border-radius:50%;background:#46506b}
.stagechip.done .pip{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.stagechip.running{border-color:var(--run)}.stagechip.running .pip{background:var(--run);animation:blink 1s infinite}
.stagechip.failed .pip{background:var(--fail)}.stagechip.skipped{opacity:.45}
.ops-grid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.panel h3{margin:0 0 12px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:1px}
.dots{display:flex;gap:8px;margin-bottom:14px}
.dots .dot{width:26px;height:26px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
.dots .dot.on{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 14px var(--accent)}
.stagelist .row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px dashed #18233c}
.s-done{color:var(--ok)}.s-running{color:var(--run)}.s-failed{color:var(--fail)}.s-pending{color:var(--mut)}.s-skipped{color:#5a6b86}
.eventlog{height:440px;overflow-y:auto;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.7}
.eventlog .ev .t{color:#4d5b7a}.eventlog .ev .st{color:var(--accent2);display:inline-block;min-width:120px}
.eventlog .ev.error .e{color:var(--fail)}.eventlog .ev.warn .e{color:var(--run)}

/* video */
.videowrap video{width:100%;max-width:1000px;border-radius:14px;border:1px solid var(--line);background:#000;display:block;margin:0 auto}
.videowrap .empty{color:var(--mut);text-align:center;padding:60px}
.doc{max-width:1000px;margin:18px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;white-space:pre-wrap;font-size:14px;color:#cdd7ea}