:root { font-family: system-ui, sans-serif; color-scheme: dark; background: #10171e; color: #eef4fa; }
* { box-sizing: border-box; }
body { display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 1rem; }
.access-card { width: min(100%, 36rem); background: #19232d; border: 1px solid #354554; padding: clamp(1rem, 5vw, 2.5rem); border-radius: 1rem; }
h1 { margin: .3rem 0 1rem; font-size: clamp(1.55rem, 5vw, 2rem); }
a { color: #9cf1c7; }
p { color: #bccad5; line-height: 1.5; }
button, input, .primary { font: inherit; padding: .65rem .85rem; border-radius: .45rem; }
button { cursor: pointer; border: 1px solid #617486; color: inherit; background: #222e39; }
.primary { display: inline-block; background: #9cf1c7; color: #10271d; border: 1px solid #9cf1c7; font-weight: 650; text-decoration: none; }
:focus-visible { outline: 2px solid #9cf1c7; outline-offset: 4px; }
.invite { margin-top: 1.6rem; }
.invite label { display: block; margin-bottom: .5rem; }
.row, .users li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; }
input { flex: 1; min-width: min(100%, 12rem); color: inherit; background: #10171e; border: 1px solid #617486; }
.users { padding: 0; list-style: none; overflow-wrap: anywhere; }
.users li { border-top: 1px solid #354554; padding: .75rem 0; }