/* Liquid glass over scrolling content. Only opacity changes, so the page itself never has to lay out again. */
.mc-scroll-mark{position:absolute;top:0;left:0;width:1px;height:14px;pointer-events:none;visibility:hidden}
/* Phones and tablets keep the whole screen for content: a soft glass edge at the top, glass tabs at the bottom. */
.mc-scroll-edge{position:fixed;inset:0 0 auto;z-index:95;height:calc(60px + env(safe-area-inset-top,0px));pointer-events:none;opacity:0;transition:opacity .2s ease;background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.2) 62%,rgba(255,255,255,0));-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
html[data-page-scrolled=true] .mc-scroll-edge{opacity:1}
html{scroll-padding-top:60px;scroll-padding-bottom:96px}
html.theme-dark .mc-scroll-edge{background:linear-gradient(180deg,rgba(15,27,77,.76),rgba(15,27,77,.3) 62%,rgba(15,27,77,0))}
html body #app-shell#app-shell[data-preview-shell=true]:not([data-keyboard-open=true]) .mc-nav--mobile:not([hidden]){background:linear-gradient(165deg,rgba(255,255,255,.84),rgba(255,255,255,.68))!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-color:rgba(255,255,255,.8)!important;box-shadow:0 14px 34px rgba(5,20,92,.2),inset 0 1px 0 rgba(255,255,255,.95)!important}
html body #app-shell#app-shell[data-preview-shell=true] .mc-nav--mobile .mc-nav__item:not(.is-active){color:#33415e}
html.theme-dark body #app-shell#app-shell[data-preview-shell=true]:not([data-keyboard-open=true]) .mc-nav--mobile:not([hidden]){background:linear-gradient(165deg,rgba(38,50,112,.86),rgba(16,24,66,.8))!important;border-color:rgba(255,255,255,.16)!important;box-shadow:0 14px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16)!important}
html.theme-dark body #app-shell#app-shell[data-preview-shell=true] .mc-nav--mobile .mc-nav__item:not(.is-active){color:#c6cee8}
/* Computers have room, so the page header stays and becomes a floating glass bar once the page moves. */
@media (min-width:1024px) and (min-height:620px){
 html{scroll-padding-top:168px}
 .mc-scroll-edge{display:none}
 html body.student-experience #app-shell#app-shell#app-shell[data-preview-shell=true] .app-view>.page-header{position:sticky!important;top:64px}
 html body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before{content:"";display:block;position:absolute;inset:-8px -14px;z-index:-1;border-radius:28px;pointer-events:none;opacity:0;transition:opacity .2s ease;background:linear-gradient(165deg,rgba(255,255,255,.78),rgba(255,255,255,.5));-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 34px rgba(5,20,92,.14),inset 0 1px 0 rgba(255,255,255,.95)}
 html[data-page-scrolled=true] body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before{opacity:1}
 html[data-page-scrolled=true]:not(.theme-dark) body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view:not([data-view=focus])>.page-header>div:first-child :is(p,span,small){color:#33415e}
 html.theme-dark body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before,html body.student-experience #app-shell#app-shell[data-preview-shell=true] [data-view=focus]>.page-header::before{background:linear-gradient(165deg,rgba(38,50,112,.78),rgba(16,24,66,.68));border-color:rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16)}
}
@media (prefers-reduced-motion:reduce){.mc-scroll-edge,html body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before{transition:none}}
html:is(.mc-reduce-motion,[data-reduced-motion=true],[data-personalize-motion=true]) .mc-scroll-edge,html:is(.mc-reduce-motion,[data-reduced-motion=true],[data-personalize-motion=true]) body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before{transition:none}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .mc-scroll-edge{background:var(--mc-surface,#fff);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
 html body #app-shell#app-shell[data-preview-shell=true]:not([data-keyboard-open=true]) .mc-nav--mobile:not([hidden]),html.theme-dark body #app-shell#app-shell[data-preview-shell=true]:not([data-keyboard-open=true]) .mc-nav--mobile:not([hidden]){background:var(--mc-surface,#fff)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
 html body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before,html.theme-dark body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before{background:var(--mc-surface,#fff);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html:is([data-personalize-transparency=true],[data-personalize-contrast=true],[data-reduced-transparency=true]) .mc-scroll-edge{background:var(--mc-surface,#fff);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
html:is([data-personalize-transparency=true],[data-personalize-contrast=true],[data-reduced-transparency=true]) body #app-shell#app-shell[data-preview-shell=true]:not([data-keyboard-open=true]) .mc-nav--mobile:not([hidden]){background:var(--mc-surface,#fff)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html:is([data-personalize-transparency=true],[data-personalize-contrast=true],[data-reduced-transparency=true]) body.student-experience #app-shell#app-shell[data-preview-shell=true] .app-view>.page-header::before{background:var(--mc-surface,#fff);-webkit-backdrop-filter:none;backdrop-filter:none}