@font-face{font-family:Outfit;src:url(/fonts/Outfit-VariableFont_wght.ttf) format("truetype");font-weight:100 900;font-display:block}
@font-face{font-family:Inter;src:url(/fonts/Inter-VariableFont_opsz-wght.ttf) format("truetype");font-weight:100 900;font-display:block}
:root{
  --midnight:#0F1A26;--navy:#1C2D44;--mint:#5FE7C1;--peri:#A49CDC;--white:#FAFBFC;
  --fs:4.2vw;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--midnight);color:var(--white);overflow:hidden}
body{font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;cursor:default}
body.hide-cursor{cursor:none}

/* background: same system as the 15 materials */
.bg{position:fixed;inset:0;background:radial-gradient(90% 80% at 50% 40%,#132C45 0%,#0F1A26 60%,#0A121C 100%)}
.dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.07) 1.6px,transparent 2.2px);background-size:2.2vw 2.2vw;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,transparent 20%,#000 100%);mask-image:radial-gradient(70% 70% at 50% 50%,transparent 20%,#000 100%)}
.g{position:absolute;border-radius:50%;filter:blur(8vw);opacity:.32}
.g1{left:-8vw;top:40vh;width:42vw;height:42vw;background:#2AF3C8;animation:drift 26s ease-in-out infinite alternate}
.g2{right:-10vw;top:-12vh;width:46vw;height:46vw;background:#7E8CFF;opacity:.26;animation:drift 32s ease-in-out infinite alternate-reverse}
.g3{left:38vw;bottom:-30vh;width:36vw;height:36vw;background:#2AF3C8;opacity:.16;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4vw,-3vh) scale(1.08)}}

/* top bar */
.top{position:fixed;left:4vw;right:4vw;top:4.2vh;display:flex;align-items:center;justify-content:space-between;z-index:2}
.brand{display:flex;align-items:center;gap:1.2vw}
.logo{height:2.6vw}
.bar{width:1px;height:2.6vw;background:rgba(255,255,255,.22)}
.mark{height:2.7vw}
.live{display:flex;align-items:center;gap:.8vw;height:3.2vw;padding:0 1.4vw;border-radius:2vw;font:600 1.1vw/1 Inter;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);opacity:0;transition:opacity .5s}
.live i{width:.75vw;height:.75vw;border-radius:50%;background:var(--mint);box-shadow:0 0 1vw var(--mint);animation:pulse 1.6s ease-in-out infinite}
body.running .live{opacity:1}
body.offline .live i{background:#FFADBE;box-shadow:0 0 1vw #FFADBE;animation:none}
@keyframes pulse{50%{opacity:.35}}

/* stage */
.stage{position:fixed;inset:0;z-index:1}
.standby-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .8s}
.big15{height:34vh;filter:drop-shadow(0 0 4vw rgba(95,231,193,.35))}
body.standby .standby-view{opacity:1}
body.standby .captions{opacity:0}

.captions{position:absolute;left:6vw;right:6vw;top:13vh;bottom:12vh;display:flex;flex-direction:column;justify-content:flex-end;gap:3vh;transition:opacity .6s}
.en{flex:0 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  -webkit-mask-image:linear-gradient(transparent 0,#000 18%);mask-image:linear-gradient(transparent 0,#000 18%)}
.en p{font:700 var(--fs)/1.17 Outfit,sans-serif;letter-spacing:-.015em;text-wrap:pretty}
.en .old{color:rgba(250,251,252,.42)}
.en .cur{color:var(--white)}
.en .tmp{color:rgba(250,251,252,.5)}
.en .cur:last-of-type{color:var(--white)}
.slwrap{flex:none;padding-top:3.4vh;border-top:1px solid rgba(255,255,255,.14)}
.sl{height:calc(var(--fs) * .44 * 1.45 * 3);overflow:hidden;display:flex;align-items:flex-end;
  font:500 calc(var(--fs) * .44)/1.45 Inter,sans-serif;color:rgba(250,251,252,.55)}
.sl .txt{display:block}
.sl .now{font-weight:700;color:rgba(250,251,252,.9)}
body.no-sl .slwrap{display:none}

/* operator panel */
.panel{position:fixed;right:1.6vw;top:1.6vw;bottom:1.6vw;width:min(380px,92vw);z-index:5;overflow:auto;padding:22px;border-radius:22px;
  background:rgba(15,26,38,.92);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;gap:14px;font:500 13px/1.4 Inter}
.panel[hidden]{display:none}
.ph{display:flex;justify-content:space-between;align-items:center}
.ph b{font:700 18px/1 Outfit}
.x{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:.7}
.panel label{display:flex;flex-direction:column;gap:6px;color:rgba(255,255,255,.7)}
.panel input[type=password],.panel select,.panel textarea{font:500 14px/1.4 Inter;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px 11px;outline:none}
.panel input:focus,.panel select:focus,.panel textarea:focus{border-color:var(--mint)}
.panel select option{color:#000}
.panel .chk{flex-direction:row;align-items:center;gap:8px}
.row{display:flex;gap:8px}
.row .btn{flex:1}
.btn{flex:none;height:42px;border-radius:21px;border:0;background:var(--mint);color:var(--navy);font:700 14px/1 Outfit;cursor:pointer}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn.stop{background:#FFADBE}
.meter{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--mint);transition:width .08s}
.status{font:500 12.5px/1.45 Inter;color:rgba(255,255,255,.75);padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);white-space:pre-wrap}
.status.err{color:#FFADBE}
.keys{font-size:11.5px;color:rgba(255,255,255,.5)}
.keys b{color:#fff}