.cmn-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 100%;
  padding: 26px 40px 20px;
  background: #121c19;
  color: #f0f3e9;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cmn-page *, .cmn-page *::before, .cmn-page *::after { box-sizing: border-box; }
.cmn-page :where(h1, h2, h3, h4, p, blockquote) { margin: 0; }
.cmn-page :where(div, section, article, aside, header, button, span) { min-width: 0; }
.cmn-page svg { display: block; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmn-page button { margin: 0; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.cmn-page .cmn-arrow { width: 20px; height: 20px; }
.cmn-page .cmn-more { width: 20px; height: 20px; margin-left: auto; color: #839096; stroke: none; }
.cmn-page .cmn-eye { width: 15px; height: 12px; stroke-width: 1.3; }
.cmn-page .cmn-zina-art, .cmn-page .cmn-socks-art { width: 100%; height: 100%; stroke: none; }
.cmn-page :where(button, a):focus-visible { outline: 2px solid #7760ba; outline-offset: 3px; }

.cmn-page .cmn-heading h1 { font-size: 64px; font-weight: 550; line-height: 1.08; letter-spacing: -.055em; }
.cmn-page .cmn-heading h1 span { color: #d0f5a5; }
.cmn-page .cmn-lead { max-width: 1200px; margin-top: 10px; color: #b9c8b9; font-size: 18px; line-height: 1.45; letter-spacing: -.015em; }
.cmn-page .cmn-story { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: center; align-content: center; gap: 44px; }

/* One Telegram thread, with an open AI bridge beside its source and answer. */
.cmn-page .cmn-conversation { display: grid; grid-template-columns: minmax(0, 1fr) 196px; grid-template-areas: 'source analysis' 'reply analysis' 'mode mode'; column-gap: 26px; }
.cmn-page .cmn-source { grid-area: source; overflow: hidden; border: 1px solid #b7c6b3; border-bottom: 0; border-radius: 16px 16px 0 0; background: #e0e9d8; color: #17212b; }
.cmn-page .cmn-tg-header { display: flex; align-items: center; gap: 11px; padding: 9px 16px; background: #fff; color: #17212b; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.cmn-page .cmn-news-avatar { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #6f9fb8; color: #fff; }
.cmn-page .cmn-news-avatar svg { width: 29px; height: 29px; stroke-width: 1.5; }
.cmn-page .cmn-tg-identity { flex: 1; }
.cmn-page .cmn-tg-name { font-size: 18px; font-weight: 600; line-height: 1.25; }
.cmn-page .cmn-tg-status { margin-top: 3px; color: #78878c; font-size: 13px; line-height: 1.3; }
.cmn-page .cmn-thread-body { padding: 12px 14px 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.cmn-page .cmn-post { padding: 10px 14px 7px; border-radius: 10px; background: #fff; box-shadow: 0 1px 1px #253c2312; }
.cmn-page .cmn-post > p { font-size: 22px; line-height: 1.34; letter-spacing: -.015em; }
.cmn-page .cmn-post strong { font-weight: 650; }
.cmn-page .cmn-message-meta { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 5px; color: #7a8788; font-size: 11px; line-height: 1.3; }
.cmn-page .cmn-message-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.cmn-page .cmn-comments-label { display: flex; align-items: center; gap: 8px; padding: 10px 2px 8px; color: #526e61; font-size: 13px; font-weight: 500; line-height: 18px; }
.cmn-page .cmn-comments-label svg { width: 16px; height: 16px; }
.cmn-page .cmn-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 9px; }
.cmn-page .cmn-human + .cmn-human { margin-top: 8px; }
.cmn-page .cmn-human-avatar { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 3px; border-radius: 50%; color: #fff; font-size: 17px; font-weight: 500; }
.cmn-page .cmn-ilya { background: #6b97b5; }
.cmn-page .cmn-nadya { background: #b88678; }
.cmn-page .cmn-bubble { padding: 7px 12px 8px; border-radius: 4px 11px 11px; background: #fff; color: #17212b; box-shadow: 0 1px 1px #253c2312; }
.cmn-page .cmn-message-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 1.3; }
.cmn-page .cmn-message-heading strong { color: #477eaa; font-weight: 600; }
.cmn-page .cmn-nadya + .cmn-bubble .cmn-message-heading strong { color: #a26758; }
.cmn-page .cmn-message-heading time { flex: none; color: #899294; font-size: 10px; font-weight: 400; }
.cmn-page .cmn-human-text { margin-top: 3px; font-size: 18px; line-height: 1.3; }

.cmn-page .cmn-analysis { grid-area: analysis; display: flex; flex-direction: column; justify-content: center; align-self: stretch; gap: 18px; color: #c2b8ff; }
.cmn-page .cmn-analysis-input { position: relative; }
.cmn-page .cmn-input-wire { position: absolute; top: 0; left: -27px; width: 27px; height: 128px; color: #817997; }
.cmn-page .cmn-ai-icon { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid #55516c; border-radius: 21px; background: #282a37; }
.cmn-page .cmn-ai-icon svg { width: 60px; height: 60px; stroke-width: 1.8; }
.cmn-page .cmn-ai-icon text { font: 600 19px 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.cmn-page .cmn-analysis h2 { margin-top: 14px; font-size: 23px; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; }
.cmn-page .cmn-analysis-copy { margin-top: 10px; color: #b8c6ba; font-size: 17px; line-height: 1.4; }
.cmn-page .cmn-output-wire { width: 160px; height: 64px; margin-left: -22px; color: #9d92bd; }
.cmn-page .cmn-analysis-output > .cmn-arrow { display: none; }
.cmn-page .cmn-analysis-output p { margin-top: 3px; color: #d0f5a5; font-size: 15px; line-height: 1.4; }

.cmn-page .cmn-generated { grid-area: reply; padding: 10px 14px 14px; border: 1px solid #b7c6b3; border-top: 0; border-radius: 0 0 16px 16px; background: #e0e9d8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.cmn-page .cmn-avatar-control { width: 36px; height: 36px; margin-top: 3px; border-radius: 50%; background: #d9cdf2; }
.cmn-page .cmn-author-control { border-radius: 3px; background: transparent; color: #7962ac; font-size: 16px; font-weight: 600; line-height: 1.35; text-decoration: underline; text-decoration-color: #b3a4ce; text-underline-offset: 3px; }
.cmn-page .cmn-author-control:hover { color: #4c3482; text-decoration-color: currentColor; }
.cmn-page .cmn-avatar-control:hover { outline: 2px solid #9c88bb; outline-offset: 2px; }
.cmn-page .cmn-quoted-human { margin-top: 8px; padding: 5px 9px; border-left: 3px solid #8b78ac; border-radius: 3px; background: #f0ebf7; color: #514763; font-size: 13px; line-height: 1.3; }
.cmn-page .cmn-quoted-human strong { display: block; margin-bottom: 2px; color: #7962ac; font-weight: 600; }
.cmn-page .cmn-reply-text { margin-top: 8px; font-size: 23px; line-height: 1.3; letter-spacing: -.015em; }
.cmn-page .cmn-mode { grid-area: mode; margin-top: 12px; color: #b7c6b8; font-size: 14px; line-height: 1.4; }
.cmn-page .cmn-mode span { color: #c2b8ff; }

/* The two destinations stay visible. Buttons only focus the next illustrated screen. */
.cmn-page .cmn-continuation { display: flex; flex-direction: column; gap: 11px; }
.cmn-page .cmn-reader-heading h2 { color: #d0f5a5; font-size: 23px; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.cmn-page .cmn-reader-heading p { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; margin-top: 7px; color: #b9c8b9; font-size: 14px; line-height: 1.4; }
.cmn-page .cmn-reader-heading .cmn-arrow { width: 17px; height: 17px; color: #d0f5a5; }
.cmn-page .cmn-profile, .cmn-page .cmn-channel { border: 1px solid #b7c6b3; border-radius: 14px; background: #fff; color: #17212b; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; scroll-margin-block: 18px; }
.cmn-page .cmn-profile:focus, .cmn-page .cmn-channel:focus { outline: 3px solid #c2b8ff; outline-offset: 4px; }
.cmn-page .cmn-profile { padding: 15px; }
.cmn-page .cmn-profile-identity { display: flex; align-items: center; gap: 12px; }
.cmn-page .cmn-profile-avatar { flex: none; width: 54px; height: 54px; }
.cmn-page .cmn-profile-identity h3 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.cmn-page .cmn-attached { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 13px; padding: 9px; border-radius: 9px; background: #f0f3ed; color: #17212b; }
.cmn-page .cmn-attached:hover { background: #e6ecdf; }
.cmn-page .cmn-attached > .cmn-socks-art { width: 43px; height: 43px; border-radius: 9px; }
.cmn-page .cmn-attached-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cmn-page .cmn-attached-label { color: #577964; font-size: 10px; font-weight: 500; line-height: 1.2; }
.cmn-page .cmn-attached-copy strong { font-size: 16px; font-weight: 600; line-height: 1.25; }
.cmn-page .cmn-latest-post { color: #586667; font-size: 13px; line-height: 1.25; }
.cmn-page .cmn-attached > .cmn-arrow { width: 16px; height: 16px; color: #758574; }
.cmn-page .cmn-bio { margin-top: 12px; font-size: 15px; line-height: 1.35; }
.cmn-page .cmn-bio-label { margin-bottom: 3px; color: #6d8584; font-size: 11px; }
.cmn-page .cmn-enter-channel { display: flex; align-items: center; gap: 9px; color: #b9c8b9; font-size: 14px; line-height: 1.35; }
.cmn-page .cmn-enter-channel .cmn-arrow { color: #d0f5a5; transform: rotate(90deg); }
.cmn-page .cmn-channel { overflow: hidden; }
.cmn-page .cmn-channel .cmn-tg-header { padding: 9px 13px; }
.cmn-page .cmn-channel-avatar { flex: none; width: 34px; height: 34px; }
.cmn-page .cmn-channel-feed { padding: 10px; background: #e0e9d8; }
.cmn-page .cmn-offer { padding: 11px 13px 7px; border-radius: 9px; background: #fff; }
.cmn-page .cmn-offer h4 { color: #344d39; font-size: 22px; font-weight: 600; line-height: 1.22; letter-spacing: -.025em; }
.cmn-page .cmn-offer > p { margin-top: 7px; font-size: 18px; line-height: 1.35; }

.cmn-page .cmn-accounts { padding-top: 13px; border-top: 1px solid #35453d; color: #b9c8b9; font-size: 15px; line-height: 1.45; }
.cmn-page .cmn-accounts a { color: #c2b8ff; text-decoration: underline; text-decoration-color: #71698c; text-underline-offset: 4px; }
.cmn-page .cmn-accounts a:hover { color: #e0d9ff; text-decoration-color: currentColor; }
.cmn-page .cmn-accounts a:focus-visible { outline-color: #c2b8ff; }

@container reader (max-width: 1200px) {
  .cmn-page { gap: 10px; padding: 20px 24px 18px; }
  .cmn-page .cmn-heading h1 { font-size: 54px; }
  .cmn-page .cmn-lead { margin-top: 8px; font-size: 16px; line-height: 1.4; }
  .cmn-page .cmn-story { grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; }
  .cmn-page .cmn-conversation { grid-template-columns: minmax(0, 1fr) 140px; column-gap: 18px; }
  .cmn-page .cmn-tg-header { gap: 9px; padding: 8px 12px; }
  .cmn-page .cmn-news-avatar { width: 32px; height: 32px; }
  .cmn-page .cmn-news-avatar svg { width: 25px; height: 25px; }
  .cmn-page .cmn-tg-name { font-size: 16px; }
  .cmn-page .cmn-tg-status { margin-top: 2px; font-size: 11px; }
  .cmn-page .cmn-thread-body { padding: 8px 11px 0; }
  .cmn-page .cmn-post { padding: 8px 12px 6px; }
  .cmn-page .cmn-post > p { font-size: 20px; line-height: 1.3; }
  .cmn-page .cmn-comments-label { padding-block: 6px; }
  .cmn-page .cmn-message { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; }
  .cmn-page .cmn-human-avatar { width: 30px; height: 30px; font-size: 15px; }
  .cmn-page .cmn-bubble { padding: 5px 10px 6px; }
  .cmn-page .cmn-human + .cmn-human { margin-top: 6px; }
  .cmn-page .cmn-human-text { margin-top: 1px; font-size: 17px; }
  .cmn-page .cmn-generated { padding: 8px 11px 10px; }
  .cmn-page .cmn-avatar-control { width: 31px; height: 31px; }
  .cmn-page .cmn-author-control { font-size: 15px; }
  .cmn-page .cmn-quoted-human { margin-top: 6px; font-size: 12px; }
  .cmn-page .cmn-reply-text { margin-top: 7px; font-size: 20px; }
  .cmn-page .cmn-ai-icon { width: 62px; height: 62px; border-radius: 18px; }
  .cmn-page .cmn-ai-icon svg { width: 53px; height: 53px; }
  .cmn-page .cmn-input-wire { left: -19px; width: 19px; }
  .cmn-page .cmn-analysis h2 { margin-top: 12px; font-size: 19px; }
  .cmn-page .cmn-analysis-copy { font-size: 15px; }
  .cmn-page .cmn-output-wire { width: 135px; margin-left: -14px; }
  .cmn-page .cmn-analysis-output p { font-size: 13px; }
  .cmn-page .cmn-mode { margin-top: 10px; font-size: 13px; }
  .cmn-page .cmn-continuation { gap: 10px; }
  .cmn-page .cmn-reader-heading h2 { font-size: 20px; }
  .cmn-page .cmn-reader-heading p { margin-top: 5px; font-size: 13px; }
  .cmn-page .cmn-profile { padding: 12px; }
  .cmn-page .cmn-profile-identity { gap: 9px; }
  .cmn-page .cmn-profile-avatar { width: 46px; height: 46px; }
  .cmn-page .cmn-profile-identity h3 { font-size: 20px; }
  .cmn-page .cmn-attached { gap: 7px; margin-top: 10px; padding: 8px; }
  .cmn-page .cmn-attached > .cmn-socks-art { width: 34px; height: 34px; }
  .cmn-page .cmn-latest-post { font-size: 12px; }
  .cmn-page .cmn-bio { margin-top: 10px; font-size: 14px; }
  .cmn-page .cmn-enter-channel { gap: 7px; font-size: 12px; }
  .cmn-page .cmn-channel .cmn-tg-header { padding: 8px 11px; }
  .cmn-page .cmn-channel-feed { padding: 8px; }
  .cmn-page .cmn-offer { padding: 10px 11px 6px; }
  .cmn-page .cmn-offer h4 { font-size: 20px; }
  .cmn-page .cmn-offer > p { margin-top: 6px; font-size: 17px; }
  .cmn-page .cmn-accounts { padding-top: 11px; font-size: 14px; }
}

@container reader (max-width: 900px) {
  .cmn-page { gap: 26px; padding: 26px; }
  .cmn-page .cmn-heading h1 { font-size: clamp(38px, 6.5cqw, 54px); }
  .cmn-page .cmn-lead { font-size: 18px; }
  .cmn-page .cmn-story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cmn-page .cmn-conversation { grid-template-columns: minmax(0, 1fr) 160px; column-gap: 22px; }
  .cmn-page .cmn-reply-text { font-size: 22px; }
  .cmn-page .cmn-mode { font-size: 14px; }
  .cmn-page .cmn-continuation { max-width: 480px; width: 100%; justify-self: center; gap: 14px; }
  .cmn-page .cmn-reader-heading h2 { font-size: 24px; }
  .cmn-page .cmn-reader-heading p, .cmn-page .cmn-enter-channel { font-size: 15px; }
  .cmn-page .cmn-profile { padding: 17px; }
  .cmn-page .cmn-profile-avatar { width: 58px; height: 58px; }
  .cmn-page .cmn-profile-identity h3 { font-size: 23px; }
  .cmn-page .cmn-attached { margin-top: 14px; padding: 10px; }
  .cmn-page .cmn-attached > .cmn-socks-art { width: 44px; height: 44px; }
  .cmn-page .cmn-latest-post { font-size: 14px; }
  .cmn-page .cmn-bio { margin-top: 13px; font-size: 16px; }
  .cmn-page .cmn-offer { padding: 14px; }
  .cmn-page .cmn-offer h4 { font-size: 23px; }
  .cmn-page .cmn-offer > p { font-size: 19px; }
  .cmn-page .cmn-accounts { font-size: 15px; }
}

@container reader (max-width: 600px) {
  .cmn-page { gap: 24px; padding: 26px 18px 30px; }
  .cmn-page .cmn-heading h1 { font-size: clamp(29px, 8.5cqw, 47px); }
  .cmn-page .cmn-lead { margin-top: 12px; font-size: 17px; line-height: 1.5; }
  .cmn-page .cmn-conversation { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'source' 'analysis' 'reply' 'mode'; }
  .cmn-page .cmn-source { border-bottom: 1px solid #b7c6b3; border-radius: 14px; }
  .cmn-page .cmn-thread-body { padding: 11px; }
  .cmn-page .cmn-tg-header { padding: 11px; }
  .cmn-page .cmn-tg-name { font-size: 16px; }
  .cmn-page .cmn-tg-status { font-size: 11px; }
  .cmn-page .cmn-post > p { font-size: 21px; }
  .cmn-page .cmn-bubble { padding: 8px 10px 10px; }
  .cmn-page .cmn-human + .cmn-human { margin-top: 8px; }
  .cmn-page .cmn-human-text { margin-top: 3px; font-size: 17px; }
  .cmn-page .cmn-analysis { gap: 0; padding: 20px 8px 16px; }
  .cmn-page .cmn-analysis-input { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 5px 14px; }
  .cmn-page .cmn-input-wire { display: none; }
  .cmn-page .cmn-ai-icon { grid-row: span 2; width: 60px; height: 60px; }
  .cmn-page .cmn-analysis h2 { margin: 0; font-size: 21px; }
  .cmn-page .cmn-analysis-copy { margin: 0; font-size: 15px; }
  .cmn-page .cmn-analysis :where(h2, .cmn-analysis-copy) br { display: none; }
  .cmn-page .cmn-analysis-output { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-left: 15px; }
  .cmn-page .cmn-output-wire { display: none; }
  .cmn-page .cmn-analysis-output > .cmn-arrow { display: block; transform: rotate(90deg); }
  .cmn-page .cmn-analysis-output p { margin: 0; font-size: 14px; }
  .cmn-page .cmn-generated { padding: 12px 11px; border-top: 1px solid #b7c6b3; border-radius: 14px; }
  .cmn-page .cmn-reply-text { font-size: 21px; line-height: 1.35; }
  .cmn-page .cmn-mode { margin-top: 13px; font-size: 14px; }
  .cmn-page .cmn-mode span { display: block; margin-top: 3px; }
  .cmn-page .cmn-continuation { max-width: none; }
  .cmn-page .cmn-reader-heading h2 { font-size: 23px; }
  .cmn-page .cmn-profile { padding: 14px; }
  .cmn-page .cmn-profile-identity h3 { font-size: 22px; }
  .cmn-page .cmn-enter-channel { font-size: 14px; }
  .cmn-page .cmn-attached { padding: 9px; }
  .cmn-page .cmn-attached > .cmn-socks-art { width: 38px; height: 38px; }
  .cmn-page .cmn-latest-post { font-size: 13px; }
  .cmn-page .cmn-offer h4 { font-size: 23px; }
  .cmn-page .cmn-accounts { line-height: 1.6; }
}

@container reader (max-width: 360px) {
  .cmn-page { padding-inline: 14px; }
  .cmn-page .cmn-more { width: 16px; }
  .cmn-page .cmn-post { padding-inline: 10px; }
  .cmn-page .cmn-thread-body { padding-inline: 9px; }
  .cmn-page .cmn-generated { padding-inline: 9px; }
  .cmn-page .cmn-message { grid-template-columns: 27px minmax(0, 1fr); gap: 6px; }
  .cmn-page .cmn-human-avatar, .cmn-page .cmn-avatar-control { width: 27px; height: 27px; }
  .cmn-page .cmn-message-heading { flex-wrap: wrap; gap: 2px 8px; }
  .cmn-page .cmn-profile-avatar { width: 48px; height: 48px; }
  .cmn-page .cmn-profile-identity h3 { font-size: 21px; }
}