.guide-note{padding:22px 26px;background:#eef7fa;border-left:4px solid #087da2;border-radius:8px;margin:20px 0 28px;color:#395666}.guide-note p{margin:8px 0 0}.walkthrough{display:grid;grid-template-columns:1fr 1.1fr;gap:45px;align-items:center;padding:38px 0;border-bottom:1px solid #dce7ed}.walkthrough h2{margin-top:12px}.mock-screen{margin:0;min-width:0;border:1px solid #cadce7;border-radius:12px;overflow:hidden;background:#f3f7fb}.mock-screen figcaption{background:#18384d;color:#fff;padding:10px 20px;font-size:13px}.mock-body{padding:22px}.mock-body p{margin:16px 0 0}.mock-field{padding:10px 13px;margin:10px 0;background:white;border:1px solid #d7e4ed;border-radius:6px;font-size:14px;overflow-wrap:anywhere}.mock-field b{display:block;color:#1c4057;margin-top:3px}.mock-button{display:inline-block;background:#087da2;color:#fff;border-radius:6px;padding:9px 16px;margin:8px 0}.mock-menu{background:#193c54;color:#c9dfed;padding:14px;line-height:2}.mock-menu strong{display:block;background:#087da2;color:white;padding:0 8px}.mock-body pre{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}@media(max-width:800px){.walkthrough{grid-template-columns:minmax(0,1fr);gap:18px;padding:28px 0}.mock-body{padding:15px}}
.annotated{position:relative;max-width:1150px;margin:auto}.annotated img{width:100%;display:block}.annotated svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#screen .screenshot{margin-top:20px;border-radius:8px;padding:16px}#screen .screenshot span{position:static;margin-left:20px}