#right-pane { scroll-margin-top: 24px; }
.screen-note { max-width: 800px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.pane-jump { margin: 20px 0 30px; font-weight: 700; text-underline-offset: 4px; }
.pane-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 36px; margin: 36px 0 22px; align-items: center; }
.pane-screen { margin: 0; min-width: 0; }
.pane-screen a { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: white; }
.pane-screen img { width: 100%; height: auto; display: block; }
.pane-screen figcaption { color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 12px; }
.pane-steps { margin: 0; padding-left: 28px; }
.pane-steps li { margin: 24px 0; padding-left: 6px; }
.pane-steps li::marker { color: var(--accent); font-weight: 750; }
.pane-steps h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.025em; }
.pane-steps p { color: var(--muted); line-height: 1.8; margin: 0; }
@media (max-width: 900px) { .pane-layout { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.hero-screen-note { margin: 12px 4px 2px; color: #f2f0e9; font-size: 12px; line-height: 1.5; text-align: center; }