*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;overflow:hidden;overscroll-behavior:none}
body{
  color:#0f0;
  font:15px/1.35 ui-monospace,Menlo,"SF Mono",Consolas,monospace;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
}
#screen{
  position:fixed;left:0;right:0;top:0;
  height:var(--vh,100dvh);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 14px) 72px calc(env(safe-area-inset-left) + 14px);
}
#console{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;text-shadow:0 0 4px rgba(0,255,0,.45)}
#cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (min-width:1000px){body{font-size:17px}}

/* invisible input that summons the iPad keyboard; 16px avoids iOS zoom */
#sink{
  position:fixed;left:0;bottom:0;width:1px;height:1px;
  opacity:0;font-size:16px;border:0;padding:0;resize:none;
  color:transparent;background:transparent;caret-color:transparent;
}

.overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);z-index:20;padding:20px;
}
.box{border:1px solid #0f0;padding:28px 32px;max-width:460px;box-shadow:0 0 24px rgba(0,255,0,.25);background:#000}
.box h1{margin:0 0 10px;font-size:28px;letter-spacing:2px}
.box ul{padding-left:18px;line-height:1.7}
.box button,#bar button{
  font:inherit;color:#0f0;background:#000;border:1px solid #0f0;
  border-radius:6px;cursor:pointer;
}
.box button{width:100%;padding:14px;font-size:18px;margin-top:8px}
.box button:active,#bar button:active,#bar button.on{background:#0f0;color:#000}

.popup{
  position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);
  z-index:15;padding:28px 48px;font-size:clamp(28px,6vw,64px);font-weight:700;
  letter-spacing:4px;text-align:center;white-space:nowrap;
  animation:pulse .9s ease-in-out infinite;
}
.popup[hidden]{display:none}
.granted{color:#0f0;background:#030;border:3px solid #0f0;box-shadow:0 0 40px #0f0}
.denied{color:#f22;background:#300;border:3px solid #f22;box-shadow:0 0 40px #f22}
@keyframes pulse{50%{opacity:.55}}

#bar{
  position:fixed;z-index:10;
  right:calc(env(safe-area-inset-right) + 10px);
  bottom:calc(var(--kb,0px) + env(safe-area-inset-bottom) + 10px);
  display:flex;gap:8px;align-items:center;
  padding:6px;border:1px solid rgba(0,255,0,.35);border-radius:10px;
  background:rgba(0,0,0,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:.55;transition:opacity .2s;
}
#bar:hover,#bar:active,#bar:focus-within{opacity:1}
#bar button{width:44px;height:44px;font-size:20px;line-height:1;touch-action:none}
#bar label{display:flex;align-items:center;gap:4px;font-size:18px;padding:0 4px}
#speed{width:130px;accent-color:#0f0}
#speedVal{min-width:3.5ch;text-align:right;font-size:14px}