.feature-demo-gradients .feature-demo-panel .panel-input{width:100%;padding:8px 10px;border-radius:var(--panel-radius-sm);border:1px solid var(--panel-border);background:var(--panel-surface);color:var(--panel-text);font-size:13px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.feature-demo-gradients .feature-demo-panel .panel-input-muted{background:var(--panel-surface-muted);color:var(--panel-muted)}.feature-demo-gradients .feature-demo-panel .panel-input:focus{outline:none;border-color:var(--panel-accent);box-shadow:var(--panel-focus-ring)}.feature-demo-gradients .feature-demo-panel .panel-input:not(:disabled):not(.border-red-500):hover{border-color:var(--panel-border-strong);background-color:var(--panel-surface-muted)}.feature-demo-gradients .feature-demo-panel .panel-tile{background:var(--panel-surface-muted);border:1px solid var(--panel-border);border-radius:var(--panel-radius-md);padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:background .18s ease,border-color .18s ease,transform .18s ease}.feature-demo-gradients .feature-demo-panel .panel-tile :where(span,p,div).panel-text-muted{max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease}.feature-demo-gradients .feature-demo-panel .panel-tile:hover{background:var(--panel-surface-muted-hover)}.feature-demo-gradients .feature-demo-panel .panel-tile:hover .panel-text-muted{color:var(--panel-text)}.feature-demo-gradients .feature-demo-panel .panel-tile.active{border-color:var(--panel-accent);background:var(--panel-accent-soft);transform:translateY(-1px)}.feature-demo-gradients .feature-demo-panel .panel-tile.active .panel-text-muted{color:var(--panel-text)}.feature-demo-gradients .feature-demo-panel .background-detail-panel{min-width:0}.feature-demo-gradients .feature-demo-panel .background-type-grid--compact{gap:16px}.feature-demo-gradients .feature-demo-panel .background-type-grid--compact .panel-tile{gap:8px;padding:12px}.feature-demo-gradients .feature-demo-panel .background-type-grid--compact .panel-tile svg{width:24px;height:24px}.feature-demo-gradients .feature-demo-panel .background-type-grid--compact .panel-tile span{font-size:12px;font-weight:600}.feature-demo-gradients .feature-demo-panel .background-preview-card{min-width:0;display:flex;flex-direction:column;gap:12px}.feature-demo-gradients .feature-demo-panel .background-detail-preview{position:relative;min-width:0}.feature-demo-gradients .feature-demo-panel .background-detail-preview--current{min-height:160px;background:var(
        --stylergpt-main-page-surface,var(
            --main-surface-background,var(--bg-primary,var(--main-surface-primary,var(--panel-bg)))
        )
    )}.feature-demo-gradients .feature-demo-panel .background-detail-preview--option{min-height:160px}.feature-demo-gradients .feature-demo-panel .background-detail-action--overlay{position:absolute;left:50%;top:calc(50% + 52px);z-index:3;width:auto;min-width:168px;max-width:min(100% - 32px,260px);transform:translate(-50%,-50%)}.feature-demo-gradients .feature-demo-panel .background-opacity-control{min-width:0;margin-bottom:0}.feature-demo-gradients .feature-demo-panel .background-preview-composer{--background-preview-composer-border:var(
        --background-preview-composer-light-border,var(--panel-accent-strong)
    );--background-preview-composer-icon-color:var(
        --background-preview-composer-light-icon,var(--panel-text)
    );--background-preview-composer-prompt-color:var(
        --background-preview-composer-light-prompt,var(--panel-muted)
    );position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;gap:8px;width:min(86%,320px);height:30px;padding:4px 5px;transform:translate(-50%,-50%);pointer-events:none;color:var(--panel-text);background:color-mix(in srgb,var(--panel-surface) 90%,transparent);border:1px solid var(--background-preview-composer-border);border-radius:9999px;box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 0 0 1px color-mix(in srgb,#fff 20%,transparent);backdrop-filter:blur(8px)}.feature-demo-gradients .feature-demo-panel .demo-panel-root.dark .background-preview-composer,.feature-demo-gradients .feature-demo-panel .demo-panel-tokens.dark .background-preview-composer{--background-preview-composer-border:var(
        --background-preview-composer-dark-border,var(--panel-accent)
    );--background-preview-composer-icon-color:var(
        --background-preview-composer-dark-icon,var(--panel-text)
    );--background-preview-composer-prompt-color:var(
        --background-preview-composer-dark-prompt,var(--panel-muted)
    );background:color-mix(in srgb,var(--panel-surface) 92%,transparent);box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 0 0 1px hsla(0,0%,100%,.08)}.feature-demo-gradients .feature-demo-panel .background-preview-composer__icon,.feature-demo-gradients .feature-demo-panel .background-preview-composer__send{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto;border-radius:9999px}.feature-demo-gradients .feature-demo-panel .background-preview-composer__icon{color:var(--background-preview-composer-icon-color);background:transparent}.feature-demo-gradients .feature-demo-panel .background-preview-composer__icon--plus:after,.feature-demo-gradients .feature-demo-panel .background-preview-composer__icon--plus:before{content:"";position:absolute;width:8px;height:1.5px;border-radius:9999px;background:currentColor}.feature-demo-gradients .feature-demo-panel .background-preview-composer__icon--plus:after{transform:rotate(90deg)}.feature-demo-gradients .feature-demo-panel .background-preview-composer__prompt{flex:1 1 auto;min-width:0;margin-left:3px;color:var(--background-preview-composer-prompt-color);font-size:11px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-demo-gradients .feature-demo-panel .background-preview-composer__send{color:var(--panel-surface);background:var(--panel-text)}.feature-demo-gradients .feature-demo-panel .background-preview-composer__send svg{width:52%;height:52%}.feature-demo-gradients .feature-demo-panel .background-gradient-preview{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:100%;aspect-ratio:169/76;isolation:isolate}.feature-demo-gradients .feature-demo-panel .background-gradient-preview--with-direction:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.18));pointer-events:none}.feature-demo-gradients .feature-demo-panel .background-gradient-preview--with-direction:after{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(90deg,transparent calc(33.333% - .5px),hsla(0,0%,100%,.42) calc(33.333% - .5px),hsla(0,0%,100%,.42) calc(33.333% + .5px),transparent calc(33.333% + .5px)),linear-gradient(90deg,transparent calc(66.667% - .5px),hsla(0,0%,100%,.42) calc(66.667% - .5px),hsla(0,0%,100%,.42) calc(66.667% + .5px),transparent calc(66.667% + .5px)),linear-gradient(180deg,transparent calc(33.333% - .5px),hsla(0,0%,100%,.42) calc(33.333% - .5px),hsla(0,0%,100%,.42) calc(33.333% + .5px),transparent calc(33.333% + .5px)),linear-gradient(180deg,transparent calc(66.667% - .5px),hsla(0,0%,100%,.42) calc(66.667% - .5px),hsla(0,0%,100%,.42) calc(66.667% + .5px),transparent calc(66.667% + .5px));pointer-events:none}.feature-demo-gradients .feature-demo-panel .background-gradient-direction-button{position:relative;z-index:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:0;color:hsla(0,0%,100%,.9);transition:background .18s ease,color .18s ease,box-shadow .18s ease}.feature-demo-gradients .feature-demo-panel .background-gradient-direction-button:hover{background:hsla(0,0%,100%,.14);color:#fff}.feature-demo-gradients .feature-demo-panel .background-gradient-direction-button:focus-visible{outline:none;box-shadow:inset var(--panel-focus-ring)}.feature-demo-gradients .feature-demo-panel .background-gradient-direction-button[data-active=true]{color:#fff;box-shadow:inset 0 0 0 2px hsla(0,0%,100%,.9),inset 0 0 0 5px rgba(0,0,0,.22)}.feature-demo-gradients .feature-demo-panel .background-gradient-preview .background-gradient-direction-button:first-child{border-top-left-radius:inherit}.feature-demo-gradients .feature-demo-panel .background-gradient-preview .background-gradient-direction-button:nth-child(3){border-top-right-radius:inherit}.feature-demo-gradients .feature-demo-panel .background-gradient-preview .background-gradient-direction-button:nth-child(7){border-bottom-left-radius:inherit}.feature-demo-gradients .feature-demo-panel .background-gradient-preview .background-gradient-direction-button:nth-child(9){border-bottom-right-radius:inherit}.feature-demo-gradients .feature-demo-panel .background-detail-preview.panel-color-swatch,.feature-demo-gradients .feature-demo-panel .background-detail-preview.panel-image-frame.cursor-pointer{transition:border-color .18s ease,box-shadow .18s ease}.feature-demo-gradients .feature-demo-panel .background-detail-preview.panel-color-swatch:hover,.feature-demo-gradients .feature-demo-panel .background-detail-preview.panel-image-frame.cursor-pointer:not(.panel-hover-scale):hover{transform:none}.feature-demo-gradients .feature-demo-panel .support-ticket-field .panel-input::-moz-placeholder{color:#9ca3af;opacity:1}.feature-demo-gradients .feature-demo-panel .support-ticket-field .panel-input::placeholder{color:#9ca3af;opacity:1}.feature-demo-gradients .feature-demo-panel .demo-panel-root.stylergpt-theme-root--modal-panel .support-ticket-field .panel-input{height:32px;min-height:32px;padding:6px 10px}.feature-demo-gradients .feature-demo-panel .panel-range::-webkit-slider-thumb{-webkit-transition:transform .18s ease;transition:transform .18s ease}.feature-demo-gradients .feature-demo-panel .panel-range::-moz-range-thumb{-moz-transition:transform .18s ease;transition:transform .18s ease}.feature-demo-gradients .feature-demo-panel .panel-range:hover::-moz-range-thumb,.feature-demo-gradients .feature-demo-panel .panel-range:hover::-webkit-slider-thumb{transform:scale(1.08)}.feature-demo-gradients .feature-demo-panel .panel-range:hover::-moz-range-track,.feature-demo-gradients .feature-demo-panel .panel-range:hover::-webkit-slider-runnable-track{background:var(--panel-border-strong)}.feature-demo-gradients .feature-demo-panel .react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.feature-demo-gradients .feature-demo-panel .react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.feature-demo-gradients .feature-demo-panel .react-colorful__alpha-gradient,.feature-demo-gradients .feature-demo-panel .react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.feature-demo-gradients .feature-demo-panel .react-colorful__alpha-gradient,.feature-demo-gradients .feature-demo-panel .react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.feature-demo-gradients .feature-demo-panel .react-colorful__alpha,.feature-demo-gradients .feature-demo-panel .react-colorful__hue{position:relative;height:24px}.feature-demo-gradients .feature-demo-panel .react-colorful__hue{background:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.feature-demo-gradients .feature-demo-panel .react-colorful__last-control{border-radius:0 0 8px 8px}.feature-demo-gradients .feature-demo-panel .react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.feature-demo-gradients .feature-demo-panel .react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.feature-demo-gradients .feature-demo-panel .react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.feature-demo-gradients .feature-demo-panel .react-colorful__alpha,.feature-demo-gradients .feature-demo-panel .react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.feature-demo-gradients .feature-demo-panel .react-colorful__saturation-pointer{z-index:3}.feature-demo-gradients .feature-demo-panel .react-colorful__hue-pointer{z-index:2}.feature-demo-gradients .feature-demo-panel .react-colorful{width:100%!important;max-width:100%!important;height:160px!important}.feature-demo-gradients .feature-demo-panel .react-colorful__last-control,.feature-demo-gradients .feature-demo-panel .react-colorful__saturation{cursor:pointer!important}.feature-demo-gradients .feature-demo-panel .react-colorful__saturation{border-radius:8px!important}.feature-demo-gradients .feature-demo-panel .react-colorful__last-control{margin-top:12px!important;border-radius:8px!important}.feature-demo-gradients .feature-demo-panel .react-colorful__pointer{width:20px!important;height:20px!important}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace--header .background-detail-panel{margin-top:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace__inspector>div:has(>.stylergpt-section-editor){flex:1;display:flex;min-height:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace .background-type-selector .line-clamp-1,.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace .stylergpt-section-editor .line-clamp-1{display:block;overflow:visible;white-space:normal;-webkit-line-clamp:unset;overflow-wrap:anywhere}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-modal-surface{width:100%;padding:0;border:0;box-shadow:none;background:transparent}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .react-colorful{width:100%;height:160px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor [class*="grid-cols-[minmax(96px"]{grid-template-columns:minmax(68px,1fr) repeat(3,minmax(30px,34px)) 28px;gap:6px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-input{min-width:0;padding-inline:3px}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-editor .panel-color-swatch{min-height:32px;flex:none}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor>div,.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor>div>div{max-width:100%}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-detail-preview{min-height:180px}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace__inspector .background-detail-preview{min-height:130px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace:has(.stylergpt-section-editor) [data-testid=background-color-select],.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace:has(.stylergpt-section-editor) [data-testid=background-gradient-select]{display:none}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .stylergpt-gradient-endpoint{margin:0;padding:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace .background-type-selector{gap:6px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace .background-type-selector>.panel-tile{min-height:54px;aspect-ratio:auto}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace .background-opacity-control{align-self:stretch;width:100%}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace__main>.background-detail-panel{margin-block:0;min-height:100%;flex:1 0 auto}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace__main>.background-detail-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,42%);grid-template-rows:minmax(180px,1fr);gap:16px}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-preview-card{grid-column:1/-1;min-height:0;display:flex}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-detail-preview{flex:1;height:100%}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace .background-detail-action{grid-column:2;grid-row:2;align-self:end;min-width:0;white-space:normal}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace:has(.stylergpt-section-editor) .background-opacity-control{grid-column:1/-1}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace .background-preview-composer__prompt{white-space:normal;overflow-wrap:anywhere;overflow:visible}@container (max-width: 480px){.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace__main>.background-detail-panel{min-height:240px;height:280px}}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-editor-section:has(.stylergpt-section-editor) .stylergpt-section-workspace__main>.panel-divider,.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-editor-section:has(.stylergpt-section-editor) .stylergpt-section-workspace__main>.panel-divider+.flex{display:none}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-editor-section:has(.stylergpt-section-editor) .grid.grid-cols-4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;gap:12px;padding-block:6px}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-editor-section:has(.stylergpt-section-editor) .panel-color-option{width:min(var(--palette-tile-size,66px),100%);height:auto;aspect-ratio:1}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-editor-section:has(.stylergpt-section-editor) .panel-color-option .panel-color-option-swatch,.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-editor-section:has(.stylergpt-section-editor) .panel-color-option .panel-pipette-placeholder{width:80%;height:auto;aspect-ratio:1}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-modal-surface>.line-clamp-1{display:flex;align-items:center}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-modal-surface svg{flex-shrink:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .mt-4{margin-top:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .mb-4,.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .mb-6{margin-bottom:10px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .gap-3{gap:8px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace--header>.stylergpt-section-workspace__main>.background-detail-panel{flex:1;min-height:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace .background-type-selector{grid-template-columns:repeat(4,minmax(0,1fr));padding:3px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace .background-type-selector>.panel-tile{padding:6px 2px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-workspace__inspector:has(.stylergpt-section-editor){padding-inline-end:0;scrollbar-gutter:auto}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor,.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-modal-surface:not([hidden]),.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor>div{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-modal-surface>.flex.flex-col{flex:1;justify-content:space-between;gap:16px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-modal-surface>.panel-text-strong{margin-bottom:18px;flex-shrink:0}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .panel-modal-surface>.flex.flex-col>.flex:has(>.panel-button){margin-top:auto}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .react-colorful{height:180px!important;width:calc(100% - 12px)!important;margin-inline-end:12px}.feature-demo-gradients .feature-demo-panel .stylergpt-section-editor .grid>.rounded-full{width:28px;height:28px}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=background] .stylergpt-section-workspace--catalog .background-opacity-control{grid-column:1/-1}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-editor-section:has(.stylergpt-section-editor) .grid.grid-cols-4{--palette-tile-size:clamp(40px,calc((100cqh - 110px) / 4),66px);width:100%}.feature-demo-gradients .feature-demo-panel .stylergpt-modal-panel-stage:is([data-section=appearance],[data-section=chats],[data-section=background]) .stylergpt-section-editor .react-colorful{height:clamp(120px,calc(100cqh - 200px),180px)!important}