@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink: #101319; --paper: #f2f0e9; --muted: #858980; --line: #d6d5cd; --acid: #c8f36a; --coral: #ff755f; --violet: #8476ee; --panel: #171b21; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Manrope, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; background: radial-gradient(circle at 8% 14%, #252a2b 0, transparent 22%), linear-gradient(125deg, #101319 0%, #181d22 60%, #101319 100%); }
.gate { max-width: 1240px; min-height: 100vh; margin: auto; padding: clamp(28px, 7vw, 90px) clamp(24px, 7vw, 100px); display: grid; grid-template-columns: 1fr minmax(310px, 400px); gap: 10vw; align-items: center; }
.brand-mark { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .09em; display: flex; align-items: center; gap: 10px; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--acid); box-shadow: 0 0 0 5px #c8f36a1c; }
.eyebrow, .card-kicker, .rail-label, .panel-title, .fine-print, .signal-row, .head-meta, .room-status { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .13em; }
.gate-copy { max-width: 650px; }
.eyebrow { color: var(--acid); margin: 85px 0 28px; }
h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(46px, 7vw, 88px); line-height: .96; letter-spacing: -.06em; margin: 0 0 28px; font-weight: 600; }
h1 em { color: var(--coral); font-style: normal; }
.lede { max-width: 490px; color: #b4b7ae; line-height: 1.7; font-size: 15px; }
.signal-row { display: flex; align-items: center; gap: 10px; color: #72786f; margin-top: 64px; }.signal-row strong { color: var(--acid); font-weight: 400; margin-left: 10px; }.signal-pulse, .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px #c8f36a1a; }
.join-card { background: var(--paper); color: var(--ink); padding: 38px; box-shadow: 18px 18px 0 #c8f36a; }.card-kicker { color: #888c83; display: flex; justify-content: space-between; }.card-kicker span { color: var(--coral); } h2 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; letter-spacing: -.04em; margin: 29px 0 8px; }.muted { color: #7a7e77; font-size: 12px; line-height: 1.6; }.join-card label:not(.check-row) { display: block; margin-top: 25px; color: #60645d; font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.join-card input:not([type=checkbox]) { width: 100%; border: 0; border-bottom: 1px solid #bbbdb3; background: transparent; padding: 12px 0; color: var(--ink); outline: 0; }.join-card input:focus { border-color: var(--coral); }.input-wrap { display: flex; border-bottom: 1px solid #bbbdb3; }.input-wrap input { border-bottom: 0 !important; }.reveal { border: 0; background: transparent; font: 10px 'DM Mono', monospace; color: #878a81; }.check-row { display: flex; align-items: center; gap: 8px; color: #757970; font-size: 11px; margin: 23px 0 28px; }.check-row input { accent-color: var(--ink); }.primary-button { border: 0; background: var(--ink); color: var(--paper); width: 100%; padding: 16px; text-align: left; font-weight: 700; display: flex; justify-content: space-between; }.primary-button:hover { background: #292e33; }.fine-print { line-height: 1.7; color: #969a91; margin: 23px 0 0; letter-spacing: 0; font-size: 9px; }.lock-icon { color: var(--coral); font-size: 17px; margin-right: 7px; }
.hidden { display: none !important; }.chat-app { min-height: 100vh; background: var(--paper); color: var(--ink); }.topbar { height: 72px; padding: 0 4vw; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.topbar .brand-mark { color: var(--ink); }.topbar .brand-dot { background: var(--coral); box-shadow: 0 0 0 5px #ff755f25; }.brand-mark small { color: #9a9c95; font: 10px 'DM Mono', monospace; margin-left: 8px; }.top-actions { display: flex; gap: 24px; align-items: center; }.room-status { color: #858980; letter-spacing: 0; }.room-status .live-dot { margin-right: 9px; }.icon-button { border: 0; background: transparent; font: 10px 'DM Mono', monospace; letter-spacing: .12em; color: #858980; }.chat-layout { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; }.room-rail { background: #e8e7df; padding: 32px 22px; display: flex; flex-direction: column; }.rail-label { color: #95978e; display: flex; justify-content: space-between; margin-bottom: 22px; }.room-item { border: 0; background: transparent; width: 100%; padding: 10px 8px; display: flex; gap: 11px; align-items: center; text-align: left; color: #8b8d84; }.room-item.active { background: var(--paper); color: var(--ink); }.room-sigil { font-size: 20px; font-weight: 300; }.room-item strong, .room-item small, .identity strong, .identity small { display: block; }.room-item strong, .identity strong { font-size: 12px; }.room-item small, .identity small { color: #9a9d94; font-size: 10px; margin-top: 4px; }.room-item b { margin-left: auto; font: 10px 'DM Mono'; color: var(--coral); }.rail-spacer { flex: 1; }.identity { border-top: 1px solid var(--line); padding-top: 18px; display: flex; gap: 10px; align-items: center; }.identity .verified { color: #8fae35; margin-left: auto; }
.avatar, .composer-avatar { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; background: #b4b7ae; color: white; font: 700 12px 'Space Grotesk'; }.avatar-coral { background: var(--coral); }.avatar-lime { background: #8aa53f; }.avatar-violet { background: var(--violet); }.conversation { display: flex; flex-direction: column; min-width: 0; }.conversation-head { padding: 40px 6vw 25px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: end; }.conversation-head .eyebrow { color: #989b91; margin: 0 0 10px; }.conversation-head h2 { margin: 0 0 5px; font-size: 27px; }.head-meta { color: #9b9e95; text-align: right; line-height: 2.5; }.encrypted-badge { color: #83983f; display: block; }.notice { margin: 25px 6vw 0; border: 1px solid #d7dfa9; background: #f3f6dc; color: #68702e; padding: 12px 15px; display: flex; align-items: center; gap: 11px; font-size: 11px; line-height: 1.5; }.notice-icon { font-size: 16px; }.notice button { margin-left: auto; border: 0; background: transparent; color: #9da37a; font-size: 18px; }.message-list { flex: 1; padding: 25px 6vw 30px; overflow-y: auto; }.date-rule { display: flex; align-items: center; gap: 13px; color: #aaaDA4; font: 9px 'DM Mono'; margin: 3px 0 30px; }.date-rule:after { content: ''; height: 1px; background: var(--line); flex: 1; }.message { display: flex; gap: 12px; margin-bottom: 25px; max-width: 670px; }.message-body { padding-top: 1px; }.message-meta { display: flex; gap: 10px; align-items: center; }.message-meta strong { font-size: 12px; }.message-meta span { color: #aaaDA4; font: 9px 'DM Mono'; }.tiny-lock { color: #91a550 !important; }.message p { margin: 6px 0 0; font-size: 13px; color: #555a52; line-height: 1.6; }.message.own { margin-left: auto; flex-direction: row-reverse; text-align: right; }.message.own .message-meta { justify-content: flex-end; }.composer { margin: 0 6vw 30px; border: 1px solid #c8c9c0; background: white; display: flex; align-items: center; gap: 12px; padding: 10px; }.composer-avatar { width: 25px; height: 25px; background: var(--ink); }.composer input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 12px; color: var(--ink); }.composer button { border: 0; background: var(--ink); color: white; padding: 9px 12px; font: 10px 'DM Mono'; }.composer small { display: none; color: #aaaDA4; font: 9px 'DM Mono'; }.info-panel { background: #e8e7df; border-left: 1px solid var(--line); padding: 40px 28px; }.panel-title { color: #8b8e85; display: flex; justify-content: space-between; margin-bottom: 24px; }.panel-title span { color: var(--coral); }.signal-meter { display: grid; gap: 12px; }.meter-bars { display: flex; gap: 3px; align-items: end; height: 27px; }.meter-bars i { display: block; width: 15px; background: var(--acid); height: 12px; }.meter-bars i:nth-child(2n) { height: 21px; }.meter-bars i:nth-child(3n) { height: 16px; }.signal-meter strong { font: 12px 'Space Grotesk'; }.signal-meter > span { color: #999c93; font: 10px 'DM Mono'; }.panel-divider { height: 1px; background: var(--line); margin: 35px 0; }.listener { display: flex; gap: 10px; align-items: center; margin: 15px 0; font-size: 11px; }.listener small { display: block; color: #999c93; font: 9px 'DM Mono'; margin-top: 4px; }.listener i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #a5c448; }.protocol-note { color: #969990; font-size: 10px; line-height: 1.6; }.protocol-note span { color: var(--coral); font-size: 17px; }.protocol-note strong { color: #666a61; font: 10px 'DM Mono'; letter-spacing: .1em; }
@media (max-width: 900px) { .gate { grid-template-columns: 1fr; gap: 45px; padding-top: 45px; }.gate-copy .eyebrow { margin-top: 55px; }.join-card { max-width: 500px; box-shadow: 10px 10px 0 var(--acid); }.chat-layout { grid-template-columns: 72px minmax(0, 1fr); }.room-rail { padding: 30px 12px; align-items: center; }.rail-label, .room-item span:not(.room-sigil), .room-item b, .identity div:not(.avatar), .identity .verified { display: none; }.room-item { justify-content: center; }.info-panel { display: none; }.identity { border: 0; padding: 0; }.conversation-head, .message-list, .composer { margin-left: 28px; margin-right: 28px; padding-left: 0; padding-right: 0; }.conversation-head { padding-top: 30px; } }
@media (max-width: 520px) { .topbar { padding: 0 20px; }.topbar .brand-mark small, .room-status { display: none; }.gate { padding: 28px 22px 50px; }.gate-copy .eyebrow { margin-top: 54px; }.signal-row { margin-top: 42px; font-size: 8px; }.signal-row strong { margin-left: auto; }.join-card { padding: 26px; }.conversation-head { padding-top: 27px; }.head-meta { display: none; }.notice { margin-top: 18px; font-size: 10px; }.message-list { padding-top: 20px; }.composer { margin-bottom: 18px; }.composer small { display: block; }.composer button { font-size: 0; padding: 10px 13px; }.composer button span { font-size: 16px; }.chat-layout { grid-template-columns: 58px minmax(0, 1fr); } }

.api-settings-button { margin-top: 12px; width: 100%; border: 1px solid #c4c5bc; background: transparent; color: #757970; padding: 11px; font: 10px 'DM Mono', monospace; letter-spacing: .08em; }
.api-settings-button:hover { border-color: #8b8d84; color: var(--ink); }
.api-setup { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(16,19,25,.72); backdrop-filter: blur(8px); }
.api-setup-card { width: min(460px, 100%); background: var(--paper); color: var(--ink); padding: 30px; box-shadow: 12px 12px 0 var(--acid); }
.api-setup-card h2 { margin-top: 20px; }
.api-setup-card label { display: block; margin-top: 22px; color: #60645d; font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.api-setup-card input { width: 100%; margin-top: 8px; border: 0; border-bottom: 1px solid #bbbdb3; background: transparent; padding: 12px 0; outline: 0; }
.api-setup-card input:focus { border-color: var(--coral); }
.api-setup-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 22px; }
.api-setup-actions .primary-button { flex: 1; }
.api-secondary { border: 1px solid #bbbdb3; background: transparent; padding: 12px 16px; font: 10px 'DM Mono', monospace; color: #6e726a; }

.gate-status { margin-top: 12px; border: 1px solid #d7dfa9; background: #f3f6dc; color: #68702e; padding: 10px 12px; font: 9px 'DM Mono', monospace; line-height: 1.5; word-break: break-word; }
.gate-status-error { border-color: #ffb5a8; background: #ffe2dc; color: #9b3f30; }
.api-setup-error { min-height: 16px; margin: 12px 0 0; color: #9b3f30; font: 9px 'DM Mono', monospace; line-height: 1.5; }