:root{--ink:#f6f7f9;--ink-2:rgba(246,247,249,.74);--ink-3:rgba(246,247,249,.52);--edge:rgba(255,255,255,.1);--void:#07080a;--coal:#0c0d10;--ice:#a8dcff;--mint:#74f0c4;--amber:#ffc470;--rose:#ff8f8f;
  --ff:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*{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 14px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--edge);font-size:13.5px}
.bar__l,.bar__r{display:flex;align-items:center;gap:10px;min-width:0}
.bar__l b{font-weight:650;letter-spacing:-.01em}
.bar__sep{color:var(--ink-3)}
.bar__target{color:var(--ink-2);font:500 12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.state i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(255,196,112,.5)}
.state.is-live i{background:var(--mint);animation:ping 2.2s infinite}
.state.is-off i{background:var(--rose);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(116,240,196,.45)}70%,100%{box-shadow:0 0 0 7px rgba(116,240,196,0)}}
.btn{font:600 12.5px var(--ff);color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--edge);border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:rgba(255,255,255,.14)}
.btn--end:hover{background:rgba(255,143,143,.16);border-color:rgba(255,143,143,.4)}
.btn--primary{background:#fff;color:#0a0a0c;border-color:#fff;padding:10px 20px;font-size:14px}
.btn--primary:hover{background:#e8eaee}
.stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 10px 10px;background:radial-gradient(1200px 500px at 70% -10%,rgba(168,220,255,.07),transparent 60%),var(--void)}
.termwrap{position:relative;flex:1;min-height:0;border-radius:14px;background:#0a0b0e;border:1px solid var(--edge);padding:12px 6px 16px 14px;overflow:hidden}
.term{position:absolute;inset:12px 6px 16px 14px;overflow:hidden}
.term .xterm-viewport{background:transparent!important;scrollbar-width:thin}
.veil{position:absolute;inset:10px;z-index:5;display:grid;place-items:center;border-radius:14px;background:rgba(7,8,10,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);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:420px;display:grid;gap:12px;justify-items:center}
.veil h1{font-size:20px;font-weight:650;letter-spacing:-.02em}
.veil p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.veil.is-bad h1{color:var(--rose)}
.spin{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(255,255,255,.14);border-top-color:var(--ice);animation:sp .8s linear infinite}
.veil.is-bad .spin,.veil.is-end .spin{display:none}
@keyframes sp{to{transform:rotate(360deg)}}
.btn--ic{padding:7px 10px;min-width:34px}
.zoom{display:inline-flex;gap:6px}
/* extra keys for phones / tablets (no Esc, Tab, Ctrl or arrows on a touch keyboard) */
.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-radius:10px;border:1px solid var(--edge);background:rgba(255,255,255,.07);color:var(--ink);font:600 14px var(--ff);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.keys button:active{background:rgba(255,255,255,.2)}
.keys button[aria-pressed=true]{background:var(--ice);color:#0a0a0c;border-color:var(--ice)}
@media(pointer:coarse),(max-width:760px){.keys{display:flex}}
@media(max-width:760px){
  .bar{padding:8px 10px;gap:8px}
  .bar__l b,.bar__sep{display:none}
  .bar__target{display:block;max-width:34vw}
  #fs,.zoom{display:none}
  .btn{padding:8px 12px}
  .stage{padding:6px 6px 0;gap:6px}
  .veil{inset:6px 6px 0}
  .termwrap{padding:10px 4px 12px 10px;border-radius:12px}
  .term{inset:10px 4px 12px 10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}