* { box-sizing: border-box; }
:root { font-family: Arial, Helvetica, sans-serif; color: #f5f5f6; color-scheme: dark; background: #171b19; }
body { margin: 0; min-height: 100svh; background: #171b19; isolation: isolate; }
.background-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; z-index: -2; pointer-events: none; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 50%), rgb(0 0 0 / 24%) 65%, rgb(0 0 0 / 33%)); }
button, input { font: inherit; }
.welcome-language { position: absolute; left: 22px; top: 24px; z-index: 3; font-size: 12px; }
.welcome-language > summary { cursor: pointer; list-style: none; padding: 10px 13px; background: #101116e8; border: 1px solid #ffffff40; border-radius: 7px; }
.welcome-language > summary::after { content: ' ▾'; }
.welcome-language > summary:focus-visible { outline: 2px solid #d44b54; outline-offset: 4px; }
.welcome-language-options { width: min(305px, calc(100vw - 44px)); max-height: min(390px, 65svh); overflow-y: auto; margin-top: 6px; background: #101116; border: 1px solid #555; border-radius: 8px; padding: 5px; box-shadow: 0 10px 30px #0008; }
.welcome-language-option { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; text-align: left; font-size: 12px; padding: 11px 9px; border-radius: 5px; }
.welcome-language-option[aria-pressed="true"], .welcome-language-option:hover { background: #a51d1d60; }
.welcome-language-option img { width: 25px; height: 17px; object-fit: cover; border-radius: 2px; }
.entry-actions .main-button { font-size: clamp(22px, 3.6vw, 48px); overflow-wrap: anywhere; padding: 12px; }
.spinning-star { position: fixed; left: 20px; bottom: 20px; width: clamp(52px, 6vw, 76px); height: clamp(52px, 6vw, 76px); object-fit: contain; pointer-events: none; user-select: none; z-index: 1; animation: star-spin 8s linear infinite; }
@keyframes star-spin { to { transform: rotate(360deg); } }
button { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid #d44b54; outline-offset: 5px; }
button { transition: transform .18s, filter .18s, background .18s; }
button:hover { filter: brightness(1.15); }
button:active { transform: translateY(2px); }

.welcome { width: min(100% - 80px, 1090px); min-height: 100svh; margin: auto; display: grid; grid-template-columns: 274px minmax(0, 1fr); align-items: center; gap: 105px; padding: 60px 0 38px; }
.founders { text-align: center; }
.founders h2 { font-size: 36px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin: 0 0 13px; text-shadow: 0 3px 8px #0009; }
.founder { margin: 0 0 10px; }
.founder:last-child { margin-bottom: 0; }
.portrait { overflow: hidden; border: 1px solid #858b97; border-radius: 14px; background: #0c1018; box-shadow: 0 8px 19px #0007; }
.portrait img { display: block; width: 100%; height: auto; }
.founder figcaption { font-size: 29px; line-height: 1.3; margin-top: 8px; text-shadow: 0 3px 7px #000; }
.founder figcaption small { display: block; font-size: 12px; font-weight: 400; color: #e1e1e5; margin: 3px 0 9px; }
.entry { text-align: center; padding-top: 25px; }
h1 { font-size: clamp(58px, 7.3vw, 96px); letter-spacing: -3px; line-height: 1.12; font-weight: 700; margin: 0; text-shadow: 0 4px 5px #000c, 0 8px 20px #0006; }
.red-line { position: relative; height: 2px; margin: 20px 6% 55px; background: linear-gradient(90deg, transparent, #bc090a 20%, #ff2926 50%, #bc090a 80%, transparent); box-shadow: 0 0 10px #f30b0b88; }
.red-line::after { content: ''; position: absolute; width: 70px; height: 6px; left: calc(50% - 35px); top: -2px; background: radial-gradient(ellipse, #fff 0%, #ff8881 12%, #fc211a 35%, transparent 75%); filter: drop-shadow(0 0 5px #ff291c); }
.entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 33px; }
.main-button { min-height: 105px; border-radius: 15px; border: 1px solid #8e939c; font-size: 48px; font-weight: 600; box-shadow: 0 7px 12px #0009, inset 0 1px 1px #ffffff13; }
.login-button { background: linear-gradient(#161920, #090c12); }
.signup-button { border: 1px solid #ea4a43; background: linear-gradient(160deg, #ec0d07, #b00000 80%); box-shadow: 0 7px 12px #0007, inset 0 1px 2px #ffffff20; }
.socials { display: flex; align-items: center; justify-content: center; gap: 29px; margin-top: 44px; }
.guest-prompt { margin: 24px 0 0; font-size: 14px; line-height: 1.7; color: #eee; text-shadow: 0 2px 6px #000; }
.guest-prompt a { color: #fff; text-underline-offset: 4px; font-weight: 600; }
.guest-prompt a:hover { color: #ff9994; }
.guest-prompt a:focus-visible { outline: 2px solid #d44b54; outline-offset: 4px; }
.socials button { display: grid; place-items: center; padding: 0; width: 65px; height: 60px; border: 0; background: none; filter: drop-shadow(0 3px 4px #0005); }
.socials button:hover { transform: translateY(-3px); filter: drop-shadow(0 0 10px #ffffff55); }
.socials svg { width: 57px; height: 51px; fill: #f5f5f6; }
.social-divider { height: 37px; width: 1px; background: #e8e8e8a0; }
dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100svh - 40px); overflow-y: auto; border: 1px solid #50525c; border-radius: 20px; padding: 35px; background: linear-gradient(145deg, #1b1e26, #0b0d12); color: #f5f5f6; box-shadow: 0 24px 100px #000b; }
dialog::backdrop { background: #000a; backdrop-filter: blur(9px); }
body:has(dialog[open]) { overflow: hidden; }
.close-button { position: absolute; right: 14px; top: 11px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #b3b4bc; font-size: 28px; }
.eyebrow { font-size: 11px; letter-spacing: 3px; font-weight: 700; color: #ff6660; margin: 0 0 17px; }
dialog h2 { font-size: 31px; letter-spacing: -1px; margin: 0 0 10px; }
.dialog-description { color: #b6b8c2; font-size: 14px; line-height: 1.6; margin: 0 0 25px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 19px 0 9px; }
input { width: 100%; min-height: 46px; border: 1px solid #464951; border-radius: 7px; background: #090b10; color: #fff; padding: 12px; }
input::placeholder { color: #777d89; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 65px; }
.password-wrap button { position: absolute; top: 0; right: 3px; height: 100%; background: transparent; border: none; color: #c2c5ce; font-size: 12px; padding: 0 12px; }
.field-hint { font-size: 11px; color: #a5a8b3; line-height: 1.5; margin: 8px 0 0; }
.form-status { color: #e9c9a0; font-size: 13px; line-height: 1.5; margin: 18px 0 0; }
.form-status:empty { margin: 0; }
.form-submit { width: 100%; min-height: 48px; border-radius: 8px; font-weight: 600; margin-top: 24px; }
.switch-prompt { text-align: center; color: #b6b8c2; font-size: 13px; margin: 23px 0 0; }
.switch-prompt button { padding: 4px; color: #ff7770; background: none; border: none; font-weight: 600; }
.preview-note { text-align: center; font-size: 11px; line-height: 1.5; color: #969aa6; border-top: 1px solid #ffffff12; padding-top: 18px; margin: 20px 0 0; }
.noscript-note { position: fixed; bottom: 0; width: 100%; text-align: center; padding: 12px; background: #101116; }
[hidden] { display: none !important; }
@media (min-width: 1400px) { .welcome { width: 1090px; gap: 105px; } }
@media (max-width: 1100px) { .welcome { gap: 55px; grid-template-columns: 230px minmax(0, 1fr); } .founders h2 { font-size: 29px; } .founder figcaption { font-size: 25px; } .main-button { font-size: 38px; min-height: 90px; } .socials { gap: 18px; } h1 { font-size: 7.1vw; } }
@media (max-width: 760px) { body { background-position: 59% center; } .welcome { width: min(100% - 40px, 530px); grid-template-columns: 1fr; gap: 60px; padding: 125px 0 40px; } .entry { grid-row: 1; padding: 0; } h1 { font-size: clamp(42px, 10.5vw, 67px); letter-spacing: -2px; } .red-line { margin-bottom: 35px; } .entry-actions { gap: 17px; } .main-button { min-height: 80px; font-size: 33px; border-radius: 12px; } .socials { gap: 20px; margin-top: 30px; } .socials button { width: 46px; height: 48px; } .socials svg { width: 44px; height: 42px; } .social-divider { height: 28px; } .founders { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; } .founders h2 { grid-column: 1 / -1; font-size: 21px; margin-bottom: 19px; } .portrait { aspect-ratio: 1.12; border-radius: 11px; } .portrait img { height: 100%; object-fit: cover; object-position: top; } .founder figcaption { font-size: 20px; }  }
@media (max-width: 360px) { .socials { gap: 13px; } .main-button { font-size: 29px; } dialog { padding: 28px 22px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } .spinning-star { animation: none; } }

/* Reflow instead of clipping when zoom reduces the available CSS viewport. */
html { min-width: 0; scroll-padding-block: 16px; }
body { overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
.welcome > *, .entry-actions > *, .founders > *, form, .password-wrap { min-width: 0; }
.welcome { padding-top: 100px; }
.entry-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main-button { white-space: normal; }
.welcome-language { max-width: calc(100% - 110px); }
.welcome-language > summary { overflow-wrap: anywhere; }
.welcome-language-options { max-width: calc(100vw - 44px); max-height: min(390px, 60dvh); }
.welcome-language-option span { min-width: 0; overflow-wrap: anywhere; }
.welcome-language-option img { flex-shrink: 0; }
.socials { gap: clamp(8px, 2vw, 29px); }
.socials button { flex: 0 1 65px; min-width: 0; }
.socials svg { max-width: 100%; }
.social-divider { flex-shrink: 0; }
dialog { max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: clamp(20px, 5vw, 35px); overscroll-behavior: contain; }
dialog h2 { padding-right: 22px; font-size: clamp(23px, 6vw, 31px); }
input { min-width: 0; max-width: 100%; }
.password-wrap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.password-wrap input { flex: 1 1 160px; width: 0; padding-right: 12px; }
.password-wrap button { position: static; flex: 0 1 auto; min-height: 40px; max-width: 100%; border: 1px solid #464951; border-radius: 7px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .background-video { object-position: 59% center; }
  .welcome { padding-top: 120px; padding-bottom: 90px; gap: 40px; }
  h1 { font-size: clamp(30px, 10.5vw, 67px); }
  .spinning-star { width: 40px; height: 40px; left: 12px; bottom: 12px; }
}
@media (max-width: 380px) {
  .welcome { width: calc(100% - 28px); }
  .entry-actions { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .entry-actions .main-button { min-height: 58px; font-size: 24px; }
  .founders { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .founders h2 { grid-column: auto; font-size: 20px; letter-spacing: 2px; }
  .founder { width: min(100%, 230px); margin-inline: auto; }
  .socials { gap: 9px; }
  
  .welcome-language { left: 14px; max-width: calc(100% - 80px); }
}
@media (max-height: 500px) {
  .welcome { align-items: start; }
  .welcome-language-options { max-height: 50dvh; }
}

#verification-code { text-align: center; font-size: 24px; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.resend-code { display: block; margin: 16px auto 0; border: 0; background: transparent; color: #ff9994; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
button:disabled { opacity: .55; cursor: wait; }
/* Keep focus visible without the white ring or browser autofill background. */
input:focus, input:focus-visible, textarea:focus, select:focus { outline:2px solid #d44b54; outline-offset:2px; border-color:#d44b54; background-color:#090b10; color:#fff; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color:#fff; caret-color:#fff; -webkit-box-shadow:0 0 0 1000px #090b10 inset; box-shadow:0 0 0 1000px #090b10 inset; }
input:autofill { background-color:#090b10; color:#fff; }

::selection { background:#79313c; color:#fff; }
.founder-presence { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#e1e1e5; margin:0 0 8px; }
.founder-presence::before { content:''; width:7px; height:7px; border-radius:50%; background:#8b8d96; box-shadow:0 0 0 2px #0002; }
.founder-presence[data-online="true"]::before { background:#48c77c; }

.termination-dialog{width:min(420px,calc(100vw - 32px));padding:28px;border:1px solid #484b57;border-radius:16px;background:#12141b;color:#eee;box-shadow:0 24px 100px #0009}.termination-dialog::backdrop{background:#050609d9}.termination-dialog h2{margin:0 0 12px;color:#f87171}.termination-dialog p{line-height:1.6;margin-bottom:24px}.termination-dialog button{padding:10px 18px;border:1px solid #555;border-radius:8px;background:#24262e;color:#fff;cursor:pointer}

.signup-terms{margin:18px 0}.signup-terms-copy{max-height:180px;overflow:auto;border:1px solid #ffffff24;border-radius:9px;background:#080a0e;padding:14px;font-size:11px;line-height:1.6;color:#b8bbc8}.signup-terms-copy h3{font-size:14px;color:#eee;margin:0 0 8px}.signup-terms-copy ol{padding-left:18px}.signup-terms-copy li{padding:2px 0 5px}.signup-terms-copy p{margin:0 0 7px}.terms-consent{display:flex!important;align-items:flex-start;gap:10px;font-size:12px!important;line-height:1.55;margin:14px 0 8px!important}.terms-consent input{width:17px!important;height:17px!important;min-width:17px;accent-color:#e33743;margin:2px 0 0!important;padding:0!important}.policy-links{font-size:12px;line-height:1.7}.policy-links a{color:#f2a7ad;text-decoration:underline;text-underline-offset:3px}.guest-age-actions{display:flex;gap:12px;align-items:center}.guest-age-actions .form-submit{margin:0;flex:1}.guest-age-dialog{width:min(470px,calc(100vw - 28px))}

/* Responsive entry and forms keep actions reachable on compact screens. */
.welcome{width:min(1100px,calc(100% - 40px));grid-template-columns:clamp(150px,22vw,230px) minmax(0,1fr);gap:clamp(24px,5vw,70px);min-height:var(--app-height,100dvh);padding:80px 0 26px}.entry{padding-top:0}.entry h1{font-size:clamp(32px,6.8vw,80px)}.red-line{margin-bottom:28px}.entry-actions .main-button{min-height:68px;font-size:clamp(22px,3.5vw,42px)}.founders h2{font-size:27px}.founder figcaption{font-size:21px}.socials{margin-top:26px}.spinning-star{width:38px;height:38px;left:10px;bottom:10px}dialog{max-height:calc(var(--app-height,100dvh) - 16px);max-width:calc(100vw - 16px);padding:24px}#auth-dialog>.close-button{position:sticky;top:0;display:block;margin-left:auto;margin-bottom:-28px;background:#14171e;z-index:5}dialog h2{font-size:25px}.dialog-description{margin-bottom:16px}dialog label{margin-top:14px}dialog .form-submit{min-height:44px}.signup-terms-copy{max-height:min(160px,24dvh)}.guest-age-actions{flex-wrap:wrap;gap:10px}
@media(max-width:900px){.welcome{width:min(620px,calc(100% - 32px));grid-template-columns:minmax(0,1fr);gap:30px;padding-top:84px}.entry{grid-row:1}.entry h1{font-size:clamp(32px,8vw,64px);letter-spacing:-1px}.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.founders h2{grid-column:1/-1;font-size:21px;margin:0}.founder{width:100%;margin:0}.founder figcaption{font-size:18px}.portrait{aspect-ratio:1.35}.portrait img{height:100%;object-fit:cover;object-position:top}.entry-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.entry-actions .main-button{min-height:64px;font-size:clamp(22px,4vw,32px)}.welcome-language{left:14px;top:16px}.socials{margin-top:22px;gap:16px}.socials button{height:38px}.socials svg{height:35px;width:39px}}
@media(max-height:650px){.welcome{align-items:start;padding-top:68px}.portrait{height:clamp(80px,21dvh,145px);aspect-ratio:auto}.portrait img{height:100%;object-fit:cover;object-position:top}.founders h2{font-size:20px}.founder figcaption{font-size:17px}.entry h1{font-size:clamp(30px,5.8vw,65px)}.red-line{margin:15px 6% 22px}.entry-actions .main-button{min-height:58px}.socials{margin-top:18px}.socials button{height:34px}.socials svg{height:30px}dialog{padding:16px 20px;border-radius:12px}.eyebrow{margin-bottom:10px}dialog h2{font-size:22px}.dialog-description{font-size:12px;margin-bottom:12px}dialog input{min-height:40px;padding:9px}dialog label{margin-top:10px}.signup-terms-copy{max-height:110px}.switch-prompt{margin-top:14px}.form-submit{margin-top:15px}}
@media(max-width:480px){input{font-size:16px}.welcome{padding-bottom:24px}.founder figcaption{font-size:16px}.founder figcaption small{font-size:10px}.guest-age-actions .form-submit{flex-basis:100%}.guest-age-actions .resend-code{margin:0}.terms-consent{font-size:11px!important}.terms-consent input{font-size:inherit}.policy-links{font-size:11px}.social-divider{height:22px}}
.spinning-flag{left:auto;right:10px;animation-direction:reverse}
@media(max-width:700px){.spinning-flag{left:auto;right:12px}}
.public-test-button{display:block;width:100%;margin:18px 0;padding:20px;border:1px solid #aeb6c6;border-radius:12px;background:linear-gradient(125deg,#252b37,#151820);color:#fff;font:inherit;font-weight:700;font-size:clamp(18px,2.5vw,26px);line-height:1.3;cursor:pointer;box-shadow:0 8px 30px #0003}.public-test-button small{display:block;font-size:12px;color:#bac0cc;margin-top:7px;font-weight:400}.public-test-button:hover{background:#303744}.public-test-button[hidden]{display:none}#public-test-dialog{width:min(470px,calc(100vw - 32px))}#public-test-dialog p{line-height:1.6;color:#b9bec9}#public-test-dialog .terms-consent{display:flex;gap:12px;align-items:flex-start}#public-test-dialog input{width:18px;min-width:18px}#public-test-dialog a{color:#eee}

.info-button {
  position: absolute;
  top: clamp(14px, 2vw, 24px);
  right: clamp(14px, 2vw, 26px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #ffffff40;
  border-radius: 999px;
  background: linear-gradient(155deg, #252c3a, #131720);
  color: #f4f6fa;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 4px 16px #0004;
}
.info-button:hover { background: #30394a; border-color: #ffffff75; }
.about-dialog { width: min(660px, calc(100% - 24px)); }
.about-dialog > .close-button {
  position: sticky;
  top: 0;
  display: block;
  margin: 0 0 -30px auto;
  background: #171b25;
  z-index: 1;
}
.about-story img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34dvh;
  object-fit: contain;
  margin: 16px 0;
  border-radius: 10px;
  background: #0b1222;
}
.about-story p { color: #d4d7e1; font-size: 15px; line-height: 1.65; margin: 0 0 12px; }

/* Shared finish for the entry page and app. Layout and user preferences live in their base stylesheets. */
:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
textarea { font-family: inherit; }
button, a, input, textarea, select, summary { touch-action: manipulation; }
button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
button:disabled { filter: none; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #ef7777;
  outline-offset: 3px;
}
input::placeholder, textarea::placeholder { opacity: .75; }
dialog { border-color: #ffffff20; box-shadow: 0 32px 100px #0009, 0 0 0 1px #0005; }
dialog::backdrop { background: #050609bd; backdrop-filter: blur(6px); }
dialog h2, .settings-panel > h3, .channel-header h1 { letter-spacing: -.025em; }

/* Crisp navigation, quiet surfaces, and consistent interaction states. */
.wordmark { letter-spacing: -.2px; border-bottom: 1px solid var(--border); }
.wordmark img { border-radius: 9px; }
.wordmark strong { color: inherit; font-weight: 650; }
.wordmark small { letter-spacing: 1.5px; }
.sidebar-heading { border-top: 0; letter-spacing: 1.2px; }
.channel-group summary { letter-spacing: .5px; font-size: 10px; }
.channel-button { border-radius: 8px; }
.channel-button:hover:not([aria-current="page"]) { background: #ffffff08; }
.channel-button[aria-current="page"] { font-weight: 600; }
.read-all-button { background: transparent; }
.read-all-button:hover { border-color: #ffffff22; }
.guest-profile { background: #ffffff02; }
.community-panel { padding: 22px 15px; }
.member-section-title { letter-spacing: .7px; font-weight: 650; font-size: 10px; }
.member-list-person { border: 1px solid transparent; }
.member-list-person:hover { border-color: var(--border); }
.channel-header { background: #ffffff01; }
.icon-button { display: inline-grid; place-items: center; flex-shrink: 0; line-height: 1; }
.icon-button:hover { border-color: #ffffff24; }
.room-emblem { border-radius: 10px; }
.channel-card { background: #ffffff02; border-color: var(--border); }
.channel-card h3 { font-weight: 600; }
.guest-banner strong { font-weight: 600; }

/* Message actions remain visible on touchscreens and appear on keyboard focus. */
.chat-message { border-radius: 8px; transition: background-color .15s ease; }
.chat-message:hover, .chat-message:focus-within { background-color: #ffffff03; }
.message-author { font-size: 13px; }
.message-text { margin-top: 4px; }
.message-reply, .message-trash { border-radius: 6px; }
.message-reply:hover { color: #fff; background: #ffffff0b; }
.message-trash:hover { background: #ef38381c; }
.message-reply-preview { padding-block: 7px; border-radius: 5px; }
.chat-attachment { box-shadow: 0 3px 12px #0002; }
.composer {
  border-radius: 12px;
  background: #ffffff05;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.composer:focus-within { border-color: #ef38386b; box-shadow: 0 0 0 3px #ef38380a; }
.composer textarea:focus { outline: none; }
.composer button { border-color: transparent; background: transparent; }
.composer button:not(:disabled):hover { background: #ffffff0c; color: #fff; }
.composer #send-message:not(:disabled) { background: #c82b2b; color: #fff; border-color: #ed56564d; }
.composer #send-message:not(:disabled):hover { background: #e13838; }
.mention-suggestions, .favorite-gif-tile, .gif-favorite { border-color: #ffffff20; }

/* Settings share the same visual hierarchy as the app rather than a separate skin. */
.settings-header, .settings-footer { background: #ffffff02; }
.settings-tab { border-radius: 8px; }
.settings-tab[aria-selected="true"] { font-weight: 600; box-shadow: inset 2px 0 #ef3838; }
.settings-panel > h3 { padding-bottom: 4px; }
.panel-description { max-width: 58ch; }
.setting-card, .setting-switches, .profile-media-tools > div, .appearance-preview, .time-preview {
  border-radius: 12px;
  background: #ffffff02;
}
.setting-field > label, #profile-form label { font-weight: 550; }
.profile-media-tools > div > span:first-child { display: block; font-size: 12px; font-weight: 600; }
.profile-media-tools .upload-picker { margin-top: 10px; }
.settings-panel select, #profile-form input:not([type="file"]):not([type="checkbox"]), #profile-form textarea {
  border-color: #ffffff1c;
  border-radius: 8px;
}
.settings-panel select:hover, #profile-form input:not([type="file"]):hover, #profile-form textarea:hover { border-color: #ffffff30; }
.switch-row input::before { transition: transform .15s ease; }
.secondary-button, .red-button, .admin-actions button, .profile-media-tools button { border-radius: 8px; }
.secondary-button:hover, .profile-media-tools button:hover { border-color: #ffffff38; }
.settings-logout:hover { color: #ffb1b1; }
.admin-summary > div { border-radius: 12px; }
.admin-summary strong { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.admin-table-row { border-color: #ffffff0e; }
.admin-table-row:hover { border-color: #ffffff22; }
.profile-card { box-shadow: 0 12px 40px #0004; }
.profile-card-body { line-height: 1.6; }

/* A restrained entry screen retains the original imagery and red/black palette. */
.entry h1 { letter-spacing: -.045em; text-wrap: balance; }
.entry-actions { gap: 16px; }
.entry-actions .main-button { border-radius: 12px; font-weight: 650; letter-spacing: -.025em; box-shadow: 0 5px 20px #0005, inset 0 1px #ffffff12; }
.entry-actions .main-button:hover { box-shadow: 0 8px 28px #0006, inset 0 1px #ffffff20; }
.red-line { box-shadow: 0 0 12px #f30b0b44; }
.founders h2 { font-size: 19px; letter-spacing: 3px; }
.portrait { border-color: #ffffff30; box-shadow: 0 12px 32px #0005; }
.founder figcaption { font-weight: 600; letter-spacing: -.025em; }
.founder figcaption small { letter-spacing: 0; }
.founder-presence { font-size: 10px; }
.guest-prompt { font-size: 13px; }
.guest-prompt a { text-decoration-thickness: 1px; }
.welcome-language > summary { border-color: #ffffff24; border-radius: 9px; }
.socials { opacity: .9; }
#auth-dialog { background: #111319; }
#auth-dialog .close-button { border-radius: 8px; }
#auth-dialog .close-button:hover { background: #ffffff0c; }
#auth-dialog input:not([type="checkbox"]) { border-radius: 8px; }
.signup-terms-copy { border-color: #ffffff15; scrollbar-width: thin; }
.form-submit { border-radius: 9px; font-weight: 600; }
.guest-age-dialog p { line-height: 1.7; }
@media (max-width: 720px), (max-height: 500px) {
  .settings-layout { grid-template-rows: max-content minmax(0, 1fr); }
  .settings-tabs { height: 58px; max-height: 58px; min-height: 0; align-items: center; scrollbar-width: thin; }
  .settings-tab { height: 38px; min-height: 38px; }
  .settings-tabs .settings-logout { flex-shrink: 0; margin: 0 4px; font-size: 12px; white-space: nowrap; }
  .settings-tab[aria-selected="true"] { box-shadow: inset 0 -2px #ef3838; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body[data-reduced-motion="true"] *, body[data-reduced-motion="true"] *::before { transition: none !important; }

/* Drawer controls belong only to the compact navigation layout. */
.channel-header .mobile-menu, .sidebar .close-channels { display: none; }
.owner-panel-trigger { color: #f1bd68; border-color: #f1bd6855; background: #f1bd6810; font-weight: 650; }
.permission-members { display: grid; gap: 12px; margin-top: 16px; }
.permission-card { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #ffffff03; margin-bottom: 12px; overflow-wrap: anywhere; }
.permission-card small { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.permission-person { margin-bottom: 14px; }
.permission-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.permission-toggle { padding: 10px 12px; border: 1px solid #ffffff22; background: transparent; border-radius: 8px; color: var(--muted); font-size: 12px; }
.permission-toggle[aria-pressed="true"] { color: #a4e2b9; border-color: #65c78a66; background: #65c78a10; }
#jail-reason { width: 100%; max-width: 100%; min-height: 60px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--sidebar); color: inherit; }
.main-panel > .jail-notice { grid-row: 2; padding: 10px 16px; background: #f1bd680b; border-bottom: 1px solid #f1bd6833; font-size: 12px; color: #e5ccaa; }
.jail-notice p { margin: 5px 0 0; line-height: 1.5; }
.upload-picker[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.owner-role[data-role="trial_mod"] { color: #c3b1f2; border-color: #c3b1f240; background: #c3b1f20b; }
.danger-action { color: #f5a6a6 !important; border-color: #ef38384d !important; }
.admin-actions button { min-width: 0; overflow-wrap: anywhere; }
.thug-hub-nav { flex-shrink: 0; margin: 0 12px 8px; border: 1px solid var(--border); border-radius: 9px; padding: 7px; }
.thug-hub-nav summary { padding: 4px; font-size: 10px; color: var(--muted); cursor: pointer; }
.thug-hub-nav > div { display: grid; gap: 3px; margin-top: 5px; }
.thug-hub-nav button { background: transparent; border: 0; border-radius: 6px; padding: 7px; text-align: left; font-size: 12px; color: inherit; }
.thug-hub-nav button:hover { background: #ffffff08; }
.custom-background-form { margin-bottom: 20px; }
.custom-background-form h4 { margin: 0 0 10px; }
.custom-background-form input[type="url"], .library-dialog input, #library-form input, #library-form textarea { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--border); background: var(--sidebar); border-radius: 8px; color: inherit; font: inherit; }
.custom-background-form input[type="range"] { width: 100%; accent-color: var(--red); }
body[data-custom-background="true"]:not([data-high-contrast="true"]):not([data-background-effects="false"]) .main-panel { background: linear-gradient(rgb(10 11 14 / var(--background-dim,.85)),rgb(10 11 14 / var(--background-dim,.85))),var(--personal-background) center/cover; }
.library-dialog { width: min(900px,calc(100vw - 16px)); padding: 0; }
.library-dialog[open] { display: flex; flex-direction: column; max-height: calc(var(--app-height,100dvh) - 16px); }
.library-dialog .settings-header { flex-shrink: 0; }
.library-dialog .settings-header h2 { font-size: 20px; }
.library-body { padding: 20px; overflow: auto; min-height: 0; }
.library-entries { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr)); gap: 14px; }
.library-card { min-width: 0; padding: 18px; background: #ffffff03; border: 1px solid var(--border); border-radius: 12px; }
.library-card h3 { margin: 0 0 12px; font-size: 17px; overflow-wrap: anywhere; }
.library-card p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 13px; color: var(--muted); }
.library-card .secondary-button { display: inline-block; margin: 6px 8px 0 0; }
#library-form textarea { resize: vertical; }
.message-link { color: #ebabb1; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.voice-connection-status { font-size: 11px; line-height: 1.5; margin: 6px 0; color: #d8c7c8; overflow-wrap: anywhere; }
#voice-sidebar-actions { display: flex; flex-wrap: wrap; gap: 5px; }
#voice-sidebar-actions button { min-width: 0; font-size: 10px; padding: 6px 7px; }
.voice-feedback { display: none; }
@media (max-width: 900px) {
  .workspace:not(.menu-open) .voice-feedback:not([hidden]) { display: block; position: fixed; z-index: 18; bottom: 92px; left: 10px; width: min(300px,calc(100vw - 20px)); padding: 10px 12px; background: #14151bf2; border: 1px solid #ef38383b; border-radius: 10px; box-shadow: 0 8px 25px #0006; }
  .voice-feedback p { font-size: 11px; line-height: 1.5; margin: 0; }
  .voice-feedback > div { display: flex; gap: 6px; margin-top: 7px; }
  .voice-feedback button { font-size: 10px; padding: 5px 8px; }
}
@media (max-height: 600px) { .thug-hub-nav > div { grid-template-columns: repeat(3,minmax(0,1fr)); }.thug-hub-nav button { min-width: 0; font-size: 10px; padding: 5px; overflow-wrap: anywhere; } }
@media (max-width: 480px) { #background-url,#library-form input,#library-form textarea { font-size: 16px; }.library-body { padding: 14px; } }
.admin-members-grid[data-rank="0.5"] { grid-template-columns: minmax(0,1fr); }
@media (max-width: 480px) {
  .permission-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .permission-toggle { grid-column: 1/-1; text-align: left; }
}
@media (max-width: 900px) {
  .channel-header .mobile-menu { display: grid; }
  .menu-open .sidebar .close-channels { display: grid; }
}
.voice-stage { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; width:100%; margin:14px 0; }
.voice-video-tile { position:relative; min-width:0; margin:0; overflow:hidden; border:1px solid #ffffff1a; border-radius:12px; background:#08090c; }
.voice-video-tile canvas { display:block; width:100%; max-height:55vh; aspect-ratio:auto; object-fit:contain; }
.voice-video-tile figcaption { padding:9px 12px; font-size:12px; overflow-wrap:anywhere; padding-right:85px; }
.voice-video-tile > button { position:absolute; right:7px; bottom:6px; padding:5px 8px; font-size:11px; }
.voice-video-tile:fullscreen { display:flex; flex-direction:column; justify-content:center; }
.voice-video-tile:fullscreen canvas { max-height:90vh; }
#voice-media-status:empty { display:none; }
.voice-controls button { font-size:12px; padding:9px 11px; }
@media(max-width:900px){ .conversation:has(#voice-content:not([hidden])) { padding-bottom:210px; } }
.voice-local-video { display:block; width:100%; max-height:55vh; aspect-ratio:auto; object-fit:contain; }
.voice-video-tile:fullscreen video { max-height:90vh; }
.admin-voice-controls { width:100%; border:1px solid #ffffff18; border-radius:10px; padding:12px; margin-bottom:8px; }
.admin-voice-controls h4 { margin:0 0 8px; font-size:13px; }
.admin-voice-controls label { display:block; margin:8px 0 5px; font-size:12px; }
.admin-voice-controls select { width:100%; min-width:0; }
.voice-control-icon { width:15px; height:15px; margin-right:6px; vertical-align:-3px; }
#my-profile.voice-self-deafened::after { background-image:url('../assets/deafened.svg'); }
/* Larger readable controls with the existing responsive layout. */
:root { --text-size:17px; }
.channel-button { font-size:15px; min-height:40px; gap:10px; }
.channel-group summary,.member-section-title,.sidebar-heading { font-size:12px; }
.channel-symbol { width:23px; font-size:19px; }
.member-list-person,.channel-voice-member { font-size:15px; padding:9px 7px; min-height:42px; }
.member-list-person .member-avatar,.channel-voice-member .member-avatar { width:34px; height:34px; }
.mute-badge { width:21px; height:21px; padding:2px; }
.voice-control-icon { width:21px; height:21px; vertical-align:-5px; }
.voice-controls button,#voice-sidebar-actions button { font-size:14px; min-height:40px; padding:9px 12px; }
.voice-participant { font-size:16px; }
.voice-participant small,.voice-notice,.voice-connection-status { font-size:13px; }
.voice-content h3 { font-size:17px; }
.message-author { font-size:16px; }
.read-all-button { font-size:13px; min-height:38px; }
.guest-profile strong { font-size:15px; }
#voice-privacy-dialog { max-width:540px; line-height:1.65; font-size:15px; }
#voice-privacy-dialog a { color:#ffb7bc; text-decoration:underline; }
#voice-privacy-dialog button { font-size:15px; min-height:44px; }
@media(min-width:1181px){ .workspace { grid-template-columns:minmax(250px,var(--sidebar-size)) minmax(0,1fr) 245px; } }
@media(max-width:900px){ .voice-feedback p,.voice-feedback button { font-size:13px; } }

.composer textarea { font-size:16px; }
.channel-header h1 { font-size:20px; }
.wordmark strong { font-size:16px; }
.owner-role,.staff-role { font-size:12px; }

.voice-participant { display:grid; grid-template-columns:40px minmax(0,1fr) auto; column-gap:10px; row-gap:3px; }
.voice-participant .voice-person-avatar { grid-column:1; grid-row:1 / 3; }
.voice-participant > span:nth-child(2) { grid-column:2; grid-row:1; }
.voice-participant .owner-role,.voice-participant .staff-role { grid-column:3; grid-row:1; white-space:nowrap; }
.voice-participant small { grid-column:2 / 4; grid-row:2; margin-left:0; overflow-wrap:normal; }
#voice-privacy-dialog { max-height:calc(var(--app-height,100dvh) - 24px); overflow-y:auto; }