.tn-reference { background: #14242b; border-block: 1px solid var(--cx-line); }
.tn-reference .cx-frame { min-width: 0; }
.tn-reference .cx-frame a { display: block; }
.tn-reference .cx-frame img, .tn-screen .cx-frame img { display: block; width: 100%; height: auto; }
.tn-hero h1 { overflow-wrap: anywhere; }
.tn-hero .lead { margin-bottom: 16px; }
.tn-intro { max-width: 780px; color: var(--cx-muted); font-size: 18px; line-height: 1.7; }
.tn-notice { max-width: 860px; margin: 28px 0; padding: 16px 20px; border-left: 3px solid #64dfcd; background: #142a30; color: #d7e5e8; line-height: 1.6; }
.tn-jumps { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.tn-jumps a { color: #8ce5d8; text-underline-offset: 5px; }
.tn-screen { scroll-margin-top: 100px; border-bottom: 1px solid var(--cx-line); }
.tn-screen:nth-of-type(odd) { background: #16232b; }
.tn-screen-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 28px; }
.tn-screen-heading h2 { margin-bottom: 0; }
.tn-screen-heading > p { color: var(--cx-muted); line-height: 1.7; margin: 0; }
.tn-screen .cx-frame { margin: 0; }
.tn-screen figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.tn-screen figcaption a { color: #8ce5d8; white-space: nowrap; }
.tn-capture-note { margin-top: 24px; }
@media (max-width: 700px) {
  .tn-screen-heading { grid-template-columns: 1fr; gap: 16px; }
  .tn-intro { font-size: 16px; }
  .tn-notice { padding: 14px 16px; }
}