:root{--bg:#121512;--panel:#1b201b;--text:#d8e2d8;--muted:#9aab9a;--accent:#3be26a;--line:#2c352c;
  --g:#3be26a;--w:#f2f5f2;--b:#7d9cff;--t:#4fe0e0;--r:#ff5d5d;--y:#ffe066;--p:#ff7ae0}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 "Segoe UI",system-ui,sans-serif}
a{color:var(--t)}
.top{max-width:1100px;margin:0 auto;padding:18px 16px 8px}
.top h1{margin:0;font-size:22px;color:var(--accent);letter-spacing:.5px}
.top p{margin:4px 0 0;color:var(--muted);font-size:14px}
main{max-width:1100px;margin:0 auto;padding:0 16px}
.bezel{background:#000;border:10px solid #2a2f2a;border-radius:14px;padding:14px 14px 6px;box-shadow:0 10px 40px #000a,inset 0 0 60px #0a200a;overflow:hidden}
/* 24 x 80 grid. 80 columns at about 0.6em each is 48em, so the font size follows the available width. */
.screen{--lh:1.32em;position:relative;width:80ch;height:calc(24 * var(--lh));margin:0 auto;font-family:"Cascadia Mono",Consolas,"Lucida Console","Courier New",monospace;
  font-size:clamp(7px,calc((100vw - 90px) / 49),19px);color:var(--g);outline:none;text-shadow:0 0 4px #3be26a55}
.t{position:absolute;left:calc(var(--c) * 1ch);top:calc(var(--r) * var(--lh));white-space:pre;line-height:var(--lh)}
.green{color:var(--g)}.white{color:var(--w);text-shadow:0 0 4px #ffffff40}.blue{color:var(--b);text-shadow:none}.turquoise{color:var(--t)}.red{color:var(--r)}.yellow{color:var(--y)}.pink{color:var(--p)}
input.f{position:absolute;left:calc(var(--c) * 1ch);top:calc(var(--r) * var(--lh));width:calc(var(--w) * 1ch);height:var(--lh);margin:0;padding:0;border:0;border-bottom:1px solid var(--g);
  background:transparent;color:var(--g);font:inherit;line-height:var(--lh);text-transform:uppercase;caret-color:var(--g);outline:none;text-shadow:inherit;border-radius:0}
input.f:focus{background:#0d2a12}
input.f.pass{text-transform:none;color:transparent;text-shadow:none;caret-color:var(--g)}
input.f.opt{color:var(--w)}
.oia{display:flex;gap:2.5ch;border-top:1px solid #1f6d33;margin-top:8px;padding-top:3px;font:12px "Cascadia Mono",Consolas,monospace;color:var(--b);min-height:20px}
.oia .mw{color:var(--y);font-weight:bold}.oia .pos{margin-left:auto;color:var(--muted)}
.keypad{margin:10px auto 0;display:grid;gap:6px}
.keyrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.keypad button,.tools button,.filebtn{font:600 13px "Segoe UI",system-ui,sans-serif;color:#e8f2e8;cursor:pointer;border:1px solid #3c473c;border-radius:7px;padding:7px 11px;
  background:linear-gradient(#3a443a,#232923);box-shadow:inset 0 1px 0 #ffffff22}
.keypad button:hover,.tools button:hover,.filebtn:hover{background:linear-gradient(#475347,#2b322b)}
.keypad button:active{transform:translateY(1px)}
.keypad .enter{background:linear-gradient(#2f8a4a,#1c5a2f);border-color:#2f8a4a;min-width:80px}
.keyrow.shift button{color:var(--muted)}
.tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.tools .danger{background:linear-gradient(#7a2b2b,#4d1a1a);border-color:#7a2b2b}
.filebtn input{display:none}
.guide{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 18px;margin:8px 0 20px}
.guide h2{font-size:17px;color:var(--accent)}
.guide li{margin:6px 0}
code,kbd{font-family:"Cascadia Mono",Consolas,monospace;font-size:13px;background:#0b0e0b;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--g)}
footer{max-width:1100px;margin:0 auto;padding:12px 16px 26px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;color:var(--muted);font-size:13px}
@media (max-width:640px){.bezel{border-width:6px;padding:8px 6px 4px;border-radius:10px}.keypad button{padding:6px 8px;font-size:12px}}