/* TidyFrame Guide: two-column layout with a side menu. Loaded after page.css. */
.guide{max-width:1120px;margin:0 auto;padding:40px 20px 40px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px}
.guide main{max-width:none;margin:0;padding:0}
.gside{position:sticky;top:86px;align-self:start;font-size:15px}
.gside h4{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--sky);margin:0 0 10px}
.gside ul{list-style:none;margin:0 0 26px;padding:0;border-left:1px solid var(--line)}
.gside li{margin:0}
.gside a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.gside a:hover{color:#fff}
.gside a[aria-current=page]{color:#fff;font-weight:700;border-left-color:var(--cyan)}
.gnext{display:flex;justify-content:space-between;gap:14px;margin-top:48px;flex-wrap:wrap}
.gnext a{flex:1;min-width:200px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:#fff;background:rgba(255,255,255,.03)}
.gnext a:hover{border-color:rgba(103,232,249,.5)}
.gnext small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.gnext .nx{text-align:right}
.tip{margin-top:20px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.tip b{color:var(--sky)}
@media (max-width:860px){.guide{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:28px}
.gside{position:static;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.gside ul{margin-bottom:14px}}