:root{--bg: #f6f6f4;--fg: #1d1d1b;--muted: #6b6b66;--key: #ffffff;--key-border: #c9c9c3;--accent: #2f6fdf;--pressed: #f0b429;--danger: #c0392b;--warn-bg: #fff3cd;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #1b1c1e;--fg: #e8e8e4;--muted: #9a9a94;--key: #2a2b2e;--key-border: #45464a;--accent: #6b9cff;--warn-bg: #4a3f1a}}*{box-sizing:border-box}body{margin:0;padding:16px;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Hiragino Sans,Yu Gothic UI,sans-serif}header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}h1{font-size:20px;margin:0}#status{color:var(--muted);font-size:13px}#notice:not(:empty){margin-top:12px;padding:8px 12px;background:var(--warn-bg);border-radius:6px}button{font:inherit;padding:6px 12px;border:1px solid var(--key-border);border-radius:6px;background:var(--key);color:var(--fg);cursor:pointer}button:disabled{opacity:.5;cursor:default}button.danger{color:var(--danger)}button.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}#sidebar{margin-top:16px;display:flex;gap:8px;align-items:center}#layers{display:flex;gap:6px;margin:16px 0 8px;flex-wrap:wrap}#keyboard{display:flex;gap:32px;flex-wrap:wrap}.half{display:grid;grid-template-columns:repeat(5,64px);gap:6px}.key{position:relative;height:64px;padding:4px;white-space:pre-line;font-size:13px;line-height:1.2;overflow:hidden}.key .bar{position:absolute;left:0;bottom:0;width:100%;background:var(--accent);opacity:.25;pointer-events:none}.key.pressed{border-color:var(--pressed);box-shadow:inset 0 0 0 2px var(--pressed)}.key.selected{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.key.trns{color:var(--muted)}#editor{margin-top:16px;padding:12px;border:1px solid var(--key-border);border-radius:8px}#editor h2{font-size:15px;margin:0 0 8px}#editor .group{margin:8px 0}#editor .group h3{font-size:12px;color:var(--muted);margin:0 0 4px;font-weight:400}#editor .codes{display:flex;flex-wrap:wrap;gap:4px}#editor .codes button{min-width:40px;padding:4px 6px;font-size:13px}#editor .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}#editor input{font:inherit;width:90px;padding:4px}#actions{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}#dirty{color:var(--pressed);font-size:13px}@media(max-width:720px){.half{grid-template-columns:repeat(5,1fr)}.key{height:52px;font-size:11px}}