:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  background: #f5f4f1;
  color: #1d1d1f;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px; }
button, input { font: inherit; }
button { min-height: 38px; border: 1px solid #d5d3cf; border-radius: 10px; background: #fff; color: inherit; padding: 8px 14px; cursor: pointer; }
button.primary { background: #191919; border-color: #191919; color: #fff; }
input { min-height: 40px; width: 100%; border: 1px solid #d5d3cf; border-radius: 9px; background: #fff; color: inherit; padding: 8px 10px; }
label { display: grid; gap: 6px; color: #666; font-size: 13px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 28px; letter-spacing: -.03em; }
h2 { font-size: 17px; }
.card { width: min(760px, 100%); background: rgba(255,255,255,.9); border: 1px solid #dfddd9; border-radius: 18px; box-shadow: 0 16px 50px rgba(0,0,0,.06); padding: 24px; }
.compact { width: min(420px, 100%); display: grid; gap: 16px; text-align: center; }
.mark { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto; border-radius: 14px; background: #191919; color: #fff; font-family: Georgia, serif; font-size: 23px; }
.muted { color: #777; line-height: 1.5; }
.message { min-height: 20px; margin: 0; color: #5c6d55; font-size: 13px; }
.message.error { color: #a43030; }
.stack { display: grid; gap: 12px; margin-top: 14px; text-align: left; }
.shell { width: min(900px, 100%); display: grid; gap: 18px; }
header, .section-title, .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header h1 { margin: 2px 0 0; }
.eyebrow { color: #7a746c; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.invitation { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #ebe9e5; }
.invitation > div { display: grid; gap: 3px; min-width: 0; }
.invitation span { color: #777; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.status { text-transform: capitalize; }
details { color: #777; font-size: 13px; }
summary { cursor: pointer; }
@media (max-width: 680px) { body { padding: 18px; } .grid { grid-template-columns: 1fr; } .invitation { grid-template-columns: 1fr auto; } }
@media (prefers-color-scheme: dark) {
  :root { background: #151514; color: #f3f2ef; }
  .card { background: rgba(35,35,33,.96); border-color: #3c3b38; }
  button, input { background: #2c2c2a; border-color: #4a4945; }
  button.primary, .mark { background: #eeeae2; border-color: #eeeae2; color: #171716; }
  .invitation { border-color: #3c3b38; }
}