@scope(.circles){:scope{--main-circle-color:var(--secondary-400);--small-circle-color:var(--triad-2);--main-circle-size:1.2rem;--main-circle-radius:calc(var(--main-circle-size)/2);--small-circle-size:calc(var(--main-circle-size)/2);--small-circle-radius:calc(var(--small-circle-size)/2);--orbit-radius:calc(var(--main-circle-radius) - var(--small-circle-radius));--border-radius:50%;--icon-fallback-display:block;--icon-animated-display:none;aspect-ratio:1;transform-origin:50%;will-change:transform;width:var(--main-circle-size);height:var(--main-circle-size);transition:transform .5s;position:relative;transform:rotate(0)translateZ(0)}@supports (--test:sibling-index()){:scope{--icon-fallback-display:none;--icon-animated-display:block}}.link-logo:hover :scope{--border-radius:0%;transform:rotate(90deg)}@container (min-width:9rem){:scope{--main-circle-size:2.8rem}}.circle{--hue:calc(sibling-index()*50);--angle:calc((sibling-index() - 1)*60deg);--orbit-y:calc(var(--orbit-radius)*sin(var(--angle)));--orbit-x:calc(var(--orbit-radius)*cos(var(--angle)));--center-offset:calc(50% - var(--small-circle-radius));aspect-ratio:1;background-color:oklch(100% 100% var(--hue)/.5);border-radius:var(--border-radius);inset:0;left:calc(var(--center-offset) + var(--orbit-x));top:calc(var(--center-offset) - var(--orbit-y));transform-origin:50%;width:var(--small-circle-size);will-change:border-radius;transition:border-radius .5s;position:absolute}svg{max-width:45px;max-height:45px}}
@scope(box-grid){.meta{align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-base);flex-wrap:wrap;justify-content:space-between;display:flex}.tags{gap:var(--spacing-base);flex-wrap:wrap;display:flex}.tag{background-color:var(--light-200);color:var(--dark-500);font-size:var(--text-xs);font-weight:var(--text-weight-medium);height:var(--round-up);width:var(--round-up);justify-content:center;align-items:center;display:flex}.title-link{color:inherit;text-decoration:none}}
@scope(.snippet-text-align-a){:scope:scope{background-image:var(--horizontal-lines);min-height:var(--spacing-lg);padding:var(--spacing-md);width:max-content}h1{--padding:calc(var(--spacing-md) - 1cap);color:var(--dark-400);margin:0;padding-block-start:var(--padding);display:inline-block;position:relative}h1:before{content:"";height:var(--padding);inset:var(--padding)0 auto 0;background-color:#9dd16380;background-color:lab(78.3551% -30.6502 47.915/.5);margin-block-start:calc(-1*var(--padding));display:block;position:absolute}}
@scope(.snippet-text-align-b){:scope:scope:has(input:checked) *{text-box:unset}.wrapper{background-image:repeating-linear-gradient(0deg,transparent 0,transparent calc(1rem - 1px),var(--light-300)calc(1rem - 1px),var(--light-300)1rem);column-gap:var(--spacing-lg);height:var(--round-up);max-width:100%;min-height:var(--spacing-lg);row-gap:var(--spacing-md);background-position:0 -1px;background-size:100% 1rem;grid-template-rows:auto auto;grid-template-columns:repeat(2,minmax(5rem,5rem));display:grid}@media screen and (min-width:480px){.wrapper{grid-template-columns:1fr 1fr}}.container-row{padding-top:var(--spacing-lg);grid-column:1/-1;justify-content:end;display:flex}.checkbox-container{color:var(--dark-500);cursor:pointer;align-items:center;gap:var(--spacing-sm);font-size:.875rem;display:flex}.checkbox-container input[type=checkbox]{cursor:pointer;width:1rem;height:1rem}h3,p{background-color:#ede09133;background-color:lab(88.9652% -3.50812 40.252/.2)}h3{--padding:calc(1rem - 1cap);color:var(--dark-500);margin-block:0 2rem;padding-block-start:var(--padding);line-height:1.7;position:relative}p{color:var(--dark-600);padding-block-start:calc(var(--spacing-base) - 1cap);margin:0;padding:0;line-height:2;display:block}}
@scope(baseline-status){:scope{--baseline-icon-limited-front:#f09409;--baseline-icon-limited-back:#c6c6c6;--baseline-icon-widely-front:#1ea446;--baseline-icon-widely-back:#c4eed0;--baseline-icon-newly-front:#1b6ef3;--baseline-icon-newly-back:#a8c7fa;--baseline-icon-no_data:#909090;width:auto;margin-bottom:var(--spacing-md)}@media screen and (min-width:768px){:scope{width:var(--round-up)}}details{overflow:hidden}summary{background:var(--light-100);cursor:pointer;padding:var(--spacing-base);align-content:center;gap:var(--spacing-base);background-color:var(--light-200);grid-template-columns:1fr;width:100%;height:min-content;list-style:none;display:grid}@media screen and (min-width:768px){summary{gap:var(--spacing-xl);grid-template-columns:1fr auto;height:3rem}}summary::-webkit-details-marker{display:none}.title{font-size:var(--font-scaled-base);grid-template-columns:max-content;align-items:center;display:grid}.title strong{font-weight:var(--text-weight-semibold)}.feature-meta{align-items:center;gap:var(--spacing-base);flex-direction:column;justify-content:start;display:flex}@media screen and (min-width:768px){.feature-meta{flex-direction:row}}.feature-name{margin:unset}.baseline-badge{background:var(--badge-bg,#0969da);color:var(--light-100);font-size:var(--font-scaled-base);font-weight:var(--text-weight-medium);padding:4px 6px}.content{background-color:var(--light-100);background-image:paint(grid);height:var(--round-up);padding-block:var(--spacing-md)var(--spacing-xl);padding-inline:var(--spacing-lg)}.baseline-status-browsers{--icon-size:1.5rem;gap:var(--spacing-base);height:min-content;margin:auto 0 auto auto;display:none}.baseline-status-browsers svg{width:var(--icon-size);height:auto}.baseline-status-browsers svg[aria-label=Not\ supported]{color:red}.baseline-status-browsers svg[aria-label=Supported]{color:green}.baseline-status-browsers svg[aria-label=Unknown]{color:#76736d;max-height:var(--icon-size)}.browser-icon{align-items:center;gap:4px;font-size:0;display:flex}.support-available{color:var(--baseline-icon-widely-front,#1ea446)}.support-unavailable{color:var(--baseline-icon-limited-front,#f09409)}.support-no_data{color:var(--baseline-icon-no_data,#909090)}:scope[data-status=newly]{--badge-bg:#1b6ef3}:scope[data-status=limited]{--badge-bg:#f09409}:scope[data-status=widely]{--badge-bg:#1ea446}}
@scope(.cards-grid){:scope{gap:var(--spacing-base);grid-column:content;grid-auto-rows:min-content;grid-template-columns:subgrid;display:grid}@media screen and (min-width:1480px){:scope box-grid{--grid-column:span 3}}}
@scope(box-grid){.select-wrap{background:var(--dark-500);min-width:var(--round-up);grid-template-columns:auto 1fr;align-items:center;display:grid}.select-label{color:#fff;justify-content:center;align-items:center;width:max-content;min-width:4rem;height:max-content;min-height:2rem;display:flex}.select{appearance:none;background-image:none;background:var(--light-100);border:1px solid var(--light-300);box-sizing:border-box;color:var(--dark-500);font-size:var(--text-sm);border-radius:0;outline:none;height:2rem;padding:.5rem .75rem;line-height:.8;display:flex}@supports (appearance:base-select){.select{appearance:base-select}}}
@scope(main){:scope{row-gap:var(--spacing-base)}.filter-header{text-align:center;grid-column:content}.filters-with-output{grid-column:content;grid-auto-rows:min-content;grid-template-columns:subgrid;row-gap:var(--spacing-lg);display:grid}.filters-with-output box-grid[auto-columns]{--column-gap:var(--spacing-md);--columns:repeat(auto-fit,minmax(5rem,12rem));--direction:row}.posts-grid{grid-template-columns:subgrid;row-gap:var(--spacing-md);grid-column:content;display:grid}.posts-grid box-grid{--grid-offset:left}@media screen and (min-width:1480px){.posts-grid box-grid{--grid-column:span 3}}}
@scope(.link-list){:scope{row-gap:var(--spacing-md);grid-column:span 2;display:grid}.link-list-heading h4{padding:0!important}.link-list-items{row-gap:var(--spacing-base);column-gap:var(--spacing-md);flex-direction:column;grid-column:span 2;grid-template-columns:7rem 1fr;margin:0;padding:0;list-style:none;display:grid}.link-list-items li{display:flex}.link-list-item{color:var(--light-300);font-size:var(--text-sm);outline-offset:.25rem;padding-block-start:calc(1rem - 1cap);padding-bottom:var(--spacing-base);-webkit-text-decoration-color:var(--light-500);text-decoration-color:var(--light-500);-webkit-text-decoration:underline .1em var(--secondary-500);text-decoration:underline .1em var(--secondary-500);text-underline-offset:calc(var(--spacing-base) - .1em);transition:all .2s ease-in-out;display:inline-block}.link-list-item:hover{color:var(--primary-100);text-decoration:underline}}
@scope(.logo-main){:scope{--morph-duration:.4s;--morph-rotation-duration:.5s;--morph-delay-step:50ms;--morph-easing:cubic-bezier(.4,0,.2,1);background-color:var(--secondary-700);z-index:0;grid-area:full/logo;place-content:center;align-items:center;display:grid;container:logo/inline-size}@media screen and (min-width:768px){:scope{--layout:1fr;justify-content:start}}.link-logo{align-items:center;gap:calc(var(--spacing-sm)*1.5);height:max-content;margin:unset;outline-offset:.25rem;padding-inline:var(--spacing-base);-webkit-user-select:none;user-select:none;width:min-content;text-decoration:none;display:flex}.logo-text{--font-size:var(--text-sm);color:var(--light-100);font-family:var(--font-family-heading);font-size:var(--font-size);font-variation-settings:"opsz" var(--font-opsz-text);font-weight:var(--text-weight-bold);letter-spacing:.1rem;text-transform:uppercase;display:flex}.morphing-logo{transition:transform var(--morph-rotation-duration)ease;will-change:transform;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform:translateZ(0)}.morph-shape{transition:rx var(--morph-duration)var(--morph-easing),ry var(--morph-duration)var(--morph-easing),transform var(--morph-duration)var(--morph-easing);transform-origin:50%;will-change:rx,ry,transform;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}.link-logo:hover .morph-shape{rx:0;ry:0;transform:translateZ(0)scale(1)}.link-logo{perspective:1000px;contain:layout style paint}.shape-1{transition-delay:calc(var(--morph-delay-step)*0)}.shape-2{transition-delay:calc(var(--morph-delay-step)*1)}.shape-3{transition-delay:calc(var(--morph-delay-step)*2)}.shape-4{transition-delay:calc(var(--morph-delay-step)*3)}.shape-5{transition-delay:calc(var(--morph-delay-step)*4)}.shape-6{transition-delay:calc(var(--morph-delay-step)*5)}}
@scope(.footer){:scope:scope{--grid-vertical-color:oklch(from var(--light-200)l c h/.08);--grid-horizontal-color:oklch(from var(--light-200)l c h/.08);background:paint(grid)var(--secondary-700);grid-area:footer/full;grid-auto-columns:auto;grid-auto-flow:dense;grid-template-columns:subgrid;padding-block:var(--spacing-xl);row-gap:var(--spacing-xxl);view-transition-name:footer;background-color:var(--secondary-700);background-image:var(--grid-light-pattern);background-size:var(--grid-light-bg-size);background-position:var(--grid-light-bg-position);display:grid}.footer-content{background-image:var(--crosshatch-white-pattern);background-size:var(--box-hero-grid-size)var(--box-hero-grid-size);padding-block:var(--spacing-lg);row-gap:var(--spacing-lg);grid-column:breakout;grid-template-columns:[nav-start logo-start]1fr[nav-end logo-end];display:grid}.footer-content logo-main{padding:1rem}@media screen and (min-width:1480px){.footer-content{grid-template-columns:subgrid [][logo-start][][logo-end nav-start][][][][nav-end];grid-template-rows:[full-start]min-content[full-end];align-items:start;column-gap:3rem}}.footer-nav{row-gap:var(--spacing-md);grid-column:nav;grid-template-columns:repeat(auto-fit,10rem);margin-inline:2rem 0;display:grid}@media screen and (min-width:1480px){.footer-nav{grid-template-columns:subgrid;margin-inline:unset}}.copyright{text-align:center;grid-column:3/-3;justify-self:center;max-width:max-content}}
@scope(.header){:scope{--grid-vertical-color:oklch(from var(--light-200)l c h/.08);--grid-horizontal-color:oklch(from var(--light-200)l c h/.08);--grid-light-color:var(--light-100);--grid-light-opacity:.4;view-transition-name:header;z-index:1;background-color:var(--secondary-700);background-image:var(--grid-light-pattern);background-size:var(--grid-light-bg-size);background-position:var(--grid-light-bg-position);grid-area:header/full;grid-template-rows:1fr 1fr;grid-template-columns:[logo]1fr[button-toggle]4rem;display:grid;position:sticky;top:0}:scope:before{content:"";pointer-events:none;z-index:0;background-image:var(--crosshatch-white-pattern);background-size:var(--box-hero-grid-size)var(--box-hero-grid-size);grid-area:full/breakout;width:100%;height:100%;position:absolute}@media screen and (min-width:480px){:scope{grid-template-rows:1fr;grid-template-columns:[logo]1fr[button-toggle]minmax(6rem,auto);row-gap:0;height:auto}}@media screen and (min-width:768px){:scope{height:4rem;height:var(--round-up);grid-template-columns:[logo]1fr[button-toggle]6rem;row-gap:0;overflow:visible}}@media screen and (min-width:1480px){:scope{grid-template-rows:[full-start]1rem[centre-start]2rem[centre-end]1rem[full-end];grid-template-columns:subgrid [][][logo-start][logo-end nav-start][][][][][][nav-end][]}}}
@scope(code-block){:scope{margin-block:var(--spacing-base)var(--spacing-md);width:100%;overflow:hidden}pre{background-color:var(--light-200);color:var(--dark-500);padding:var(--spacing-lg);width:100%;max-width:100%;margin:0;overflow:auto hidden}code{min-width:38rem;font-family:var(--font-monaspace);font-palette:--github;font-size:var(--font-size-base);white-space:pre;background-color:#0000;padding:0;line-height:1.8;display:block}}
@scope(button-toggle){:scope{--background-color:var(--secondary-500);--button-toggle-color:var(--light-100);--padding-right:calc(var(--spacing-md) + var(--scrollbar-width));anchor-name:--buttonToggle;background-color:var(--background-color);color:var(--button-toggle-color);cursor:pointer;font-size:var(--font-scaled-lg);border:none;grid-area:full/button-toggle;justify-content:center;align-items:center;height:4rem;transition:background-color .2s,color .2s;display:flex}:scope button{color:var(--light-100);cursor:pointer;padding-block:var(--spacing-base);padding-inline:var(--spacing-md)var(--padding-right);background:0 0;border:none;outline:none;justify-content:center;width:100%;display:flex}:scope:is(:hover,:active){--background-color:var(--secondary-600);--button-toggle-color:var(--secondary-300)}@media screen and (min-width:1480px){:scope{display:none}}}
@scope(page-layout){:scope{--col-width:21rem;--grid-horizontal-color:#b4b4b499;--grid-offset:centre;--grid-vertical-color:#c8c8c899;--repeat:1;--root-grid-size:16px;--even-odd:even;background-image:paint(grid),var(--grain-uri);row-gap:var(--spacing-base);grid-template-rows:[header]min-content[main]1fr[double-col]0[footer]min-content;grid-template-columns:[full-start]minmax(0,1fr)[breakout-start]0 [content-start]repeat(var(--repeat),var(--col-width))[content-end]0 [breakout-end]minmax(0,1fr)[full-end];background-image:var(--grid-centered-pattern),var(--grain-uri);background-size:var(--grid-centered-bg-size);background-position:top;min-height:100dvh;display:grid}@media screen and (min-width:480px){:scope{--repeat:2;--col-width:12rem;grid-template-columns:[full-start]minmax(0,1fr)[breakout-start]0 [content-start]repeat(var(--repeat),var(--col-width))[content-end]0 [breakout-end]minmax(0,1fr)[full-end];column-gap:var(--spacing-base);row-gap:var(--spacing-xl)}}@media screen and (min-width:768px){:scope{--repeat:4;--col-width:10rem}}@media screen and (min-width:1280px){:scope{--repeat:4;--col-width:15rem}}@media screen and (min-width:1480px){:scope{--repeat:6;--col-width:10rem}}}
@scope(grid-master){:scope{--col-width:21rem;--grid-horizontal-color:#b4b4b499;--grid-offset:centre;--grid-vertical-color:#c8c8c899;--repeat:1;--root-grid-size:16px;--even-odd:even;background-image:paint(grid),var(--grain-uri);row-gap:var(--spacing-base);grid-template-rows:[header]min-content[main]1fr[double-col]0[footer]min-content;grid-template-columns:[full-start]minmax(0,1fr)[breakout-start]0 [content-start]repeat(var(--repeat),var(--col-width))[content-end]0 [breakout-end]minmax(0,1fr)[full-end];background-image:var(--grid-centered-pattern),var(--grain-uri);background-size:var(--grid-centered-bg-size);background-position:top;min-height:100dvh;display:grid}@media screen and (min-width:480px){:scope{--repeat:2;--col-width:12rem;grid-template-columns:[full-start]minmax(0,1fr)[breakout-start]0 [content-start]repeat(var(--repeat),var(--col-width))[content-end]0 [breakout-end]minmax(0,1fr)[full-end];column-gap:var(--spacing-base);row-gap:var(--spacing-xl)}}@media screen and (min-width:768px){:scope{--repeat:4;--col-width:10rem}}@media screen and (min-width:1280px){:scope{--repeat:4;--col-width:15rem}}@media screen and (min-width:1480px){:scope{--repeat:6;--col-width:10rem}}}
@scope(snippet-block){:scope{background-color:var(--light-100);height:var(--round-up);margin-block:var(--spacing-base)var(--spacing-md);max-width:100%;padding:var(--spacing-lg)0;grid-column:1/-1;overflow:auto hidden}}
@scope(.nav){:scope{background-color:var(--nav-background,var(--light-100));display:var(--nav-display,grid);gap:var(--spacing-base);grid-auto-flow:var(--nav-auto-flow,row);max-width:max-content;padding:var(--nav-padding,var(--spacing-md));position-anchor:var(--nav-position-anchor,--buttonToggle);position:var(--nav-position,absolute);right:var(--nav-right,anchor(right));top:var(--nav-top,anchor(bottom));z-index:1;grid-area:full/nav;margin:0 0 0 auto}@media screen and not (min-width:1480px){:scope{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s ease-in-out;transform:translate(0)}@starting-style{:scope{opacity:0;visibility:hidden;transform:translate(-10px)}}:scope[hidden]{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-10px)}}@media screen and (min-width:1480px){:scope[hidden]{--nav-display:none}}@media screen and (min-width:1480px){:scope{--nav-display:grid;--nav-background:transparent;--nav-padding:var(--spacing-base);--nav-position:static;--nav-position-anchor:unset;--nav-right:unset;--nav-top:unset;--nav-auto-flow:column}}.nav-item{--background-colour:var(--secondary-700);--colour:var(--light-100);--transition:background-color .3s ease-in-out,color .3s ease-in-out;background-color:var(--background-colour);color:var(--colour);font-size:var(--text-base);text-align:center;transition:var(--transition);min-width:7rem;padding:var(--padding,1rem 2rem);justify-content:center;align-items:center;gap:1rem;text-decoration:none;display:flex}@media screen and (min-width:1480px){.nav-item{--padding:0}}.nav-item svg{width:1.1rem;height:1.1rem}.nav-item.active{--background-colour:var(--secondary-900);--colour:var(--primary-300)}.nav-item:hover{--background-colour:var(--secondary-800);--colour:var(--light-100)}}
@scope(.cards-grid){:scope{gap:var(--spacing-base);grid-column:content;grid-auto-rows:min-content;grid-template-columns:subgrid;display:grid}@media screen and (min-width:1480px){:scope box-grid{--grid-column:span 3}}}
@scope(main){:scope{row-gap:var(--spacing-base)}.filter-header{text-align:center;grid-column:content}.filters-with-output{grid-column:content;grid-auto-rows:min-content;grid-template-columns:subgrid;row-gap:var(--spacing-lg);display:grid}.filters-with-output box-grid[auto-columns]{--column-gap:var(--spacing-md);--columns:repeat(auto-fit,minmax(5rem,12rem));--direction:row}.posts-grid{grid-template-columns:subgrid;row-gap:var(--spacing-md);grid-column:content;display:grid}.posts-grid box-grid{--grid-offset:left}@media screen and (min-width:1480px){.posts-grid box-grid{--grid-column:span 3}}}
@scope(box-grid){.meta{align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-base);flex-wrap:wrap;justify-content:space-between;display:flex}.tags{gap:var(--spacing-base);flex-wrap:wrap;display:flex}.tag{background-color:var(--light-200);color:var(--dark-500);font-size:var(--text-xs);font-weight:var(--text-weight-medium);height:var(--round-up);width:var(--round-up);justify-content:center;align-items:center;display:flex}.title-link{color:inherit;text-decoration:none}}
@scope(box-grid){.select-wrap{background:var(--dark-500);min-width:var(--round-up);grid-template-columns:auto 1fr;align-items:center;display:grid}.select-label{color:#fff;justify-content:center;align-items:center;width:max-content;min-width:4rem;height:max-content;min-height:2rem;display:flex}.select{appearance:none;background-image:none;background:var(--light-100);border:1px solid var(--light-300);box-sizing:border-box;color:var(--dark-500);font-size:var(--text-sm);border-radius:0;outline:none;height:2rem;padding:.5rem .75rem;line-height:.8;display:flex}@supports (appearance:base-select){.select{appearance:base-select}}}
@scope(.circles){:scope{--main-circle-color:var(--secondary-400);--small-circle-color:var(--triad-2);--main-circle-size:1.2rem;--main-circle-radius:calc(var(--main-circle-size)/2);--small-circle-size:calc(var(--main-circle-size)/2);--small-circle-radius:calc(var(--small-circle-size)/2);--orbit-radius:calc(var(--main-circle-radius) - var(--small-circle-radius));--border-radius:50%;--icon-fallback-display:block;--icon-animated-display:none;aspect-ratio:1;transform-origin:50%;will-change:transform;width:var(--main-circle-size);height:var(--main-circle-size);transition:transform .5s;position:relative;transform:rotate(0)translateZ(0)}@supports (--test:sibling-index()){:scope{--icon-fallback-display:none;--icon-animated-display:block}}.link-logo:hover :scope{--border-radius:0%;transform:rotate(90deg)}@container (min-width:9rem){:scope{--main-circle-size:2.8rem}}.circle{--hue:calc(sibling-index()*50);--angle:calc((sibling-index() - 1)*60deg);--orbit-y:calc(var(--orbit-radius)*sin(var(--angle)));--orbit-x:calc(var(--orbit-radius)*cos(var(--angle)));--center-offset:calc(50% - var(--small-circle-radius));aspect-ratio:1;background-color:oklch(100% 100% var(--hue)/.5);border-radius:var(--border-radius);inset:0;left:calc(var(--center-offset) + var(--orbit-x));top:calc(var(--center-offset) - var(--orbit-y));transform-origin:50%;width:var(--small-circle-size);will-change:border-radius;transition:border-radius .5s;position:absolute}svg{max-width:45px;max-height:45px}}
@scope(.snippet-text-align-a){:scope:scope{background-image:var(--horizontal-lines);min-height:var(--spacing-lg);padding:var(--spacing-md);width:max-content}h1{--padding:calc(var(--spacing-md) - 1cap);color:var(--dark-400);margin:0;padding-block-start:var(--padding);display:inline-block;position:relative}h1:before{content:"";height:var(--padding);inset:var(--padding)0 auto 0;background-color:#9dd16380;background-color:lab(78.3551% -30.6502 47.915/.5);margin-block-start:calc(-1*var(--padding));display:block;position:absolute}}
@scope(.snippet-text-align-b){:scope:scope:has(input:checked) *{text-box:unset}.wrapper{background-image:repeating-linear-gradient(0deg,transparent 0,transparent calc(1rem - 1px),var(--light-300)calc(1rem - 1px),var(--light-300)1rem);column-gap:var(--spacing-lg);height:var(--round-up);max-width:100%;min-height:var(--spacing-lg);row-gap:var(--spacing-md);background-position:0 -1px;background-size:100% 1rem;grid-template-rows:auto auto;grid-template-columns:repeat(2,minmax(5rem,5rem));display:grid}@media screen and (min-width:480px){.wrapper{grid-template-columns:1fr 1fr}}.container-row{padding-top:var(--spacing-lg);grid-column:1/-1;justify-content:end;display:flex}.checkbox-container{color:var(--dark-500);cursor:pointer;align-items:center;gap:var(--spacing-sm);font-size:.875rem;display:flex}.checkbox-container input[type=checkbox]{cursor:pointer;width:1rem;height:1rem}h3,p{background-color:#ede09133;background-color:lab(88.9652% -3.50812 40.252/.2)}h3{--padding:calc(1rem - 1cap);color:var(--dark-500);margin-block:0 2rem;padding-block-start:var(--padding);line-height:1.7;position:relative}p{color:var(--dark-600);padding-block-start:calc(var(--spacing-base) - 1cap);margin:0;padding:0;line-height:2;display:block}}
@scope(button-toggle){:scope{--background-color:var(--secondary-500);--button-toggle-color:var(--light-100);--padding-right:calc(var(--spacing-md) + var(--scrollbar-width));anchor-name:--buttonToggle;background-color:var(--background-color);color:var(--button-toggle-color);cursor:pointer;font-size:var(--font-scaled-lg);border:none;grid-area:full/button-toggle;justify-content:center;align-items:center;height:4rem;transition:background-color .2s,color .2s;display:flex}:scope button{color:var(--light-100);cursor:pointer;padding-block:var(--spacing-base);padding-inline:var(--spacing-md)var(--padding-right);background:0 0;border:none;outline:none;justify-content:center;width:100%;display:flex}:scope:is(:hover,:active){--background-color:var(--secondary-600);--button-toggle-color:var(--secondary-300)}@media screen and (min-width:1480px){:scope{display:none}}}
@scope(page-layout){:scope{--col-width:21rem;--grid-horizontal-color:#b4b4b499;--grid-offset:centre;--grid-vertical-color:#c8c8c899;--repeat:1;--root-grid-size:16px;--even-odd:even;background-image:paint(grid),var(--grain-uri);row-gap:var(--spacing-base);grid-template-rows:[header]min-content[main]1fr[double-col]0[footer]min-content;grid-template-columns:[full-start]minmax(0,1fr)[breakout-start]0 [content-start]repeat(var(--repeat),var(--col-width))[content-end]0 [breakout-end]minmax(0,1fr)[full-end];background-image:var(--grid-centered-pattern),var(--grain-uri);background-size:var(--grid-centered-bg-size);background-position:top;min-height:100dvh;display:grid}@media screen and (min-width:480px){:scope{--repeat:2;--col-width:12rem;grid-template-columns:[full-start]minmax(0,1fr)[breakout-start]0 [content-start]repeat(var(--repeat),var(--col-width))[content-end]0 [breakout-end]minmax(0,1fr)[full-end];column-gap:var(--spacing-base);row-gap:var(--spacing-xl)}}@media screen and (min-width:768px){:scope{--repeat:4;--col-width:10rem}}@media screen and (min-width:1280px){:scope{--repeat:4;--col-width:15rem}}@media screen and (min-width:1480px){:scope{--repeat:6;--col-width:10rem}}}
@scope(.header){:scope{--grid-vertical-color:oklch(from var(--light-200)l c h/.08);--grid-horizontal-color:oklch(from var(--light-200)l c h/.08);--grid-light-color:var(--light-100);--grid-light-opacity:.4;view-transition-name:header;z-index:1;background-color:var(--secondary-700);background-image:var(--grid-light-pattern);background-size:var(--grid-light-bg-size);background-position:var(--grid-light-bg-position);grid-area:header/full;grid-template-rows:1fr 1fr;grid-template-columns:[logo]1fr[button-toggle]4rem;display:grid;position:sticky;top:0}:scope:before{content:"";pointer-events:none;z-index:0;background-image:var(--crosshatch-white-pattern);background-size:var(--box-hero-grid-size)var(--box-hero-grid-size);grid-area:full/breakout;width:100%;height:100%;position:absolute}@media screen and (min-width:480px){:scope{grid-template-rows:1fr;grid-template-columns:[logo]1fr[button-toggle]minmax(6rem,auto);row-gap:0;height:auto}}@media screen and (min-width:768px){:scope{height:4rem;height:var(--round-up);grid-template-columns:[logo]1fr[button-toggle]6rem;row-gap:0;overflow:visible}}@media screen and (min-width:1480px){:scope{grid-template-rows:[full-start]1rem[centre-start]2rem[centre-end]1rem[full-end];grid-template-columns:subgrid [][][logo-start][logo-end nav-start][][][][][][nav-end][]}}}
@scope(.nav){:scope{background-color:var(--nav-background,var(--light-100));display:var(--nav-display,grid);gap:var(--spacing-base);grid-auto-flow:var(--nav-auto-flow,row);max-width:max-content;padding:var(--nav-padding,var(--spacing-md));position-anchor:var(--nav-position-anchor,--buttonToggle);position:var(--nav-position,absolute);right:var(--nav-right,anchor(right));top:var(--nav-top,anchor(bottom));z-index:1;grid-area:full/nav;margin:0 0 0 auto}@media screen and not (min-width:1480px){:scope{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s ease-in-out;transform:translate(0)}@starting-style{:scope{opacity:0;visibility:hidden;transform:translate(-10px)}}:scope[hidden]{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-10px)}}@media screen and (min-width:1480px){:scope[hidden]{--nav-display:none}}@media screen and (min-width:1480px){:scope{--nav-display:grid;--nav-background:transparent;--nav-padding:var(--spacing-base);--nav-position:static;--nav-position-anchor:unset;--nav-right:unset;--nav-top:unset;--nav-auto-flow:column}}.nav-item{--background-colour:var(--secondary-700);--colour:var(--light-100);--transition:background-color .3s ease-in-out,color .3s ease-in-out;background-color:var(--background-colour);color:var(--colour);font-size:var(--text-base);text-align:center;transition:var(--transition);min-width:7rem;padding:var(--padding,1rem 2rem);justify-content:center;align-items:center;gap:1rem;text-decoration:none;display:flex}@media screen and (min-width:1480px){.nav-item{--padding:0}}.nav-item svg{width:1.1rem;height:1.1rem}.nav-item.active{--background-colour:var(--secondary-900);--colour:var(--primary-300)}.nav-item:hover{--background-colour:var(--secondary-800);--colour:var(--light-100)}}