/* app/components/link.css */
a[rel~="external"]:after {
  content: "";
  display: inline-block;
  opacity: .7;
  vertical-align: .03em;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.75 1.25h4v4h-1.2V3.3L5.6 7.25l-.85-.85L8.7 2.45H6.75v-1.2Z'/%3E%3Cpath d='M2.1 2.2h3.2v1.2h-2v5.3h5.3v-2h1.2v3.2H2.1V2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
  block-size: .72em;
  inline-size: .72em;
  margin-inline-start: .22em;
}

/* doc/design/system/design-tokens.css */
:root {
  --zsb-white: #fff;
  --zsb-porcelain: #efeff1;
  --zsb-champagne: #faedc8;
  --zsb-honey: #eec96e;
  --zsb-pale-lilac: #d9cae4;
  --zsb-mauve: #ae9ac6;
  --zsb-lavender-gray: #9493a9;
  --zsb-charcoal-blue: #2d3142;
  --zsb-primary: var(--zsb-honey);
  --zsb-primary-hover: #e5bc54;
  --zsb-on-primary: var(--zsb-charcoal-blue);
  --zsb-tint-warm: var(--zsb-champagne);
  --zsb-tint-warm-hover: #f0dc9e;
  --zsb-tint-cool: var(--zsb-pale-lilac);
  --zsb-tint-neutral: var(--zsb-porcelain);
  --zsb-surface: var(--zsb-white);
  --zsb-body-bg: var(--zsb-white);
  --zsb-page-bg: var(--zsb-porcelain);
  --zsb-heading: var(--zsb-charcoal-blue);
  --zsb-body-text: var(--zsb-charcoal-blue);
  --zsb-muted: #757886;
  --zsb-muted-text: var(--zsb-muted);
  --zsb-subtle: #65676b;
  --zsb-tertiary: var(--zsb-lavender-gray);
  --zsb-success-bg: #e3f1e8;
  --zsb-success-text: #28624b;
  --zsb-success-accent: #5ba37c;
  --zsb-warning-bg: #faedc8;
  --zsb-warning-text: #6d4e11;
  --zsb-danger-bg: #f5dada;
  --zsb-danger-text: #9e2f2f;
  --zsb-info-bg: #d9cae4;
  --zsb-info-text: #55466d;
  --zsb-border: var(--zsb-lavender-gray);
  --zsb-border-soft: #2d31422e;
  --zsb-border-faint: #2d314214;
  --zsb-focus: var(--zsb-mauve);
  --zsb-font-body: "Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --zsb-font-heading: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --zsb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --zsb-text-sm: 13px;
  --zsb-text-sm-line: 18px;
  --zsb-text-md: 16px;
  --zsb-text-md-line: 24px;
  --zsb-text-lg: 20px;
  --zsb-text-lg-line: 28px;
  --zsb-text-xl: 32px;
  --zsb-text-xl-line: 42px;
  --zsb-space-0: 0;
  --zsb-space-px: 1px;
  --zsb-space-0-5: 2px;
  --zsb-space-1: 4px;
  --zsb-space-1-5: 6px;
  --zsb-space-2: 8px;
  --zsb-space-2-5: 12px;
  --zsb-space-3: 16px;
  --zsb-space-4: 24px;
  --zsb-space-5: 48px;
  --zsb-space-6: 96px;
  --zsb-radius: 6px;
  --zsb-radius-panel: 10px;
  --zsb-radius-card: 14px;
  --zsb-radius-circle: 50%;
  --zsb-radius-pill: 999px;
  --zsb-container: 1060px;
  --zsb-shadow-card: 0 12px 22px #1218200d;
  --zsb-shadow-hover: 0 16px 28px #12182017;
  --zsb-shadow-sticky: 0 2px 8px #2d314214;
}

.admin-shell, .admin-login, [data-area="community"] {
  --wa-color-brand-fill-loud: var(--zsb-honey);
  --wa-color-brand-fill-normal: var(--zsb-honey);
  --wa-color-brand-fill-quiet: var(--zsb-champagne);
  --wa-color-brand-border-loud: var(--zsb-charcoal-blue);
  --wa-color-brand-border-normal: var(--zsb-lavender-gray);
  --wa-color-brand-border-quiet: var(--zsb-border-soft);
  --wa-color-brand-on-loud: var(--zsb-charcoal-blue);
  --wa-color-brand-on-normal: var(--zsb-charcoal-blue);
  --wa-color-brand-on-quiet: var(--zsb-charcoal-blue);
  --wa-color-neutral-fill-loud: var(--zsb-charcoal-blue);
  --wa-color-neutral-fill-normal: var(--zsb-porcelain);
  --wa-color-neutral-fill-quiet: var(--zsb-white);
  --wa-color-neutral-border-loud: var(--zsb-charcoal-blue);
  --wa-color-neutral-border-normal: var(--zsb-border-soft);
  --wa-color-neutral-border-quiet: var(--zsb-border-soft);
  --wa-color-neutral-on-loud: #fff;
  --wa-color-neutral-on-normal: var(--zsb-charcoal-blue);
  --wa-color-neutral-on-quiet: var(--zsb-charcoal-blue);
  --wa-color-neutral-fill-quiet-on: var(--zsb-charcoal-blue);
  --wa-color-success-fill-quiet: var(--zsb-success-bg);
  --wa-color-success-on-quiet: var(--zsb-success-text);
  --wa-color-success-border-quiet: #28624b38;
  --wa-color-warning-fill-quiet: var(--zsb-warning-bg);
  --wa-color-warning-on-quiet: var(--zsb-warning-text);
  --wa-color-warning-border-quiet: #6d4e1138;
  --wa-color-danger-fill-quiet: var(--zsb-danger-bg);
  --wa-color-danger-on-quiet: var(--zsb-danger-text);
  --wa-color-danger-border-quiet: #9e2f2f40;
  --wa-font-family-body: var(--zsb-font-body);
  --wa-font-family-heading: var(--zsb-font-heading);
  --wa-border-radius-m: var(--zsb-radius);
  --wa-border-radius-l: var(--zsb-radius-panel);
  --wa-color-focus: var(--zsb-mauve);
}

/* doc/design/system/ui_kits/community/styles.css */
:root {
  --zsb-body-text: var(--zsb-subtle);
  --zsb-charcoal: var(--zsb-charcoal-blue);
  --h2: var(--zsb-text-xl);
  --h2-lh: var(--zsb-text-xl-line);
  --h4: var(--zsb-text-xl);
  --h4-lh: var(--zsb-text-xl-line);
  --h5: var(--zsb-text-lg);
  --h5-lh: var(--zsb-text-lg-line);
  --h6: var(--zsb-text-lg);
  --h6-lh: var(--zsb-text-lg-line);
  --p: var(--zsb-text-md);
  --p-lh: var(--zsb-text-md-line);
  --p-sm: var(--zsb-text-md);
  --p-sm-lh: var(--zsb-text-md-line);
  --p-xs: var(--zsb-text-sm);
  --p-xs-lh: var(--zsb-text-sm-line);
  --transition: all .3s ease;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-heading);
  background: var(--zsb-surface);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--zsb-focus);
  outline-offset: 2px;
}

button:focus-visible {
  border-radius: var(--zsb-radius);
}

a:focus-visible {
  border-radius: var(--zsb-radius);
}

.community-header-bg {
  background: var(--zsb-primary);
  width: 100%;
}

.community-header {
  display: flex;
  padding: 0 var(--zsb-space-4);
  align-items:  center;
  gap: var(--zsb-space-4);
  max-width: var(--zsb-container);
  height: 64px;
  margin: 0 auto;
}

.community-nav {
  display: flex;
  gap: var(--zsb-space-3);
}

.community-nav__link {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  text-decoration: none;
  cursor: pointer;
  padding: var(--zsb-space-1) 0;
  user-select: none;
  white-space: nowrap;
  border-bottom: 2px solid #0000;
  transition: border-color .2s;
  font-weight: 600;
}

.community-nav__link:hover {
  border-bottom-color: color-mix(in srgb, var(--zsb-heading) 30%, transparent);
}

.community-nav__link--active {
  border-bottom-color: var(--zsb-heading);
}

.community-header__spacer {
  flex: 1;
}

.community-user-chip {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2);
  padding: var(--zsb-space-2) 12px;
  background: color-mix(in srgb, var(--zsb-surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--zsb-heading) 12%, transparent);
  border-radius: var(--zsb-radius);
  cursor: pointer;
  text-decoration: none;
  height: 40px;
  transition: background .2s;
}

.community-user-chip:hover {
  background: color-mix(in srgb, var(--zsb-surface) 75%, transparent);
}

.community-user-chip__icon {
  color: var(--zsb-heading);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.community-user-chip__label {
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  font-weight: 500;
  line-height: 1.3;
}

.community-header__logo {
  filter: invert(1) brightness(0);
  flex-shrink: 0;
  width: auto;
  height: 38px;
}

.community-hamburger {
  display: none;
  cursor: pointer;
  color: var(--zsb-heading);
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  padding: 0;
}

.community-hamburger svg {
  width: 24px;
  height: 24px;
}

.community-mobile-nav {
  display: none;
  position: fixed;
  background: var(--zsb-primary);
  z-index: 99;
  padding: var(--zsb-space-4);
  gap: var(--zsb-space-2);
  flex-direction: column;
  inset: 64px 0 0;
}

.community-mobile-nav--open {
  display: flex;
}

.community-mobile-nav .community-nav__link {
  font-size: var(--zsb-text-md);
  border-bottom: 1px solid color-mix(in srgb, var(--zsb-heading) 12%, transparent);
  padding: 12px 0;
}

.community-page {
  max-width: var(--zsb-container);
  padding: var(--zsb-space-4) var(--zsb-space-4) var(--zsb-space-5);
  margin: 0 auto;
}

.community-page__title {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-xl);
  line-height: var(--zsb-text-xl-line);
  color: var(--zsb-heading);
  margin: 0 0 var(--zsb-space-3);
  font-weight: 700;
}

.community-page__subtitle {
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-body-text);
  margin: 0 0 var(--zsb-space-4);
}

.community-back-link {
  display: inline-flex;
  align-items:  center;
  gap: var(--zsb-space-1);
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  text-decoration: none;
  margin-bottom: var(--zsb-space-2);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}

.community-back-link:hover {
  text-decoration: underline;
}

.community-back-link svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.community-section {
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
  margin-bottom: var(--zsb-space-3);
}

.community-section__header {
  background: var(--zsb-tint-warm);
  padding: 10px var(--zsb-space-4);
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  font-weight: 600;
}

.community-section__body {
  padding: var(--zsb-space-4);
}

.community-section__header--flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:  center;
  gap: 8px;
}

.community-section__header-icon {
  display: inline-flex;
  align-items:  center;
  gap: 6px;
}

.community-section__header-icon svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.community-section__header-meta {
  color: var(--zsb-body-text);
  font-weight: 400;
  font-size: var(--zsb-text-sm);
}

.community-section__header-count {
  color: var(--zsb-muted);
  font-weight: 400;
  font-size: var(--zsb-text-sm);
}

.community-section-body--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--zsb-space-2) var(--zsb-space-4);
}

.community-section-body--flush {
  padding: 0;
}

.community-body-text {
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-body-text);
}

.community-body-text p {
  margin: 0 0 var(--zsb-space-3);
}

.community-body-text--sm {
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-body-text);
}

.community-status-card {
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  padding: var(--zsb-space-4);
  margin-bottom: var(--zsb-space-3);
  display: flex;
  gap: var(--zsb-space-2);
  flex-direction: column;
}

.community-status-card__header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--zsb-space-3);
}

.community-status-pill {
  display: inline-flex;
  font-family: var(--zsb-font-heading);
  font-weight: 600;
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-sm-line);
  border-radius: var(--zsb-radius-pill);
  align-self:  flex-start;
  align-items:  center;
  gap: 6px;
  padding: 6px 14px;
}

.community-status-pill svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.community-status-pill--success {
  background: var(--zsb-success-bg);
  color: var(--zsb-success-text);
}

.community-status-pill--warning {
  background: var(--zsb-warning-bg);
  color: var(--zsb-warning-text);
}

.community-status-pill--info {
  background: var(--zsb-info-bg);
  color: var(--zsb-info-text);
}

.community-status-pill--danger {
  background: var(--zsb-danger-bg);
  color: var(--zsb-danger-text);
}

.community-status-card__level {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  font-weight: 600;
}

.community-status-card__price, .community-status-card__meta {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-body-text);
}

.community-status-card__meta strong {
  color: var(--zsb-heading);
}

.community-tabs {
  display: flex;
  border-bottom: 1px solid var(--zsb-border-soft);
  margin-bottom: var(--zsb-space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}

.community-tabs::-webkit-scrollbar {
  display: none;
}

.community-tab {
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  color: var(--zsb-body-text);
  padding: 12px var(--zsb-space-3);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  background: none;
  border: none;
  border-bottom: 3px solid #0000;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
  font-weight: 400;
}

.community-tab:hover {
  color: var(--zsb-heading);
}

.community-tab--active {
  color: var(--zsb-heading);
  border-bottom-color: var(--zsb-primary);
  font-weight: 500;
}

.community-stepper {
  padding: 38px 0 0;
}

.community-stepper__track {
  display: flex;
  align-items:  center;
  margin-bottom: 10px;
  padding: 0 calc(12.5% - 16px);
}

.community-step__node {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  align-items:  center;
}

.community-step__connector {
  flex: 1;
  min-width: 8px;
  height: 2px;
}

.community-step__connector--done {
  background: var(--zsb-success-accent);
}

.community-step__connector--active {
  background: var(--zsb-primary);
}

.community-step__connector--future {
  background: color-mix(in srgb, var(--zsb-heading) 12%, transparent);
}

.community-step__circle {
  display: flex;
  font-family: var(--zsb-font-heading);
  font-weight: 700;
  font-size: var(--zsb-text-sm);
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
}

.community-step__circle--done {
  background: var(--zsb-success-bg);
  color: var(--zsb-success-text);
  border-radius: 50%;
}

.community-step__circle--active {
  background: var(--zsb-primary);
  color: var(--zsb-heading);
  border-radius: 50%;
}

.community-step__circle--future {
  background: var(--zsb-surface);
  color: var(--zsb-tertiary);
  border: 1.5px solid color-mix(in srgb, var(--zsb-heading) 20%, transparent);
  border-radius: var(--zsb-space-2);
}

.community-stepper__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.community-step__info {
  overflow: hidden;
  padding: 0 4px;
}

.community-step__label {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  font-weight: 600;
  line-height: var(--zsb-text-sm-line);
  margin-bottom: 2px;
}

.community-step__label--future {
  color: var(--zsb-tertiary);
}

.community-step__desc {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-body-text);
  line-height: var(--zsb-text-sm-line);
}

.community-step__desc--future {
  color: var(--zsb-tertiary);
}

.community-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px var(--zsb-space-4);
  align-items: baseline;
}

.community-dl dt {
  color: var(--zsb-heading);
  font-weight: 600;
  font-size: var(--zsb-text-md);
}

.community-dl dd {
  color: var(--zsb-body-text);
  font-size: var(--zsb-text-md);
  margin: 0;
}

.community-dl--inline {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.community-dl__label {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-muted);
  font-weight: 500;
}

.community-dl__value {
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
}

.community-btn {
  display: inline-flex;
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  padding: 10px var(--zsb-space-3);
  border-radius: var(--zsb-radius);
  border: 1px solid var(--zsb-border-soft);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  color: var(--zsb-heading);
  background: var(--zsb-tint-warm);
  justify-content: center;
  align-items:  center;
  gap: 6px;
  font-weight: 500;
}

.community-btn:hover {
  background: var(--zsb-tint-warm-hover);
}

.community-btn--primary {
  background: var(--zsb-primary);
  border-color: var(--zsb-primary);
}

.community-btn--primary:hover {
  background: var(--zsb-primary-hover);
}

.community-btn--outline {
  background: var(--zsb-surface);
}

.community-btn--outline:hover {
  background: var(--zsb-tint-neutral);
}

.community-btn--danger {
  background: var(--zsb-danger-bg);
  color: var(--zsb-danger-text);
  border-color: color-mix(in srgb, var(--zsb-danger-text) 20%, transparent);
}

.community-btn--full {
  display: flex;
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  padding: 12px var(--zsb-space-4);
  border-radius: var(--zsb-radius);
  background: var(--zsb-primary);
  color: var(--zsb-heading);
  cursor: pointer;
  border: none;
  justify-content: center;
  width: 100%;
  transition: background .2s;
  font-weight: 600;
}

.community-btn--full:hover {
  background: var(--zsb-primary-hover);
}

.community-tag {
  display: inline-flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  border-radius: var(--zsb-radius-pill);
  white-space: nowrap;
  align-items:  center;
  gap: 4px;
  padding: 4px 10px;
  font-weight: 600;
}

.community-tag svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.community-tag--success {
  background: var(--zsb-success-bg);
  color: var(--zsb-success-text);
}

.community-tag--warning {
  background: var(--zsb-warning-bg);
  color: var(--zsb-warning-text);
}

.community-tag--neutral {
  background: var(--zsb-tint-neutral);
  color: var(--zsb-muted);
}

.community-table__wrap {
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
}

.community-table {
  border-collapse: collapse;
  width: 100%;
}

.community-table th {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  text-align: left;
  padding: 12px var(--zsb-space-3);
  border-bottom: 1px solid var(--zsb-border-soft);
  background: var(--zsb-tint-warm);
  font-weight: 600;
}

.community-table td {
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  padding: 14px var(--zsb-space-3);
  border-bottom: 1px solid var(--zsb-border-faint);
  vertical-align: middle;
}

.community-table__row--last td {
  border-bottom: none;
}

.community-table .col-muted {
  color: var(--zsb-body-text);
}

.community-benefit-list {
  display: flex;
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
  flex-direction: column;
}

.community-benefit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--zsb-space-4);
  padding: 14px var(--zsb-space-3);
  border-bottom: 1px solid var(--zsb-border-faint);
  align-items:  center;
  transition: background .15s;
}

.community-benefit-row:last-child {
  border-bottom: none;
}

.community-benefit-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.community-benefit-row__top {
  display: flex;
  align-items: baseline;
  gap: var(--zsb-space-2);
}

.community-benefit-row__name {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  font-weight: 600;
}

.community-benefit-row__level {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
  white-space: nowrap;
}

.community-benefit-row__desc {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-body-text);
  line-height: var(--zsb-text-sm-line);
}

.community-benefit-row__actions {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2);
  grid-row: 1 / 3;
  grid-column: 2;
  flex-shrink: 0;
}

.community-benefit-row--waiting {
  background: color-mix(in srgb, var(--zsb-tint-warm) 18%, transparent);
}

.community-benefit-row--waiting .community-benefit-row__desc {
  color: var(--zsb-warning-text);
}

.community-benefit-row--locked {
  opacity: .55;
}

.community-benefit-row--locked .community-benefit-row__name {
  color: var(--zsb-muted);
}

.community-notice {
  display: flex;
  padding: 14px var(--zsb-space-3);
  border-radius: var(--zsb-radius-panel);
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-md-line);
  margin-bottom: var(--zsb-space-3);
  align-items:  flex-start;
  gap: 12px;
}

.community-notice__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.community-notice__icon svg {
  width: 18px;
  height: 18px;
}

.community-notice__body {
  flex: 1;
  min-width: 0;
}

.community-notice__title {
  font-family: var(--zsb-font-heading);
  font-weight: 600;
  font-size: var(--zsb-text-sm);
  margin-bottom: 2px;
}

.community-notice--success {
  background: var(--zsb-success-bg);
  color: var(--zsb-success-text);
}

.community-notice--warning {
  background: var(--zsb-warning-bg);
  color: var(--zsb-warning-text);
}

.community-notice--danger {
  background: var(--zsb-danger-bg);
  color: var(--zsb-danger-text);
}

.community-notice--info {
  background: var(--zsb-info-bg);
  color: var(--zsb-info-text);
}

.community-empty {
  display: flex;
  text-align: center;
  padding: var(--zsb-space-5) var(--zsb-space-4);
  border: 1px dashed var(--zsb-border);
  border-radius: var(--zsb-radius-panel);
  flex-direction: column;
  align-items:  center;
}

.community-empty__icon {
  color: var(--zsb-tertiary);
  margin-bottom: var(--zsb-space-3);
  width: 48px;
  height: 48px;
}

.community-empty__icon svg {
  width: 100%;
  height: 100%;
}

.community-empty h3 {
  font-family: var(--zsb-font-heading);
  font-weight: 600;
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  margin: 0 0 var(--zsb-space-1);
}

.community-empty p {
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-body-text);
  margin: 0 0 var(--zsb-space-3);
  max-width: 36ch;
}

.community-activity-log {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.community-log__entry {
  display: grid;
  grid-template-columns: 20px 1fr;
  padding-bottom: var(--zsb-space-3);
  gap: 0 12px;
}

.community-log__entry:last-child {
  padding-bottom: 0;
}

.community-log__dot {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items:  center;
}

.community-log__dot:before {
  content: "";
  background: var(--zsb-tint-cool);
  border: 2px solid var(--zsb-border);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 4px;
}

.community-log__dot:after {
  content: "";
  background: var(--zsb-tint-neutral);
  flex: 1;
  width: 2px;
  margin-top: 4px;
}

.community-log__entry:first-child .community-log__dot:before {
  background: var(--zsb-primary);
  border-color: var(--zsb-primary);
}

.community-log__entry:last-child .community-log__dot:after {
  display: none;
}

.community-log__time {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  font-weight: 600;
  line-height: var(--zsb-text-sm-line);
}

.community-log__time .relative {
  color: var(--zsb-tertiary);
  margin-left: 4px;
  font-weight: 400;
}

.community-log__desc {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-body-text);
  padding-bottom: var(--zsb-space-2);
}

.community-log__entry:last-child .community-log__desc {
  padding-bottom: 0;
}

.community-membership-card {
  background: var(--zsb-tint-warm);
  border-radius: var(--zsb-radius-card);
  display: flex;
  flex-direction: column;
  max-width: 480px;
  padding: 28px 28px 20px;
}

.community-membership-card__top {
  display: flex;
  margin-bottom: var(--zsb-space-4);
  justify-content: space-between;
  align-items:  flex-start;
}

.community-membership-card__logo {
  width: auto;
  height: 32px;
}

.community-membership-card__level {
  display: inline-flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  background: var(--zsb-primary);
  color: var(--zsb-heading);
  border-radius: var(--zsb-radius-pill);
  white-space: nowrap;
  align-self:  flex-start;
  padding: 3px 10px;
  font-weight: 600;
}

.community-membership-card__middle {
  display: flex;
  justify-content: space-between;
  align-items:  flex-end;
  gap: var(--zsb-space-4);
  margin-bottom: var(--zsb-space-3);
}

.community-membership-card__number {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  opacity: .55;
  margin-bottom: var(--zsb-space-1);
  font-weight: 500;
}

.community-membership-card__number-value {
  font-family: var(--zsb-font-heading);
  font-weight: 700;
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  letter-spacing: .04em;
}

.community-membership-card__qr {
  background: color-mix(in srgb, var(--zsb-surface) 65%, transparent);
  border-radius: var(--zsb-radius);
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 96px;
  height: 96px;
}

.community-membership-card__footer {
  border-top: 1px dashed color-mix(in srgb, var(--zsb-heading) 20%, transparent);
  text-align: center;
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  opacity: .5;
  padding-top: 12px;
}

.community-event-grid {
  display: flex;
  gap: var(--zsb-space-3);
  flex-direction: column;
}

.community-event-card {
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
  display: flex;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  flex-direction: row;
  transition: box-shadow .25s, transform .25s;
}

.community-event-card:hover {
  box-shadow: var(--zsb-shadow-hover);
  transform: translateY(-1px);
}

.community-event-card__date {
  display: flex;
  background: var(--zsb-tint-warm);
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  min-width: 72px;
  padding: 16px 20px;
}

.community-event-card__date-day {
  font-family: var(--zsb-font-heading);
  font-weight: 700;
  font-size: var(--zsb-text-lg);
  color: var(--zsb-heading);
  line-height: 28px;
}

.community-event-card__date-month {
  font-family: var(--zsb-font-heading);
  font-weight: 600;
  font-size: var(--zsb-text-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--zsb-heading);
  opacity: .7;
}

.community-event-card__body {
  padding: 14px var(--zsb-space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.community-event-card__title {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-heading);
  margin: 0;
  font-weight: 600;
}

.community-event-card__meta {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-muted);
  flex-wrap: wrap;
}

.community-event-card__meta svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.community-event-card__meta-item {
  display: inline-flex;
  white-space: nowrap;
  align-items:  center;
  gap: 3px;
}

.community-event-card__summary {
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-sm-line);
  color: var(--zsb-body-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-box-orient: vertical;
  margin: 0;
}

.community-meta-bar {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2);
  margin-bottom: var(--zsb-space-3);
  flex-wrap: wrap;
}

.community-chip {
  display: inline-flex;
  font-size: var(--zsb-text-sm);
  border-radius: var(--zsb-radius-pill);
  align-items:  center;
  gap: 6px;
  padding: 5px 12px;
  font-weight: 500;
}

.community-chip svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.community-chip--date {
  background: var(--zsb-tint-warm);
  color: var(--zsb-heading);
  font-family: var(--zsb-font-heading);
  font-weight: 600;
}

.community-chip--location {
  background: var(--zsb-tint-cool);
  color: var(--zsb-info-text);
}

.community-chip--time {
  background: var(--zsb-tint-neutral);
  color: var(--zsb-heading);
}

.community-video-player {
  aspect-ratio: 16 / 9;
  background: var(--zsb-heading);
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
  display: flex;
  position: relative;
  cursor: pointer;
  justify-content: center;
  align-items:  center;
  max-width: 860px;
}

.community-video-player__play {
  background: color-mix(in srgb, var(--zsb-surface) 85%, transparent);
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  width: 56px;
  height: 56px;
}

.community-video-player__play svg {
  color: var(--zsb-heading);
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.community-video-list {
  display: flex;
  gap: var(--zsb-space-2);
  flex-direction: column;
}

.community-video-item {
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  padding: 14px var(--zsb-space-3);
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-3);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s, transform .25s;
}

.community-video-item:hover {
  box-shadow: var(--zsb-shadow-hover);
  transform: translateY(-1px);
}

.community-video-item__play {
  background: var(--zsb-heading);
  display: flex;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 40px;
  height: 40px;
}

.community-video-item__play svg {
  color: #fff;
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.community-video-item__body {
  flex: 1;
  min-width: 0;
}

.community-video-item__title {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  margin: 0;
  font-weight: 600;
}

.community-video-item__desc {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-body-text);
  line-height: var(--zsb-text-sm-line);
  margin: 0;
}

.community-video-item__status {
  flex-shrink: 0;
}

.community-video-item--done .community-video-item__play {
  background: var(--zsb-success-bg);
}

.community-video-item--done .community-video-item__play-icon {
  color: var(--zsb-success-text);
}

.community-video-item--flush {
  border: none;
  border-bottom: 1px solid var(--zsb-border-faint);
  border-radius: 0;
}

.community-video-item--flush:last-child {
  border-bottom: none;
}

.community-video-list--flush {
  gap: 0;
}

.community-video-info {
  margin-top: var(--zsb-space-3);
  max-width: 860px;
}

.community-video-info__header {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--zsb-space-3);
  margin-bottom: 8px;
}

.community-video-info__title {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  margin: 0;
  font-weight: 700;
}

.community-playlist__label {
  display: inline-flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
  text-decoration: none;
  cursor: pointer;
  align-items:  center;
  gap: 5px;
  font-weight: 500;
}

.community-playlist__label:hover {
  color: var(--zsb-heading);
}

.community-playlist__label svg {
  width: 13px;
  height: 13px;
}

.community-playlist__show-all {
  padding: 12px var(--zsb-space-3);
  border-top: 1px solid color-mix(in srgb, var(--zsb-heading) 6%, transparent);
}

.community-progress-bar {
  background: var(--zsb-tint-neutral);
  border-radius: var(--zsb-radius-pill);
  margin-bottom: var(--zsb-space-4);
  max-width: 320px;
  height: 4px;
}

.community-progress-bar__fill {
  background: var(--zsb-primary);
  border-radius: var(--zsb-radius-pill);
  height: 100%;
  transition: width .3s;
}

.community-chip-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.community-chip-link:hover {
  opacity: .85;
}

.community-chip-link__icon {
  opacity: .6;
  width: 11px;
  height: 11px;
}

.community-nav-link--muted {
  opacity: .55;
}

.community-stepper-labels--5 {
  grid-template-columns: repeat(5, 1fr);
}

.community-comments {
  border-top: 1px solid var(--zsb-border-soft);
  margin-top: var(--zsb-space-4);
  padding-top: var(--zsb-space-4);
  max-width: 860px;
}

.community-comments__title {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  margin: 0 0 var(--zsb-space-3);
  font-weight: 600;
}

.community-rules {
  background: var(--zsb-tint-neutral);
  border-radius: var(--zsb-radius-panel);
  padding: var(--zsb-space-3);
  margin-bottom: var(--zsb-space-3);
}

.community-rules__heading {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  margin: 0 0 var(--zsb-space-2);
  font-weight: 600;
}

.community-rules__list {
  padding-left: var(--zsb-space-3);
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-body-text);
  margin: 0;
}

.community-rules__list li {
  margin-bottom: var(--zsb-space-1);
}

.community-comments__empty {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-muted);
  margin-top: var(--zsb-space-2);
}

.community-form__label {
  display: block;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  margin-bottom: 5px;
  font-weight: 600;
}

.community-input, .community-textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) :not([type="button"]):not([type="file"]):not([type="reset"]) :not([type="image"]), textarea, select {
  display: block;
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius);
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  outline: none;
  background: var(--zsb-surface);
  width: 100%;
  padding: 10px 12px;
  transition: border-color .2s;
}

.community-input:focus, .community-textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) :not([type="button"]):not([type="file"]):not([type="reset"]) :not([type="image"]):focus, textarea:focus, select:focus {
  border-width: 2px;
  border-color: var(--zsb-focus);
  padding: 9px 11px;
}

.community-textarea, textarea {
  resize: vertical;
  min-height: 100px;
}

.community-form-group {
  margin-bottom: var(--zsb-space-3);
}

.community-form__error {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-danger-text);
  margin-top: var(--zsb-space-1);
}

.community-form__hint {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
  margin-top: var(--zsb-space-1);
}

.community-info-card {
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  padding: var(--zsb-space-4);
  margin-bottom: var(--zsb-space-3);
  display: flex;
  gap: var(--zsb-space-3);
  flex-direction: column;
}

.community-info-card__row {
  display: flex;
  gap: var(--zsb-space-1);
  font-size: var(--zsb-text-md);
  flex-direction: column;
}

.community-info-card__row .community-tag {
  align-self:  flex-start;
}

.community-info-card__row strong {
  color: var(--zsb-heading);
  font-weight: 600;
}

.community-info-card__row span {
  color: var(--zsb-body-text);
}

.community-info-card__desc {
  font-size: var(--zsb-text-md);
  color: var(--zsb-body-text);
  line-height: var(--zsb-text-md-line);
  margin-top: var(--zsb-space-1);
}

.community-status-inline {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2);
  font-size: var(--zsb-text-md);
  margin-bottom: var(--zsb-space-3);
}

.community-status-inline .label {
  color: var(--zsb-muted);
}

.community-qr__label {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  margin-bottom: var(--zsb-space-2);
  white-space: nowrap;
  font-weight: 600;
}

.community-qr__block {
  background: var(--zsb-tint-warm);
  border-radius: var(--zsb-radius);
  padding: var(--zsb-space-3);
  display: inline-block;
}

.community-playlist__heading {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  margin: var(--zsb-space-3) 0 var(--zsb-space-3);
  font-weight: 700;
}

.community-docs-row {
  display: flex;
  gap: var(--zsb-space-3);
  padding: var(--zsb-space-3) 0;
  flex-wrap: wrap;
}

.community-docs-row__link {
  display: inline-flex;
  align-items:  center;
  gap: var(--zsb-space-1);
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  text-decoration: none;
  font-weight: 500;
}

.community-docs-row__link:hover {
  text-decoration: underline;
  color: var(--zsb-focus);
}

.community-docs-row__link svg {
  color: var(--zsb-tertiary);
  width: 14px;
  height: 14px;
}

.community-comment-thread {
  display: flex;
  gap: var(--zsb-space-4);
  flex-direction: column;
}

.community-comment {
  display: flex;
  gap: 12px;
}

.community-comment__avatar {
  background: var(--zsb-tint-warm);
  display: flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  user-select: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 36px;
  height: 36px;
  font-weight: 700;
}

.community-comment__avatar--purple {
  background: var(--zsb-tint-cool);
  color: var(--zsb-info-text);
}

.community-comment__avatar--gray {
  background: var(--zsb-tint-neutral);
  color: var(--zsb-muted);
}

.community-comment__content {
  flex: 1;
  min-width: 0;
}

.community-comment__header {
  display: flex;
  align-items: baseline;
  gap: var(--zsb-space-2);
  margin-bottom: 4px;
}

.community-comment__name {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  font-weight: 600;
}

.community-comment__time {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
}

.community-comment__text {
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-body-text);
  margin: 0;
}

.community-comment__actions {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-3);
  margin-top: 8px;
}

.community-comment__action {
  display: inline-flex;
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  align-items:  center;
  gap: 4px;
  padding: 0;
  transition: color .2s;
  font-weight: 500;
}

.community-comment__action:hover {
  color: var(--zsb-heading);
}

.community-comment__action--liked {
  color: var(--zsb-danger-text);
}

.community-comment__action svg {
  width: 14px;
  height: 14px;
}

.community-comment__replies {
  padding-left: var(--zsb-space-3);
  border-left: 2px solid var(--zsb-tint-neutral);
  display: flex;
  gap: var(--zsb-space-3);
  margin-left: 48px;
  margin-top: var(--zsb-space-3);
  flex-direction: column;
}

.community-comment__replies .community-comment__avatar {
  font-size: var(--zsb-text-sm);
  width: 28px;
  height: 28px;
}

.community-rules__toggle {
  display: inline-flex;
  cursor: pointer;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
  margin-bottom: var(--zsb-space-3);
  background: none;
  border: none;
  align-items:  center;
  gap: 6px;
  padding: 0;
  transition: color .2s;
  font-weight: 500;
}

.community-rules__toggle:hover {
  color: var(--zsb-heading);
}

.community-rules__toggle svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.community-rules__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.community-rules__body {
  overflow: hidden;
  transition: max-height .3s;
}

.community-rules__body--collapsed {
  max-height: 0 !important;
}

.community-comment-compose {
  display: flex;
  align-items:  flex-start;
  gap: 12px;
}

.community-comment-compose__body {
  display: flex;
  gap: var(--zsb-space-2);
  flex-direction: column;
  flex: 1;
}

.community-comment-compose .community-textarea {
  min-height: 72px;
}

.community-comment-compose__footer {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

.community-comment-compose__char-count {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
}

.community-comment-compose__submit {
  display: inline-flex;
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  border-radius: var(--zsb-radius);
  background: var(--zsb-primary);
  color: var(--zsb-heading);
  cursor: pointer;
  border: none;
  align-items:  center;
  gap: 6px;
  padding: 8px 20px;
  transition: background .2s;
  font-weight: 600;
}

.community-comment-compose__submit:hover {
  background: var(--zsb-primary-hover);
}

.community-comment-compose__submit:disabled {
  opacity: .45;
  cursor: default;
}

.community-comment-compose__submit:disabled:hover {
  background: var(--zsb-primary);
}

.community-comments__count {
  display: inline-flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  background: var(--zsb-tint-neutral);
  color: var(--zsb-muted);
  border-radius: var(--zsb-radius-pill);
  margin-left: var(--zsb-space-2);
  vertical-align: middle;
  justify-content: center;
  align-items:  center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-weight: 700;
}

.community-event-card__img {
  background: var(--zsb-tint-neutral);
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 100px;
}

.community-event-card__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.community-event-card__img-placeholder {
  font-family: var(--zsb-font-mono);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-tertiary);
  text-align: center;
  padding: 8px;
  line-height: 1.4;
}

.community-event-hero__img {
  aspect-ratio: 16 / 9;
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
  background: var(--zsb-tint-neutral);
  margin-bottom: var(--zsb-space-3);
  display: flex;
  justify-content: center;
  align-items:  center;
  width: 100%;
  max-width: 720px;
}

.community-event-hero__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.community-program {
  display: flex;
  flex-direction: column;
}

.community-program-item {
  display: flex;
  gap: var(--zsb-space-3);
  border-bottom: 1px solid var(--zsb-border-faint);
  padding: 14px 0;
}

.community-program-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.community-program-item:first-child {
  padding-top: 0;
}

.community-program-item__time {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  flex-shrink: 0;
  min-width: 56px;
  padding-top: 1px;
  font-weight: 600;
}

.community-program-item__content {
  flex: 1;
  min-width: 0;
}

.community-program-item__title {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  font-weight: 600;
  line-height: var(--zsb-text-md-line);
  margin: 0 0 2px;
}

.community-program-item__desc {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-body-text);
  line-height: var(--zsb-text-sm-line);
  margin: 0;
}

.community-program-item__icon {
  border-radius: var(--zsb-radius);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
}

.community-program-item__icon--honey {
  background: var(--zsb-tint-warm);
  color: var(--zsb-heading);
}

.community-program-item__icon--lilac {
  background: var(--zsb-tint-cool);
  color: var(--zsb-info-text);
}

.community-program-item__icon--neutral {
  background: var(--zsb-tint-neutral);
  color: var(--zsb-muted);
}

.community-program-item__icon svg {
  width: 16px;
  height: 16px;
}

.community-location-card {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-3);
  padding: var(--zsb-space-3);
  background: var(--zsb-tint-neutral);
  border-radius: var(--zsb-radius-panel);
}

.community-location-card__icon {
  border-radius: var(--zsb-radius);
  background: var(--zsb-tint-cool);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 44px;
  height: 44px;
}

.community-location-card__icon svg {
  color: var(--zsb-info-text);
  width: 20px;
  height: 20px;
}

.community-location-card__body {
  flex: 1;
  min-width: 0;
}

.community-location-card__name {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  font-weight: 600;
  line-height: var(--zsb-text-md-line);
}

.community-location-card__address {
  font-size: var(--zsb-text-sm);
  color: var(--zsb-body-text);
  line-height: var(--zsb-text-sm-line);
}

.community-location-card__link {
  display: inline-flex;
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-info-text);
  text-decoration: none;
  align-items:  center;
  gap: 4px;
  margin-top: 4px;
  font-weight: 500;
}

.community-location-card__link:hover {
  text-decoration: underline;
}

.community-location-card__link svg {
  width: 12px;
  height: 12px;
}

.community-bring-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.community-bring-item {
  display: flex;
  font-size: var(--zsb-text-md);
  color: var(--zsb-body-text);
  line-height: var(--zsb-text-md-line);
  align-items:  flex-start;
  gap: 10px;
}

.community-bring-item__icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.community-bring-item__icon svg {
  color: var(--zsb-primary);
  width: 16px;
  height: 16px;
}

.community-organizers {
  display: flex;
  gap: var(--zsb-space-3);
  flex-wrap: wrap;
}

.community-organizer {
  display: flex;
  background: var(--zsb-tint-neutral);
  border-radius: var(--zsb-radius-pill);
  align-items:  center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
}

.community-organizer__avatar {
  background: var(--zsb-tint-warm);
  display: flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 28px;
  height: 28px;
  font-weight: 700;
}

.community-organizer__avatar--purple {
  background: var(--zsb-tint-cool);
  color: var(--zsb-info-text);
}

.community-organizer__name {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  font-weight: 600;
}

.community-event-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--zsb-space-4);
  align-items:  start;
}

.community-event-layout__main {
  display: flex;
  gap: var(--zsb-space-3);
  flex-direction: column;
}

.community-event-layout__sidebar {
  display: flex;
  gap: var(--zsb-space-3);
  position: sticky;
  top: var(--zsb-space-4);
  flex-direction: column;
}

.community-level-cards {
  display: flex;
  gap: var(--zsb-space-3);
  flex-direction: column;
}

.community-level-card {
  display: block;
  box-sizing: border-box;
  position: relative;
  border: 1.5px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  padding: var(--zsb-space-3) var(--zsb-space-4);
  cursor: pointer;
  user-select: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.community-level-card:hover {
  border-color: color-mix(in srgb, var(--zsb-heading) 30%, transparent);
  box-shadow: var(--zsb-shadow-card);
}

.community-level-card--selected {
  border-color: var(--zsb-primary);
  background: color-mix(in srgb, var(--zsb-tint-warm) 18%, transparent);
  box-shadow: 0 0 0 1px var(--zsb-primary);
}

.community-level-card__header {
  display: flex;
  justify-content: space-between;
  align-items:  flex-start;
  gap: var(--zsb-space-3);
  margin-bottom: 4px;
}

.community-level-card__name {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  font-weight: 600;
  line-height: var(--zsb-text-md-line);
}

.community-level-card__price {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  font-weight: 700;
}

.community-level-card__radio {
  border: 2px solid color-mix(in srgb, var(--zsb-heading) 25%, transparent);
  border-radius: var(--zsb-radius-circle);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  transition: border-color .2s;
}

.community-level-card--selected .community-level-card__radio {
  border-color: var(--zsb-primary);
}

.community-level-card--selected .community-level-card__radio:after {
  content: "";
  background: var(--zsb-primary);
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.community-level-card__benefits {
  list-style: none;
  border-top: 1px dashed color-mix(in srgb, var(--zsb-heading) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  padding: 12px 0 0;
}

.community-level-card__benefits li {
  display: flex;
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-sm-line);
  color: var(--zsb-body-text);
  align-items:  flex-start;
  gap: 8px;
}

.community-level-card__benefits li:before {
  content: "";
  background: var(--zsb-tertiary);
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
}

.community-level-card--selected .community-level-card__benefit-dot {
  background: var(--zsb-primary);
}

.community-level-card__benefit--new:before {
  background: var(--zsb-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zsb-primary) 30%, transparent);
  width: 7px;
  height: 7px;
}

.community-level-card__benefit--new {
  color: var(--zsb-heading);
  font-weight: 500;
}

.community-app-stepper {
  display: flex;
  padding: var(--zsb-space-3) var(--zsb-space-4);
  flex-direction: column;
  gap: 0;
}

.community-app-step {
  display: flex;
  padding-bottom: var(--zsb-space-4);
  position: relative;
  gap: 14px;
}

.community-app-step:last-child {
  padding-bottom: 0;
}

.community-app-step:not(:last-child):after {
  content: "";
  position: absolute;
  background: var(--zsb-tint-neutral);
  width: 2px;
  top: 34px;
  bottom: 0;
  left: 15px;
}

.community-app-step--done:not(:last-child):after {
  background: var(--zsb-success-bg);
}

.community-app-step__circle {
  border-radius: var(--zsb-radius-circle);
  display: flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 32px;
  height: 32px;
  font-weight: 700;
}

.community-app-step--done .community-app-step__circle {
  background: var(--zsb-success-bg);
  color: var(--zsb-success-text);
}

.community-app-step--active .community-app-step__circle {
  background: var(--zsb-primary);
  color: var(--zsb-heading);
}

.community-app-step--future .community-app-step__circle {
  background: var(--zsb-tint-neutral);
  color: var(--zsb-muted);
}

.community-app-step__body {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.community-app-step__label {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  font-weight: 600;
  line-height: var(--zsb-text-md-line);
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2);
}

.community-app-step--future .community-app-step__label {
  color: var(--zsb-muted);
}

.community-app-step__desc {
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-sm-line);
  color: var(--zsb-body-text);
  margin-top: 2px;
}

.community-app-step--future .community-app-step__desc {
  color: var(--zsb-tertiary);
}

.community-checkbox__group {
  display: flex;
  gap: var(--zsb-space-3);
  flex-direction: column;
}

.community-checkbox__label {
  display: flex;
  cursor: pointer;
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-md-line);
  color: var(--zsb-heading);
  align-items:  flex-start;
  gap: 12px;
}

.community-checkbox__label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid color-mix(in srgb, var(--zsb-heading) 25%, transparent);
  border-radius: var(--zsb-radius);
  cursor: pointer;
  display: flex;
  background: var(--zsb-surface);
  flex-shrink: 0;
  justify-content: center;
  align-items:  center;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  transition: all .15s;
}

.community-checkbox__label input[type="checkbox"]:checked {
  background: var(--zsb-primary);
  border-color: var(--zsb-primary);
}

.community-checkbox__label input[type="checkbox"]:checked:after {
  content: "";
  border: solid var(--zsb-heading);
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 9px;
  margin-top: -1px;
  transform: rotate(45deg);
}

.community-checkbox__label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--zsb-focus);
  outline-offset: 2px;
}

.community-checkbox__label a {
  color: var(--zsb-heading);
  font-weight: 600;
}

.community-checkbox__label a:hover {
  color: var(--zsb-focus);
}

.community-app-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--zsb-space-4);
  align-items:  start;
}

.community-app-layout--with-heading {
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr;
}

.community-app-layout--with-heading .community-page__title {
  grid-column: 1;
  grid-row: 1;
}

.community-app-layout--with-heading .community-app-layout__main {
  grid-column: 1;
  grid-row: 2;
}

.community-app-layout--with-heading .community-app-layout__sidebar {
  grid-column: 2;
  grid-row: 1 / -1;
}

.community-app-layout__main {
  display: flex;
  gap: var(--zsb-space-4);
  flex-direction: column;
}

.community-app-layout__sidebar {
  position: sticky;
  top: var(--zsb-space-4);
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
}

.is-hidden {
  display: none;
}

.community-section--mb-4 {
  margin-bottom: var(--zsb-space-4);
}

.community-flush {
  margin: 0;
}

.community-flush-bottom {
  margin: 0 0 var(--zsb-space-2-5);
}

.community-body-text--flush {
  margin: 0;
}

.community-body-text--flush-hint {
  margin: 0 0 6px;
}

.community-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--zsb-space-3);
}

.community-form-group--flush {
  margin: 0;
}

.community-form-group--mt {
  margin-top: var(--zsb-space-3);
  margin-bottom: 0;
}

.community-input--disabled {
  background: var(--zsb-tint-neutral);
  color: var(--zsb-muted);
}

.community-payment-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--zsb-space-2-5) var(--zsb-space-4);
}

.community-payment-layout > .community-body-text {
  grid-column: 1 / -1;
}

.community-payment-layout__qr-wrap {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-1-5);
  flex-direction: column;
  align-self:  start;
}

.community-playlist-detail__header {
  display: flex;
  align-items: baseline;
  gap: var(--zsb-space-2);
  margin-bottom: var(--zsb-space-1);
}

.community-page-title--flush {
  margin: 0;
}

.community-btn--no-shrink {
  white-space: nowrap;
  flex-shrink: 0;
}

.community-btn-full--mt {
  margin-top: var(--zsb-space-4);
}

.community-comment-compose--spaced {
  margin: var(--zsb-space-3) 0 var(--zsb-space-4);
}

.community-rules--flush {
  margin-bottom: 0;
}

.community-show-all-link {
  color: var(--zsb-muted);
  margin: 0;
}

.community-show-all-arrow {
  transform: rotate(180deg);
}

.community-icon-check {
  width: 14px;
  height: 14px;
}

.community-svg-block {
  display: block;
}

.community-qr-label--flush {
  margin: 0;
}

.community-cta-row {
  display: flex;
  gap: var(--zsb-space-2);
}

.community-progress-bar-fill--half {
  width: 50%;
}

.community-header--auth-inner {
  max-width: var(--zsb-container);
  margin: 0 auto;
}

.community-header__auth-btn {
  font-size: var(--zsb-text-md);
  background: color-mix(in srgb, var(--zsb-surface) 55%, transparent);
  border-color: var(--zsb-border-soft);
  white-space: nowrap;
  padding: 8px 18px;
}

.community-header--auth {
  display: flex;
  padding: 0 var(--zsb-space-4);
  align-items:  center;
  gap: var(--zsb-space-4);
  max-width: var(--zsb-container);
  height: 64px;
  margin: 0 auto;
}

.community-header--auth .community-header__title {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
}

.community-auth-card {
  background: var(--zsb-surface);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  padding: var(--zsb-space-5) var(--zsb-space-4);
  box-shadow: var(--zsb-shadow-card);
  max-width: 600px;
}

.community-auth-card .community-form-group:last-of-type {
  margin-bottom: 0;
}

.community-auth-card__actions {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-3);
  margin-top: var(--zsb-space-4);
}

.community-level-summary {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-3);
}

.community-level-summary__info {
  flex: 1;
  min-width: 0;
}

.community-level-summary__name {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  color: var(--zsb-heading);
  font-weight: 600;
  line-height: var(--zsb-text-md-line);
}

.community-level-summary__price {
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-lg);
  line-height: var(--zsb-text-lg-line);
  color: var(--zsb-heading);
  font-weight: 700;
}

.community-level-toggle {
  display: inline-flex;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-sm);
  color: var(--zsb-heading);
  background: var(--zsb-tint-warm);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-items:  center;
  gap: 6px;
  padding: 8px 16px;
  transition: background .2s;
  font-weight: 600;
}

.community-level-toggle:hover {
  background: var(--zsb-tint-warm-hover);
}

.community-level-toggle svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.community-level-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.community-level-summary__benefits {
  list-style: none;
  margin: var(--zsb-space-3) 0 0;
  display: flex;
  padding: 0;
  padding-top: var(--zsb-space-3);
  border-top: 1px dashed color-mix(in srgb, var(--zsb-heading) 12%, transparent);
  flex-direction: column;
  gap: 6px;
}

.community-level-summary__benefits li {
  display: flex;
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-sm-line);
  color: var(--zsb-body-text);
  align-items:  flex-start;
  gap: 8px;
}

.community-level-summary__benefits li:before {
  content: "";
  background: var(--zsb-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zsb-primary) 30%, transparent);
  border-radius: 50%;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 7px;
}

.community-level-cards--collapsible {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  transition: max-height .3s;
}

.community-level-cards--open {
  margin-top: var(--zsb-space-3);
  max-height: 2000px;
}

@media (max-width: 1024px) {
  .community-page {
    padding: var(--zsb-space-4) var(--zsb-space-3) var(--zsb-space-5);
  }
}

@media (max-width: 640px) {
  .community-nav {
    display: none;
  }

  .community-hamburger {
    display: flex;
    justify-content: center;
    align-items:  center;
  }

  .community-header {
    padding: 0 var(--zsb-space-3);
    gap: var(--zsb-space-2);
  }

  .community-user-chip__label {
    display: none;
  }

  .community-page {
    padding: var(--zsb-space-3) var(--zsb-space-3) var(--zsb-space-5);
  }

  .community-page__title {
    font-size: var(--zsb-text-lg);
    line-height: var(--zsb-text-lg-line);
  }

  .community-tab {
    font-size: var(--zsb-text-sm);
    padding: 10px 12px;
  }

  .community-stepper__track {
    padding: 0 8px;
  }

  .community-step__desc {
    display: none;
  }

  .community-step__info {
    padding: 0 2px;
  }

  .community-step__label {
    font-size: var(--zsb-text-sm);
    line-height: 14px;
  }

  .community-benefit-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .community-benefit-row__actions {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
  }

  .community-dl {
    grid-template-columns: 1fr;
    gap: var(--zsb-space-1);
  }

  .community-dl dt {
    font-size: var(--zsb-text-sm);
    color: var(--zsb-muted);
    font-weight: 500;
  }

  .community-dl dd {
    margin-bottom: var(--zsb-space-2);
  }

  .community-section__body[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .community-event-grid {
    gap: var(--zsb-space-2);
  }

  .community-membership-card {
    max-width: 100%;
  }

  .community-docs-row {
    gap: var(--zsb-space-2);
    flex-direction: column;
  }

  .community-event-layout {
    grid-template-columns: 1fr;
  }

  .community-event-layout__sidebar {
    position: static;
  }

  .community-app-layout {
    grid-template-columns: 1fr;
  }

  .community-app-layout__sidebar {
    position: static;
    order: -1;
  }

  .community-level-card {
    padding: var(--zsb-space-3);
  }

  .community-level-card__price {
    font-size: var(--zsb-text-lg);
    line-height: var(--zsb-text-lg-line);
  }

  .community-comment__replies {
    margin-left: 32px;
  }

  .community-comment-compose .community-comment__avatar {
    display: none;
  }

  .community-program-item {
    gap: var(--zsb-space-2);
  }

  .community-program-item__time {
    font-size: var(--zsb-text-sm);
    min-width: 44px;
  }

  .community-auth-card {
    padding: var(--zsb-space-4) var(--zsb-space-3);
  }

  .community-auth-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .community-auth-card__actions .community-btn {
    justify-content: center;
  }
}

/* doc/design/system/ui_kits/community/wa-tokens.css */
wa-tag {
  --tag-pad-x: .6rem;
  --tag-pad-y: .4rem;
  border-radius: var(--zsb-radius);
  font-size: var(--zsb-text-sm);
  font-weight: 600;
}

.admin-shell wa-button[variant="brand"]::part(base) {
  border: 1px solid var(--zsb-border);
  font-weight: 700;
}

[data-area="community"] wa-button::part(base) {
  border-radius: var(--zsb-radius);
  font-family: var(--zsb-font-body);
  font-size: var(--zsb-text-md);
  font-weight: 500;
  line-height: var(--zsb-text-md-line);
  padding-block: var(--zsb-space-2-5);
  padding-inline: var(--zsb-space-3);
  min-height: 0;
}

wa-card[appearance="outlined"] {
  --background-color: var(--zsb-surface);
  --border-color: var(--zsb-border-soft);
  --border-radius: var(--zsb-radius-panel);
}

wa-callout {
  border-radius: var(--zsb-radius-panel);
}

wa-callout[variant="success"] {
  background: var(--zsb-success-bg);
  color: var(--zsb-success-text);
}

wa-callout[variant="warning"] {
  background: var(--zsb-warning-bg);
  color: var(--zsb-warning-text);
}

wa-callout[variant="danger"] {
  background: var(--zsb-danger-bg);
  color: var(--zsb-danger-text);
}

wa-callout[variant="brand"] {
  background: var(--zsb-tint-warm);
  color: var(--zsb-heading);
}

wa-callout[variant="neutral"] {
  background: var(--zsb-tint-cool);
  color: var(--zsb-info-text);
}

/* node_modules/trix/dist/trix.css */
trix-editor {
  outline: none;
  border: 1px solid #bbb;
  border-radius: 3px;
  min-height: 5em;
  margin: 0;
  padding: .4em .6em;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  justify-content: space-between;
}

trix-toolbar .trix-button-group {
  display: flex;
  border: 1px solid #bbb;
  border-color: #ccc #bbb #888;
  border-radius: 3px;
  margin-bottom: 10px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: #0009;
  white-space: nowrap;
  outline: none;
  background: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  margin: 0;
  padding: 0 .5em;
  font-size: .75em;
  font-weight: 600;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-toolbar .trix-button.trix-active {
  color: #000;
  background: #cbeefa;
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: #00000020;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -.01em;
    padding: 0 .3em;
  }
}

trix-toolbar .trix-button--icon {
  font-size: inherit;
  text-indent: -9999px;
  width: 2.6em;
  max-width: calc(.8em + 4vw);
  height: 1.6em;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    max-width: calc(.8em + 3.5vw);
    height: 2em;
  }
}

trix-toolbar .trix-button--icon:before {
  display: inline-block;
  position: absolute;
  opacity: .6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inset: 0;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon:before {
    left: 6%;
    right: 6%;
  }
}

trix-toolbar .trix-button--icon.trix-active:before {
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled:before {
  opacity: .125;
}

trix-toolbar .trix-button--icon-attach:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-italic:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-link:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-strike:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-quote:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-heading-1:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-code:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-bullet-list:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-number-list:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-undo:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-redo:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-decrease-nesting-level:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-increase-nesting-level:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  z-index: 5;
  background: #fff;
  border-top: 2px solid #888;
  border-radius: 5px;
  padding: 15px 10px;
  font-size: .75em;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 .3em 1em #ccc;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0 10px 0 0;
  padding: .5em .8em;
  font-weight: normal;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: 0 0 1.5px 1px red;
}

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  border-bottom: none;
  padding: .5em;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable]::-moz-selection {
  background: none;
}

trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection, trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  border-color: #0000;
  box-shadow: 0 0 0 2px highlight;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}

trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  opacity: .9;
  width: 90%;
  height: 20px;
  transition: opacity .2s ease-in;
  top: calc(50% - 10px);
  left: 5%;
}

trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  text-align: center;
  width: 100%;
  top: -.9em;
  left: 0;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  outline: none;
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0 .8em;
  font-size: 80%;
}

trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-editor .trix-button.trix-active {
  background: #cbeefa;
}

trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  outline: none;
  background-color: #fff;
  border: 2px solid highlight;
  border-radius: 50%;
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  line-height: 1.8em;
  box-shadow: 1px 1px 6px #00000040;
}

trix-editor .trix-button--remove:before {
  display: inline-block;
  position: absolute;
  opacity: .7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
  inset: 0;
}

trix-editor .trix-button--remove:hover {
  border-color: #333;
}

trix-editor .trix-button--remove:hover:before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  color: #fff;
  background-color: #000000b3;
  border-radius: 3px;
  max-width: 90%;
  padding: .1em .6em;
  font-size: .8em;
  top: 2em;
  left: 50%;
  transform: translate(-50%);
}

trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

trix-editor .attachment__metadata .attachment__size {
  white-space: nowrap;
  margin-left: .2em;
}

.trix-content {
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: .3em;
  margin-left: .3em;
  padding-left: .6em;
}

.trix-content [dir="rtl"] blockquote, .trix-content blockquote[dir="rtl"] {
  border-width: 0 .3em 0 0;
  margin-right: .3em;
  padding-right: .6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content [dir="rtl"] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  vertical-align: top;
  white-space: pre;
  overflow-x: auto;
  background-color: #eee;
  width: 100%;
  padding: .5em;
  font-family: monospace;
  font-size: .9em;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
}

.trix-content .attachment__caption .attachment__name + .attachment__size:before {
  content: " •";
}

.trix-content .attachment--preview {
  text-align: center;
  width: 100%;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: .9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: #333;
  border: 1px solid #bbb;
  border-radius: 5px;
  margin: 0 2px 2px;
  padding: .4em 1em;
  line-height: 1;
}

.trix-content .attachment-gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  max-width: 33%;
  padding: 0 .5em;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

/* app/frontend/stylesheets/actiontext.css */
trix-toolbar {
  margin-bottom: .5rem;
}

trix-toolbar .trix-button-row {
  gap: var(--zsb-space-2);
}

trix-toolbar .trix-button-group {
  background: var(--zsb-white);
  border-color: var(--zsb-border-soft);
  border-radius: var(--zsb-radius);
  margin-bottom: .5rem;
}

trix-toolbar .trix-button {
  border-bottom-color: var(--zsb-border-soft);
}

trix-toolbar .trix-button.trix-active {
  background: var(--zsb-champagne);
  color: var(--zsb-charcoal-blue);
}

trix-editor {
  background: var(--zsb-white);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius);
  color: var(--zsb-heading);
  min-height: 10rem;
  padding: .75rem .85rem;
}

trix-editor:focus {
  border-color: var(--zsb-mauve);
  outline: 3px solid color-mix(in srgb, var(--zsb-mauve) 35%, transparent);
  outline-offset: 0;
}

.admin-shell trix-toolbar .trix-button-group, .admin-shell trix-editor {
  border-color: var(--admin-border-strong);
}

.admin-shell trix-editor {
  color: var(--admin-text);
}

.trix-content {
  overflow-wrap: anywhere;
}

.trix-content > :last-child {
  margin-bottom: 0;
}

.trix-content a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.trix-content ul, .trix-content ol {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
}

.trix-content blockquote {
  border-left: 4px solid var(--zsb-mauve);
  color: var(--zsb-heading);
  margin: 0 0 1rem;
  padding-left: 1rem;
}

/* app/frontend/stylesheets/application.css */
[data-area="community"] {
  --wa-form-control-activated-color: var(--zsb-primary);
}

.safari-tint-bar {
  pointer-events: none;
  position: fixed;
  z-index: 998;
  width: 100%;
  height: 5px;
  top: 1px;
  left: 0;
}

a {
  color: var(--zsb-heading);
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--zsb-focus);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--zsb-heading);
  font-family: var(--zsb-font-heading);
  letter-spacing: 0;
  margin: 0 0 1rem;
  font-weight: 600;
}

h1, h2, h3, h4 {
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-xl-line);
}

p {
  margin: 0 0 1rem;
}

main {
  min-height: 60vh;
}

.main-nav, .header-actions, .button-row {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2-5);
  flex-wrap: wrap;
}

.account-identity {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-3);
  flex-wrap: wrap;
}

.account-identity__email {
  color: var(--zsb-heading);
  font-weight: 600;
}

.account-identity__verified {
  color: var(--zsb-muted);
}

.account-profile__avatar {
  --size: 96px;
}

.main-nav {
  justify-content: flex-start;
}

.main-nav a {
  color: var(--zsb-heading);
  font-size: var(--zsb-text-md);
  text-decoration: none;
  white-space: nowrap;
  padding: .4rem .2rem;
  font-weight: 600;
  line-height: 24px;
}

.main-nav a:hover, .membership-plan-menu summary:hover {
  color: var(--zsb-heading);
  text-decoration: underline;
  text-underline-offset: .22em;
}

.membership-plan-menu {
  position: relative;
}

.membership-plan-menu summary {
  color: var(--zsb-heading);
  cursor: pointer;
  font-size: var(--zsb-text-md);
  list-style: none;
  white-space: nowrap;
  padding: .4rem .2rem;
  font-weight: 600;
  line-height: 24px;
}

.membership-plan-menu summary::-webkit-details-marker {
  display: none;
}

.membership-plan-menu summary:after {
  content: "";
  display: inline-block;
  vertical-align: .12em;
  border: .28em solid #0000;
  border-top: .35em solid;
  border-bottom-width: 0;
  margin-left: .35rem;
}

.membership-plan-menu[open] summary:after {
  transform: rotate(180deg);
}

.membership-plan-menu__links {
  background: var(--zsb-white);
  border: 1px solid var(--zsb-border-soft);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--zsb-charcoal-blue) 16%, transparent);
  display: grid;
  gap: var(--zsb-space-0-5);
  position: absolute;
  z-index: 20;
  min-width: 13rem;
  padding: .45rem;
  top: calc(100% + .35rem);
  left: 0;
}

.membership-plan-menu__links a {
  padding: .35rem .5rem;
}

.header-actions {
  justify-content: flex-end;
  min-width: 0;
}

.site-logo {
  display: inline-flex;
  text-decoration: none;
  justify-content: flex-end;
  align-items:  center;
  min-width: 86px;
}

.site-logo:hover {
  text-decoration: none;
}

.site-logo-image {
  display: block;
  filter: invert(1) brightness(0);
  object-fit: contain;
  width: auto;
  max-width: 96px;
  height: 64px;
}

.app-intro, .comparison-intro, .system-section, .page-section {
  padding: var(--zsb-space-4) 0 var(--zsb-space-5);
}

.community-page-header {
  padding-bottom: var(--zsb-space-3);
}

.auth-page--with-sidebar {
  align-items:  start;
  column-gap: var(--zsb-space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto 1fr;
}

.auth-page__heading {
  grid-column: 1;
  grid-row: 1;
}

.auth-page__main {
  grid-column: 1;
  grid-row: 2;
}

.auth-page__sidebar {
  grid-column: 2;
  grid-row: 1 / -1;
}

.community-page-header + .system-section {
  padding-top: var(--zsb-space-3);
}

.community-page-header__title {
  font-size: var(--zsb-text-md);
  line-height: var(--zsb-text-xl-line);
  margin-bottom: var(--zsb-space-2);
}

.app-intro {
  background: var(--zsb-white);
  border-bottom: 1px solid var(--zsb-border-soft);
}

.source-note {
  color: var(--zsb-heading);
  font-size: var(--zsb-text-sm);
  letter-spacing: 0;
  margin-bottom: var(--zsb-space-2);
  text-transform: none;
  font-weight: 600;
  line-height: 20px;
}

.lead {
  max-width: 58rem;
}

.lookbook-component-frame {
  background: var(--zsb-page-bg);
  min-block-size: 100vh;
  padding: clamp(1rem, 4vw, 3rem);
}

.lookbook-component-frame__surface {
  background: var(--zsb-white);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  max-inline-size: var(--lookbook-frame-width, 44rem);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.lookbook-component-frame__content {
  max-inline-size: var(--lookbook-frame-width, 44rem);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.section-heading {
  margin-bottom: 1.5rem;
}

.header-user-chip {
  background: color-mix(in srgb, var(--zsb-white) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--zsb-charcoal-blue) 12%, transparent);
  border-radius: var(--zsb-radius);
  color: var(--zsb-heading);
  display: inline-flex;
  font-size: var(--zsb-text-sm);
  text-align: left;
  text-decoration: none;
  flex-direction: column;
  align-items:  center;
  min-width: 0;
  max-width: clamp(13rem, 28vw, 22rem);
  min-height: 50px;
  padding: 7px 14px;
  line-height: 18px;
}

.header-user-chip:hover {
  background: color-mix(in srgb, var(--zsb-white) 80%, transparent);
  text-decoration: none;
}

.header-user-chip__label {
  font-size: var(--zsb-text-sm);
  font-weight: 700;
}

.header-user-chip__email {
  display: block;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}

.kicker {
  color: var(--zsb-heading);
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: 500;
}

.cta-grid, .content-grid {
  display: grid;
  gap: var(--zsb-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid-large {
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
}

.stream-player {
  aspect-ratio: 16 / 9;
  background: var(--zsb-charcoal-blue);
  border-radius: var(--zsb-radius-panel);
  overflow: hidden;
  width: min(100%, 56rem);
}

.stream-player__frame {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
}

.stream-player__placeholder {
  color: var(--zsb-white);
  display: grid;
  font-family: var(--zsb-font-heading);
  font-size: var(--zsb-text-md);
  align-items:  center;
  gap: var(--zsb-space-2-5);
  text-align: center;
  justify-items: center;
  padding: 1.5rem;
}

.stream-player__placeholder-icon {
  background: color-mix(in srgb, var(--zsb-white) 16%, transparent);
  border-radius: var(--zsb-radius-pill);
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  width: 3rem;
  height: 3rem;
}

.stream-player__placeholder-icon:before {
  content: "";
  border-block-start: .42rem solid #0000;
  border-block-end: .42rem solid #0000;
  border-inline-start: .68rem solid;
  margin-inline-start: .12rem;
}

.video-progress-panel {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2-5);
  flex-wrap: wrap;
  margin: 1rem 0;
}

.video-progress {
  color: var(--zsb-muted-text);
}

.video-progress--done {
  color: var(--zsb-success-text);
  font-weight: 700;
}

.content-video-detail {
  max-width: var(--zsb-container);
  padding: var(--zsb-space-4) 12px var(--zsb-space-5);
  margin: 0 auto;
}

.level-grid {
  display: grid;
  gap: var(--zsb-space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.5rem 0;
}

.level-grid--application {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.level-card {
  background: var(--zsb-white);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius);
  padding: 1rem;
}

.level-price {
  color: var(--zsb-heading);
  font-weight: 700;
}

label {
  color: var(--zsb-heading);
  display: inline-block;
  margin-bottom: .35rem;
  font-weight: 600;
}

input, select, textarea, button {
  font: inherit;
}

.field {
  margin-bottom: 1rem;
}

.checkbox-row {
  color: var(--zsb-heading);
  display: flex;
  align-items:  flex-start;
  gap: var(--zsb-space-2-5);
  margin: 0 0 1rem;
}

.checkbox-row input {
  accent-color: var(--zsb-primary);
  margin-top: var(--zsb-space-1);
}

.status {
  border-radius: var(--zsb-radius);
  display: inline-block;
  font-size: var(--zsb-text-sm);
  padding: .45rem .6rem;
  font-weight: 600;
  line-height: 1.2;
}

.status-success {
  background: var(--zsb-success-bg);
  color: var(--zsb-success-text);
}

.status-warning {
  background: var(--zsb-warning-bg);
  color: var(--zsb-warning-text);
}

.status-danger {
  background: var(--zsb-danger-bg);
  color: var(--zsb-danger-text);
}

.status-info {
  background: var(--zsb-info-bg);
  color: var(--zsb-info-text);
}

.notice {
  background: var(--zsb-white);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
  margin: 1rem 0;
  padding: 1rem;
}

.notice-warning {
  background: var(--zsb-warning-bg);
  border-color: var(--zsb-honey);
  color: var(--zsb-heading);
}

.definition-list {
  display: grid;
  gap: var(--zsb-space-2) var(--zsb-space-3);
  grid-template-columns: max-content minmax(0, 1fr);
}

.definition-list dt {
  color: var(--zsb-heading);
  font-weight: 600;
}

.definition-list dd {
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
}

th, td {
  border-bottom: 1px solid var(--zsb-border-soft);
  text-align: left;
  vertical-align: top;
  padding: .85rem;
}

th {
  color: var(--zsb-heading);
  font-size: var(--zsb-text-sm);
  font-weight: 600;
}

.qr-payment svg {
  background: var(--zsb-white);
  border-radius: var(--zsb-radius);
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  padding: .5rem;
}

.community-panel {
  width: 100%;
}

.community-panel::part(base) {
  border-color: var(--zsb-border-soft);
  border-radius: var(--zsb-radius-panel);
}

.community-panel wa-callout {
  display: block;
  margin-bottom: var(--zsb-space-3);
}

wa-button::part(base) {
  white-space: normal;
}

.auth-email-verification__resend {
  margin-top: var(--zsb-space-4);
}

.community-page-actions {
  display: flex;
  gap: var(--zsb-space-2-5);
  flex-wrap: wrap;
}

.community-rails-action {
  background: var(--zsb-primary);
}

.community-table-scroller {
  display: block;
  max-width: 100%;
}

.community-table-scroller table, .community-table {
  margin: 0;
}

.community-table th, .community-table td {
  overflow-wrap: anywhere;
}

.community-table__action {
  min-width: 9rem;
}

.community-collection {
  display: grid;
  gap: var(--zsb-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-events-grid {
  display: grid;
  gap: var(--zsb-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .community-events-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  wa-tab-group::part(nav) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.community-collection > li {
  min-width: 0;
}

.community-collection--single {
  grid-template-columns: 1fr;
}

.membership-payment-grid {
  display: grid;
  align-items: stretch;
  gap: var(--zsb-space-4);
  grid-template-columns: minmax(0, 1fr) auto;
}

.community-qr__frame svg {
  display: block;
  width: 14rem;
  height: auto;
}

.community-file-upload__control {
  display: flex;
  align-items:  center;
  gap: var(--zsb-space-2-5);
  flex-wrap: wrap;
}

.community-level-card__name {
  display: inline-flex;
  align-items:  center;
  gap: var(--zsb-space-2);
  flex-wrap: wrap;
}

.community-level-card__input {
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}

.community-level-card:has(input[type="radio"]:checked) {
  background: color-mix(in srgb, var(--zsb-tint-warm) 18%, transparent);
  border-color: var(--zsb-primary);
  box-shadow: 0 0 0 1px var(--zsb-primary);
}

.community-level-card:has(input[type="radio"]:checked) .community-level-card__radio {
  border-color: var(--zsb-primary);
}

.community-level-card:has(input[type="radio"]:checked) .community-level-card__radio:after {
  background: var(--zsb-primary);
  border-radius: var(--zsb-radius-circle);
  content: "";
  width: 10px;
  height: 10px;
}

.community-level-card__meta {
  color: var(--zsb-tertiary);
  font-size: var(--zsb-text-sm);
  line-height: var(--zsb-text-sm-line);
  margin-top: 4px;
}

.community-level-card--current {
  background: color-mix(in srgb, var(--zsb-tint-warm) 35%, transparent);
  border-color: color-mix(in srgb, var(--zsb-tint-warm-hover) 80%, transparent);
  cursor: default;
}

.community-level-card--current:hover {
  border-color: color-mix(in srgb, var(--zsb-tint-warm-hover) 80%, transparent);
  box-shadow: none;
}

.community-file-upload__input {
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}

.community-file-upload__button::part(base) {
  cursor: pointer;
  min-height: 2.75rem;
  font-weight: 700;
}

.community-file-upload__name {
  background: var(--zsb-white);
  border: 1px solid var(--zsb-border-soft);
  border-radius: var(--zsb-radius-pill);
  color: var(--zsb-muted-text);
  font-size: var(--zsb-text-sm);
  overflow-wrap: anywhere;
  flex: 14rem;
  min-height: 2.25rem;
  padding: .45rem .75rem;
  font-weight: 600;
  line-height: 1.35;
}

.legal-list {
  display: flex;
  gap: var(--zsb-space-2-5);
  list-style: none;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

@media (max-width: 991px) {
  .cta-grid, .content-grid, .content-grid-large, .level-grid, .task-grid {
    grid-template-columns: 1fr;
  }

  .level-grid--application {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .header-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    align-items: stretch;
  }

  .header-user-chip {
    align-items:  flex-start;
    max-width: 100%;
  }

  .c-app-sidebar {
    order: -1;
  }
}

@media (max-width: 767px) {
  .level-grid--application {
    grid-template-columns: 1fr;
  }

  h1, h2 {
    font-size: var(--zsb-text-xl);
    line-height: 50px;
  }

  h3 {
    font-size: var(--zsb-text-lg);
    line-height: 40px;
  }

  .main-nav {
    gap: var(--zsb-space-1) var(--zsb-space-2-5);
  }

  .main-nav a, .membership-plan-menu summary {
    font-size: var(--zsb-text-sm);
    padding: .15rem 0;
  }

  .site-logo {
    grid-column: 2;
    grid-row: 1;
    place-self:  start end;
    min-width: 72px;
  }

  .site-logo-image {
    max-width: 78px;
    height: 54px;
  }
}

@media (max-width: 575px) {
  .membership-payment-grid {
    grid-template-columns: 1fr;
  }

  .community-page-header__title {
    font-size: var(--zsb-text-md);
    line-height: var(--zsb-text-lg-line);
  }

  h2 {
    font-size: var(--zsb-text-lg);
    line-height: 40px;
  }

  body {
    font-size: var(--zsb-text-md);
    line-height: 26px;
  }

  .definition-list, .community-collection {
    grid-template-columns: 1fr;
  }

  .community-table--stacked {
    min-width: 0;
  }

  .community-table--stacked, .community-table--stacked thead, .community-table--stacked tbody, .community-table--stacked tr, .community-table--stacked th, .community-table--stacked td {
    display: block;
    width: 100%;
  }

  .community-table--stacked thead {
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
  }

  .community-table--stacked tr {
    border-bottom: 1px solid var(--zsb-border-soft);
    padding: .85rem 0;
  }

  .community-table--stacked tr:last-child {
    border-bottom: 0;
  }

  .community-table--stacked td {
    border-bottom: 0;
    padding: .35rem 0;
  }

  .community-table--stacked td:before {
    color: var(--zsb-heading);
    content: attr(data-label);
    display: block;
    font-size: var(--zsb-text-sm);
    margin-bottom: .1rem;
    font-weight: 700;
  }
}