:root { color-scheme: dark light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0a1020; color: #ebf1ff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top, #162957, #0a1020 52rem); }
.shell { width: min(920px, calc(100% - 2rem)); margin: 0 auto; padding: 3.5rem 0 2rem; }
header { margin-bottom: 1.5rem; } h1 { margin: .25rem 0; font-size: clamp(2rem, 6vw, 3.35rem); letter-spacing: -.05em; } .eyebrow { color: #73a7ff; font-size: .75rem; font-weight: 750; letter-spacing: .14em; margin: 0; } .subtitle, .hint, footer { color: #aebbd2; line-height: 1.5; } .subtitle { max-width: 48rem; }
.panel { border: 1px solid #304266; border-radius: 14px; background: #101b32e8; box-shadow: 0 12px 32px #0003; } .setup, .verification, .roombar { padding: 1rem; } .setup { display: grid; gap: .7rem; max-width: 620px; } .join { display: flex; gap: .5rem; } input, textarea { color: inherit; background: #0b1427; border: 1px solid #3a4d74; border-radius: 9px; font: inherit; padding: .7rem .8rem; width: 100%; } textarea { min-height: 4.6rem; resize: vertical; } input:focus, textarea:focus { outline: 2px solid #6b9eff; outline-offset: 1px; }
button { font: inherit; font-weight: 700; border: 1px solid #46618f; border-radius: 9px; background: #1b2d50; color: inherit; cursor: pointer; padding: .68rem .9rem; } button:hover:not(:disabled) { background: #28436f; } button:disabled { cursor: not-allowed; opacity: .48; } .primary { background: #3778e8; border-color: #5e96fa; } .primary:hover:not(:disabled) { background: #4b89ed; } .danger { background: #4b1e31; border-color: #9d4f6c; margin-top: 1rem; } .danger:hover:not(:disabled) { background: #69283f; }
.hidden { display: none; } .roombar, .verification { display: flex; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: .8rem; } .roombar code { display: block; color: #a9c6ff; max-width: 33rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .25rem; } .label { color: #aab9d4; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.statusGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: .8rem; } .status { padding: .85rem; } .status strong { display: block; margin-top: .3rem; } [data-state="ok"] { color: #71e4ac; } [data-state="warn"] { color: #ffd371; } [data-state="bad"] { color: #ff91a8; } [data-state="idle"] { color: #b8c5dd; }
.verification output { display: block; font: 700 clamp(1rem, 3vw, 1.45rem)/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; color: #f5d77a; margin-top: .2rem; } .verification p { margin: .2rem 0 0; }.alert { border: 1px solid #ad7040; background: #3d2a1d; color: #ffdfb3; border-radius: 10px; padding: .8rem; }
.messages { min-height: 15rem; max-height: 48vh; overflow-y: auto; display: grid; gap: .65rem; padding: .7rem 0; } .message { max-width: 82%; padding: .7rem .8rem; border-radius: 12px; border: 1px solid #33466c; background: #121f39; } .message.self { justify-self: end; background: #173a74; border-color: #3975c9; } .messageMeta { display: flex; justify-content: space-between; gap: 1rem; color: #b9c9e4; font-size: .75rem; margin-bottom: .35rem; } .messageBody { white-space: pre-wrap; overflow-wrap: anywhere; } .notice { justify-self: center; color: #b9c9e4; font-size: .82rem; padding: .45rem; }
.composer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6rem; } footer { font-size: .8rem; margin: 2rem 0 .6rem; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 640px) { .shell { width: min(100% - 1rem, 920px); padding-top: 1.5rem; } .statusGrid { grid-template-columns: 1fr; } .roombar, .verification, .composer { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; } .roombar, .verification { display: flex; } .join { flex-direction: column; } .message { max-width: 94%; } }
@media (prefers-color-scheme: light) { :root { background: #e9effa; color: #142039; } body { background: radial-gradient(circle at top, #ffffff, #e1e9f7 52rem); } .panel { background: #ffffffeb; border-color: #b5c6e5; box-shadow: 0 12px 32px #47608d22; } input, textarea { background: #f5f8ff; border-color: #a8b9d7; } .message { background: #f4f7ff; border-color: #bfd0ec; } .message.self { background: #dceaff; border-color: #8bb1ed; } }