:root{color-scheme:dark;font:16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:#101114;color:#f4f4f6;--lime:#d9ff71;--line:#33363d}
*{box-sizing:border-box}
body{margin:0}
main{max-width:690px;margin:auto;min-height:100dvh;display:flex;flex-direction:column;gap:14px;padding:calc(16px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
header,.brand,nav,.field,.keys,#actions{display:flex;align-items:center;gap:8px}
header{justify-content:space-between}
.brand{gap:12px}
.mark{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:var(--lime);color:#161b0a;font-size:25px;font-weight:900}
h1{margin:0;font-size:20px;letter-spacing:.15em}
.subtitle,p{color:#abb0bc;font-size:13px}
#status{font-size:13px;color:var(--lime);text-align:right;max-width:55%}
button,input,textarea{font:inherit;border-radius:12px;border:1px solid var(--line);background:#212329;color:inherit;min-height:44px;padding:8px 11px}
button{cursor:pointer;touch-action:manipulation;font-size:14px}
button:disabled{opacity:.48}
button[aria-pressed="true"],form button,#send{background:var(--lime);color:#181d0d;border-color:transparent;font-weight:650}
nav button,#actions button{flex:1}
#layout{display:grid;flex:1;gap:10px;grid-template-columns:minmax(0,1fr)}
.full{grid-template-areas:"pad" "actions" "desk";grid-template-rows:minmax(220px,1fr) auto auto}
.top{grid-template-areas:"pad" "actions" "desk";grid-template-rows:130px auto 1fr}
.bottom{grid-template-areas:"desk" "actions" "pad";grid-template-rows:1fr auto 130px}
#pad{grid-area:pad;touch-action:none;user-select:none;-webkit-user-select:none;display:grid;place-content:center;justify-items:center;gap:10px;border:1px solid #3a3f3e;border-radius:24px;background:radial-gradient(ellipse at top,#2c3528,transparent 72%),radial-gradient(#4b514b 1px,transparent 1px) 0 0/17px 17px,#1b1e22;color:#c4ccb9;font-size:11px;letter-spacing:.23em}
#pad[aria-disabled="true"]{opacity:.67}
.cross{display:grid;place-items:center;border:1px solid #606d53;border-radius:100%;width:44px;height:44px;font-size:23px;color:var(--lime);letter-spacing:0}
#actions{grid-area:actions}
#desk{grid-area:desk}
label{display:block;font-weight:650;margin-bottom:7px}
input,textarea{width:100%;min-width:0}
p{margin:8px 0;line-height:1.45}
#typing{padding:10px;border:1px solid var(--line);border-radius:14px;background:#191b20}
.keys{flex-wrap:wrap;margin-top:6px}
[hidden]{display:none!important}