.sidebarControl {
    --sidebar-control-panel-bg: color-mix(in srgb, var(--c-surface-solid) 86%, transparent);
    --sidebar-control-icon-color: color-mix(in srgb, var(--c-icon) 72%, transparent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-icon) 6%, transparent);

    min-width: 0;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: grid;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: var(--c-surface-interactive);
    box-shadow: var(--shadow-1);
    transition:
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        box-shadow var(--ease-fast),
        color var(--ease-fast),
        opacity var(--ease-fast);
}

.sidebarControl--button,
.sidebarControl--toggle {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.sidebarControl--placeholder {
    cursor: default;
    user-select: none;
}

.sidebarControl--withIcon {
    grid-template-columns: var(--sidebar-control-icon) minmax(0, 1fr);
    gap: var(--sidebar-control-inset);
    text-align: left;
}

.sidebarControl--textLeft {
    text-align: left;
}

.sidebarControl--textLeft .sidebarControl__text {
    justify-self: stretch;
    margin-left: calc(var(--sidebar-control-inset) * 3);
    text-align: left;
}

.sidebarControl--button.sidebarControl--withIcon:not(.sidebarControl--iconOnly) .sidebarControl__text,
.sidebarControl--toggle.sidebarControl--withIcon:not(.sidebarControl--iconOnly) .sidebarControl__text,
.sidebarControl--button.sidebarControl--loading .sidebarControl__text,
.sidebarControl--toggle.sidebarControl--loading .sidebarControl__text {
    margin-left: calc(var(--sidebar-control-inset) * 3);
}

.sidebarControl--textCenter {
    text-align: center;
}

.sidebarControl--textCenter .sidebarControl__text {
    justify-self: center;
    text-align: center;
}

.sidebarControl--iconOnly {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.sidebarControl--hover:hover {
    --sidebar-control-icon-color: var(--c-font);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-font) 9%, transparent);

    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarControl--active,
.sidebarControl--button:active,
.sidebarControl--toggle:active {
    --sidebar-control-icon-color: var(--c-accent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-accent) 12%, transparent);

    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
    box-shadow: var(--shadow-1);
}

.sidebarControl--variant-primary {
    --sidebar-control-icon-color: var(--c-accent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-accent) 10%, transparent);

    color: var(--c-font);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-active-bg);
}

.sidebarControl--variant-secondary {
    background: color-mix(in srgb, var(--c-surface-solid) 72%, var(--c-surface-interactive));
}

.sidebarControl--variant-ghost {
    box-shadow: none;
    background: transparent;
}

.sidebarControl:focus-visible,
.sidebarControlSegment:focus-visible,
.sidebarControl__range:focus-visible,
.sidebarControl__numberInput:focus-visible {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.sidebarControl--alarm,
.sidebarControl--variant-alarm {
    --sidebar-control-icon-color: var(--c-alarm);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-alarm) 10%, transparent);

    color: var(--c-alarm);
    border-color: color-mix(in srgb, var(--c-alarm) 68%, var(--c-border));
    background: color-mix(in srgb, var(--c-alarm) 12%, var(--c-surface-interactive));
}

.sidebarControl__icon {
    width: calc(var(--sidebar-control-icon) - (var(--sidebar-control-inset) * 2));
    height: calc(var(--sidebar-control-icon) - (var(--sidebar-control-inset) * 2));
    display: grid;
    place-items: center;
    margin: var(--sidebar-control-inset);
    color: var(--sidebar-control-icon-color, var(--c-icon-muted));
    border-radius: var(--sidebar-control-icon-radius);
    background: var(
        --sidebar-control-icon-bg,
        color-mix(in srgb, var(--c-icon) 6%, transparent)
    );
    transition: color var(--ease-fast), background-color var(--ease-fast);
}

.sidebarControl__iconGlyph,
.sidebarControl__iconImage {
    width: calc(100% - var(--pad-1));
    height: calc(100% - var(--pad-1));
    display: block;
}

.sidebarControl__iconGlyph {
    background: currentColor;
    -webkit-mask-image: var(--sidebar-control-icon-source);
    mask-image: var(--sidebar-control-icon-source);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-mode: alpha;
}

.sidebarControl__iconImage {
    object-fit: contain;
}

.sidebarControl__text {
    min-width: 0;
    display: grid;
    gap: 1px;
    padding: 0;
}

.sidebarControl__title,
.sidebarControl__subtitle,
.sidebarControl__value,
.sidebarControl__numberInput,
.sidebarControlSegment__title,
.sidebarControlSegment {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControl__subtitle {
    color: var(--c-font-muted);
    font: var(--font-console);
}

.sidebarControl--slider {
    grid-template-columns: minmax(0, 1fr) minmax(44px, auto);
    gap: 1px;
    height: auto;
    min-height: var(--sidebar-control-height);
    padding: var(--pad-1) 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--slider .sidebarControl__title {
    color: var(--c-font-muted);
}

.sidebarControl__value {
    min-width: 44px;
    justify-self: end;
    color: var(--c-accent);
    font: var(--font-console);
    font-family: var(--font-numeric);
    text-align: right;
}

.sidebarSlider {
    grid-column: 1 / -1;
    --slider-percent: 50%;
    --slider-track-size: var(--sidebar-control-slider-height);
    --slider-marker-width: 2px;
    --slider-hit-width: 12px;
    display: block;
    position: relative;
    height: var(--sidebar-control-slider-height);
    width: 100%;
}

.sidebarSlider__track,
.sidebarSlider__fill,
.sidebarSlider__marker {
    position: absolute;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}

.sidebarSlider__track {
    inset-inline: 0;
    height: var(--slider-track-size);
    border-radius: var(--sidebar-control-slider-radius);
    background: var(--c-slider-track);
}

.sidebarSlider__fill {
    left: 0;
    width: var(--slider-percent);
    height: var(--slider-track-size);
    border-radius: var(--sidebar-control-slider-radius) 0 0 var(--sidebar-control-slider-radius);
    background: var(--c-slider-fill);
}

.sidebarSlider__marker {
    left: var(--slider-percent);
    width: var(--slider-marker-width);
    height: var(--slider-track-size);
    background: var(--c-slider-marker);
    transform: translate(-50%, -50%);
}

.sidebarControl__range {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: var(--slider-track-size);
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

.sidebarControl__range::-webkit-slider-runnable-track {
    height: var(--slider-track-size);
    border: 0;
    background: transparent;
}

.sidebarControl__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--slider-hit-width);
    height: var(--slider-track-size);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl__range::-moz-range-thumb {
    width: var(--slider-hit-width);
    height: var(--slider-track-size);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl__range::-moz-range-track {
    height: var(--slider-track-size);
    border: 0;
    background: transparent;
}

.sidebarSlider:focus-within .sidebarSlider__fill {
    background: var(--c-accent);
}


.sidebarControl__numberInput {
    width: 76px;
    min-height: calc(var(--sidebar-control-height) - ((var(--sidebar-control-inset) + var(--border-1)) * 2));
    padding: 0 var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    font-family: var(--font-numeric);
    text-align: right;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-solid) 82%, transparent);
}

.sidebarControl__numberInput:focus {
    border-color: var(--c-accent);
    outline: none;
}


.sidebarControlSegment {
    --sidebar-control-icon-color: color-mix(in srgb, var(--c-icon) 72%, transparent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-icon) 6%, transparent);

    min-height: var(--sidebar-control-segment-height);
    color: var(--c-font-muted);
    font: var(--font-button);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 82%, transparent);
    cursor: pointer;
}

.sidebarControlSegment:hover {
    --sidebar-control-icon-color: var(--c-font);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-font) 9%, transparent);

    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarControlSegment:active,
.sidebarControlSegment.sidebarControl--active,
.sidebarControlSegment.is-active {
    --sidebar-control-icon-color: var(--c-accent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-accent) 12%, transparent);

    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarControl--segmentedSelector {
    grid-template-columns:
        minmax(0, var(--segmented-label-weight, 1fr))
        repeat(var(--segmented-options, 3), minmax(0, 1fr));
    gap: 0;
    padding: var(--sidebar-control-inset);
}

.sidebarControl--segmentedSelectorNoLabel {
    grid-template-columns: repeat(var(--segmented-options, 3), minmax(0, 1fr));
}

.sidebarControl--segmentedSelectorSquareOptions {
    grid-template-columns:
        minmax(0, 1fr)
        repeat(var(--segmented-options, 3), var(--sidebar-control-segment-height));
}

.sidebarSegmentedSelector__label,
.sidebarSegmentedSelector__option {
    min-width: 0;
    min-height: var(--sidebar-control-segment-height);
}

.sidebarSegmentedSelector__label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 0 var(--pad-3);
    color: var(--c-font);
    border: 0;
    background: transparent;
}

.sidebarSegmentedSelector__label .sidebarControl__title {
    color: var(--c-font);
}

.sidebarSegmentedSelector__label .sidebarControl__subtitle {
    color: var(--c-font-muted);
}

.sidebarSegmentedSelector__label--withIcon,
.sidebarSegmentedSelector__option--withIcon {
    grid-template-columns:
        calc(var(--sidebar-control-segment-height) - (var(--pad-1) * 2))
        minmax(0, 1fr);
    gap: var(--sidebar-control-inset);
    text-align: left;
}

.sidebarSegmentedSelector__labelText,
.sidebarSegmentedSelector__optionText {
    min-width: 0;
    display: grid;
    gap: 0;
}

.sidebarSegmentedSelector__labelText {
    text-align: left;
}

.sidebarSegmentedSelector__optionText {
    text-align: center;
}

.sidebarSegmentedSelector__option {
    display: grid;
    place-items: center;
    padding: 0 var(--sidebar-control-inset);
    border: 0;
    border-left: var(--border-1) solid var(--c-border);
    border-radius: 0;
    background: transparent;
}

.sidebarControl--segmentedSelectorNoLabel .sidebarSegmentedSelector__option:first-child {
    border-left: 0;
}

.sidebarSegmentedSelector__option--withIcon {
    place-items: center stretch;
}

.sidebarSegmentedSelector__option--iconOnly {
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 0;
}

.sidebarSegmentedSelector__option--withIcon .sidebarSegmentedSelector__optionText {
    text-align: left;
}

.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option:hover {
    color: var(--c-accent);
    border-left-color: var(--c-border);
    background: var(--c-control-hover-bg);
}

.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option:active,
.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option.sidebarControl--active,
.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option.is-active {
    color: var(--c-font);
    border-left-color: var(--c-border);
    background: var(--c-control-active-bg);
}

.sidebarSegmentedSelector__icon.sidebarControl__icon {
    width: calc(var(--sidebar-control-segment-height) - (var(--pad-1) * 2));
    height: calc(var(--sidebar-control-segment-height) - (var(--pad-1) * 2));
    margin: 0;
}

.sidebarSegmentedSelector__option--iconOnly .sidebarSegmentedSelector__icon {
    width: var(--sidebar-control-segment-height);
    height: var(--sidebar-control-segment-height);
}

.sidebarSegmentedSelector__subtitle {
    min-width: 0;
    overflow: hidden;
    color: var(--c-font-muted);
    font: var(--font-console);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarSegmentedSelector__option.sidebarControl--active .sidebarSegmentedSelector__subtitle,
.sidebarSegmentedSelector__option.is-active .sidebarSegmentedSelector__subtitle {
    color: color-mix(in srgb, var(--c-accent) 72%, var(--c-font-muted));
}

.sidebarControl--buttonGroup {
    grid-template-columns: repeat(var(--items, 3), minmax(0, 1fr));
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--buttonGroupWrapped {
    height: auto;
    grid-auto-rows: var(--sidebar-control-segment-height);
}

.sidebarControl--buttonGroup .sidebarControlSegment {
    min-width: 0;
    min-height: var(--sidebar-control-segment-height);
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--c-font-muted);
    font: var(--font-button);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 82%, transparent);
    cursor: pointer;
}

.sidebarControl--buttonGroup .sidebarControlSegment:hover {
    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarControl--buttonGroup .sidebarControlSegment:active,
.sidebarControl--buttonGroup .sidebarControlSegment.is-active {
    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarControlSegment__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControl--variant-danger,
.sidebarControl--danger,
.sidebarControl--buttonGroup .sidebarControlSegment.sidebarControl--variant-danger {
    --sidebar-control-icon-color: var(--c-danger);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-danger) 10%, transparent);

    color: var(--c-danger);
    border-color: color-mix(in srgb, var(--c-danger) 58%, var(--c-border));
}

.sidebarControl--variant-danger:hover,
.sidebarControl--danger:hover,
.sidebarControl--buttonGroup .sidebarControlSegment.sidebarControl--variant-danger:hover {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface-interactive));
}

.sidebarControl--variant-danger:active,
.sidebarControl--danger:active,
.sidebarControl--buttonGroup .sidebarControlSegment.sidebarControl--variant-danger:active {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 18%, var(--c-surface-interactive));
}

.sidebarControl:disabled,
.sidebarControlSegment:disabled {
    color: var(--c-font-muted);
    filter: saturate(0.45);
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.sidebarControl--loading {
    grid-template-columns: var(--sidebar-control-icon) minmax(0, 1fr);
    pointer-events: none;
    opacity: 0.78;
}

.sidebarControl__spinner {
    width: calc(var(--sidebar-control-icon) - 2px);
    height: calc(var(--sidebar-control-icon) - 2px);
    border: 2px solid color-mix(in srgb, var(--c-accent) 28%, transparent);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: sidebarControlSpin 800ms linear infinite;
}

@keyframes sidebarControlSpin {
    to { transform: rotate(360deg); }
}

.sidebarControlNested {
    --sidebar-control-panel-bg: var(
        --sidebar-section-content-accent,
        color-mix(in srgb, var(--c-accent) 16%, var(--c-surface-glass))
    );
    --sidebar-control-panel-background: var(
        --sidebar-section-content-background,
        linear-gradient(to bottom, var(--sidebar-control-panel-bg), var(--c-surface-glass))
    );

    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
}

.sidebarControlNested.is-open {
    row-gap: 0;
}

.sidebarAnchoredSubmenuRow {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap-1);
    row-gap: var(--gap-1);
}

.sidebarAnchoredSubmenuRow.is-open {
    row-gap: 0;
}

.sidebarControlNested--anchoredRow {
    display: contents;
}

.sidebarControl--submenuButton[aria-expanded="true"] {
    grid-column: 1 / -1;
    color: var(--c-font);
    border-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 24%, var(--c-surface-interactive));
}

.sidebarControlNested.is-open > .sidebarControl--submenuButton {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

.sidebarControl--submenuButton[aria-expanded="false"] {
    grid-column: 1 / -1;
}

.sidebarControlPanel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
    padding: var(--pad-2);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: var(--sidebar-control-panel-background);
    box-shadow: var(--shadow-1);
}

.sidebarGuide {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--gap-1);
    padding: var(--pad-2);
    color: var(--c-font-muted);
    border: 0;
    border-radius: var(--radius-2);
    background: var(--c-control-active-bg);
}

.sidebarGuide[hidden] {
    display: none;
}

.sidebarGuide__title {
    color: var(--c-accent);
    font: var(--font-button);
}

.sidebarGuide__content {
    min-width: 0;
    display: grid;
    gap: var(--gap-1);
    font: var(--font-console);
}

.sidebarGuide__description,
.sidebarGuide__instructions {
    margin: 0;
}

.sidebarGuide__instructions {
    padding-left: calc(var(--pad-2) * 2);
}

.sidebarColorRampLegend {
    min-width: 0;
    margin: 0;
    display: grid;
    gap: var(--gap-1);
}

.sidebarColorRampLegend__ramp {
    width: 100%;
    height: var(--btn-slim-h);
    display: block;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background-size: 100% 100%;
}

.sidebarColorRampLegend__ramp.is-clipped-before {
    border-left-color: var(--c-danger);
    box-shadow: inset 3px 0 0 var(--c-danger);
}

.sidebarColorRampLegend__ramp.is-clipped-after {
    border-right-color: var(--c-danger);
    box-shadow: inset -3px 0 0 var(--c-danger);
}

.sidebarColorRampLegend__ramp.is-clipped-before.is-clipped-after {
    box-shadow: inset 3px 0 0 var(--c-danger), inset -3px 0 0 var(--c-danger);
}

.sidebarColorRampLegend__ticks {
    height: calc(var(--btn-slim-h) * 0.6);
    position: relative;
    display: block;
}

.sidebarColorRampLegend__tick {
    width: var(--border-1);
    height: var(--pad-2);
    position: absolute;
    top: 0;
    display: block;
    background: var(--c-border);
    transform: translateX(-50%);
}

.sidebarColorRampLegend__tickLabel {
    position: absolute;
    top: var(--pad-2);
    left: 50%;
    color: var(--c-font-muted);
    font: var(--font-button);
    transform: translateX(-50%);
    white-space: nowrap;
}

.sidebarColorRampLegend__labels {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
    color: var(--c-font-muted);
    font: var(--font-button);
}

.sidebarColorRampLegend__labels > :last-child {
    text-align: right;
}

.sidebarColorRampLegend__meta {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControlPanel[hidden] {
    display: none;
}

.sidebarControlGroup {
    min-width: 0;
    display: grid;
    gap: var(--gap-1);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControlGroup + .sidebarControlGroup {
    margin-top: var(--pad-1);
    padding-top: var(--pad-2);
    border-top: var(--border-1) solid color-mix(in srgb, var(--c-border) 72%, transparent);
}

.sidebarControlNested.is-open > .sidebarControlPanel {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}

.sidebarDropdownIcon,
.exampleFoldableSection__summary::after {
    width: var(--sidebar-control-icon);
    height: var(--sidebar-control-icon);
    display: block;
    flex: 0 0 var(--sidebar-control-icon);
    color: var(--c-icon-muted);
    background: currentColor;
    mask: url("../../../public/assets/icons/sidebar/controls/dropdown.svg") center / contain no-repeat;
    -webkit-mask: url("../../../public/assets/icons/sidebar/controls/dropdown.svg") center / contain no-repeat;
    opacity: 0.72;
    --sidebar-dropdown-icon-rotation: 0deg;
    --sidebar-dropdown-icon-scale-y: 1;
    transform: rotate(var(--sidebar-dropdown-icon-rotation)) scaleY(var(--sidebar-dropdown-icon-scale-y));
    transition: color var(--ease-fast), opacity var(--ease-fast), transform var(--ease-fast);
}

.sidebarPreviewGridSelect__trigger {
    grid-template-columns:
        var(--sidebar-control-segment-height)
        minmax(0, 1fr)
        var(--sidebar-control-icon);
    gap: var(--sidebar-control-inset);
    text-align: left;
}

.sidebarPreviewGridSelect__trigger--withoutPreview {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-control-icon);
}

.sidebarPreviewGridSelect__trigger .sidebarControl__text {
    justify-self: stretch;
    text-align: left;
}

.sidebarPreviewGridSelect__trigger:hover .sidebarDropdownIcon,
.sidebarPreviewGridSelect__trigger[aria-expanded="true"] .sidebarDropdownIcon {
    color: var(--c-accent);
    opacity: 1;
}

.sidebarPreviewGridSelect__trigger[aria-expanded="true"] .sidebarDropdownIcon {
    --sidebar-dropdown-icon-scale-y: 1.08;
}

.sidebarPreviewGridSelect__panel {
    padding: var(--pad-2);
}

.sidebarPreviewGridSelect__grid {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--preview-grid-columns, 4), minmax(0, 1fr));
    gap: var(--gap-1);
}

.sidebarPreviewGridSelect__groupLabel {
    grid-column: 1 / -1;
    color: var(--c-font-muted);
    font: var(--font-console);
    text-transform: uppercase;
}

.sidebarPreviewGridSelect__option {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--pad-1);
    padding: var(--pad-1);
    color: var(--c-font-muted);
    font: var(--font-console);
    border: var(--border-1) solid color-mix(in srgb, var(--c-border) 82%, transparent);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 78%, transparent);
    cursor: pointer;
    transition:
        color var(--ease-fast),
        border-color var(--ease-fast),
        background-color var(--ease-fast),
        box-shadow var(--ease-fast);
}

.sidebarPreviewGridSelect__option:hover {
    color: var(--c-font);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarPreviewGridSelect__option.is-selected {
    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
    box-shadow: inset 0 0 0 var(--border-1) color-mix(in srgb, var(--c-accent) 34%, transparent);
}

.sidebarPreviewGridSelect__option:focus-visible {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.sidebarPreviewGridSelect__preview {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(circle at 45% 38%, color-mix(in srgb, var(--c-font-muted) 22%, transparent), transparent 66%),
        color-mix(in srgb, var(--c-surface-solid) 84%, transparent);
}

.sidebarPreviewGridSelect__preview--trigger {
    width: var(--sidebar-control-segment-height);
    height: var(--sidebar-control-segment-height);
}

.sidebarPreviewGridSelect__preview--option {
    width: 100%;
    aspect-ratio: 1;
}

.sidebarPreviewGridSelect__preview--option[style*="background-image"] {
    height: var(--sidebar-control-slider-height);
    aspect-ratio: auto;
    border-radius: 0;
}

.sidebarPreviewGridSelect__preview[style*="background-image"] {
    background-size: 100% 100%;
}

.sidebarPreviewGridSelect__canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.sidebarPreviewGridSelect__aspectFrame {
    width: calc(100% - (var(--pad-2) * 2));
    max-height: calc(100% - (var(--pad-2) * 2));
    aspect-ratio: var(--aspect-preview-ratio);
    border: var(--border-1) solid currentColor;
    border-radius: 0;
}

.sidebarPreviewGridSelect__aspectFrame.is-portrait {
    width: auto;
    height: calc(100% - (var(--pad-2) * 2));
}

.sidebarPreviewGridSelect__guideFrame {
    width: calc(100% - (var(--pad-2) * 2));
    max-height: calc(100% - (var(--pad-2) * 2));
    aspect-ratio: var(--aspect-preview-ratio);
    color: currentColor;
    overflow: hidden;
}

.sidebarPreviewGridSelect__guideFrame.is-portrait {
    width: auto;
    height: calc(100% - (var(--pad-2) * 2));
}

.sidebarPreviewGridSelect__preview--trigger .sidebarPreviewGridSelect__guideFrame {
    width: calc(100% - (var(--pad-3) * 2));
    max-height: calc(100% - (var(--pad-3) * 2));
}

.sidebarPreviewGridSelect__preview--trigger .sidebarPreviewGridSelect__guideFrame.is-portrait {
    width: auto;
    height: calc(100% - (var(--pad-3) * 2));
}

.sidebarPreviewGridSelect__guideFrameSvg {
    width: 100%;
    height: 100%;
    display: block;
}

.sidebarPreviewGridSelect__guideFrameSvg rect,
.sidebarPreviewGridSelect__guideFrameSvg line,
.sidebarPreviewGridSelect__guideFrameSvg circle,
.sidebarPreviewGridSelect__guideFrameSvg ellipse,
.sidebarPreviewGridSelect__guideFrameSvg path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--border-1);
    vector-effect: non-scaling-stroke;
}

.sidebarPreviewGridSelect__optionLabel {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControlNested--anchoredRow > .sidebarControl--submenuButton {
    min-width: 0;
}

.sidebarControlNested--anchoredRow.is-open > .sidebarControl--submenuButton {
    position: relative;
    z-index: 2;
}

.sidebarControlPanelBridge {
    min-width: 0;
    height: var(--gap-1);
    position: relative;
    z-index: 2;
    display: block;
    background: var(--sidebar-control-panel-bg);
    pointer-events: none;
}

.sidebarControlPanelBridge[hidden] {
    display: none;
}

.sidebarControlNested--anchoredRow.is-anchor-start > .sidebarControlPanelBridge {
    border-left: var(--border-1) solid var(--c-border);
}

.sidebarControlNested--anchoredRow.is-anchor-end > .sidebarControlPanelBridge {
    border-right: var(--border-1) solid var(--c-border);
}

.sidebarControlPanelBridge__corner {
    width: var(--radius-2);
    height: var(--radius-2);
    position: absolute;
    bottom: 0;
    display: block;
    overflow: visible;
}

.sidebarControlPanelBridge__corner.is-start {
    right: 100%;
}

.sidebarControlPanelBridge__corner.is-end {
    left: 100%;
}

.sidebarControlPanelBridge__cornerFill {
    fill: var(--sidebar-control-panel-bg);
}

.sidebarControlPanelBridge__cornerStroke {
    fill: none;
    stroke: var(--c-border);
    stroke-width: var(--border-1);
}

.sidebarControlNested--anchoredRow.has-panel-bridge.is-open > .sidebarControlPanel {
    position: relative;
    z-index: 1;
    margin-top: calc(0px - var(--border-1));
    border-top: var(--border-1) solid var(--c-border);
    border-top-left-radius: var(--radius-2);
    border-top-right-radius: var(--radius-2);
}

.sidebarControlNested--anchoredRow.has-panel-bridge.is-open.is-anchor-start > .sidebarControlPanel {
    border-top-left-radius: 0;
}

.sidebarControlNested--anchoredRow.has-panel-bridge.is-open.is-anchor-end > .sidebarControlPanel {
    border-top-right-radius: 0;
}

.sidebarControlGroup__header {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--gap-1);
    padding: 0 0 var(--pad-1);
}

.sidebarControlGroup__header .sidebarControl__title {
    text-transform: uppercase;
}

.sidebarControlGroup__meta {
    color: var(--c-font-muted);
    font: var(--font-console);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sidebarControlGroup__body {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
}

.sidebarControl--numberStepper {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--numberStepper .sidebarControl__title {
    color: var(--c-font-muted);
}

.sidebarControl__stepper {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--sidebar-control-segment-height) + var(--sidebar-control-segment-height));
    gap: 0;
    overflow: hidden;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: var(--c-surface-interactive);
}

.sidebarControl__stepperValue {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
    padding-left: var(--pad-2);
    border-right: var(--border-1) solid var(--c-border);
    background: var(--c-surface-interactive);
}

.sidebarControl__stepperValue--titleless {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
}

.sidebarControl__stepperActions {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebarControl__stepperActions .sidebarControl__stepButton + .sidebarControl__stepButton {
    border-left: var(--border-1) solid var(--c-border);
}

.sidebarControl__stepButton,
.sidebarControl__stepperInput {
    min-height: var(--sidebar-control-segment-height);
}

.sidebarControl__stepButton {
    min-width: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
}

.sidebarControl__stepIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.sidebarControl__stepIcon--minus {
    mask-image: url("../../../public/assets/icons/ui/minus.svg");
    -webkit-mask-image: url("../../../public/assets/icons/ui/minus.svg");
}

.sidebarControl__stepIcon--plus {
    mask-image: url("../../../public/assets/icons/ui/plus.svg");
    -webkit-mask-image: url("../../../public/assets/icons/ui/plus.svg");
}

.sidebarControl__stepperInput {
    width: 100%;
    min-height: var(--sidebar-control-segment-height);
    padding: 0 var(--pad-1);
    border: 0;
    border-radius: 0;
    background: transparent;
    font: var(--font-console);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: right;
    text-overflow: clip;
    appearance: textfield;
    -moz-appearance: textfield;
}

.sidebarControl__stepperInput::-webkit-outer-spin-button,
.sidebarControl__stepperInput::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.sidebarControl--rangeSlider {
    --range-low: 0%;
    --range-high: 100%;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: var(--sidebar-control-height);
    padding: var(--pad-1) 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--rangeSlider .sidebarControl__title {
    color: var(--c-font-muted);
}

.sidebarRangeSlider {
    --range-track-size: var(--sidebar-control-slider-height);
    --range-marker-width: 2px;
    --range-marker-height: var(--sidebar-control-slider-height);
    --range-hit-width: 12px;
    min-width: 0;
    height: var(--range-track-size);
    position: relative;
}

.sidebarRangeSlider__track,
.sidebarRangeSlider__selection,
.sidebarRangeSlider__thumb {
    position: absolute;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}

.sidebarRangeSlider__track {
    left: 0;
    right: 0;
    height: var(--range-track-size);
    border-radius: var(--sidebar-control-slider-radius);
    background: var(--c-slider-track);
}

.sidebarRangeSlider__selection {
    left: var(--range-low);
    right: calc(100% - var(--range-high));
    height: var(--range-track-size);
    border-radius: var(--sidebar-control-slider-radius);
    background: var(--c-slider-fill);
}

.sidebarRangeSlider__thumb {
    width: var(--range-marker-width);
    height: var(--range-marker-height);
    border: 0;
    border-radius: 0;
    background: var(--c-slider-marker);
    box-shadow: none;
}

.sidebarRangeSlider__thumb--low {
    left: var(--range-low);
    transform: translate(-50%, -50%);
}

.sidebarRangeSlider__thumb--high {
    left: var(--range-high);
    transform: translate(-50%, -50%);
}

.sidebarRangeSlider__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--range-track-size);
    margin: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    touch-action: pan-y;
}

.sidebarRangeSlider__input::-webkit-slider-runnable-track {
    height: var(--range-track-size);
    border: 0;
    background: transparent;
}

.sidebarRangeSlider__input::-moz-range-track {
    height: var(--range-track-size);
    border: 0;
    background: transparent;
}

.sidebarRangeSlider__input::-webkit-slider-thumb {
    width: var(--range-hit-width);
    height: var(--range-track-size);
    margin-top: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    cursor: grab;
}

.sidebarRangeSlider__input::-moz-range-thumb {
    width: var(--range-hit-width);
    height: var(--range-track-size);
    border: 0;
    background: transparent;
    pointer-events: auto;
    cursor: grab;
}

.sidebarRangeSlider__input--low {
    z-index: 2;
}

.sidebarRangeSlider__input--high {
    z-index: 3;
}

.sidebarControl--rangeSlider:focus-within .sidebarRangeSlider__selection {
    background: var(--c-accent);
}

.exampleFoldableSection {
    grid-column: 1 / -1;
    overflow: hidden;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 72%, transparent);
}

.exampleFoldableSection__summary {
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-control-icon);
    align-items: center;
    gap: var(--gap-1);
    padding: var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    cursor: pointer;
    list-style: none;
}

.exampleFoldableSection__summary::-webkit-details-marker {
    display: none;
}

.exampleFoldableSection__summary::after {
    content: "";
}

.exampleFoldableSection__summary:hover::after {
    color: var(--c-accent);
    opacity: 1;
}

.exampleFoldableSection[open] .exampleFoldableSection__summary::after {
    opacity: 1;
    color: var(--c-accent);
    --sidebar-dropdown-icon-scale-y: 1.08;
}

.exampleFoldableSection__body {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
    padding: 0 var(--sidebar-control-inset) var(--sidebar-control-inset);
}

.sidebarPicker {
    --picker-row-h: var(--sidebar-control-height);
    --picker-icon-size: var(--sidebar-control-icon);
    --picker-gap: var(--picker-row-h);
    min-width: 0;
    height: var(--picker-row-h);
    min-height: var(--picker-row-h);
    position: relative;
    outline: none;
    isolation: isolate;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarPicker[data-open="true"] {
    z-index: var(--z-modal);
}

.sidebarPicker--span2 {
    grid-column: span 2;
}

.sidebarPicker--span3 {
    grid-column: span 3;
}

.sidebarPicker--span4 {
    grid-column: span 4;
}

.sidebarPicker--span5 {
    grid-column: span 5;
}

.sidebarPicker--span6 {
    grid-column: span 6;
}

.sidebarPicker--span8 {
    grid-column: 1 / -1;
}

.sidebarPicker:focus-visible .sidebarPicker__option.is-selected {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.sidebarPicker__hintRing {
    position: absolute;
    inset: calc(var(--gap-1) * -1);
    border: var(--border-1) solid transparent;
    border-radius: var(--radius-3);
    pointer-events: none;
    transition: border-color var(--ease-fast);
    z-index: -1;
}

.sidebarPicker[data-open="true"] .sidebarPicker__hintRing {
    border-color: color-mix(in srgb, var(--c-accent) 24%, transparent);
}

.sidebarPicker__option {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    height: var(--picker-row-h);
    display: grid;
    grid-template-columns: var(--picker-icon-size) minmax(0, 1fr) var(--picker-icon-size);
    align-items: center;
    gap: var(--sidebar-control-inset);
    padding: var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    text-align: left;
    border: var(--border-1) solid var(--c-border);
    border-radius: 0;
    background: var(--c-surface-interactive);
    background-image: none;
    box-shadow: var(--shadow-1);
    transition:
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        box-shadow var(--ease-fast),
        color var(--ease-fast),
        opacity var(--ease-fast);
    cursor: pointer;
    user-select: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(var(--offset) * var(--picker-gap)));
    transition:
        transform var(--ease-fast),
        opacity var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast),
        background-color var(--ease-fast),
        box-shadow var(--ease-fast),
        filter var(--ease-fast);
    z-index: calc(var(--z-modal) + 1);
}

.sidebarPicker--withoutIcons .sidebarPicker__option {
    grid-template-columns: minmax(0, 1fr) var(--picker-icon-size);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option {
    opacity: 1;
    pointer-events: auto;
}

.sidebarPicker[data-open="false"] .sidebarPicker__option.is-selected {
    opacity: 1;
    pointer-events: auto;
    border-radius: var(--radius-2);
    transform: translateY(0);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option.is-firstVisible {
    border-top-left-radius: var(--radius-2);
    border-top-right-radius: var(--radius-2);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option:not(.is-firstVisible) {
    border-top-width: 0;
}

.sidebarPicker[data-open="true"] .sidebarPicker__option.is-lastVisible {
    border-bottom-left-radius: var(--radius-2);
    border-bottom-right-radius: var(--radius-2);
}

/* Controls nested inside submenu panels use the compact component radius. */
.sidebarControlPanel .sidebarControl,
.sidebarControlPanel .sidebarControl--buttonGroup .sidebarControlSegment,
.sidebarControlPanel .sidebarControl__stepper,
.sidebarControlPanel .sidebarPreviewGridSelect__option,
.sidebarControlPanel .sidebarPicker[data-open="false"] .sidebarPicker__option.is-selected {
    border-radius: var(--radius-3);
}

.sidebarControlPanel .sidebarPicker[data-open="true"] .sidebarPicker__option.is-firstVisible {
    border-top-left-radius: var(--radius-3);
    border-top-right-radius: var(--radius-3);
}

.sidebarControlPanel .sidebarPicker[data-open="true"] .sidebarPicker__option.is-lastVisible {
    border-bottom-left-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.sidebarPicker__option.is-selected {
    opacity: 1;
    filter: none;
    z-index: var(--z-modal);
}

.sidebarPicker__option.is-selected.sidebarControl--active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
    background-image: none;
}

.sidebarPicker[data-open="true"] .sidebarPicker__option:hover {
    opacity: 1;
    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg-solid);
    transform: translateY(calc(var(--offset) * var(--picker-gap)));
}

.sidebarPicker[data-open="true"] .sidebarPicker__option {
    background: var(--c-surface-solid);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option.is-selected.sidebarControl--active {
    background: var(--c-control-active-bg-solid);
}

.sidebarPicker__icon {
    width: auto;
    height: auto;
    max-width: calc(100% - (var(--sidebar-control-inset) * 2));
    max-height: calc(100% - (var(--sidebar-control-inset) * 2));
    display: block;
    margin: var(--sidebar-control-inset);
    border-radius: var(--sidebar-control-icon-radius);
    object-fit: contain;
    opacity: 1;
}

.sidebarPicker__icon--glyph {
    display: grid;
    place-items: center;
    background: var(
        --sidebar-control-icon-bg,
        color-mix(in srgb, var(--c-icon) 6%, transparent)
    );
}

.sidebarPicker__icon--glyph::before {
    width: calc(100% - var(--pad-1));
    height: calc(100% - var(--pad-1));
    content: "";
    background: currentColor;
    -webkit-mask: var(--sidebar-picker-icon-source) center / contain no-repeat;
    mask: var(--sidebar-picker-icon-source) center / contain no-repeat;
}

span.sidebarPicker__icon {
    width: calc(var(--picker-icon-size) - (var(--sidebar-control-inset) * 2));
    height: calc(var(--picker-icon-size) - (var(--sidebar-control-inset) * 2));
    margin: var(--sidebar-control-inset);
}

.sidebarPicker__name {
    min-width: 0;
    margin-left: calc(var(--sidebar-control-inset) * 3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarPicker__text {
    justify-self: stretch;
    margin-left: calc(var(--sidebar-control-inset) * 3);
    text-align: left;
}

.sidebarPicker__dropdownIcon {
    justify-self: end;
}

.sidebarPicker__option:hover .sidebarDropdownIcon,
.sidebarPicker[data-open="true"] .sidebarDropdownIcon {
    color: var(--c-accent);
    opacity: 1;
}

.sidebarPicker[data-open="true"] .sidebarDropdownIcon {
    --sidebar-dropdown-icon-scale-y: 1.08;
}

@media (prefers-reduced-motion: reduce) {
    .sidebarControl__spinner,
    .sidebarPicker__hintRing,
    .sidebarPicker__option,
    .sidebarDropdownIcon,
    .exampleFoldableSection__summary::after {
        animation: none;
        transition: none;
    }
}