:root{color-scheme:light dark;--grund:#f5f5f7;--karte:#fff;--text:#1d1d1f;--leise:#6e6e73;--blau:#0a84ff;--rot:#ff453a}
@media (prefers-color-scheme:dark){:root{--grund:#000;--karte:#1c1c1e;--text:#f5f5f7;--leise:#98989d}}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--grund);color:var(--text);
font:17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;padding:16px}
main{width:100%;max-width:420px;background:var(--karte);border-radius:18px;padding:32px 28px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
h1{font-size:28px;line-height:1.15;margin:0 0 8px;letter-spacing:-.02em}p{margin:0 0 16px;color:var(--leise)}
label{display:block;font-size:13px;color:var(--leise);margin:8px 0 6px}
input{width:100%;font:600 22px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;padding:14px 16px;
border-radius:12px;border:1px solid rgba(128,128,128,.35);background:transparent;color:var(--text)}
input:focus{outline:2px solid var(--blau);outline-offset:1px}
button{width:100%;margin-top:16px;padding:14px;border:0;border-radius:12px;background:var(--blau);color:#fff;font:600 17px/1 inherit;cursor:pointer}
.fehler{color:var(--rot)}small{display:block;margin-top:16px;color:var(--leise);font-size:13px}
ol{margin:0;padding-left:22px}li{margin:0 0 12px}li b{display:block}li span{color:var(--leise);font-size:15px}
code{font:14px/1.4 ui-monospace,"SF Mono",Menlo,monospace;background:rgba(128,128,128,.16);padding:2px 6px;border-radius:6px;word-break:break-all}