.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)}.copy-button-base[data-astro-cid-3r4l65p3]{border:var(--border);background:color-mix(in oklch, var(--surface) 82%, transparent);border-radius:50%;align-items:center;gap:.2rem;padding:.1875rem;font-weight:400;transition:border-color .18s,background-color .18s,color .18s;display:inline-flex;& .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:var(--brand-orange)}}.copy-button-icon-only[data-astro-cid-3r4l65p3]{color:var(--text);background:0 0;border:none;&:hover,&:focus-visible{color:var(--on-brand-orange);background:0 0}}.copy-button-share[data-astro-cid-3r4l65p3]{& [data-icon=share]{display:inline-flex}&[data-copied=true]{color:var(--brand-orange)}}.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}}.code-panel[data-astro-cid-kodvhy3l]{--panel-content-height:0px;--panel-content-max-height:min(28rem, 52dvh);align-self:start;gap:var(--gap-sm);min-block-size:0;padding-block-end:calc(var(--panel-content-height) + var(--padding-sm));display:flex;position:relative;& .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}&::details-content{opacity:1;block-size:var(--panel-content-height)}}&::details-content{inline-size:100%;position:absolute;inset-block-start:calc(100% - var(--panel-content-height));inset-inline-start:0}& summary{--action-surface-hover-color:var(--text);user-select:none;padding:var(--padding-sm) var(--padding);border:1px solid #0000;justify-content:center;align-items:center;display:flex;&::marker{content:""}&:hover,&:focus-visible{--action-surface-bg:color-mix(in oklch, var(--brand-orange) 18%, var(--surface-strong));border-color:color-mix(in oklch, var(--brand-orange) 58%, var(--text))}&:focus-visible{outline:.15rem solid var(--text);outline-offset:.15rem}}& .content{position:relative;@media (width>1000px){block-size:100%;min-block-size: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)}& .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)}}}&: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;max-block-size:var(--panel-content-max-height);padding:var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);color:light-dark(oklch(26% .03 250),oklch(93% .02 110));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;overflow:auto;@media (width>1000px){box-sizing:border-box;block-size:100%}}& code{font-family:var(--font-mono);white-space:pre;display:block}& .lab-code-panel__line{border-radius:calc(var(--radius) * .35);min-inline-size:max-content;display:inline-block}& .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}}& .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(80% .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(80% .13 38))}& .tok-string,& .tok-color{color:light-dark(oklch(59% .13 35),oklch(79% .14 45))}& .tok-property{text-shadow:0 0 .02em}& .tok-number{color:light-dark(oklch(43% .07 150),oklch(82% .06 145))}& .tok-comment{color:light-dark(oklch(50% .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))}}}}@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]{scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;gap:var(--gap);flex-direction:column;display:flex;position:relative;overflow-y:auto;& .reset-anchor{display:inline-grid;position:absolute;inset-block-start:var(--gap);inset-inline-end:var(--gap)}& .reset-anchor+.lab-group-fields{corner-end-start-shape:var(--corner-shape);corner-start-end-shape:scoop;border-start-end-radius:40px;@supports not (corner-start-end-shape:scoop){border-radius:var(--radius);margin-inline-end:var(--gap-lg)}}& .reset-button{color:var(--text);background-color:#0000;border:none;padding:0;display:flex;&.clicked{animation:.3s linear forwards clicked}&:hover{color:var(--brand-orange)}}& .group{gap:var(--gap-sm);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}& label:has(+[data-control=unit]){font-size:1.1rem;font-weight:var(--fw-semibold)}& .lab-field:has(color-input){grid-column:1/-1}}@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]{display:none}.controls[data-astro-cid-734uti6d]>[data-radio-group=mode]:has(input:checked[value=individual],input:checked[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]{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]{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-radio-group=mode]:has(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);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,& p{font-weight:var(--fw-regular);text-box:trim-both cap alphabetic}& 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{align-items:center;gap:var(--gap-sm);font-weight:var(--fw-semibold);padding:.35rem .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}}.lab-shell[data-astro-cid-nvbvzqoc]{block-size:100%;min-block-size:100%;padding:var(--padding);grid-template-rows:minmax(0,auto) minmax(0,1fr);display:grid;@media (width<=87.5rem){padding:var(--padding-lg) 0}&>[data-astro-cid-nvbvzqoc]:not(:last-child){margin-block-end:var(--gap)}& .heading{align-items:center;gap:var(--gap);grid-template-columns:minmax(0,1fr) auto;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)}}& .header-actions{align-items:center;gap:var(--gap);justify-self:end;display:flex;@media (width<=62.5rem){order:1}& .action-hint-anchor{display:inline-grid;inset:auto;position:static!important}& a{vertical-align:middle}}& .copy-url-button,& .issue-link{block-size:1.5rem;inline-size:1.5rem;color:var(--text);background:0 0;border:0;place-items:center;padding:0;display:inline-grid;&:hover{color:var(--brand-orange)}& svg,& svg{block-size:100%;inline-size:100%}}}& .grid{gap:var(--gap-sm);grid-template-rows:minmax(0,1fr);grid-template-columns:28.5rem 1fr;block-size:100%;min-block-size:0;display:grid;@media (width<=62.5rem){grid-template-columns:1fr}& .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}& .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)}}& .baseline-slider{align-items:stretch;gap:var(--gap-sm);inline-size:100%;min-inline-size:0;max-inline-size:100%;display:flex;&.is-scrollable{overscroll-behavior-inline:contain;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}& .baseline-slider.is-scrollable baseline-status-card{flex-basis:calc(100% - clamp(1.5rem,5vi,3rem))}& .preview-code{gap:var(--gap-sm);grid-template-rows:1fr auto;min-block-size:0;display:grid}& .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:center;display:grid;position:relative}}}