.auc-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 30px 48px 24px;
  background: #121c19;
  color: #f0f3e9;
  font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.auc-page :where(h1, h2, p, figure, ul, dl, dd) { margin: 0; }
.auc-page :where(section, div, figure, li) { min-width: 0; }
.auc-page :where(ul) { padding: 0; list-style: none; }

.auc-page .auc-kicker {
  color: #c2b8ff;
  font-size: 11px;
  font-weight: 550;
  line-height: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.auc-page .auc-title {
  margin-top: 12px;
  color: #f0f3e9;
  font-size: 72px;
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -.06em;
}

.auc-page .auc-title-line { display: block; }
.auc-page .auc-title-accent { color: #d0f5a5; }
.auc-page .auc-figure { margin-top: 28px; }

.auc-page .auc-flow {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 176px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
}

.auc-page .auc-section-title {
  padding-top: 5px;
  color: #d5dfd7;
  font-size: 19px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -.025em;
}

.auc-page .auc-source-list {
  margin-top: 12px;
  padding: 5px 16px;
  border: 1px solid #35453d;
  border-radius: 12px;
  background: #19251f;
}

.auc-page .auc-source {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 61px;
  padding: 9px 0;
}

.auc-page .auc-source + .auc-source { border-top: 1px solid #2b3b32; }
.auc-page .auc-source-icon { display: block; width: 24px; height: 24px; }
.auc-page .auc-source-chat { color: #d0f5a5; }
.auc-page .auc-source-channel { color: #c2b8ff; }

.auc-page .auc-source-name {
  display: block;
  color: #f0f3e9;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.015em;
}

.auc-page .auc-source-link {
  display: block;
  margin-top: 2px;
  color: #a2b0a8;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
  line-height: 16px;
}

.auc-page .auc-source-type {
  padding: 3px 7px;
  border-radius: 4px;
  background: #2a3a2b;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.auc-page .auc-source-channel .auc-source-type { background: #302e43; }

.auc-page .auc-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.auc-page .auc-filter-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d5dfd7;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.auc-page .auc-check { flex: none; width: 16px; height: 16px; color: #d0f5a5; }
.auc-page .auc-filter-condition { margin-top: 2px; color: #a2b0a8; font-size: 11px; line-height: 16px; }

.auc-page .auc-route {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding-top: 97px;
  color: #c2b8ff;
}

.auc-page .auc-method {
  color: #d5dfd7;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -.02em;
  text-align: center;
}

.auc-page .auc-connector { display: block; width: 176px; height: 32px; }
.auc-page .auc-connector-down { display: none; width: 24px; height: 48px; }

.auc-page .auc-result-title {
  color: #d0f5a5;
  font-size: 26px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -.035em;
}

.auc-page .auc-people {
  margin-top: 12px;
  padding: 5px 20px;
  border: 1px solid #f0f3e9;
  border-radius: 12px;
  background: #f0f3e9;
  color: #18271f;
}

.auc-page .auc-person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 61px;
  padding: 9px 0;
}

.auc-page .auc-person + .auc-person { border-top: 1px solid #d9dfd3; }

.auc-page .auc-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 550;
  line-height: 20px;
}

.auc-page .auc-avatar-chat { background: #d5e4bf; color: #38532b; }
.auc-page .auc-avatar-channel { background: #ded7f5; color: #574276; }
.auc-page .auc-person-name { display: block; font-size: 18px; font-weight: 550; line-height: 23px; letter-spacing: -.02em; }
.auc-page .auc-person-source { display: block; margin-top: 2px; color: #5b6a5d; font-size: 12px; line-height: 17px; }

.auc-page .auc-result-note {
  margin-top: 14px;
  padding-left: 13px;
  border-left: 2px solid #c2b8ff;
  color: #a2b0a8;
  font-size: 14px;
  line-height: 21px;
}

.auc-page .auc-note-emphasis { color: #d5dfd7; font-weight: 500; }

.auc-page .auc-caption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #35453d;
}

.auc-page .auc-repeat { display: flex; align-items: flex-start; gap: 10px; }
.auc-page .auc-repeat-icon { flex: none; width: 22px; height: 22px; color: #a2b0a8; }
.auc-page .auc-repeat-copy { color: #a2b0a8; font-size: 13px; line-height: 20px; }
.auc-page .auc-repeat-mode { color: #c2b8ff; font-weight: 500; }
.auc-page .auc-repeat-detail { display: block; }
.auc-page .auc-demo { color: #a2b0a8; font-size: 10px; line-height: 16px; letter-spacing: .01em; }

@container reader (max-width: 1300px) {
  .auc-page { padding: 24px 28px 20px; }
  .auc-page .auc-title { font-size: clamp(44px, 5.5cqw, 64px); }
  .auc-page .auc-figure { margin-top: 20px; }
  .auc-page .auc-flow { grid-template-columns: minmax(0, 1.08fr) 120px minmax(0, 1fr); gap: 18px; }
  .auc-page .auc-connector { width: 120px; }
  .auc-page .auc-method { font-size: 14px; line-height: 21px; }
  .auc-page .auc-caption { gap: 20px; margin-top: 18px; }
}

@container reader (max-width: 800px) {
  .auc-page .auc-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .auc-page :where(.auc-sources, .auc-result) { width: 100%; max-width: 600px; justify-self: center; }
  .auc-page .auc-route { padding-top: 0; gap: 10px; }
  .auc-page .auc-method br { display: none; }
  .auc-page .auc-connector { display: none; }
  .auc-page .auc-connector-down { display: block; }
  .auc-page .auc-caption { flex-direction: column; align-items: stretch; gap: 12px; }
}

@container reader (max-width: 600px) {
  .auc-page { padding: 24px 20px 28px; }
  .auc-page .auc-title { font-size: clamp(36px, 9cqw, 46px); line-height: 1.05; }
  .auc-page .auc-source-list { padding: 5px 12px; }
  .auc-page .auc-source { gap: 9px; }
  .auc-page :where(.auc-source-link, .auc-person-source) { overflow-wrap: anywhere; }
  .auc-page .auc-source-name { font-size: 15px; }
  .auc-page .auc-people { padding: 5px 14px; }
  .auc-page .auc-result-title { font-size: 25px; }
  .auc-page .auc-filters { gap: 12px; }
}