.prose .fill-article-example .fill-lab{--lab-padding:0px;box-shadow:none;background:0 0;border:0;border-radius:0;margin:24px 0 32px}.prose .fill-article-example .fill-lab__header{padding:0 0 16px}.prose .fill-article-example .fill-lab__icon,.prose .fill-article-example .fill-lab__badge{display:none}.prose .fill-article-example .fill-lab :where(div,fieldset,label,output,button,select,input,canvas,p,ul,span,i){box-shadow:none;border-radius:0}.prose .fill-article-example .fill-lab svg :where(circle,line){filter:none}.prose .fill-article-example :is(.gradient-stop,.gradient-stop__offset output,.linear-lab__stop,.radial-lab__stop,.linear-lab__metrics,.radial-lab__metrics,.linear-lab__note,.radial-lab__note,.radial-lab__steps,.aa-lab__definition,.aa-lab__table,.aa-lab__metrics,.aa-lab__colors label,.aa-lab__controls output){background:0 0}.prose .fill-article-example :is(.gradient-stop,.linear-lab__stop,.radial-lab__stop,.aa-lab__colors label){padding:8px 0}.prose .fill-article-example .gradient-table__controls{gap:20px}.prose .fill-article-example .fill-lab :is(button,select,input[type=text],input[type=color]){border:1px solid var(--hairline);color:var(--ink);background:0 0}.prose .fill-article-example .fill-lab button:hover{border-color:var(--ink-muted);background:0 0}.prose .fill-article-example .fill-lab button[aria-pressed=true]{border-color:var(--primary);color:var(--primary);background:0 0}.prose .fill-article-example .radial-lab__steps{gap:8px;padding:0}.prose .fill-article-example gradient-fill-lab output{background:0 0}.prose .fill-article-example .fill-lab input[type=range]::-webkit-slider-thumb,.prose .fill-article-example .fill-lab input[type=range]:hover::-webkit-slider-thumb,.prose .fill-article-example .fill-lab input[type=range]::-moz-range-thumb{box-shadow:none}.prose .fill-article-example .fill-lab input[type=color]::-webkit-color-swatch,.prose .fill-article-example .fill-lab input[type=color]::-moz-color-swatch{border-radius:0}.fill-lab,.prose .fill-lab{--lab-padding:24px;border:1px solid color-mix(in srgb, var(--hairline) 75%, transparent);background:var(--canvas);color:var(--ink);box-shadow:0 2px 12px color-mix(in srgb, var(--ink) 5%, transparent);isolation:isolate;border-radius:24px;margin:28px 0 36px;display:block;overflow:hidden}.fill-lab .fill-lab__header{padding:var(--lab-padding);text-align:left;align-items:center;gap:14px;display:flex}.fill-lab__icon{background:var(--primary-subtle);width:44px;height:44px;color:var(--primary);border-radius:14px;flex:0 0 44px;place-items:center;display:grid}.fill-lab__icon svg{width:24px;height:24px}.fill-lab__heading{flex:1;min-width:0}.fill-lab .fill-lab__heading h3{font:650 18px / 1.4 var(--font-body);letter-spacing:-.025em;border:0;margin:0;padding:0}.fill-lab .fill-lab__heading p{font:400 13px / 1.6 var(--font-body);color:var(--ink-muted);margin:4px 0 0}.fill-lab .fill-lab__badge{background:var(--surface-1);color:var(--ink-subtle);font:500 11px / 1.5 var(--font-body);white-space:nowrap;border-radius:999px;flex:none;padding:5px 10px}.fill-lab :where(button,select,input){-webkit-tap-highlight-color:transparent}.fill-lab :where(button,select,input):focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 65%, transparent);outline-offset:3px}.fill-lab :where(button,select,input[type=text]){font-family:var(--font-body)}.fill-lab :where(button,select){min-height:44px}.fill-lab button{transition:background-color .16s,color .16s,box-shadow .16s}.fill-lab input[type=range]:not([data-index-range]){appearance:none;cursor:pointer;width:100%;min-width:0;height:28px;accent-color:var(--primary);background:0 0;margin:0;padding:0;display:block}.fill-lab input[type=range]:not([data-index-range])::-webkit-slider-runnable-track{background:color-mix(in srgb, var(--primary) 16%, var(--surface-2));border-radius:999px;height:6px}.fill-lab input[type=range]:not([data-index-range])::-moz-range-track{background:color-mix(in srgb, var(--primary) 16%, var(--surface-2));border-radius:999px;height:6px}.fill-lab input[type=range]:not([data-index-range])::-moz-range-progress{background:var(--primary);border-radius:999px;height:6px}.fill-lab input[type=range]:not([data-index-range])::-webkit-slider-thumb{appearance:none;border:3px solid var(--canvas);background:var(--primary);width:18px;height:18px;box-shadow:0 0 0 1px var(--primary);border-radius:50%;margin-top:-6px;transition:box-shadow .16s}.fill-lab input[type=range]:not([data-index-range])::-moz-range-thumb{border:3px solid var(--canvas);background:var(--primary);width:12px;height:12px;box-shadow:0 0 0 1px var(--primary);border-radius:50%}.fill-lab input[type=range]:not([data-index-range]):hover::-webkit-slider-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--primary) 12%, transparent)}.fill-lab input[type=color]::-webkit-color-swatch-wrapper{padding:3px}.fill-lab input[type=color]::-webkit-color-swatch{border:0;border-radius:9px}.fill-lab input[type=color]::-moz-color-swatch{border:0;border-radius:9px}@media (width<=640px){.fill-lab,.prose .fill-lab{--lab-padding:18px;border-radius:20px}.fill-lab .fill-lab__header{gap:12px}.fill-lab .fill-lab__badge{display:none}.fill-lab .fill-lab__heading h3{font-size:17px}.fill-lab .fill-lab__heading p{font-size:12px}}@media (pointer:coarse){.fill-lab input[type=range]:not([data-index-range]){height:44px}}@media (prefers-reduced-motion:reduce){.fill-lab button,.fill-lab input::-webkit-slider-thumb{transition:none}}canvas[data-astro-cid-btplsb2r]{width:calc(100% - 2 * var(--lab-padding));margin:0 var(--lab-padding);aspect-ratio:auto;border:1px solid var(--hairline);border-radius:16px;height:auto;display:block}.controls[data-astro-cid-btplsb2r]{padding:20px var(--lab-padding);flex-wrap:wrap;align-items:center;gap:10px;display:flex}label[data-astro-cid-btplsb2r]{color:var(--ink-muted);white-space:nowrap;flex:180px;align-items:center;gap:12px;font-size:13px;display:flex}input[data-astro-cid-btplsb2r]{width:0;min-width:70px;accent-color:var(--primary);flex:1}button[data-astro-cid-btplsb2r],select[data-astro-cid-btplsb2r]{font:600 13px var(--font-body);min-height:44px;color:var(--ink);background:var(--surface-1);border:0;border-radius:12px;padding:10px 16px}button[data-astro-cid-btplsb2r]{cursor:pointer}button[data-astro-cid-btplsb2r]:focus-visible,input[data-astro-cid-btplsb2r]:focus-visible,select[data-astro-cid-btplsb2r]:focus-visible{outline:2px solid var(--ring);outline-offset:3px}output[data-astro-cid-btplsb2r]{padding:16px var(--lab-padding);background:var(--surface-1);color:var(--ink-muted);font:12px / 1.7 var(--font-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;display:block}.note[data-astro-cid-btplsb2r]{padding:16px var(--lab-padding);color:var(--ink-muted);line-height:1.65;margin:0!important;font-size:12px!important}@media (width<=600px){label[data-astro-cid-btplsb2r]{flex-basis:100%}.controls[data-astro-cid-btplsb2r]{gap:.75rem}}button[data-astro-cid-btplsb2r][data-play]{background:var(--primary);color:var(--on-primary)}button[data-astro-cid-btplsb2r]:hover{background:var(--surface-2)}button[data-astro-cid-btplsb2r][data-play]:hover{background:var(--primary-hover)}