:root {
  --ink: #292d2b;
  --muted: #6c736f;
  --faint: #909690;
  --page: #f1efe8;
  --paper: #faf9f5;
  --paper-deep: #e9e6dd;
  --line: #d7d3c8;
  --accent: #50685c;
  --accent-soft: #dce4de;
  --warning: #9b6544;
  --chart: #607a6d;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.lab-shell {
  width: min(1260px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 42px;
}

.topbar {
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.brand {
  width: fit-content;
  font-family: var(--serif);
  font-size: 21px;
}

.nav-links {
  display: flex;
  gap: 32px;
  color: var(--muted);
  font-size: 13px;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a.is-active {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 7px;
}

.system-pill {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  background: rgba(250, 249, 245, 0.55);
  font-size: 12px;
  text-transform: capitalize;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.signal-lost .status-dot {
  background: var(--warning);
}

.eyebrow,
.meta-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.section-block {
  padding: 62px 0 28px;
}

.section-heading,
.panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.section-heading h2,
.panel-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.update-time {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.section-heading-actions {
  display: grid;
  justify-items: end;
  gap: 9px;
}

.section-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dashboard-summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  padding: 54px 0 46px;
  border-bottom: 1px solid var(--line);
}

.dashboard-summary h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dashboard-clock {
  min-width: 220px;
  padding: 18px 0 5px 24px;
  border-left: 1px solid var(--line);
}

.dashboard-time {
  margin: 0;
  font-family: var(--mono);
  font-size: 29px;
  letter-spacing: -0.04em;
}

.dashboard-date {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.connection-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding: 16px 18px;
  border: 1px solid #d8cfbc;
  border-radius: 4px;
  background: #f7f1e4;
  color: #675b49;
  font-size: 13px;
}

.connection-note[hidden],
.camera-offline[hidden] {
  display: none;
}

.signal-lost .connection-note {
  border-color: #cfa98f;
  background: #f5e9df;
  color: #754d38;
}

.connection-note strong {
  display: block;
  margin-bottom: 4px;
}

.connection-note code {
  color: #796a53;
  font-family: var(--mono);
  font-size: 11px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 0 34px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.site-footer p {
  margin: 0;
}
.camera-section {
  padding: 24px 0 70px;
}

.camera-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 18px;
}

.camera-panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.camera-expanded {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.panel-heading {
  margin-bottom: 22px;
}

.panel-heading h2,
.panel-heading h3 {
  margin: 0;
  font-size: 28px;
}

.camera-feed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}

.camera-feed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-panel.is-offline .camera-feed img {
  opacity: 0.2;
  filter: grayscale(1);
}

.camera-offline {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  padding: 24px;
  background: rgba(233, 230, 221, 0.88);
  color: var(--muted);
  text-align: center;
}

.camera-offline p {
  margin: 0 0 6px;
  color: var(--ink);
  font-weight: 600;
}

.camera-offline small {
  font-size: 12px;
}

.camera-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.camera-placeholder p {
  margin: 18px 0 5px;
  color: var(--ink);
  font-size: 14px;
}

.camera-placeholder small {
  font-size: 12px;
}

.camera-icon {
  position: relative;
  width: 42px;
  height: 30px;
  border: 1px solid var(--muted);
  border-radius: 3px;
}

.camera-icon::before {
  position: absolute;
  top: 8px;
  left: 14px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  content: "";
}
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.sensor-card {
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(36, 40, 37, 0.025);
}

.card-topline,
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sensor-type,
.status-tag {
  color: var(--muted);
  font-size: 11px;
  text-transform: capitalize;
}

.status-tag {
  color: var(--accent);
}

.sensor-card[data-state="stale"] .status-tag,
.sensor-card[data-state="unavailable"] .status-tag,
.sensor-card[data-state="under"] .status-tag,
.sensor-card[data-state="over"] .status-tag {
  color: var(--warning);
}

.sensor-card[data-health="attention"] {
  border-color: #cfa98f;
}

.sensor-card[data-health="attention"] .status-tag {
  color: var(--warning);
  font-weight: 700;
}

.sensor-reading {
  margin: 30px 0 16px;
  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.sensor-reading small {
  margin-left: 5px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0;
}

.card-footer {
  padding-top: 18px;
}

.card-footer > div {
  min-width: 0;
  width: 100%;
}

.card-footer h3 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.card-footer h3 a:hover,
.card-footer h3 a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-footer p {
  margin: 0;
  overflow: hidden;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-map-section {
  padding-bottom: 0;
}

.weather-map-location {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.weather-map-frame {
  position: relative;
  width: 100%;
  height: clamp(360px, 54vw, 620px);
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-deep);
}

.weather-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .weather-map-location {
    margin-top: 8px;
  }

  .weather-map-frame {
    height: 430px;
    margin-top: 22px;
  }
}
.sensor-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.sensor-type-list button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px 9px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.sensor-type-list button:hover,
.sensor-type-list button:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}

.sensor-type-list button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.sensor-type-list small {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 10px;
  background: rgba(36, 40, 37, 0.07);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9px;
  text-align: center;
}

.sensor-card[hidden] {
  display: none;
}
.sensor-card[data-device-class="humidity"] {
  --chart: #657b83;
}

.sensor-card[data-device-class="power"],
.sensor-card[data-device-class="energy"] {
  --chart: #8a704c;
}

.sensor-card[data-device-class="battery"] {
  --chart: #6f7853;
}

.sensor-card {
  container-type: inline-size;
}

.sensor-chart-frame {
  position: relative;
  width: 100%;
  height: clamp(180px, 24cqw, 360px);
  border-bottom: 1px solid var(--line);
}

.sparkline {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.sensor-chart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  color: var(--faint);
  font-size: 9px;
}

.history-ranges {
  display: none;
  align-items: center;
  gap: 4px;
}

.lab-shell[data-telemetry-history-enabled-value="true"] .history-ranges {
  display: flex;
}

.chart-downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  max-width: 100%;
}

.sensor-chart-actions button {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
}

.sensor-chart-actions button:hover,
.sensor-chart-actions button.is-active {
  color: var(--ink);
  border-color: var(--muted);
}

.sensor-chart-actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.sensor-cycle-analysis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 1.4fr);
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--chart, var(--accent));
  border-radius: 4px;
  background: color-mix(in srgb, var(--chart, var(--accent)) 5%, var(--paper));
}

.sensor-cycle-analysis[hidden] {
  display: none;
}

.sensor-cycle-analysis div {
  display: grid;
  gap: 4px;
}

.sensor-cycle-analysis span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sensor-cycle-analysis strong {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
}

.sensor-cycle-analysis p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.sensor-cycle-analysis[data-confidence="unavailable"] {
  border-left-color: var(--line);
  background: transparent;
}

@container (max-width: 520px) {
  .sensor-cycle-analysis {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.barrel-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: 26px 64px;
  padding: 62px 0;
  border-bottom: 1px solid var(--line);
}

.barrel-copy h2 {
  max-width: 500px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.barrel-copy > p:not(.eyebrow) {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.65;
}

.barrel-copy .barrel-rule {
  margin-top: 28px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
}

.barrel-calculator {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.8fr);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.barrel-calculator form {
  padding: 26px;
  border-right: 1px solid var(--line);
}

.mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.mode-switch legend {
  width: 100%;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
}

.mode-switch label {
  color: var(--muted);
  font-size: 12px;
}

.difficulty-field {
  display: grid;
  gap: 7px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
}

.difficulty-field select {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: 0;
  background: #fff;
}

.difficulty-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.difficulty-field small {
  color: var(--muted);
  font-weight: 400;
}

.barrel-fields {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.barrel-fields[hidden] {
  display: none;
}

.barrel-fields label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
}

.barrel-fields input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: 0;
  background: #fff;
}

.barrel-fields input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.barrel-result {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  background: var(--paper-deep);
}

.barrel-result > div + div {
  margin-top: 24px;
}

.barrel-result span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
}

.barrel-result strong {
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

.barrel-result > p {
  margin: 23px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.barrel-result .barrel-error {
  color: var(--warning);
}

.barrel-error:empty {
  display: none;
}

.boss-benchmarks {
  grid-column: 1 / -1;
  margin-top: 18px;
}

.boss-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 20px;
}

.boss-heading h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
}

.boss-heading > p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.boss-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.boss-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.boss-table-wrap th,
.boss-table-wrap td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.boss-table-wrap thead th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.boss-table-wrap th:first-child {
  text-align: left;
}

.boss-table-wrap tbody th {
  font-weight: 600;
}

.boss-table-wrap tbody small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-weight: 400;
}

.boss-table-wrap tbody tr:last-child th,
.boss-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.barrel-caveat {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .barrel-section {
    grid-template-columns: 1fr;
  }

  .boss-heading {
    display: block;
  }

  .boss-heading > p {
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .barrel-calculator {
    grid-template-columns: 1fr;
  }

  .barrel-calculator form {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
.florida-man-section {
  border-bottom: 1px solid var(--line);
}

.florida-man-intro {
  max-width: 590px;
  margin: 18px 0 30px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}

.florida-man-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.florida-man-story {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 245, 0.45);
}

.florida-man-story.is-featured {
  grid-column: 1 / -1;
  background: var(--paper);
}

.florida-man-story a {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 24px;
  transition: background 150ms ease;
}

.florida-man-story a:hover,
.florida-man-story a:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.florida-man-story.is-featured a {
  min-height: 230px;
  padding: 30px;
}

.florida-man-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 24px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.florida-man-story h3 {
  max-width: 780px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 29px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.florida-man-story.is-featured h3 {
  font-size: clamp(27px, 3.2vw, 40px);
}

.florida-man-link {
  margin-top: auto;
  padding-top: 28px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.florida-man-link::after {
  content: " ↗";
}

.florida-headline-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px 10px 0;
  font-family: var(--mono);
  font-size: 11px;
}

.florida-headline-pagination p {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.florida-headline-pagination p span {
  margin-left: 4px;
}

.florida-headline-pagination a:last-child,
.florida-headline-pagination span:last-child {
  text-align: right;
}

.florida-headline-pagination [aria-disabled="true"] {
  color: var(--muted);
  opacity: 0.55;
}

turbo-frame#florida-headlines[busy] {
  opacity: 0.55;
  transition: opacity 120ms ease;
}

.florida-man-empty {
  margin-top: 30px;
  padding: 34px;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: rgba(250, 249, 245, 0.35);
  font-family: var(--serif);
  text-align: center;
}

.florida-man-empty p {
  margin: 0;
}

.florida-source-heading {
  max-width: 760px;
  padding: 72px 0 38px;
}

.florida-source-heading h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.florida-source-heading > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.65;
}

.florida-source-global {
  margin-top: 24px;
  font-size: 12px;
}

.florida-source-list {
  margin-bottom: 80px;
  border-top: 1px solid var(--line);
}

.florida-source-row {
  padding: 24px 10px;
  border-bottom: 1px solid var(--line);
}

.florida-source-row > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.florida-source-row h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
}

.florida-source-state {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.florida-source-row.is-healthy .florida-source-state {
  border-color: var(--accent);
  color: var(--accent);
}

.florida-source-row.is-failed .florida-source-state {
  border-color: var(--warning);
  color: var(--warning);
}

.florida-source-row dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin: 24px 0 0;
}

.florida-source-row dt {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.florida-source-row dd {
  margin: 7px 0 0;
  font-family: var(--mono);
  font-size: 12px;
}

.florida-source-error {
  margin: 20px 0 0;
  padding: 12px;
  border-left: 3px solid var(--warning);
  color: var(--warning);
  background: rgba(155, 101, 68, 0.08);
  font-family: var(--mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .florida-man-grid {
    grid-template-columns: 1fr;
  }

  .florida-man-story.is-featured {
    grid-column: auto;
  }

  .florida-man-story a,
  .florida-man-story.is-featured a {
    min-height: 180px;
    padding: 21px;
  }

  .florida-man-meta {
    display: block;
  }

  .florida-man-meta time {
    display: block;
    margin-top: 6px;
  }

  .florida-headline-pagination {
    grid-template-columns: 1fr 1fr;
    padding-right: 0;
    padding-left: 0;
  }

  .florida-headline-pagination p {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .florida-source-row dl {
    grid-template-columns: 1fr;
  }
}
.sensors-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  padding: 58px 0 46px;
  border-bottom: 1px solid var(--line);
}

.sensors-hero h1,
.sensor-detail-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 78px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.sensors-intro {
  max-width: 650px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.sensors-updated {
  flex: 0 0 auto;
  padding-bottom: 4px;
}

.sensor-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.sensor-summary-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
}

.sensor-summary-grid > div + div {
  border-left: 1px solid var(--line);
}

.sensor-summary-grid span {
  color: var(--muted);
  font-size: 12px;
}

.sensor-summary-grid strong {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}

.sensor-monitor {
  padding-top: 54px;
}

.sensor-search input {
  width: min(300px, 33vw);
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
}

.sensor-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.sensors-page .sensor-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.sensor-empty-state {
  margin-top: 30px;
  padding: 54px 24px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  color: var(--muted);
  text-align: center;
}

.sensor-empty-state[hidden] {
  display: none;
}

.sensor-empty-state strong,
.sensor-empty-state span {
  display: block;
}

.sensor-empty-state strong {
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}

.sensor-detail-hero {
  padding: 34px 0 40px;
  border-bottom: 1px solid var(--line);
}

.sensor-detail-hero h1 {
  max-width: 970px;
  font-size: clamp(40px, 6vw, 70px);
  overflow-wrap: anywhere;
}

.breadcrumbs {
  display: flex;
  gap: 9px;
  margin-bottom: 44px;
  color: var(--muted);
  font-size: 12px;
}

.breadcrumbs a:hover {
  color: var(--ink);
}

.sensor-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

.sensor-detail-meta b {
  font-weight: 400;
}

.sensor-detail-chart {
  padding: 36px 0 64px;
}

.sensor-detail-chart .sensor-grid {
  display: block;
  margin-top: 0;
}

.sensor-card-detailed {
  padding: clamp(22px, 4vw, 42px);
}

.sensor-card-detailed .sensor-reading {
  margin-top: 42px;
  font-size: clamp(64px, 10vw, 116px);
}

.sensor-card-detailed .sensor-chart-frame {
  height: clamp(300px, 42vw, 520px);
}

.sensor-insights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 24px 0 0;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.sensor-insights div {
  padding: 16px 18px;
}

.sensor-insights div + div {
  border-left: 1px solid var(--line);
}

.sensor-insights dt {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.sensor-insights dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
}

.related-sensors {
  padding: 0 0 64px;
}

.related-sensors h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
}

.related-sensor-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.related-sensor-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  font-size: 12px;
}

.related-sensor-list a:hover {
  border-color: var(--accent);
}

.related-sensor-list strong {
  flex: 0 0 auto;
  font-family: var(--mono);
}

.related-sensor-list small {
  margin-left: 3px;
  color: var(--muted);
}

@media (max-width: 700px) {
  .sensors-hero {
    display: block;
    padding: 42px 0 36px;
  }

  .sensors-updated {
    margin-top: 24px;
  }

  .sensor-summary-grid,
  .sensor-insights {
    grid-template-columns: 1fr;
  }

  .sensor-summary-grid > div + div,
  .sensor-insights div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .sensor-monitor .section-heading {
    display: block;
  }

  .sensor-search input {
    width: 100%;
    margin-top: 20px;
  }

  .sensors-page .sensor-grid,
  .related-sensor-list {
    grid-template-columns: 1fr;
  }

  .sensor-card-detailed .sensor-chart-frame {
    height: 300px;
  }
}
.flash {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 50%;
  max-width: min(560px, calc(100% - 30px));
  padding: 12px 16px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(35, 39, 36, 0.12);
  font-size: 13px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.flash.is-leaving {
  transform: translate(-50%, -8px);
  opacity: 0;
  pointer-events: none;
}

.flash-alert {
  border-color: #bd9278;
  color: #74472d;
}

.account-shell,
.private-shell {
  width: min(1180px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
}

.account-shell {
  display: grid;
  place-items: center;
  padding: 60px 0;
}

.account-card {
  width: min(480px, 100%);
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.back-link {
  display: block;
  margin-bottom: 48px;
  color: var(--muted);
  font-size: 12px;
}

.account-card h1,
.settings-copy h1,
.discord-heading h1,
.message-panel h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.account-intro,
.settings-copy > p,
.discord-heading > p {
  color: var(--muted);
  line-height: 1.65;
}

.stacked-form {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label,
.message-form label {
  font-size: 12px;
  font-weight: 600;
}

.field input,
.field select,
.message-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: 0;
  background: #fff;
}

.field input,
.field select {
  height: 44px;
  padding: 0 12px;
}

.field input:focus,
.field select:focus,
.message-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.field small,
.message-form small {
  color: var(--muted);
  font-size: 11px;
}

.primary-button,
.secondary-button,
.button-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.primary-button {
  color: #fff;
  background: var(--accent);
}

.secondary-button,
.button-link {
  color: var(--accent);
  background: transparent;
}

.text-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.setup-note,
.plain-note,
.form-errors {
  margin-top: 28px;
  padding: 15px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.setup-note code {
  color: var(--ink);
}

.site-footer form {
  display: inline;
}
.sensor-type-list {
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 7px;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}

.sensor-type-list button {
  flex: 0 0 auto;
  padding: 8px 9px 8px 11px;
  font-size: 11px;
}

.sensor-attention-filter {
  border-color: #cfa98f !important;
  color: var(--warning) !important;
}

.sensor-attention-filter.is-active {
  background: #f5e9df !important;
}

.sensors-page:not(.sensor-detail-page) .sensor-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}

.sensor-card-overview {
  padding: 20px;
  transition: border-color 120ms ease, transform 120ms ease;
}

.sensor-card-overview:hover {
  border-color: #b9b6ac;
  transform: translateY(-1px);
}

.sensor-card-overview .sensor-reading {
  margin: 24px 0 12px;
  font-size: clamp(44px, 4vw, 58px);
}

.sensor-card-overview .sensor-chart-frame {
  height: 132px;
}

.sensor-card-overview .card-footer {
  gap: 14px;
  min-height: 60px;
  padding-top: 16px;
}

.sensor-card-overview .card-footer > div {
  flex: 1 1 auto;
  width: auto;
}

.sensor-card-open {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.sensor-card-open:hover,
.sensor-card-open:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sensor-card-open span {
  color: var(--accent);
  font-size: 13px;
}

.sensor-card-detailed .card-footer {
  display: none;
}

@media (max-width: 700px) {
  .sensor-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sensor-summary-grid > div {
    display: block;
    padding: 15px 11px;
  }

  .sensor-summary-grid > div + div {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .sensor-summary-grid span {
    display: block;
    min-height: 30px;
    line-height: 1.35;
  }

  .sensor-summary-grid strong {
    display: block;
    margin-top: 8px;
    font-size: 25px;
  }

  .sensor-card-overview .sensor-chart-frame {
    height: 145px;
  }

  .sensor-card-overview .sensor-reading {
    font-size: 52px;
  }
}
.display-shell {
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(80, 104, 92, 0.12), transparent 32rem),
    var(--page);
}

.display-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.display-header .eyebrow,
.display-date,
.display-time {
  margin: 0;
}

.display-date {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.display-time {
  font-family: var(--mono);
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: -0.06em;
}

.display-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.display-action {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  font-size: 13px;
}

.display-action:hover,
.display-action:focus-visible {
  border-color: var(--accent);
}

.display-alerts {
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) 1fr;
  gap: 24px;
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(250, 249, 245, 0.7);
}

.display-alerts.has-alerts {
  border-color: #cfa98f;
  background: #f5e9df;
}

.display-alert-heading .eyebrow {
  margin-bottom: 5px;
}

.display-alerts ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.display-alerts li {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.display-alerts li strong {
  color: var(--ink);
}

.display-grid {
  display: grid;
  grid-template-columns: minmax(390px, 0.9fr) minmax(600px, 1.6fr);
  gap: 24px;
}

.display-grid .weather-map-section,
.display-sensors {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(250, 249, 245, 0.72);
}

.display-grid .weather-map-frame {
  height: calc(100vh - 270px);
  min-height: 500px;
}

.display-sensors h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.display-sensors .sensor-type-list {
  margin-top: 18px;
}

.display-sensors .sensor-type-list button {
  min-height: 44px;
}

.display-sensors .sensor-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.display-sensors .sensor-card {
  padding: 18px;
}

.display-sensors .sensor-reading {
  margin: 18px 0 10px;
  font-size: clamp(42px, 4vw, 62px);
}

.display-sensors .sensor-chart-frame {
  height: 66px;
}

.display-sensors .sensor-card-open {
  display: none;
}

@media (max-width: 1050px) {
  .display-header {
    grid-template-columns: 1fr auto;
  }

  .display-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .display-grid {
    grid-template-columns: 1fr;
  }

  .display-grid .weather-map-frame {
    height: 52vh;
    min-height: 360px;
  }
}

@media (max-width: 650px) {
  .display-shell {
    padding: 16px;
  }

  .display-alerts,
  .display-sensors .sensor-grid {
    grid-template-columns: 1fr;
  }

  .display-alerts ul {
    justify-content: flex-start;
  }

  .display-actions .system-pill {
    margin-left: auto;
  }

  .display-grid .weather-map-section,
  .display-sensors {
    padding: 18px;
  }
}
.admin-heading {
  max-width: 680px;
  padding: 72px 0 42px;
}

.admin-heading h1 {
  margin: 7px 0 14px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
}

.admin-heading > p:last-child,
.admin-overview-card p {
  color: var(--muted);
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: 80px;
}

.admin-overview-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.admin-overview-card h2 {
  margin: 8px 0 14px;
  font-size: 25px;
}

.admin-overview-card p {
  margin-bottom: 0;
  line-height: 1.6;
}

.admin-section-nav-shell {
  position: sticky;
  z-index: 15;
  top: 0;
  background: var(--page);
}

.admin-section-nav {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  margin: 0;
  padding: 15px 0 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.admin-section-nav a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.admin-section-nav a {
  flex: 0 0 auto;
  padding: 0 0 13px;
  border-bottom: 2px solid transparent;
}

.admin-section-nav a:hover,
.admin-section-nav a.is-active {
  color: var(--ink);
}

.admin-section-nav a.is-active {
  border-bottom-color: var(--accent);
}

@media (max-width: 760px) {
  .admin-overview-grid {
    grid-template-columns: 1fr;
  }

  .admin-heading {
    padding-top: 52px;
  }

  .admin-section-nav {
    gap: 20px;
    padding-right: 28px;
    scrollbar-width: none;
  }

  .admin-section-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-section-nav-shell::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--page));
    content: "";
  }
}
.private-header {
  position: relative;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.admin-header .brand.is-active {
  color: var(--accent);
}

.admin-menu {
  display: none;
  margin-left: auto;
}

.admin-menu > summary {
  display: none;
  cursor: pointer;
  list-style: none;
}

.admin-menu > summary::-webkit-details-marker {
  display: none;
}

.private-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.private-header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  color: var(--muted);
  font-size: 12px;
}

.admin-primary-links,
.admin-utility-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.admin-utility-links {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.private-header nav form {
  display: inline;
}

.private-header nav a {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.private-header nav a:hover,
.private-header nav a.is-active {
  color: var(--ink);
}

.private-header nav a.is-active {
  border-bottom-color: var(--accent);
}

.private-header a:focus-visible,
.private-header button:focus-visible,
.admin-menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(50px, 10vw, 130px);
  padding: 80px 0;
}

.settings-copy > p {
  max-width: 440px;
}

.settings-copy .permission-copy {
  margin: 24px 0;
  font-size: 13px;
}

.settings-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.check-field {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.settings-grid + .youtube-session-card {
  margin-top: -38px;
  margin-bottom: 80px;
}

.discord-heading {
  max-width: 720px;
  padding: 72px 0 40px;
}

.server-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.empty-state {
  color: var(--muted);
  font-style: italic;
}

.discord-server-prompt {
  margin: 24px 0 0;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  background: var(--paper-deep);
}

.discord-server-prompt h3 {
  margin: 4px 0 8px;
  font-size: 20px;
}

.discord-server-prompt > :last-child {
  margin-bottom: 0;
  color: var(--muted);
}

@media (max-width: 760px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .private-header .admin-desktop-nav {
    display: none;
  }

  .admin-menu {
    display: block;
  }

  .admin-menu > summary {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
  }

  .admin-menu:not([open]) > nav {
    display: none;
  }

  .admin-menu[open] > nav {
    position: absolute;
    z-index: 30;
    top: calc(100% - 8px);
    right: 0;
    display: grid;
    width: min(300px, calc(100vw - 30px));
    gap: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    box-shadow: 0 18px 42px rgb(35 39 36 / 18%);
  }

  .admin-primary-links,
  .admin-utility-links {
    display: grid;
    gap: 2px;
  }

  .admin-utility-links {
    margin-top: 7px;
    padding: 7px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .private-header nav a,
  .private-header nav .text-button {
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 3px;
    text-align: left;
  }

  .private-header nav a:hover,
  .private-header nav a.is-active,
  .private-header nav .text-button:hover {
    background: var(--page);
  }

  .private-header {
    min-height: 72px;
    gap: 14px;
    padding: 12px 0;
  }
}
.command-heading code,
.command-guide code,
.command-help code {
  color: var(--accent);
  font-family: var(--mono);
}

.command-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.command-card {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.command-card h2 {
  margin-top: 5px;
  font-size: 26px;
}

.command-card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
}

.command-examples {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.command-examples > div {
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.command-examples code {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.command-examples span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.command-card .command-note {
  margin: 18px 0 0;
  font-size: 11px;
}

.command-help {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  align-items: start;
  margin: 56px 0 80px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.command-help h2 {
  margin-top: 5px;
  font-size: 28px;
}

.command-help .button-link {
  margin-top: 10px;
}

.command-publish-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .command-guide,
  .command-help,
  .command-publish-form {
    grid-template-columns: 1fr;
  }
}
.discord-overview-heading {
  padding-bottom: 28px;
}

.discord-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.discord-status-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.discord-status-card span,
.discord-status-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.discord-status-card strong {
  display: block;
  margin: 8px 0;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.discord-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.discord-voice-activity {
  margin-top: 28px;
}

.discord-voice-activity > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.discord-voice-activity h2 {
  margin: 4px 0 0;
}

#discord-voice-activity {
  display: block;
}

.discord-voice-activity .voice-now-playing {
  margin-top: 0;
}

.discord-voice-activity .voice-history {
  margin: 0 0 20px;
}

.discord-failures h2 {
  margin: 4px 0 14px;
  font-size: 28px;
}

.discord-failures {
  margin-top: 46px;
  border-bottom: 1px solid var(--line);
}

.discord-failures article {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) 1fr;
  gap: 20px;
  padding: 14px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.discord-failures span {
  color: var(--warning);
}

@media (max-width: 760px) {
  .discord-overview {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .discord-overview {
    grid-template-columns: 1fr;
  }

  .discord-failures article {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.discord-text-channel-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 8px 7px;
  color: var(--discord-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.025em;
  list-style: none;
  text-transform: uppercase;
  user-select: none;
}

.discord-text-channel-group > summary::-webkit-details-marker { display: none; }

.discord-text-channel-group > summary > span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.discord-text-channel-group > summary i {
  display: inline-block;
  color: var(--discord-faint);
  font-size: 15px;
  font-style: normal;
  line-height: 1;
  transform-origin: center;
  transition: transform 140ms ease;
}

.discord-text-channel-group[open] > summary i { transform: rotate(90deg); }

.discord-text-channel-group > summary small {
  color: var(--discord-faint);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
}

.discord-text-channel-group > summary:hover { color: var(--discord-text); }

.discord-text-channel-group > summary:focus-visible {
  border-radius: 3px;
  outline: 2px solid #5865f2;
  outline-offset: 3px;
}
.message-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.message-panel > header {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}

.message-panel > header small {
  display: block;
  font-size: 10px;
}

.message-list {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
}

.history-control {
  min-height: 30px;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 10px;
}

.history-control button {
  padding: 6px 9px;
  cursor: pointer;
}

.history-control button[hidden] {
  display: none;
}

.message-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.message-attachments {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 12px;
}

.image-attachment {
  display: block;
  max-width: 100%;
}

.image-attachment img {
  display: block;
  max-width: min(100%, 720px);
  max-height: 480px;
  object-fit: contain;
}

.file-attachment {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.muted-message {
  font-style: italic;
}

.message-form {
  flex: 0 0 auto;
}

.message-form > div {
  display: flex;
  gap: 10px;
}

.read-only-channel {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 760px) {
  .message-panel > header,
  .message-list,
  .message-form {
    padding-right: 16px;
    padding-left: 16px;
  }
}
.discord-browser-shell {
  --discord-bg: #313338;
  --discord-panel: #2b2d31;
  --discord-rail: #1e1f22;
  --discord-hover: #35373c;
  --discord-text: #f2f3f5;
  --discord-muted: #b5bac1;
  --discord-faint: #80848e;
  --discord-green: #23a55a;
  --discord-red: #da373c;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #202225;
  border-radius: 12px;
  color: var(--discord-text);
  background: var(--discord-bg);
  box-shadow: 0 24px 60px rgba(38, 40, 43, 0.16);
}

.discord-server-rail {
  display: flex;
  min-height: 0;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 0;
  background: var(--discord-rail);
}

.discord-rail-home,
.discord-rail-server,
.discord-rail-direct-message,
.discord-rail-dm-toggle {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--discord-text);
  background: #35373c;
  font-size: 13px;
  font-weight: 700;
  transition: border-radius 160ms ease, background 160ms ease;
}

.discord-rail-home {
  color: #fff;
  background: #5865f2;
  font-size: 22px;
}

.discord-rail-server img,
.discord-rail-direct-message img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discord-rail-home:hover,
.discord-rail-home.is-active,
.discord-rail-server:hover,
.discord-rail-server.is-active,
.discord-rail-direct-message:hover,
.discord-rail-direct-message.is-active,
.discord-rail-dm-toggle:hover {
  border-radius: 16px;
  background: #5865f2;
}

.discord-rail-home.is-active::before,
.discord-rail-server.is-active::before,
.discord-rail-direct-message.is-active::before {
  position: absolute;
  left: 0;
  width: 4px;
  height: 38px;
  border-radius: 0 4px 4px 0;
  background: #fff;
  content: "";
}

.discord-channel-pane,
.discord-access-pane {
  min-width: 0;
}

.discord-channel-pane {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--discord-panel);
}

.discord-pane-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid #202225;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.discord-pane-header > .discord-live-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--discord-muted);
  font-size: 11px;
  white-space: nowrap;
}

.discord-live-refresh {
  color: color-mix(in srgb, var(--discord-muted) 80%, transparent);
}

/* UI previews keep screenshot baselines deterministic; real server pages show it. */
[data-ui-preview] .discord-live-refresh {
  display: none;
}

.discord-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--discord-green);
  box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.15);
}

.discord-channel-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 10px 28px;
  scrollbar-gutter: stable;
}

.discord-channel-group + .discord-channel-group {
  margin-top: 28px;
}

.discord-channel-group h2 {
  display: flex;
  justify-content: space-between;
  margin: 0 8px 7px;
  color: var(--discord-muted);
  font-size: 11px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.discord-channel-group h2 span {
  color: var(--discord-faint);
  font-weight: 500;
  text-transform: none;
}

.discord-channel-item {
  min-height: 44px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 4px;
  color: var(--discord-muted);
}

.discord-channel-item:hover {
  color: var(--discord-text);
  background: var(--discord-hover);
}

.discord-channel-item.is-locked {
  color: var(--discord-faint);
  opacity: 0.7;
}

.discord-channel-item > span:nth-child(2) {
  min-width: 0;
}

.discord-channel-item strong,
.discord-channel-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-channel-item strong {
  font-size: 14px;
}

.discord-channel-item small {
  margin-top: 2px;
  color: var(--discord-faint);
  font-size: 10px;
}

.discord-channel-symbol {
  color: var(--discord-faint);
  font-size: 19px;
  font-weight: 500;
}

.discord-access-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: var(--discord-faint);
  font-size: 11px;
}

.discord-access-icon.is-ready {
  color: var(--discord-green);
  background: rgba(35, 165, 90, 0.12);
}

.discord-voice-channel {
  padding: 4px 8px 7px;
  border-radius: 4px;
}

.discord-voice-channel:hover {
  background: rgba(53, 55, 60, 0.55);
}

.discord-voice-channel.is-locked {
  opacity: 0.68;
}

.discord-voice-heading {
  min-height: 34px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  color: var(--discord-muted);
  font-size: 14px;
}

.discord-voice-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.discord-live-voice-action {
  padding: 5px 7px;
  border-radius: 4px;
  color: #fff;
  background: #5865f2;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.discord-live-voice-action.is-active { background: var(--discord-green); }
.discord-live-voice-action.is-status { cursor: default; user-select: none; }
.discord-live-voice-action.is-disabled { color: var(--discord-faint); background: #35373c; }

.discord-live-voice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 5px;
  color: #6fdc96;
  background: rgba(35, 165, 90, 0.13);
}

.discord-live-voice-banner strong,
.discord-live-voice-banner small { display: block; }
.discord-live-voice-banner small { margin-top: 2px; color: var(--discord-muted); font-size: 9px; }
.discord-live-voice-banner a { color: inherit; font-size: 10px; font-weight: 700; }
.discord-rail-server.has-image,
.discord-server-avatar.has-image {
  background: transparent;
}
.discord-voice-member {
  min-height: 34px;
  display: grid;
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 0;
  padding: 0 0 0 24px;
  color: var(--discord-muted);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}

.discord-voice-member-form { width: 100%; margin: 0; }

.discord-voice-member.is-clickable { cursor: pointer; }

.discord-voice-member.is-clickable:hover {
  color: var(--discord-text);
  background: var(--discord-hover);
}

.discord-voice-member.is-clickable:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.discord-voice-member > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-member-avatar {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #5865f2;
  font-size: 10px;
  font-weight: 700;
}

.discord-member-avatar.has-image { background: transparent; }

.discord-member-avatar img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.discord-member-avatar i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--discord-panel);
  border-radius: 50%;
  background: var(--discord-green);
}

.discord-voice-states {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--discord-red);
}

.discord-voice-state {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
}

.discord-voice-state svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.discord-voice-live {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.discord-channel-empty {
  margin: 14px 8px;
  color: var(--discord-faint);
  font-size: 12px;
}

.discord-access-pane { background: var(--discord-bg); }
.discord-access-content { padding: 20px 16px; }

.discord-server-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 20px;
}

.discord-server-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  background: #5865f2;
  font-weight: 700;
}

.discord-server-avatar img { width: 100%; height: 100%; object-fit: cover; }
.discord-server-identity strong,
.discord-server-identity small { display: block; }
.discord-server-identity small { margin-top: 4px; color: var(--discord-muted); font-size: 11px; }

.discord-access-card {
  padding: 15px;
  border-radius: 7px;
  background: var(--discord-panel);
}

.discord-access-card-heading,
.discord-access-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.discord-access-card-heading { color: var(--discord-muted); font-size: 12px; }
.discord-access-meter {
  display: block;
  width: 100%;
  height: 5px;
  margin: 12px 0 14px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 4px;
  background: #1e1f22;
}

.discord-access-meter::-webkit-progress-bar { background: #1e1f22; }
.discord-access-meter::-webkit-progress-value { background: var(--discord-green); }
.discord-access-meter::-moz-progress-bar { background: var(--discord-green); }
.discord-access-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.discord-access-card li { color: var(--discord-muted); font-size: 11px; }
.discord-access-card li span { display: flex; align-items: center; gap: 7px; }
.discord-access-card li i { width: 6px; height: 6px; border-radius: 50%; background: var(--discord-green); }
.discord-access-card li i.is-locked { background: var(--discord-red); }

.discord-presence-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 7px;
  background: var(--discord-panel);
}

.discord-presence-status > i { width: 9px; height: 9px; border-radius: 50%; background: var(--discord-green); }
.discord-presence-status.is-offline > i { background: var(--discord-red); }
.discord-presence-status strong,
.discord-presence-status small { display: block; }
.discord-presence-status strong { font-size: 12px; }
.discord-presence-status small { margin-top: 3px; color: var(--discord-faint); font-size: 9px; }
.discord-last-update { margin: 10px 2px 14px; color: var(--discord-faint); font-size: 10px; }
.discord-access-content .discord-access-help-link { color: #8ea1e1; font-size: 11px; }

@media (max-width: 580px) {
  .discord-browser-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 8px; }
  .discord-server-rail {
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
  }
  .discord-rail-divider { width: 2px; height: 32px; flex: 0 0 auto; }
  .discord-rail-home,
  .discord-rail-server,
  .discord-rail-direct-message,
  .discord-rail-dm-toggle { width: 42px; height: 42px; flex: 0 0 auto; }
  .discord-rail-dm-entry { width: 42px; height: 42px; flex: 0 0 auto; }

}
.discord-server-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-columns: 260px minmax(0, 1fr);
}

.discord-direct-message-workspace {
  min-width: 0;
  min-height: 100%;
  height: 100%;
}

.discord-browser-shell {
  height: clamp(520px, calc(100dvh - 150px), 920px);
  margin-bottom: 24px;
}

.discord-server-stage {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.discord-server-stage-content {
  min-width: 0;
  min-height: 100%;
  height: 100%;
  transition: opacity 140ms ease;
}

.discord-server-stage-content.is-loading {
  opacity: 0.42;
  pointer-events: none;
}

.discord-server-loading {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid #202225;
  border-radius: 8px;
  color: var(--discord-text);
  background: rgba(30, 31, 34, 0.94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
  font-size: 12px;
  transform: translate(-50%, -50%);
}

.discord-server-loading[hidden] { display: none; }

.discord-server-loading > span {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(181, 186, 193, 0.3);
  border-top-color: #5865f2;
  border-radius: 50%;
  animation: discord-channel-loading-spin 650ms linear infinite;
}

.discord-main-frame {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-margin-top: 20px;
  background: var(--discord-bg);
}

.discord-main-content {
  min-height: 100%;
  height: 100%;
  transition: opacity 120ms ease;
}

.discord-main-content.is-entering {
  animation: discord-content-enter 140ms ease-out;
}

@keyframes discord-content-enter {
  from { opacity: 0.28; }
}

.discord-main-content.is-loading {
  opacity: 0.38;
  pointer-events: none;
}

.discord-channel-loading {
  position: sticky;
  z-index: 4;
  top: 12px;
  display: flex;
  width: max-content;
  max-width: calc(100% - 24px);
  align-items: center;
  gap: 10px;
  margin: 12px auto -49px;
  padding: 10px 14px;
  border: 1px solid #202225;
  border-radius: 8px;
  color: var(--discord-text);
  background: rgba(30, 31, 34, 0.94);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  pointer-events: none;
}

.discord-channel-loading[hidden] { display: none; }

.discord-channel-loading > span {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(181, 186, 193, 0.32);
  border-top-color: #5865f2;
  border-radius: 50%;
  animation: discord-channel-loading-spin 650ms linear infinite;
}

.discord-channel-loading.is-error { color: #f5a1a4; }
.discord-channel-loading.is-error > span { display: none; }

.discord-channel-loading.is-error,
.discord-server-loading.is-error { pointer-events: auto; }

.discord-server-loading.is-error { color: #f5a1a4; }
.discord-server-loading.is-error > span { display: none; }

.discord-channel-loading button,
.discord-server-loading button {
  padding: 4px 8px;
  border: 1px solid #4e5058;
  border-radius: 4px;
  color: var(--discord-text);
  background: #35373c;
  cursor: pointer;
  font: inherit;
}

.discord-channel-loading button[hidden],
.discord-server-loading button[hidden] { display: none; }

.discord-channel-item.is-loading .discord-access-icon {
  width: 16px;
  height: 16px;
  justify-self: center;
  border: 2px solid rgba(181, 186, 193, 0.28);
  border-top-color: #5865f2;
  background: transparent;
  color: transparent;
  animation: discord-channel-loading-spin 650ms linear infinite;
}

@keyframes discord-channel-loading-spin {
  to { transform: rotate(360deg); }
}

.discord-main-frame .message-panel {
  height: 100%;
  min-height: 0;
  border: 0;
}

.discord-no-server {
  display: grid;
  min-width: 0;
  min-height: 100%;
  place-content: center;
  padding: 48px;
  text-align: center;
}

.discord-no-server > span {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  place-items: center;
  border-radius: 18px;
  color: var(--discord-text);
  background: #5865f2;
  font-size: 28px;
}

.discord-no-server .eyebrow {
  margin: 0 0 7px;
  color: var(--discord-faint);
}

.discord-no-server h2 {
  margin: 0 0 10px;
  color: var(--discord-text);
  font-size: 24px;
}

.discord-no-server p:last-child {
  max-width: 38ch;
  margin: 0;
  color: var(--discord-muted);
  line-height: 1.6;
}

.discord-server-workspace .discord-access-content {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) minmax(280px, 1.15fr);
  align-items: start;
  gap: 20px;
}

.discord-server-workspace .discord-access-card { margin-top: 4px; }

.discord-server-workspace.is-stale .discord-live-dot {
  background: #f0b232;
  box-shadow: 0 0 0 3px rgba(240, 178, 50, 0.15);
}

button.discord-voice-heading {
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

button.discord-voice-heading:focus-visible {
  border-radius: 4px;
  outline: 2px solid #5865f2;
  outline-offset: 2px;
}

.discord-server-playback {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 7px;
  color: var(--discord-muted);
  background: var(--discord-panel);
  font-size: 11px;
}

.discord-server-playback strong,
.discord-server-playback small,
.discord-server-playback [data-playback-status] {
  display: block;
}

.discord-server-playback strong { margin: 4px 0 8px; color: var(--discord-text); }

@media (max-width: 1080px) {
  .discord-server-workspace {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  .discord-server-workspace .discord-access-content { display: block; }
}

@media (max-width: 720px) {
  .discord-server-workspace { grid-template-columns: 1fr; }
  .discord-browser-shell { height: auto; }
  .discord-server-stage { height: auto; overflow: visible; }
  .discord-channel-pane { max-height: min(520px, 55dvh); }
  .discord-server-workspace .discord-access-content { display: block; }
  .discord-no-server { min-height: 360px; padding: 32px 20px; }
  .discord-main-frame { min-height: 480px; }
  .discord-main-frame .message-panel {
    height: 75vh;
    min-height: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discord-main-content,
  .discord-server-stage-content { transition: none; }
  .discord-main-content.is-entering { animation: none; }
  .discord-channel-loading > span,
  .discord-server-loading > span,
  .discord-channel-item.is-loading .discord-access-icon {
    animation-duration: 1400ms;
  }
}
.soundboard-workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin: 48px 0 34px;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
    var(--paper);
}

.soundboard-heading {
  max-width: 680px;
}

.soundboard-heading h1 {
  margin: 8px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 7vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.soundboard-heading p:last-child {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.soundboard-card {
  display: grid;
  gap: 20px;
}

.soundboard-card .form-errors {
  margin-top: 0;
}

.soundboard-add-form {
  gap: 0;
}

.soundboard-form-section {
  display: grid;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.soundboard-form-section:first-child {
  padding-top: 4px;
}

.soundboard-form-section-heading {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.soundboard-form-step {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 800;
}

.soundboard-form-section-heading strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.soundboard-form-section-heading small {
  display: block;
  color: var(--muted);
  line-height: 1.5;
}

.soundboard-name-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 180px);
  gap: 16px;
  align-items: end;
}

.soundboard-icon-field input {
  text-align: center;
  font-size: 1.25rem;
}

.soundboard-form-footer {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
}

.soundboard-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.soundboard-limit-note {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.youtube-session-card {
  margin-bottom: 34px;
  padding: 24px 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.youtube-session-status {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.youtube-session-status h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.youtube-session-status p,
.youtube-session-card details > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.youtube-session-card details {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.youtube-session-card summary {
  cursor: pointer;
  font-weight: 600;
}

.youtube-session-form {
  display: flex;
  gap: 16px;
  align-items: end;
  margin-top: 18px;
}

.youtube-session-form .file-picker {
  flex: 1;
}

.soundboard-history {
  display: grid;
  gap: 16px;
}

.soundboard-history-status {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.soundboard-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.soundboard-upload:last-child {
  border-bottom: 0;
}

.soundboard-upload h3,
.soundboard-upload p {
  margin: 0;
}

.soundboard-upload > div {
  display: grid;
  gap: 4px;
}

.soundboard-upload small {
  color: var(--muted);
}

.soundboard-upload p {
  grid-column: 1 / -1;
  margin-top: 5px;
  color: #74472d;
  font-size: 0.88rem;
}

.upload-status {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.soundboard-activity {
  margin: 42px 0 64px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

@media (max-width: 760px) {
  .soundboard-workspace-header {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .soundboard-name-fields,
  .soundboard-upload {
    grid-template-columns: 1fr;
  }

  .youtube-session-form {
    display: grid;
  }

  .youtube-session-status {
    align-items: start;
  }

  .soundboard-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .soundboard-form-actions {
    justify-content: flex-end;
  }

  .soundboard-history-status {
    justify-content: flex-start;
  }
}
.soundboard-catalog {
  display: grid;
  gap: 22px;
  margin-top: 34px;
}

.soundboard-catalog-frame {
  display: block;
  transition: opacity 140ms ease;
}

.soundboard-catalog-frame[aria-busy="true"]:not([data-background-refresh="true"]) {
  opacity: 0.58;
}

.soundboard-catalog-heading {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
}

.soundboard-catalog-heading h2 {
  margin: 5px 0 6px;
}

.soundboard-catalog-heading p:last-child {
  margin: 0;
  color: var(--muted);
}

.soundboard-catalog-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.76rem;
}

.soundboard-count {
  display: inline-flex;
  min-width: 30px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.soundboard-catalog-toolbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-block: 1px solid var(--line);
}

.soundboard-catalog-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.soundboard-catalog-toolbar form,
.soundboard-sound-footer form {
  margin: 0;
}

.soundboard-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.soundboard-sound {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}

.soundboard-sound-title {
  display: flex;
  gap: 11px;
  align-items: center;
}

.soundboard-sound-title div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.soundboard-sound-title small,
.soundboard-icon-field small {
  color: var(--muted);
  font-size: 0.75rem;
}

.soundboard-sound-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 6px;
  background: var(--page);
  font-size: 1.2rem;
}

.soundboard-sound-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.soundboard-manage-trigger {
  display: grid;
  width: 34px;
  height: 30px;
  flex: 0 0 34px;
  cursor: pointer;
  place-items: center;
  padding: 0 0 6px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.soundboard-manage-trigger:hover,
.soundboard-manage-trigger[aria-expanded="true"] {
  color: var(--ink);
  background: var(--page);
}

.soundboard-sound audio {
  width: 100%;
  height: 36px;
}

.soundboard-sound-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.soundboard-small-button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 0.78rem;
}

.soundboard-activity > summary::-webkit-details-marker {
  display: none;
}

.danger-text {
  color: #8c3f31;
}

.soundboard-backup-error {
  color: #74472d;
}

.soundboard-catalog-loading {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--muted);
}

.soundboard-catalog-loading span {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: soundboard-spin 750ms linear infinite;
}

.soundboard-catalog-loading p {
  margin: 0;
}

.soundboard-activity > summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.soundboard-activity > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.soundboard-activity > summary small {
  color: var(--muted);
  font-weight: 400;
}

.soundboard-activity[open] > summary {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

@keyframes soundboard-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .soundboard-catalog-heading,
  .soundboard-catalog-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .soundboard-catalog-grid {
    grid-template-columns: 1fr;
  }

  .soundboard-catalog-toolbar > div {
    flex-wrap: wrap;
  }
}
.soundboard-server-picker {
  display: grid;
  gap: 20px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--page) 72%, var(--paper));
}

.soundboard-server-picker h2 {
  margin: 5px 0 7px;
  font-size: 1.35rem;
}

.soundboard-server-picker p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.soundboard-server-picker .field {
  margin: 0;
}

.soundboard-server-status {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.75rem;
}

.soundboard-add-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0 28px 28px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  box-shadow: 0 24px 80px rgb(24 26 22 / 24%);
}

.soundboard-add-dialog::backdrop {
  background: rgb(24 26 22 / 52%);
}

.soundboard-dialog-heading {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.soundboard-dialog-heading h2 {
  margin: 4px 0 0;
}

.soundboard-dialog-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  cursor: pointer;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.45rem;
  line-height: 1;
}

.soundboard-dialog-close:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.soundboard-manage-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: inherit;
  background: var(--paper);
  box-shadow: 0 24px 80px rgb(24 26 22 / 26%);
}

.soundboard-manage-dialog::backdrop {
  background: rgb(24 26 22 / 52%);
}

.soundboard-manage-dialog .soundboard-dialog-heading {
  position: static;
  padding: 22px 24px 18px;
}

.soundboard-manage-dialog .soundboard-dialog-heading small,
.soundboard-manage-dialog-body > p,
.soundboard-delete-action small,
.soundboard-manage-dialog .soundboard-icon-field small {
  color: var(--muted);
  font-size: 0.75rem;
}

.soundboard-manage-dialog .soundboard-dialog-heading h2 {
  font-size: 1.35rem;
  line-height: 1.2;
}

.soundboard-manage-dialog-body {
  display: grid;
  gap: 20px;
  max-height: calc(100vh - 218px);
  padding: 20px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.soundboard-manage-dialog-body > p {
  margin: 0;
  line-height: 1.5;
}

.soundboard-sound-actions,
.soundboard-manage-fields {
  display: grid;
  gap: 18px;
}

.soundboard-manage-fields {
  grid-template-columns: minmax(0, 1fr);
}

.soundboard-manage-fields .field {
  margin: 0;
}

.soundboard-manage-name-field input {
  font-size: 0.95rem;
}

.soundboard-remove-icon {
  color: var(--muted);
  font-size: 0.78rem;
}

.soundboard-manage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 62%, var(--paper));
}

.soundboard-delete-action {
  display: grid;
  gap: 2px;
}

.soundboard-delete-action form {
  margin: 0;
}

.soundboard-delete-button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  text-align: left;
}

.soundboard-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.soundboard-dialog-actions button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

@media (max-width: 520px) {
  .soundboard-manage-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .soundboard-manage-dialog .soundboard-dialog-heading,
  .soundboard-manage-dialog-body,
  .soundboard-manage-footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  .soundboard-manage-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .soundboard-dialog-actions {
    justify-content: flex-end;
  }
}
.voice-clip-popover {
  width: min(720px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #202225;
  border-radius: 12px;
  color: #f2f3f5;
  background: #2b2d31;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.voice-clip-popover::backdrop { background: rgba(20, 21, 24, 0.62); }

.voice-clip-popover > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #202225;
  background: #313338;
}

.voice-clip-popover > header small,
.voice-clip-popover > header strong { display: block; }
.voice-clip-popover > header small { color: #949ba4; font-size: 10px; text-transform: uppercase; }
.voice-clip-popover > header strong { margin-top: 3px; }

.voice-clip-popover > header button {
  padding: 4px 9px;
  border: 0;
  color: #b5bac1;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
}

.voice-clip-picker-frame { display: block; min-height: 0; }
.voice-clip-picker-frame[hidden] { display: none; }

.voice-clip-loading {
  display: grid;
  min-height: 240px;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px;
  color: #b5bac1;
  text-align: center;
}

.voice-clip-loading[hidden] { display: none; }

.voice-clip-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(181, 186, 193, 0.28);
  border-top-color: #5865f2;
  border-radius: 50%;
  animation: voice-clip-loading-spin 700ms linear infinite;
}

.voice-clip-loading.is-error { color: #f5a1a4; }
.voice-clip-loading.is-error .voice-clip-loading-spinner { display: none; }

@keyframes voice-clip-loading-spin {
  to { transform: rotate(360deg); }
}

.voice-clip-library {
  display: flex;
  flex-direction: column;
  max-height: calc(min(760px, 100vh - 32px) - 70px);
  padding: 16px;
  overflow: hidden;
}

.voice-clip-library.is-ready {
  display: grid;
  height: calc(min(760px, 100vh - 32px) - 70px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 160px auto auto auto minmax(0, 1fr);
}
.voice-picker-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 6px;
  background: #1e1f22;
}

.voice-picker-tabs button {
  flex: 1;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  color: #b5bac1;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

.voice-picker-tabs button[aria-selected="true"] {
  color: #fff;
  background: #404249;
}

.voice-picker-volume {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.8fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #b5bac1;
  background: #313338;
  font-size: 10px;
  font-weight: 700;
}

.voice-picker-volume > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.voice-picker-volume output { color: #f2f3f5; }
.voice-picker-volume input { width: 100%; accent-color: #5865f2; }

.voice-picker-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.voice-picker-panel[hidden] { display: none; }

.voice-clip-picker-toolbar {
  display: grid;
  gap: 10px;
  padding: 0 0 14px;
  background: #2b2d31;
}

.voice-clip-picker-toolbar input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #1e1f22;
  border-radius: 5px;
  color: #f2f3f5;
  background: #1e1f22;
}

.voice-news-search {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
}

.voice-news-search label { min-width: 0; }
.voice-news-search strong { margin-bottom: 5px; }

.voice-news-search small {
  min-height: 13px;
  grid-column: 1 / -1;
  color: #949ba4;
}

.voice-news-search input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #1e1f22;
  border-radius: 5px;
  color: #f2f3f5;
  background: #1e1f22;
}

.voice-news-results { display: block; }
.voice-news-results[busy] { opacity: 0.62; }
.voice-news-page {
  display: grid;
  gap: 8px;
  min-height: 1px;
}
.voice-news-loading {
  margin: 4px 0;
  color: #949ba4;
  font-size: 10px;
  text-align: center;
}
.voice-news-result-summary {
  margin: 0 0 8px;
  color: #949ba4;
  font-size: 10px;
}

.voice-clip-filters { display: flex; flex-wrap: wrap; gap: 6px; }

.voice-clip-filters button,
.voice-clip-preview-button,
.voice-clip-trigger,
.voice-clip-stop {
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  color: #b5bac1;
  background: #3f4147;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.voice-clip-filters button.is-active,
.voice-clip-trigger { color: #fff; background: #5865f2; }
.voice-clip-stop { color: #f5a1a4; background: rgba(218, 55, 60, 0.14); }
.voice-clip-trigger:disabled { cursor: not-allowed; opacity: 0.45; }

.voice-clip-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #313338;
}

.voice-clip-preview[hidden] { display: none; }

.voice-clip-preview span { min-width: 0; }
.voice-clip-preview small,
.voice-clip-preview strong { display: block; }
.voice-clip-preview small { color: #949ba4; font-size: 10px; }
.voice-clip-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-clip-preview audio { width: min(330px, 50%); height: 32px; }

.voice-picker-connection { display: block; min-height: 16px; color: #949ba4; font-size: 10px; }
.voice-clip-scroll {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.voice-clip-grid { display: grid; min-width: 0; gap: 8px; }
.voice-news-grid { display: grid; gap: 8px; }

.voice-clip-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  border-radius: 6px;
  background: #313338;
}

.voice-clip-item[hidden] { display: none; }

.voice-news-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: 6px;
  background: #313338;
}

.voice-news-item[hidden] { display: none; }
.voice-news-copy { min-width: 0; }
.voice-news-copy strong,
.voice-news-copy small { display: block; }
.voice-news-copy small { margin-top: 4px; color: #949ba4; font-size: 10px; }
.voice-news-copy a { color: #00a8fc; font-size: 10px; }
.voice-news-item form { flex: 0 0 auto; }

.voice-clip-item > div:first-child { min-width: 0; overflow: hidden; }
.voice-clip-item strong,
.voice-clip-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-clip-item small { margin-top: 3px; color: #949ba4; font-size: 10px; }
.voice-clip-item-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.voice-clip-picker-error { color: #f5a1a4; }

@media (max-width: 580px) {
  .voice-clip-library.is-ready {
    grid-template-rows: 180px auto auto auto minmax(0, 1fr);
  }
  .voice-clip-popover { width: calc(100vw - 16px); }
  .voice-clip-item { align-items: stretch; flex-direction: column; }
  .voice-news-item { align-items: stretch; flex-direction: column; }
  .voice-news-item form,
  .voice-news-item .voice-clip-trigger { width: 100%; }
  .voice-news-search { grid-template-columns: minmax(0, 1fr); }
  .voice-news-search button { width: 100%; }
  .voice-clip-item-actions { flex-wrap: wrap; }
  .voice-clip-preview { align-items: stretch; flex-direction: column; }
  .voice-clip-preview audio { width: 100%; }
  .voice-picker-volume { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-clip-loading-spinner { animation-duration: 1400ms; }
}
.voice-playback-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px 7px;
  border: 0;
  border-radius: 4px;
  color: #b5bac1;
  background: #232428;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}

.voice-playback-status.is-queued,
.voice-playback-status.is-preparing,
.voice-playback-status.is-ready,
.voice-playback-status.is-starting {
  color: #f0b86e;
  background: rgba(240, 178, 50, 0.12);
}

.voice-playback-status.is-playing,
.voice-playback-status.is-completed {
  color: #6fdc96;
  background: rgba(35, 165, 90, 0.12);
}

.voice-playback-status.is-failed,
.voice-playback-status.is-stopped,
.voice-playback-status.is-cancelled {
  color: #f08285;
  background: rgba(218, 55, 60, 0.14);
}

.discord-server-playback .voice-playback-status { display: inline-flex; }

.voice-picker-playback {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 160px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(78, 80, 88, 0.55);
  border-radius: 7px;
  background: #2b2d31;
}

.voice-picker-playback-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(78, 80, 88, 0.55);
}

.voice-picker-playback-header small,
.voice-picker-playback-header strong { display: block; }

.voice-picker-playback-summary {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.voice-picker-playback-header small {
  color: #949ba4;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.voice-picker-playback-header strong {
  overflow: hidden;
  color: #dbdee1;
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-picker-playback-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.voice-picker-playback-controls form { display: flex; margin: 0; }
.voice-picker-playback-controls form[hidden] { display: none; }

.voice-picker-playback-controls .voice-clip-stop {
  min-height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.voice-picker-playback-controls .voice-picker-stop-current {
  border: 1px solid #da373c;
  color: #fff;
  background: #da373c;
}

.voice-picker-playback-controls .voice-picker-stop-current:hover {
  border-color: #a1282d;
  background: #a1282d;
}

.voice-picker-playback-controls .voice-picker-clear-queue {
  border: 1px solid transparent;
  color: #f0a4a7;
  background: transparent;
}

.voice-picker-playback-controls .voice-picker-clear-queue:hover {
  background: rgba(218, 55, 60, 0.12);
}

.voice-picker-playback-controls .voice-clip-stop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.voice-picker-queue {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: #1a1b1e transparent;
}

.voice-picker-queue-item {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(78, 80, 88, 0.35);
  background: #313338;
}

.voice-picker-queue-item:last-child { border-bottom: 0; }

.voice-picker-queue-item.is-current {
  box-shadow: inset 3px 0 #23a55a;
  background: #34373c;
}

.voice-picker-active-copy { min-width: 0; }

.voice-picker-active-copy small,
.voice-picker-active-copy strong,
.voice-picker-active-copy > span { display: block; }

.voice-picker-active-copy small {
  color: #b5bac1;
  font-size: 11px;
  font-weight: 650;
}

.voice-picker-active-copy strong {
  overflow: hidden;
  color: #f2f3f5;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-picker-active-copy > span:not([data-playback-error]) {
  overflow: hidden;
  color: #949ba4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-picker-queue-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-picker-queue-actions > form { width: max-content; }
.voice-picker-queue-actions > form[hidden] { display: none; }
.voice-picker-queue-actions .voice-clip-stop {
  padding: 4px 7px;
  background: transparent;
  white-space: nowrap;
}

.voice-picker-queue-item [data-playback-error] {
  overflow: hidden;
  color: #f08285;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-picker-playback-empty {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  color: #80848e;
  background: #313338;
}

.voice-picker-playback-empty[hidden] { display: none; }

@media (max-width: 560px) {
  .voice-picker-playback { height: 180px; }
  .voice-picker-playback-header { align-items: stretch; flex-direction: column; gap: 8px; }
  .voice-picker-playback-controls { justify-content: flex-end; }
  .voice-picker-queue-actions { align-items: flex-end; flex-direction: column; }
}
.voice-source-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 6px;
  background: #313338;
}

.voice-source-heading strong,
.voice-source-heading small,
.voice-source-heading > label span {
  display: block;
}

.voice-source-heading small,
.voice-source-heading > label span {
  margin-top: 4px;
  color: #949ba4;
  font-size: 10px;
}

.voice-source-heading > label {
  min-width: 180px;
}

.voice-source-heading > label select {
  width: 100%;
  margin-top: 5px;
  padding: 8px 9px;
  border: 1px solid #1e1f22;
  border-radius: 4px;
  color: #f2f3f5;
  background: #1e1f22;
}

.voice-news-heading { align-items: flex-start; }
.voice-news-heading > label select { padding-block: 10px; }

.voice-speech-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.voice-speech-form textarea {
  min-height: 150px;
  flex: 1;
  padding: 14px;
  border: 1px solid #1e1f22;
  border-radius: 6px;
  outline: 0;
  color: #f2f3f5;
  background: #1e1f22;
  font: inherit;
  line-height: 1.5;
  resize: none;
}

.voice-speech-form textarea:focus {
  border-color: #5865f2;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}

.voice-speech-form textarea[readonly] {
  cursor: wait;
  opacity: 0.72;
}

.voice-speech-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: #949ba4;
  font-size: 10px;
}

.voice-speech-actions .voice-clip-trigger {
  min-width: 90px;
  padding: 9px 14px;
}

@media (max-width: 580px) {
  .voice-source-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .voice-source-heading > label { min-width: 0; }

  .voice-speech-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .voice-speech-actions .voice-clip-trigger {
    width: 100%;
    grid-column: 1 / -1;
  }
}
.discord-main-frame {
  --chat-bg: #313338;
  --chat-hover: #2e3035;
  --chat-input: #383a40;
  --chat-line: #202225;
  --chat-text: #dbdee1;
  --chat-muted: #949ba4;
  --chat-heading: #f2f3f5;
  --chat-link: #00a8fc;
}

.discord-main-frame .message-panel {
  border-color: var(--chat-line);
  color: var(--chat-text);
  background: var(--chat-bg);
  box-shadow: 0 18px 42px rgba(38, 40, 43, 0.16);
}

.discord-main-frame .discord-channel-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  border-color: var(--chat-line);
  background: var(--chat-bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.24);
}

.discord-main-frame .discord-channel-title {
  flex: 0 0 auto;
}

.discord-main-frame .message-panel h1 {
  margin: 0;
  color: var(--chat-heading);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
}

.discord-main-frame .discord-channel-topic {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid #4e5058;
  text-align: right;
}

.discord-main-frame .discord-channel-header p {
  overflow: hidden;
  margin: 0;
  color: var(--chat-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-main-frame .discord-channel-header small {
  margin-top: 3px;
  color: var(--chat-muted);
}

.discord-main-frame .message-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0 18px;
  scrollbar-color: #1a1b1e var(--chat-bg);
}

.discord-main-frame .message-history { margin-top: auto; }

.discord-main-frame .history-control {
  color: var(--chat-muted);
}

.discord-main-frame .history-control button {
  border-color: #4e5058;
  border-radius: 4px;
  color: var(--chat-text);
  background: #2b2d31;
}

.discord-main-frame .history-control button:hover {
  background: #35373c;
}

.discord-main-frame .discord-message {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 8px 24px;
  border: 0;
  color: var(--chat-text);
}

.discord-main-frame .discord-message:hover {
  background: var(--chat-hover);
}

.discord-message-avatar {
  display: grid;
  overflow: hidden;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #5865f2;
  font-size: 14px;
  font-weight: 700;
}

.discord-message-avatar.has-image { background: transparent; }

.discord-message-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.discord-message-body { min-width: 0; }

.discord-main-frame .message-meta {
  gap: 8px;
}

.discord-main-frame .message-meta strong {
  color: var(--chat-heading);
  font-size: 14px;
}

.discord-main-frame .message-meta form { display: inline; }

.discord-message-author {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--chat-heading);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.discord-message-author:hover,
.discord-message-author:focus-visible {
  text-decoration: underline;
}

.discord-main-frame .message-meta time {
  color: var(--chat-muted);
  font-size: 10px;
}

.discord-main-frame .discord-message-body > p {
  margin: 3px 0 0;
  color: var(--chat-text);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.discord-user-mention {
  display: inline-block;
  padding: 0 2px;
  border-radius: 3px;
  color: #c9cdfb;
  background: rgb(88 101 242 / 24%);
  font-weight: 600;
}

.discord-message-link {
  color: var(--chat-link);
  text-decoration: none;
}

.discord-message-link:hover,
.discord-message-link:focus-visible {
  text-decoration: underline;
}

.discord-main-frame .image-attachment img {
  border-color: var(--chat-line);
  border-radius: 8px;
}

.discord-main-frame .file-attachment {
  color: var(--chat-link);
}

.discord-main-frame .muted-message {
  color: var(--chat-muted);
}

.discord-main-frame .message-form {
  padding: 0 24px 24px;
  border: 0;
  background: var(--chat-bg);
}

.discord-main-frame .message-form label {
  color: var(--chat-muted);
  font-size: 10px;
}

.discord-main-frame .message-form > div {
  align-items: center;
  margin: 7px 0 5px;
  padding: 4px 6px 4px 14px;
  border-radius: 8px;
  background: var(--chat-input);
}

.discord-main-frame .message-form textarea {
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--chat-text);
  background: transparent;
  box-shadow: none;
  resize: vertical;
}

.discord-main-frame .message-form textarea::placeholder {
  color: var(--chat-muted);
}

.discord-main-frame .message-form textarea:focus {
  border: 0;
  box-shadow: none;
}

.discord-main-frame .message-form .primary-button {
  min-height: 38px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #5865f2;
}

.discord-main-frame .message-form .primary-button:hover {
  background: #4752c4;
}

.discord-main-frame .message-form small,
.discord-main-frame .read-only-channel,
.discord-main-frame .empty-state {
  color: var(--chat-muted);
}

@media (max-width: 640px) {
  .discord-main-frame .discord-channel-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .discord-main-frame .discord-channel-topic {
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .discord-main-frame .discord-message {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .discord-message-avatar { width: 34px; height: 34px; }
  .discord-main-frame .message-form { padding: 0 16px 16px; }
}
.discord-main-frame .message-form textarea {
  field-sizing: content;
  min-height: 48px;
  max-height: 160px;
  overflow-y: auto;
  resize: none;
}

.discord-main-frame .message-form textarea[readonly] {
  cursor: wait;
  opacity: 0.72;
}

.discord-main-frame .message-form .primary-button {
  min-width: 74px;
  transition: background 120ms ease, opacity 120ms ease;
}

.discord-main-frame .message-form .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.discord-main-frame .message-form.is-sending .primary-button {
  cursor: wait;
  opacity: 0.8;
}

.discord-main-frame .message-form-feedback {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 16px;
}

.discord-main-frame .message-form-feedback small:first-child {
  color: #b5bac1;
}

@media (max-width: 560px) {
  .discord-main-frame .message-form-feedback {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}
.discord-rail-divider {
  width: 32px;
  height: 2px;
  background: #35363c;
}

.discord-dm-history {
  display: grid;
  justify-items: center;
}

.discord-dm-history > summary {
  list-style: none;
  cursor: pointer;
}

.discord-dm-history > summary::-webkit-details-marker { display: none; }

.discord-dm-history > summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.discord-dm-history[open] > summary {
  border-radius: 16px;
  background: #5865f2;
}

.discord-dm-history-items {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 8px;
}

.discord-rail-direct-message img { border-radius: inherit; }
.discord-rail-direct-message.has-image { background: transparent; }

.discord-rail-dm-entry {
  position: relative;
  width: 48px;
  height: 48px;
}

.discord-rail-dm-remove-form {
  position: absolute;
  z-index: 2;
  top: -4px;
  right: -4px;
  margin: 0;
}

.discord-rail-dm-remove {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 0 2px;
  border: 2px solid var(--discord-rail);
  border-radius: 50%;
  color: #fff;
  background: var(--discord-red);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
}

.discord-rail-dm-remove:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

@media (hover: hover) {
  .discord-rail-dm-remove { opacity: 0; }
  .discord-rail-dm-entry:hover .discord-rail-dm-remove,
  .discord-rail-dm-entry:focus-within .discord-rail-dm-remove { opacity: 1; }
}

.discord-dm-panel { height: 100%; }

.discord-dm-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.discord-dm-header .discord-message-avatar { flex: 0 0 auto; }
.discord-dm-header .eyebrow { margin: 0 0 2px; color: var(--discord-faint); }
.discord-dm-header h1 { margin: 0; }

.discord-dm-empty {
  padding: 30px 24px 22px;
  color: var(--chat-muted);
}

.discord-dm-empty-avatar {
  display: grid;
  overflow: hidden;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #5865f2;
  font-size: 24px;
  font-weight: 700;
}

.discord-dm-empty-avatar.has-image { background: transparent; }

.discord-dm-empty-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discord-dm-empty h2 {
  margin: 14px 0 3px;
  color: var(--chat-heading);
  font-size: 20px;
}

.discord-dm-empty p { margin: 0; font-size: 13px; }

@media (max-width: 640px) {
  .discord-dm-empty { padding-right: 16px; padding-left: 16px; }
}

@media (max-width: 580px) {
  .discord-dm-history {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .discord-dm-history-items {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-left: 8px;
  }
}
.discord-message-reference {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  color: var(--chat-muted);
  font-size: 11px;
}

.discord-message-reference > span:first-child {
  color: var(--chat-muted);
  font-size: 14px;
}

.discord-message-reference strong {
  flex: 0 0 auto;
  color: var(--chat-heading);
}

.discord-message-reference-link {
  overflow: hidden;
  color: var(--chat-muted);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-message-reference-link:hover,
.discord-message-reference-link:focus-visible {
  color: var(--chat-text);
  text-decoration: underline;
}

.discord-message-reply {
  width: 26px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: var(--chat-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  opacity: 0;
}

.discord-message:hover .discord-message-reply,
.discord-message-reply:focus-visible {
  background: #383a40;
  opacity: 1;
}

.discord-main-frame .message-form > .discord-reply-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 10px 8px 14px;
  border-radius: 8px 8px 0 0;
  color: var(--chat-muted);
  background: #2b2d31;
}

.discord-main-frame .discord-reply-composer[hidden] {
  display: none;
}

.discord-reply-composer > span {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 5px;
  font-size: 11px;
}

.discord-reply-composer strong { color: var(--chat-heading); }

.discord-reply-composer small {
  overflow: hidden;
  color: var(--chat-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-reply-composer button {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 0;
  color: var(--chat-muted);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.discord-reply-composer button:hover { color: var(--chat-heading); }

.discord-main-frame .message-form > .discord-reply-composer + div {
  margin-top: 0;
  border-radius: 0 0 8px 8px;
}

@media (hover: none) {
  .discord-message-reply { opacity: 0.75; }
}
.audio-workspace-nav {
  display: flex;
  width: fit-content;
  gap: 8px;
  margin: 0 0 26px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.audio-workspace-nav a {
  min-height: 36px;
  padding: 9px 14px;
  border-radius: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.audio-workspace-nav a:hover,
.audio-workspace-nav a.is-active {
  color: var(--ink);
  background: var(--page);
}

.audio-workspace-nav a.is-active {
  box-shadow: inset 0 -2px var(--accent);
}

.audio-workspace-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .audio-workspace-nav {
    width: 100%;
  }

  .audio-workspace-nav a {
    flex: 1;
    padding-inline: 8px;
    text-align: center;
  }
}
.image-attachment[data-action*="discord-image-lightbox"] {
  cursor: zoom-in;
}

.discord-image-lightbox {
  overflow: visible;
  width: auto;
  max-width: calc(100vw - 48px);
  height: auto;
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.discord-image-lightbox::backdrop {
  background: rgb(8 9 10 / 88%);
  backdrop-filter: blur(3px);
}

.discord-image-lightbox-content {
  position: relative;
  display: grid;
  place-items: center;
}

.discord-image-lightbox a {
  display: grid;
  max-width: inherit;
  max-height: inherit;
  place-items: center;
  cursor: pointer;
}

.discord-image-lightbox img {
  display: block;
  width: auto;
  max-width: calc(100vw - 48px);
  height: auto;
  max-height: calc(100vh - 48px);
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 22px 70px rgb(0 0 0 / 48%);
}

.discord-image-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: rgb(17 18 20 / 78%);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.discord-image-lightbox-close:hover,
.discord-image-lightbox-close:focus-visible {
  border-color: rgb(255 255 255 / 64%);
  background: rgb(17 18 20 / 94%);
  outline: none;
}

@media (max-width: 640px) {
  .discord-image-lightbox,
  .discord-image-lightbox img {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
}
.discord-main-frame .discord-message { position: relative; }
.discord-main-frame .discord-message-body { container-type: inline-size; }

.discord-message-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.discord-message-reactions.is-empty {
  position: absolute;
  top: 4px;
  right: 24px;
  flex-direction: row-reverse;
  margin: 0;
}

.discord-message-reactions.is-empty .discord-reaction-picker:not([open]) {
  opacity: 0;
}

.discord-message:hover .discord-message-reactions.is-empty .discord-reaction-picker,
.discord-message-reactions.is-empty:focus-within .discord-reaction-picker {
  opacity: 1;
}

.discord-reaction-form { display: inline-flex; margin: 0; }

.discord-reaction-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.discord-reaction-tooltip {
  position: absolute;
  z-index: 46;
  bottom: calc(100% + 7px);
  left: 0;
  width: max-content;
  max-width: min(300px, calc(100vw - 48px), calc(100cqw - 24px));
  padding: 7px 9px;
  border: 1px solid #111214;
  border-radius: 5px;
  color: #f2f3f5;
  background: #111214;
  box-shadow: 0 8px 18px rgb(0 0 0 / 28%);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
}

.discord-reaction-tooltip.align-right {
  right: 0;
  left: auto;
}

.discord-reaction-tooltip.opens-below {
  top: calc(100% + 7px);
  bottom: auto;
}

.discord-reaction-pill,
.discord-quick-reaction,
.discord-reaction-picker > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid #4e5058;
  border-radius: 8px;
  color: var(--chat-text);
  background: #2b2d31;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.discord-reaction-pill { gap: 5px; font-size: 13px; }

.discord-reaction-pill:hover,
.discord-quick-reaction:hover,
.discord-reaction-picker > summary:hover {
  border-color: #6d6f78;
  background: #383a40;
}

.discord-reaction-pill.is-mine {
  border-color: #5865f2;
  color: #c9cdfb;
  background: rgba(88, 101, 242, 0.18);
}

.discord-reaction-pill img { width: 18px; height: 18px; object-fit: contain; }
.discord-reaction-emoji { font-size: 16px; }
.discord-reaction-count { font-size: 12px; font-weight: 650; }

.discord-reaction-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.discord-reaction-picker > summary {
  min-width: 28px;
  padding: 0;
  border-color: transparent;
  color: var(--chat-muted);
  list-style: none;
}

.discord-reaction-picker > summary::-webkit-details-marker { display: none; }

.discord-reaction-options {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.discord-reaction-menu {
  position: absolute;
  z-index: 45;
  bottom: calc(100% + 7px);
  left: 0;
  width: min(320px, calc(100vw - 48px), calc(100cqw - 24px));
  padding: 12px;
  border: 1px solid #3f4147;
  border-radius: 10px;
  background: #1e1f22;
  box-shadow: 0 14px 34px rgb(0 0 0 / 35%);
}

.discord-reaction-menu.align-right {
  right: 0;
  left: auto;
}

.discord-message-reactions.is-empty .discord-reaction-menu {
  right: 0;
  left: auto;
}

.discord-reaction-menu.opens-below {
  top: calc(100% + 7px);
  bottom: auto;
}

.discord-reaction-section-label {
  margin: 0 0 7px;
  color: var(--chat-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.discord-quick-reaction {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0;
  border-color: transparent;
  font-size: 18px;
}

.discord-server-reactions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #3f4147;
}

.discord-reaction-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #111214;
  border-radius: 5px;
  background: #111214;
  color: var(--chat-text);
  font: inherit;
  font-size: 12px;
}

.discord-reaction-search input:focus {
  border-color: #5865f2;
  outline: none;
}

.discord-server-reaction-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  overflow-y: auto;
  max-height: 190px;
  margin-top: 8px;
}

.discord-server-reaction {
  display: inline-flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.discord-server-reaction:hover,
.discord-server-reaction:focus-visible {
  background: #35373c;
  outline: none;
}

.discord-server-reaction img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.discord-reaction-status,
.discord-reaction-empty {
  margin: 12px 4px 4px;
  color: var(--chat-muted);
  font-size: 12px;
  text-align: center;
}

.discord-server-reaction-form { display: none; }

@media (max-width: 640px) {
  .discord-message-reactions.is-empty { right: 16px; }
}
.soundboard-emoji-picker { position: relative; }

.soundboard-emoji-field-label {
  display: block;
  margin-bottom: 7px;
  font-weight: 650;
}

.soundboard-emoji-picker details { position: relative; }

.soundboard-emoji-picker summary {
  display: grid;
  min-height: 48px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.78rem;
  list-style: none;
}

.soundboard-emoji-picker summary::-webkit-details-marker { display: none; }

.soundboard-emoji-picker summary:hover,
.soundboard-emoji-picker details[open] summary { border-color: var(--ink); }

.soundboard-emoji-preview {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  font-size: 1.25rem;
}

.soundboard-emoji-preview img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.soundboard-emoji-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid #111214;
  border-radius: 9px;
  background: #1e1f22;
  color: #dbdee1;
  box-shadow: 0 16px 38px rgb(0 0 0 / 32%);
}

.soundboard-emoji-search input {
  width: 100%;
  min-height: 36px;
  border-color: #111214;
  background: #111214;
  color: #f2f3f5;
  font-size: 0.82rem;
  text-align: left;
}

.soundboard-emoji-status,
.soundboard-emoji-empty {
  margin: 16px 4px;
  color: #949ba4;
  font-size: 0.78rem;
  text-align: center;
}

.soundboard-emoji-grid {
  display: grid;
  max-height: 220px;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-top: 10px;
  overflow-y: auto;
}

.soundboard-emoji-option {
  display: grid;
  min-width: 0;
  height: 42px;
  padding: 6px;
  cursor: pointer;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.soundboard-emoji-option:hover,
.soundboard-emoji-option:focus-visible { background: #35373c; }

.soundboard-emoji-option img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.soundboard-emoji-unicode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #35373c;
}

.soundboard-emoji-unicode label {
  color: #b5bac1;
  font-size: 0.75rem;
}

.soundboard-emoji-unicode input {
  width: 100%;
  min-height: 36px;
  padding: 6px;
  border-color: #111214;
  background: #111214;
  color: #f2f3f5;
  text-align: center;
}

.soundboard-emoji-clear {
  width: 100%;
  min-height: 32px;
  margin-top: 8px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: #b5bac1;
  font-size: 0.75rem;
  text-align: left;
}

.soundboard-emoji-clear:hover { color: #f23f42; }

.soundboard-manage-dialog .soundboard-emoji-picker summary {
  min-height: 52px;
  padding: 9px 12px;
}

.soundboard-manage-dialog .soundboard-emoji-menu {
  position: static;
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
  box-shadow: none;
}

.soundboard-manage-dialog .soundboard-emoji-grid {
  max-height: 180px;
}

@media (max-width: 520px) {
  .soundboard-emoji-menu { right: auto; left: 0; }

  .soundboard-manage-dialog .soundboard-emoji-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
.soundboard-volume {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--page) 58%, var(--paper));
}

.soundboard-volume-heading {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}

.soundboard-volume-heading label {
  margin: 0;
  font-weight: 650;
}

.soundboard-volume-heading output {
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.soundboard-volume input[type="range"] {
  width: 100%;
  cursor: pointer;
  accent-color: var(--ink);
}

.soundboard-volume small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.soundboard-manage-dialog .soundboard-volume {
  margin-top: 2px;
}
#discord-voice-activity {
  display: block;
}

.voice-server-form {
  display: flex;
  gap: 16px;
  align-items: end;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.voice-server-form .field {
  flex: 1;
  margin: 0;
}

.voice-server-status {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

#voice-channel-fields {
  display: block;
}

#voice-channel-fields[busy] {
  opacity: 0.65;
}

.voice-channel-message {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.voice-channel-message.is-error {
  color: #74472d;
}

.voice-channel-control {
  display: flex;
  gap: 12px;
  align-items: end;
}

.voice-channel-control .field {
  flex: 1;
  min-width: 0;
}

.voice-channel-refresh {
  margin-bottom: 0;
  white-space: nowrap;
}

.voice-volume {
  margin: 4px 0 24px;
}

.voice-volume-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.voice-volume-heading output {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.voice-volume input[type="range"] {
  width: 100%;
  accent-color: var(--ink);
  cursor: pointer;
}

.clip-picker-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.clip-picker-heading a {
  font-size: 12px;
}

.voice-history {
  margin: 70px 0 90px;
  border-top: 1px solid var(--line);
}

.voice-history > summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-weight: 650;
  list-style: none;
}

.voice-history > summary::-webkit-details-marker {
  display: none;
}

.voice-history > summary > span:last-child {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.voice-now-playing {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent-soft);
}

.voice-now-playing small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.voice-playback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 24px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.voice-playback > div {
  min-width: 0;
}

.voice-playback strong {
  overflow-wrap: anywhere;
}

.voice-playback small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.voice-playback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.voice-playback-actions form {
  margin: 0;
}

.voice-playback-actions .secondary-button {
  min-height: 34px;
  padding: 7px 12px;
}

.voice-playback > p {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  color: #74472d;
  font-size: 12px;
}

#discord-voice-activity[busy] button {
  cursor: progress;
  opacity: 0.65;
}

@media (max-width: 760px) {
  .voice-server-form {
    display: grid;
  }

  .voice-history {
    margin-top: 48px;
  }

  .voice-playback {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .voice-playback-actions {
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  .voice-playback-actions form,
  .voice-playback-actions .secondary-button {
    width: 100%;
  }
}
.discord-rail-dm-toggle {
  position: relative;
  overflow: visible;
  border: 1px solid transparent;
}

.discord-rail-dm-toggle-icon {
  display: grid;
  place-items: center;
  font-size: 15px;
  transition: transform 160ms ease;
}

.discord-rail-dm-toggle-chevron {
  position: absolute;
  right: -4px;
  bottom: -3px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 3px solid var(--discord-rail);
  border-radius: 50%;
  color: #fff;
  background: #4e5058;
  transition: background 160ms ease, transform 160ms ease;
}

.discord-rail-dm-toggle-chevron svg {
  display: block;
  width: 12px;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.discord-dm-history[open] > .discord-rail-dm-toggle {
  border-color: #7983f5;
  border-radius: 16px;
  background: #41434a;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.24);
}

.discord-dm-history[open] .discord-rail-dm-toggle-icon {
  transform: translateY(-1px);
}

.discord-dm-history[open] .discord-rail-dm-toggle-chevron {
  background: var(--discord-green);
  transform: rotate(90deg);
}

.discord-dm-history[open] .discord-dm-history-items {
  position: relative;
}

.discord-dm-history.is-opening .discord-dm-history-items,
.discord-dm-history.is-closing .discord-dm-history-items {
  overflow: hidden;
  pointer-events: none;
  will-change: width, height, opacity, transform;
}

.discord-dm-history[open] .discord-dm-history-items::before {
  position: absolute;
  top: -8px;
  left: calc(50% - 1px);
  width: 2px;
  height: 8px;
  background: #5865f2;
  content: "";
}

@media (hover: hover) {
  .discord-rail-dm-toggle:hover .discord-rail-dm-toggle-chevron {
    background: #5865f2;
  }

  .discord-dm-history[open] > .discord-rail-dm-toggle:hover
    .discord-rail-dm-toggle-chevron {
    background: var(--discord-green);
  }
}

@media (max-width: 580px) {
  .discord-dm-history[open] .discord-dm-history-items::before {
    top: calc(50% - 1px);
    left: -8px;
    width: 8px;
    height: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discord-rail-dm-toggle-icon,
  .discord-rail-dm-toggle-chevron { transition: none; }

  .discord-dm-history-items { scroll-behavior: auto; }
}
.live-voice-console {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #202225;
  border-radius: 14px;
  color: #f2f3f5;
  background: #2b2d31;
  box-shadow: 0 24px 60px rgba(38, 40, 43, 0.16);
}

.discord-main-frame .live-voice-console {
  height: min(100%, 660px);
  min-height: 0;
  align-self: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.discord-main-frame .live-voice-console.is-compact {
  width: min(760px, calc(100% - 48px));
  height: auto;
  min-height: 0;
  margin: 24px auto;
  border: 1px solid #202225;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(38, 40, 43, 0.16);
}

.discord-main-frame .live-voice-console.is-compact .live-voice-stage {
  flex: 0 1 auto;
  max-height: 360px;
}

.discord-live-voice-action.is-viewing { outline: 2px solid #fff; outline-offset: 1px; }

.live-voice-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border-bottom: 1px solid #202225;
}

.live-voice-heading h1 { margin: 3px 0; color: #fff; }
.live-voice-heading p:last-child { margin: 0; color: #b5bac1; }

.live-voice-state {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #b5bac1;
  background: #3f4147;
  font-size: 11px;
  font-weight: 700;
}

.live-voice-state.is-connected { color: #6fdc96; background: rgba(35, 165, 90, 0.16); }
.live-voice-state.is-connecting,
.live-voice-state.is-reconnecting { color: #f0b86e; background: rgba(240, 184, 110, 0.14); }
.live-voice-state.is-failed { color: #f08285; background: rgba(218, 55, 60, 0.14); }

.live-voice-blocker {
  margin: 20px 28px 0;
  padding: 16px 18px;
  border: 1px solid rgba(240, 184, 110, 0.32);
  border-radius: 8px;
  color: #f0b86e;
  background: rgba(240, 184, 110, 0.08);
}

.live-voice-blocker p { margin: 5px 0 12px; color: #d6d9dc; }
.live-voice-blocker .secondary-button { color: #f2f3f5; border-color: #949ba4; }

.live-voice-waiting {
  margin: 20px 28px 0;
  padding: 14px 18px;
  border: 1px solid rgba(88, 101, 242, 0.4);
  border-radius: 8px;
  color: #c7ccff;
  background: rgba(88, 101, 242, 0.1);
}

.live-voice-waiting p { margin: 5px 0 0; color: #d6d9dc; }

.live-voice-stage {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  overflow-y: auto;
  padding: 28px;
}

.live-voice-participants {
  border-radius: 9px;
  background: #313338;
}

.live-voice-participants { padding: 18px; }
.live-voice-participants > header { display: flex; justify-content: space-between; }
.live-voice-participants h2 { margin: 0; color: #fff; font-size: 15px; }
.live-voice-participants > header span { color: #949ba4; font-size: 12px; }

.live-voice-member-list { display: grid; gap: 8px; margin-top: 16px; }
.live-voice-member-list [data-member-id] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 7px;
  background: #2b2d31;
}

.live-voice-member-list [data-member-id].is-speaking {
  background: rgba(35, 165, 90, 0.14);
  box-shadow: inset 0 0 0 2px var(--discord-green);
}

.live-voice-member-list [data-member-id].is-speaking .discord-member-avatar {
  box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.32);
}

.live-voice-member-list [data-member-id].is-speaking small {
  color: #6fdc96;
  font-weight: 700;
}

.live-voice-member-list [data-member-id].is-speaking-fading {
  animation: live-voice-speaker-fade 480ms ease-out forwards;
}

.live-voice-member-list [data-member-id].is-speaking-fading .discord-member-avatar {
  animation: live-voice-speaker-ring-fade 480ms ease-out forwards;
}

.live-voice-member-list [data-member-id].is-speaking-fading small {
  animation: live-voice-speaker-label-fade 480ms ease-out forwards;
  font-weight: 700;
}

@keyframes live-voice-speaker-fade {
  from {
    background: rgba(35, 165, 90, 0.14);
    box-shadow: inset 0 0 0 2px var(--discord-green);
  }
  to { background: #2b2d31; box-shadow: inset 0 0 0 2px transparent; }
}

@keyframes live-voice-speaker-ring-fade {
  from { box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.32); }
  to { box-shadow: 0 0 0 3px transparent; }
}

@keyframes live-voice-speaker-label-fade {
  from { color: #6fdc96; }
  to { color: #949ba4; }
}

.live-voice-member-list [data-member-id] > span:last-child {
  width: 0;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}
.live-voice-member-list strong,
.live-voice-member-list small { display: block; }
.live-voice-member-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-voice-member-list small { margin-top: 2px; color: #949ba4; font-size: 10px; }
.live-voice-member-list .discord-member-avatar { width: 40px; height: 40px; }
.live-voice-member-list .discord-member-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.live-voice-error {
  margin: 0 28px 18px;
  color: #f5a1a4;
  font-size: 12px;
}

.live-voice-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-top: 1px solid #202225;
  background: #232428;
}

.live-voice-control-buttons {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.live-voice-controls button { min-height: 42px; }
.live-voice-controls button:disabled { cursor: not-allowed; opacity: 0.45; }
.live-voice-controls [hidden] { display: none; }

.live-voice-controls .secondary-button {
  color: #f2f3f5;
  border-color: #6d6f78;
}

.live-voice-controls .secondary-button:not(:disabled):hover { background: #35373c; }

.live-voice-join { min-width: 132px; font-weight: 700; }
.live-voice-join:not(:disabled):hover { background: #3e5248; }

.live-voice-talk {
  min-width: 150px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #5865f2;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  touch-action: none;
  user-select: none;
}

.live-voice-talk.is-talking { background: #23a55a; }

.live-voice-danger {
  border: 1px solid rgba(218, 55, 60, 0.52);
  border-radius: 5px;
  color: #fff;
  background: #b9272c;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

@media (max-width: 720px) {
  .discord-main-frame .live-voice-console { height: auto; }
  .live-voice-heading { align-items: flex-start; flex-direction: column; }
  .live-voice-stage { grid-template-columns: 1fr; overflow-y: visible; }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .discord-main-frame .live-voice-stage { grid-template-columns: 1fr; }
}

@media (min-width: 721px) {
  .discord-main-frame .live-voice-stage { padding: 16px 28px; }
  .discord-main-frame .live-voice-participants { padding: 12px 18px; }
  .discord-main-frame .live-voice-member-list { gap: 6px; margin-top: 10px; }
  .discord-main-frame .live-voice-member-list [data-member-id] { padding: 7px 10px; }
}

@media (max-width: 520px) {
  .live-voice-heading,
  .live-voice-stage,
  .live-voice-controls { padding-right: 16px; padding-left: 16px; }
  .live-voice-blocker,
  .live-voice-waiting { margin-right: 16px; margin-left: 16px; }
  .live-voice-error { margin-right: 16px; margin-left: 16px; }
  .live-voice-control-buttons button { width: 100%; }
  .discord-main-frame .live-voice-console.is-compact {
    width: 100%;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .live-voice-member-list [data-member-id].is-speaking-fading,
  .live-voice-member-list [data-member-id].is-speaking-fading .discord-member-avatar,
  .live-voice-member-list [data-member-id].is-speaking-fading small {
    animation: none;
  }
}
@media (max-width: 900px) {
  .lab-shell {
    padding: 0 24px;
  }

  .topbar {
    height: auto;
    min-height: 80px;
    grid-template-areas:
      "brand status"
      "nav nav";
    grid-template-columns: 1fr auto;
    gap: 12px 18px;
    padding: 14px 0;
  }

  .topbar > .brand {
    grid-area: brand;
  }

  .nav-links {
    grid-area: nav;
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 3px;
    white-space: nowrap;
  }

  .system-pill {
    grid-area: status;
  }

  .dashboard-summary {
    align-items: start;
  }
}

@media (max-width: 600px) {
  .lab-shell {
    padding: 0 15px;
  }

  .topbar {
    min-height: 70px;
  }

  .dashboard-summary {
    display: block;
    padding: 42px 0 36px;
  }

  .dashboard-summary h1 {
    font-size: 42px;
  }

  .dashboard-clock {
    width: 220px;
    margin-top: 32px;
  }

  .connection-note {
    display: block;
  }

  .connection-note code {
    display: block;
    margin-top: 12px;
  }

  .section-block {
    padding-top: 50px;
  }

  .section-heading {
    display: block;
  }

  .update-time {
    margin-top: 14px;
  }

  .sensor-type-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .sensor-type-list button {
    flex: 0 0 auto;
  }

  .sensor-grid {
    grid-template-columns: 1fr;
  }

  .sensor-card,
  .camera-panel {
    padding: 19px;
  }

  .site-footer {
    display: block;
    line-height: 1.6;
  }

  .site-footer p + p {
    margin-top: 9px;
  }
}

@media (max-width: 720px) {
  .discord-channel-pane {
    max-height: none;
    overflow: visible;
  }

  .discord-channel-scroll,
  .discord-main-frame,
  .discord-main-frame .message-list {
    overflow-y: visible;
    overscroll-behavior-y: auto;
  }

  .discord-main-frame,
  .discord-main-content,
  .discord-main-frame .message-panel {
    min-height: 0;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}
.live-voice-member-list .live-voice-member-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  color: inherit;
  background: #2b2d31;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.live-voice-member-list .live-voice-member-button:hover { background: #383a40; }
.live-voice-member-list .live-voice-member-button:focus-visible {
  outline: 3px solid #aeb6ff;
  outline-offset: 2px;
}
.live-voice-member-list .live-voice-member-button:disabled { cursor: progress; opacity: 0.65; }
.live-voice-member-list .live-voice-member-button.is-speaking {
  background: rgba(35, 165, 90, 0.14);
  box-shadow: inset 0 0 0 2px var(--discord-green);
}

.live-voice-dm-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: 680px;
  height: min(720px, calc(100vh - 32px));
  max-height: 720px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4a4d55;
  border-radius: 12px;
  color: #f2f3f5;
  background: #2b2d31;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.56);
}

.live-voice-dm-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
.live-voice-dm-dialog [data-live-voice-direct-messages-target='content'],
.live-voice-dm-popover { height: 100%; }
.live-voice-dm-popover { position: relative; }
.live-voice-dm-popover .live-voice-dm-frame {
  height: 100%;
  overflow: hidden;
}
.live-voice-dm-popover .discord-dm-panel {
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.live-voice-dm-popover .discord-dm-header { padding-right: 58px; }

.live-voice-dm-close {
  position: absolute;
  z-index: 1;
  top: 13px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  color: #c4c8ce;
  background: transparent;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.live-voice-dm-close:hover { color: #fff; background: #3c3e44; }
.live-voice-dm-close:focus-visible { outline: 3px solid #aeb6ff; outline-offset: 1px; }
.live-voice-dm-error { margin: 24px; color: #f5a1a4; }

@media (max-width: 520px) {
  .live-voice-dm-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}
#live-voice-dock {
  position: fixed;
  /* Above Discord's in-context content (including reaction tooltips), but below dialogs. */
  z-index: 60;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

#live-voice-dock .live-voice-console.is-docked {
  width: min(420px, calc(100vw - 32px));
  min-height: 0;
  max-height: min(720px, calc(100vh - max(40px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 20px)));
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid #202225;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.live-voice-dock-toggle {
  display: none;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #575b63;
  border-radius: 7px;
  color: #f2f3f5;
  background: #383a40;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#live-voice-dock .live-voice-dock-toggle { display: inline; }
#live-voice-dock .live-voice-dock-toggle:hover { background: #454850; }
#live-voice-dock .live-voice-dock-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.live-voice-heading-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}

#live-voice-dock .live-voice-heading {
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
}

#live-voice-dock .live-voice-heading > div:first-child { min-width: 0; }

#live-voice-dock .live-voice-heading h1,
#live-voice-dock .live-voice-heading p:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#live-voice-dock .live-voice-heading-actions {
  align-items: flex-end;
  flex-direction: column;
  gap: 6px;
}

#live-voice-dock .live-voice-console.is-collapsed .live-voice-stage,
#live-voice-dock .live-voice-console.is-collapsed .live-voice-error,
#live-voice-dock .live-voice-console.is-collapsed .live-voice-controls {
  display: none;
}

#live-voice-dock .live-voice-console.is-collapsed .live-voice-heading {
  min-height: 0;
  padding-block: 12px;
}

#live-voice-dock .live-voice-console.is-collapsed .live-voice-dock-toggle {
  border-color: rgba(35, 165, 90, 0.66);
  color: #b8f5cd;
  background: rgba(35, 165, 90, 0.16);
}

#live-voice-dock .live-voice-console.is-leaving {
  pointer-events: none;
  animation: live-voice-closing 220ms ease-in forwards;
}

@keyframes live-voice-closing {
  to { opacity: 0; transform: translateY(18px) scale(0.98); }
}

#live-voice-dock .live-voice-stage {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.discord-main-frame .discord-live-voice-placeholder {
  box-sizing: border-box;
  display: flex;
  min-height: calc(100% - 48px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin: 24px;
  padding: 42px;
  border: 1px solid #3f4147;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(88, 101, 242, 0.18), transparent 42%),
    #2b2d31;
}

.discord-main-frame .discord-live-voice-placeholder[hidden] { display: none; }

.discord-main-frame .discord-live-voice-placeholder .eyebrow { margin: 0; }
.discord-main-frame .discord-live-voice-placeholder h1 {
  max-width: 260px;
  margin: 0;
  color: #fff;
}
.discord-main-frame .discord-live-voice-placeholder p:not(.eyebrow) {
  max-width: 260px;
  margin: 0;
  color: #b5bac1;
}

.discord-main-frame .discord-live-voice-placeholder .primary-button { margin-top: 8px; }

@media (max-width: 520px) {
  .discord-main-frame .discord-live-voice-placeholder {
    min-height: calc(100% - 32px);
    margin: 16px;
    padding: 28px;
  }

  .discord-main-frame .discord-live-voice-placeholder h1,
  .discord-main-frame .discord-live-voice-placeholder p:not(.eyebrow) {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #live-voice-dock .live-voice-console.is-leaving { animation-duration: 1ms; }
}
.live-voice-transmit {
  width: min(100%, 640px);
  overflow: hidden;
  border: 1px solid #42444b;
  border-radius: 10px;
  background: #2b2d31;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.live-voice-transmit-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
}

.live-voice-transmit-icon {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 9px;
  color: #b5bac1;
  background: #35373c;
}

.live-voice-transmit-icon i {
  width: 3px;
  border-radius: 999px;
  background: currentColor;
}

.live-voice-transmit-icon i:nth-child(1) { height: 8px; }
.live-voice-transmit-icon i:nth-child(2) { height: 16px; }
.live-voice-transmit-icon i:nth-child(3) { height: 11px; }

.live-voice-transmit-copy { min-width: 0; }
.live-voice-transmit-copy strong,
.live-voice-transmit-copy small { display: block; }
.live-voice-transmit-copy strong { color: #fff; font-size: 13px; }
.live-voice-transmit-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: #949ba4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-voice-activation-status {
  min-width: 48px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #949ba4;
  background: #35373c;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.live-voice-transmit[data-active="true"] .live-voice-transmit-icon,
.live-voice-activation-status.is-sending {
  color: #6fdc96;
  background: rgba(35, 165, 90, 0.16);
}

.live-voice-switch { position: relative; display: inline-flex; cursor: pointer; }
.live-voice-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.live-voice-switch > span {
  display: block;
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  background: #4e5058;
  transition: background 160ms ease;
}

.live-voice-switch > span i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease;
}

.live-voice-switch input:checked + span { background: #23a55a; }
.live-voice-switch input:checked + span i { transform: translateX(18px); }
.live-voice-switch input:focus-visible + span {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.live-voice-activation-details {
  padding: 13px 14px 14px;
  border-top: 1px solid #3f4147;
  background: #26272b;
}

.live-voice-threshold-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d6d9dc;
  font-size: 11px;
  font-weight: 700;
}

.live-voice-threshold-heading output { color: #6fdc96; }

.live-voice-input-meter {
  position: relative;
  height: 6px;
  margin: 11px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #16171a;
}

.live-voice-input-meter progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  background: transparent;
}

.live-voice-input-meter progress::-webkit-progress-bar {
  border-radius: 999px;
  background: transparent;
}

.live-voice-input-level::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #5865f2, #23a55a);
  transition: width 70ms linear;
}

.live-voice-input-level::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #5865f2, #23a55a);
}

.live-voice-threshold-marker::-webkit-progress-value {
  border-right: 2px solid #fff;
  background: transparent;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.45);
}

.live-voice-threshold-marker::-moz-progress-bar {
  border-right: 2px solid #fff;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.live-voice-activation-details input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #23a55a;
}

.live-voice-activation-details > small {
  display: block;
  margin-top: 6px;
  color: #949ba4;
  font-size: 9px;
}

@media (max-width: 520px) {
  .live-voice-transmit-heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .live-voice-activation-status { display: none; }
  .live-voice-transmit-copy small { white-space: normal; }
}

@media (min-width: 721px) {
  .live-voice-transmit[data-active="true"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .live-voice-transmit[data-active="true"] .live-voice-activation-details {
    padding: 10px 14px;
    border-top: 0;
    border-left: 1px solid #3f4147;
  }

  .live-voice-transmit[data-active="true"] .live-voice-activation-details > small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-voice-switch > span,
  .live-voice-switch > span i,
  .live-voice-input-level::-webkit-progress-value { transition: none; }
}
.media-library-shell,
.media-editor-shell {
  padding-bottom: 90px;
}

.media-heading {
  max-width: 760px;
  padding: 64px 0 34px;
}

.media-heading.compact {
  padding-bottom: 22px;
}

.media-heading h1 {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.media-heading > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.6;
}

.media-source-card,
.media-editor-card,
.media-status-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.media-card-heading,
.media-library-heading,
.editor-playback-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.media-card-heading h2,
.media-library-heading h2 {
  margin: 3px 0 0;
}

.media-card-heading > span,
.media-library-heading > span {
  color: var(--muted);
  font-size: 12px;
}

.media-source-form {
  max-width: 760px;
  margin-top: 26px;
}

.media-source-intro {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.media-source-form .source-panel small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.media-source-next {
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.media-source-help {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.source-panel[hidden] {
  display: none;
}

.source-switch {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 24px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.source-switch-button {
  min-height: 38px;
  padding: 7px 14px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.source-switch-button.is-active {
  background: var(--ink);
  color: var(--paper);
}

.source-switch-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.media-library {
  margin-top: 64px;
}

.media-library-heading {
  min-height: 64px;
  border-bottom: 1px solid var(--line);
}

.media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.media-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.media-library-item > div {
  min-width: 0;
}

.media-library-item strong {
  display: block;
  overflow-wrap: anywhere;
}

.media-library-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.waveform-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--page);
}

.waveform-wrap [part="region"] {
  border-right: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}

.editor-playback-row {
  margin: 18px 0 28px;
}

.editor-playback-row span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.clip-save-form {
  display: grid;
  gap: 20px;
}

.clip-name-field {
  max-width: 560px;
  margin: 0;
}

.clip-time-fields {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(120px, 180px) auto;
  gap: 16px;
  align-items: end;
}

.clip-time-fields .field {
  margin: 0;
}

.clip-duration-readout {
  display: grid;
  gap: 6px;
  padding-bottom: 9px;
}

.clip-duration-readout span,
.clip-limit-note {
  color: var(--muted);
  font-size: 12px;
}

.clip-duration-readout strong {
  font-variant-numeric: tabular-nums;
}

.clip-duration-readout strong.is-over-limit {
  color: #8c3d2d;
}

.clip-limit-note {
  margin: 0;
}

.clip-save-form > .primary-button {
  justify-self: start;
}

@media (max-width: 640px) {
  .media-source-card,
  .media-editor-card,
  .media-status-card {
    padding: 20px;
  }

  .media-card-heading,
  .editor-playback-row {
    align-items: flex-start;
  }

  .media-card-heading,
  .editor-playback-row,
  .clip-time-fields {
    grid-template-columns: 1fr;
  }

  .media-card-heading,
  .editor-playback-row {
    display: grid;
  }
}
.live-voice-output {
  width: min(100%, 300px);
  padding: 10px 12px;
  border: 1px solid #3f4147;
  border-radius: 9px;
  background: #2b2d31;
}

.live-voice-output[hidden] { display: none; }

.live-voice-output-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.live-voice-output-heading label {
  color: #f2f3f5;
  font-size: 12px;
  font-weight: 700;
}

.live-voice-output-heading output {
  color: #6fdc96;
  font-size: 12px;
  font-weight: 700;
}

.live-voice-output input[type="range"] {
  display: block;
  width: 100%;
  margin: 0;
  accent-color: #5865f2;
}

.live-voice-output input[type="range"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.live-voice-output input[type="range"]:disabled { opacity: 0.45; }

@media (max-width: 520px) {
  .live-voice-output { width: 100%; }
}
.media-status-card {
  display: flex;
  gap: 20px;
  align-items: center;
}

.media-status-card h2 {
  margin: 4px 0 6px;
}

.media-status-card p:last-child {
  margin: 0;
  color: var(--muted);
}

.media-status-card .secondary-button {
  margin-left: auto;
}

.media-status-pulse {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px var(--accent-soft);
}

@media (max-width: 640px) {
  .media-status-card {
    display: grid;
    align-items: flex-start;
  }

  .media-status-card .secondary-button {
    margin-left: 0;
  }
}
.audio-manage-dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 45%);
}

.audio-manage-dialog::backdrop {
  background: rgb(4 8 12 / 72%);
  backdrop-filter: blur(0.2rem);
}

.audio-manage-dialog > turbo-frame {
  display: block;
  padding: clamp(1rem, 4vw, 1.5rem);
}

.audio-manage-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.audio-manage-dialog-heading h2,
.audio-manage-dialog-heading p {
  margin-bottom: 0.25rem;
}

.audio-manage-dialog audio {
  width: 100%;
  margin-bottom: 1.25rem;
}

.audio-manage-form {
  display: grid;
  gap: 1rem;
}

.audio-manage-form .field {
  margin: 0;
}

.audio-manage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.audio-manage-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.audio-manage-delete {
  display: grid;
  gap: 2px;
}

.audio-manage-delete form {
  margin: 0;
}

.audio-manage-delete .text-button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.audio-manage-delete small {
  color: var(--muted);
  font-size: 0.75rem;
}

.audio-manage-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.audio-manage-actions button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.audio-manage-dialog-loading {
  margin: 0;
  padding: 2rem;
  text-align: center;
}

@media (max-width: 38rem) {
  .audio-manage-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
  }

  .audio-manage-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .audio-manage-actions {
    justify-content: flex-end;
  }
}
.media-library-shell .media-library {
  margin-top: 0;
}

.media-library-shell .media-heading {
  padding: 44px 0 22px;
}

.media-library-toolbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 0;
}

.media-library-search {
  width: min(390px, 100%);
}

.media-library-filters {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.media-library-filters button {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  padding: 6px 11px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

.media-library-filters button.is-active {
  background: var(--accent-soft);
  color: var(--ink);
}

.media-library-filters span {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.media-library-item {
  transition: border-color 140ms ease, transform 140ms ease;
}

.media-library-shell .media-library-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.media-library-item:hover {
  border-color: #b9b4a8;
  transform: translateY(-1px);
}

.media-library-title {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 650;
}

.media-library-item-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.media-library-manage-trigger {
  display: grid;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}

.media-library-manage-trigger:hover {
  border-color: var(--line);
  background: var(--page);
  color: var(--ink);
}

.clip-duration-badge {
  padding: 5px 7px;
  border-radius: 3px;
  background: var(--page);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.media-library-preview {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) minmax(260px, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.media-library-preview[hidden],
.media-library-item[hidden],
.clip-picker-preview[hidden] {
  display: none;
}

.media-library-preview small,
.media-library-preview strong {
  display: block;
}

.media-library-preview small {
  margin-bottom: 4px;
  color: var(--muted);
}

.media-library-preview audio,
.clip-picker-preview audio {
  width: 100%;
}

.media-library-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.media-library-actions > a:not(.primary-button):not(.secondary-button) {
  padding: 7px 2px;
  color: var(--muted);
  font-size: 12px;
}

.media-library-actions > a:not(.primary-button):not(.secondary-button):hover {
  color: var(--ink);
}

.media-library-actions .primary-button,
.media-library-actions .secondary-button {
  min-height: 34px;
  padding: 7px 12px;
}

.media-library-actions .text-button {
  color: var(--accent);
  font-size: 12px;
}

.media-add-panel {
  margin: 0 0 36px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.media-add-panel > summary.media-add-action {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.media-add-panel > summary::-webkit-details-marker {
  display: none;
}

.media-add-action strong,
.media-add-action small {
  display: block;
}

.media-add-action small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.media-add-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  transition: transform 160ms ease;
}

.media-add-panel[open] > summary.media-add-action {
  border-bottom: 1px solid var(--line);
}

.media-add-panel[open] .media-add-icon {
  transform: rotate(45deg);
}

.media-add-content {
  display: grid;
  gap: 22px;
  padding: 0 18px 18px;
}

.clip-picker-preview {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
}

.clip-picker-preview a {
  font-size: 12px;
}

@media (max-width: 640px) {
  .media-library-shell .media-library-grid {
    grid-template-columns: 1fr;
  }

  .media-library-toolbar {
    display: grid;
  }

  .media-library-filters {
    width: 100%;
    overflow-x: auto;
  }

  .media-library-filters button {
    flex: 1 0 auto;
    justify-content: center;
  }

  .media-library-preview,
  .clip-picker-preview {
    grid-template-columns: 1fr;
  }

  .media-library-item:hover {
    transform: none;
  }
}
.audio-activity {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.audio-activity > summary {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.audio-activity > summary::-webkit-details-marker {
  display: none;
}

.audio-activity summary strong,
.audio-activity summary small,
.audio-activity-item strong,
.audio-activity-item small {
  display: block;
}

.audio-activity summary small,
.audio-activity-item small {
  margin-top: 4px;
  color: var(--muted);
}

.audio-activity-count {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 12px;
}

.audio-activity-list {
  border-top: 1px solid var(--line);
}

.audio-activity-item {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.audio-activity-item:last-child {
  border-bottom: 0;
}

.audio-activity-item > span:first-child {
  min-width: 0;
}

.audio-activity-item strong,
.audio-activity-item small {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .audio-activity > summary,
  .audio-activity-item {
    align-items: flex-start;
  }
}
.workspace-heading {
  display: flex;
  gap: 28px;
  align-items: end;
  justify-content: space-between;
  max-width: none;
}

.workspace-heading > div {
  max-width: 760px;
}

.audio-sources {
  margin-top: 42px;
}

.audio-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.audio-source-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}

.audio-source-card-heading,
.audio-source-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.audio-source-actions {
  align-self: end;
}

.audio-source-card h3 {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.audio-source-kind {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audio-source-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
}

.audio-source-facts div {
  padding: 12px;
  background: var(--page);
}

.audio-source-facts dt {
  color: var(--muted);
  font-size: 11px;
}

.audio-source-facts dd {
  margin: 4px 0 0;
  font-weight: 650;
}

.media-source-help > p {
  margin: 7px 0 0;
}

.source-provider-list {
  max-width: 680px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--page);
}

.source-provider-list summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.source-provider-list summary::-webkit-details-marker {
  display: none;
}

.source-provider-list summary::after {
  margin-left: auto;
  color: var(--muted);
  content: "+";
  font-size: 18px;
  font-weight: 400;
}

.source-provider-list[open] summary {
  border-bottom: 1px solid var(--line);
}

.source-provider-list[open] summary::after {
  content: "−";
}

.source-provider-list summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.source-provider-list-content {
  padding: 14px;
}

.source-provider-list-content p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.source-provider-list-content p + p {
  margin-top: 14px;
}

.source-provider-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.source-provider-tags li {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
}

@media (max-width: 640px) {
  .workspace-heading {
    display: grid;
    align-items: start;
  }

  .audio-source-grid {
    grid-template-columns: 1fr;
  }
}
.editor-playback-actions,
.editor-presets,
.editor-adjustments,
.editor-tools,
.editor-zoom {
  display: flex;
  gap: 12px;
  align-items: center;
}

.editor-playback-actions {
  flex-wrap: wrap;
}

.editor-time-readout {
  text-align: right;
}

.media-editor-shell .media-heading {
  padding-top: 42px;
}

.media-back-link {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 12px;
}

.media-back-link:hover {
  color: var(--ink);
}

.media-heading-title {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
}

.media-heading-title > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.waveform-help {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.waveform-timeline {
  min-height: 22px;
  border-top: 1px solid var(--line);
}

[data-media-editor-target="waveform"]::part(wrapper) {
  position: relative;
  overflow: hidden;
}

[data-media-editor-target="waveform"]::part(region) {
  box-shadow: inset 2px 0 var(--accent), inset -2px 0 var(--accent);
}

[data-media-editor-target="waveform"]::part(region-handle-left),
[data-media-editor-target="waveform"]::part(region-handle-right) {
  border-color: var(--accent) !important;
}

.editor-playback-actions .text-button {
  min-height: 36px;
}

.editor-tools {
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -8px 0 28px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.editor-presets > span,
.editor-adjustments > span,
.editor-zoom > span {
  color: var(--muted);
  font-size: 12px;
}

.editor-presets .secondary-button {
  min-height: 34px;
  padding: 7px 12px;
}

.editor-adjustments .text-button {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 12px;
}

.editor-adjustments .text-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.editor-zoom input {
  width: min(180px, 24vw);
}

.clip-save-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  padding-top: 4px;
}

.clip-capability {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  font-size: 12px;
}

.clip-capability strong {
  color: var(--accent);
}

.clip-capability strong.is-voice-only {
  color: var(--warning);
}

.clip-capability span {
  color: var(--muted);
}

.clip-save-actions .text-button {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 720px) {
  .editor-tools {
    display: grid;
    gap: 18px;
  }

  .editor-presets {
    flex-wrap: wrap;
  }

  .media-heading-title {
    display: block;
  }

  .media-heading-title > span {
    display: block;
    margin-top: 8px;
  }

  .editor-zoom {
    justify-content: space-between;
  }

  .editor-zoom input {
    width: min(240px, 70vw);
  }
}
.app-confirm-dialog {
  width: min(28rem, calc(100vw - 2rem));
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 72px rgb(0 0 0 / 48%);
}

.app-confirm-dialog::backdrop {
  background: rgb(11 14 13 / 68%);
  backdrop-filter: blur(3px);
}

.app-confirm-dialog form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
}

.app-confirm-dialog-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #9b493d;
  font-weight: 800;
}

.app-confirm-dialog-copy { min-width: 0; }
.app-confirm-dialog-copy .eyebrow { margin: 1px 0 6px; }

.app-confirm-dialog h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
}

.app-confirm-dialog footer {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 5px;
}

.app-confirm-dialog-submit {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #843d33;
  border-radius: 3px;
  color: #fff;
  background: #9b493d;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.app-confirm-dialog-submit:hover { background: #843d33; }
.app-confirm-dialog-submit:focus-visible { outline: 3px solid #e2b6af; }

.confirm-dialog-preview {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.confirm-dialog-preview > section {
  width: min(32rem, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgb(41 45 43 / 10%);
}

.confirm-dialog-preview h1 { margin: 0; font-family: var(--serif); }
.confirm-dialog-preview > section > p:not(.eyebrow) { color: var(--muted); }

@media (max-width: 32rem) {
  .app-confirm-dialog { width: calc(100vw - 1rem); }
  .app-confirm-dialog form { padding: 18px; }
  .app-confirm-dialog footer { align-items: stretch; flex-direction: column-reverse; }
  .app-confirm-dialog footer button { width: 100%; }
}
.discord-access-help {
  padding-bottom: 5rem;
}

.access-help-heading {
  max-width: 48rem;
  padding: 3.5rem 0 2rem;
}

.access-help-heading h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.access-help-heading > p:last-child,
.access-help-card p,
.access-help-card li,
.access-help-card dd {
  color: var(--muted);
  line-height: 1.6;
}

.access-help-card {
  display: grid;
  grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.4fr);
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}

.access-help-card h2 {
  margin-top: 0.25rem;
}

.access-help-card ol {
  padding-left: 1.25rem;
}

.access-help-card figure {
  margin: 0;
}

.access-help-card img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
}

.access-help-card figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.access-permission-list {
  display: grid;
  gap: 1rem;
}

.access-permission-list dt {
  font-weight: 700;
}

.access-permission-list dd {
  margin: 0.2rem 0 0;
}

.access-help-channel aside {
  align-self: start;
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: var(--page);
}

.discord-access-help-link {
  display: inline-block;
  margin-left: 0.35rem;
  font-weight: 700;
  text-decoration: underline;
}

.flash .discord-access-help-link {
  margin: 0.25rem 0 0;
}

@media (max-width: 48rem) {
  .access-help-card {
    grid-template-columns: 1fr;
  }
}
.discord-voice-live-link {
  border-radius: 4px;
  text-decoration: none;
}

.discord-voice-live-link:hover {
  color: #fff;
  background: rgba(88, 101, 242, 0.16);
}

.discord-voice-live-link:focus-visible,
.discord-voice-sound-action:focus-visible {
  outline: 2px solid #5865f2;
  outline-offset: 2px;
}

.discord-voice-channel-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.discord-voice-sound-action {
  width: 22px;
  height: 22px;
  padding: 4px 5px;
  border: 0;
  border-radius: 4px;
  color: var(--discord-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.discord-voice-sound-action:hover { color: #fff; background: #35373c; }

.discord-live-voice-action.is-disabled.is-limited { color: #f0b86e; }
.discord-live-voice-action.is-disabled.is-locked { color: #f08285; }
.file-picker {
  position: relative;
  min-width: 0;
}

.file-picker-label {
  display: grid;
  gap: 8px;
  cursor: pointer;
}

.file-picker-title {
  font-size: 12px;
  font-weight: 600;
}

.file-picker-surface {
  display: flex;
  min-width: 0;
  min-height: 46px;
  gap: 12px;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}

.file-picker-button {
  flex: 0 0 auto;
  min-height: 36px;
  pointer-events: none;
}

.file-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker:focus-within .file-picker-surface {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.file-picker .file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 520px) {
  .file-picker-surface {
    align-items: flex-start;
    flex-direction: column;
    padding: 8px;
  }
}
.discord-conversation-home-list {
  display: grid;
  width: min(100%, 440px);
  gap: 8px;
  margin-top: 8px;
}

.discord-conversation-home-list a {
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid #454850;
  border-radius: 8px;
  color: #f2f3f5;
  background: #35373c;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-conversation-home-list a:hover { background: #42454d; }
.discord-conversation-home-list a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/*


 */