:root{--ivory:#f6f2e7;--green:#14382b;--sage:#9db49a;--lime:#c8e05a;--ink:#10231b}
*{box-sizing:border-box}body{margin:0;background:var(--ivory);color:var(--ink);font:18px/1.45 system-ui,-apple-system,sans-serif}
header{background:var(--green);color:var(--ivory);padding:12px 16px}h1{margin:0;font-size:22px}h1 sup{color:var(--lime);font-size:.6em}h1 span{font-weight:400;opacity:.8;font-size:.7em}
header p{margin:4px 0 0;font-size:11px;opacity:.7;word-break:break-all}
main{padding:12px 16px;display:grid;gap:12px;max-width:600px}
.card{background:#fff;border:2px solid var(--sage);border-radius:12px;padding:12px}.card:focus,button:focus,input:focus{outline:3px solid var(--lime)}
.k{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--green)}
#pageText{font-size:22px;min-height:3.5em}button{background:var(--green);color:var(--ivory);border:0;border-radius:8px;padding:10px 14px;font-size:16px}
input{width:100%;font-size:18px;padding:10px;border:2px solid var(--sage);border-radius:8px}ol{margin:0;padding-left:20px;font:14px ui-monospace,monospace;max-height:9em;overflow:auto}
footer{padding:12px 16px;font-size:12px;color:#4b5e55}
@media (prefers-color-scheme:dark){body{background:#0b1a14;color:#e8efe9}.card{background:#12271e}#pageText{color:#fff}}