.cmr-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  min-height: 100%;
  padding: 28px 40px 24px;
  background: #121c19;
  color: #f0f3e9;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cmr-page *, .cmr-page *::before, .cmr-page *::after { box-sizing: border-box; }
.cmr-page :where(h1, p, figure, ol) { margin: 0; }
.cmr-page :where(div, figure, li, aside) { min-width: 0; }
.cmr-page ol { padding: 0; list-style: none; }
.cmr-page svg { display: block; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmr-heading h1 { font-size: 64px; font-weight: 550; line-height: 1.08; letter-spacing: -.055em; }
.cmr-heading > p { margin-top: 12px; color: #b9c8b9; font-size: 21px; line-height: 1.4; letter-spacing: -.02em; }
.cmr-heading > p span { color: #d0f5a5; }

/* One continuous conversation, with a short instruction beside each turn. */
.cmr-scene { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 1180px; margin-inline: auto; }
.cmr-chat-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0 0 15px 54px; border-bottom: 1px solid #35453d; color: #aebeb0; font-size: 15px; line-height: 22px; }
.cmr-chat-heading svg { width: 19px; height: 19px; color: #94a78f; }
.cmr-thread { display: grid; gap: 14px; }
.cmr-turn { --cmr-role: #c2b8ff; display: grid; grid-template-columns: minmax(0, 1fr) 238px; align-items: center; column-gap: 44px; }
.cmr-turn-b { --cmr-role: #d0f5a5; }
.cmr-message { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; column-gap: 12px; }
.cmr-turn-b .cmr-message { margin-left: 24px; }
.cmr-turn-c .cmr-message { margin-left: 48px; }
.cmr-avatar { display: grid; place-items: center; width: 42px; height: 42px; margin-top: 5px; border: 1px solid #514967; border-radius: 50%; background: #2b2a3a; color: var(--cmr-role); font-size: 17px; font-weight: 550; line-height: 1; }
.cmr-turn-b .cmr-avatar { border-color: #526544; background: #2a3c29; }
.cmr-bubble { justify-self: start; max-width: 100%; padding: 15px 20px 17px; border-radius: 5px 18px 18px 18px; background: #1c2b24; }
.cmr-turn-b .cmr-bubble { background: #233425; }
.cmr-turn-c .cmr-bubble { background: #2a2939; }
.cmr-sender { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; margin-bottom: 8px; color: var(--cmr-role); font-size: 17px; font-weight: 550; line-height: 1.2; }
.cmr-sender > span { color: #b6c3b7; font-size: 12px; font-weight: 400; line-height: 1.4; }
.cmr-turn-c .cmr-sender > span { color: #c1bbd4; }
.cmr-message-text { max-width: 43ch; font-size: 25px; font-weight: 400; line-height: 1.32; letter-spacing: -.025em; overflow-wrap: break-word; }
.cmr-seller { color: #d0f5a5; }
.cmr-punchline { display: block; color: #e2daff; font-weight: 550; }
.cmr-reply { margin-bottom: 10px; padding-left: 10px; border-left: 2px solid var(--cmr-role); color: #c3d0be; font-size: 15px; line-height: 1.35; }
.cmr-reply > span { display: block; margin-bottom: 2px; color: var(--cmr-role); font-size: 12px; font-weight: 500; line-height: 1.4; }
.cmr-turn-c .cmr-reply { color: #cbc5db; }
.cmr-prompt { position: relative; padding-left: 16px; border-left: 1px solid #475448; }
.cmr-prompt::before { content: ''; position: absolute; top: 10px; left: -25px; width: 15px; height: 1px; background: #73806f; pointer-events: none; }
.cmr-prompt-label { margin-bottom: 7px; color: var(--cmr-role); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.cmr-prompt-text { color: #b9c8b9; font-size: 17px; line-height: 1.45; letter-spacing: -.015em; }

@container reader (max-width: 1200px) {
  .cmr-page { gap: 20px; padding: 24px 28px 20px; }
  .cmr-heading h1 { font-size: 54px; }
  .cmr-heading > p { margin-top: 10px; font-size: 19px; }
  .cmr-chat-heading { margin-bottom: 14px; padding: 0 0 12px 46px; }
  .cmr-thread { gap: 12px; }
  .cmr-turn { grid-template-columns: minmax(0, 1fr) 208px; column-gap: 32px; }
  .cmr-message { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; }
  .cmr-avatar { width: 36px; height: 36px; font-size: 15px; }
  .cmr-turn-b .cmr-message { margin-left: 20px; }
  .cmr-turn-c .cmr-message { margin-left: 40px; }
  .cmr-bubble { padding: 12px 15px 14px; }
  .cmr-sender { gap: 3px 10px; margin-bottom: 7px; font-size: 16px; }
  .cmr-message-text { font-size: 22px; }
  .cmr-reply { margin-bottom: 8px; font-size: 14px; }
  .cmr-prompt { padding-left: 13px; }
  .cmr-prompt::before { left: -21px; width: 12px; }
  .cmr-prompt-text { font-size: 16px; line-height: 1.4; }
}

@container reader (max-width: 760px) {
  .cmr-page { gap: 30px; padding: 26px 24px 32px; }
  .cmr-heading h1 { font-size: clamp(38px, 7.1cqw, 50px); }
  .cmr-heading > p { max-width: 40ch; font-size: 19px; }
  .cmr-scene { flex: none; }
  .cmr-chat-heading { padding-left: 0; }
  .cmr-thread { gap: 26px; }
  .cmr-turn { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .cmr-turn-b .cmr-message { margin-left: 10px; }
  .cmr-turn-c .cmr-message { margin-left: 20px; }
  .cmr-prompt { margin-left: 46px; }
  .cmr-turn-b .cmr-prompt { margin-left: 56px; }
  .cmr-turn-c .cmr-prompt { margin-left: 66px; }
  .cmr-prompt::before { display: none; }
  .cmr-prompt-label { margin-bottom: 4px; }
  .cmr-prompt-text { max-width: 38ch; }
}

@container reader (max-width: 520px) {
  .cmr-page { gap: 26px; padding: 24px 18px 30px; }
  .cmr-heading h1 { font-size: clamp(32px, 8.5cqw, 42px); }
  .cmr-heading > p { font-size: 18px; line-height: 1.45; }
  .cmr-chat-heading { font-size: 14px; }
  .cmr-message { grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; }
  .cmr-avatar { width: 30px; height: 30px; font-size: 14px; }
  .cmr-turn-b .cmr-message { margin-left: 6px; }
  .cmr-turn-c .cmr-message { margin-left: 12px; }
  .cmr-bubble { padding: 12px 13px 14px; border-radius: 4px 15px 15px 15px; }
  .cmr-message-text { font-size: 20px; line-height: 1.35; }
  .cmr-reply { font-size: 13px; }
  .cmr-prompt { margin-left: 38px; }
  .cmr-turn-b .cmr-prompt { margin-left: 44px; }
  .cmr-turn-c .cmr-prompt { margin-left: 50px; }
  .cmr-prompt-text { font-size: 15px; line-height: 1.45; }
}