nav[data-astro-cid-p33bl5ka]{scroll-target-group:auto;text-align:start;& h3{font-size:var(--font-size-05);text-align:start;margin-block-end:.5em}& menu{font-size:var(--font-size-05);margin:0;padding:0;list-style-type:none}}[data-toc-selector]{& ul{font-size:var(--font-size-0);margin:0;margin-inline-start:var(--size-3);padding:0;list-style-type:none}& a{padding-block:var(--size-1);text-overflow:ellipsis;white-space:nowrap;text-decoration:none;display:block;position:relative;overflow:hidden;&:before{border-radius:var(--radius-2);content:"";block-size:80%;inline-size:2px;background-color:#0000;transition:background-color .3s;position:absolute;inset-block-start:10%;inset-inline-start:calc(-1 * var(--size-3))}&:not([aria-current=page]){color:oklch(from currentColor l c h / 75%)}&:hover{color:var(--primary)}&:target-current{color:var(--primary);font-weight:700;&:before{background-color:currentColor}}}}.local-nav[data-astro-cid-do4pxak3]{backdrop-filter:blur(3px);padding-inline:var(--size-1);padding-block:var(--size-2);grid-column:4/8;align-items:center;margin-block-end:var(--size-4);margin-inline-start:var(--size-2);display:flex;position:relative;@media (width<900px){grid-column:1/-1;margin-inline-start:0}&:before{background-color:var(--surface-elevated);border:var(--border-width) solid oklch(from var(--primary) l c h / .2);border-block-start:none;border-block-end:var(--border-width) solid oklch(from var(--text-primary) l c h / .15);box-shadow:var(--shadow-2);content:"";opacity:0;z-index:-1;border-radius:0;animation:linear both fade-bg scroll();animation-range:0 150px;position:absolute;inset:0;@media (width>=900px){inset-block:0;inset-inline-start:calc(-1 * (var(--_gap) + 200px + clamp(2rem, 18vw, 16rem)));inset-inline-end:0;mask-image:linear-gradient(90deg,#0000 0,#000 clamp(2.5rem,12vw,7rem))}}@media (width>=1140px){display:none}}@keyframes fade-bg{to{opacity:1}}.menu-button[data-astro-cid-do4pxak3]{@media (width>=900px){display:none}}.toc-button[data-astro-cid-do4pxak3]{margin-inline-start:auto}#document-page{grid-template-columns:var(--_gap) 1fr 0 minmax(auto, 100%) 0 1fr var(--_gap);max-inline-size:calc(var(--_content-lg) + var(--_page-gutters));margin:0 auto;display:grid;&:before{background:radial-gradient(100% 100% at 50% 0%, var(--primary), transparent);content:"";opacity:.3;z-index:-1;pointer-events:none;position:fixed;inset:0}& .sidebar,& .page-contents{display:none}@media (width<900px){& #main-content{grid-column:3/7;max-inline-size:100%;padding-inline:0}}@media (width>=900px){grid-template-columns:var(--_gap) 1fr 200px minmax(auto, 100%) 0 1fr var(--_gap);& .sidebar{display:block}}@media (width>=1140px){grid-template-columns:var(--_gap) 1fr 200px minmax(auto, 100%) 150px 1fr var(--_gap);& .page-contents{display:block}}& :where(.sidebar,#sidebar-drawer){& .ui-content{padding-inline:var(--size-4);& .framework-picker{margin-block-end:var(--size-4)}& hr{margin-block:var(--size-4) var(--size-5)}& nav{font-weight:500;& h3{font-size:var(--font-size-05);margin-block-end:.5em}& menu{font-size:var(--font-size-05);margin:0;padding:0;list-style-type:none;& li{& a{color:var(--text-primary);padding-block:var(--size-1);text-decoration:none;display:flex;&:not([aria-current=page]){color:oklch(from currentColor l c h / 75%)}&:hover{color:var(--primary)}&[aria-current=page]{color:var(--primary);font-weight:700}}}}}}}& .sidebar:not(#sidebar-drawer){scroll-timeline:--sidebar-scroll y;&:before,&:after{block-size:var(--size-4);content:"";opacity:0;pointer-events:none;z-index:2;display:block;position:sticky;inset-inline:0}&:before{background:radial-gradient(farthest-side at 50% 0%, color-mix(in oklch, var(--primary) 30%, oklch(from var(--text-primary) l c h / .2)), transparent);animation-name:sidebar-shadow-reveal;animation-fill-mode:both;animation-timeline:--sidebar-scroll;animation-range:0 150px;inset-block-start:0}&:after{background:radial-gradient(farthest-side at 50% 100%, color-mix(in oklch, var(--primary) 30%, oklch(from var(--text-primary) l c h / .2)), transparent);animation-name:sidebar-shadow-reveal;animation-direction:reverse;animation-fill-mode:both;animation-timeline:--sidebar-scroll;animation-range:calc(100% - 150px) 100%;inset-block-end:0}animation-name:sidebar-detect-scroll;animation-fill-mode:none;animation-timeline:--sidebar-scroll;&:before,&:after{--visibility-if-can-scroll:var(--can-scroll) visible;--visibility-if-cant-scroll:hidden;visibility:var(--visibility-if-can-scroll,var(--visibility-if-cant-scroll))}& .ui-content{padding-block:0}}& #sidebar-drawer{& .framework-picker,& hr{display:none}}& .sidebar{background-color:var(--surface-filled);border-radius:var(--border-radius);max-block-size:calc(100dvb - var(--size-10) - var(--_page-gutters));grid-area:2/3;align-self:start;position:sticky;inset-block-start:calc(var(--size-10) + var(--_gap));overflow-y:auto;& .ui-content{padding:var(--_gap)}@supports (corner-shape:squircle){border-radius:var(--radius-4);corner-shape:squircle}@media (width>=900px) and (width<1140px){max-block-size:calc(100dvb - var(--size-10) - var(--size-8) - var(--_page-gutters));inset-block-start:calc(var(--size-10) + var(--size-8) + var(--_gap))}}& #main-heading{max-inline-size:var(--_content-text);margin-block-end:var(--size-8)}& #main-content{max-inline-size:var(--_content-document);grid-area:2/4;min-inline-size:0;@media (width>=900px){padding:var(--_gap)}&>.ui-rich-text section:last-of-type>div:last-of-type{margin-block-end:0}@scope(&) to (.example-container){& :where(h2,h3,h4,h5,h6){align-items:center;gap:var(--size-2);display:flex;& .header-anchor{color:var(--primary);opacity:0;font-size:.8em;text-decoration:none;transition:opacity .2s ease-in-out;display:flex;&:after{content:"#"}&:focus-visible{opacity:1}}&:hover .header-anchor{opacity:1}}@media (width>1200px){& :where(h2){z-index:22;max-inline-size:555px;position:sticky;inset-block-start:var(--size-4);container:sticky-heading/scroll-state}}}}& .page-contents{max-block-size:calc(100dvb - var(--size-10));padding:var(--_gap) 0 var(--_gap) var(--_gap);grid-area:2/5;align-self:start;position:sticky;inset-block-start:var(--size-10);overflow-y:auto;@media (width>=900px) and (width<1140px){max-block-size:calc(100dvb - var(--size-10) - var(--size-8));inset-block-start:calc(var(--size-10) + var(--size-8))}}}@keyframes sidebar-shadow-reveal{0%{opacity:0}to{opacity:1}}@keyframes sidebar-detect-scroll{0%,to{--can-scroll: }}
