.site-navigation{padding:28px 20px;background:#21352a;color:#fff;min-width:0}.site-brand{display:block;color:#eee3c8;font-weight:750;letter-spacing:.14em;text-decoration:none;margin-bottom:26px}.site-navigation nav{display:grid;gap:4px}.site-navigation nav a{color:#fff;text-decoration:none;padding:10px 12px;border-radius:10px;font-size:.9rem;min-height:44px}.site-navigation nav a:hover,.site-navigation nav a[aria-current]{background:#405445}.site-navigation .navigation-group{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#eee3c8;margin:24px 12px 8px}.navigation-note{font-size:.72rem;line-height:1.5;color:#d5ddd4;padding:8px 12px}.site-navigation summary{min-height:44px;font-weight:600}.with-navigation>main{width:100%;min-width:0;max-width:none;margin:0}.with-navigation #login,.with-navigation #setup,.with-navigation #login-form{max-width:600px}.with-navigation #paired>section:not(#supplies){max-width:1040px}.with-navigation>main>header{margin-bottom:28px}.with-navigation>main>p,.with-navigation>main>details{max-width:1000px}
.project-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0;border:0;background:none}.project-lines a{display:grid;gap:12px;padding:24px;background:#fff;border:1px solid #d5ddd4;border-radius:18px;color:#21352a;text-decoration:none}.project-lines a:hover{background:#eee3c8}.project-lines strong{font-size:1.35rem}.project-lines small{line-height:1.5}@media(max-width:650px){.project-lines{grid-template-columns:1fr}}
@media(min-width:1000px){.with-navigation{display:grid;grid-template-columns:260px minmax(0,1fr);background:#f7f8f4}.site-navigation{position:sticky;top:0;height:100vh;overflow-y:auto}.site-navigation details>summary{display:none}.site-navigation details:not([open])>nav{display:grid}.with-navigation>main{padding:36px clamp(24px,4vw,72px)}.with-navigation>main.demo-main{padding:32px clamp(20px,3vw,52px)}.with-navigation .phones{gap:20px}}
@media(max-width:999px){.site-navigation{padding:16px 20px}.site-brand{margin-bottom:8px}.site-navigation details{margin:0}.site-navigation nav{padding:12px 0}.site-navigation nav a{font-size:1rem}.with-navigation>main{padding:24px 18px}}
@media(max-width:600px){.with-navigation .phones{grid-template-columns:1fr}.with-navigation .phone{padding:16px}.with-navigation header{flex-wrap:wrap}.with-navigation .header-tools{justify-content:flex-start}.with-navigation .demo-messages{height:220px}}