HEX

File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/..//wowZ/brand-cleaned.css
.TheBrandUtilPanel[data-util=redact] .TheBrandUtilFooter {
    padding: 0
}

.TheBrandUtilPanel[data-util=redact] .TheBrandUtilFooter>div {
    height: 1px
}

.TheBrandUtilPanel[data-util=retouch] .TheBrandControlListScroller+.TheBrandControlListScroller {
    margin-top: 1em
}

.brand-editor,
brand-editor {
    --color-primary: #ffd843;
    --color-primary-dark: #ffc343;
    --color-primary-text: #000;
    --color-secondary: #03a9f4;
    --color-secondary-dark: #046bbf;
    --color-focus: 4, 107, 191;
    --color-focus-100: rgba(var(--color-focus), 1);
    --color-focus-50: rgba(var(--color-focus), 0.5);
    --color-focus-25: rgba(var(--color-focus), 0.25);
    --color-error: 255, 87, 34;
    --color-error-100: rgb(var(--color-error));
    --color-error-75: rgba(var(--color-error), 0.75);
    --color-error-50: rgba(var(--color-error), 0.5);
    --color-error-25: rgba(var(--color-error), 0.25);
    --color-error-10: rgba(var(--color-error), 0.1);
    --color-foreground: 0, 0, 0;
    --color-background: 255, 255, 255!important;
    --color-preview-outline: var(--color-foreground);
    --color-transition-duration: 250ms;
    --button-cursor: pointer;
    --font-size: 16px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --backdrop-filter-bright: brightness(110%) saturate(180%) blur(10px);
    --backdrop-filter-dark: brightness(90%) saturate(180%) blur(10px);
    --border-radius-round: 9999em;
    --border-radius: 0.625em;
    --filter-disabled: grayscale(95%) opacity(40%);
    --editor-inset-top: 0px;
    --editor-inset-bottom: 0px;
    --safe-area-inset-top: 0px;
    --safe-area-inset-bottom: 0px;
    --pattern-transparent: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h4v4H0zm4 4h4v4H4z' fill='%23E5E5E5'/%3E%3C/svg%3E");
    --grid-color-even: rgba(var(--color-foreground), 0.1);
    --grid-color-odd: rgba(var(--color-background), 0.1);
    --grid-size: 24
}

.brand-editor,
.brand-editor-panel,
brand-editor {
    --color-foreground-100: rgba(var(--color-foreground), 1);
    --color-foreground-95: rgba(var(--color-foreground), 0.95);
    --color-foreground-90: rgba(var(--color-foreground), 0.9);
    --color-foreground-80: rgba(var(--color-foreground), 0.8);
    --color-foreground-70: rgba(var(--color-foreground), 0.7);
    --color-foreground-60: rgba(var(--color-foreground), 0.6);
    --color-foreground-50: rgba(var(--color-foreground), 0.5);
    --color-foreground-40: rgba(var(--color-foreground), 0.4);
    --color-foreground-30: rgba(var(--color-foreground), 0.3);
    --color-foreground-20: rgba(var(--color-foreground), 0.25);
    --color-foreground-15: rgba(var(--color-foreground), 0.2);
    --color-foreground-10: rgba(var(--color-foreground), 0.15);
    --color-foreground-5: rgba(var(--color-foreground), 0.075);
    --color-foreground-3: rgba(var(--color-foreground), 0.05);
    --color-foreground-1: rgba(var(--color-foreground), 0.02);
    --color-foreground-0: rgba(var(--color-foreground), 0);
    --color-background-100: rgba(var(--color-background), 1);
    --color-background-95: rgba(var(--color-background), 0.95);
    --color-background-90: rgba(var(--color-background), 0.9);
    --color-background-80: rgba(var(--color-background), 0.8);
    --color-background-70: rgba(var(--color-background), 0.7);
    --color-background-60: rgba(var(--color-background), 0.6);
    --color-background-50: rgba(var(--color-background), 0.5);
    --color-background-40: rgba(var(--color-background), 0.4);
    --color-background-30: rgba(var(--color-background), 0.3);
    --color-background-20: rgba(var(--color-background), 0.2);
    --color-background-15: rgba(var(--color-background), 0.15);
    --color-background-10: rgba(var(--color-background), 0.1);
    --color-background-5: rgba(var(--color-background), 0.05);
    --color-background-3: rgba(var(--color-background), 0.03);
    --color-background-1: rgba(var(--color-background), 0.01);
    --color-background-0: rgba(var(--color-background), 0)
}

.brand-editor,
.TheBrandRootWrapper,
brand-editor {
    display: block
}

.TheBrandRootWrapper {
    height: 100%
}

.TheBrandScrollableContent {
    overflow: hidden;
}

/* Page Container Styles */
.page-container {
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, border 0.2s ease;
    margin-bottom: 40px;
}

/* Active Page Highlight */
.page-container.active-page {
    box-shadow: 0 0 0 4px var(--color-primary, #ffd843), 0 12px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Ensure canvas wrapper fits */
.page-container .canvas-container {
    margin: 0 auto;
}
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-color: var(--color-foreground-30) transparent;
    scrollbar-width: thin
}

.TheBrandScrollableContent::-webkit-scrollbar {
    width: 1em;
    cursor: pointer
}

.TheBrandScrollableContent::-webkit-scrollbar-track {
    background: none
}

.TheBrandScrollableContent::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-clip: padding-box;
    background-color: var(--color-foreground-30);
    border-radius: 9999em;
    border: .3125em solid transparent
}

.TheBrandRoot[data-env~=is-animated] {
    --transition-duration-multiplier: 1
}

.TheBrandRoot[data-env~=is-transparent] {
    background: none
}

.TheBrandRoot {
    --nav-group-margin: 0.5em;
    --editor-calculated-inset-top: calc(var(--safe-area-inset-top) + var(--editor-inset-top));
    --editor-calculated-inset-bottom: calc(var(--safe-area-inset-bottom) + var(--editor-inset-bottom));
    --transition-duration-10: 0.3s;
    --transition-duration-25: 0.3s;
    --transition-duration-50: 0.3s;
    box-sizing: border-box;
    width: var(--editor-width, 100%);
    height: var(--editor-height, 100%);
    padding-top: var(--editor-calculated-inset-top);
    padding-bottom: var(--editor-calculated-inset-bottom);
    max-width: var(--editor-max-width, var(--editor-max-width-default, none));
    max-height: var(--editor-max-height, var(--editor-max-height-default, none));
    position: relative;
    overflow: hidden;
    contain: strict;
    display: grid;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: 450;
    touch-action: manipulation;
    text-align: left;
    text-transform: none;
    text-rendering: optimizeLegibility;
    direction: ltr;
    color: var(--color-foreground-90);
    background-color: #ffffff;
    outline-color: rgba(var(--color-preview-outline), 1);
    transition: background-color 1ms, outline-color 1ms, color var(--transition-duration-10) ease-in-out, dir 1ms
}

.TheBrandRoot[dir=rtl] button {
    direction: rtl
}

.TheBrandRoot .TheBrandUtilMain {
    cursor: var(--cursor)
}

.TheBrandRoot * {
    box-sizing: content-box;
    word-wrap: normal
}

/*.TheBrandRoot button,
.TheBrandRoot fieldset,
.TheBrandRoot input,
.TheBrandRoot legend {
    padding: 0;
    margin: 0;
    border: none;


    background:  #e9e9ed;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    width: auto;
    text-decoration: none
}*/



.TheBrandRoot fieldset,
.TheBrandRoot legend {
    padding: 0;
    margin: 0;
    border: none;
  background: transparent;


    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    width: auto;
    text-decoration: none
}


.TheBrandRoot button,
.TheBrandRoot input  {
    padding: 0;
    margin: 0;
    border: none;
    /*  background: transparent;*/

    background:  #e9e9ed;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    width: auto;
    text-decoration: none
}




.TheBrandRoot button[disabled] {
    pointer-events: none
}

.TheBrandRoot canvas {
    display: block
}

.TheBrandRoot svg {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: none
}

.TheBrandRoot p {
    margin: 0
}

.TheBrandRoot li,
.TheBrandRoot ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.TheBrandRoot a {
    color: inherit;
    text-decoration: none
}

.TheBrandRoot .implicit {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

.TheBrandRoot .TheBrandFixedWidthCharacters {
    font-variant: tabular-nums
}

.TheBrandRoot .TheBrandStage {
    display: flex;
    align-self: stretch;
    flex: 1;
    pointer-events: none
}

.TheBrandRoot .TheBrandStage[tabindex="-1"] {
    outline: none
}

.TheBrandRoot .TheBrandRootPortal,
.TheBrandRoot>.TheBrandCanvas {
    position: absolute;
    left: 0;
    top: 0
}

.TheBrandRoot>.TheBrandCanvas {
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0
}

.TheBrandRoot>.TheBrandCanvas canvas {
    position: absolute;
    width: 100%;
    height: 100%
}

.TheBrandRoot>.TheBrandCanvas:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat
}

.TheBrandRoot>.TheBrandStatus {
    position: absolute;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--color-background-90)
}

.TheBrandRoot>.TheBrandStatus>p {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    transition: opacity var(--transition-duration-50) ease-out
}

.TheBrandRoot .TheBrandStatusMessage {
    position: absolute;
    font-size: .875em
}

.TheBrandRoot .TheBrandStatusAside {
    position: absolute;
    left: 0
}

.TheBrandRoot .TheBrandStatusAside svg {
    width: 1.25em;
    height: 1.25em
}

.TheBrandRoot .TheBrandStatusAside .TheBrandProgressIndicator {
    margin-left: .5em
}

.TheBrandRoot .TheBrandStatusAside .TheBrandButton {
    outline: transparent;
    margin-left: .75em;
    font-size: .875em;
    border-radius: var(--border-radius-round);
    background-color: var(--color-foreground-5);
    padding: .25em;
    transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out;
    -webkit-backdrop-filter: var(--backdrop-filter-dark);
    backdrop-filter: var(--backdrop-filter-dark)
}

.TheBrandRoot .TheBrandStatusAside .TheBrandButton:not([disabled])[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandRoot .TheBrandStatusAside .TheBrandButton:not([disabled]):hover {
    background-color: var(--color-foreground-10)
}

.TheBrandRoot .TheBrandStatusIcon svg {
    font-size: .875em;
    margin-top: .25em;
    margin-left: .5em
}

.TheBrandRoot>.TheBrandNav {
    position: relative;
    z-index: 3
}

.TheBrandRoot>.TheBrandNav:empty {
    display: none !important
}

.TheBrandRoot>.TheBrandNav .TheBrandButton {
    outline: transparent;
    transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out
}

.TheBrandRoot>.TheBrandNav .TheBrandButton svg {
    width: 1em;
    transition: opacity var(--transition-duration-10) ease-out
}

.TheBrandRoot>.TheBrandNav .TheBrandButton>span {
    justify-content: center
}

.TheBrandRoot>.TheBrandNav .TheBrandButtonIconOnly .TheBrandButtonInner,
.TheBrandRoot>.TheBrandNav .TheBrandDropdownIconOnly .TheBrandButtonInner {
    width: 1.75em
}

.TheBrandRoot>.TheBrandNav .TheBrandButton .TheBrandButtonInner {
    height: 1.75em
}

.TheBrandRoot>.TheBrandNav .TheBrandButton:not(.TheBrandButtonIconOnly):not(.TheBrandDropdownIconOnly) {
    padding-left: .75em;
    padding-right: .75em
}

.TheBrandRoot>.TheBrandNav .TheBrandButton:not(.TheBrandButtonIconOnly):not(.TheBrandDropdownIconOnly) .TheBrandButtonLabel {
    font-size: .75em;
    line-height: 2
}

.TheBrandRoot>.TheBrandNav .TheBrandButton:not(.TheBrandButtonIconOnly):not(.TheBrandDropdownIconOnly):not(.TheBrandDropdownButton) {
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandRoot>.TheBrandNav .TheBrandButton:only-of-type {
    border-radius: var(--border-radius-round)
}

.TheBrandRoot>.TheBrandNav .TheBrandButton:only-of-type+* {
    margin-left: .5em
}

.TheBrandRoot>.TheBrandNav .TheBrandButton[disabled] .TheBrandButtonLabel,
.TheBrandRoot>.TheBrandNav .TheBrandButton[disabled] svg {
    opacity: .25
}

.TheBrandRoot>.TheBrandNav .TheBrandButton:not(.TheBrandButtonExport):not([disabled])[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandRoot>.TheBrandNav .TheBrandButton:not(.TheBrandButtonExport):not([disabled]):hover {
    background-color: var(--color-foreground-10)
}

.TheBrandRoot .TheBrandButtonExport {
    color: var(--color-primary-text);
    background-color: var(--color-primary)
}

.TheBrandRoot .TheBrandButtonExport:hover {
    background-color: var(--color-primary-dark)
}

.TheBrandRoot .TheBrandButtonExport[data-focus-visible] {
    color: var(--color-primary-text);
    background-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-foreground-5), 0 0 0 3px var(--color-focus-50);
    background-color: var(--color-primary-dark)
}

.TheBrandRoot .TheBrandButtonExport:not(.TheBrandButtonIconOnly) {
    flex: 1;
    padding: 0 .75em
}

.TheBrandRoot>.TheBrandNavMain {
    display: flex;
    overflow: hidden
}

.TheBrandRoot>.TheBrandNavMain [aria-selected=true] button {
    -webkit-backdrop-filter: var(--backdrop-filter-dark);
    backdrop-filter: var(--backdrop-filter-dark);
    background-color: var(--color-foreground-10)
}

.TheBrandRoot>.TheBrandNavMain button svg {
    align-self: center;
    width: 1.5em
}

.TheBrandRoot>.TheBrandNavMain button span,
.TheBrandRoot>.TheBrandNavMain button svg {
    pointer-events: none
}

.TheBrandRoot>.TheBrandNavMain button svg+span {
    margin-top: .75em
}

.TheBrandRoot>.TheBrandNavMain button span {
    font-size: .875em;
    display: block;
    width: calc(100% - 1em);
    overflow: hidden;
    text-overflow: ellipsis;
    width: inherit;
    max-width: calc(100% - 1em)
}

.TheBrandRoot>.TheBrandNavMain button {
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, box-shadow var(--transition-duration-10) ease-out
}

.TheBrandRoot>.TheBrandNavMain button:hover {
    box-shadow: inset 0 0 0 1px var(--color-foreground-10)
}

.TheBrandRoot>.TheBrandNavMain button[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandRoot>.TheBrandNavTools {
    max-width: 100%;
    box-sizing: border-box;
    pointer-events: none
}

.TheBrandRoot>.TheBrandNavTools:empty {
    display: none
}

.TheBrandRoot>.TheBrandNavTools,
.TheBrandRoot>.TheBrandNavTools .TheBrandNavGroup,
.TheBrandRoot>.TheBrandNavTools .TheBrandNavSet {
    display: flex;
    align-items: center;
    justify-content: center
}

.TheBrandRoot>.TheBrandNavTools .TheBrandButton,
.TheBrandRoot>.TheBrandNavTools .TheBrandNavSet {
    pointer-events: all
}

.TheBrandRoot>.TheBrandNavTools .TheBrandButton[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

/* Floating contextual toolbar */
.TheBrandNavGroupFloat[data-floating="true"] {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    left: auto;
    right: auto;
    width: max-content;
    white-space: nowrap;
}

.TheBrandNavGroupFloat[data-floating="true"][data-visible="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.TheBrandRoot .TheBrandNavGroup {
    margin: 0 var(--nav-group-margin)
}

.TheBrandRoot .TheBrandNavGroup>* {
    border-radius: var(--border-radius-round)
}

.TheBrandRoot .TheBrandNavGroup>*+* {
    margin-left: .5em
}

.TheBrandRoot .TheBrandNavGroup:first-of-type {
    margin-right: auto;
    margin-left: 0
}

.TheBrandRoot .TheBrandNavGroup:last-of-type {
    margin-left: auto;
    margin-right: 0
}

.TheBrandRoot .TheBrandNavSet {
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandRoot .TheBrandNavSet>:not(:only-child) {
    border: 1px solid var(--color-foreground-3);
    border-top: 0;
    border-bottom: 0
}

.TheBrandRoot .TheBrandNavSet>:first-child:not(:only-child) {
    border-left: 0
}

.TheBrandRoot .TheBrandNavSet>:last-child:not(:only-child) {
    border-right: 0
}

.TheBrandRoot .TheBrandNavSet>*+* {
    margin-left: -1px
}

.TheBrandRoot .TheBrandNavSet>.TheBrandButton:hover,
.TheBrandRoot .TheBrandNavSet>.TheBrandButton[data-focus-visible] {
    position: relative;
    z-index: 1
}

.TheBrandRoot .TheBrandNavSet>:only-child {
    border-radius: var(--border-radius-round)
}

.TheBrandRoot .TheBrandNavSet>:first-child:not(:only-child) .TheBrandButtonInner {
    padding: 0 .125em 0 .25em
}

.TheBrandRoot .TheBrandNavSet>:first-child:not(:only-child) {
    border-top-left-radius: var(--border-radius-round);
    border-bottom-left-radius: var(--border-radius-round)
}

.TheBrandRoot .TheBrandNavSet>:last-child:not(:only-child) .TheBrandButtonInner {
    padding: 0 .25em 0 .125em
}

.TheBrandRoot .TheBrandNavSet>:last-child:not(:only-child) {
    border-top-right-radius: var(--border-radius-round);
    border-bottom-right-radius: var(--border-radius-round)
}

.TheBrandRoot[data-env~=overlay] .TheBrandNavSet {
    background-color: var(--color-background-50);
    -webkit-backdrop-filter: var(--backdrop-filter-bright);
    backdrop-filter: var(--backdrop-filter-bright);
    box-shadow: inset 0 0 0 1px var(--color-background-15), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35)
}

.TheBrandRoot[data-env~=overlay] .TheBrandNavSet .TheBrandButton:not(.TheBrandButtonExport):not([disabled]):hover,
.TheBrandRoot[data-env~=overlay] .TheBrandNavSet>* {
    border-color: var(--color-background-15)
}

.TheBrandRoot[data-env~=overlay] .TheBrandNavGroup>.TheBrandButton {
    box-shadow: 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35)
}

.TheBrandRoot[data-env~=overlay] .TheBrandNavGroup .TheBrandButtonExport {
    box-shadow: inset 0 0 .125em rgba(0, 0, 0, .25), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35)
}

.TheBrandRoot .TheBrandNavGroupFloat {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none
}

.TheBrandRoot .TheBrandNavGroupFloat[data-floating="true"] {
    position: fixed;
}

.TheBrandRoot .TheBrandNavGroupFloat[data-floating="true"][data-visible="true"] {
    position: fixed;
}

.TheBrandRoot .TheBrandNavGroupFloat>* {
    pointer-events: all
}

.TheBrandRoot .TheBrandUtilFooter .TheBrandScrollable>div {
    padding-left: 1em;
    padding-right: 1em
}

.TheBrandRoot>.TheBrandMain {
    max-width: 100vw
}

.TheBrandRoot:not([data-env~=has-toolbar]) .TheBrandUtilHeader {
    padding-top: 0;
    padding-bottom: 1em;
    margin-bottom: -1em
}

.TheBrandRoot[data-env~=landscape] {
    grid-template-rows: -webkit-min-content auto;
    grid-template-rows: min-content auto;
    grid-template-columns: auto
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavTools {
    grid-row: 1;
    grid-column: 1;
    padding: 1em 1em 0;
    z-index: 3
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavMain {
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    left: 1em;
    top: calc(1em + var(--editor-calculated-inset-top));
    bottom: calc(1em + var(--editor-calculated-inset-bottom))
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavMain .TheBrandTabList {
    flex-direction: column
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavMain .TheBrandTabList li {
    display: flex
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavMain .TheBrandTabList li+li {
    margin: .5em 0 0
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavMain button {
    flex: 1;
    width: 4em;
    height: 4em;
    border-radius: var(--border-radius);
    justify-content: center
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavMain button span {
    font-size: .6875em;
    margin-top: .5em
}

.TheBrandRoot[data-env~=landscape]>.TheBrandNavMain button svg {
    width: 1em;
    margin-top: .25em
}

.TheBrandRoot[data-env~=landscape][data-env~=has-toolbar]>.TheBrandNavMain {
     top: calc(4em + var(--editor-calculated-inset-top));

    bottom: calc(4em + var(--editor-calculated-inset-bottom))
}

.TheBrandRoot[data-env~=landscape][data-env~=has-limited-space]>.TheBrandNavMain {
    align-items: flex-start;
    bottom: calc(1em + var(--editor-calculated-inset-bottom))
}

.TheBrandRoot[data-env~=landscape]>.TheBrandMain {
    grid-row: 2;
    grid-column: 1
}

.TheBrandRoot[data-env~=landscape][data-env~=has-toolbar-preference-bottom] {
    grid-template-rows: auto -webkit-min-content;
    grid-template-rows: auto min-content
}

.TheBrandRoot[data-env~=landscape][data-env~=has-toolbar-preference-bottom]>.TheBrandNavTools {
    grid-row: 2;
    padding-top: 0;
    padding-bottom: 1em
}

.TheBrandRoot[data-env~=landscape][data-env~=has-toolbar-preference-bottom]>.TheBrandMain {
    grid-row: 1
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation] {
    grid-template-columns: 6em auto
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation]:not([data-env~=narrow]) .TheBrandNavGroupFloat {
    margin: 0 0 0 7em
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation]>.TheBrandNavTools {
    grid-column: 1/span 2
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation]>.TheBrandMain {
    grid-column: 2
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation]:not([data-env~=has-navigation-preference-right]) .TheBrandUtilMain {
    padding-left: 0
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation]:not([data-env~=has-navigation-preference-right]) .TheBrandUtilFooter {
    padding-right: 1em
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right] {
    grid-template-columns: auto 6em
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right]:not([data-env~=narrow]) .TheBrandNavGroupFloat {
    margin: 0 7em 0 0
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right]>.TheBrandNavMain {
    right: 1em;
    left: auto
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right]>.TheBrandMain {
    grid-column: 1
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right] .TheBrandUtilMain {
    padding-right: 0
}

.TheBrandRoot[data-env~=landscape][data-env~=has-navigation][data-env~=has-navigation-preference-right] .TheBrandUtilFooter {
    padding-left: 1em
}

.TheBrandRoot[data-env~=portrait] {
    grid-template-rows: -webkit-min-content auto -webkit-min-content;
    grid-template-rows: min-content auto min-content;
    grid-template-columns: auto
}

.TheBrandRoot[data-env~=portrait]>* {
    grid-column: 1
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavTools {
    grid-row: 1;
    padding: .75em .75em 0
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavMain {
    grid-row: 3;
    margin-bottom: .75em;
    justify-content: center
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavMain .TheBrandTabList {
    padding: 0 .875em
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavMain li+li {
    margin-left: .5em
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavMain[data-state~=overflows] {
    overflow: visible
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavMain button {
    flex: 1;
    width: 4em;
    height: 4em;
    border-radius: var(--border-radius);
    justify-content: center
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavMain button span {
    font-size: .6875em;
    margin-top: .5em
}

.TheBrandRoot[data-env~=portrait]>.TheBrandNavMain button svg {
    width: 1em;
    margin-top: .25em
}

.TheBrandRoot[data-env~=portrait]>.TheBrandMain {
    grid-row: 2;
    grid-column: 1
}

.TheBrandRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom] {
    grid-template-rows: auto -webkit-min-content -webkit-min-content;
    grid-template-rows: auto min-content min-content
}

.TheBrandRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom]>.TheBrandNavTools {
    grid-row: 3;
    padding: 0 .75em .75em
}

.TheBrandRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom]>.TheBrandNavMain {
    grid-row: 2
}

.TheBrandRoot[data-env~=portrait][data-env~=has-toolbar-preference-bottom]>.TheBrandMain {
    grid-row: 1
}

.TheBrandRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top] {
    grid-template-rows: -webkit-min-content -webkit-min-content auto;
    grid-template-rows: min-content min-content auto
}

.TheBrandRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top]>.TheBrandMain {
    grid-row: 3
}

.TheBrandRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top]>.TheBrandNavMain {
    grid-row: 2;
    margin-top: .75em;
    margin-bottom: 0
}

.TheBrandRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom] {
    grid-template-rows: -webkit-min-content auto -webkit-min-content;
    grid-template-rows: min-content auto min-content
}

.TheBrandRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom]>.TheBrandNavMain {
    grid-row: 1
}

.TheBrandRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom]>.TheBrandMain {
    grid-row: 2
}

.TheBrandRoot[data-env~=portrait]:not([data-env~=narrow])[data-env~=has-navigation-preference-top][data-env~=has-toolbar-preference-bottom]>.TheBrandNavTools {
    grid-row: 3
}

.TheBrandRoot[data-env~=landscape][data-env~=is-compact]>.TheBrandNavMain button {
    flex: 1;
    flex-direction: row;
    width: auto;
    height: auto;
    border-radius: var(--border-radius);
    justify-content: flex-start;
    align-items: center;
    padding: .625em 0;
    width: 6em
}

.TheBrandRoot[data-env~=landscape][data-env~=is-compact]>.TheBrandNavMain button span {
    font-size: .6875em;
    margin: 0 .625em 0 0;
    line-height: 1.2;
    text-align: left
}

.TheBrandRoot[data-env~=landscape][data-env~=is-compact]>.TheBrandNavMain button svg {
    margin: 0 .5em 0 .625em;
    min-width: 1em
}

.TheBrandRoot[data-env~=landscape][data-env~=is-compact][data-env~=has-navigation] {
    grid-template-columns: 8em auto
}

.TheBrandRoot[data-env~=landscape][data-env~=is-compact][data-env~=has-navigation][data-env~=has-navigation-preference-right] {
    grid-template-columns: auto 8em
}

.TheBrandRoot[data-env~=landscape][data-env~=is-compact][dir=rtl]>.TheBrandNavMain button {
    padding-left: .625em
}

.TheBrandRoot[data-env~=landscape][data-env~=is-compact][dir=rtl]>.TheBrandNavMain svg {
    margin-left: 0
}

.TheBrandRoot[data-env~=narrow] .TheBrandNavGroupFloat {
    position: static;
    margin: 0
}

.TheBrandRoot[data-env~=portrait][data-env~=is-compact]>.TheBrandNavMain button {
    padding: 0;
    font-size: .625em;
    width: 4em;
    height: 4em;
    justify-content: center;
    border-radius: 9999em
}

.TheBrandRoot[data-env~=portrait][data-env~=is-compact]>.TheBrandNavMain button span {
    visibility: hidden;
    font-size: 0;
    margin: 0
}

.TheBrandRoot[data-env~=portrait][data-env~=is-compact]>.TheBrandNavMain button svg {
    margin-top: 0;
    width: 1.6em
}

.TheBrandRoot[data-env~=portrait][data-env~=is-compact]>.TheBrandNavMain button svg [stroke-width] {
    stroke-width: .15em
}

.TheBrandRoot[data-env~=portrait][data-env~=narrow] {
    --nav-group-margin: 0.25em;
    grid-template-rows: -webkit-min-content auto -webkit-min-content;
    grid-template-rows: min-content auto min-content;
    grid-template-columns: auto
}

.TheBrandRoot[data-env~=portrait][data-env~=narrow]>* {
    grid-column: 1
}

.TheBrandRoot[data-env~=portrait][data-env~=narrow] .TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption span,
.TheBrandRoot[data-env~=portrait][data-env~=narrow] .TheBrandUtilFooter .TheBrandControlList [role=tab] span {
    font-size: .6875em
}

.TheBrandRoot[data-env~=portrait][data-env~=narrow] .TheBrandToolbar .TheBrandToolbarInner>* {
    margin: 0 .25em
}

.TheBrandRoot[data-env~=portrait][data-env~=narrow][data-env~=has-toolbar-preference-bottom] {
    grid-template-rows: auto -webkit-min-content -webkit-min-content;
    grid-template-rows: auto min-content min-content
}

.TheBrandRoot[data-env~=overlay] {
    grid-template-rows: auto !important;
    grid-template-columns: auto !important
}

.TheBrandRoot[data-env~=overlay] .TheBrandNav {
    z-index: 3
}

.TheBrandRoot[data-env~=overlay] .TheBrandMain {
    grid-row: 1;
    grid-column: 1
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilMain {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    z-index: -1
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter,
.TheBrandRoot[data-env~=overlay] .TheBrandUtilHeader {
    position: absolute;
    left: 0;
    right: 0
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilHeader {
    top: 0
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter {
    bottom: 0
}

.TheBrandRoot[data-env~=overlay] .TheBrandNavMain {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: none
}

.TheBrandRoot[data-env~=overlay] .TheBrandNavTools {
    position: absolute;
    left: 0;
    top: 0;
    right: 0
}

.TheBrandRoot[data-env~=overlay][data-env~=has-controlgroups-preference-top] .TheBrandUtilFooter {
    top: 0;
    bottom: auto
}

.TheBrandRoot[data-env~=overlay][data-env~=has-toolbar-preference-bottom] .TheBrandNavTools {
    top: auto;
    bottom: 0
}

.TheBrandRoot[data-env~=has-swipe-navigation] .TheBrandUtilMain {
    padding-left: 2em;
    padding-right: 2em
}

.TheBrandRoot[data-env~=has-swipe-navigation][data-env~=landscape] .TheBrandUtilMain[data-env~=has-navigation] {
    padding-left: 0;
    padding-right: 2em
}

.TheBrandRoot[data-env~=has-swipe-navigation][data-env~=landscape] .TheBrandUtilMain[data-env~=has-navigation][data-env~=has-navigation-preference-right] {
    padding-left: 2em;
    padding-right: 0
}

.TheBrandRoot[data-env*=is-disabled],
.TheBrandRoot[data-env*=is-disabled] * {
    pointer-events: none !important
}

.TheBrandRoot[data-env*=is-disabled] {
    --color-primary: #b4b4b4;
    --color-primary-dark: #a0a0a0;
    --color-primary-text: #000;
    --color-secondary: #969696;
    --color-secondary-dark: #646464
}

.TheBrandRoot[data-env*=is-disabled] .TheBrandCanvas,
.TheBrandRoot[data-env*=is-disabled] .TheBrandColorPickerButton {
    filter: grayscale(100%)
}

.TheBrandRoot .TheBrandEditorOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: var(--color-background-50);
    pointer-events: none
}

@media not all and (-webkit-min-device-pixel-ratio:0),
not all and (min-resolution:0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .TheBrandNav {
            will-change:transform
        }
    }
}

.TheBrandUtilPanel[data-util=frame] .TheBrandShapeStyleEditor {
    min-height: 3.375em
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption {
    margin: 1em 1em 0 0;
    padding: .125em;
    border: 1px dashed var(--color-foreground-15);
    color: var(--color-foreground-70)
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption span {
    color: var(--color-foreground-90)
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption label {
    font-size: .75em
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption img,
.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.TheBrandUtilPanel[data-util=frame] [data-selected=true] {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

.TheBrandUtilPanel[data-util=frame] [data-selected=true] span {
    color: var(--color-foreground-90)
}

.TheBrandUtilPanel[data-util=frame] [data-layout=row]>.TheBrandRadioGroupOptions>li {
    margin: 0 .5em
}

.TheBrandUtilPanel[data-util=frame] [data-layout=row]>.TheBrandRadioGroupOptions>li:first-child {
    margin-left: 0
}

.TheBrandUtilPanel[data-util=frame] [data-layout=row]>.TheBrandRadioGroupOptions>li:last-child {
    margin-right: 0
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOptionGroupLabel {
    width: 1px;
    height: 1px;
    position: absolute;
    font-size: 0
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOptionGroup {
    display: flex;
    flex-direction: column-reverse
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption {
    cursor: var(--button-cursor);
    margin-bottom: 1em
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption span {
    display: block;
    text-align: center;
    padding: 0 1.5em;
    font-size: .625em;
    font-weight: 400
}

.TheBrandUtilPanel[data-util=frame] [data-focus-visible]+label>.TheBrandRadioGroupOption span {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100);
    border-radius: .25em
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption {
    position: relative;
    width: 3em;
    height: 4em
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption div {
    position: absolute;
    outline-color: currentColor;
    border-color: currentColor;
    cursor: var(--button-cursor)
}

.TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption div[slot] {
    overflow: hidden;
    left: -1px;
    top: -1px;
    bottom: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=frame] .TheBrandUtilFooter>div {
    padding: 0
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption {
    width: 2.25em;
    height: 3em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=frame] .TheBrandRadioGroupOption span {
    font-size: .5em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=frame] [data-layout=row]>.TheBrandRadioGroupOptions>li {
    margin: 0 .25em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=frame] [data-layout=row]>.TheBrandRadioGroupOptions>li:first-child {
    margin-left: 0
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=frame] [data-layout=row]>.TheBrandRadioGroupOptions>li:last-child {
    margin-right: 0
}

.TheBrandUtilPanel[data-util=filter] .TheBrandUtilFooter {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.TheBrandUtilPanel[data-util=filter] .TheBrandScrollable {
    width: 40em
}

.TheBrandUtilPanel[data-util=filter] [data-layout=row]>.TheBrandRadioGroupOptions>li {
    margin: 0 .5em
}

.TheBrandUtilPanel[data-util=filter] [data-layout=row]>.TheBrandRadioGroupOptions>li:first-child {
    margin-left: 0
}

.TheBrandUtilPanel[data-util=filter] [data-layout=row]>.TheBrandRadioGroupOptions>li:last-child {
    margin-right: 0
}

.TheBrandUtilPanel[data-util=filter] .TheBrandRadioGroupOptionGroupLabel {
    width: 1px;
    height: 1px;
    position: absolute;
    font-size: 0;
    pointer-events: none
}

.TheBrandUtilPanel[data-util=filter] .TheBrandFilterPreview {
    border-radius: 0;
    transition: border-radius 1ms
}

.TheBrandUtilPanel[data-util=filter] .TheBrandFilterOption {
    border-radius: 0
}

.TheBrandUtilPanel[data-util=filter] .TheBrandRadioGroupOptions .TheBrandRadioGroupOption:first-of-type .TheBrandFilterPreview {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius)
}

.TheBrandUtilPanel[data-util=filter] .TheBrandRadioGroupOptions .TheBrandRadioGroupOption:first-of-type .TheBrandFilterOption {
    border-bottom-left-radius: var(--border-radius)
}

.TheBrandUtilPanel[data-util=filter] .TheBrandRadioGroupOptions .TheBrandRadioGroupOption:last-of-type .TheBrandFilterPreview {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)
}

.TheBrandUtilPanel[data-util=filter] .TheBrandRadioGroupOptions .TheBrandRadioGroupOption:last-of-type .TheBrandFilterOption {
    border-bottom-right-radius: var(--border-radius)
}

.TheBrandUtilPanel[data-util=filter] .TheBrandRadioGroupOptionGroup {
    display: flex;
    flex-direction: column-reverse
}

.TheBrandUtilPanel[data-util=filter] .TheBrandFilterOption {
    cursor: var(--button-cursor);
    margin-bottom: 1em
}

.TheBrandUtilPanel[data-util=filter] .TheBrandFilterOption span {
    display: block;
    text-align: center;
    padding: 0 .3125em;
    line-height: 1.75;
    max-width: 100%;
    font-size: .625em;
    font-weight: 400;
    margin-left: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.TheBrandUtilPanel[data-util=filter] .TheBrandFilterPreview:before {
    transition: background-color var(--transition-duration-10), color var(--transition-duration-10)
}

.TheBrandUtilPanel[data-util=filter] [data-selected=true] .TheBrandFilterOption .TheBrandFilterPreview {
    position: relative;
    z-index: 1
}

.TheBrandUtilPanel[data-util=filter] [data-selected=true] .TheBrandFilterOption .TheBrandFilterPreview:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .35;
    border-radius: inherit;
    background-color: var(--color-primary)
}

.TheBrandUtilPanel[data-util=filter] [data-focus-visible]+label>.TheBrandFilterOption span {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100);
    border-radius: .25em
}

.TheBrandUtilPanel[data-util=filter] .TheBrandFilterOption,
.TheBrandUtilPanel[data-util=filter] .TheBrandFilterPreview {
    width: 3.75em;
    height: 4.5em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=filter] .TheBrandUtilFooter>div {
    padding: 0
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=filter] .TheBrandFilterOption,
.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=filter] .TheBrandFilterPreview {
    width: 2.875em;
    height: 3.5em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=filter] .TheBrandFilterOption span {
    font-size: .5em
}

.TheBrandUtilPanel[data-util=fill] [data-layout=row]>.TheBrandRadioGroupOptions>li {
    margin: 0 .25em
}

.TheBrandUtilPanel[data-util=fill] [data-layout=row]>.TheBrandRadioGroupOptions>li:first-child {
    margin-left: 0
}

.TheBrandUtilPanel[data-util=fill] [data-layout=row]>.TheBrandRadioGroupOptions>li:last-child {
    margin-right: 0
}

.TheBrandUtilPanel[data-util=fill] .TheBrandRadioGroupOption {
    position: relative;
    width: 3em;
    height: 4em
}

.TheBrandUtilPanel[data-util=fill] .TheBrandFillTile {
    position: absolute;
    width: 100%;
    height: 100%
}

.TheBrandUtilPanel[data-util=fill] .TheBrandFillTile[data-transparent=true] {
    background-color: #fff;
    background-image: var(--pattern-transparent);
    border-radius: calc(var(--border-radius) + 1px)
}

.TheBrandUtilPanel[data-util=fill] .TheBrandFillTile div,
.TheBrandUtilPanel[data-util=fill] .TheBrandFillTile img {
    cursor: var(--button-cursor);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--border-radius)
}

.TheBrandUtilPanel[data-util=fill] .TheBrandFillTile:after {
    content: "";
    z-index: 3;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    border-radius: var(--border-radius);
    pointer-events: none
}

.TheBrandUtilPanel[data-util=fill] .TheBrandRadioGroupOption[data-selected=true] .TheBrandFillTile:after {
    box-shadow: inset 0 0 0 1px var(--color-foreground-5), inset 0 0 0 4px var(--color-primary), inset 0 0 0 5px var(--color-foreground-5)
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=fill] .TheBrandUtilFooter>div {
    padding: 0
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=fill] .TheBrandRadioGroupOption {
    width: 2.25em;
    height: 3em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=fill] .TheBrandRadioGroupOption span {
    font-size: .5em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=fill] [data-layout=row]>.TheBrandRadioGroupOptions>li {
    margin: 0 .175em
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=fill] [data-layout=row]>.TheBrandRadioGroupOptions>li:first-child {
    margin-left: 0
}

.TheBrandRoot[data-env~=is-compact] .TheBrandUtilPanel[data-util=fill] [data-layout=row]>.TheBrandRadioGroupOptions>li:last-child {
    margin-right: 0
}

.TheBrandUtilPanel[data-util=crop] .TheBrandStage {
    touch-action: none
}

.TheBrandUtilPanel[data-util=crop],
.TheBrandUtilPanel[data-util=crop] .TheBrandStage,
.TheBrandUtilPanel[data-util=crop] .TheBrandUtilMain {
    pointer-events: all
}

.TheBrandUtilPanel[data-util=crop] .TheBrandImageInfo {
    position: absolute;
    right: 1em;
    bottom: 1em
}

.TheBrandUtilPanel[data-util=crop] .TheBrandButtonCenter {
    --size: 3em;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size);
    height: var(--size);
    z-index: 1;
    line-height: 0;
    margin-top: calc(var(--size) * (-.5));
    margin-left: calc(var(--size) * (-.5));
    overflow: hidden;
    border-radius: 50%;
    color: #000;
    background: hsla(0, 0%, 100%, .8);
    -webkit-backdrop-filter: var(--backdrop-filter-bright);
    backdrop-filter: var(--backdrop-filter-bright);
    outline: none
}

.TheBrandUtilPanel[data-util=crop] .TheBrandButtonCenter[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandRoot[data-env~=short] .TheBrandUtilPanel[data-util=crop] .TheBrandUtilFooter {
    padding-bottom: .5em
}

.TheBrandUtilPanel[data-util=resize] form {
    display: flex;
    justify-content: center;
    padding: 0 1em
}

.TheBrandUtilPanel[data-util=resize] .TheBrandFormInner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.TheBrandUtilPanel[data-util=resize] .TheBrandFormInner>button {
    position: absolute;
    left: 100%;
    margin-left: 1em
}

.TheBrandUtilPanel[data-util=resize] .TheBrandFieldsetInner {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.TheBrandUtilPanel[data-util=resize] .TheBrandFieldsetInner>* {
    margin: .25em
}

.TheBrandUtilPanel[data-util=resize] .TheBrandResizeLabel {
    font-size: .75em
}

.TheBrandUtilPanel[data-util=resize] .TheBrandDropdownButton {
    margin-left: .5em;
    margin-right: .5em;
    background-color: var(--color-foreground-5);
    border-radius: var(--border-radius-round);
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    transition: background-color var(--transition-duration-10)
}

.TheBrandUtilPanel[data-util=resize] .TheBrandDropdownButton:hover {
    background-color: var(--color-foreground-10)
}

.TheBrandUtilPanel[data-util=resize] .TheBrandDropdownButton .TheBrandButtonLabel {
    display: block;
    line-height: 2.65;
    padding: 0 1em;
    font-variant-numeric: tabular-nums;
    font-size: .75em;
    font-weight: 400
}

.TheBrandUtilPanel[data-util=resize] .TheBrandDropdownButton .TheBrandButtonLabel:after {
    content: "▼";
    font-size: .6875em;
    margin-left: .75em;
    position: relative;
    top: -.125em;
    margin-right: -.25em;
    pointer-events: none
}

.TheBrandUtilPanel[data-util=resize] input[type=checkbox]+label {
    padding: 0 .125em;
    margin: 0 -.25em;
    outline: transparent;
    display: block;
    cursor: pointer
}

.TheBrandUtilPanel[data-util=resize] input[type=checkbox][data-focus-visible]+label {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandInputDimension {
    display: inline-flex;
    align-items: center;
    position: relative
}

.TheBrandInputDimension label {
    position: absolute;
    right: .625em;
    font-size: .75em;
    text-transform: uppercase;
    pointer-events: none;
    color: var(--color-foreground-80);
    z-index: 1
}

.TheBrandInputDimension button,
.TheBrandInputDimension input,
.TheBrandInputDimension label {
    font-size: .75em;
    font-weight: 400
}

.TheBrandInputDimension button,
.TheBrandInputDimension input {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    padding: .625em 0 .625em .625em;
    width: 100%;
    max-width: 7em;
    outline: transparent;
    border-radius: var(--border-radius);
    box-shadow: none;
    border: 1px solid var(--color-foreground-80);
    transition: background-color var(--transition-duration-10) ease-in-out, color var(--transition-duration-10) ease-in-out, border-color var(--transition-duration-10) ease-in-out
}

.TheBrandInputDimension button::-moz-selection,
.TheBrandInputDimension input::-moz-selection {
    background-color: var(--color-foreground-20)
}

.TheBrandInputDimension button::selection,
.TheBrandInputDimension input::selection {
    background-color: var(--color-foreground-20)
}

.TheBrandInputDimension button:hover,
.TheBrandInputDimension input:hover {
    background-color: var(--color-foreground-10)
}

.TheBrandInputDimension button:focus,
.TheBrandInputDimension input:focus {
    border-color: var(--color-focus-100)
}

.TheBrandInputDimension input {
    background-color: var(--color-foreground-5)
}

.TheBrandInputDimension input:-moz-placeholder-shown+label {
    color: var(--color-foreground-20)
}

.TheBrandInputDimension input:-ms-input-placeholder+label {
    color: var(--color-foreground-20)
}

.TheBrandInputDimension input:placeholder-shown+label {
    color: var(--color-foreground-20)
}

.TheBrandInputDimension input::-moz-placeholder {
    color: var(--color-foreground-30)
}

.TheBrandInputDimension input:-ms-input-placeholder {
    color: var(--color-foreground-30)
}

.TheBrandInputDimension input::placeholder {
    color: var(--color-foreground-30)
}

.TheBrandInputDimension input[data-state=invalid] {
    border-color: var(--color-error-75);
    box-shadow: inset 0 0 .25em var(--color-error-25), 0 0 .25em var(--color-error-50)
}

.TheBrandInputDimension button {
    width: 10em;
    min-height: 2.65em
}

.TheBrandInputDimension input::-webkit-inner-spin-button,
.TheBrandInputDimension input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.TheBrandInputDimension input::-ms-clear {
    display: none
}

.TheBrandRoot[dir=rtl] .TheBrandInputDimension label {
    left: .625em;
    right: auto
}

.TheBrandRoot[dir=rtl] .TheBrandInputDimension input {
    padding-right: .625em;
    padding-left: 0;
    text-align: right
}

.TheBrandModal {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --editor-modal-border-radius: 0;
    --editor-modal-overlay-opacity: 0.95;
    --editor-modal-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.25), 0 1.5em 1.5em -2em rgba(0, 0, 0, 0.5);
    --editor-modal-outline: inset 0 0 0 1px var(--color-foreground-3);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 2147483646;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--color-background), var(--editor-modal-overlay-opacity, var(--editor-modal-overlay-opacity-default, .95)))
}

.TheBrandModal>.TheBrandRoot[data-env~=is-centered] {
    box-shadow: var(--editor-modal-shadow);
    border-radius: var(--editor-modal-border-radius)
}

.TheBrandModal>.TheBrandRoot[data-env~=is-centered]:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    border-radius: inherit;
    content: "";
    box-shadow: var(--editor-modal-outline);
    z-index: 2147483646
}

.TheBrandModal[style*="--viewport-pad-footer:1"] {
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom)
}

.TheBrandModal+.TheBrandModal {
    --editor-modal-overlay-opacity-default: 0.75
}

@media(min-width:600px) and (min-height:600px) {
    .TheBrandModal+.TheBrandModal .TheBrandRoot {
        --editor-max-width-default: calc(100vw - 8em);
        --editor-max-height-default: calc(100vh - 8em)
    }
}

.TheBrandDocumentLock,
.TheBrandDocumentLock body {
    height: calc(var(--brand-document-height) - 1px);
    overflow-y: hidden;
    box-sizing: border-box
}

.TheBrandDocumentLock body {
    position: relative
}

.TheBrandDocumentLock .TheBrandModal {
    height: 100% !important
}

.TheBrandScrollable {
    --scrollable-feather-start-opacity: 0;
    --scrollable-feather-end-opacity: 0;
    --scrollable-feather-size: 2em;
    contain: paint;
    overflow: hidden
}

.TheBrandScrollable:focus {
    outline: transparent
}

.TheBrandScrollable>div {
    position: relative;
    display: inline-flex;
    vertical-align: top
}

 .TheBrandScrollable {
    touch-action: auto;
     -webkit-overflow-scrolling: touch;
}

.TheBrandScrollable[data-direction=x] {
    max-width: 100%;
    --mask-angle: 90deg
}

.TheBrandScrollable[data-direction=y] {
    max-height: 100%;
    --mask-angle: 180deg
}

.TheBrandScrollable[data-state~=overflows] {
    -webkit-mask: linear-gradient(var(--mask-angle), rgba(0, 0, 0, var(--scrollable-feather-start-opacity)), #000 var(--scrollable-feather-size), #000 calc(100% - var(--scrollable-feather-size)), rgba(0, 0, 0, var(--scrollable-feather-end-opacity)));
    mask: linear-gradient(var(--mask-angle), rgba(0, 0, 0, var(--scrollable-feather-start-opacity)), #000 var(--scrollable-feather-size), #000 calc(100% - var(--scrollable-feather-size)), rgba(0, 0, 0, var(--scrollable-feather-end-opacity)))
}

.TheBrandScrollable[data-state~=scrolling]>div * {

}

.TheBrandTabPanels {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;

}

.TheBrandTabPanel {
    position: relative;
    grid-row-start: 1;
    grid-column-start: 1;
    min-width: 0
}

.TheBrandTabPanel:not([hidden]) {
    z-index: 2;
    outline: transparent
}

.TheBrandTabPanel[hidden] {
    display: block !important;
    z-index: 1;
    pointer-events: none
}

.TheBrandTabPanel[data-inert=true] {
    visibility: hidden
}

@supports not (aspect-ratio:1) {
    .TheBrandTabPanel {
        overflow-x: hidden
    }
}

.TheBrandTabList {
    display: flex;
    justify-content: center;

}

.TheBrandTabList button {
    display: flex;
    align-items: center;
    flex-direction: column;
    outline: transparent;
    cursor: var(--button-cursor);
    -webkit-tap-highlight-color: transparent
}

.TheBrandTabList button>* {
    transition: filter var(--transition-duration-10) ease-out
}
.TheBrandTabList [role=tab] button {
    transition: transform var(--transition-duration-10) ease-out, box-shadow var(--transition-duration-10) ease-out, background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out;
}
.TheBrandTabList [role=tab] button:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 16px rgba(15,23,42,0.12);
}
.TheBrandTabList [role=tab] button:active {
    transform: scale(0.98);
    box-shadow: 0 3px 8px rgba(15,23,42,0.12);
}

.TheBrandTabList button[disabled]>* {
    filter: var(--filter-disabled)
}

/* Active tab accent color */
.TheBrandTabList li[aria-selected="true"] button {
    color: var(--color-secondary);
}

.TheBrandUtilPanel {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    contain: layout size;
    box-sizing: border-box
}

.TheBrandUtilPanel,
.TheBrandUtilPanel>* {
 padding-top: .3em;
    padding-bottom: 0em;

}

.TheBrandProgressIndicator {
    position: relative;
    display: block;
    width: 1.25em;
    height: 1.25em
}

.TheBrandProgressIndicator svg {
    pointer-events: none;
    vertical-align: top
}

.TheBrandProgressIndicator .TheBrandProgressIndicatorFill {
    stroke-dashoffset: 0
}

.TheBrandProgressIndicator[data-status=busy] svg {
    -webkit-animation: image_editor_spin 1s linear infinite;
    animation: image_editor_spin 1s linear infinite
}

.TheBrandProgressIndicator[data-status=busy] .TheBrandProgressIndicatorFill {
    stroke-dashoffset: -26.5;
    stroke-dasharray: 26.5 53;
    transition: stroke-dashoffset .5s linear, stroke-dasharray .5s linear
}

@-webkit-keyframes image_editor_spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes image_editor_spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
    .TheBrandRoot[data-env~=is-ios] .TheBrandProgressIndicator svg {
        transform-origin: 49% 49%
    }
}

.TheBrandButton {
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    cursor: var(--button-cursor)
}

.TheBrandButton>span {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    min-height: 1em
}

.TheBrandButton svg+.TheBrandButtonLabel {
    margin-left: .5em
}

.TheBrandButton[disabled] {
    cursor: default;
    filter: var(--filter-disabled)
}

.TheBrandButtonInner {
    text-decoration: inherit
}

.TheBrandButton:not(.TheBrandButtonIconOnly) svg:first-of-type {
    margin-left: -.25em
}

.TheBrandRoot[dir=rtl] .TheBrandButton:not(.TheBrandButtonIconOnly) svg:first-of-type {
    margin-right: -.25em
}

.TheBrandRoot[dir=rtl] .TheBrandButton svg+.TheBrandButtonLabel {
    margin-left: 0;
    margin-right: 1em
}

.TheBrandInputForm {
    opacity: 0;
    cursor: auto;
    z-index: 2147483647;
    --width: 30em
}

.TheBrandInputForm:not([data-stick=true]) {
    position: absolute;
    bottom: 7.5em;
    width: var(--width);
    left: calc(50% - var(--width) / 2);
    box-shadow: 0 .25em .5em -.5em rgba(0, 0, 0, .75), inset 0 0 0 1px var(--color-foreground-5);
    border-radius: var(--border-radius);
    background-color: var(--color-background-95)
}

@media(max-width:34em) {
    .TheBrandInputForm:not([data-stick=true]) {
        left: 2em;
        right: 2em;
        width: auto
    }
}

.TheBrandInputForm[data-stick=true] {
    transition: opacity .15s ease .25s;
    position: absolute;
    left: 0;
    right: 0;
    outline: 1px solid var(--color-foreground-15);
    background-color: var(--color-background-100)
}

.TheBrandInputForm[data-stick=true]>.TheBrandInputFormInner {
    background-color: var(--color-foreground-3)
}

.TheBrandInputFormInner>.TheBrandButton {
    color: var(--color-foreground-100);
    border-radius: 9999em;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandInputFormInner>.TheBrandButton:first-of-type {
    left: 1em
}

.TheBrandInputFormInner>.TheBrandButton:last-of-type {
    right: 1rem;
    color: var(--color-primary-text);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandInputFormInner>.TheBrandButton:not(.TheBrandButtonIconOnly) .TheBrandButtonInner {
    padding: 0 .875em
}

.TheBrandInputFormInner>.TheBrandButton .TheBrandButtonIcon {
    width: .875em;
    height: .875em
}

.TheBrandInputFormInner>.TheBrandButton.TheBrandButtonIconOnly {
    width: 1.875em;
    height: 1.875em
}

.TheBrandInputFormInner>.TheBrandButton .TheBrandButtonLabel {
    font-size: .75em
}

.TheBrandInputFormInner>.TheBrandButton .TheBrandButtonInner {
    line-height: 2;
    display: flex;
    justify-content: center
}

.TheBrandInputFormInner {
    padding-top: 1em;
    padding-bottom: 3.5em
}

.TheBrandInputFormInner>.TheBrandButton {
    position: absolute;
    bottom: 1em
}

.TheBrandInputFormFields textarea:only-child {
    height: 5em;
    -webkit-mask: linear-gradient(0deg, transparent, #000 1em);
    mask: linear-gradient(0deg, transparent, #000 1em)
}

.TheBrandInputFormFields textarea:only-child::-webkit-scrollbar {
    width: 1em;
    cursor: pointer
}

.TheBrandInputFormFields textarea:only-child::-webkit-scrollbar-track {
    background: none
}

.TheBrandInputFormFields textarea:only-child::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-clip: padding-box;
    background-color: var(--color-foreground-70);
    border-radius: 9999em;
    border: .25em solid transparent
}

.TheBrandInputFormFields input:only-child,
.TheBrandInputFormFields textarea:only-child {
    width: 100%;
    padding: 0 1em .5em;
    display: block;
    background: transparent
}

.TheBrandInputForm input,
.TheBrandInputForm textarea {
    box-sizing: border-box;
    resize: none;
    border: none;
    font-size: .875em;
    outline: transparent;
    color: var(--color-foreground-100)
}

.TheBrandInputForm input {
    background-color: var(--color-background-100)
}

.TheBrandModalBodyLock .TheBrandInputForm {
    margin-top: -50px
}

.TheBrandInputForm[data-layout=row] {
    --width: 30em;
    width: var(--width);
    max-width: calc(100% - 2em);
    border-radius: 9999em
}

.TheBrandInputForm[data-layout=row] .TheBrandInputFormFields {
    flex: 1
}

.TheBrandInputForm[data-layout=row] .TheBrandInputFormInner {
    display: flex;
    padding: .5em
}

.TheBrandInputForm[data-layout=row] .TheBrandInputFormInner input {
    padding: 0 .5em;
    line-height: 1.75;
    font-size: .8125em;
    flex: 1
}

.TheBrandInputForm[data-layout=row] .TheBrandInputFormInner .TheBrandButton:first-child {
    margin-right: 0
}

.TheBrandInputForm[data-layout=row] .TheBrandInputFormInner .TheBrandButton {
    position: static
}

.TheBrandInputForm[data-layout=row] .TheBrandInputFormInner .TheBrandButtonIconOnly {
    width: 1.5em;
    height: 1.5em
}

.TheBrandInputForm[data-layout=row] .TheBrandInputFormInner .TheBrandButtonLabel {
    font-size: .625em
}

.TheBrandUtilMain {
   /* padding-left: 1em;
    padding-right: 1em;*/
    min-height: 1px;
    touch-action: auto;
}

.TheBrandUtilMain,
.TheBrandUtilMain>[slot] {
    flex: 1;
    display: flex;
    flex-direction: column
}

.TheBrandUtilMain>[slot] {
    align-items: center
}

.TheBrandUtilFooter>[slot]:empty {
    min-height: 1em
}

.TheBrandUtilFooter>[slot] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    pointer-events: all
}

.TheBrandUtilFooter .TheBrandControlPanel .TheBrandImageButtonList,
.TheBrandUtilFooter .TheBrandShapeStyleList {
    min-height: 3.5em;
    align-items: flex-start
}

.TheBrandUtilFooter .TheBrandControlList [role=tab][aria-selected=true] button {
    background-color: var(--color-foreground-10);
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label,
.TheBrandUtilFooter .TheBrandControlList [role=tab] button {
    flex-direction: row;
    line-height: 1;
    padding: 0 .75em;
    min-height: 1.75em;
    white-space: nowrap;
    border-radius: var(--border-radius-round);
    transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, filter var(--transition-duration-25) ease-out;
    box-shadow: inset 0 0 0 1px var(--color-foreground-0);
    cursor: var(--button-cursor)
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label span,
.TheBrandUtilFooter .TheBrandControlList [role=tab] button span {
    font-size: .75em;
    font-weight: 400
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label svg,
.TheBrandUtilFooter .TheBrandControlList [role=tab] button svg {
    width: .875em;
    font-size: .875em
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label svg:only-child,
.TheBrandUtilFooter .TheBrandControlList [role=tab] button svg:only-child {
    margin-left: -.25em;
    margin-right: -.25em
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label svg:not(:only-child),
.TheBrandUtilFooter .TheBrandControlList [role=tab] button svg:not(:only-child) {
    margin-left: -.25em;
    margin-right: .375em
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label:hover,
.TheBrandUtilFooter .TheBrandControlList [role=tab] button:hover {
    box-shadow: inset 0 0 0 1px var(--color-foreground-10)
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label[data-focus-visible],
.TheBrandUtilFooter .TheBrandControlList [role=tab] button[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandUtilFooter .TheBrandControlListOption [slot],
.TheBrandUtilFooter .TheBrandControlListOption label {
    display: flex;
    flex-direction: row;
    align-items: center
}

.TheBrandUtilFooter .TheBrandControlListOption[data-selected=true] label {
    background-color: var(--color-foreground-10);
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandUtilFooter .TheBrandControlListOption input[data-focus-visible]+label {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandUtilFooter .TheBrandControlListOption input[disabled]+label {
    filter: var(--filter-disabled)
}

.TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption+.TheBrandControlListOption,
.TheBrandUtilFooter .TheBrandControlList>li+li {
    margin-left: .5em
}

.TheBrandUtilFooter .TheBrandControlPanels {
    display: grid;
    grid-template-columns: 1fr;
    width: 40em;
    max-width: 100%;
    margin: 0 auto;
    flex: auto
}

.TheBrandUtilFooter .TheBrandControlPanel {
    grid-row-start: 1;
    grid-column-start: 1;
    max-width: 100%;
    overflow: hidden;
    visibility: visible;
    opacity: 1
}

.TheBrandUtilFooter .TheBrandControlPanel[hidden] {
    display: block !important;
    visibility: hidden;
    transition-delay: 0s;
    pointer-events: none;
    opacity: 0
}

.TheBrandUtilFooter .TheBrandControlList[data-layout=compact]>*+* {
    margin-left: -1px
}

.TheBrandUtilFooter .TheBrandControlList[data-layout=compact]>[role=tab] button {
    padding-left: .625em;
    padding-right: .625em;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandUtilFooter .TheBrandControlList[data-layout=compact]>[role=tab]:only-child button {
    border-radius: var(--border-radius-round)
}

.TheBrandUtilFooter .TheBrandControlList[data-layout=compact]>[role=tab]:first-child:not(:only-child) button {
    padding-left: .75em;
    border-top-left-radius: var(--border-radius-round);
    border-bottom-left-radius: var(--border-radius-round)
}

.TheBrandUtilFooter .TheBrandControlList[data-layout=compact]>[role=tab]:last-child:not(:only-child) button {
    padding-right: .75em;
    border-top-right-radius: var(--border-radius-round);
    border-bottom-right-radius: var(--border-radius-round)
}

@supports not (aspect-ratio:1) {
    .TheBrandControlPanel {
        overflow-x: hidden
    }
}

.TheBrandRoot[data-env~=is-animated] .TheBrandUtilFooter .TheBrandControlPanel {
    transition: opacity var(--transition-duration-25) ease-in-out, visibility var(--transition-duration-25) linear;
    transition-delay: .1s
}

.TheBrandRoot[data-env~=has-controlgroups-preference-top] .TheBrandUtilHeader {
    order: 1
}

.TheBrandRoot[data-env~=has-controlgroups-preference-top] .TheBrandUtilFooter {
    order: 2
}

.TheBrandRoot[data-env~=has-controlgroups-preference-top] .TheBrandUtilMain {
    order: 3
}

.TheBrandRoot[data-env~=has-controltabs-preference-bottom] .TheBrandUtilFooter .TheBrandControlPanels {
    order: -1
}

.TheBrandRoot[data-env~=has-controltabs-preference-bottom] .TheBrandUtilFooter .TheBrandRangeInput .TheBrandRangeInputReset {
    top: 0;
    bottom: auto
}

.TheBrandRoot[data-env~=has-controltabs-preference-bottom] .TheBrandUtilFooter .TheBrandControlPanel .TheBrandShapePresetsGrouped {
    padding-bottom: .75em
}

.TheBrandRoot[data-env~=has-controltabs-preference-top] .TheBrandUtilFooter .TheBrandControlPanels {
    order: 1
}

.TheBrandRoot[data-env~=has-controltabs-preference-top] .TheBrandUtilFooter .TheBrandRangeInput .TheBrandRangeInputReset {
    top: auto;
    bottom: 0
}

.TheBrandRoot[data-env~=has-controltabs-preference-top] .TheBrandUtilFooter .TheBrandControlPanel .TheBrandShapePresetsGrouped {
    padding-top: .75em
}

.TheBrandRoot[data-env~=has-controltabs-preference-top] .TheBrandUtilFooter .TheBrandControlPanel .TheBrandImageButtonList,
.TheBrandRoot[data-env~=has-controltabs-preference-top] .TheBrandUtilFooter .TheBrandShapeStyleList {
    align-items: flex-end
}

.TheBrandRoot[data-env~=has-controltabs-preference-top] .TheBrandUtilFooter .TheBrandShapeStyleLabel {
    order: 1
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter {
    margin: .75em 0
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlPanels {
    max-width: 24em
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlList {
    margin-top: 1em
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlList>li+li {
    margin-left: 0
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlList li[role=tab] span {
    font-size: .75em
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlList li[role=tab] button {
    border-radius: 0;
    background-color: var(--color-background-50);
    -webkit-backdrop-filter: var(--backdrop-filter-bright);
    backdrop-filter: var(--backdrop-filter-bright);
    box-shadow: inset 0 0 0 1px var(--color-background-15), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35)
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlList li[role=tab]:first-child button {
    padding-left: .875em;
    border-top-left-radius: var(--border-radius-round);
    border-bottom-left-radius: var(--border-radius-round)
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlList li[role=tab]:last-child button {
    padding-right: .875em;
    border-top-right-radius: var(--border-radius-round);
    border-bottom-right-radius: var(--border-radius-round)
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlList li:not([aria-selected=true]) span {
    color: var(--color-foreground-40)
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandControlPanels {
    background-color: var(--color-background-50);
    -webkit-backdrop-filter: var(--backdrop-filter-bright);
    backdrop-filter: var(--backdrop-filter-bright);
    border-radius: var(--border-radius-round);
    box-shadow: inset 0 0 0 1px var(--color-background-15), 0 .0625em .125em rgba(0, 0, 0, .25), 0 .125em .35em rgba(0, 0, 0, .35)
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandRangeInput {
    height: 1.5em;
    margin-top: 0
}

.TheBrandRoot[data-env~=overlay] .TheBrandUtilFooter .TheBrandRangeInputReset {
    opacity: 0
}

.TheBrandRoot[dir=rtl] .TheBrandUtilFooter .TheBrandControlListOption [slot],
.TheBrandRoot[dir=rtl] .TheBrandUtilFooter .TheBrandControlListOption label {
    flex-direction: row-reverse
}

.TheBrandRoot[dir=rtl] .TheBrandUtilFooter .TheBrandControlList .TheBrandControlListOption label svg:not(:only-child),
.TheBrandRoot[dir=rtl] .TheBrandUtilFooter .TheBrandControlList [role=tab] button svg:not(:only-child) {
    margin-right: -.25em;
    margin-left: .375em
}

.TheBrandRangeInput {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    height: 3.5em;
    max-width: 24em;
    width: calc(100% - 2em);
    touch-action: none;
    --range-input-feather-left: 2em;
    --range-input-feather-right: 2em;
    --range-input-mask-from: 0%;
    --range-input-mask-to: 100%;
    --range-input-mask-color: rgba(0, 0, 0, 0.25);
    --range-input-line-color: var(--color-foreground-15);
    outline: transparent
}

.TheBrandRangeInput[data-focus-visible]:after {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100);
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1em);
    height: 2em;
    border-radius: .25em
}

.TheBrandRangeInputInner {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    contain: strict;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--range-input-feather-left), #000 calc(50% - 3em), transparent 50%, #000 calc(50% + 3em), #000 calc(100% - var(--range-input-feather-right)), transparent);
    mask: linear-gradient(90deg, transparent 0, #000 var(--range-input-feather-left), #000 calc(50% - 3em), transparent 50%, #000 calc(50% + 3em), #000 calc(100% - var(--range-input-feather-right)), transparent)
}

.TheBrandRangeInputMeter {
    height: 100%
}

.TheBrandRangeInput .TheBrandRangeInputMeter svg {
    display: block;
    pointer-events: none;
    fill: currentColor
}

.TheBrandRangeInput>.TheBrandRangeInputValue {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: calc(50% - .6875em);
    left: calc(50% - 1.75em);
    width: 3.5em;
    height: 1.5em;
    overflow: hidden;
    contain: strict;
    text-align: center;
    font-size: .75em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: Tahoma, Geneva, Verdana, sans-serif
}

.TheBrandRangeInput>.TheBrandRangeInputReset {
    position: absolute;
    left: calc(50% - 1.0625em);
    top: 0;
    margin-top: .125em;
    padding: 0;
    z-index: 1;
    width: 2em;
    overflow: hidden;
    color: transparent !important;
    transition: opacity var(--transition-duration-25);
    opacity: .35;
    outline: transparent;
    cursor: var(--button-cursor)
}

.TheBrandRangeInput>.TheBrandRangeInputReset:hover {
    opacity: .5
}

.TheBrandRangeInput>.TheBrandRangeInputReset[data-focus-visible] {
    opacity: 1
}

.TheBrandRangeInput>.TheBrandRangeInputReset[data-focus-visible]:before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
    height: 1em;
    width: 1em;
    z-index: 2;
    border-radius: .25em;
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandRangeInput>.TheBrandRangeInputReset[disabled] {
    opacity: .15
}

.TheBrandRangeInput>.TheBrandRangeInputReset:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 20%;
    width: 1px;
    height: 60%;
    background: var(--color-foreground-100)
}

.TheBrandRangeInputInner[data-value-limited] svg {
    -webkit-mask: linear-gradient(90deg, var(--range-input-mask-color) var(--range-mask-from), #000 var(--range-mask-from), #000 var(--range-mask-to), var(--range-input-mask-color) var(--range-mask-to));
    mask: linear-gradient(90deg, var(--range-input-mask-color) var(--range-mask-from), #000 var(--range-mask-from), #000 var(--range-mask-to), var(--range-input-mask-color) var(--range-mask-to))
}

.TheBrandRangeInputInner[data-value-limited] svg rect {
    x: var(--range-mask-from);
    width: calc(var(--range-mask-to) - var(--range-mask-from));
    fill: var(--range-input-line-color)
}

.TheBrandRadioGroup .TheBrandRadioGroupOptions {
    display: flex;
    flex-direction: column
}

.TheBrandRadioGroup .TheBrandRadioGroupOptionGroup+.TheBrandRadioGroupOptionGroup {
    margin-top: .5em
}

.TheBrandRadioGroup .TheBrandRadioGroupOption[data-hidden=true] {
    display: none
}

.TheBrandRadioGroup[data-layout=row] .TheBrandRadioGroupOptions {
    flex-direction: row
}

.TheBrandRadioGroup label {
    -webkit-tap-highlight-color: transparent
}

.TheBrandPresetListFilter .TheBrandRadioGroupOptions {
    justify-content: space-evenly;
    padding: .625em 0 .3125em
}

.TheBrandPresetListFilter .TheBrandRadioGroupOptions label {
    display: block;
    cursor: pointer
}

.TheBrandPresetListFilter+.TheBrandOptionsList {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.TheBrandImageInfo {
    pointer-events: none
}

.TheBrandImageInfo p {
    width: 8em;
    height: 1.25em;
    contain: strict;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    text-align: right;
    line-height: 1;
    font-size: .75em
}

.TheBrandShapeStyleEditor {
    position: relative;
    display: grid;
    grid-template-columns: 1fr
}

.TheBrandShapeStyleEditor>div {
    grid-row-start: 1;
    grid-column-start: 1;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.TheBrandShapeStyleEditorOverflow>div {
    overflow: visible;
    justify-content: flex-start
}

.TheBrandShapeStyleEditorOverflow .TheBrandShapeStyleList {
    min-height: auto;
    margin-left: 1em
}

.TheBrandShapeStyleEditorOverflow .TheBrandShapeStyle {
    --control-height: 1.75em
}

.TheBrandShapeStyles {
    position: relative
}

.TheBrandShapeStyles:not([data-state~=overflows]) {
    display: flex;
    justify-content: center
}

.TheBrandShapeStyleList {
    display: flex
}

.TheBrandShapeStyleList .TheBrandButton,
.TheBrandShapeStyleList .TheBrandInput {
    outline: transparent
}

.TheBrandShapeStyleList .TheBrandInput {
    padding: 0 0 0 .625em;
    font-size: .75em;
    line-height: 2.25
}

.TheBrandShapeStyleList .TheBrandShapeStyleLabel {
    line-height: 1.75;
    font-size: .625em;
    font-weight: 300;
    padding: 0 .75em;
    text-transform: lowercase;
    pointer-events: none;
    text-align: center;
    color: var(--color-foreground-50);
    white-space: nowrap
}

.TheBrandShapeStyleList>.TheBrandShapeStyle {
    border-radius: var(--border-radius-round)
}

.TheBrandShapeStyleList>.TheBrandShapeStyle+.TheBrandShapeStyle {
    margin-left: 1em
}

.TheBrandShapeStyle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    --control-height: 1.5em
}

.TheBrandShapeStyle .TheBrandPanelButton {
    border-radius: inherit
}

.TheBrandShapeStyle>.TheBrandButton:hover,
.TheBrandShapeStyle>.TheBrandButton[data-focus-visible] {
    position: relative;
    z-index: 1
}

.TheBrandShapeStyle>.TheBrandColorPickerButton .TheBrandButtonLabel {
    display: block;
    border-radius: inherit
}

.TheBrandShapeStyle>.TheBrandColorPickerButton {
    display: flex;
    justify-content: center
}

.TheBrandShapeStyle .TheBrandColorPreview {
    border-radius: inherit;
    width: 1.5em;
    height: 1.5em;
    background-color: #fff;
    background-size: 4px
}

.TheBrandShapeStyle .TheBrandColorPreview span {
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandShapeStyle [data-focus-visible] .TheBrandColorPreview span:before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100);
    content: "";
    z-index: 1
}

.TheBrandShapeStyle>.TheBrandColorPickerButtonStroke .TheBrandColorPreview {
    -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px);
    mask: radial-gradient(circle, transparent 5.5px, #000 6px);
    -webkit-mask-size: cover;
    mask-size: cover
}

.TheBrandShapeStyle>.TheBrandColorPickerButtonStroke .TheBrandColorPreview span:after {
    position: absolute;
    left: 6px;
    top: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: inherit;
    box-shadow: 0 0 0 1px var(--color-foreground-5);
    content: ""
}

.TheBrandShapeStyle>.TheBrandDropdownButton .TheBrandButtonLabel,
.TheBrandShapeStyle>.TheBrandRadioGroup .TheBrandButtonLabel,
.TheBrandShapeStyle>.TheBrandRadioGroupOption label,
.TheBrandShapeStyle>.TheBrandSliderButton .TheBrandButtonLabel {
    display: block;
    line-height: 2.25;
    padding: 0 1em;
    font-size: .6875em
}

.TheBrandShapeStyle>.TheBrandButton:not(.TheBrandColorPickerButton)[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandShapeStyle .TheBrandInputField {
    padding: 0 .75em;
    width: 3em;
    height: 2em;
    line-height: 2em;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    border-radius: var(--border-radius)
}

.TheBrandShapeStyle .TheBrandPromptInputGroup {
    position: relative;
    display: flex;
    align-items: flex-start
}

.TheBrandShapeStyle .TheBrandPromptInputGroup .TheBrandInput {
    width: 18em;
    padding: 0
}

.TheBrandShapeStyle .TheBrandPromptInputGroup .TheBrandInput input {
    padding-right: 2em
}

.TheBrandShapeStyle .TheBrandPromptInputGroup>.TheBrandButton:not(.TheBrandButtonIconOnly) {
    display: block;
    line-height: 2.125;
    margin-left: .5em;
    padding: 0 1em;
    font-size: .6875em;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    background-color: var(--color-foreground-10);
    border-radius: var(--border-radius)
}

.TheBrandShapeStyle .TheBrandPromptInputGroup .TheBrandButtonIconOnly {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.75em;
    height: 1.75em;
    padding: 0;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    border-radius: var(--border-radius)
}

.TheBrandShapeStyle .TheBrandPromptInputGroup .TheBrandButtonIconOnly svg {
    width: .875em
}

.TheBrandShapeStyle .TheBrandPromptInputGroup .TheBrandProgressIndicator {
    position: absolute;
    width: .875em;
    height: .875em;
    pointer-events: none
}

.TheBrandShapeStyle .TheBrandPromptInputGroup .TheBrandProgressIndicator svg {
    width: .875em
}

.TheBrandShapeStyle .TheBrandPromptInputWrapper {
    position: relative;
    display: flex;
    align-items: center
}

.TheBrandShapeStyle .TheBrandPromptInputWrapper .TheBrandProgressIndicator {
    right: .3125em
}

.TheBrandShapeStyle .TheBrandGenerateMoreButtonWrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .3125em;
    margin-left: .75em
}

.TheBrandShapeStyle .TheBrandPromptOptions {
    margin-left: .5em;
    display: flex;
    align-items: center
}

.TheBrandShapeStyle .TheBrandPromptOption {
    position: relative;
    padding: 0;
    margin-left: .5em;
    border-radius: .5em
}

.TheBrandShapeStyle .TheBrandPromptOption:after,
.TheBrandShapeStyle .TheBrandPromptOption img {
    border-radius: .5em;
    pointer-events: none
}

.TheBrandShapeStyle .TheBrandPromptOption:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandShapeStyle .TheBrandPromptOption img {
    display: block;
    width: 2.5em;
    height: 2.5em;
    -o-object-fit: cover;
    object-fit: cover
}

.TheBrandShapeStyle>.TheBrandDropdownButton {
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    transition: background-color var(--transition-duration-10)
}

.TheBrandShapeStyle>.TheBrandDropdownButton:hover {
    background-color: var(--color-foreground-10)
}

.TheBrandShapeStyle>.TheBrandDropdownButton .TheBrandButtonLabel:after,
.TheBrandShapeStyle>.TheBrandDropdownButton .TheBrandComboBox:after {
    content: "▼";
    font-size: .6875em;
    margin-left: .75em;
    position: relative;
    top: -.125em;
    margin-right: -.25em;
    pointer-events: none
}

.TheBrandShapeStyle>.TheBrandDropdownButton .TheBrandComboBox:after {
    top: 0;
    margin-left: .375em;
    font-size: .47265625em
}

.TheBrandShapeStyle .TheBrandComboBox {
    padding-right: .75em
}

.TheBrandShapeStyle .TheBrandComboBox .TheBrandInput {
    padding-left: 0
}

.TheBrandShapeStyle .TheBrandComboBox .TheBrandInput input {
    box-shadow: none
}

.TheBrandShapeStyle .TheBrandComboBox .TheBrandInputField {
    padding-right: .375em
}

.TheBrandShapeStyle>.TheBrandRadioGroup>.TheBrandRadioGroupOptions {
    flex-direction: row
}

.TheBrandShapeStyle>.TheBrandRadioGroup>.TheBrandRadioGroupOptions label {
    cursor: var(--button-cursor);
    display: flex;
    height: var(--control-height);
    align-items: center;
    padding: 0 .25em;
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    transition: background-color var(--transition-duration-10)
}

.TheBrandShapeStyle>.TheBrandRadioGroup>.TheBrandRadioGroupOptions label:hover {
    background-color: var(--color-foreground-20)
}

.TheBrandShapeStyle>.TheBrandRadioGroup>.TheBrandRadioGroupOptions svg {
    width: 1.125em;
    height: 1.125em
}

.TheBrandShapeStyle>.TheBrandRadioGroup>.TheBrandRadioGroupOptions .TheBrandRadioGroupOption:first-of-type label {
    padding-left: .5em;
    border-top-left-radius: var(--border-radius-round);
    border-bottom-left-radius: var(--border-radius-round)
}

.TheBrandShapeStyle>.TheBrandRadioGroup>.TheBrandRadioGroupOptions .TheBrandRadioGroupOption:last-of-type label {
    padding-right: .5em;
    border-top-right-radius: var(--border-radius-round);
    border-bottom-right-radius: var(--border-radius-round)
}

.TheBrandShapeStyle>.TheBrandRadioGroup>.TheBrandRadioGroupOptions [data-selected=true] label {
    background-color: var(--color-foreground-10)
}

.TheBrandRoot[dir=rtl] .TheBrandShapeStyle>.TheBrandDropdownButton .TheBrandButtonLabel:after,
.TheBrandRoot[dir=rtl] .TheBrandShapeStyle>.TheBrandDropdownButton .TheBrandComboBox:after {
    margin-right: .75em;
    margin-left: -.25em
}

.TheBrandToolbar {
    display: flex;
    justify-content: center;
    margin-left: 1em;
    margin-right: 1em
}

.TheBrandToolbar .TheBrandToolbarInner {
    display: inline-flex
}

.TheBrandToolbar[data-layout=compact] .TheBrandToolbarContentWide,
.TheBrandToolbar[data-overflow=overflow] .TheBrandToolbarContentOptional {
    display: none
}

.TheBrandToolbar .TheBrandButton {
    border-radius: var(--border-radius-round);
    outline: transparent;
    padding: .3125em .75em;
    transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, box-shadow var(--transition-duration-10) ease-out;
    line-height: 1.1
}

.TheBrandToolbar .TheBrandButton:hover {
    box-shadow: inset 0 0 0 1px var(--color-foreground-5)
}

.TheBrandToolbar .TheBrandButton[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandToolbar .TheBrandButton .TheBrandButtonIcon {
    width: 1em
}

.TheBrandToolbar .TheBrandButtonLabel {
    font-size: .75em
}

.TheBrandToolbar .TheBrandPanel {
    z-index: 3
}

.TheBrandToolbar .TheBrandToolbarInner>* {
    margin: 0 .5em
}

.TheBrandRectManipulator {
    --size: 1.25em;
    position: absolute;
    left: 0;
    top: 0;
    outline: none;
    touch-action: none;
    transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) scale(var(--sx), var(--sy))
}

.TheBrandRectManipulator:not([data-shape=edge]) {
    width: var(--size);
    height: var(--size);
    z-index: 2
}

.TheBrandRectManipulator:not([data-shape=edge]):after {
    position: absolute;
    left: -.5em;
    right: -.5em;
    top: -.5em;
    bottom: -.5em;
    border-radius: inherit;
    content: ""
}

.TheBrandRectManipulator:not([data-shape=edge])[data-focus-visible]:after {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandRectManipulator[data-shape~=circle] {
    margin-left: calc(var(--size) * (-.5));
    margin-top: calc(var(--size) * (-.5));
    line-height: var(--size);
    border-radius: 50%;
    background-color: var(--color-foreground-100);
    box-shadow: 0 0 2px var(--color-background-50)
}

.TheBrandRectManipulator[data-shape=hook] {
    border: 3px solid var(--color-foreground-100)
}

.TheBrandRectManipulator[data-shape=hook][data-direction*=t] {
    margin-top: -3px;
    border-bottom: 0
}

.TheBrandRectManipulator[data-shape=hook][data-direction*=r] {
    border-left: 0;
    margin-left: calc(var(--size) * (-1))
}

.TheBrandRectManipulator[data-shape=hook][data-direction*=b] {
    margin-top: calc(var(--size) * (-1));
    border-top: 0
}

.TheBrandRectManipulator[data-shape=hook][data-direction*=l] {
    border-right: 0;
    margin-left: -3px
}

.TheBrandRectManipulator[data-shape~=edge] {
    height: 1px;
    width: 1px;
    z-index: 1
}

.TheBrandRectManipulator[data-shape~=edge][data-focus-visible] {
    background-color: var(--color-focus-50)
}

.TheBrandRectManipulator[data-direction=b],
.TheBrandRectManipulator[data-direction=t] {
    cursor: ns-resize;
    height: var(--size);
    margin-top: calc(var(--size) * (-.5));
    transform-origin: 0 center
}

.TheBrandRectManipulator[data-direction=l],
.TheBrandRectManipulator[data-direction=r] {
    cursor: ew-resize;
    width: var(--size);
    margin-left: calc(var(--size) * (-.5));
    transform-origin: center 0
}

.TheBrandRectManipulator[data-direction=bl],
.TheBrandRectManipulator[data-direction=tr] {
    cursor: nesw-resize
}

.TheBrandRectManipulator[data-direction=br],
.TheBrandRectManipulator[data-direction=tl] {
    cursor: nwse-resize
}

.TheBrandRoot[data-env~=pointer-coarse] .TheBrandRectManipulator[data-shape=edge]:active {
    background-color: var(--color-foreground-5)
}

.TheBrandRoot[data-env~=pointer-coarse] .TheBrandRectManipulator:not([data-shape=edge]):after {
    left: -1em;
    right: -1em;
    top: -1em;
    bottom: -1em
}

.TheBrandRoot[data-env~=pointer-coarse] .TheBrandRectManipulator:not([data-shape=edge]):active:after {
    background-color: var(--color-foreground-5)
}

.TheBrandRoot[data-env*=chrome-] .TheBrandRectManipulator {
    transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0)
}

.TheBrandRoot[data-env*=chrome-] .TheBrandRectManipulator[data-direction=b],
.TheBrandRoot[data-env*=chrome-] .TheBrandRectManipulator[data-direction=t] {
    width: calc(var(--sx) * 1px)
}

.TheBrandRoot[data-env*=chrome-] .TheBrandRectManipulator[data-direction=l],
.TheBrandRoot[data-env*=chrome-] .TheBrandRectManipulator[data-direction=r] {
    height: calc(var(--sy) * 1px)
}

.TheBrandRoot .TheBrandImageButton {
    --thumb-size: 1.75em;
    --thumb-radius: 0.3125em;
    --thumb-margin: 0.3125em;
    padding: var(--thumb-margin);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    cursor: var(--button-cursor);
    outline: transparent
}

.TheBrandRoot .TheBrandImageButton>* {
    pointer-events: none
}

.TheBrandRoot .TheBrandImageButton {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: filter var(--transition-duration-25) ease-out
}

.TheBrandRoot .TheBrandImageButton[disabled] {
    filter: var(--filter-disabled)
}

.TheBrandRoot .TheBrandImageButton:hover {
    background-color: var(--color-foreground-10)
}

.TheBrandRoot .TheBrandImageButton text {
    font-family: monospace
}

.TheBrandRoot .TheBrandImageButton img,
.TheBrandRoot .TheBrandImageButton svg {
    display: block;
    width: var(--thumb-size);
    height: var(--thumb-size);
    min-width: auto;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--thumb-radius)
}

.TheBrandRoot .TheBrandImageButton[data-loader]:after,
.TheBrandRoot .TheBrandImageButton[data-loader]:before {
    display: block;
    width: var(--thumb-size);
    height: var(--thumb-size);
    line-height: var(--thumb-size);
    border-radius: var(--thumb-radius)
}

.TheBrandRoot .TheBrandImageButton[data-error] img {
    display: none
}

.TheBrandRoot .TheBrandImageButton[data-error]:after {
    content: "⚠";
    box-shadow: inset 0 0 0 1px var(--color-error-75);
    background-color: var(--color-error-10);
    color: var(--color-error-75)
}

.TheBrandRoot .TheBrandImageButton[data-loader] {
    position: relative
}

.TheBrandRoot .TheBrandImageButton[data-loader]:before {
    content: "";
    position: absolute;
    left: var(--thumb-margin);
    top: var(--thumb-margin);
    -webkit-animation: brand-img-loading calc(var(--transition-duration-multiplier, 0) * 1s) infinite alternate ease-in-out;
    animation: brand-img-loading calc(var(--transition-duration-multiplier, 0) * 1s) infinite alternate ease-in-out;
    background-color: var(--color-foreground-10);
    transition: transform calc(var(--transition-duration-multiplier, 0) * .5s) ease-in;
    z-index: -1
}

.TheBrandRoot .TheBrandImageButton[data-loader] img {
    opacity: 0;
    transition: opacity calc(var(--transition-duration-multiplier, 0) * .35s) ease-out
}

.TheBrandRoot .TheBrandImageButton[data-loader][data-load] img {
    opacity: 1
}

.TheBrandRoot .TheBrandImageButton[data-loader][data-error]:before,
.TheBrandRoot .TheBrandImageButton[data-loader][data-load]:before {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    transform: scale(.5)
}

@-webkit-keyframes brand-img-loading {
    0% {
        opacity: .5
    }
    50% {
        opacity: 1
    }
    to {
        opacity: .5
    }
}

@keyframes brand-img-loading {
    0% {
        opacity: .5
    }
    50% {
        opacity: 1
    }
    to {
        opacity: .5
    }
}

.TheBrandImageButtonList,
.TheBrandImageButtonList>li {
    display: flex;
    align-items: center
}

.TheBrandImageButtonList>li {
    --thumb-size: 1.75em;
    --thumb-radius: 0.3125em;
    --thumb-margin: 0.3125em;
    justify-content: center;
    position: relative
}

.TheBrandImageButtonList>li+li {
    margin-left: .5em
}

.TheBrandInput {
    display: flex;
    flex-direction: row
}

.TheBrandInput input[disabled] {
    filter: var(--filter-disabled)
}

.TheBrandInputField {
    flex: 1;
    outline: transparent
}

.TheBrandInputField[type=number] {
    -moz-appearance: textfield
}

.TheBrandInputField[type=number]::-webkit-inner-spin-button,
.TheBrandInputField[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.TheBrandInputSpinners {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center
}

.TheBrandInputSpinners button {
    line-height: 1 !important;
    width: 2em;
    font-size: .5em !important;
    outline: transparent
}

.TheBrandPanel.TheBrandSliderPanel {
    border-radius: var(--border-radius-round)
}

.TheBrandPercentageLabel {
    font-variant-numeric: tabular-nums;
    min-width: 3em;
    text-align: center
}

.TheBrandSliderPanel .TheBrandSlider {
    width: 10em;
    --knob-size: 0.75em;
    --knob-margin-left: 0.3125em;
    --knob-margin-right: 0.3125em
}

.TheBrandSliderPanel .TheBrandSliderTrack {
    background-color: var(--color-foreground-10)
}

.TheBrandSliderPanel .TheBrandSliderKnob {
    background-color: var(--color-foreground-100);
    box-shadow: 0 .125em .25em rgba(0, 0, 0, .35), 0 -.125em .25em rgba(0, 0, 0, .1)
}

.TheBrandShapeList {
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-duration-10) ease-in-out;
    position: absolute;
    top: 1em;
    left: 1em;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    z-index: 1;
    border-radius: var(--border-radius);
    color: var(--color-foreground-100);
    background: var(--color-background-70);
    box-shadow: 0 0 0 1px var(--color-foreground-5)
}

.TheBrandShapeList li+li {
    margin-top: -.3125em
}

.TheBrandShapeList[data-visible=true] {
    opacity: 1
}

.TheBrandShapeList .TheBrandColorPreview {
    width: .75em;
    height: .75em;
    margin-right: .25em;
    border-radius: .25em
}

.TheBrandShapeList .TheBrandShapeListItem {
    display: flex;
    align-items: center;
    padding: .25em .5em;
    outline: none
}

.TheBrandShapeList .TheBrandShapeListItem>span {
    font-size: .75em;
    line-height: 1.75;
    padding: 0 .325em;
    margin-left: -.325em
}

.TheBrandShapeList .TheBrandShapeListItem[data-focus-visible]>span {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandShapeList[data-visible=true] .TheBrandShapeListItem {
    pointer-events: all
}

.TheBrandShapeEditor {
    height: 100%;
    width: 100%;
    outline: none;
    touch-action: none
}

.TheBrandShapeControls {
    position: absolute !important;
    left: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center
}

.TheBrandShapeControlsGroup {
    pointer-events: all;
    color: #eee;
    background: #222;
    box-shadow: 0 .125em .25em rgba(0, 0, 0, .25);
    border-radius: .25em
}

.TheBrandShapeControlsGroup,
.TheBrandShapeControlsGroup .TheBrandShapeControlsGroupToggle {
    display: inline-flex;
    min-height: 1.75em
}

.TheBrandShapeControlsGroup+.TheBrandShapeControlsGroup {
    margin-left: .5em
}

.TheBrandShapeControlsGroup .TheBrandShapeControlsGroupToggle {
    position: relative
}

.TheBrandShapeControlsGroup .TheBrandButton {
    outline: transparent
}

.TheBrandShapeControlsGroup .TheBrandButton[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandShapeControlsGroup .TheBrandButton[disabled]>span {
    opacity: .5;
    pointer-events: all;
    cursor: not-allowed
}

.TheBrandShapeControlsGroup>.TheBrandButton {
    display: block;
    font-weight: 700;
    transition: background-color var(--transition-duration-10);
    outline: transparent
}

.TheBrandShapeControlsGroup>.TheBrandButton:hover {
    background-color: hsla(0, 0%, 100%, .15)
}

.TheBrandShapeControlsGroup>.TheBrandButton .TheBrandButtonLabel {
    display: block;
    font-size: .6875em;
    padding: 0 .75em;
    line-height: 1.7em
}

.TheBrandShapeControlsGroup .TheBrandButtonIconOnly {
    width: 1.75em;
    transition: background-color var(--transition-duration-10)
}

.TheBrandShapeControlsGroup .TheBrandButtonIconOnly:hover {
    background-color: hsla(0, 0%, 100%, .15)
}

.TheBrandShapeControlsGroup>button:first-of-type {
    border-radius: .25em 0 0 .25em
}

.TheBrandShapeControlsGroup>button:last-of-type {
    border-radius: 0 .25em .25em 0
}

.TheBrandShapeControlsGroup>button:only-of-type {
    border-radius: .25em
}

.TheBrandShapeControlsGroup>*+* {
    border-left: 1px solid rgba(0, 0, 0, .5)
}

.TheBrandShapeControlsGroup svg {
    pointer-events: none
}

.TheBrandInlineInput {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    transform-origin: center;
    display: flex
}

.TheBrandInlineInput:before {
    content: "";
    width: 0;
    height: var(--line-height)
}

.TheBrandContentEditable {
    margin: 0;
    padding: 0;
    width: calc(100% / var(--font-scalar));
    height: calc((100% / var(--font-scalar)) - var(--bottom-inset, 0));
    overflow: hidden;
    outline: none;
    vertical-align: top
}

.TheBrandShapePresetsPalette {
    text-align: center;
    width: 40em;
    max-width: 100%;
    overflow: hidden
}

.TheBrandShapePresetsPalette .TheBrandShapePresetSelect {
    vertical-align: top;
    display: inline-block
}

.TheBrandShapePresetsPalette .TheBrandScrollable:not([data-state~=overflows]) {
    display: flex;
    justify-content: center
}

.TheBrandShapePresetsPalette .TheBrandButton+.TheBrandButton {
    margin-left: .5em
}

.TheBrandShapePresetsPalette .TheBrandButton {
    flex-direction: row;
    line-height: 1.1;
    padding: .3125em .75em;
    border-radius: var(--border-radius-round);
    box-shadow: inset 0 0 0 1px var(--color-foreground-5);
    cursor: var(--button-cursor);
    transition: background-color var(--transition-duration-10) ease-out, color var(--transition-duration-10) ease-out, box-shadow var(--transition-duration-10) ease-out;
    outline: none
}

.TheBrandShapePresetsPalette .TheBrandButton .TheBrandButtonIcon {
    width: 1em
}

.TheBrandShapePresetsPalette .TheBrandButton .TheBrandButtonLabel {
    font-size: .75em
}

.TheBrandShapePresetsPalette .TheBrandButton:hover {
    box-shadow: inset 0 0 0 1px var(--color-foreground-10)
}

.TheBrandShapePresetsPalette .TheBrandButton[data-focus-visible] {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandShapePresetsPalette .TheBrandShapePresetsFlat>*+*,
.TheBrandShapePresetsPalette .TheBrandShapePresetsGroups>*+*,
.TheBrandShapePresetsPalette .TheBrandShapePresetsGroups>div>*+* {
    margin-left: .5em
}

.TheBrandShapePresetsGroups {
    display: flex
}

.TheBrandShapePresetsGrouped {
    display: flex;
    flex-direction: column;
    align-items: center
}

.TheBrandShapePresetsGrouped [role=tab] {
    white-space: nowrap
}

.TheBrandShapePresetsFlat {
    display: flex;
    align-items: center;
    justify-content: center
}

.TheBrandShapePresetsFlat>.TheBrandButton {
    margin-left: 1em
}

.TheBrandOptionsList,
.TheBrandOptionsListWrapper {
    border-radius: inherit
}

.TheBrandOptionsList .TheBrandListOption {
    transition: background-color var(--transition-duration-10);
    border-radius: inherit
}

.TheBrandOptionsList .TheBrandListOption label {
    display: block;
    margin: 0;
    border-radius: inherit;
    white-space: nowrap
}

.TheBrandOptionsList .TheBrandListOption svg {
    margin-right: .25em;
    margin-left: -.5em;
    min-width: 1.5em
}

.TheBrandOptionsList .TheBrandListOption svg:only-child {
    margin-left: 0;
    margin-right: 0
}

.TheBrandOptionsList .TheBrandListOption [slot] {
    display: flex;
    align-items: center;
    padding: .325em .75em
}

.TheBrandOptionsList .TheBrandDropdownOptionLabel {
    font-size: .75em;
    line-height: 1.75;
    padding: 0 .325em;
    margin-left: -.325em;
    display: inline-flex;
    flex-direction: column
}

.TheBrandOptionsList .TheBrandDropdownOptionSublabel {
    font-size: .75em;
    opacity: .5;
    margin-top: -.5em
}

.TheBrandOptionsList .TheBrandListOptionGroup>span {
    display: block;
    padding: .75em 1em;
    text-transform: uppercase;
    font-size: .75em;
    color: var(--color-foreground-50)
}

.TheBrandOptionsList [data-disabled=true] {
    color: var(--color-foreground-50)
}

.TheBrandOptionsList [data-selected=false]:not([data-disabled=true]):hover {
    background-color: var(--color-foreground-10)
}

.TheBrandOptionsList [data-selected=true] {
    color: var(--color-foreground-100);
    background-color: var(--color-foreground-20)
}

.TheBrandOptionsList [data-focus-visible]+label .TheBrandDropdownOptionLabel {
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100);
    border-radius: .25em
}

.TheBrandListOption label {
    margin: 0
}

.TheBrandRoot[dir=rtl] .TheBrandDropdownOptionLabel {
    margin-right: -.325em;
    align-items: flex-end
}

.TheBrandRoot[dir=rtl] .TheBrandListOption svg {
    margin-left: -.5em;
    margin-right: auto
}

.TheBrandRoot[dir=rtl] .TheBrandListOption svg+span {
    margin-left: .25em
}

.TheBrandRoot[dir=rtl] .TheBrandListOption [slot] {
    justify-content: flex-end
}

.TheBrandColorPickerPanel {
    padding: .5em;
    max-width: 14em;
    overflow: visible;
    touch-action: none
}

.TheBrandColorPickerPanel .TheBrandColorPickerButton {
    outline: transparent
}

.TheBrandColorPickerPanel .TheBrandColorPickerButton[data-focus-visible] {
    box-shadow: inset 0 0 0 1px var(--color-foreground-70)
}

.TheBrandColorPickerPanel .TheBrandColorPreview {
    width: 1.25em;
    height: 1.25em;
    border-radius: .25em
}

.TheBrandColorPickerPanel .TheBrandColorPreview span {
    border-radius: .2em;
    box-shadow: inset 0 0 0 1px var(--color-foreground-20)
}

.TheBrandColorPickerPanel .TheBrandColorPresets legend {
    color: var(--color-foreground-50);
    margin: 0 0 .25em .3125em;
    font-size: .75em
}

.TheBrandColorPickerPanel .TheBrandColorPresets:only-child legend {
    display: none
}

.TheBrandColorPickerPanel .TheBrandColorPresetsGrid .TheBrandRadioGroupOptions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.TheBrandColorPickerPanel .TheBrandColorPresetsGrid .TheBrandListOption {
    display: block;
    padding: .25em
}

.TheBrandColorPickerPanel .TheBrandColorPresetsGrid .TheBrandListOption label,
.TheBrandColorPickerPanel .TheBrandColorPresetsGrid .TheBrandListOption label span {
    display: block;
    cursor: var(--button-cursor)
}

.TheBrandColorPickerPanel .TheBrandColorPresetsGrid input[data-focus-visible]+label .TheBrandColorPreview:after {
    position: absolute;
    left: -.3125em;
    right: -.3125em;
    top: -.3125em;
    bottom: -.3125em;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandColorPickerPanel .TheBrandSlider {
    margin-left: -.325em;
    margin-right: -.325em
}


.TheBrandColorPickerPanel .TheBrandSlider>.TheBrandSliderControl {
    position: relative;
    z-index: 2
}

.TheBrandColorPickerPanel .TheBrandPicker {
    width: 100%
}

.TheBrandColorPickerPanel .TheBrandPicker+.TheBrandColorPresets {
    margin-top: .5em
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandPickerKnob,
.TheBrandColorPickerPanel .TheBrandPicker .TheBrandSliderKnob {
    border-radius: 9999em;
    box-shadow: inset 0 .06125em .06125em rgba(0, 0, 0, .1), 0 0 0 .06125em #fff, 0 .1875em .25em rgba(0, 0, 0, .35), 0 -.125em .25em rgba(0, 0, 0, .1)
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandPickerKnob {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    margin-left: -.625em;
    margin-top: -.625em;
    width: 1.25em;
    height: 1.25em;
    visibility: visible;
    outline: none
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandPickerKnob[data-focus-visible]:after {
    position: absolute;
    left: -.3125em;
    right: -.3125em;
    top: -.3125em;
    bottom: -.3125em;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandPickerKnobController {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    visibility: hidden
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandSaturationPicker {
    position: relative;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    margin: -.5em -.5em .5em;
    height: 7em;
    background-image: linear-gradient(180deg, transparent, #000), linear-gradient(90deg, #fff, transparent)
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandHuePicker .TheBrandSliderTrack {
    background-image: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red)
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandSliderTrack {
    box-shadow: inset 0 0 1px var(--color-foreground-50)
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandOpacityPicker .TheBrandSliderKnob:before,
.TheBrandColorPickerPanel .TheBrandPicker .TheBrandOpacityPicker .TheBrandSliderTrack:before {
    position: absolute;
    content: "";
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
    background-color: #fff;
    background-image: var(--pattern-transparent)
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandOpacityPicker .TheBrandSliderKnob:before {
    background-position: calc(var(--slider-position) * -2px) 0
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandOpacityPicker {
    margin-top: .5em
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandColorPickerInput {
    color: var(--color-foreground-80);
    margin: .75em 0 .25em .3125em;
    width: calc(100% - .625em);
    line-height: 1.75;
    text-indent: .5em;
    font-size: .875em;
    border-radius: .25em;
    border: 1px solid var(--color-foreground-20);
    font-variant: tabular-nums;
    text-transform: uppercase
}

.TheBrandColorPickerPanel .TheBrandPicker .TheBrandColorPickerInput:focus {
    outline: transparent;
    border-color: var(--color-focus-100)
}

.TheBrandPanel {
    --color-inset: hsla(0, 0%, 100%, 0.1);
    --color-fill: var(--color-foreground-5);

    z-index: 2147483647;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    cursor: auto;
    outline: transparent;
    box-shadow: inset 0 0 0 1px var(--color-inset), 0 .125em .25em rgba(0, 0, 0, .25), 0 .125em .75em rgba(0, 0, 0, .15), 0 .125em .125em rgba(0, 0, 0, .1);
    border-radius: var(--border-radius)
}

.TheBrandPanel,
.TheBrandPanelTip {
    position: absolute;
    color: var(--color-foreground-90);
    background-color: var(--color-background-100);
    background-image: linear-gradient(var(--color-fill), var(--color-fill));
    background-blend-mode: screen
}

.TheBrandPanelTip {
    --tip-mask: transparent calc(50% - 1.5px), #000 calc(50% - 1.5px);
    width: .5em;
    height: .5em;
    margin-left: -.25em;
    margin-top: -.25em;
    z-index: -1;
    box-shadow: inset -1px -1px 0 0 var(--color-inset);
    -webkit-mask: linear-gradient(to bottom right, var(--tip-mask));
    mask: linear-gradient(to bottom right, var(--tip-mask))
}

.TheBrandPanelTip[style*="top:0"] {
    box-shadow: inset 1px 1px 0 0 var(--color-inset);
    -webkit-mask: linear-gradient(to top left, var(--tip-mask));
    mask: linear-gradient(to top left, var(--tip-mask))
}

.TheBrandContentEditable {
    white-space: pre-line !important;
    word-break: break-word !important;
    display: inline-block !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important
}

.TheBrandContentEditable[data-wrap-content=nowrap] {
    white-space: nowrap !important;
    word-break: normal !important
}

.TheBrandContentEditable {
    background: transparent !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    min-width: auto !important;
    box-shadow: none !important
}

.TheBrandColorPreview {
    --color: transparent;
    color: var(--color);
    position: relative;
    pointer-events: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h4v4H0zm4 4h4v4H4z' fill='%23E5E5E5'/%3E%3C/svg%3E")
}

.TheBrandColorPreview span {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color);
    border-radius: inherit
}

.TheBrandSlider {
    position: relative;
    --track-offset-x: 0.5em;
    --track-offset-y: 0.5em;
    --track-size: 1.5em;
    --knob-size: 1em;
    --knob-margin-top: 0em;
    --knob-margin-right: 0em;
    --knob-margin-bottom: 0em;
    --knob-margin-left: 0em;
    display: flex;
    align-items: center;
    touch-action: none
}

.TheBrandSlider[data-direction=y] {
    flex-direction: column
}

.TheBrandSlider .TheBrandSliderControl {
    position: relative;
    flex: 1
}

.TheBrandSlider>button {
    position: relative;
    z-index: 1;
    width: var(--track-size);
    height: var(--track-size);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: none
}

.TheBrandSlider>button svg {
    width: 1.25em;
    height: 1.25em;
    margin: .125em;
    stroke-width: .125em;
    stroke: var(--color-foreground-50)
}

.TheBrandSlider>button:first-of-type {
    order: 2;
    padding-right: .125em;
    margin-left: -.325em
}

.TheBrandSlider>button:last-of-type {
    order: 1;
    padding-left: .125em;
    margin-right: -.325em
}

.TheBrandSlider>.TheBrandSliderControl {
    order: 2
}

.TheBrandSlider .TheBrandSliderKnob {
    left: 0;
    top: 50%;
    border-radius: 9999em;
    visibility: visible;
    width: var(--knob-size);
    height: var(--knob-size);
    margin-left: calc(var(--knob-size) * -.5);
    margin-top: calc(var(--knob-size) * -.5)
}

.TheBrandSlider .TheBrandSliderKnob,
.TheBrandSlider .TheBrandSliderKnobController,
.TheBrandSlider .TheBrandSliderTrack {
    pointer-events: none;
    position: absolute
}

.TheBrandSlider .TheBrandSliderTrack {
    top: var(--track-offset-y);
    bottom: var(--track-offset-y);
    left: var(--track-offset-x);
    right: var(--track-offset-x)
}

.TheBrandSlider .TheBrandSliderKnobController {
    visibility: hidden;
    top: calc(var(--track-offset-y) + var(--knob-margin-top));
    bottom: calc(var(--track-offset-y) + var(--knob-margin-bottom));
    left: calc(var(--track-offset-x) + var(--knob-margin-left));
    right: calc(var(--track-offset-x) + var(--knob-margin-right))
}

.TheBrandSlider .TheBrandSliderTrack {
    border-radius: 9999em
}

.TheBrandSlider[data-direction=x] input[type=range] {
    height: var(--track-size);
    margin-left: var(--track-offset-x);
    width: calc(100% - (var(--track-offset-x) * 2))
}

.TheBrandSlider[data-direction=y] input[type=range] {
    width: var(--track-size);
    margin-top: var(--track-offset-y);
    height: calc(100% - (var(--track-offset-y) * 2))
}

.TheBrandSlider input[type=range] {
    -webkit-appearance: none;
    display: block
}

.TheBrandSlider input[type=range]::-webkit-slider-runnable-track {
    background: transparent
}

.TheBrandSlider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    line-height: 0;
    margin: 0;
    padding: 0;
    border: none
}

.TheBrandSlider input[type=range]::-moz-range-thumb {
    line-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    visibility: hidden
}

.TheBrandSlider input[type=range]::-ms-thumb {
    line-height: 0;
    margin: 0;
    padding: 0;
    border: none
}

.TheBrandSlider input[type=range]::-ms-ticks-before,
.TheBrandSlider input[type=range]::-ms-tooltip {
    display: none
}

.TheBrandSlider input[type=range]::-ms-ticks-after {
    display: none
}

.TheBrandSlider input[type=range]::-ms-track {
    color: transparent;
    border: none;
    background: transparent
}

.TheBrandSlider input[type=range]::-ms-fill-lower,
.TheBrandSlider input[type=range]::-ms-fill-upper {
    background: transparent
}

.TheBrandSlider input[type=range]:focus {
    outline: transparent
}

.TheBrandSlider input[type=range][data-focus-visible]~.TheBrandSliderKnobController .TheBrandSliderKnob:after {
    position: absolute;
    left: -.3125em;
    right: -.3125em;
    top: -.3125em;
    bottom: -.3125em;
    border-radius: inherit;
    content: "";
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100);
    pointer-events: none
}

.TheBrandShapeManipulator {
    position: absolute;
    left: 0;
    top: 0;
    outline: none;
    touch-action: none;
    transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) rotate(var(--r)) scale(var(--sx), var(--sy));
    --size: 0.75em
}

.TheBrandShapeManipulator:not([data-control=edge]) {
    margin-left: calc(var(--size) * (-.5));
    margin-top: calc(var(--size) * (-.5));
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    border-radius: 9999em
}

.TheBrandShapeManipulator:not([data-control=edge]):after {
    position: absolute;
    left: -.5em;
    right: -.5em;
    top: -.5em;
    bottom: -.5em;
    content: ""
}

.TheBrandShapeManipulator:not([data-control=edge])[data-focus-visible]:after {
    border-radius: inherit;
    background-color: var(--color-focus-50);
    box-shadow: inset 0 0 0 1px var(--color-focus-100)
}

.TheBrandShapeManipulator[data-control=point] {
    background: linear-gradient(90deg, var(--color-secondary-dark), var(--color-secondary));
    box-shadow: 0 0 0 2px #fff, 0 0 4px #000;
    z-index: 3
}

.TheBrandShapeManipulator[data-control=edge] {
    margin-top: calc(var(--size) * (-.5));
    height: var(--size);
    width: 1px;
    z-index: 1;
    transform-origin: 0 calc(var(--size) * .5)
}

.TheBrandShapeManipulator[data-control=edge][data-focus-visible] {
    background-color: var(--color-focus-50)
}

.TheBrandShapeManipulator[data-control=rotate] {
    border-radius: 9999em;
    background: linear-gradient(90deg, #fff, #ddd);
    box-shadow: 0 0 0 2px var(--color-secondary-dark), 0 0 4px #000;
    z-index: 2;
    cursor: -webkit-grab;
    cursor: grab
}

.TheBrandRoot[data-env*=chrome-] .TheBrandShapeManipulator[data-control=edge] {
    width: calc(var(--sx) * 1px);
    transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) rotate(var(--r))
}

}

/* Brand Pages Integration */
#brand-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    align-items: center;
}

.brand-page-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #f0f0f0; /* Fallback */
    background-color: var(--color-background-90, #f0f0f0);
    color: #000; /* Fallback */
    color: var(--color-foreground-90, #000);
    border: 1px solid #ccc;
    border: 1px solid var(--color-foreground-20, #ccc);
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
    user-select: none;
}

.brand-page-item:hover {
    background-color: #e0e0e0;
    background-color: var(--color-foreground-10, #e0e0e0);
}

.brand-page-item.active {
    background-color: #007bff; /* Fallback */
    background-color: var(--color-primary, #007bff);
    color: #fff;
    color: var(--color-primary-text, #fff);
    border-color: #0056b3;
    border-color: var(--color-primary-dark, #0056b3);
}


/* Multi-Page Container */
#pages-scroll-container {
    
    scroll-behavior: smooth;
    
}

 

/* Active Page Highlight */
.page-container.active-page {
     z-index: 10;
}

.page-container > .canvas-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Page Number Indicator */
.page-number-indicator {
    position: absolute;
    top: -30px;
    left: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}