*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0a0a0a;min-height:100dvh;font-family:system-ui,-apple-system,sans-serif;line-height:1.5}main{flex-direction:column;gap:1.5rem;max-width:48rem;margin:3rem auto;padding:0 1.5rem;display:flex}h1{font-family:ui-monospace,monospace;font-size:1.5rem}h2{text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:.75rem;font-size:.8rem}.subtitle{color:#aaa}.unsupported{color:#ffb4b4;background:#3a1414;border-radius:.5rem;margin-top:1rem;padding:.75rem 1rem}code,kbd{font-family:ui-monospace,monospace;font-size:.85em}kbd{background:#1a1a1a;border:1px solid #444;border-bottom-width:2px;border-radius:.25rem;padding:.05em .35em}.panel{background:#111;border:1px solid #222;border-radius:.75rem;padding:1.25rem}.state{grid-template-columns:max-content 1fr;gap:.35rem 1.5rem;font-family:ui-monospace,monospace;font-size:.9rem;display:grid}.state dt{color:#888}.state dd[data-on=true]{color:#7ee08a}.state dd[data-on=false]{color:#ff8a8a}.row{align-items:baseline;gap:.6rem;padding:.2rem 0;display:flex}.buttons{gap:.5rem;margin-top:1rem;display:flex}button{font:inherit;color:inherit;cursor:pointer;background:#1c1c1c;border:1px solid #333;border-radius:.4rem;padding:.4rem .9rem;font-size:.9rem}button:hover{background:#262626}.protocol{flex-direction:column;gap:.5rem;padding-left:1.25rem;display:flex}.log{flex-direction:column;gap:.2rem;max-height:28rem;padding-left:2.5rem;font-family:ui-monospace,monospace;font-size:.8rem;display:flex;overflow:auto}.log li[data-kind=ok]{color:#7ee08a}.log li[data-kind=fail]{color:#ff8a8a}.log li[data-kind=info]{color:#9ab}.note{color:#aaa;margin-bottom:.75rem}.panel .protocol{margin-top:1rem}