.copy-button-base[data-astro-cid-uearuesf]{position:absolute;inset-block-start:var(--padding);inset-inline-end:var(--padding);display:inline-flex;align-items:center;gap:.2rem;padding:0;font-weight:400;border:var(--border);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch,var(--surface) 82%,transparent);transition:border-color .18s ease,background-color .18s ease,color .18s ease;.icon{display:inline-flex}[data-icon=copied]{display:none}&[data-copied=true]{[data-icon=copied]{display:inline-flex}}&:hover,&[data-copied=true]{border-color:color-mix(in oklch,var(--brand-orange) 65%,var(--border));background:color-mix(in oklch,var(--brand-orange) 18%,var(--surface))}}.copy-button-icon-only[data-astro-cid-uearuesf]{border:none;background:transparent;color:var(--text);@media(width<=37.5rem){background-color:var(--brand-orange);color:var(--on-brand-orange);padding:.25rem}&:hover,&:focus-visible{background:transparent;color:var(--brand-orange)}}.copy-button-anchor[data-astro-cid-uearuesf]{anchor-name:--copy-button-anchor}.copy-button-share[data-astro-cid-uearuesf]{[data-icon=share]{display:inline-flex}&[data-copied=true]{color:var(--brand-orange)}}.copy-feedback[data-astro-cid-uearuesf]{position-anchor:--copy-button-anchor;position:absolute;inset-block-start:anchor(center);inset-inline-start:anchor(left);margin:0;padding:var(--padding);max-inline-size:none;color:var(--text);text-align:center;border:var(--border-popover);border-radius:var(--radius);corner-shape:var(--corner-shape);background:var(--surface);box-shadow:var(--box-shadow);white-space:nowrap;opacity:0;transform:translate(calc(-100% - .65rem),-50%) scale(0);transform-origin:center right;transition:opacity .2s ease-in-out,transform .2s ease-in-out,overlay .2s ease-in-out allow-discrete,display .2s ease-in-out allow-discrete;&:popover-open{opacity:1;transform:translate(calc(-100% - .65rem),-50%) scale(1);@starting-style{opacity:0;transform:translate(calc(-100% - .65rem),-50%) scale(0)}}}.code-panel[data-astro-cid-cfnrb6pp]{--panel-content-height: 0px;--panel-content-max-height: min(28rem, 52dvh);position:relative;display:flex;align-self:start;gap:var(--gap-sm);min-block-size:0;padding-block-end:calc(var(--panel-content-height) + var(--padding-sm));.snippet{order:var(--snippet-order);&[open]{summary{border-color:color-mix(in oklch,var(--brand-orange) 58%,var(--border));background:color-mix(in oklch,var(--brand-orange) 14%,var(--surface-strong));pointer-events:none}&::details-content{opacity:1;block-size:var(--panel-content-height)}}&::details-content{position:absolute;inset-block-start:calc(100% - var(--panel-content-height));inset-inline-start:0;inline-size:100%}summary{user-select:none;display:flex;align-items:center;justify-content:center;padding:var(--padding-sm) var(--padding);border:var(--border);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch,var(--surface-strong) 90%,transparent);transition:color .18s ease,border-color .18s ease,background-color .18s ease;&::marker{content:""}&:hover,&:focus-visible{color:var(--text);border-color:color-mix(in oklch,var(--brand-orange) 45%,var(--border))}}.content{position:relative;@media(width>1000px){block-size:100%;min-block-size:0}&:hover .copy-button{display:inline-flex}.copy-button{display:none}[data-code-content]{@media(width>1000px){block-size:100%;min-block-size:0}}.lab-code-panel__pre{scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;margin:0;max-block-size:var(--panel-content-max-height);padding:var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);border:var(--border);overflow:auto;font-size:1rem;line-height:1.55;color:light-dark(oklch(.26 .03 250),oklch(.93 .02 110));background:linear-gradient(180deg,light-dark(oklch(.98 .01 95 / .96),oklch(.24 .01 95 / .98)),light-dark(oklch(.95 .01 95 / .94),oklch(.2 .01 95 / .98)));@media(width>1000px){box-sizing:border-box;block-size:100%}}code{display:block;font-family:var(--font-mono);white-space:pre}.tok-selector{color:light-dark(oklch(.48 .11 85),oklch(.82 .1 92))}.tok-function{color:light-dark(oklch(.58 .13 55),oklch(.82 .13 62))}.tok-property{color:light-dark(oklch(.56 .12 235),oklch(.8 .11 230))}.tok-tag{color:light-dark(oklch(.52 .1 70),oklch(.84 .08 88))}.tok-attribute{color:light-dark(oklch(.58 .13 40),oklch(.8 .13 38))}.tok-string,.tok-color{color:light-dark(oklch(.59 .13 35),oklch(.79 .14 45))}.tok-property{text-shadow:0 0 .02em currentColor}.tok-number{color:light-dark(oklch(.43 .07 150),oklch(.82 .06 145))}.tok-comment{color:light-dark(oklch(.5 .09 155),oklch(.72 .11 152))}.tok-keyword,.tok-value{color:light-dark(oklch(.43 .08 145),oklch(.84 .06 140))}.tok-punctuation{color:light-dark(oklch(.61 .03 250),oklch(.72 .04 230))}}}}.controls[data-astro-cid-l2yidunt]{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;scrollbar-gutter:stable;position:relative;.reset-button{display:flex;position:absolute;inset-inline-end:var(--gap);inset-block-start:var(--gap);background-color:transparent;border:none;padding:0;&.clicked{animation:clicked .3s linear forwards}&:hover{color:var(--brand-orange)}}.group{gap:calc(var(--gap) / 2)}[data-radio-group],select{margin-block-end:var(--gap)}label:has(+[data-control=unit]){font-size:1.1rem;font-weight:600}}@keyframes clicked{to{transform:rotate(-360deg);color:var(--brand-orange)}}.controls[data-astro-cid-l2yidunt]>[data-radio-group=properties],.controls[data-astro-cid-l2yidunt]>[data-controls-group=axis],.controls[data-astro-cid-l2yidunt]>[data-controls-group=individual],.controls[data-astro-cid-l2yidunt]>[data-radio-group=textDirection]{display:none}.controls[data-astro-cid-l2yidunt]>[data-radio-group=mode]:has(input:checked[value=individual],input:checked[value=axis])~[data-radio-group=properties]{display:block}.controls[data-astro-cid-l2yidunt]>[data-radio-group=mode]:has(input:checked[value=individual],input:checked[value=axis])~[data-controls-group=all]{display:none}.controls[data-astro-cid-l2yidunt]>[data-radio-group=mode]:has(input:checked[value=individual],input:checked[value=axis])~[data-radio-group=properties]:has(input:checked[value=logical])~[data-radio-group=textDirection]{display:block}.controls[data-astro-cid-l2yidunt]>[data-radio-group=mode]:has(input:checked[value=individual])~[data-controls-group=all]{display:none}.controls[data-astro-cid-l2yidunt]>[data-radio-group=mode]:has(input:checked[value=individual])~[data-controls-group=individual]{display:grid}.controls[data-astro-cid-l2yidunt]>[data-radio-group=mode]:has(input:checked[value=axis])~[data-controls-group=axis]{display:grid}.lab-field{display:grid;gap:calc(var(--gap) / 2);.header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap);output{inline-size:6ch;text-align:end}}.header--single{justify-content:start}label,p{font-weight:400}output{color:var(--brand-orange);font-weight:700}select{max-inline-size:max-content}}.lab-shell[data-astro-cid-laftc2av]{min-block-size:100%;block-size:100%;display:grid;grid-template-rows:minmax(0,auto) minmax(0,1fr);padding:var(--padding);border-block:var(--border);border-inline-start:var(--border);border-start-start-radius:var(--radius);border-end-start-radius:var(--radius);corner-shape:var(--corner-shape);background:linear-gradient(145deg,color-mix(in oklch,var(--halo-primary) 48%,transparent),transparent 42%),linear-gradient(325deg,color-mix(in oklch,var(--halo-secondary) 42%,transparent),transparent 48%),var(--bg-elevated);@media(width<=87.5rem){border:var(--border);border-radius:var(--radius)}>:not(:last-child){margin-block-end:var(--gap)}h1{font-size:clamp(1.563rem,.938rem + 1.667vw,2.188rem)}:global(.copy-url-button){position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.grid{min-block-size:0;block-size:100%;display:grid;grid-template-columns:28.5rem 1fr;grid-template-rows:minmax(0,1fr);gap:var(--gap-sm);@media(width<=62.5rem){grid-template-columns:1fr}.controls{padding:1rem;border-radius:var(--radius);corner-shape:var(--corner-shape);border:var(--border);background:color-mix(in oklch,var(--surface-strong) 90%,transparent)}.stack{display:grid;grid-template-rows:minmax(0,auto) minmax(0,1fr);min-block-size:0;>:not(:last-child){margin-block-end:var(--gap-sm)}}baseline-status{max-inline-size:100%;padding:var(--padding);border:var(--border);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch,var(--surface-strong) 90%,transparent)}.preview-code{display:grid;grid-template-rows:1fr auto;gap:var(--gap-sm);min-block-size:0;overflow:clip}.preview{position:relative;display:grid;place-items:center;min-block-size:min(16.25rem,100%);min-inline-size:0;padding:var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);border:var(--border);background:radial-gradient(circle at top left,color-mix(in oklch,var(--brand-orange) 34%,transparent),transparent 42%),radial-gradient(circle at bottom right,color-mix(in oklch,var(--brand-blue) 30%,transparent),transparent 38%),color-mix(in oklch,var(--surface-strong) 92%,transparent)}.copy-url-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}}}@keyframes astroFadeInOut{0%{opacity:1}to{opacity:0}}@keyframes astroFadeIn{0%{opacity:0;mix-blend-mode:plus-lighter}to{opacity:1;mix-blend-mode:plus-lighter}}@keyframes astroFadeOut{0%{opacity:1;mix-blend-mode:plus-lighter}to{opacity:0;mix-blend-mode:plus-lighter}}@keyframes astroSlideFromRight{0%{transform:translate(100%)}}@keyframes astroSlideFromLeft{0%{transform:translate(-100%)}}@keyframes astroSlideToRight{to{transform:translate(100%)}}@keyframes astroSlideToLeft{to{transform:translate(-100%)}}@media(prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}[data-astro-transition-scope]{animation:none!important}}