.info-button[data-astro-cid-zywk7vro]{appearance:none;border-radius:var(--radius);corner-shape:var(--corner-shape);color:var(--text);background-color:#0000;border:none;place-items:center;padding:0;display:inline-grid}.info[data-astro-cid-zywk7vro]{padding:var(--padding);border:var(--border-popover);corner-start-end-shape:var(--corner-shape);corner-end-start-shape:var(--corner-shape);corner-end-end-shape:var(--corner-shape);background:var(--surface);box-shadow:var(--shadow-full);color:var(--text);opacity:0;transform-origin:0 0;max-width:40ch;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;border-start-end-radius:var(--radius);border-end-end-radius:var(--radius);border-end-start-radius:var(--radius);margin:0;position:absolute;inset-block-start:anchor(center);inset-inline-start:calc(anchor(right) + 2px);transform:scale(0);&:popover-open{opacity:1;transform:scale(1);@starting-style{opacity:0;transform:scale(0)}}&.info--inline-start{position-area:left center;position-try-fallbacks:right center, top center, bottom center;border-radius:calc(var(--radius) - .25rem);corner-shape:var(--corner-shape);text-wrap:balance;transform-origin:100%;inline-size:min(24rem,100vi - 2rem);margin-inline-end:.55rem;position:fixed;inset:auto}}.action-hint-anchor[data-astro-cid-3r4l65p3]{z-index:10;background:var(--brand-orange);border-radius:50%;display:inline-grid;position:absolute;inset-block-start:var(--padding);inset-inline-end:var(--padding);&:has(.action-surface){background:0 0}}.copy-button-base[data-astro-cid-3r4l65p3]{align-items:center;gap:.2rem;font-weight:400;display:inline-flex;&:not(.action-surface){border:var(--border);background:color-mix(in oklch, var(--surface) 82%, transparent);border-radius:50%;padding:.1875rem;transition:border-color .18s,background-color .18s,color .18s;&:hover,&[data-copied=true]{border-color:color-mix(in oklch, var(--brand-orange) 65%, var(--border));background:var(--brand-orange)}}& .icon{display:inline-flex}& [data-icon=copied]{display:none}&[data-copied=true]{& [data-icon=copied]{display:inline-flex}}}.copy-button-icon-only[data-astro-cid-3r4l65p3]:not(.action-surface){color:var(--text);background:0 0;border:none;&:hover,&:focus-visible{color:var(--on-brand-orange);background:0 0}}.copy-button-base[data-astro-cid-3r4l65p3].action-surface{justify-content:center;block-size:2.25rem;inline-size:2.25rem;padding:0;&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}&[data-copied=true]{background:var(--brand-orange);color:var(--on-brand-orange);filter:none}}.copy-button-share[data-astro-cid-3r4l65p3]{& [data-icon=share]{display:inline-flex}&[data-copied=true]{color:var(--brand-orange)}}.codepen-action-anchor[data-astro-cid-2vo2w2bz]{z-index:10;display:inline-grid;position:absolute;inset-block-end:var(--padding);inset-inline-start:var(--padding);@media (width<=22rem){inset-block-end:calc(var(--padding) + 2.75rem)}}.codepen-button[data-astro-cid-2vo2w2bz]{min-block-size:2rem;font-size:.875rem;font-weight:var(--fw-semibold);justify-content:center;align-items:center;gap:.4rem;padding:.35rem .7rem;line-height:1;display:inline-flex;&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}& svg{flex:none;block-size:1.25rem;inline-size:1.25rem}@media (width<=30rem){gap:.25rem;padding-inline:.4rem;font-size:.8rem;& svg{block-size:1.125rem;inline-size:1.125rem}}}.code-panel[data-astro-cid-kodvhy3l]{--panel-tabs-block-size:var(--action-button-block-size);--panel-content-height:0px;--panel-content-max-height:min(28rem, 52dvh);box-sizing:border-box;align-self:start;gap:var(--gap-sm);min-block-size:0;inline-size:100%;min-inline-size:0;padding-block-end:calc(var(--panel-content-height) + var(--padding-sm));display:flex;position:relative;@media (width>90rem){align-self:stretch;block-size:100%;padding-block-end:0}& .snippet{order:var(--snippet-order);&[open]{& summary{--action-surface-bg:var(--brand-orange);border-color:color-mix(in oklch, var(--brand-orange) 58%, var(--text));color:var(--on-brand-orange);pointer-events:none}& .content{opacity:1;pointer-events:auto;visibility:visible}}& summary{user-select:none;box-sizing:border-box;block-size:var(--panel-tabs-block-size);padding:0 var(--padding);border:1px solid #0000;justify-content:center;align-items:center;display:flex;&::marker{content:""}&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}}& .content{inline-size:100%;block-size:var(--panel-content-height);opacity:0;pointer-events:none;visibility:hidden;position:absolute;inset-block-start:calc(100% - var(--panel-content-height));inset-inline-start:0;@media (width>90rem){block-size:auto;min-block-size:0;inset-block-start:calc(var(--panel-tabs-block-size) + var(--gap-sm));inset-block-end:0}&:has(.css-output-toggle) .lab-code-panel__pre,&:has(.tailwind-version-badge) .lab-code-panel__pre{padding-block-end:calc(var(--padding) + 2.5rem)}&[data-codepen-output] .lab-code-panel__pre{padding-block-end:calc(var(--padding) + 2.5rem);@media (width<=22rem){padding-block-end:calc(var(--padding) + 5.25rem)}}& .tailwind-version-badge{z-index:1;position:absolute;inset-block-end:var(--padding);inset-inline-end:var(--padding);& .info-button{border:1px solid color-mix(in oklch, var(--brand-orange) 55%, var(--border));border-radius:calc(var(--radius) * .65);corner-shape:var(--corner-shape);background:var(--brand-orange);min-block-size:1.75rem;color:var(--on-brand-orange);font-family:var(--font-mono);letter-spacing:.03em;user-select:none;cursor:help;align-items:center;padding-inline:.55rem;font-size:.8rem;font-weight:700;line-height:1;display:inline-flex;&:hover,&:focus-visible{border-color:var(--text)}&:focus-visible{outline:.15rem solid var(--text);outline-offset:.15rem}}}& .css-output-toggle{--toggle-padding:.2rem;z-index:1;padding:var(--toggle-padding);gap:.2rem;display:inline-flex;position:absolute;inset-block-end:var(--padding);inset-inline-end:var(--padding);& button{border-radius:calc(var(--radius) - var(--toggle-padding));corner-shape:var(--corner-shape);color:var(--text-muted);background:0 0;border:0;padding:.35rem .55rem;font-size:1rem;font-weight:500;line-height:1;&[aria-pressed=true]{background:var(--brand-orange);color:var(--on-brand-orange)}&:hover,&:focus-visible{color:var(--brand-orange)}&[aria-pressed=true]:hover,&[aria-pressed=true]:focus-visible{color:var(--on-brand-orange)}}}& .action-hint-anchor:has(.copy-button){opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;transform:translateY(-.125rem)}& .codepen-action-anchor{opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;transform:translateY(.125rem)}&[data-copy-visible=true] .action-hint-anchor:has(.copy-button),& .action-hint-anchor:has(.copy-button:focus-visible),& .action-hint-anchor:has(.copy-button[data-copied=true]),&[data-copy-visible=true] .codepen-action-anchor,& .codepen-action-anchor:has(.codepen-button:focus-visible){opacity:1;pointer-events:auto;transform:translateY(0)}& .copy-button{display:inline-flex}& [data-code-content]{block-size:100%;min-block-size:0}& .lab-code-panel__pre{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;inline-size:100%;min-inline-size:0;max-block-size:var(--panel-content-max-height);padding:var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);overflow-block:auto;overflow-inline:hidden;color:var(--syntax-foreground);box-shadow:var(--shadow-full);background:linear-gradient(light-dark(oklch(98% .01 95/.96),oklch(24% .01 95/.98)),light-dark(oklch(95% .01 95/.94),oklch(20% .01 95/.98)));margin:0;font-size:1rem;line-height:1.55;@media (width>62.5rem){block-size:100%;max-block-size:none}@media (width<=62.5rem){min-block-size:100%}}& code{counter-reset:code-line;font-family:var(--font-mono);white-space:normal;display:block}& .lab-code-panel__line{counter-increment:code-line;border-radius:calc(var(--radius) * .35);grid-template-columns:3ch max-content minmax(0,1fr);min-block-size:1lh;display:grid;&:before{content:counter(code-line);box-sizing:border-box;color:light-dark(oklch(48% .02 250),oklch(72% .02 230));font-variant-numeric:tabular-nums;text-align:end;user-select:none;padding-inline-end:1.25ch}}& .lab-code-panel__indent{white-space:pre}& .lab-code-panel__content{overflow-wrap:anywhere;text-indent:-2ch;white-space:pre-wrap;min-inline-size:0;padding-inline-start:2ch}& .lab-code-panel__line[data-code-line-changed]{animation:1.4s ease-out both code-line-changed;@media (prefers-reduced-motion:reduce){background-color:color-mix(in oklch, var(--brand-orange) 24%, transparent);animation:none}}}}}@keyframes code-line-changed{0%{background-color:color-mix(in oklch, var(--brand-orange) 38%, transparent);filter:contrast(1.2)}to{filter:contrast();background-color:#0000}}.controls[data-astro-cid-734uti6d]{--lab-control-title-size:var(--lab-group-title-size);--lab-control-title-weight:var(--lab-group-title-weight);scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;gap:var(--gap);flex-direction:column;display:flex;position:relative;overflow-y:auto;& .reset-anchor{z-index:2;display:inline-grid;position:absolute;inset-block-start:var(--gap);inset-inline-end:var(--gap)}& .reset-anchor+.lab-group-fields{--lab-group-title-clearance:calc(2.25rem + var(--gap) + 1rem)}& .reset-button{place-items:center;block-size:2.25rem;inline-size:2.25rem;padding:0;display:grid;&.clicked svg[data-astro-cid-734uti6d]{animation:.3s linear forwards clicked}&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}}& .group{gap:var(--gap-sm);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}& label:has(+[data-control=unit]),& .lab-check label{font-size:var(--lab-control-title-size);font-weight:var(--lab-control-title-weight)}& .lab-field:has(color-input){grid-column:1/-1}}[data-lab-controls-panel]:has(>.reset-anchor+.lab-group-fields)>.reset-anchor{inset-inline-end:calc(var(--gap) + 1rem)}@keyframes clicked{to{color:var(--brand-orange);transform:rotate(-360deg)}}.controls[data-astro-cid-734uti6d]>[data-radio-group=properties],.controls[data-astro-cid-734uti6d]>[data-controls-group=axis],.controls[data-astro-cid-734uti6d]>[data-controls-group=individual],.controls[data-astro-cid-734uti6d]>[data-radio-group=textDirection],.controls[data-astro-cid-734uti6d]>[data-control-section=directional] [data-radio-group=properties],.controls[data-astro-cid-734uti6d]>[data-control-section=directional] [data-radio-group=textDirection]{display:none}.controls[data-astro-cid-734uti6d]>[data-radio-group=mode]:has(input:checked[value=individual],input:checked[value=axis])~[data-radio-group=properties],.controls[data-astro-cid-734uti6d]>[data-control-section=directional]:has([data-radio-group=mode] input:checked:is([value=individual],[value=axis])) [data-radio-group=properties]{display:block}.controls[data-astro-cid-734uti6d]>[data-radio-group=mode]:has(input:checked[value=individual],input:checked[value=axis])~[data-controls-group=all],.controls[data-astro-cid-734uti6d]>[data-control-section=directional]:has([data-radio-group=mode] input:checked:is([value=individual],[value=axis]))~[data-controls-group=all]{display:none}.controls[data-astro-cid-734uti6d]>[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],.controls[data-astro-cid-734uti6d]>[data-control-section=directional]:has([data-radio-group=mode] input:checked:is([value=individual],[value=axis])):has([data-radio-group=properties] input:checked[value=logical]) [data-radio-group=textDirection]{display:block}.controls[data-astro-cid-734uti6d]>[data-radio-group=mode]:has(input:checked[value=individual])~[data-controls-group=all]{display:none}.controls[data-astro-cid-734uti6d]>[data-radio-group=mode]:has(input:checked[value=individual])~[data-controls-group=individual],.controls[data-astro-cid-734uti6d]>[data-control-section=directional]:has([data-radio-group=mode] input:checked[value=individual])~[data-controls-group=individual],.controls[data-astro-cid-734uti6d]>[data-radio-group=mode]:has(input:checked[value=axis])~[data-controls-group=axis],.controls[data-astro-cid-734uti6d]>[data-control-section=directional]:has([data-radio-group=mode] input:checked[value=axis])~[data-controls-group=axis]{display:grid}.lab-field{gap:var(--gap-sm);display:grid;&:has(.range){gap:calc(var(--gap-sm) + 8px);& .header{align-items:center}}& .header{justify-content:space-between;align-items:start;gap:var(--gap-lg);display:flex;& output{text-align:end;color:var(--on-brand-orange);font-weight:var(--fw-regular);background-color:var(--brand-orange);padding:var(--padding-sm);border-radius:var(--radius);corner-shape:var(--corner-shape);text-box:trim-both ex alphabetic}}& .header--single{justify-content:start}& label{font-size:var(--lab-control-title-size);font-weight:var(--lab-control-title-weight)}& p{font-weight:var(--fw-regular)}& select{max-inline-size:max-content}}@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(*),[data-astro-transition-scope]{animation:none!important}}.ai-assistant[data-astro-cid-d672c4d3]{display:contents;& .trigger{box-sizing:border-box;block-size:var(--action-button-block-size);align-items:center;gap:var(--gap-sm);font-weight:var(--fw-semibold);padding:0 .7rem;display:inline-flex;& svg{block-size:1.25rem;inline-size:1.25rem}}& .panel{inline-size:min(32rem,100dvi - 1rem);max-inline-size:none;block-size:calc(100dvb - var(--padding) * 2);max-block-size:none;margin-block:var(--padding) 0;color:var(--text);opacity:0;transition:display .3s ease-in-out allow-discrete, overlay .3s ease-in-out allow-discrete, opacity .3s ease-in-out, transform .3s ease-in-out;background:0 0;border:0;margin-inline:auto 0;padding:0;overflow:visible;transform:translate(100%);&[open]{opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(100%)}&::backdrop{background:color-mix(in oklch, var(--bg) 52%, transparent);backdrop-filter:blur(4px);@starting-style{backdrop-filter:blur();background:0 0}}}&::backdrop{backdrop-filter:blur();background:0 0;transition:background .3s ease-in-out,backdrop-filter .3s ease-in-out}}& .panel-inner{gap:var(--gap);block-size:100%;padding:var(--padding);background:linear-gradient(150deg, color-mix(in oklch, var(--brand-blue) 18%, transparent), transparent 38%), color-mix(in oklch, var(--surface-strong) 96%, var(--bg));box-shadow:var(--shadow-full);corner-shape:var(--corner-shape);border-start-start-radius:var(--radius);border-end-start-radius:var(--radius);grid-template-rows:auto minmax(0,1fr);display:grid}& .panel-header{gap:var(--gap);grid-template-columns:minmax(0,1fr) auto;align-items:start;display:grid;& h2{font-size:1.35rem}& p{color:var(--text-muted)}}& .close-button{block-size:2.5rem;inline-size:2.5rem;box-shadow:var(--shadow-full);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--surface) 92%, transparent);color:var(--text);border:none;place-items:center;padding:0;display:inline-grid;&:hover,&:focus-visible{color:var(--brand-orange)}}& .form{gap:var(--gap);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;display:grid;& label{font-weight:var(--fw-semibold)}}& textarea{field-sizing:content;resize:none;min-block-size:3lh;max-block-size:8lh;inline-size:100%;padding:var(--padding-sm) var(--padding);box-shadow:var(--shadow-full);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--surface) 92%, transparent);color:var(--text);scrollbar-width:thin;border:none;&::placeholder{color:var(--text-muted)}&[aria-invalid=true]{border-color:var(--brand-orange)}}& .submit-button,& .suggestions button{box-shadow:var(--shadow-full);border-radius:var(--radius);corner-shape:var(--corner-shape);font-weight:var(--fw-semibold);border:none;&:disabled{cursor:not-allowed;opacity:.55}}& .submit-button{padding:var(--padding-sm) var(--padding);background:var(--brand-orange);color:var(--on-brand-orange);&:hover:not(:disabled),&:focus-visible{background:color-mix(in oklch, var(--brand-blue) 22%, var(--brand-orange))}}& .suggestions{justify-content:center;gap:var(--gap-sm);flex-wrap:wrap;display:flex;& button{background:color-mix(in oklch, var(--brand-blue) 18%, var(--surface));color:var(--text);padding:.35rem .7rem;&:hover:not(:disabled),&:focus-visible{background:color-mix(in oklch, var(--brand-orange) 18%, var(--surface))}}}& .answer{padding:var(--padding);box-shadow:var(--shadow-full);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--bg-elevated) 88%, transparent);color:var(--text);scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;display:block;overflow:auto;&:empty{display:none}&>:not(:last-child,hr){margin-block-end:var(--gap-sm)}& code{corner-shape:var(--corner-shape);background:var(--brand-blue);color:var(--on-brand-blue);border-radius:.5rem;padding:.1rem}& pre{padding:var(--padding-sm);border:var(--border);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--surface) 90%, transparent);scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;overflow:auto}& pre code{color:var(--text);background:0 0;padding:0;display:block}& hr{margin-block:1.5rem}}& footer{color:var(--text-muted);text-align:center;line-height:1}}.share-anchor[data-astro-cid-ny4jxn62]{display:inline-grid}.share-trigger[data-astro-cid-ny4jxn62]{&:is(:hover,:focus-visible),&[aria-expanded=true]{color:var(--brand-orange)}}.share-popover[data-astro-cid-ny4jxn62]{position-area:left span-bottom;position-try-fallbacks:right span-bottom, bottom span-left, top span-left;margin:0 var(--gap-sm) 0 0;inline-size:min(18rem,100vi - 2rem);padding:var(--padding-sm);border:var(--border-popover);border-radius:var(--radius);corner-shape:var(--corner-shape);background:radial-gradient(circle at top right, color-mix(in oklch, var(--brand-orange) 22%, transparent), transparent 48%), var(--surface);box-shadow:var(--shadow-full);color:var(--text);opacity:0;transform-origin:100%;transition:opacity .16s ease, transform .16s ease, overlay .16s ease allow-discrete, display .16s ease allow-discrete;align-self:start;position:fixed;inset:auto;transform:translate(.25rem)scale(.97);&:popover-open{opacity:1;transform:translate(0)scale(1);@starting-style{opacity:0;transform:translate(.25rem)scale(.97)}}&>strong[data-astro-cid-ny4jxn62]{padding:var(--padding-sm);font-size:.875rem;display:block}& small{padding:var(--padding-sm);color:var(--text-muted);text-wrap:balance;line-height:1.35;display:block}}.share-options[data-astro-cid-ny4jxn62]{gap:.25rem;display:grid}.share-option[data-astro-cid-ny4jxn62]{align-items:center;gap:var(--gap-sm);min-block-size:2.75rem;inline-size:100%;padding:.375rem var(--padding-sm);border-radius:calc(var(--radius) - .4rem);color:var(--text);font-weight:var(--fw-semibold);text-align:start;background:0 0;border:0;grid-template-columns:2rem minmax(0,1fr);text-decoration:none;transition:background-color .16s,color .16s,transform .16s;display:grid;&:is(:hover,:focus-visible){background:color-mix(in oklch, var(--brand-orange) 24%, transparent);color:var(--text);transform:translate(.125rem)}&[data-copied=true]{color:var(--success)}}.option-icon[data-astro-cid-ny4jxn62]{border:var(--border);background:color-mix(in oklch, var(--surface-strong) 86%, transparent);border-radius:50%;place-items:center;block-size:2rem;inline-size:2rem;display:grid;& svg{block-size:1.125rem;inline-size:1.125rem}}.favorite-anchor[data-astro-cid-zoaa4zc7]{display:inline-grid}.lab-favorite-toggle{--favorite-toggle-background:var(--action-surface-bg);--favorite-toggle-icon-size:var(--action-surface-icon-size)}@media (any-hover:hover){.lab-favorite-toggle[aria-pressed=true]:hover{color:var(--danger-hover)}}.related-labs[data-astro-cid-chh7obee]{min-inline-size:0}.popover[data-astro-cid-chh7obee]{position-area:bottom span-left;position-try-fallbacks:bottom span-right, left span-bottom, right span-bottom;inline-size:min(25rem, calc(100dvi - var(--padding) * 2));padding:var(--padding-sm);border:var(--border-popover);border-radius:var(--radius);corner-shape:var(--corner-shape);background:radial-gradient(circle at top right, color-mix(in oklch, var(--brand-orange) 22%, transparent), transparent 48%), var(--surface);box-shadow:var(--shadow-full);color:var(--text);opacity:0;transform-origin:top;transition:opacity .16s ease, transform .16s ease, overlay .16s ease allow-discrete, display .16s ease allow-discrete;margin-block-start:var(--gap-sm);position:fixed;inset:auto;transform:translateY(-.25rem)scale(.98);&:popover-open{opacity:1;transform:translateY(0)scale(1);@starting-style{opacity:0;transform:translateY(-.25rem)scale(.98)}}}.trigger[data-astro-cid-chh7obee]{box-sizing:border-box;block-size:var(--action-button-block-size);align-items:center;gap:var(--gap-sm);font-weight:var(--fw-semibold);padding:0 .7rem;display:inline-flex;& svg{block-size:1.15rem;inline-size:1.15rem}}.popover[data-astro-cid-chh7obee]:popover-open+.trigger[data-astro-cid-chh7obee]{color:var(--brand-orange)}.related-labs[data-astro-cid-chh7obee]:has(.popover:popover-open) .trigger[data-astro-cid-chh7obee]{color:var(--brand-orange)}.trigger-icon[data-astro-cid-chh7obee]{transition:rotate .16s}.related-labs[data-astro-cid-chh7obee]:has(.popover:popover-open) .trigger-icon[data-astro-cid-chh7obee]{rotate:180deg}.panel-title[data-astro-cid-chh7obee]{padding:var(--padding-sm);font-size:.9rem;display:block}ul[data-astro-cid-chh7obee]{gap:.25rem;margin:0;padding:0;list-style:none;display:grid}a[data-astro-cid-chh7obee]{align-items:center;gap:var(--gap-sm);padding:var(--padding-sm);border-radius:calc(var(--radius) * .8);corner-shape:var(--corner-shape);color:var(--text);border:1px solid #0000;grid-template-columns:auto minmax(0,1fr) auto;text-decoration:none;transition:border-color .16s,background .16s,color .16s,transform .16s;display:grid;&[data-recommended]{border-color:color-mix(in oklch, var(--brand-orange) 52%, transparent);background:color-mix(in oklch, var(--brand-orange) 8%, transparent)}&:is(:hover,:focus-visible){border-color:color-mix(in oklch, var(--brand-orange) 64%, transparent);background:color-mix(in oklch, var(--brand-orange) 24%, transparent);color:var(--text);transform:translate(.125rem);& .link-arrow{translate:.2rem}}}.link-icon[data-astro-cid-chh7obee]{border-radius:calc(var(--radius) * .72);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--brand-blue) 12%, var(--surface));block-size:2.35rem;inline-size:2.35rem;color:var(--text);align-self:start;place-items:center;display:inline-grid;& svg{block-size:1.5rem;inline-size:1.5rem}}.link-copy[data-astro-cid-chh7obee]{gap:.15rem;min-inline-size:0;display:grid;& strong,& small{text-overflow:ellipsis;overflow:hidden}& strong{color:var(--text);font-size:.9rem}& small{color:var(--text-muted);font-size:.8rem;line-height:1.3}}.link-arrow[data-astro-cid-chh7obee]{block-size:1.15rem;inline-size:1.15rem;transition:translate .16s}.variant-inline[data-astro-cid-chh7obee]{gap:var(--gap-sm);padding:var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--surface-strong) 90%, transparent);box-shadow:var(--shadow-full);display:grid;& .links-panel{gap:var(--gap-sm);display:grid}& .panel-title{padding:0;font-size:1rem}& ul{gap:var(--gap-sm);grid-template-columns:repeat(3,minmax(0,1fr))}& a{background:color-mix(in oklch, var(--surface) 72%, transparent);block-size:100%}}@media (width<=48rem){.variant-inline[data-astro-cid-chh7obee] ul[data-astro-cid-chh7obee]{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.popover[data-astro-cid-chh7obee],.trigger-icon[data-astro-cid-chh7obee],a[data-astro-cid-chh7obee],.link-arrow[data-astro-cid-chh7obee]{transition:none}}.lab-shell[data-astro-cid-nvbvzqoc]{--lab-preview-intermediate-block-size:min(28rem, 52dvh);block-size:100%;min-block-size:100%;padding:var(--padding);grid-template-rows:minmax(0,auto) minmax(0,1fr);display:grid;&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}@media (width<=106.25rem){@media (width<=90rem){padding-block:var(--padding-lg)}}&[data-preview-height=large]{--lab-preview-intermediate-block-size:min(34rem, 64dvh)}&>.heading[data-astro-cid-nvbvzqoc]{align-items:center;gap:var(--gap);grid-template-columns:minmax(0,1fr) auto;margin-block-end:var(--gap);display:grid;@media (width<=62.5rem){grid-template-columns:1fr}& .heading-content{min-inline-size:0;@media (width<=62.5rem){order:2}&>[data-astro-cid-nvbvzqoc]:not(:last-child){margin-block-end:calc(var(--gap) / 2)}& :is(h1,h2){font-size:clamp(1.563rem,.938rem + 1.667vw,2.188rem);line-height:1}}& .header-actions{align-items:center;gap:var(--gap-sm);flex-wrap:nowrap;justify-self:end;display:flex;@media (width<=62.5rem){flex-wrap:wrap;order:1}& .action-hint-anchor{display:inline-grid;inset:auto;position:static!important}& a{vertical-align:middle}& .guide-link{min-block-size:var(--action-button-block-size);align-items:center;gap:var(--gap-sm);font-weight:var(--fw-semibold);padding:.35rem .7rem;display:inline-flex;& svg{block-size:1.2rem;inline-size:1.2rem}&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}}& .header-utilities{align-items:center;gap:var(--gap-sm);display:flex}}}& .related-labs-popover{display:contents;@media (width<=90rem){display:none}}& .related-labs-inline{display:none;@media (width<=90rem){margin-block-start:var(--gap-sm);display:block}}& .layout-grid{gap:var(--gap-sm);grid-template-rows:minmax(0,1fr);grid-template-columns:31rem 1fr;block-size:100%;min-block-size:0;display:grid;@media (width<=90rem){grid-template-rows:repeat(3,auto);grid-template-columns:repeat(2,1fr);grid-template-areas:"baseline baseline""preview code""controls controls";align-content:start;block-size:auto}@media (width<=62.5rem){grid-template-rows:repeat(4,auto);grid-template-columns:1fr;grid-template-areas:"baseline""preview""controls""code";block-size:auto}& .controls{border-radius:var(--radius);corner-shape:var(--corner-shape);box-shadow:var(--shadow-full);background:color-mix(in oklch, var(--surface-strong) 90%, transparent);padding:1rem;@media (width<=90rem){grid-area:controls}}& .stack{grid-template-rows:minmax(0,auto) minmax(0,1fr);min-block-size:0;display:grid;&>[data-astro-cid-nvbvzqoc]:not(:last-child){margin-block-end:var(--gap-sm)}@media (width<=90rem){display:contents;&>[data-astro-cid-nvbvzqoc]:not(:last-child){margin-block-end:0}}}& .baseline-slider{align-items:stretch;gap:var(--gap-sm);inline-size:100%;min-inline-size:0;max-inline-size:100%;display:flex;@media (width<=90rem){grid-area:baseline;align-self:start;align-items:flex-start;block-size:auto}&.is-scrollable{scroll-behavior:smooth;scroll-snap-type:inline mandatory;scrollbar-width:thin;padding-block-end:.25rem;overflow-x:auto}}& baseline-status-card{scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%;min-inline-size:0;max-inline-size:100%;display:flex;@media (width<=90rem){align-self:flex-start;block-size:auto}}& .baseline-slider.is-scrollable baseline-status-card{flex-basis:calc(100% - clamp(2.4rem,10vi,4.8rem))}& .preview-code{gap:var(--gap-sm);grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1.2fr) minmax(22rem,.8fr);min-block-size:0;display:grid;@media (width<=90rem){grid-template-rows:1fr auto;grid-template-columns:1fr;display:contents;& .code-panel{grid-area:code;justify-self:stretch;inline-size:100%;min-inline-size:0}}}& .preview{min-block-size:16.25rem;padding:var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);box-shadow:var(--shadow-full);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);grid-template-rows:minmax(0,1fr);place-items:safe center;display:grid;position:relative;@media (width<=90rem){grid-area:preview}@media (62.5rem<width<=90rem){block-size:var(--lab-preview-intermediate-block-size);scrollbar-width:thin;align-self:start;overflow:auto}}}}