:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#14161a;--panel:#1d2026;--accent:#39f;--text:#e8eaed;--muted:#8a8f98}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);justify-content:center;margin:0;padding:24px 16px 48px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}#app{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:480px;display:flex}h1{color:var(--muted);text-align:center;margin:0;font-size:16px;font-weight:600}#mode-toggle{gap:8px;display:flex}.mode-btn{background:var(--panel);color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #333a44;border-radius:999px;padding:6px 14px;font-size:12px}.mode-btn.active{background:var(--accent);color:#061018;border-color:var(--accent)}#badge-frame{background:#05070a;border:3px solid #2a2e36;border-radius:16px;flex-direction:column;align-items:center;gap:10px;padding:14px;display:flex}#badge-screen{width:320px;height:240px;image-rendering:pixelated;border-radius:4px;display:block}#led-row{gap:8px;display:flex}.led-dot{background:#000;border:1px solid #333;border-radius:50%;width:12px;height:12px}#button-pad{grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:360px;display:grid}.badge-btn{background:var(--panel);color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #333a44;border-radius:8px;padding:10px 4px;font-size:12px}.badge-btn:active{background:var(--accent);color:#061018}#log-panel{background:var(--panel);border:1px solid #333a44;border-radius:8px;width:100%;max-width:480px;overflow:hidden}#log-header{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #333a44;padding:6px 10px;font-size:11px}#log-output{white-space:pre-wrap;word-break:break-word;max-height:160px;margin:0;padding:8px 10px;font-size:12px;line-height:1.5;overflow-y:auto}