:root { color-scheme: dark; font: 16px/1.65 system-ui, "Microsoft YaHei", sans-serif; color: #eee9e3; background: #181714; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 22px; }
main { width: min(100%, 560px); }
.eyebrow { color: #ca9565; font-size: .75rem; letter-spacing: .2em; margin-bottom: 16px; }
h1 { font-family: Georgia, "Noto Serif SC", serif; font-weight: 400; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1.15; margin: 0; }
h1 span { display: block; font: 400 1.3rem/1.5 system-ui, sans-serif; color: #ccc2b5; margin-top: 14px; }
.intro { color: #bcb4a8; margin: 25px 0 32px; }
section { border-top: 1px solid #494034; border-bottom: 1px solid #494034; padding: 26px 0 30px; }
h2 { font-size: .8rem; font-weight: 400; color: #a79b8b; margin: 0 0 10px; }
#status { margin: 0; font-size: 1.1rem; }
#detail, .note { color: #b2a899; font-size: .85rem; }
#detail { min-height: 1.65em; margin: 10px 0 22px; }
button, #join { display: inline-block; border: 1px solid #d0a278; border-radius: 4px; padding: 11px 25px; background: #d0a278; color: #241b14; font: 600 .95rem/1.5 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
button:hover, #join:hover { background: #e4b88d; }
button:disabled { cursor: wait; background: #383129; color: #c2b5a5; border-color: #635445; }
:focus-visible { outline: 2px solid #fff0df; outline-offset: 5px; }
[hidden] { display: none !important; }
.note { margin-top: 24px; }