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

.cmj-scene { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.cmj-flow { display: grid; grid-template-columns: minmax(0, .9fr) 72px minmax(0, 1.4fr); align-items: start; gap: 28px; }
.cmj-flow h2 { font-size: 26px; font-weight: 550; line-height: 1.2; letter-spacing: -.035em; }
.cmj-source .cmj-source-hint { margin-top: 8px; color: #b1bdb3; font-size: 16px; line-height: 1.4; }
.cmj-page .cmj-input-list { margin-top: 18px; padding: 0 24px; border: 1px solid #494554; border-radius: 14px; background: #212628; }
.cmj-input-list li { display: flex; flex-direction: column; justify-content: center; min-height: 88px; padding: 14px 0; }
.cmj-input-list li + li { border-top: 1px solid #414548; }
.cmj-kind { display: block; color: #b6c4b4; font-size: 14px; font-weight: 500; line-height: 1.4; }
.cmj-kind-channel { color: #c2b8ff; }
.cmj-page .cmj-venue-name { margin-top: 4px; font-size: 27px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; overflow-wrap: break-word; }
.cmj-main-arrow { align-self: center; width: 72px; height: 32px; color: #a398c4; }
.cmj-result h2 { color: #d0f5a5; }
.cmj-page .cmj-assignments { margin-top: 14px; }
.cmj-assignment { display: grid; grid-template-columns: 126px 24px minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: 88px; padding: 16px 0; }
.cmj-assignment + .cmj-assignment { border-top: 1px solid #35453d; }
.cmj-account { justify-self: start; padding: 10px 13px; border-radius: 8px; background: #2c3d2d; color: #d0f5a5; font-size: 17px; font-weight: 550; line-height: 1.3; white-space: nowrap; }
.cmj-account-alt { background: #333143; color: #c2b8ff; }
.cmj-row-arrow { width: 24px; height: 24px; color: #91a68c; }
.cmj-destination .cmj-approval { margin-top: 9px; color: #b9c8b9; font-size: 16px; line-height: 1.4; }
.cmj-scene figcaption { color: #b9c8b9; font-size: 20px; line-height: 1.4; letter-spacing: -.015em; }
.cmj-scene figcaption strong { color: #f0f3e9; font-weight: 550; }

.cmj-outro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 22px; border-top: 1px solid #35453d; }
.cmj-story-context { color: #b9c8b9; font-size: 17px; line-height: 1.4; }
.cmj-story .cmj-joke { margin-top: 10px; font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.cmj-joke span { color: #c2b8ff; }
.cmj-tempo { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 3px; color: #b9c8b9; font-size: 16px; line-height: 1.4; }
.cmj-tempo > svg { width: 21px; height: 21px; margin-top: 1px; color: #d0f5a5; }
.cmj-tempo strong { display: block; margin-top: 5px; color: #d0f5a5; font-size: 23px; font-weight: 500; letter-spacing: -.025em; }

@container reader (max-width: 1300px) {
  .cmj-page { padding: 24px 28px; gap: 24px; }
  .cmj-heading h1 { font-size: 56px; }
  .cmj-heading .cmj-lead { font-size: 20px; }
  .cmj-flow { grid-template-columns: minmax(0, .95fr) 58px minmax(0, 1.4fr); gap: 20px; }
  .cmj-flow h2 { font-size: 24px; }
  .cmj-source .cmj-source-hint { font-size: 15px; }
  .cmj-page .cmj-input-list { margin-top: 14px; padding-inline: 20px; }
  .cmj-input-list li { min-height: 74px; padding-block: 12px; }
  .cmj-kind { font-size: 13px; }
  .cmj-page .cmj-venue-name { font-size: 24px; }
  .cmj-main-arrow { width: 58px; }
  .cmj-assignment { grid-template-columns: 112px 22px minmax(0, 1fr); column-gap: 12px; min-height: 74px; padding-block: 12px; }
  .cmj-account { padding: 9px 11px; font-size: 16px; }
  .cmj-row-arrow { width: 22px; height: 22px; }
  .cmj-destination .cmj-approval { font-size: 15px; }
  .cmj-scene figcaption { font-size: 18px; }
  .cmj-outro { padding-top: 18px; }
  .cmj-story-context { font-size: 16px; }
  .cmj-story .cmj-joke { margin-top: 8px; font-size: 28px; }
  .cmj-tempo strong { font-size: 22px; }
}

@container reader (max-width: 850px) {
  .cmj-page { gap: 32px; padding: 28px; }
  .cmj-heading h1 { font-size: clamp(42px, 7cqw, 56px); }
  .cmj-heading .cmj-lead { max-width: 32ch; font-size: 22px; }
  .cmj-scene { flex: none; gap: 24px; }
  .cmj-flow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cmj-flow h2 { font-size: 26px; }
  .cmj-input-list li { min-height: 80px; }
  .cmj-main-arrow { justify-self: center; width: 64px; height: 32px; margin-block: 8px; transform: rotate(90deg); }
  .cmj-assignment { grid-template-columns: 126px 24px minmax(0, 1fr); column-gap: 16px; min-height: 86px; padding-block: 16px; }
  .cmj-account { font-size: 17px; }
  .cmj-kind { font-size: 14px; }
  .cmj-page .cmj-venue-name { font-size: 26px; }
  .cmj-outro { align-items: flex-start; flex-direction: column; gap: 24px; padding-top: 24px; }
}

@container reader (max-width: 520px) {
  .cmj-page { padding: 26px 20px 32px; }
  .cmj-heading h1 { font-size: clamp(37px, 10cqw, 48px); }
  .cmj-heading .cmj-lead { font-size: 20px; }
  .cmj-flow h2 { font-size: 24px; }
  .cmj-source .cmj-source-hint { max-width: 30ch; }
  .cmj-assignment { grid-template-columns: 104px 18px minmax(0, 1fr); column-gap: 9px; }
  .cmj-account { padding: 9px; font-size: 15px; }
  .cmj-row-arrow { width: 18px; height: 18px; }
  .cmj-kind { font-size: 13px; }
  .cmj-page .cmj-venue-name { font-size: 22px; }
  .cmj-scene figcaption { font-size: 18px; }
  .cmj-story .cmj-joke { font-size: 27px; }
}