*{box-sizing:border-box}html,body{margin:0;width:600px;height:600px;overflow:hidden;background:#000;color:#fff;font:600 26px system-ui,sans-serif}
.screen{display:none;width:600px;height:600px;padding:24px;flex-direction:column;gap:14px;overflow-y:auto}
.screen.on{display:flex}#home{overflow:hidden}
h1{margin:0;font-size:30px;color:#7cf;text-align:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1}
.btn{display:flex;align-items:center;justify-content:center;min-height:88px;padding:8px;border:3px solid #7cf;border-radius:18px;background:#000;color:#fff;font:inherit;text-decoration:none;text-align:center;cursor:pointer}
.grid .btn{min-height:0}
.btn.back{min-height:64px;border-color:#888}
.btn:focus,input:focus{outline:5px solid #ff0;outline-offset:3px;background:#113}
input{width:100%;font:inherit;padding:14px;background:#000;color:#fff;border:3px solid #fff;border-radius:14px;margin-bottom:12px}
#list{display:flex;flex-direction:column;gap:10px}.row{display:flex;gap:10px}.row .btn{min-height:64px}.row .open{flex:1}.row .del{width:110px;border-color:#f66}
#msg{margin:0;color:#ff0;min-height:1em;font-size:20px}