/* The shared shell is a full-width workspace, with color reserved for content and selection. */
html.holo-studio-ui{--renewal-ease:cubic-bezier(.2,.8,.2,1)}
html.holo-studio-ui body{background-color:#f8fbfc!important;letter-spacing:0}
html.holo-studio-ui body .renewal-header{background:#fffffff5!important;border-bottom:1px solid #dce8ed!important;box-shadow:0 2px 8px #3a6d7c05!important}
html.holo-studio-ui body .renewal-top{padding-block:12px!important;min-height:62px}
html.holo-studio-ui body .renewal-global{gap:6px;min-height:48px;border:0!important}
html.holo-studio-ui body .renewal-global>a{border-radius:4px 4px 0 0!important;min-height:44px;padding:8px 10px!important;font-size:12px!important;background:transparent!important;position:relative}
html.holo-studio-ui body .renewal-global>a[aria-current=page]{color:#267487!important;background:#edf9fb!important;border-bottom-color:#50b5c5!important}
html.holo-studio-ui body .renewal-bottom-nav{background:#fffffffa!important;border-top:1px solid #dce8ed!important;box-shadow:0 -3px 12px #38667706!important}
html.holo-studio-ui body .renewal-bottom-nav>a[aria-current=page]{background:#e8f7fa!important;border-radius:6px!important;color:#2c7486!important}
html.holo-studio-ui body .renewal-menu{border-radius:8px!important;border:1px solid #dce6eb!important;background:#fff!important;box-shadow:0 18px 50px #274b632b!important}
html.holo-studio-ui body .renewal-menu-links{gap:0!important}.renewal-menu-links>a{border-radius:0!important;border-bottom:1px solid #edf1f4!important;min-height:56px!important}
html.holo-studio-ui body .renewal-menu-links>a[aria-current=page]{background:#edf9fb!important;color:#28788c!important}
html.holo-studio-ui body :is(.renewal-page-heading,.song-library-heading,.section-head,.section-title){box-shadow:none!important}
html.holo-studio-ui body :is(.renewal-page-heading,.song-library-heading) h1{color:#2d4f61!important;letter-spacing:0!important}
html.holo-studio-ui body .renewal-menu button{min-width:44px;min-height:44px}
html.holo-studio-ui.holo-motion-enhanced .holo-scroll-progress{height:3px!important;background:#64bdce!important;box-shadow:none!important}
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:experience-leave .15s ease-out both}
 ::view-transition-new(root){animation:experience-arrive .22s cubic-bezier(.2,.8,.2,1) both}
 @keyframes experience-leave{to{opacity:0;translate:0 -4px}}
 @keyframes experience-arrive{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
 .renewal-global>a,.renewal-menu-links>a{transition:background-color .2s ease,color .2s ease!important}
 .renewal-global>a:hover img,.renewal-menu-links>a:hover img{animation:experience-icon .42s cubic-bezier(.2,.8,.2,1)}
 .renewal-menu[open] .renewal-menu-links>a:nth-child(-n+12){animation:experience-item .28s ease-out both}
 .renewal-menu[open] .renewal-menu-links>a:nth-child(3n+2){animation-delay:35ms}.renewal-menu[open] .renewal-menu-links>a:nth-child(3n){animation-delay:70ms}
 @keyframes experience-icon{0%{translate:0 0;rotate:0deg}40%{translate:0 -3px;rotate:-8deg}75%{translate:0 1px;rotate:3deg}100%{translate:0 0;rotate:0deg}}
 @keyframes experience-item{from{opacity:.4;translate:0 6px}to{opacity:1;translate:0 0}}
}
@media(max-width:760px){html.holo-studio-ui body .renewal-top{min-height:60px;padding-block:10px!important}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html.holo-studio-ui.holo-motion-enhanced body *,html.holo-studio-ui.holo-motion-enhanced body *::before,html.holo-studio-ui.holo-motion-enhanced body *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}