:root{
  --bg:#0c0c0c;
  --fg:#d3d7cf;
  --green:#8ae234;
  --blue:#729fcf;
  --dim:#7c8179;
  --amber:#fce94f;
  --red:#ef2929;
  --paper:#eeeeec;
}
*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
html{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Ubuntu Mono','DejaVu Sans Mono',Menlo,Consolas,monospace;
  /* kunci halaman luar: tidak bisa digeser sama sekali, desktop + HP */
  position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;
  display:flex;justify-content:center;padding:0;
  overscroll-behavior:none;touch-action:none;
}
::selection{background:var(--green);color:#000}
.window{
  width:100%;min-width:0;border:none;border-radius:0;overflow:hidden;
  background:var(--bg);
  display:flex;flex-direction:column;height:100%;margin:0;min-height:0;
}
.titlebar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;flex-shrink:0;
  background:#1c1c1c;border-bottom:1px solid #2a2a2a;font-size:12px;color:var(--dim);
}
.dots{display:flex;gap:6px}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#ff5f56}.dot.y{background:#ffbd2e}.dot.g{background:#27c93f}
.titlebar .t{opacity:.8;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen{padding:10px 14px 24px;flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overflow-wrap:anywhere;cursor:text;-webkit-tap-highlight-color:transparent}
.screen::-webkit-scrollbar{width:8px}
.screen::-webkit-scrollbar-track{background:transparent}
.screen::-webkit-scrollbar-thumb{background:#2a2a2a}
pre.banner{margin:0 0 10px;line-height:1.3;font-size:10px;color:var(--green);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-width:100%;overflow-x:hidden}
.line{margin:0;min-height:1.3em;word-break:break-word;overflow-wrap:anywhere;line-height:1.3;font-size:16px}
.dim{color:var(--dim)}
.amber{color:var(--amber)}
.white{color:var(--paper)}
.g{color:var(--green)} .b{color:var(--blue)} .bd{font-weight:700}
/* class tambahan untuk boot ala tty (w/y/ok) dan prompt lama */
.w{color:#fff} .y{color:var(--amber)}
.ok{color:var(--green);font-weight:700}
.prompt{color:var(--green)} .prompt b{color:#fff}
a.link{color:var(--green);text-decoration:underline;text-underline-offset:3px}
a.link:hover{background:var(--green);color:#000;text-decoration:none}
.input-line{display:flex;gap:8px;align-items:center;margin-top:8px;min-width:0}
#cmd{
  flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--paper);
  font:inherit;font-size:16px;caret-color:var(--green); /* 16px biar iOS tidak auto-zoom */
}
.footer{padding:8px;text-align:center;font-size:11px;color:var(--dim);flex-shrink:0;border-top:1px solid #2a2a2a}
.load-bar{color:var(--dim);letter-spacing:1px}
.load-bar b{color:var(--green)}
/* HP: hemat ruang vertikal, cegah geser horizontal */
@media(max-width:520px){
  body{padding:0}
  .screen{padding:10px 10px 16px}
  .line{font-size:15px}
  pre.banner{font-size:8px}
  .footer{display:none} /* sembunyikan footer di HP pendek biar fit */
}
@media(max-height:600px){ .footer{display:none} pre.banner{font-size:8px;margin-bottom:6px} }
@media (prefers-reduced-motion:reduce){ *{animation:none} }