:root{font-family:system-ui,sans-serif;color:#25291f;background:#e9e9df}*{box-sizing:border-box}body{margin:0}main{max-width:900px;margin:0 auto;padding:40px 28px}.logo{color:inherit;font-weight:800;font-size:40px;letter-spacing:-3px;text-decoration:none}.eyebrow{font-size:11px;letter-spacing:.13em;margin-top:50px;color:#646858}h1{font-size:clamp(38px,7vw,65px);letter-spacing:-.05em;font-weight:550;margin:16px 0}.lead{font-size:20px;line-height:1.5;max-width:660px;color:#646858}.connect,.tools{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}button{font:inherit;padding:12px 18px;border:1px solid #b7bea9;border-radius:9px;background:transparent;color:inherit;cursor:pointer}.connect button{background:#d7f35b;border-color:#d7f35b}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #586b11;outline-offset:4px}.note,footer{font-size:13px;line-height:1.6;color:#646858;max-width:720px}#status{min-height:25px}article{border-top:1px solid #ccd0bf;padding:20px 0;display:flex;gap:20px;align-items:center}article>div{flex:1}h2,h3{font-size:18px;margin:0 0 8px}article p{font-size:13px;margin:5px 0;color:#646858}article a{color:inherit;font-size:13px}progress{width:100%;accent-color:#687a36}audio{width:100%}footer{border-top:1px solid #ccd0bf;margin-top:45px;padding-top:20px}#player{background:#f5f5ec;padding:20px;border-radius:12px;margin-top:24px}@media(max-width:560px){article{align-items:flex-start;flex-wrap:wrap}article>div{flex-basis:100%}.connect button{flex:1}}

form{flex-basis:100%;display:grid;gap:12px;padding:16px;background:#f5f5ec;border-radius:9px}form label{display:block;font-size:14px}input[type=url]{display:block;width:100%;padding:10px;margin-top:8px;font:inherit;border:1px solid #b7bea9;border-radius:6px}input[type=checkbox]{margin-right:8px;accent-color:#687a36}form button{justify-self:start}

.scan-group{display:flex;flex-wrap:wrap;gap:10px;flex:1;min-width:230px}.scan-group p{flex-basis:100%;margin:0}.scan-group:has(button[hidden]+button[hidden]){display:none}
article>div.row-actions{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}article:has(form){flex-wrap:wrap}form button{min-height:44px}form button[type=button]{background:transparent}

.row-actions{max-width:100%}@media(max-width:560px){article>div.row-actions{flex-basis:100%}}

.connection{flex:1;min-width:220px}.connection button{min-height:44px}.connection p{margin:10px 0 0}.connect button:disabled{background:transparent;border-color:#b7bea9;opacity:1;color:#646858}
@media(max-width:560px){.connection{flex-basis:100%;min-width:0}.connection button{width:100%}}