.dev-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px;border:none;border-radius:var(--dev-radius-control);min-height:var(--dev-control-height);box-sizing:border-box;font:var(--dev-text-label);cursor:pointer;touch-action:manipulation;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform var(--motion-press-duration) ease-out}.dev-surface{background:var(--sys-color-srf);border:0;box-shadow:var(--elevated-surface-shadow)}.dev-btn:before{content:"";position:absolute;inset:calc(var(--dev-btn-hit-inset, var(--dev-hit-inset)) * -1)}.dev-btn--align-start{justify-content:flex-start}.dev-btn--fill{width:100%}.dev-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto}.dev-btn__icon svg{display:block}.dev-btn:focus-visible{outline:2px solid var(--sys-color-outline);outline-offset:2px}.dev-btn:is(:active,[data-demo-pressed=true]):not(:disabled){transform:scale(var(--motion-press-scale))}.dev-btn:disabled{opacity:var(--dev-opacity-disabled);cursor:not-allowed;pointer-events:none}.dev-btn--ghost{background:var(--comp-button-ghost-container);color:var(--comp-button-label);min-width:0}@media(hover:hover)and (pointer:fine){.dev-btn--ghost:is(:hover,[data-demo-hover=true]){background:var(--comp-button-ghost-container-hover)}}.dev-btn--ghost.is-selected,.dev-btn--ghost.is-active,.dev-btn--ghost[aria-pressed=true]{background:var(--comp-button-ghost-container-selected)}.dev-btn--ghost:is(:active,[data-demo-pressed=true]){background:var(--comp-button-ghost-container-pressed)}.dev-btn--soft{background:var(--comp-button-soft-container);color:var(--comp-button-label);min-width:var(--dev-control-min-width)}@media(hover:hover)and (pointer:fine){.dev-btn--soft:is(:hover,[data-demo-hover=true]){background:var(--comp-button-soft-container-hover)}}.dev-btn--soft.is-selected,.dev-btn--soft.is-active,.dev-btn--soft[aria-pressed=true]{background:var(--comp-button-soft-container-selected)}.dev-btn--soft:is(:active,[data-demo-pressed=true]){background:var(--comp-button-soft-container-pressed)}.dev-btn--filled{background:var(--comp-button-filled-container);color:var(--comp-button-filled-label);min-width:var(--dev-control-min-width)}@media(hover:hover)and (pointer:fine){.dev-btn--filled:is(:hover,[data-demo-hover=true]){background:var(--comp-button-filled-container-hover)}}.dev-btn--filled:is(:active,[data-demo-pressed=true]){background:var(--comp-button-filled-container-hover)}.dev-btn--filled.is-selected,.dev-btn--filled.is-active,.dev-btn--filled[aria-pressed=true]{background:var(--comp-button-filled-container-selected)}.dev-btn--page{background:var(--comp-button-page-container);color:var(--comp-button-label);min-width:var(--dev-control-min-width)}@media(hover:hover)and (pointer:fine){.dev-btn--page:hover{background:var(--comp-button-page-container-hover)}}.dev-btn--page:active{background:var(--comp-button-page-container-pressed)}.dev-btn--page.is-selected,.dev-btn--page.is-active,.dev-btn--page[aria-pressed=true]{background:var(--comp-button-page-container-selected)}.dev-btn--danger{background:var(--comp-button-danger-container);color:var(--comp-button-danger-label);min-width:var(--dev-control-min-width)}@media(hover:hover)and (pointer:fine){.dev-btn--danger:hover{background:var(--comp-button-danger-container-hover)}}.dev-btn--danger:active{background:var(--comp-button-danger-container-pressed)}.dev-btn--danger.is-selected,.dev-btn--danger.is-active,.dev-btn--danger[aria-pressed=true]{background:var(--comp-button-danger-container-selected)}.dev-field{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--dev-panel-label-gap)}.dev-field__label{font:var(--dev-text-field-label);color:var(--sys-color-on-srf-variant)}.dev-field__label-row{display:flex;align-items:center;gap:6px;width:100%}.dev-field__value{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:8px;border-radius:var(--dev-radius-control);background:var(--comp-field-container);color:var(--sys-color-on-srf);font:var(--dev-text-label);box-sizing:border-box}.dev-field__input{background:transparent;border:none;outline:none;font:inherit;color:inherit;box-sizing:border-box;margin:-8px;padding:8px;width:calc(100% + 16px);min-width:0}.dev-field__value:has(>.dev-text-field){min-width:0;padding:0}.dev-text-field{position:relative;width:100%;min-width:0;overflow:hidden;box-sizing:border-box;border-radius:inherit;--dev-text-field-fade-width: 22px;--dev-text-field-caret-penetration: 4px;--dev-text-field-fade-solid: 8px;--dev-text-field-edge-gutter: 8px;--dev-text-field-fade-surface: var(--comp-field-container);--dev-text-field-trail-end: 0px}.dev-field:hover:not(.dev-field--quiet) .dev-text-field{--dev-text-field-fade-surface: var(--comp-button-soft-container-hover)}.dev-text-field:before,.dev-text-field:after{content:"";position:absolute;top:-1px;bottom:-1px;z-index:2;width:calc(var(--dev-text-field-fade-width) + 1px);opacity:0;pointer-events:none;background:var(--dev-text-field-fade-surface);transition:opacity .15s ease}.dev-text-field:before{left:-1px;-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(var(--dev-text-field-fade-solid) + 1px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(var(--dev-text-field-fade-solid) + 1px),transparent 100%)}.dev-text-field:after{right:-1px;-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(var(--dev-text-field-fade-solid) + 1px),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(var(--dev-text-field-fade-solid) + 1px),transparent 100%)}.dev-text-field.is-fade-left:before,.dev-text-field.is-fade-right:after{opacity:1}.dev-text-field__track{position:relative;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline:calc(var(--dev-text-field-fade-width) - var(--dev-text-field-caret-penetration) - var(--dev-text-field-edge-gutter));-webkit-clip-path:inset(0 1px);clip-path:inset(0 1px)}.dev-text-field__track::-webkit-scrollbar{display:none}.dev-field:has(.dev-text-field input:not(:disabled)) :where(.dev-field__value,.dev-field__value *,.dev-field__label,.dev-field__label *){cursor:text}.dev-text-field__content{position:relative;min-width:0;box-sizing:border-box;display:inline-flex;align-items:center;width:max-content;min-width:100%;padding-block:8px;padding-inline-start:var(--dev-text-field-edge-gutter);padding-inline-end:calc(var(--dev-text-field-edge-gutter) + var(--dev-text-field-trail-end, 0px))}.dev-text-field__prefix{flex:none;color:var(--sys-color-on-srf-variant);user-select:none;pointer-events:none;white-space:nowrap}.dev-text-field__track .dev-field__input{display:block;flex:1 0 auto;width:auto;min-width:0;margin:0;padding:0;box-sizing:border-box}.dev-text-field.is-caret-outside .dev-field__input{caret-color:transparent}.dev-text-field__measure{position:absolute;top:0;left:0;visibility:hidden;white-space:pre;pointer-events:none;user-select:none}#component-ui-text-field .component-preview .dev-field~.dev-field{margin-top:var(--space-unit)}@media(min-width:40em){#component-ui-text-field .dev-field{width:calc(100% / 3)}}.dev-field__value:has(.dev-text-field):focus-within:not(.is-error){box-shadow:none}.dev-field:hover:not(.dev-field--quiet) .dev-field__value{background:var(--comp-button-soft-container-hover)}.dev-field__input:disabled{opacity:var(--dev-opacity-disabled)}.dev-field__input--area{line-height:1.4;resize:vertical;field-sizing:content;min-height:calc(1.4em * var(--rows, 3) + 16px);min-width:calc(100% + 16px)}.dev-field__input--select{appearance:none;-webkit-appearance:none;cursor:pointer;margin:-4px;padding:12px 28px 12px 12px;width:calc(100% + 8px)}.dev-field__input--select:disabled{cursor:not-allowed}.dev-field__value:focus-within{box-shadow:inset 0 0 0 1.5px var(--sys-color-on-srf)}.dev-field__value:has(.dev-select__trigger:focus:not(:focus-visible)){box-shadow:none}.dev-field__value:has(.dev-field__input--select){position:relative;padding:0}.dev-field__value:has(.dev-field__input--select):after{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;background:var(--comp-button-label-subtle);mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') center / 14px 14px no-repeat}.dev-select__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.dev-select__trigger{display:flex;align-items:center;justify-content:flex-start;gap:8px;text-align:left}.dev-select__trigger-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px}.dev-select__trigger-icon:empty{display:none}.dev-select__trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-select__listbox[popover]{position:fixed;inset:unset;right:auto;bottom:auto;height:fit-content;z-index:200;display:none;overlay:none;flex-direction:column;gap:0;margin:0;border:0;padding:4px;list-style:none;background:var(--sys-color-srf);overflow:visible;border-radius:var(--dev-radius-control-in-container);box-shadow:var(--elevated-surface-shadow);opacity:0;user-select:none;-webkit-user-select:none;transition:opacity var(--motion-press-duration) ease,overlay var(--motion-press-duration) ease allow-discrete,display var(--motion-press-duration) ease allow-discrete}.dev-select__listbox[popover]:popover-open{display:flex;overlay:auto;opacity:1}.dev-select__listbox[popover]:popover-open.is-closing{opacity:0}@starting-style{.dev-select__listbox[popover]:popover-open{opacity:0}}.dev-select__option{min-height:var(--dev-control-height);border:0;box-shadow:none;--dev-btn-hit-inset: 0;transform:none;user-select:none;-webkit-user-select:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dev-select__option.is-active{background:var(--comp-field-container)}.dev-select__listbox.is-keyboard .dev-select__option:hover{background:var(--comp-button-ghost-container)}.dev-select__listbox.is-keyboard .dev-select__option.is-active{background:var(--comp-field-container)}.dev-select__option:active:not(:disabled){transform:none;background:var(--comp-button-ghost-container-pressed)}.dev-select__option[aria-selected=true]:active:not(:disabled){background:var(--comp-button-soft-container-pressed)}.dev-select__option-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px}.dev-select__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-field--no-label .dev-field__label-row{display:none}.dev-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}.dev-toggle:has(.dev-toggle__checkbox:disabled){opacity:var(--dev-opacity-disabled)}.dev-toggle__box{position:relative;display:inline-flex;width:16px;height:16px}.dev-toggle__checkbox{position:absolute;inset:0;width:16px;height:16px;border-radius:var(--dev-radius-checkbox);border:1px solid var(--sys-color-outline);background:var(--sys-color-srf);appearance:none;cursor:pointer;margin:0}.dev-toggle__checkbox:hover{background:var(--comp-button-ghost-container-hover)}.dev-toggle__checkbox:checked{background:var(--comp-button-filled-container);border-color:var(--comp-button-filled-container)}.dev-toggle__checkbox:checked:hover{background:var(--comp-button-filled-container-hover);border-color:var(--comp-button-filled-container-hover)}.dev-toggle__checkbox:disabled{cursor:not-allowed}.dev-toggle__check{position:absolute;inset:0;margin:auto;color:var(--comp-button-filled-label);opacity:0;pointer-events:none;transition:opacity .15s ease}.dev-toggle__checkbox:checked~.dev-toggle__check{opacity:1}.dev-toggle__label{font:var(--dev-text-label);color:var(--sys-color-on-srf)}.dev-segmented{display:flex;width:100%;align-items:center;gap:4px;padding:var(--dev-control-padding);background:var(--comp-segmentedcontrol-bg);border-radius:var(--dev-radius-control-in-container);--dev-segmented-selected-fill: var(--comp-button-page-container-selected)}.dev-segmented .dev-btn{padding:6px 8px;min-height:28px;flex:1 1 0;min-width:0;color:var(--sys-color-on-srf-variant);--dev-btn-hit-inset: 0px}.dev-segmented .dev-btn--fill{width:0}.dev-segmented .dev-btn.is-selected,.dev-segmented .dev-btn.is-active,.dev-segmented .dev-btn[aria-pressed=true]{background:var(--dev-segmented-selected-fill);color:var(--comp-button-label);box-shadow:none}@media(hover:hover)and (pointer:fine){.dev-segmented .dev-btn.is-selected:hover,.dev-segmented .dev-btn.is-active:hover,.dev-segmented .dev-btn[aria-pressed=true]:hover{background:var(--dev-segmented-selected-fill)}.dev-segmented .dev-btn:hover:not(.is-selected):not(.is-active):not([aria-pressed=true]){background:color-mix(in oklch,var(--dev-segmented-selected-fill) 50%,transparent)}}.dev-segmented .dev-btn:active:not(.is-selected):not(.is-active):not([aria-pressed=true]){background:color-mix(in oklch,var(--dev-segmented-selected-fill) 75%,transparent)}.dev-eye{position:absolute;z-index:1;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;padding:2px;border:0;border-radius:var(--dev-radius-control-in-container);background:var(--sys-color-srf-container);color:var(--sys-color-on-srf);cursor:pointer}.dev-eye svg{display:block;width:16px;height:16px}.dev-eye[hidden]{display:none}.dev-panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;padding-top:var(--dev-panel-spacing)}.dev-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:5px;background:var(--comp-button-soft-container);color:var(--sys-color-on-srf);font:var(--dev-text-badge);white-space:nowrap}.dev-hairline{display:block;width:100%;height:1px;background:var(--sys-color-outline);flex:0 0 auto}.dev-hairline--vertical{width:1px;height:14px;align-self:center;background:var(--sys-color-outline-variant);flex:0 0 1px}.dev-panel{display:flex;flex-direction:column;gap:var(--dev-panel-gap);padding:var(--dev-panel-pad);border-radius:var(--dev-radius-panel);color:var(--sys-color-on-srf);font-family:var(--font-sans)}.dev-panel--portrait{width:var(--dev-panel-width)}.dev-panel--landscape{width:var(--dev-panel-width-landscape);min-width:var(--dev-panel-min-width-landscape);max-width:100%;resize:both;overflow:auto}.dev-panel__header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:var(--dev-panel-spacing);width:100%}.dev-panel__title{margin:0;font:var(--dev-text-panel-title);color:var(--sys-color-on-srf-variant)}.dev-panel__lights{display:flex;align-items:center;gap:8px;flex:0 0 auto}.dev-panel__light{width:15px;height:15px;border-radius:8px;background:var(--comp-traffic-light-rest)}.dev-panel__lights:hover .dev-panel__light:first-child{background:var(--comp-traffic-light-minimize-hover)}.dev-panel__lights:hover .dev-panel__light:last-child{background:var(--comp-traffic-light-hide-hover)}.dev-panel__body{display:flex;flex-direction:column;gap:var(--dev-panel-content-gap);width:100%}.dev-drop{display:flex;align-items:center;justify-content:center;width:100%;padding:8px;border-radius:16px;background:var(--comp-droparea-rest);box-sizing:border-box;cursor:default}.dev-drop:hover{background:var(--comp-droparea-hover)}.dev-drop:focus,.dev-drop:focus-visible,.dev-drop.is-dragover{outline:none;background:var(--comp-droparea-pressed)}.dev-drop__well{display:flex;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:90px;padding-block:12px;border:1px dashed var(--sys-color-outline);border-radius:var(--dev-radius-control);color:var(--sys-color-on-srf-variant);font:var(--dev-text-status);text-align:center}.dev-drop__label{display:flex;align-items:center;justify-content:center;margin:0;padding:8px;box-sizing:border-box;min-height:var(--dev-control-height)}.dev-drop.is-dragover .dev-drop__well{border-color:var(--sys-color-on-srf);color:var(--sys-color-on-srf)}.dev-btn[hidden],.dev-btn__icon[hidden],.dev-field[hidden],.dev-field__value[hidden],.dev-toggle[hidden],.dev-toggle__box[hidden],.dev-segmented[hidden],.dev-panel-actions[hidden],.dev-badge[hidden],.dev-hairline[hidden],.dev-drop[hidden],.dev-drop__well[hidden],.dev-panel[hidden],.dev-panel__header[hidden],.dev-panel__lights[hidden],.dev-panel__body[hidden]{display:none}.dev-launcher{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;display:flex;flex-direction:column;gap:4px;min-width:10em}.dev-field .dev-field-overflow{overflow-x:auto;overflow-y:hidden;white-space:nowrap;text-overflow:clip;scrollbar-width:none}.dev-field .dev-field-overflow::-webkit-scrollbar{display:none}.dev-field__overflow-content{display:block;min-width:0;width:100%}