*{box-sizing:border-box}body{margin:0;background:#111318;color:#f5f5f5;font:16px/1.5 system-ui,sans-serif}header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px;border-bottom:1px solid #555}nav{display:flex;gap:18px;flex-wrap:wrap}a{color:#ffdc83}main{max-width:1000px;margin:auto;padding:28px 20px 70px}h1{font-size:clamp(32px,6vw,52px);margin:0}p{color:#ccd0d8}h2{font-size:20px}button,input{font:inherit;color:inherit;background:#252932;border:1px solid #737986;border-radius:9px;padding:12px;min-height:48px}button{cursor:pointer}label{display:block;margin-bottom:8px}input{width:100%;margin-bottom:18px}#directory{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;max-height:55vh;overflow:auto;padding:4px}#directory button{display:flex;align-items:center;gap:10px;text-align:left}img{width:32px;height:32px;border-radius:6px}button[aria-pressed=true]{border-color:#ffdc83;background:#443923}#selected{display:flex;flex-wrap:wrap;gap:8px}.done{display:inline-block;margin-top:24px;padding:12px 0}:focus-visible{outline:3px solid #ffdc83;outline-offset:3px}[hidden]{display:none!important}@media(max-width:500px){header{align-items:flex-start;flex-direction:column}#directory{grid-template-columns:1fr}}