:root{--ink:#0b1220;--ink-2:#566074;--ink-3:#7a8497;--edge:#cfd6e4;--edge2:#e4e9f2;--void:#ffffff;--card:#f7f9fd;--card2:#edf1f9;--blue:#1a56db;--blue-d:#1444b0;--green:#15803d;--amber:#b45309;--red:#c62828;
  --ff:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void)}
html,body{height:100%;color:var(--ink);font-family:var(--ff);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;overflow:hidden;background:var(--void);height:100vh;height:100dvh;height:var(--vvh,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--void);border-bottom:1px solid var(--edge);font-size:.8rem}
.bar__l,.bar__r{display:flex;align-items:center;gap:10px;min-width:0}
.bar__l img{display:block}
.bar__l b{font-weight:600;letter-spacing:.2em;font-size:.95rem;text-transform:uppercase}
.bar__sep{color:var(--ink-3)}
.bar__target{color:var(--ink-2);font:500 .78rem var(--ff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-size:.74rem;letter-spacing:.04em;white-space:nowrap}
.state i{width:8px;height:8px;background:var(--amber)}
.state.is-live i{background:var(--green)}
.state.is-off i{background:var(--red)}
.btn{font:600 .68rem var(--ff);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;padding:8px 13px;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--card2)}
.btn--end{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--end:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue);padding:13px 18px}
.btn--primary:hover{background:var(--blue-d);border-color:var(--blue-d)}
.stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--void)}
.termwrap{position:relative;flex:1;min-height:0;background:var(--card);border:1px solid var(--edge);padding:14px 8px 16px 16px;overflow:hidden}
.term{position:absolute;inset:14px 8px 16px 16px;overflow:hidden}
.term .xterm-viewport{background:transparent!important;scrollbar-width:thin}
.veil{position:absolute;inset:12px;z-index:5;display:grid;place-items:center;background:rgba(255,255,255,.94);transition:opacity .35s ease,visibility .35s;text-align:center;padding:20px}
.veil.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.veil__box{max-width:440px;display:grid;gap:12px;justify-items:center}
.veil h1{font-size:1.15rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.veil p{color:var(--ink-2);font-size:.88rem;line-height:1.6}
.veil.is-bad h1{color:var(--red)}
.spin{width:24px;height:24px;border:3px solid var(--edge2);border-top-color:var(--blue);border-radius:50%;animation:sp .8s linear infinite}
.veil.is-bad .spin,.veil.is-end .spin{display:none}
@keyframes sp{to{transform:rotate(360deg)}}
.btn--ic{padding:8px 10px;min-width:34px}
.zoom{display:inline-flex;gap:6px}
.keys{flex:none;display:none;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px calc(6px + env(safe-area-inset-bottom))}
.keys::-webkit-scrollbar{display:none}
.keys button{flex:none;min-width:44px;height:40px;padding:0 12px;border:1px solid var(--ink);background:var(--void);color:var(--ink);font:600 .8rem var(--ff);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.keys button:active{background:var(--card2)}
.keys button[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
@media(pointer:coarse),(max-width:760px){.keys{display:flex}}
@media(max-width:760px){
  .bar{padding:8px 10px;gap:8px}
  .bar__l b,.bar__sep,.bar__tag{display:none}
  .bar__target{display:block;max-width:34vw}
  #fs,.zoom{display:none}
  .stage{padding:6px 6px 0;gap:6px}
  .veil{inset:6px 6px 0}
  .termwrap{padding:10px 4px 12px 10px}
  .term{inset:10px 4px 12px 10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.bar__tag{font-style:normal;font-weight:400;font-size:.62rem;letter-spacing:.05em;color:var(--ink-3);margin-top:6px}