/* SPDX-License-Identifier: AGPL-3.0-only
 * GuildCmd homepage overlay for the unchanged WebSpeak v0.2.8 client.
 * Only data-ws-page="home" is affected; voice and admin keep upstream styles.
 * This stylesheet is served as readable source at /guildcmd-home.css.
 */
.guildcmd-source { display: none; }
body:has(.ws-skin-root[data-ws-page="home"]) { position: relative; }
body:has(.ws-skin-root[data-ws-page="home"]) .guildcmd-source {
  display: block;
  position: absolute;
  right: max(48px, calc((100% - 1184px) / 2));
  bottom: 24px;
  font-size: 10px;
  line-height: 14px;
}
.guildcmd-source a { color: #82919e; text-decoration: none; }
.guildcmd-source a:hover { color: #8fd5ce; text-decoration: underline; }
.guildcmd-source a:focus-visible { outline: 2px solid #8fd5ce; outline-offset: 4px; }
.ws-skin-root[data-ws-page="home"][data-ws-skin] {
  --gc-home-bg: #0b111a;
  --gc-home-surface: #131e2a;
  --gc-home-field: #0f1823;
  --gc-home-text: #edf1f3;
  --gc-home-muted: #96a5b5;
  --gc-home-border: #293747;
  --gc-home-accent: #8fd5ce;
  --gc-home-gold: #dfc59b;
  --gc-home-shadow: 0 28px 80px #0005;
  --surface-0: var(--gc-home-bg);
  --surface-1: var(--gc-home-surface);
  --surface-2: var(--gc-home-field);
  --text-primary: var(--gc-home-text);
  --text-muted: var(--gc-home-muted);
  --accent: var(--gc-home-accent);
  --border: var(--gc-home-border);
  background: var(--gc-home-bg);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin="builtin.light"] {
  --gc-home-bg: #f5f4ef;
  --gc-home-surface: #fffefa;
  --gc-home-field: #f4f5f2;
  --gc-home-text: #24313d;
  --gc-home-muted: #687683;
  --gc-home-border: #dce1df;
  --gc-home-accent: #327b78;
  --gc-home-gold: #967449;
  --gc-home-shadow: 0 24px 70px #354d5e12;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] [data-ws-part="home.header"] :is(.github-button, .qq-button, .bilibili-button) {
  display: none !important;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 85% 29%, #bc956011, transparent 48%),
    radial-gradient(ellipse at 5% 100%, #4a99a017, transparent 52%),
    var(--gc-home-bg);
  color: var(--gc-home-text);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--gc-home-border) .7px, transparent .8px);
  background-size: 28px 28px;
  mask-image: linear-gradient(150deg, transparent 22%, #0005 65%, transparent 100%);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page::after {
  content: "";
  position: absolute;
  inset: 20% 0 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 460'%3E%3Cg fill='none' stroke='%238fd5ce' stroke-width='.7'%3E%3Cpath d='M0 245C180 245 170 125 360 125S610 365 800 245S940 125 1000 125'/%3E%3Cpath d='M0 257C180 257 170 150 360 150S610 340 800 257S940 150 1000 150'/%3E%3Cpath d='M0 269C180 269 170 175 360 175S610 315 800 269S940 175 1000 175'/%3E%3Cpath d='M0 281C180 281 170 200 360 200S610 290 800 281S940 200 1000 200'/%3E%3Cpath d='M0 293C180 293 170 225 360 225S610 265 800 293S940 225 1000 225'/%3E%3Cpath d='M0 305C180 305 170 250 360 250S610 240 800 305S940 250 1000 250'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / min(1100px, 100%) auto;
  opacity: .13;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page :is(.join-header, .join-content, .join-footer) {
  width: min(1184px, calc(100% - 96px));
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-header {
  min-height: 94px;
  padding: 0;
  gap: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--gc-home-border) 70%, transparent);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #8fd5ce20;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .brand-lockup strong {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.04em;
  color: var(--gc-home-text);
  text-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .brand-lockup small {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--gc-home-muted);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .header-tools {
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .header-note {
  margin-right: 10px;
  font-size: 11px;
  color: var(--gc-home-muted);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page :is(.changelog-button, .guide-button, .skin-trigger, .language-trigger) {
  min-height: 34px;
  padding: 0 10px;
  background: transparent;
  color: var(--gc-home-muted);
  border: 1px solid var(--gc-home-border);
  border-radius: 9px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page :is(.changelog-button, .guide-button, .skin-trigger, .language-trigger):hover {
  background: var(--gc-home-surface);
  color: var(--gc-home-text);
  border-color: var(--gc-home-accent);
  transform: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .version-badge {
  min-height: 24px;
  padding: 0 7px;
  color: var(--gc-home-muted);
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: 500;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-content {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(48px, 7vw, 96px);
  padding: 64px 0 76px;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-copy {
  max-width: 560px;
  padding-block: 20px;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .eyebrow {
  color: var(--gc-home-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--gc-home-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gc-home-accent) 9%, transparent);
  animation: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-copy h1 {
  margin: 26px 0 24px;
  color: var(--gc-home-text);
  font-size: clamp(42px, 4.6vw, 66px);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.055em;
  text-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-copy h1 em {
  color: var(--gc-home-gold);
  text-shadow: none;
  animation: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-description {
  max-width: 450px;
  color: var(--gc-home-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.95;
  text-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: var(--gc-home-accent);
  background: color-mix(in srgb, var(--gc-home-accent) 10%, transparent);
  border-radius: 9px;
  box-shadow: none;
  animation: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-item b {
  display: block;
  padding-top: 1px;
  color: var(--gc-home-text);
  font-size: 12px;
  font-weight: 500;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-item small {
  margin-top: 5px;
  color: var(--gc-home-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.65;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .visitor-count {
  margin-top: 34px;
  padding: 7px 11px 7px 7px;
  color: var(--gc-home-muted);
  background: transparent;
  border: 1px solid var(--gc-home-border);
  box-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .visitor-count::before,
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page :is(.visitor-count-orbit, .visitor-count-spark) {
  opacity: .25;
  animation: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .visitor-count-icon {
  color: var(--gc-home-accent);
  background: var(--gc-home-surface);
  box-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page :is(.visitor-count-label, .visitor-count-total) {
  color: var(--gc-home-muted);
  font-size: 10px;
  font-weight: 400;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  padding: 34px;
  border: 1px solid var(--gc-home-border);
  border-radius: 24px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gc-home-surface) 95%, var(--gc-home-accent)), var(--gc-home-surface) 50%);
  box-shadow: var(--gc-home-shadow), 0 0 70px #6c9b9a08;
  backdrop-filter: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gc-home-accent), transparent);
  opacity: .6;
  pointer-events: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-card h2 {
  margin: 8px 0 10px;
  color: var(--gc-home-text);
  font-size: 27px;
  font-weight: 550;
  letter-spacing: -.025em;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .card-lead {
  margin-bottom: 16px;
  color: var(--gc-home-muted);
  font-size: 12px;
  font-weight: 400;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .field-label {
  margin-bottom: 0;
  color: var(--gc-home-text);
  font-size: 12px;
  font-weight: 500;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .field-wrap {
  min-height: 48px;
  margin-bottom: 12px;
  color: var(--gc-home-muted);
  background: var(--gc-home-field);
  border: 1px solid var(--gc-home-border);
  border-radius: 11px;
  box-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .field-wrap:focus-within {
  border-color: var(--gc-home-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-home-accent) 10%, transparent);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .field-wrap input {
  color: var(--gc-home-text);
  background: transparent;
  font-size: 14px;
  font-weight: 400;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .field-wrap input:focus-visible {
  outline: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .field-wrap input::placeholder {
  color: color-mix(in srgb, var(--gc-home-muted) 72%, transparent);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .identity-options summary {
  color: var(--gc-home-muted);
  font-size: 11px;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .identity-warning {
  margin-top: 4px;
  color: var(--gc-home-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .connect-button {
  min-height: 48px;
  margin-top: 8px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .connect-button:not(:disabled) {
  color: #12252c;
  background: linear-gradient(110deg, #b0ddd4, #8ecdd1);
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .connect-button:not(:disabled):hover {
  filter: brightness(1.08);
  box-shadow: 0 5px 22px #8fd5ce20;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .connect-button:disabled {
  color: var(--gc-home-muted);
  background: color-mix(in srgb, var(--gc-home-accent) 14%, var(--gc-home-field));
  opacity: .65;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-card-waveform {
  color: var(--gc-home-accent);
  opacity: .65;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-card-sonar {
  color: var(--gc-home-accent);
  opacity: .25;
}
.ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-footer {
  box-sizing: border-box;
  padding-right: 76px;
  min-height: 62px;
  color: var(--gc-home-muted);
  border-top: 1px solid var(--gc-home-border);
  font-size: 10px;
  opacity: .65;
}
@media (min-width: 981px) and (max-height: 800px) {
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-content {
    padding-block: 34px 42px;
  }
}
@media (max-width: 980px) {
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page :is(.join-header, .join-content, .join-footer) {
    width: calc(100% - 48px);
  }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-header { padding-block: 18px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-copy h1 { font-size: 42px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-list { gap: 14px; grid-template-columns: 1fr; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-card { padding: 26px; }
}
@media (max-width: 740px) {
  html:has(.ws-skin-root[data-ws-page="home"]),
  body:has(.ws-skin-root[data-ws-page="home"]),
  body:has(.ws-skin-root[data-ws-page="home"]) #app {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  body:has(.ws-skin-root[data-ws-page="home"]) .guildcmd-source { right: 18px; bottom: 12px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] {
    height: auto;
    min-height: var(--ws-viewport-height, 100svh);
    max-height: none;
  }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page {
    height: auto;
    min-height: var(--ws-viewport-height, 100svh);
    max-height: none;
  }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page :is(.join-header, .join-content, .join-footer) {
    width: calc(100% - 36px);
  }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-header { min-height: 76px; padding: 16px 0; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: auto;
    overflow: visible;
    padding: 22px 0 36px;
  }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-card { max-width: 520px; padding: 28px 24px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-copy { width: 100%; max-width: 520px; padding: 8px 4px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-copy h1 { margin-block: 20px; font-size: clamp(30px, 8.5vw, 40px); }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-description { font-size: 13px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .promise-item { flex-direction: column; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .field-wrap input { font-size: 16px; }
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page .join-footer {
    min-height: 96px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 6px;
    padding: 12px 0 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page *,
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page *::before,
  .ws-skin-root[data-ws-page="home"][data-ws-skin] .join-page *::after {
    animation: none !important;
    transition: none !important;
  }
}