.guide-main{padding:35px 0 70px}.guide-back{font-size:12px;color:var(--et-text-muted)}.guide-main>.eyebrow{margin-top:30px}.guide-main h1{font-family:Slab,Georgia,serif;font-weight:400;font-size:43px;line-height:1.25;letter-spacing:-1.5px;margin:18px 0}.guide-intro{font-size:17px;color:var(--et-text-muted);line-height:1.9}.guide-important{border:1px solid var(--et-border-strong);border-left:4px solid var(--et-selection-border);border-radius:8px;background:#eaf0e0;padding:22px 25px;font-size:14px;line-height:1.9;margin:30px 0}.guide-toc{display:flex;flex-wrap:wrap;gap:12px;margin:25px 0 35px}.guide-toc a{border:1px solid var(--et-border);padding:9px 13px;border-radius:6px;font-size:12px;color:#6b8156}.guide-main section{padding:28px 0;border-bottom:1px solid var(--et-border);scroll-margin-top:20px}.guide-main h2{font-family:Slab,serif;font-size:30px;font-weight:400;line-height:1.35;letter-spacing:-.7px;margin:10px 0 18px}.guide-main h3{font-size:20px;font-weight:500;margin-top:25px}.guide-main p{line-height:1.95}.guide-main section>p{font-size:14px;color:#6c7c5e}.guide-main a:not(.button){color:#647e4f}.guide-main a:hover{text-decoration:underline;text-underline-offset:4px}.guide-main .guide-note{font-size:12px;color:var(--et-text-muted);line-height:1.9}.guide-families{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}.guide-families article{padding:25px;background:var(--et-surface);border:1px solid var(--et-border);border-radius:11px;min-width:0}.guide-families h3{margin-top:0;font-family:Slab,serif;font-weight:400;font-size:24px}.guide-families p{font-size:13px;color:#718261}.guide-families a{font-size:12px}.viewport-diagram{background:#e9efde;border-radius:10px;padding:30px;margin:25px 0;display:flex;justify-content:center;gap:30px;align-items:center}.diagram-browser{width:240px;border:9px solid #506044;border-bottom-width:18px;border-radius:12px;background:#fafcf6;flex-shrink:0}.diagram-browser>span{display:block;font-size:9px;line-height:1.5;background:#d3ddc7;padding:10px 7px;border-bottom:1px solid #bbcba9}.diagram-browser>div{border:2px dashed #9cb487;margin:14px;height:150px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;font-size:13px;gap:10px;color:#71895e}.diagram-browser strong{font-size:25px;font-family:Mono,monospace;font-weight:400}.viewport-diagram>p{font-size:13px;max-width:180px;color:#7c9169}.guide-table-wrap{overflow-x:auto;border:1px solid #d7e1c9;border-radius:10px;margin-top:22px}.guide-main table{width:100%;border-collapse:collapse;font-size:12px;background:var(--et-surface)}.guide-main th{background:#e8efdc;color:#6a8254;text-align:left;font-weight:500;padding:15px}.guide-main td{padding:13px 15px;border-top:1px solid #e1e8d8}.guide-main td:nth-child(2){white-space:nowrap;font-family:Mono,monospace;font-size:11px}.guide-main section ul{padding-left:20px;font-size:12px;line-height:2.2}.guide-main .button{margin-top:20px}@media(max-width:700px){.guide-main h1{font-size:34px}.guide-main h2{font-size:26px}.guide-families{grid-template-columns:1fr}.guide-main .guide-intro{font-size:15px}.guide-important{padding:18px 20px}.viewport-diagram{gap:15px;padding:20px;flex-wrap:wrap}.viewport-diagram>p{max-width:100%;margin:0}.guide-main td,.guide-main th{padding:12px 10px}}@media(max-width:400px){.guide-main h1{font-size:30px}.guide-main h2{font-size:24px}.guide-main section>p{font-size:13px}.guide-toc{gap:8px}.guide-toc a{font-size:11px}.guide-families article{padding:20px}}