.guide{min-height:100vh;background:var(--paper);color:var(--ink)}.guide-header{display:flex;align-items:center;gap:8px;padding:16px;position:-webkit-sticky;position:sticky;top:0;z-index:10;background:hsla(43,41%,97%,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.guide-brand{font:400 26px Newsreader;text-decoration:none;margin-right:auto}.guide-header nav{display:flex;gap:8px}.guide-header nav a{padding:10px 18px;text-decoration:none;color:var(--muted);font-weight:500}.guide-header nav a.active{background:var(--amber);color:#3a372f;border-radius:3px}.guide-close{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;text-decoration:none;color:var(--muted);font-size:22px;margin-left:12px}.guide-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;grid-gap:70px;gap:70px;padding:72px 32px 100px}.guide aside{display:flex;flex-direction:column;gap:12px;position:-webkit-sticky;position:sticky;top:110px;height:max-content}.guide aside small,.guide-pill{font:11px DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}.guide aside b{font:26px Newsreader;margin-bottom:20px}.guide aside a{color:var(--muted);text-decoration:none}.guide article{max-width:800px}.guide h1{font:300 clamp(50px,6vw,82px)/1 Newsreader;margin:20px 0 24px;letter-spacing:-.035em}.guide h1 em{font-style:italic;color:var(--blue)}.guide .lead{font-size:20px;line-height:1.55;color:var(--muted);max-width:720px;margin-bottom:70px}.guide article section{scroll-margin-top:110px;margin-bottom:70px}.guide h2{font:400 34px Newsreader;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}.guide p{font-size:17px;line-height:1.7;color:var(--muted)}.guide-card{display:grid;grid-template-columns:1fr auto;grid-gap:10px;gap:10px;background:#efe8da;border-radius:6px;padding:18px 20px;margin-top:24px}.guide-card span{color:var(--blue);font-weight:600}.guide pre{background:#3f3a33;color:#f6f1e8;border-radius:6px;padding:22px;overflow:auto;line-height:1.7;margin-top:24px}.guide-callout{display:flex;gap:16px;align-items:center;background:#edf4ff;border-left:3px solid var(--blue);padding:16px 18px;margin-top:24px}.guide-callout span{color:var(--muted)}@media(max-width:700px){.guide-header{padding:12px}.guide-header nav{display:none}.guide-layout{display:block;padding:48px 20px 70px}.guide aside{display:none}.guide h1{font-size:54px}.guide .lead{font-size:18px}.guide .lead,.guide article section{margin-bottom:50px}}.guide-header nav{display:none}.guide-header:after{content:"Relay integration guide";font:500 17px Figtree,sans-serif;color:var(--muted);margin-right:12px}.guide-events{display:grid;grid-gap:8px;gap:8px;margin-top:24px}.guide-events div{display:flex;justify-content:space-between;gap:20px;padding:12px 14px;background:#efe8da;border-radius:4px}.guide-events code{color:var(--blue);font:14px DM Mono,monospace}.guide-events span{color:var(--muted);font-size:14px}@media(max-width:700px){.guide-header:after{font-size:14px}.guide-events div{display:block}.guide-events span{display:block;margin-top:5px}}.guide-header{justify-content:center}.guide-header:after{display:none}.guide-brand{position:absolute;left:16px}.guide-title{font:500 17px Figtree,sans-serif;color:var(--muted)}.guide-close{position:absolute;right:16px;z-index:3;cursor:pointer;pointer-events:auto}@media(max-width:700px){.guide-title{font-size:14px}.guide-brand{left:12px}.guide-close{right:12px}}