:root{--color-rose-01: #550532;--color-rose-02: #700b43;--color-rose-03: #8b1254;--color-rose-04: #a81a66;--color-rose-05: #bc397d;--color-rose-06: #d15294;--color-rose-07: #e56aac;--color-rose-08: #ec89bc;--color-rose-09: #f1a5cc;--color-rose-10: #f6c1dc;--color-rose-11: #f9ddec;--color-rose-12: #fdf2f8;--color-violet-01: #300187;--color-violet-02: #3c01ad;--color-violet-03: #551abc;--color-violet-04: #6c2dcb;--color-violet-05: #813eda;--color-violet-06: #a35ff0;--color-violet-07: #b776fb;--color-violet-08: #c790fc;--color-violet-09: #d5aafd;--color-violet-10: #e2c4fe;--color-violet-11: #eedefe;--color-violet-12: #f9f4ff;--color-azure-01: #031f60;--color-azure-02: #042467;--color-azure-03: #083c8a;--color-azure-04: #0158ad;--color-azure-05: #1666bb;--color-azure-06: #2a84e1;--color-azure-07: #3598f8;--color-azure-08: #6db5f8;--color-azure-09: #93c5fa;--color-azure-10: #b3d5fb;--color-azure-11: #d1e5fd;--color-azure-12: #edf6fe;--color-cyan-01: #00161a;--color-cyan-02: #04242a;--color-cyan-03: #00333c;--color-cyan-04: #014a53;--color-cyan-05: #03636b;--color-cyan-06: #048e96;--color-cyan-07: #05a5ad;--color-cyan-08: #55b7bd;--color-cyan-09: #80c8cd;--color-cyan-10: #a5dadd;--color-cyan-11: #c9eced;--color-cyan-12: #eaf8f9;--color-green-01: #133100;--color-green-02: #1d4204;--color-green-03: #285303;--color-green-04: #336502;--color-green-05: #3e7b02;--color-green-06: #499103;--color-green-07: #55a803;--color-green-08: #7ab945;--color-green-09: #9bca71;--color-green-10: #bbda9b;--color-green-11: #d9ebc5;--color-green-12: #f0f7e8;--color-yellow-01: #342900;--color-yellow-02: #453803;--color-yellow-03: #574803;--color-yellow-04: #6a5801;--color-yellow-05: #816b01;--color-yellow-06: #997e02;--color-yellow-07: #b19202;--color-yellow-08: #c2a643;--color-yellow-09: #d2ba6e;--color-yellow-10: #e0cf98;--color-yellow-11: #ece5c2;--color-yellow-12: #f7f6e9;--color-orange-01: #4c1a00;--color-orange-02: #612804;--color-orange-03: #773604;--color-orange-04: #8e4501;--color-orange-05: #ad5601;--color-orange-06: #cb6503;--color-orange-07: #ea7407;--color-orange-08: #f89435;--color-orange-09: #ffba7d;--color-orange-10: #ffdfc1;--color-orange-11: #ffe9d4;--color-orange-12: #fef4e8;--color-red-01: #5d0000;--color-red-02: #790304;--color-red-03: #960706;--color-red-04: #b40d05;--color-red-05: #cc3024;--color-red-06: #e44a3f;--color-red-07: #fb625b;--color-red-08: #ff847a;--color-red-09: #ffa49a;--color-red-10: #ffc1ba;--color-red-11: #ffdcda;--color-red-12: #fff3f2;--color-grey-01: #0b0c0d;--color-grey-02: #0e0f10;--color-grey-03: #191a1a;--color-grey-04: #232424;--color-grey-05: #434444;--color-grey-06: #656667;--color-grey-07: #898a8b;--color-grey-08: #a6a7a8;--color-grey-09: #c8c9ca;--color-grey-10: #e3e4e5;--color-grey-11: #f2f3f4;--color-grey-12: #f9fafb;--color-black: #000000;--color-white: #ffffff;--space-scale-vertical: 24;--space-scale-vertical-01: calc(var(--space-scale-vertical) * .125);--space-scale-vertical-02: calc(var(--space-scale-vertical) * .25);--space-scale-vertical-03: calc(var(--space-scale-vertical) * .5);--space-scale-vertical-04: calc(var(--space-scale-vertical) * .75);--space-scale-vertical-05: calc(var(--space-scale-vertical) * 1);--space-scale-vertical-06: calc(var(--space-scale-vertical) * 1.5);--space-scale-vertical-07: calc(var(--space-scale-vertical) * 2);--space-scale-vertical-08: calc(var(--space-scale-vertical) * 2.5);--space-scale-vertical-09: calc(var(--space-scale-vertical) * 3);--space-scale-vertical-10: calc(var(--space-scale-vertical) * 3.5);--space-scale-vertical-11: calc(var(--space-scale-vertical) * 4);--space-scale-vertical-12: calc(var(--space-scale-vertical) * 4.5);--space-scale-vertical-13: calc(var(--space-scale-vertical) * 5);--space-scale-vertical-14: calc(var(--space-scale-vertical) * 6);--space-scale-horizontal: 16;--space-scale-horizontal-01: calc(var(--space-scale-horizontal) * .125);--space-scale-horizontal-02: calc(var(--space-scale-horizontal) * .25);--space-scale-horizontal-03: calc(var(--space-scale-horizontal) * .5);--space-scale-horizontal-04: calc(var(--space-scale-horizontal) * .75);--space-scale-horizontal-05: calc(var(--space-scale-horizontal) * 1);--space-scale-horizontal-06: calc(var(--space-scale-horizontal) * 1.5);--space-scale-horizontal-07: calc(var(--space-scale-horizontal) * 2);--space-scale-horizontal-08: calc(var(--space-scale-horizontal) * 2.5);--space-scale-horizontal-09: calc(var(--space-scale-horizontal) * 3);--space-scale-horizontal-10: calc(var(--space-scale-horizontal) * 3.5);--space-scale-horizontal-11: calc(var(--space-scale-horizontal) * 4);--space-scale-horizontal-12: calc(var(--space-scale-horizontal) * 4.5);--leading-scale: var(--space-scale-vertical);--leading-scale-01: var(--space-scale-vertical);--leading-scale-02: calc(var(--space-scale-vertical) * 1.125);--leading-scale-03: calc(var(--space-scale-vertical) * 1.25);--leading-scale-04: calc(var(--space-scale-vertical) * 1.5);--leading-scale-05: calc(var(--space-scale-vertical) * 1.75);--leading-scale-06: calc(var(--space-scale-vertical) * 2);--leading-scale-07: calc(var(--space-scale-vertical) * 2.25);--leading-scale-08: calc(var(--space-scale-vertical) * 2.5);--leading-scale-09: calc(var(--space-scale-vertical) * 3);--leading-scale-10: calc(var(--space-scale-vertical) * 4);--leading-scale-11: calc(var(--space-scale-vertical) * 5);--type-scale: 16;--type-scale-01: 14;--type-scale-02: 16;--type-scale-03: 18;--type-scale-04: 20;--type-scale-05: 24;--type-scale-06: 28;--type-scale-07: 32;--type-scale-08: 36;--type-scale-09: 42;--type-scale-10: 48;--type-scale-11: 62;--type-scale-12: 84;--type-scale-13: 120;--font-size: calc((var(--type-scale) / 16) * 1rem);--font-01-size: calc((var(--type-scale-01) / 16) * 1rem);--font-02-size: calc((var(--type-scale-02) / 16) * 1rem);--font-03-size: calc((var(--type-scale-03) / 16) * 1rem);--font-04-size: calc((var(--type-scale-04) / 16) * 1rem);--font-05-size: calc((var(--type-scale-05) / 16) * 1rem);--font-06-size: calc((var(--type-scale-06) / 16) * 1rem);--font-07-size: calc((var(--type-scale-07) / 16) * 1rem);--font-08-size: calc((var(--type-scale-08) / 16) * 1rem);--font-09-size: calc((var(--type-scale-09) / 16) * 1rem);--font-10-size: calc((var(--type-scale-10) / 16) * 1rem);--font-11-size: calc((var(--type-scale-11) / 16) * 1rem);--font-12-size: calc((var(--type-scale-12) / 16) * 1rem);--font-13-size: calc((var(--type-scale-13) / 16) * 1rem);--line-height: calc(var(--leading-scale) / var(--type-scale));--font-01-line-height: calc( var(--leading-scale-01) / var(--type-scale-01) );--font-02-line-height: calc( var(--leading-scale-01) / var(--type-scale-02) );--font-03-line-height: calc( var(--leading-scale-02) / var(--type-scale-03) );--font-04-line-height: calc( var(--leading-scale-03) / var(--type-scale-04) );--font-04-line-height-large: calc( var(--leading-scale-04) / var(--type-scale-04) );--font-05-line-height: calc( var(--leading-scale-04) / var(--type-scale-05) );--font-06-line-height: calc( var(--leading-scale-05) / var(--type-scale-06) );--font-07-line-height: calc( var(--leading-scale-05) / var(--type-scale-07) );--font-08-line-height: calc( var(--leading-scale-06) / var(--type-scale-08) );--font-09-line-height: calc( var(--leading-scale-07) / var(--type-scale-09) );--font-10-line-height: calc( var(--leading-scale-08) / var(--type-scale-10) );--font-11-line-height: calc( var(--leading-scale-09) / var(--type-scale-11) );--font-12-line-height: calc( var(--leading-scale-10) / var(--type-scale-12) );--font-13-line-height: calc( var(--leading-scale-11) / var(--type-scale-13) );--font-stack: Inter, system-ui, sans-serif;--font-family: var(--font-next, var(--font-stack));--font-stack-monospaced: "Roboto Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--font-family-monospaced: var( --font-next-monospaced, var(--font-stack-monospaced) );--space-vertical: calc((var(--space-scale-vertical) / 16) * 1rem);--space-vertical-01: calc((var(--space-scale-vertical-01) / 16) * 1rem);--space-vertical-02: calc((var(--space-scale-vertical-02) / 16) * 1rem);--space-vertical-03: calc((var(--space-scale-vertical-03) / 16) * 1rem);--space-vertical-04: calc((var(--space-scale-vertical-04) / 16) * 1rem);--space-vertical-05: calc((var(--space-scale-vertical-05) / 16) * 1rem);--space-vertical-06: calc((var(--space-scale-vertical-06) / 16) * 1rem);--space-vertical-07: calc((var(--space-scale-vertical-07) / 16) * 1rem);--space-vertical-08: calc((var(--space-scale-vertical-08) / 16) * 1rem);--space-vertical-09: calc((var(--space-scale-vertical-09) / 16) * 1rem);--space-vertical-10: calc((var(--space-scale-vertical-10) / 16) * 1rem);--space-vertical-11: calc((var(--space-scale-vertical-11) / 16) * 1rem);--space-vertical-12: calc((var(--space-scale-vertical-12) / 16) * 1rem);--space-vertical-13: calc((var(--space-scale-vertical-13) / 16) * 1rem);--space-vertical-14: calc((var(--space-scale-vertical-14) / 16) * 1rem);--space-horizontal: calc((var(--space-scale-horizontal) / 16) * 1rem);--space-horizontal-01: calc((var(--space-scale-horizontal-01) / 16) * 1rem);--space-horizontal-02: calc((var(--space-scale-horizontal-02) / 16) * 1rem);--space-horizontal-03: calc((var(--space-scale-horizontal-03) / 16) * 1rem);--space-horizontal-04: calc((var(--space-scale-horizontal-04) / 16) * 1rem);--space-horizontal-05: calc((var(--space-scale-horizontal-05) / 16) * 1rem);--space-horizontal-06: calc((var(--space-scale-horizontal-06) / 16) * 1rem);--space-horizontal-07: calc((var(--space-scale-horizontal-07) / 16) * 1rem);--space-horizontal-08: calc((var(--space-scale-horizontal-08) / 16) * 1rem);--space-horizontal-09: calc((var(--space-scale-horizontal-09) / 16) * 1rem);--space-horizontal-10: calc((var(--space-scale-horizontal-10) / 16) * 1rem);--space-horizontal-11: calc((var(--space-scale-horizontal-11) / 16) * 1rem);--space-horizontal-12: calc((var(--space-scale-horizontal-12) / 16) * 1rem);--border-width: .0625rem ;--outline-width: .125rem ;--rule-height: .125rem ;--rule-width: 4rem ;--border-offset-card: .25rem ;--measured: 35.25em;--section-max-width: 76.25rem ;--site-header-height: var(--space-vertical-09);--border-radius-focus: .0625rem ;--border-radius-image: .25rem ;--border-radius-button: .5rem ;--border-radius-card: 1.125rem ;--corner-ratio-square: .16666667;--easing-cubic-bezier-easy-ease: cubic-bezier(.44, 0, .55, .94);--easing-cubic-bezier-ease-in: cubic-bezier(.44, 0, 1, 1);--easing-cubic-bezier-ease-out: cubic-bezier(0, 0, .55, .94);--easing-cubic-bezier-reverse-easy-ease: cubic-bezier(.96, .03, .53, .96);--color-brand: var(--color-azure-04);--color-rule: var(--color-azure-08);--color-background-emphasis: var(--color-white);--color-background: var(--color-grey-12);--color-text-contrast: var(--color-grey-12);--color-background-highlight: var(--color-grey-11);--color-border-light: var(--color-grey-10);--color-border: var(--color-grey-09);--color-non-text-muted: var(--color-grey-07);--color-text-muted: var(--color-grey-06);--color-text-prose: var(--color-grey-02);--color-text: var(--color-grey-01);--color-interactive: var(--color-brand);--color-interactive-hover: var(--color-azure-03);--color-interactive-focus: var(--color-rose-06);--color-interactive-active: var(--color-azure-02);--color-interactive-visited: var(--color-violet-05);--color-interactive-neutral: var(--color-text);--color-interactive-neutral-hover: var(--color-interactive);--color-interactive-neutral-active: var(--color-interactive-active);--color-interactive-prose: var(--color-azure-05);--color-interactive-prose-rule-active: var(--color-interactive-active);--color-interactive-contrast: var(--color-text-contrast);--box-shadow: .125rem .125rem .25rem color-mix(in srgb, var(--color-black) 08%, transparent);--box-shadow-light-source: none;--color-button-background: var(--color-background-emphasis);--color-card-background: var(--color-background-emphasis);--color-card-border: var(--color-rule);--color-card-dots-hover: var(--color-rule);--color-card-dots: var(--color-border-light);--color-card-interactive: var(--color-interactive);--color-card-text: var(--color-text);--color-code-border: var(--color-rule);--color-code-highlight-border: transparent;--color-copy-interactive: var(--color-interactive);--color-copy-interactive-hover: var(--color-interactive-hover);--color-copy-text: var(--color-text);--color-logo: var(--color-brand);--color-logo-neutral: var(--color-black);--color-site-header-background: var(--color-background);--site-header-box-shadow: 0 0 0 var(--border-width) var(--color-border-light)}@media(min-width:48em){:root{--site-header-height: var(--space-vertical-10)}}@media(forced-colors:active){:root{--color-logo: CanvasText;--color-logo-neutral: CanvasText}}@media(prefers-color-scheme:dark){:root{--color-brand: var(--color-azure-07);--color-rule: var(--color-azure-03);--color-background-emphasis: var(--color-grey-01);--color-background: var(--color-grey-02);--color-text-contrast: var(--color-grey-02);--color-background-highlight: var(--color-grey-03);--color-border-light: var(--color-grey-04);--color-border: var(--color-grey-05);--color-non-text-muted: var(--color-grey-06);--color-text-muted: var(--color-grey-07);--color-text-prose: var(--color-grey-10);--color-text: var(--color-grey-11);--color-interactive: var(--color-brand);--color-interactive-hover: var(--color-azure-06);--color-interactive-focus: var(--color-rose-05);--color-interactive-active: var(--color-azure-05);--color-interactive-visited: var(--color-violet-06);--color-interactive-neutral: var(--color-grey-12);--color-interactive-neutral-hover: var(--color-grey-09);--color-interactive-neutral-active: var(--color-grey-08);--color-interactive-prose: var(--color-interactive-hover);--color-interactive-prose-rule-active: var(--color-rule);--color-interactive-contrast: var(--color-text-contrast);--box-shadow: .125rem .125rem .25rem color-mix(in srgb, var(--color-black) 92%, transparent);--box-shadow-light-source: none;--color-button-background: var(--color-background-emphasis);--color-card-background: var(--color-background-emphasis);--color-card-border: var(--color-rule);--color-card-dots-hover: var(--color-rule);--color-card-dots: var(--color-border-light);--color-card-interactive: var(--color-interactive);--color-card-text: var(--color-text);--color-code-border: var(--color-rule);--color-code-highlight-border: var(--color-border);--color-copy-interactive: var(--color-interactive);--color-copy-interactive-hover: var(--color-interactive-hover);--color-copy-text: var(--color-text);--color-logo: var(--color-brand);--color-logo-neutral: var(--color-white);--color-site-header-background: var(--color-background);--site-header-box-shadow: 0 0 0 var(--border-width) var(--color-border-light)}@media(forced-colors:active){:root{--color-logo: CanvasText;--color-logo-neutral: CanvasText}}}@supports (font-variation-settings: normal){:root{--font-stack: InterVariable, system-ui, sans-serif}}@font-face{font-display:swap;font-family:InterVariable;font-style:normal;font-weight:100 900;src:url(/InterVariable.subset.woff2) format("woff2")}.translated-rtl{direction:rtl}*{box-sizing:border-box}:root{overscroll-behavior:none}:focus{outline:none}:focus-visible{border-radius:var(--border-radius-focus);outline:var(--outline-width) solid var(--color-interactive-focus);outline-offset:var(--outline-width)}html,body{block-size:100%}body{background:var(--color-background);color:var(--color-text);font-family:var(--font-family);font-feature-settings:"calt" 1,"ccmp" 1,"ss03" 1;font-optical-sizing:none;font-size:var(--font-01-size);line-height:var(--font-01-line-height);margin:0;-webkit-tap-highlight-color:color-mix(in srgb,var(--color-brand) 20%,transparent)}.visually-hidden{block-size:.0625rem;border:0;clip:rect(0,0,0,0);inline-size:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;white-space:nowrap}button{background:var(--color-button-background);border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius-button);color:var(--color-interactive-neutral);cursor:pointer;font-family:var(--font-family);font-size:var(--font-01-size);line-height:var(--font-01-line-height);padding-block:calc(var(--space-vertical-01) - var(--border-width));padding-inline:var(--space-horizontal-04)}button:focus-visible{border-radius:var(--border-radius-button)}@media(hover:hover){button:hover{color:var(--color-interactive-neutral-hover)}}button:active{color:var(--color-interactive-neutral-active)}.container{--outer-block-size: 3.75rem;container-type:inline-size;display:flex;flex-direction:column;inline-size:100%;min-block-size:100%}header{align-items:center;display:flex;inset-block-start:0;inset-inline:0;justify-content:space-between;padding-block:var(--space-vertical-03);padding-inline:var(--space-horizontal-04);position:sticky}aside{align-items:stretch;background-color:var(--color-background-emphasis);border:var(--border-width) solid var(--color-border);border-end-end-radius:var(--border-radius-card);border-inline-start:none;border-start-end-radius:var(--border-radius-card);box-shadow:var(--box-shadow);display:flex;flex-direction:column;inline-size:18rem;inset-block-start:var(--outer-block-size);inset-inline-start:0;justify-self:center;max-block-size:calc(100dvh - var(--outer-block-size) - var(--space-vertical-04));position:fixed}aside[hidden]{display:none}main{container-type:inline-size;display:flex;flex:1 0 auto;flex-direction:column;justify-content:center;padding-block:var(--space-vertical-03);padding-inline:var(--space-horizontal-05)}@container (min-inline-size: 48rem){main{padding-inline:var(--space-horizontal-07)}}@container (min-inline-size: 72rem){main{padding-block:var(--space-vertical-06)}.container:has(aside:not([hidden])) main{margin-inline-start:18rem}}@container (min-inline-size: 107.5rem){main{padding-block:var(--space-vertical-09)}}@container (min-inline-size: 140rem){main{padding-block:var(--space-vertical-12)}.container:has(aside:not([hidden])) main{margin-inline-start:0}}footer{align-items:center;display:flex;height:var(--outer-block-size);justify-content:space-between;padding-block:var(--space-vertical-03);padding-inline:var(--space-horizontal-06)}.header-title{align-items:center;display:flex;gap:var(--space-horizontal-03);margin-inline-start:var(--space-horizontal-03)}#settingsBtn{align-items:center;aspect-ratio:1 / 1;background-color:transparent;block-size:1.875rem;border:0;color:var(--color-interactive-neutral);cursor:pointer;display:flex;justify-content:center;line-height:1;padding:0}#settingsBtn:focus-visible{border-radius:var(--border-radius-focus)}@media(hover:hover){#settingsBtn:hover{color:var(--color-interactive-neutral-hover)}}#settingsBtn:active{color:var(--color-interactive-neutral-active)}h1{font-size:var(--font-05-size);font-weight:433;line-height:var(--font-05-line-height);margin:0}.header-actions{display:flex;gap:var(--space-horizontal-04);justify-content:flex-end;margin-inline-end:var(--space-horizontal-04)}.dropdown-menu{border-radius:var(--border-radius-button);position:relative}.dropdown-menu:has([aria-expanded=true]){box-shadow:var(--box-shadow)}.dropdown-button{font-variant-numeric:tabular-nums;min-inline-size:4.5rem}.dropdown-button[aria-expanded=true]{border-block-end-color:var(--color-border-light);border-end-end-radius:0;border-end-start-radius:0;position:relative;z-index:1}.dropdown-menu-panel{background-color:var(--color-background-emphasis);border:var(--border-width) solid var(--color-border);border-block-start:0;border-end-end-radius:var(--border-radius-button);border-end-start-radius:var(--border-radius-button);display:grid;inset-block-start:100%;inset-inline-end:0;min-inline-size:100%;padding-block-end:calc(var(--space-vertical-02) - var(--border-width));padding-block-start:var(--space-vertical-02);position:absolute}.dropdown-menu-panel[hidden]{display:none}.dropdown-menu-panel button,.dropdown-menu-panel [role=option]{background-color:transparent;border:none;border-radius:var(--border-radius-focus);cursor:pointer;font-variant-numeric:tabular-nums;inline-size:100%;padding-block:var(--space-vertical-01);padding-inline:var(--space-horizontal-04);text-align:right;white-space:nowrap}:is(.dropdown-menu-panel button,.dropdown-menu-panel [role=option]):focus-visible{border-radius:var(--border-radius-button);outline-offset:calc(-2 * var(--outline-width))}:is(.dropdown-menu-panel button,.dropdown-menu-panel [role=option])[aria-selected=true]{color:var(--color-interactive-prose)}:is(.dropdown-menu-panel button,.dropdown-menu-panel [role=option]):active{color:var(--color-interactive-active)}@media(hover:hover){:is(.dropdown-menu-panel button,.dropdown-menu-panel [role=option]):not([aria-selected=true]):hover{color:var(--color-interactive-neutral-hover)}}:is(.dropdown-menu-panel button,.dropdown-menu-panel [role=option]):not([aria-selected=true]):active{color:var(--color-interactive-neutral-active)}#generateBtn{background-color:var(--color-interactive);border-color:var(--color-interactive);color:var(--color-interactive-contrast)}@media(hover:hover){#generateBtn:hover{background-color:var(--color-interactive-hover)}}#generateBtn:active{background-color:var(--color-interactive-active)}#sketchContainer{background:var(--color-background);border-radius:var(--border-radius-image);box-shadow:var(--box-shadow);inline-size:100%;margin-inline:auto;max-inline-size:67.5rem;overflow:hidden}@container (min-inline-size: 103.5rem){#sketchContainer{max-inline-size:100rem}}canvas{block-size:auto;display:block;inline-size:100%}.control-header{background-color:var(--color-background-emphasis);border-block-end:var(--border-width) solid var(--color-border-light);border-start-end-radius:var(--border-radius-card);inline-size:100%;padding-block:var(--space-vertical-03);padding-inline:var(--space-horizontal-04)}.control-component{border:0;display:flex;gap:var(--space-horizontal-04);margin:0;padding-block:0;padding-inline:var(--space-horizontal-03)}.component-option{--mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMzYwIj48cGF0aCBkPSJNMzYwIDM2MFYyMjRDMzYwIDEwMC41IDI1OS41IDAgMTM2IDBIMHYxNjBoMTM2YzM1LjMgMCA2NCAyOC43IDY0IDY0djEzNmgxNjBaIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+PC9zdmc+);align-items:center;aspect-ratio:1 / 1;block-size:1.875rem;display:flex;justify-content:center;position:relative}.component-option:has(:focus-visible){border-radius:var(--border-radius-focus);outline:var(--outline-width) solid var(--color-interactive-focus);outline-offset:var(--outline-width)}.component-option:before{background-color:var(--color-background-emphasis);content:"";cursor:pointer;inset:var(--space-vertical-01);position:absolute}.component-option:after{background-color:var(--color-non-text-muted);content:"";cursor:pointer;forced-color-adjust:none;inset:var(--space-vertical-01);-webkit-mask:var(--mask-image) center / contain no-repeat;mask:var(--mask-image) center / contain no-repeat;position:absolute}@media(hover:hover){.component-option:hover:after{background-color:var(--color-interactive-neutral-hover)}}.component-option:has(input:checked):after{background-color:var(--color-interactive-neutral)}.component-option:has([value=ls]):after{--mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNjAgMzYwIj48cGF0aCBkPSJNMzYwIDIyNEMzNjAgMTAwLjUgMjU5LjUgMCAxMzYgMEgwdjM2MGgzNjBWMjI0WiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+)}.component-option:has([value=lt]):after{--mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MjAgNzIwIj48cGF0aCBkPSJNNDk2LDcyMEgyMjRDMTAwLjUsNzIwLDAsNjE5LjUsMCw0OTZWMjI0QzAsMTAwLjUsMTAwLjUsMCwyMjQsMGgyNzJjMTIzLjUsMCwyMjQsMTAwLjUsMjI0LDIyNHYyNzJjMCwxMjMuNS0xMDAuNSwyMjQtMjI0LDIyNGgwWiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+)}.component-option:has([value=ss]):after{--mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cGF0aCBkPSJNMjAwLDY0QzIwMCwyOC43LDE3MS4zLDAsMTM2LDBIMHYyMDBoMjAwVjY0aDBaIiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=)}.component-option:has([value=st]):after{--mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48cGF0aCBkPSJtNjQgMGMtMzUuMyAwLTY0IDI4LjctNjQgNjR2MjcyYzAgMzUuMyAyOC43IDY0IDY0IDY0aDI3MmMzNS4zIDAgNjQtMjguNyA2NC02NHYtMjcyYzAtMzUuMy0yOC43LTY0LTY0LTY0eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+)}.component-option:has([value=mx]):after{--mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MjAgNzIwIj48cGF0aCBkPSJNNDk2IDcyMEgyMjRDMTAwLjUgNzIwIDAgNjE5LjUgMCA0OTZWMjI0QzAgMTAwLjUgMTAwLjUgMCAyMjQgMGgyNzJjMTIzLjUgMCAyMjQgMTAwLjUgMjI0IDIyNHYyNzJjMCAxMjMuNS0xMDAuNSAyMjQtMjI0IDIyNFpNMjI0IDE2MGMtMzUuMyAwLTY0IDI4LjctNjQgNjR2MjcyYzAgMzUuMyAyOC43IDY0IDY0IDY0aDI3MmMzNS4zIDAgNjQtMjguNyA2NC02NFYyMjRjMC0zNS4zLTI4LjctNjQtNjQtNjRIMjI0WiIgZmlsbD0iY3VycmVudENvbG9yIiAvPjwvc3ZnPg==)}.control-main{display:flex;flex-direction:column;gap:var(--space-vertical-03);overflow-y:auto;padding-block:var(--space-vertical-03);padding-inline:var(--space-horizontal-04)}.control-section{background-color:var(--color-background-emphasis);border-radius:var(--border-radius-button);display:flex;flex-direction:column;gap:var(--space-vertical-03);outline:var(--border-width) solid var(--color-border-light);padding-block:var(--space-vertical-03)}.control-group{align-items:center;display:grid;gap:var(--space-horizontal-04);grid-template-columns:6ch 1fr 3ch;padding-inline:var(--space-horizontal-04)}.control-group label{color:var(--color-interactive-neutral);font-size:var(--font-01-size);line-height:var(--font-01-line-height);white-space:nowrap}.control-group:has([disabled]) :is(.control-group label){color:var(--color-text-muted)}.control-group input[type=range]{accent-color:var(--color-interactive);cursor:pointer;inline-size:100%;padding:0}.control-group input[type=range]:disabled{cursor:not-allowed;opacity:.4}@media(prefers-color-scheme:dark){.control-group input[type=range]:disabled{opacity:.1}}.control-group input[type=range]::-webkit-slider-thumb{background:var(--color-interactive)}.control-value{color:var(--color-text-prose);font-variant-numeric:tabular-nums;text-align:end}.control-group:has([disabled]) .control-value{color:var(--color-text-muted)}.control-footer{background-color:var(--color-background-emphasis);border-block-start:var(--border-width) solid var(--color-border-light);border-end-end-radius:var(--border-radius-card);display:grid;gap:var(--space-horizontal-04);grid-template-columns:1fr 1fr;inline-size:100%;margin-block-start:auto;padding-block:var(--space-vertical-03);padding-inline:var(--space-horizontal-04)}.control-footer button{inline-size:100%}.logo{color:var(--color-logo-neutral);display:flex}.trademark{align-self:flex-end;color:var(--color-interactive-neutral);text-decoration:none}.trademark:hover{color:var(--color-interactive-neutral-hover)}.trademark:active{color:var(--color-interactive-neutral-active)}