.network-sidebar-page{--network-sidebar-width:208px}
.network-sidebar-page.network-sidebar-collapsed{--network-sidebar-width:60px}
.network-sidebar-page :is(.site-shell,.news-shell,.community-page){box-sizing:border-box;padding-left:var(--network-sidebar-width)}
#network-sidebar{box-sizing:border-box;position:fixed;left:0;top:0;bottom:0;width:var(--network-sidebar-width);padding:calc(var(--network-sidebar-header-clearance,var(--xunaro-sticky-nav-height,96px)) + 4px) 10px 12px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;overflow-x:hidden;background:var(--panel,#0c171a);color:var(--muted,#91a2a6);border-right:1px solid var(--line,#27443e);z-index:950;transition:width .24s cubic-bezier(.2,.7,.25,1)!important}
#network-sidebar nav{display:flex;flex-direction:column;gap:5px}
.network-sidebar-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border:1px solid transparent;color:inherit;text-decoration:none;font:600 14px/1.4 Arial,Helvetica,sans-serif;white-space:nowrap}
.network-sidebar-link svg{display:block;flex:0 0 20px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.network-sidebar-link:hover,.network-sidebar-link:focus-visible{color:var(--green,#7bf4cf)}
.network-sidebar-link.selected{color:var(--green,#7bf4cf);background:color-mix(in srgb,var(--green,#7bf4cf) 10%,transparent);border-color:var(--line,#27443e)}
.network-sidebar-link.network-sidebar-support{margin-top:26px}
#network-sidebar-toggle,#network-sidebar-open{display:grid;place-items:center;box-sizing:border-box;min-height:40px;padding:6px;border:0;color:var(--green,#7bf4cf);background:transparent;font:700 22px Arial;cursor:pointer}
#network-sidebar-toggle{margin-top:auto;width:100%;flex:none}
#network-sidebar-open,#network-sidebar-shade{display:none}
.network-sidebar-collapsed .network-sidebar-link{justify-content:center;padding:10px 0;width:40px;height:44px}
.network-sidebar-collapsed .network-sidebar-link>span{display:none}
@media(max-width:760px){
 .network-sidebar-page :is(.site-shell,.news-shell,.community-page){padding-left:0}
 #network-sidebar{width:min(75vw,300px);z-index:1204;transform:translateX(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.2,.7,.25,1),visibility 0s .24s!important}
 .network-sidebar-mobile-open #network-sidebar{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.2,.7,.25,1),visibility 0s!important}
 #network-sidebar-open{display:grid;position:fixed;bottom:16px;left:12px;width:40px;height:40px;background:var(--panel,#0c171a);border:1px solid var(--line,#27443e);z-index:950}
 .network-sidebar-mobile-open #network-sidebar-open{display:none}
 #network-sidebar-shade:not([hidden]){display:block;position:fixed;inset:0;background:#0009;backdrop-filter:blur(2px);z-index:1203}
 .network-sidebar-mobile-open{overflow:hidden}
 .network-sidebar-collapsed .network-sidebar-link{width:100%;justify-content:flex-start;padding:10px 12px}
 .network-sidebar-collapsed .network-sidebar-link>span{display:inline}
}
@media(prefers-reduced-motion:reduce){#network-sidebar{transition:none!important}}
/* Page content changes while the shared navigation stays in place. */
@view-transition{navigation:auto}
.network-sidebar-page :is(.home-main-content,.news-content,.community-shell){view-transition-name:network-content}
html.network-sidebar-page::view-transition-old(root),html.network-sidebar-page::view-transition-new(root){animation:none!important}
html.network-sidebar-page::view-transition-old(network-content){animation:network-content-out .16s ease both!important}
html.network-sidebar-page::view-transition-new(network-content){animation:network-content-in .22s cubic-bezier(.2,.7,.25,1) both!important}
@keyframes network-content-out{to{opacity:0}}
@keyframes network-content-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.network-sidebar-page::view-transition-old(network-content),html.network-sidebar-page::view-transition-new(network-content){animation:none!important}}
/* Shared Network/Studio navigation, with Support and Settings in the footer. */
.network-sidebar-page :is(.platform-shell,.messages-shell){box-sizing:border-box;padding-left:var(--network-sidebar-width)}
#network-sidebar{overflow:hidden}
#network-sidebar>nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.network-sidebar-footer{margin-top:auto;flex:none;display:flex;flex-direction:column;gap:8px;min-width:0}
.network-sidebar-footer #network-sidebar-toggle{margin-top:0}
.network-sidebar-footer-row{display:flex;align-items:center;gap:4px;min-width:0}
.network-sidebar-footer .network-sidebar-support{margin-top:0;flex:1;min-width:0;padding-left:8px;padding-right:4px}
.network-sidebar-settings{display:grid;place-items:center;box-sizing:border-box;width:36px;height:40px;padding:8px;flex:none;color:var(--muted,#91a2a6);border:0;background:transparent}
.network-sidebar-settings:hover{color:var(--green,#7bf4cf)}
.network-sidebar-settings svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.network-sidebar-collapsed .network-sidebar-footer .network-sidebar-support{flex:0 0 40px;padding:10px 0}
.network-sidebar-collapsed .network-sidebar-settings{display:none}
.network-sidebar-page .platform-content,.network-sidebar-page .messages-list{view-transition-name:network-content}
@media(max-width:760px){
 .network-sidebar-page :is(.platform-shell,.messages-shell){padding-left:0}
 .network-sidebar-collapsed .network-sidebar-settings{display:grid}
 .network-sidebar-collapsed .network-sidebar-footer .network-sidebar-support{flex:1;width:auto;padding:10px 8px}
}
/* Phone navigation follows the finger without changing drawer width. */
@media(max-width:760px){
 .network-sidebar-dragging{overflow:hidden}
 #network-sidebar,#network-sidebar-shade{touch-action:pan-y}
 .network-sidebar-page .nav .login-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;line-height:1!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;min-height:40px}
}
@media(max-width:760px){
 .network-sidebar-page .nav:has(>.login-link){grid-template-areas:"brand account"!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto!important;row-gap:0!important}
}

/* Separate Studio from the Network pages with a small gap. */
.network-sidebar-link.network-sidebar-studio{margin-top:40px;color:#38a9ff}
.network-sidebar-link.network-sidebar-studio.selected{color:#38a9ff;background:color-mix(in srgb,#38a9ff 10%,transparent)}

@media(max-width:760px){#network-sidebar :is(.network-sidebar-studio,.network-sidebar-messages,.network-sidebar-settings){display:none!important}}

/* Desktop Network navigation is permanently expanded. */
@media(min-width:761px){.network-sidebar-page{--network-sidebar-width:208px!important}#network-sidebar-toggle,#network-sidebar-open{display:none!important}}
/* The selection moves to the next item before its page opens. */
#network-sidebar>nav.has-selection-indicator{position:relative;isolation:isolate}
.network-sidebar-selection{position:absolute;z-index:-1;box-sizing:border-box;pointer-events:none;border:1px solid var(--line,#27443e);background:color-mix(in srgb,var(--green,#7bf4cf) 10%,transparent)}
.network-sidebar-selection[hidden]{display:none}
.network-sidebar-selection.studio-selection{background:color-mix(in srgb,#38a9ff 10%,transparent)}
#network-sidebar>nav.has-selection-indicator .network-sidebar-link.selected{background:transparent;border-color:transparent}

/* Desktop page bounds begin beside the sidebar, including all backgrounds and children. */
@media(min-width:761px){
 .network-sidebar-page :is(.site-shell,.news-shell,.community-page,.platform-shell,.messages-shell){margin-left:var(--network-sidebar-width)!important;margin-right:0!important;width:calc(100% - var(--network-sidebar-width))!important;max-width:none!important;min-width:0;padding-left:0!important}
}
