:root{font-family:Tahoma,Arial,sans-serif;color-scheme:light dark;--bg:#f5f6fa;--panel:#fff;--ink:#203047;--line:#d6dee8;--accent:#137b66}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.9}main{max-width:720px;padding:1rem;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:1rem}h1{font-size:1.4rem}h2{font-size:1.2rem}a{color:var(--accent)}section{padding:1rem;margin:1rem 0;background:var(--panel);border:1px solid var(--line);border-radius:18px}label{display:grid;gap:.4rem;margin:.8rem 0}select,button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6rem;min-height:48px;max-width:100%}button{cursor:pointer}button:disabled{opacity:.5}#keys{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}#keys span{border:1px solid var(--line);border-radius:8px;padding:.3rem .6rem}.note{font-size:.85rem}#status{min-height:3rem}select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}@media(prefers-color-scheme:dark){:root{--bg:#121a25;--panel:#1b2736;--ink:#eef4fb;--line:#415069;--accent:#56ddb5}}