.exchange {
  --accent: #c5dfed;
  background: #292a2c;
  color: #f6f6f4;
  color-scheme: dark;
  padding-block: clamp(76px, 9vw, 156px);
}
.exchange-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(42px, 6vw, 108px);
  align-items: center;
  max-width: 1400px;
}
.exchange-console { grid-area: 1 / 2; }
.exchange-console h2 {
  max-width: 13ch;
  font-size: clamp(46px, 5.6vw, 88px);
  line-height: .99;
  letter-spacing: -.04em;
  font-weight: 600;
}
.exchange-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: clamp(26px, 2.6vw, 44px);
}
.exchange-tabs button {
  border-radius: 24px;
  min-height: 42px;
  padding: 8px clamp(9px, 1.05vw, 18px);
  color: #d2d3d3;
  font-size: clamp(14px, 1.08vw, 17px);
  font-weight: 540;
  transition: background-color .16s ease, color .16s ease;
}
.exchange-tabs button:hover { background: #383a3c; color: #fff; }
.exchange-tabs [aria-selected=true] { background: #f4f4f2; color: #171819; }
.exchange-tabs [aria-selected=true]:hover { background: #fff; color: #101112; }
.exchange-notes, .exchange-pages, .exchange-panel { display: grid; }
.exchange-notes { margin-top: clamp(25px, 2.5vw, 42px); }
.exchange-note, .exchange-panel, .exchange-transcript { grid-area: 1 / 1; min-width: 0; }
.exchange-note[aria-hidden=true],
.exchange-panel[aria-hidden=true],
.exchange-transcript[aria-hidden=true] { visibility: hidden; pointer-events: none; }
.exchange-note h3 {
  font-size: clamp(25px, 2.4vw, 38px);
  font-weight: 550;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-wrap: balance;
}
.exchange-note > p {
  margin-top: 12px;
  max-width: 41ch;
  color: #c2c3c4;
  font-size: clamp(17px, 1.44vw, 23px);
  line-height: 1.47;
  text-wrap: pretty;
}
.exchange-controls { margin-top: 22px; display: flex; align-items: center; gap: 16px; }
.exchange-controls button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 0;
  color: #f1f2f1;
  font-size: 15px;
  font-weight: 540;
}
.exchange-controls button:hover { text-decoration: underline; text-underline-offset: 5px; }
.exchange-count { color: #bcbdbd; font-size: 13px; font-variant-numeric: tabular-nums; }
.exchange-count b { color: #f1f2f1; font-weight: 550; }
.exchange-window {
  grid-area: 1 / 1;
  border-radius: 18px;
  background: #18191a;
  box-shadow: 0 18px 48px -24px #000b;
  overflow: hidden;
  min-width: 0;
}
.exchange-window figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 21px clamp(22px, 2.4vw, 39px);
  border-bottom: 1px solid #303132;
  color: #b7b9ba;
  font-size: 13px;
  line-height: 1.25;
}
.exchange-brand { display: inline-flex; align-items: center; gap: 10px; color: #f8f8f7; font-size: 21px; font-weight: 600; letter-spacing: -.04em; }
.exchange-brand img, .exchange-reply img { filter: invert(1); }
.exchange-pages { margin: 0 auto; padding: clamp(25px, 2.55vw, 42px); }
.exchange-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.exchange-transcript {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(17px, 1.65vw, 28px);
  color: #f0f0ed;
  font-size: clamp(17px, 1.42vw, 23px);
}
.exchange-transcript p, .exchange-transcript blockquote { margin: 0; line-height: 1.42; text-wrap: pretty; }
.exchange-prompt {
  margin-left: auto !important;
  max-width: 85%;
  border-radius: 21px 21px 5px 21px;
  padding: .67em .92em;
  background: #343536;
  color: #f8f8f7;
}
.exchange-reply { display: flex; align-items: flex-start; gap: 11px; max-width: 92%; }
.exchange-reply img { flex: none; margin-top: .16em; }
.exchange-done { display: inline-block; margin-left: .45em; vertical-align: -.08em; color: #a4cfb6; }
.exchange-receipt {
  margin: 0 0 0 33px;
  padding: 14px 0 0;
  border-top: 1px solid #404142;
  max-width: min(100% - 33px, 46ch);
  font-size: clamp(14px, 1.05vw, 17px);
  color: #c3c4c5;
}
.exchange-receipt > span { display: flex; align-items: center; gap: 6px; color: #eee; font-size: .91em; font-weight: 540; }
.exchange-receipt blockquote { margin-top: 7px; }
.exchange-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 959px) and (min-width: 761px) {
  .exchange-layout { gap: 30px; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); }
  .exchange-tabs { gap: 2px; }
  .exchange-tabs button { padding-inline: 9px; }
  .exchange-pages { padding: 23px; }
}
@media (max-width: 760px) {
  .exchange { padding-block: 64px; }
  .exchange-layout { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 22px; }
  .exchange-console { grid-area: 1 / 1; }
  .exchange-console h2 { font-size: clamp(43px, 9vw, 62px); max-width: 15ch; }
  .exchange-window { grid-area: 2 / 1; border-radius: 15px; }
  .exchange-tabs { gap: 4px; margin-top: 20px; }
  .exchange-tabs button { font-size: 14px; min-height: 42px; padding-inline: 12px; }
  .exchange-notes { margin-top: 18px; }
  .exchange-note h3 { font-size: 26px; }
  .exchange-note > p { margin-top: 8px; font-size: 17px; max-width: 44ch; }
  .exchange-controls { margin-top: 5px; }
  .exchange-window figcaption { padding: 16px 19px; }
  .exchange-brand { font-size: 18px; gap: 8px; }
  .exchange-brand img { width: 21px; height: 21px; }
  .exchange-pages { padding: 22px 18px; }
  .exchange-transcript { font-size: 16px; gap: 16px; }
  .exchange-reply { gap: 8px; max-width: 98%; }
  .exchange-reply img { width: 18px; height: 18px; }
  .exchange-prompt { max-width: 90%; }
  .exchange-receipt { margin-left: 26px; max-width: calc(100% - 26px); }
}
@media (max-width: 360px) {
  .exchange-tabs { gap: 0; }
  .exchange-tabs button { padding-inline: 9px; }
}