.feature-demo-panel .demo-panel-tokens{--panel-font:"Space Grotesk","Segoe UI","Helvetica Neue",Arial,sans-serif;--panel-bg:#f2f0f9;--panel-surface:#fff;--panel-modal-surface:var(--panel-surface);--panel-surface-muted:#f8fbfe;--panel-surface-muted-hover:#e7f2fd;--panel-button-secondary-hover:#e7f2fd;--panel-border:rgba(0,0,0,.1);--panel-border-strong:rgba(0,0,0,.18);--panel-toggle-off-bg:rgba(0,0,0,.12);--panel-text:#2e2339;--panel-muted:#525252;--panel-accent:#0bb8da;--panel-accent-strong:#0a9bb8;--panel-accent-soft:rgba(11,184,218,.12);--panel-accent-soft-strong:rgba(11,184,218,.22);--panel-accent-icon:#0bb8da;--panel-success:#1fad4e;--panel-success-soft:rgba(31,173,78,.18);--panel-danger:#e72323;--panel-danger-soft:rgba(231,35,35,.15);--panel-warning:#e0a906;--panel-shadow-sm:0 6px 18px rgba(51,26,77,.12);--panel-shadow-md:0 14px 28px rgba(46,23,69,.18);--panel-radius-lg:16px;--panel-radius-md:12px;--panel-radius-sm:10px;--panel-ghost-hover:rgba(46,35,57,.06);--panel-focus-ring:0 0 0 2px rgba(11,184,218,.32);--color-option-frame-overlay-start:hsla(0,0%,100%,.82);--color-option-frame-overlay-end:hsla(0,0%,100%,.55);--pipette-frame-overlay-start:hsla(0,0%,100%,.85);--pipette-frame-overlay-end:hsla(0,0%,100%,.55);--panel-pipette-placeholder:#7b738c}.feature-demo-panel .demo-panel-tokens.dark{--panel-bg:#170e20;--panel-surface:#24182f;--panel-modal-surface:var(--panel-surface);--panel-surface-muted:#2e213b;--panel-surface-muted-hover:#33273f;--panel-button-secondary-hover:#33273f;--panel-border:#423451;--panel-border-strong:#524162;--panel-toggle-off-bg:#524162;--panel-text:#f9fafb;--panel-accent:#1fd5f9;--panel-accent-strong:#06c8ef;--panel-accent-soft:rgba(31,213,249,.12);--panel-accent-soft-strong:rgba(31,213,249,.22);--panel-accent-icon:#1fd5f9;--panel-success:#26d962;--panel-success-soft:rgba(38,217,98,.18);--panel-danger:#ef4343;--panel-danger-soft:rgba(239,67,67,.18);--panel-warning:#f9c31f;--panel-shadow-sm:0 6px 18px rgba(26,13,38,.45);--panel-shadow-md:0 14px 28px rgba(20,10,31,.6);--panel-ghost-hover:rgba(249,250,251,.06);--panel-focus-ring:0 0 0 2px rgba(31,213,249,.35);--color-option-frame-overlay-start:hsla(0,0%,100%,.16);--color-option-frame-overlay-end:hsla(0,0%,100%,.06);--pipette-frame-overlay-start:rgba(0,0,0,.18);--pipette-frame-overlay-end:rgba(0,0,0,.45);--panel-muted:#b3bbc7}.feature-demo-panel .stylergpt-inpage-panel-modal-shell{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:32px;pointer-events:auto}.feature-demo-panel .stylergpt-inpage-panel-modal-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.42);backdrop-filter:blur(5px)}.feature-demo-panel .stylergpt-inpage-panel-modal-frame{position:relative;z-index:1;width:1000px;max-width:100%;height:552px;overflow:hidden;border:1px solid var(--panel-border);border-top:3px solid var(--panel-accent);border-radius:18px;background:var(--panel-bg);background-clip:padding-box;box-shadow:0 28px 80px rgba(0,0,0,.32);opacity:0;transform:scale(.98);transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}.feature-demo-panel .stylergpt-inpage-panel-modal-shell[data-open="1"] .stylergpt-inpage-panel-modal-frame{opacity:1;transform:translateZ(0) scale(1)}.feature-demo-panel .stylergpt-inpage-panel-modal-shell[data-open="0"] .stylergpt-inpage-panel-modal-frame{transition-duration:.14s}@media (prefers-reduced-motion:reduce){.feature-demo-panel .stylergpt-inpage-panel-modal-shell .stylergpt-inpage-panel-modal-frame{transition:none}}.feature-demo-panel .stylergpt-inpage-panel-modal-scroll{height:100%;overflow-x:hidden!important;overflow-y:auto!important;padding:22px;background:var(--panel-bg);box-sizing:border-box}.feature-demo-panel .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header{position:sticky;top:-22px;z-index:30;margin:-22px -22px 0;padding:16px 22px 14px;border-bottom:1px solid var(--panel-border);background:color-mix(in srgb,var(--panel-bg) 92%,transparent);backdrop-filter:blur(12px)}.feature-demo-panel .stylergpt-theme-root--modal-panel>.panel-card{margin:22px 0 0;min-height:0}.feature-demo-panel .stylergpt-modal-panel-layout{display:grid;grid-template-columns:206px minmax(0,1fr);gap:18px;height:auto;min-height:0;flex:1 1 0;align-items:stretch;margin:26px 0 0}.feature-demo-panel .stylergpt-modal-panel-sidebar{position:static;align-self:stretch;display:flex;flex-direction:column;min-width:0;min-height:0}.feature-demo-panel .stylergpt-modal-panel-sidebar-heading{display:flex;align-items:center;min-width:0;min-height:40px}.feature-demo-panel .stylergpt-modal-panel-sidebar-title{width:100%;min-width:0;margin:0;color:var(--panel-text);font-size:17px;font-weight:600;line-height:1.2;text-align:center}.feature-demo-panel .stylergpt-modal-panel-nav{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0;padding:12px 9px;border:1px solid var(--panel-border);border-radius:14px;background:var(--panel-surface);box-shadow:var(--panel-shadow-sm)}.feature-demo-panel .stylergpt-modal-panel-nav-button{display:flex;align-items:center;gap:8px;width:100%;min-width:0;flex:1 1 0;min-height:0;padding:9px;border-radius:10px;color:var(--panel-muted);font-size:13px;font-weight:600;text-align:left;transition:background .16s ease,color .16s ease,box-shadow .16s ease}.feature-demo-panel .stylergpt-modal-panel-nav-button:not(.stylergpt-modal-panel-nav-button--active):hover{background:var(--panel-surface-muted);color:var(--panel-text)}.feature-demo-panel .stylergpt-modal-panel-nav-button--active,.feature-demo-panel .stylergpt-modal-panel-nav-button--active:hover{background:var(--stylergpt-modal-active-background);color:var(--panel-text);box-shadow:inset 0 0 0 1px var(--panel-accent)}.feature-demo-panel .stylergpt-modal-panel-content{min-width:0;min-height:0;display:flex;flex-direction:column;gap:0;height:100%;padding-bottom:0;box-shadow:var(--panel-shadow-sm);overflow:hidden;background:var(--panel-surface);border-radius:16px;border:1px solid var(--panel-border)}.feature-demo-panel .stylergpt-modal-panel-heading{display:flex;align-items:center;justify-content:center;min-width:0;flex:0 0 auto;min-height:40px;padding:0;margin:20px 20px 0}.feature-demo-panel .stylergpt-modal-panel-stage{min-width:0;flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px;border:0;border-radius:0;background:transparent;box-shadow:none}.feature-demo-panel .stylergpt-modal-panel-stage::-webkit-scrollbar{width:10px;background-color:transparent}.feature-demo-panel .stylergpt-modal-panel-stage::-webkit-scrollbar-thumb{border:3px solid var(--panel-surface);border-radius:9999px;background:var(--panel-border-strong)}.feature-demo-panel .stylergpt-modal-panel-stage .panel-card{box-shadow:none}.feature-demo-panel .stylergpt-modal-panel-stage .panel-button{min-height:34px;padding:7px 10px;font-size:12px}.feature-demo-panel .stylergpt-modal-panel-stage .panel-segment{padding:3px}.feature-demo-panel .stylergpt-modal-panel-stage .panel-segment-button{min-height:30px;padding:5px 9px;font-size:11px}.feature-demo-panel .stylergpt-modal-panel-stage .panel-card-muted{border-radius:12px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=advanced] .advanced-settings-reset{align-self:center;width:min(100%,170px);min-height:38px;flex:0 0 auto}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .appearance-mode-segment,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .typography-size-segment{display:flex;justify-self:center;align-self:center;padding:3px;gap:4px;border:1px solid var(--panel-border);border-radius:9999px;background:var(--panel-surface-muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--panel-border) 70%,transparent)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .appearance-mode-segment{width:min(100%,420px);margin:0 auto}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .typography-size-segment{width:min(100%,360px);margin:0 auto}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .appearance-mode-segment .panel-segment-button,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .typography-size-segment .panel-segment-button{flex:1 1 0;min-width:0;min-height:34px;padding:6px 10px;border:0;border-radius:9999px;background:transparent;color:var(--panel-muted);font-size:12px;font-weight:600;letter-spacing:0;box-shadow:none;transition:background .18s ease,color .18s ease,box-shadow .18s ease}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .appearance-mode-segment .panel-segment-button:not(.active):hover,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .typography-size-segment .panel-segment-button:not(.active):hover{background:var(--panel-surface);color:var(--panel-text);box-shadow:inset 0 0 0 1px var(--panel-border)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .appearance-mode-segment .panel-segment-button.active,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .typography-size-segment .panel-segment-button.active{background:var(--panel-accent-soft);color:var(--panel-text);box-shadow:inset 0 0 0 1px var(--panel-accent)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance]{display:flex;flex-direction:column;justify-content:space-between;gap:18px;overflow-y:auto}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance]>div:first-child{margin-bottom:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .grid.grid-cols-4{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 10px;justify-items:center;align-items:center}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-color-option{width:62px;height:62px;border-radius:16px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-color-option-swatch{width:46px;height:46px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-color-option [class*="absolute top-1 right-1"]{width:16px;height:16px;border-width:1px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-color-option [class*="absolute top-1 right-1"] svg{width:10px;height:10px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-color-option .w-14.h-14{width:46px;height:46px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-color-option .w-14.h-14 svg{width:16px;height:16px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-divider{margin-top:0;display:none}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .panel-divider+.flex{margin-top:0;padding:12px 14px;border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-surface-muted)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font]>.flex.flex-col.gap-4{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font]>.flex.flex-col.gap-4>.flex.flex-col.gap-4{display:grid;grid-template-columns:minmax(0,1fr) 138px;grid-template-rows:minmax(0,1fr) auto;gap:16px;align-items:stretch;min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .panel-card-muted{padding:12px;display:flex;align-items:center;justify-content:center;grid-column:1/3;min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .panel-card-muted+.panel-segment{align-self:end;min-width:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .panel-button.w-full{align-self:end;width:138px;min-height:38px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme]>.themes-section{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:18px;align-items:stretch;height:100%;min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-preview-wrap{min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-preview-frame{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;aspect-ratio:auto!important}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-preview-image{width:100%;height:100%;min-width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-actions{gap:8px;width:min(100%,348px);justify-self:center}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-actions .panel-button{flex:1 1 0;min-width:0;min-height:38px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] form{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,1fr);gap:18px;align-items:stretch;height:100%;min-height:340px;overflow:hidden}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-controls-panel,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-preview-panel{min-width:0;min-height:0;height:100%}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-controls-panel{display:grid;grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:16px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-panel{min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-preview{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:12px;height:100%;min-width:0;min-height:0;padding:14px;border:1px solid var(--panel-border);border-radius:16px;background:radial-gradient(circle at 24% 18%,color-mix(in srgb,var(--panel-accent) 16%,transparent),transparent 34%),color-mix(in srgb,var(--panel-surface-muted) 62%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent),var(--panel-shadow-sm)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .panel-image-frame{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:112px;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-mark{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:100%;max-height:100%;min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-mark>div,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-mark>svg{width:62px;height:62px;filter:drop-shadow(0 12px 22px color-mix(in srgb,#000 16%,transparent))}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-mark>img{width:auto;height:auto;max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 12px 22px color-mix(in srgb,#000 16%,transparent))}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-actions,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-actions{position:relative;gap:8px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-logo-actions .panel-button,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-actions .panel-button{display:inline-flex;flex:1 1 0;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:38px;white-space:nowrap}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-preview-panel{display:grid;grid-template-rows:auto minmax(0,1fr);gap:9px;align-items:stretch}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-preview-label{display:flex!important;align-items:center;justify-content:center;min-height:22px;color:var(--panel-text);font-size:13px;font-weight:750;line-height:1;text-align:center;text-transform:uppercase}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview{display:grid!important;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden;border:1px solid var(--panel-border);border-radius:16px;background:color-mix(in srgb,var(--panel-surface) 82%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent),var(--panel-shadow-sm)}.feature-demo-panel .dark .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview,.feature-demo-panel .demo-panel-root.dark .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent),var(--panel-shadow-sm)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--panel-border);background:color-mix(in srgb,var(--panel-surface-muted) 64%,transparent)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__identity{display:flex;align-items:center;min-width:0;gap:8px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__mark{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--panel-border);border-radius:10px;background:var(--panel-surface);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 36%,transparent)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__mark>div,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__mark>img,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__mark>svg{width:20px;height:20px;max-width:20px;max-height:20px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__name{min-width:0;overflow:hidden;color:var(--panel-text);font-size:14px;font-weight:650;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__dot{flex:0 0 auto;width:8px;height:8px;border-radius:9999px;background:var(--panel-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--panel-accent) 15%,transparent)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__body{display:grid;align-content:center;gap:10px;min-height:0;padding:14px 18px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bubble{display:grid;gap:7px;width:82%;padding:10px 13px;border:1px solid var(--panel-border);border-radius:16px;background:var(--panel-surface-muted)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bubble--user{justify-self:end;width:68%;border-radius:16px 16px 6px 16px;background:color-mix(in srgb,var(--panel-accent-soft) 76%,var(--panel-surface))}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bubble--assistant{justify-self:start;border-radius:16px 16px 16px 6px;background:color-mix(in srgb,var(--panel-surface) 72%,var(--panel-surface-muted))}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bubble span{display:block;height:6px;border-radius:9999px;background:currentColor;opacity:.24}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bubble span:first-child{width:100%;opacity:.34}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bubble span:nth-child(2){width:72%}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-modal-preview__bubble span:nth-child(3){width:46%}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-card{display:grid;grid-template-rows:auto auto;gap:12px;min-width:0;padding:14px;border:1px solid var(--panel-border);border-radius:16px;background:color-mix(in srgb,var(--panel-surface-muted) 62%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent)}.feature-demo-panel .dark .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-card,.feature-demo-panel .demo-panel-root.dark .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-card{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-card .panel-input{min-height:38px;padding-right:48px;font-size:12px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-meta{display:flex!important;position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;justify-content:flex-end;color:var(--panel-muted);font-size:10.5px;font-weight:600;line-height:1}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=brandmask] .brand-mask-name-card .panel-button:disabled{background:color-mix(in srgb,var(--panel-surface-muted) 72%,transparent)}.feature-demo-panel .stylergpt-modal-panel-stack{display:flex;flex-direction:column;gap:14px}.feature-demo-panel .advanced-settings-language .panel-select{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-demo-panel .demo-panel-tokens[data-layout=modal] .stylergpt-inpage-panel-modal-frame{max-width:calc((100vw - 64px) / 1.2);max-height:calc((100vh - 64px) / 1.2)}.feature-demo-panel .panel-card{background:var(--panel-surface);border:1px solid var(--panel-border);border-radius:var(--panel-radius-lg);box-shadow:var(--panel-shadow-sm)}.feature-demo-panel .panel-card-header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--panel-border)}.feature-demo-panel .panel-card-header.cursor-pointer{transition:background .18s ease,border-color .18s ease}.feature-demo-panel .panel-card-header.cursor-pointer:hover{background:var(--panel-surface-muted);border-color:var(--panel-border-strong)}.feature-demo-panel .panel-card-body{padding:14px}.feature-demo-panel .panel-card-muted{background:var(--panel-surface-muted);border:1px solid var(--panel-border);border-radius:var(--panel-radius-md)}.feature-demo-panel .panel-card-active.panel-card-muted:hover,.feature-demo-panel .panel-card-active:hover{border-color:var(--panel-accent)}.feature-demo-panel .panel-card.cursor-pointer:hover{background:var(--panel-surface-muted);border-color:var(--panel-border-strong)}.feature-demo-panel .panel-card-muted.cursor-pointer:hover{background:var(--panel-surface-muted-hover)}.feature-demo-panel .panel-divider{height:1px;width:100%;background:var(--panel-border)}.feature-demo-panel .panel-title{font-size:.875rem;font-weight:600;color:var(--panel-text)}.feature-demo-panel :where(h1,h2,h3,h4,p,span).panel-title{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis}.feature-demo-panel .panel-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600;background:var(--panel-accent-soft);color:var(--panel-accent-strong);border:1px solid var(--panel-border)}.feature-demo-panel .panel-chip-success{background:var(--panel-success-soft);color:var(--panel-success)}.feature-demo-panel .panel-chip-strong{color:#fff;border-color:rgba(0,0,0,.2);box-shadow:0 2px 8px rgba(0,0,0,.18)}.feature-demo-panel .panel-chip-strong-success{background:var(--panel-success)}.feature-demo-panel .panel-chip-strong-danger{background:var(--panel-danger)}.feature-demo-panel .panel-chip-compact{font-size:10px;padding:1px 6px;border-width:1px}.feature-demo-panel .themes-section .themes-preview-frame .panel-chip-strong-success{font-size:9px}.feature-demo-panel .dark .panel-chip-strong,.feature-demo-panel .demo-panel-root.dark .panel-chip-strong{border-color:hsla(0,0%,100%,.2);box-shadow:0 2px 10px rgba(0,0,0,.45)}.feature-demo-panel .panel-chip-danger{background:var(--panel-danger-soft);color:var(--panel-danger)}.feature-demo-panel .panel-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:8px 12px;border-radius:var(--panel-radius-sm);font-size:13px;font-weight:500;border:1px solid transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.feature-demo-panel .panel-button:has(.animate-spin){white-space:nowrap}.feature-demo-panel .panel-button:has(.animate-spin)>svg{flex:0 0 auto}.feature-demo-panel .panel-button:has(.animate-spin) .panel-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-demo-panel .panel-button:focus-visible{outline:none;box-shadow:var(--panel-focus-ring)}.feature-demo-panel .panel-button-primary{background:var(--panel-accent);color:#fff;border-color:var(--panel-accent)}.feature-demo-panel .panel-button-primary:hover{background:var(--panel-accent-strong);border-color:var(--panel-accent-strong)}.feature-demo-panel .panel-button-secondary{background:var(--panel-surface-muted);color:var(--panel-text);border-color:var(--panel-border)}.feature-demo-panel .panel-button-secondary:hover{background:var(--panel-button-secondary-hover,var(--panel-surface-muted-hover))}.feature-demo-panel .panel-modal-surface .panel-button-secondary:hover{background:var(--panel-surface-muted-hover)}.feature-demo-panel .panel-button-ghost{background:transparent;color:var(--panel-muted);border-color:transparent}.feature-demo-panel .panel-button-ghost:hover{background:var(--panel-ghost-hover);color:var(--panel-text)}.feature-demo-panel .panel-icon-button{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--panel-muted);background:transparent;border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease}.feature-demo-panel .panel-icon-button:hover{background:var(--panel-ghost-hover);color:var(--panel-text);border-color:var(--panel-border)}.feature-demo-panel .panel-icon-button-header{width:30px;height:30px;border-radius:9999px;background:var(--panel-surface-muted);border-color:var(--panel-border);color:var(--panel-muted);box-shadow:0 6px 14px rgba(15,23,42,.08);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}.feature-demo-panel .panel-icon-button.panel-icon-button-header:hover{background:var(--panel-surface);color:var(--panel-text);border-color:var(--panel-accent);transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.12)}.feature-demo-panel .dark .panel-icon-button-header,.feature-demo-panel .demo-panel-root.dark .panel-icon-button-header{box-shadow:0 6px 14px rgba(0,0,0,.35)}.feature-demo-panel .dark .panel-icon-button.panel-icon-button-header:hover,.feature-demo-panel .demo-panel-root.dark .panel-icon-button.panel-icon-button-header:hover{box-shadow:0 10px 20px hsla(0,0%,100%,.12)}.feature-demo-panel .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-row{display:flex;align-items:center;justify-content:space-between;min-width:0;gap:18px}.feature-demo-panel .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-actions{display:inline-flex;align-items:center;flex:0 0 auto;gap:8px}.feature-demo-panel .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-action{background:transparent;border-color:transparent;box-shadow:none}.feature-demo-panel .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-action.panel-icon-button-header:hover{background:var(--panel-surface-muted);border-color:var(--panel-border-strong);box-shadow:none}.feature-demo-panel .dark .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-action.panel-icon-button-header,.feature-demo-panel .dark .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-action.panel-icon-button-header:hover,.feature-demo-panel .demo-panel-root.dark.stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-action.panel-icon-button-header,.feature-demo-panel .demo-panel-root.dark.stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-action.panel-icon-button-header:hover{box-shadow:none}.feature-demo-panel .panel-header-action.panel-icon-button-header:hover{background:var(--panel-surface-muted);border-color:var(--panel-border-strong);transform:translateY(-1px);box-shadow:none}.feature-demo-panel .dark .panel-header-action.panel-icon-button-header:hover,.feature-demo-panel .demo-panel-root.dark .panel-header-action.panel-icon-button-header:hover{box-shadow:none}.feature-demo-panel .panel-select,.feature-demo-panel .panel-textarea{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-panel .panel-select:focus,.feature-demo-panel .panel-textarea:focus{outline:none;border-color:var(--panel-accent);box-shadow:var(--panel-focus-ring)}.feature-demo-panel .panel-select:not(:disabled):not(.border-red-500):hover,.feature-demo-panel .panel-textarea:not(:disabled):not(.border-red-500):hover{border-color:var(--panel-border-strong);background-color:var(--panel-surface-muted)}.feature-demo-panel .panel-textarea::-webkit-scrollbar{width:10px;height:10px;background-color:var(--panel-bg)}.feature-demo-panel .panel-textarea::-webkit-scrollbar-thumb{border:3px solid var(--panel-bg);border-radius:12px;background:var(--panel-accent)}.feature-demo-panel .panel-textarea::-webkit-scrollbar-thumb:hover{background:var(--panel-accent-strong)}@supports not selector(::-webkit-scrollbar){.feature-demo-panel .panel-textarea{scrollbar-width:thin;scrollbar-color:var(--panel-accent) var(--panel-bg)}}.feature-demo-panel .panel-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23808a9b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:16px;padding-right:30px}.feature-demo-panel .dark .panel-select,.feature-demo-panel .demo-panel-root.dark .panel-select{color-scheme:dark}.feature-demo-panel .dark .panel-select option,.feature-demo-panel .demo-panel-root.dark .panel-select option{background-color:var(--panel-modal-surface);color:var(--panel-text)}.feature-demo-panel .panel-segment{display:flex;background:var(--panel-surface-muted);border:1px solid var(--panel-border);border-radius:9999px;padding:4px;gap:4px}.feature-demo-panel .panel-segment-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;white-space:nowrap;flex:1;border-radius:9999px;font-size:12px;font-weight:600;padding:6px 10px;color:var(--panel-muted);overflow:hidden;text-overflow:ellipsis;transition:background .18s ease,color .18s ease}.feature-demo-panel .panel-segment-button.active{background:var(--panel-accent-soft);color:var(--panel-text);box-shadow:inset 0 0 0 1px var(--panel-accent)}.feature-demo-panel .panel-segment-button:not(.active):hover{background:var(--panel-surface);color:var(--panel-text);box-shadow:inset 0 0 0 1px var(--panel-border)}.feature-demo-panel .demo-panel-root .themes-filter-segment .panel-segment-button{min-width:calc(6ch + 20px)}.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-panel .panel-tile.active .panel-text-muted,.feature-demo-panel .panel-tile:hover .panel-text-muted{color:var(--panel-text)}.feature-demo-panel .panel-image-frame{border-radius:var(--panel-radius-md);border:1px solid var(--panel-border);background:var(--panel-surface-muted);overflow:hidden}.feature-demo-panel .panel-image-frame>img{border-radius:inherit}.feature-demo-panel .brand-mask-logo-preview .panel-image-frame .brand-mask-logo-mark{display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:100%;max-height:100%}.feature-demo-panel .brand-mask-logo-preview .panel-image-frame .brand-mask-logo-mark>img{width:auto;height:auto;max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.feature-demo-panel .brand-mask-logo-preview .panel-image-frame .brand-mask-logo-mark>div,.feature-demo-panel .brand-mask-logo-preview .panel-image-frame .brand-mask-logo-mark>svg{max-width:100%;max-height:100%}.feature-demo-panel .panel-image-frame.cursor-pointer{transition:border-color .18s ease,transform .18s ease}.feature-demo-panel .panel-image-frame.cursor-pointer:hover{border-color:var(--panel-border-strong)}.feature-demo-panel .panel-image-frame.cursor-pointer:not(.panel-hover-scale):hover{transform:translateY(-1px)}.feature-demo-panel .fonts-panel-search-field{position:relative;display:flex;align-items:center;width:100%;min-height:38px;margin-bottom:12px;padding:0 36px 0 10px;border-radius:var(--panel-radius-sm);border:1px solid var(--panel-border);background:var(--panel-surface);color:var(--panel-muted);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.feature-demo-panel .fonts-panel-search-field:hover{border-color:var(--panel-border-strong);background:var(--panel-surface-muted)}.feature-demo-panel .fonts-panel-search-field:focus-within{border-color:var(--panel-accent);box-shadow:var(--panel-focus-ring);background:var(--panel-surface)}.feature-demo-panel .fonts-panel-search-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--panel-text);font-size:13px;line-height:1.4}.feature-demo-panel .fonts-panel-search-field input::-moz-placeholder{color:var(--panel-muted)}.feature-demo-panel .fonts-panel-search-field input::placeholder{color:var(--panel-muted)}.feature-demo-panel .fonts-panel-search-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.feature-demo-panel .fonts-panel-search-status{position:absolute;top:50%;right:9px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%)}.feature-demo-panel .fonts-panel-search-clear,.feature-demo-panel .fonts-panel-search-spinner{display:none}.feature-demo-panel .fonts-panel-search-field--searching .fonts-panel-search-spinner{display:block;color:var(--panel-accent);animation:spin 1s linear infinite}.feature-demo-panel .fonts-panel-search-field--has-value:not(.fonts-panel-search-field--searching) .fonts-panel-search-clear{display:inline-flex}.feature-demo-panel .fonts-panel-search-clear{align-items:center;justify-content:center;width:22px;height:22px;border-radius:9999px;color:var(--panel-muted);background:transparent;border:0;transition:background .18s ease,color .18s ease}.feature-demo-panel .fonts-panel-search-clear:hover{background:var(--panel-ghost-hover);color:var(--panel-text)}.feature-demo-panel .stylergpt-theme-root--modal-panel .themes-panel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-demo-panel .panel-color-option{outline:1px solid transparent;outline-offset:0;--color-option-overlay-start:var(--color-option-overlay-start-base);--color-option-overlay-end:var(--color-option-overlay-end-base);transition:outline-color .18s ease,outline-offset .18s ease}.feature-demo-panel .panel-color-option:hover{outline-color:transparent;outline-offset:0}.feature-demo-panel .panel-color-option:hover:not([data-selected=true]),.feature-demo-panel .panel-color-option[data-selected=true]{--color-option-overlay-start:var(--color-option-overlay-start-hover);--color-option-overlay-end:var(--color-option-overlay-end-hover)}.feature-demo-panel .panel-color-option .panel-color-option-swatch{transition:transform .18s ease}.feature-demo-panel .panel-color-option:hover:not([data-selected=true]) .panel-color-option-swatch{transform:scale(1.05)}.feature-demo-panel .panel-shadow-soft{box-shadow:var(--panel-shadow-sm)}.feature-demo-panel .panel-color-option[data-sgpt-color=rose]{--sgpt-gray-light-colored-100:#ffe4e6;--sgpt-gray-light-colored-300:#fda4af;--sgpt-gray-light-colored-600:#c43a59;--sgpt-gray-dark-colored-500:#f43f5e;--sgpt-gray-dark-colored-750:#651e2e;--sgpt-gray-dark-colored-900:#39161f}.feature-demo-panel .panel-color-option[data-sgpt-color=pink]{--sgpt-gray-light-colored-100:#fce7f3;--sgpt-gray-light-colored-300:#f9a8d4;--sgpt-gray-light-colored-600:#c0427a;--sgpt-gray-dark-colored-500:#ec4899;--sgpt-gray-dark-colored-750:#61203c;--sgpt-gray-dark-colored-900:#381724}.feature-demo-panel .panel-color-option[data-sgpt-color=fuchsia]{--sgpt-gray-light-colored-100:#fae8ff;--sgpt-gray-light-colored-300:#f0abfc;--sgpt-gray-light-colored-600:#ac40b9;--sgpt-gray-dark-colored-500:#d946ef;--sgpt-gray-dark-colored-750:#5a2260;--sgpt-gray-dark-colored-900:#351738}.feature-demo-panel .panel-color-option[data-sgpt-color=purple]{--sgpt-gray-light-colored-100:#f3e8ff;--sgpt-gray-light-colored-300:#d8b4fe;--sgpt-gray-light-colored-600:#924ecf;--sgpt-gray-dark-colored-500:#a855f7;--sgpt-gray-dark-colored-750:#431e64;--sgpt-gray-dark-colored-900:#281639}.feature-demo-panel .panel-color-option[data-sgpt-color=violet]{--sgpt-gray-light-colored-100:#ede9fe;--sgpt-gray-light-colored-300:#c4b5fd;--sgpt-gray-light-colored-600:#8355d2;--sgpt-gray-dark-colored-500:#8b5cf6;--sgpt-gray-dark-colored-750:#381e64;--sgpt-gray-dark-colored-900:#221639}.feature-demo-panel .panel-color-option[data-sgpt-color=indigo]{--sgpt-gray-light-colored-100:#e0e7ff;--sgpt-gray-light-colored-300:#a5b4fc;--sgpt-gray-light-colored-600:#645ecd;--sgpt-gray-dark-colored-500:#6366f1;--sgpt-gray-dark-colored-750:#252260;--sgpt-gray-dark-colored-900:#1a1936}.feature-demo-panel .panel-color-option[data-sgpt-color=blue]{--sgpt-gray-light-colored-100:#dbeafe;--sgpt-gray-light-colored-300:#93c5fd;--sgpt-gray-light-colored-600:#436ecd;--sgpt-gray-dark-colored-500:#3b82f6;--sgpt-gray-dark-colored-750:#1d3265;--sgpt-gray-dark-colored-900:#162139}.feature-demo-panel .panel-color-option[data-sgpt-color=sky]{--sgpt-gray-light-colored-100:#e0f2fe;--sgpt-gray-light-colored-300:#7dd3fc;--sgpt-gray-light-colored-600:#207ba9;--sgpt-gray-dark-colored-500:#0ea5e9;--sgpt-gray-dark-colored-750:#184e6a;--sgpt-gray-dark-colored-900:#142d3b}.feature-demo-panel .panel-color-option[data-sgpt-color=cyan]{--sgpt-gray-light-colored-100:#cffafe;--sgpt-gray-light-colored-300:#67e8f9;--sgpt-gray-light-colored-600:#228199;--sgpt-gray-dark-colored-500:#06b6d4;--sgpt-gray-dark-colored-750:#1b5867;--sgpt-gray-dark-colored-900:#163239}.feature-demo-panel .panel-color-option[data-sgpt-color=teal]{--sgpt-gray-light-colored-100:#ccfbf1;--sgpt-gray-light-colored-300:#5eead4;--sgpt-gray-light-colored-600:#218077;--sgpt-gray-dark-colored-500:#14b8a6;--sgpt-gray-dark-colored-750:#1e645e;--sgpt-gray-dark-colored-900:#173838}.feature-demo-panel .panel-color-option[data-sgpt-color=emerald]{--sgpt-gray-light-colored-100:#d1fae5;--sgpt-gray-light-colored-300:#6ee7b7;--sgpt-gray-light-colored-600:#1b8061;--sgpt-gray-dark-colored-500:#10b981;--sgpt-gray-dark-colored-750:#1b6750;--sgpt-gray-dark-colored-900:#143b30}.feature-demo-panel .panel-color-option[data-sgpt-color=green]{--sgpt-gray-light-colored-100:#dcfce7;--sgpt-gray-light-colored-300:#86efac;--sgpt-gray-light-colored-600:#2b8e50;--sgpt-gray-dark-colored-500:#22c55e;--sgpt-gray-dark-colored-750:#22603a;--sgpt-gray-dark-colored-900:#173824}.feature-demo-panel .panel-color-option[data-sgpt-color=lime]{--sgpt-gray-light-colored-100:#ecfccb;--sgpt-gray-light-colored-300:#bef264;--sgpt-gray-light-colored-600:#618c24;--sgpt-gray-dark-colored-500:#84cc16;--sgpt-gray-dark-colored-750:#47641e;--sgpt-gray-dark-colored-900:#2a3817}.feature-demo-panel .panel-color-option[data-sgpt-color=yellow]{--sgpt-gray-light-colored-100:#fef9c3;--sgpt-gray-light-colored-300:#fde047;--sgpt-gray-light-colored-600:#ac7f22;--sgpt-gray-dark-colored-500:#eab308;--sgpt-gray-dark-colored-750:#694b19;--sgpt-gray-dark-colored-900:#3b2a14}.feature-demo-panel .panel-color-option[data-sgpt-color=amber]{--sgpt-gray-light-colored-100:#fef3c7;--sgpt-gray-light-colored-300:#fcd34d;--sgpt-gray-light-colored-600:#b97526;--sgpt-gray-dark-colored-500:#f59e0b;--sgpt-gray-dark-colored-750:#68411a;--sgpt-gray-dark-colored-900:#3b2514}.feature-demo-panel .panel-color-option[data-sgpt-color=orange]{--sgpt-gray-light-colored-100:#ffedd5;--sgpt-gray-light-colored-300:#fdba74;--sgpt-gray-light-colored-600:#c9622d;--sgpt-gray-dark-colored-500:#f97316;--sgpt-gray-dark-colored-750:#67331b;--sgpt-gray-dark-colored-900:#3b1f14}.feature-demo-panel .panel-color-option[data-sgpt-color=red]{--sgpt-gray-light-colored-100:#fee2e2;--sgpt-gray-light-colored-300:#fca5a5;--sgpt-gray-light-colored-600:#c14141;--sgpt-gray-dark-colored-500:#ef4444;--sgpt-gray-dark-colored-750:#622020;--sgpt-gray-dark-colored-900:#381717}.feature-demo-panel .panel-color-option[data-sgpt-color=tomato]{--sgpt-gray-light-colored-100:#fbe3de;--sgpt-gray-light-colored-300:#f5b8ab;--sgpt-gray-light-colored-600:#bf4f38;--sgpt-gray-dark-colored-500:#e54d2e;--sgpt-gray-dark-colored-750:#632b1f;--sgpt-gray-dark-colored-900:#381c17}.feature-demo-panel .panel-color-option[data-sgpt-color=brown]{--sgpt-gray-light-colored-100:#f2ebe4;--sgpt-gray-light-colored-300:#deccbc;--sgpt-gray-light-colored-600:#927359;--sgpt-gray-dark-colored-500:#ad7f58;--sgpt-gray-dark-colored-750:#504133;--sgpt-gray-dark-colored-900:#2f2721}.feature-demo-panel .panel-color-option[data-sgpt-color=twilight]{--sgpt-gray-light-colored-100:#eae5f0;--sgpt-gray-light-colored-300:#866aa9;--sgpt-gray-light-colored-600:#5a4a6d;--sgpt-gray-dark-colored-500:#684e87;--sgpt-gray-dark-colored-750:#41354d;--sgpt-gray-dark-colored-900:#27212f}.feature-demo-panel .panel-color-option[data-sgpt-color=slate]{--sgpt-gray-light-colored-100:#f1f5f9;--sgpt-gray-light-colored-300:#cbd5e1;--sgpt-gray-light-colored-600:#4c5664;--sgpt-gray-dark-colored-500:#64748b;--sgpt-gray-dark-colored-750:#38404a;--sgpt-gray-dark-colored-900:#21252f}.feature-demo-panel .panel-color-option[data-sgpt-color=stone]{--sgpt-gray-light-colored-100:#f5f5f4;--sgpt-gray-light-colored-300:#d6d3d1;--sgpt-gray-light-colored-600:#56534f;--sgpt-gray-dark-colored-500:#78716c;--sgpt-gray-dark-colored-750:#43413f;--sgpt-gray-dark-colored-900:#282727}.feature-demo-panel .panel-color-option[data-sgpt-color=zinc]{--sgpt-gray-light-colored-100:#f4f4f5;--sgpt-gray-light-colored-300:#d4d4d8;--sgpt-gray-light-colored-600:#53535a;--sgpt-gray-dark-colored-500:#71717a;--sgpt-gray-dark-colored-750:#3f3f43;--sgpt-gray-dark-colored-900:#272728}.feature-demo-panel .panel-color-option[data-sgpt-color=default]{--sgpt-gray-light-colored-100:#f5f5f5;--sgpt-gray-light-colored-300:#d4d4d4;--sgpt-gray-light-colored-600:#525252;--sgpt-gray-dark-colored-500:#818181;--sgpt-gray-dark-colored-750:#414141;--sgpt-gray-dark-colored-900:#282727}.feature-demo-panel .panel-text-muted{color:var(--panel-muted)}.feature-demo-panel :where(p,div,span,li).panel-text-muted,.feature-demo-panel :where(p,div,span,li).panel-text-strong{line-height:1.625}.feature-demo-panel .panel-text-strong{color:var(--panel-text)}.feature-demo-panel .stylergpt-catalog .themes-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0;margin-bottom:12px;width:100%}.feature-demo-panel .stylergpt-catalog .themes-filter-row>.panel-select{width:100%;min-width:0}.feature-demo-panel .stylergpt-theme-root--modal-panel .demo-panel-content>.stylergpt-modal-panel-stage{border-radius:inherit}.feature-demo-panel .stylergpt-theme-root--modal-panel .stylergpt-modal-panel-header-row{position:relative}.feature-demo-panel .stylergpt-modal-panel-stage .panel-toggle:has(input:focus-visible){outline:2px solid var(--panel-accent);outline-offset:3px}.feature-demo-panel .stylergpt-modal-panel-stage:has(>.stylergpt-section-workspace){overflow:hidden;container-type:inline-size}.feature-demo-panel .stylergpt-section-workspace{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;height:100%;min-height:0;flex:1 1 auto}.feature-demo-panel .stylergpt-section-workspace__inspector,.feature-demo-panel .stylergpt-section-workspace__main{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-x:hidden;padding-inline-end:10px;scrollbar-gutter:stable}.feature-demo-panel .stylergpt-section-workspace--header{grid-template-rows:minmax(0,1fr)}.feature-demo-panel .stylergpt-section-workspace__header{grid-column:1/-1;min-width:0}.feature-demo-panel .stylergpt-section-workspace__inspector{border-inline-start:1px solid var(--panel-border);padding-inline-start:16px;display:flex;flex-direction:column}.feature-demo-panel .stylergpt-section-workspace .stylergpt-embedded-catalog{margin:0;border:0;background:transparent;box-shadow:none;animation:none}.feature-demo-panel .stylergpt-section-workspace .stylergpt-embedded-catalog>.panel-card-header{position:sticky;top:0;z-index:2;padding:0 0 12px;background:var(--panel-surface);flex-wrap:wrap}.feature-demo-panel .stylergpt-section-workspace .stylergpt-embedded-catalog>.panel-card-body{padding:0}.feature-demo-panel .stylergpt-section-workspace .stylergpt-embedded-catalog .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.feature-demo-panel .stylergpt-section-workspace__inspector>.themes-section{min-height:100%;justify-content:space-between;gap:20px}.feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace .themes-preview-frame{height:auto;aspect-ratio:auto!important}.feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace .themes-preview-image{width:100%;height:auto;min-width:0;min-height:0;-o-object-fit:contain;object-fit:contain}.feature-demo-panel .stylergpt-section-workspace .background-type-selector .line-clamp-1{display:block;overflow:visible;white-space:normal;-webkit-line-clamp:unset;overflow-wrap:anywhere}@supports not selector(::-webkit-scrollbar){.feature-demo-panel .stylergpt-section-workspace__inspector,.feature-demo-panel .stylergpt-section-workspace__main{scrollbar-width:thin;scrollbar-color:var(--panel-accent) var(--panel-bg)}}.feature-demo-panel .stylergpt-editor-section--idle{grid-template-columns:minmax(0,1fr)}.feature-demo-panel .stylergpt-editor-section--idle>.stylergpt-section-workspace__inspector{display:none}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace__main>.appearance-mode-segment{margin-bottom:16px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace__main>.panel-divider+.flex{margin-top:16px}.feature-demo-panel .stylergpt-section-workspace .background-type-selector{gap:6px}.feature-demo-panel .stylergpt-section-workspace .background-type-selector>.panel-tile{min-height:54px;aspect-ratio:auto}.feature-demo-panel .stylergpt-section-workspace--catalog{grid-template-columns:minmax(0,1fr) clamp(210px,40%,280px)}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog .grid{grid-template-columns:minmax(0,1fr)}.feature-demo-panel .stylergpt-section-workspace--catalog>.stylergpt-section-workspace__main>:first-child{min-width:0}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-preview-frame>.absolute{position:static;flex-wrap:wrap}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-preview-frame .truncate{white-space:normal;overflow-wrap:anywhere}.feature-demo-panel .stylergpt-section-workspace--catalog>.stylergpt-section-workspace__main{display:flex;flex-direction:column}.feature-demo-panel .stylergpt-section-workspace--catalog>.stylergpt-section-workspace__main>:first-child{margin-block:auto;flex-shrink:0}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-panel-grid>.panel-image-frame{aspect-ratio:auto!important;display:block;overflow:hidden}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-panel-grid>.panel-image-frame>img{width:100%;height:auto;display:block}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-panel-grid>.panel-image-frame>.absolute{position:static;flex-wrap:wrap}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog .line-clamp-1{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal;overflow-wrap:anywhere}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog .panel-hover-scale:hover{transform:none}.feature-demo-panel .stylergpt-section-workspace [role=button]:focus-visible{outline:2px solid var(--panel-accent);outline-offset:-2px}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog>.panel-card-header{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog>.panel-card-header>div{margin-left:0;min-width:0}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog .panel-card-header .panel-select{width:100%!important;min-width:0}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog .panel-title{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal}.feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace .background-opacity-control{align-self:stretch;width:100%}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog>.panel-card-header>.panel-title{display:none}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog>.panel-card-header:not(:has(select)){display:none}.feature-demo-panel .stylergpt-section-workspace--catalog .stylergpt-embedded-catalog>.panel-card-body{padding:3px}.feature-demo-panel .stylergpt-section-workspace--catalog>.stylergpt-section-workspace__main>:first-child{margin-block:0;min-height:100%;flex:1 0 auto}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-section{display:flex;flex-direction:column}.feature-demo-panel .stylergpt-editor-section.stylergpt-section-workspace--catalog>.stylergpt-section-workspace__main>div:empty,.feature-demo-panel .stylergpt-section-workspace--catalog .themes-actions:empty{display:none}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-preview-wrap{flex:1}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .stylergpt-section-workspace__main>.themes-section{flex:1;min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-preview-frame,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-preview-wrap{min-height:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-actions{flex-shrink:0}.feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace--catalog .themes-preview-frame{display:flex;flex-direction:column;flex:1}.feature-demo-panel .stylergpt-modal-panel-stage .stylergpt-section-workspace--catalog .themes-preview-image{flex:1;min-height:0;-o-object-fit:contain;object-fit:contain}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-preview-frame>.absolute{width:100%;flex:none}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace__main{display:flex;flex-direction:column}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .grid.grid-cols-4{margin-block:auto}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .panel-color-option-swatch{width:56px;height:56px}.feature-demo-panel .stylergpt-section-workspace--catalog [data-testid=background-image-tile-upload]{height:72px;aspect-ratio:auto}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace__main>.appearance-mode-segment,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace__main>.panel-divider+.flex{margin-block:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .grid.grid-cols-4{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:14px;padding-block:8px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .panel-color-option{width:70px;height:70px}.feature-demo-panel .stylergpt-section-workspace .background-preview-composer__prompt{white-space:normal;overflow-wrap:anywhere;overflow:visible}@container (max-width: 480px){.feature-demo-panel .stylergpt-section-workspace{grid-template-columns:minmax(0,1fr);overflow-y:auto;overflow-x:hidden;padding-inline-end:10px;scrollbar-gutter:stable}.feature-demo-panel .stylergpt-section-workspace__main{overflow:visible;min-height:240px}.feature-demo-panel .stylergpt-section-workspace__inspector{min-height:280px;max-height:360px;border-inline-start:0;border-top:1px solid var(--panel-border);padding:12px 10px 0 0}.feature-demo-panel .stylergpt-section-workspace--catalog>.stylergpt-section-workspace__main>:first-child{min-height:240px}}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .grid.grid-cols-4{padding-inline:3px}@container (max-width: 480px){.feature-demo-panel .stylergpt-section-workspace,.feature-demo-panel .stylergpt-section-workspace--header{grid-template-rows:max-content minmax(280px,1fr)}.feature-demo-panel .stylergpt-section-workspace__main{height:-moz-max-content;height:max-content}.feature-demo-panel .stylergpt-section-workspace--catalog>.stylergpt-section-workspace__main>:first-child{flex:none;min-height:0}.feature-demo-panel .stylergpt-editor-section--idle{grid-template-rows:max-content}}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-preview-frame{cursor:default}.feature-demo-panel .demo-panel-tokens .theme-chat-preview{display:grid;grid-template-columns:minmax(66px,27%) minmax(0,1fr);flex:1;min-height:0;width:100%;color:var(--theme-preview-text);background:var(--theme-preview-bg);font-size:10px;line-height:1.5;text-align:start;overflow:hidden}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__sidebar{display:flex;flex-direction:column;gap:14px;min-width:0;padding:14px 9px;background:var(--theme-preview-sidebar);border-inline-end:1px solid var(--theme-preview-border)}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__account,.feature-demo-panel .demo-panel-tokens .theme-chat-preview__brand,.feature-demo-panel .demo-panel-tokens .theme-chat-preview__header,.feature-demo-panel .demo-panel-tokens .theme-chat-preview__header>span,.feature-demo-panel .demo-panel-tokens .theme-chat-preview__nav{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}.feature-demo-panel .demo-panel-tokens .theme-chat-preview svg{flex:none}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__brand,.feature-demo-panel .demo-panel-tokens .theme-chat-preview__header{justify-content:space-between;font-weight:400}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__account,.feature-demo-panel .demo-panel-tokens .theme-chat-preview__nav{font-size:8px}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__history{display:flex;flex-direction:column;gap:16px;margin-top:14px}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__history-line{height:5px;width:85%;border-radius:3px;background:var(--theme-preview-muted);opacity:.3}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__history-line:nth-child(2){width:65%}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__account{margin-top:auto}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__account>span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--theme-preview-input);color:var(--theme-preview-input-text);flex-shrink:0}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__page{display:flex;flex-direction:column;min-width:0;min-height:0}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__header{justify-content:flex-end;padding:9px 12px;border-bottom:1px solid var(--theme-preview-border);background:var(--theme-preview-bg)}.feature-demo-panel .demo-panel-tokens .theme-chat-preview{font-weight:400}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__assistant strong{font-weight:600}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__conversation{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:14px 10px 10px;flex:1;min-height:0;overflow:hidden}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__backdrop{position:absolute;inset:0;z-index:-1;background-image:var(--theme-preview-backdrop);background-size:cover;background-position:50%;opacity:var(--theme-preview-opacity)}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__messages{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden;overflow-wrap:anywhere}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__user{align-self:flex-end;max-width:88%;margin:0;padding:8px 10px;border-radius:12px;background:var(--theme-preview-input);color:var(--theme-preview-input-text)}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__assistant{padding:7px;border-radius:10px;background:var(--theme-preview-response);color:var(--theme-preview-response-text)}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__assistant p{margin:6px 0}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__assistant ul{margin:0;padding-inline-start:14px;list-style:disc}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__share{padding:4px 8px;border:1px solid var(--theme-preview-border);border-radius:8px}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__composer{display:flex;align-items:center;gap:8px;margin-top:auto;padding:9px;border:1px solid var(--theme-preview-border);border-radius:13px;background:var(--theme-preview-bg);flex-shrink:0}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__prompt{flex:1;min-width:0;white-space:nowrap;font-size:9px}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__send{flex-shrink:0;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;color:var(--theme-preview-bg);background:var(--theme-preview-text)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace__main{gap:12px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .grid.grid-cols-4{display:flex;flex-wrap:wrap;justify-content:center}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .panel-color-option{flex:0 0 70px}.feature-demo-panel .stylergpt-section-workspace--header>.stylergpt-section-workspace__main{display:flex;flex-direction:column;gap:14px}.feature-demo-panel .stylergpt-section-workspace--header>.stylergpt-section-workspace__main>.stylergpt-section-workspace__header{flex:none;min-height:0}.feature-demo-panel .stylergpt-section-workspace .background-type-selector{grid-template-columns:repeat(4,minmax(0,1fr));padding:3px}.feature-demo-panel .stylergpt-section-workspace .background-type-selector>.panel-tile{padding:6px 2px}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .stylergpt-section-workspace__main{overflow-y:hidden}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .stylergpt-section-workspace__main>:first-child{min-height:0;flex:1}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .font-scope-control,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=font] .typography-size-segment{flex-shrink:0}.feature-demo-panel .stylergpt-section-workspace .stylergpt-embedded-catalog>.panel-card-header{border-bottom:0}.feature-demo-panel .stylergpt-section-workspace--catalog .themes-actions{justify-content:center;align-self:center}.feature-demo-panel .demo-panel-tokens .stylergpt-catalog>.panel-card-header{border-bottom:0}.feature-demo-panel .demo-panel-tokens .stylergpt-catalog>.panel-card-body{border-top:0}.feature-demo-panel .demo-panel-tokens .font-scope-control .panel-segment{margin:0;min-width:0;flex:1;max-width:290px}.feature-demo-panel .demo-panel-tokens .font-scope-control .panel-segment-button{padding-inline:8px;white-space:normal;font-size:11px}.feature-demo-panel .demo-panel-tokens .font-scope-control .panel-segment-button:disabled{opacity:.45;cursor:default}.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select),.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select):active,.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select):focus{background-color:var(--panel-surface);color:var(--panel-text);border-color:var(--panel-border);outline:none;box-shadow:none}.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select) option{background-color:var(--panel-surface);color:var(--panel-text)}@supports ((-webkit-appearance:base-select) or (-moz-appearance:base-select) or (appearance:base-select)){.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select),.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select)::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select)::picker-icon{display:none}.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select)::picker(select){background:var(--panel-surface);color:var(--panel-text);border:1px solid var(--panel-border);border-radius:10px;padding:4px;box-shadow:var(--panel-shadow);max-height:280px;overflow-x:hidden;scrollbar-color:var(--panel-accent) var(--panel-bg);scrollbar-width:thin}.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select) option{padding:7px 10px;border-radius:6px;white-space:normal}.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select) option:active,.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select) option:checked,.feature-demo-panel .demo-panel-tokens .panel-select:not(.panel-modal-surface .panel-select) option:focus{background:var(--panel-surface);color:var(--panel-text);outline:none;box-shadow:none}}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace__main{container-type:size}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .grid.grid-cols-4{--palette-tile-size:clamp(44px,calc((100cqh - 184px) / 3),70px);width:min(100%,calc(8 * var(--palette-tile-size) + 104px));align-self:center;flex-shrink:0}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .panel-color-option{flex-basis:var(--palette-tile-size);width:var(--palette-tile-size);height:var(--palette-tile-size)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .panel-color-option-swatch,.feature-demo-panel .stylergpt-modal-panel-stage[data-section=appearance] .stylergpt-section-workspace .panel-pipette-placeholder{width:80%;height:80%}.feature-demo-panel .demo-panel-root.stylergpt-theme-root--modal-panel .stylergpt-modal-panel-layout{height:414px;margin-top:32px}.feature-demo-panel .demo-panel-root.stylergpt-theme-root--modal-panel .stylergpt-modal-panel-nav{gap:4px}.feature-demo-panel .demo-panel-root.stylergpt-theme-root--modal-panel .stylergpt-modal-panel-nav-button{padding-top:7px;padding-bottom:7px}.feature-demo-panel .demo-panel-root .stylergpt-product-tour-menu-divider{flex:0 0 1px;margin:4px 9px;background:var(--panel-border)}@font-face{font-family:Demo OpenAI Sans;src:url(/fonts/feature-demos/openai-sans-regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Demo OpenAI Sans;src:url(/fonts/feature-demos/openai-sans-medium.woff2) format("woff2");font-weight:500;font-display:swap}.feature-demo-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:transparent;clip-path:inset(0 round 8px);isolation:isolate;box-shadow:0 30px 90px -40px #0007;text-align:left}.demo-camera{position:absolute;inset:0 auto auto 0;width:1440px;height:810px;transform-origin:top left}.feature-demo-stage{width:1440px;height:810px;position:relative}.demo-visuals{height:100%;font-family:Arial,Helvetica,sans-serif;line-height:1.5;font-size:14px;color:#171717;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;isolation:isolate}.demo-visuals *,.demo-visuals :after,.demo-visuals :before{box-sizing:border-box}.demo-visuals svg{flex-shrink:0}.demo-browser{height:88px;background:#dfe3eb;color:#444746;font:13px/1.4 Arial,sans-serif}.demo-browser-tabs{height:40px;display:flex;gap:18px;align-items:center;padding:6px 12px 0;background:#dfe3eb}.demo-browser-tab{display:flex;align-items:center;gap:10px;width:240px;height:34px;padding:0 12px;border-radius:12px 12px 0 0;background:#f4f6fa}.demo-browser-tab span{flex:1}.demo-window-controls{display:flex;gap:30px;margin-left:auto;padding:0 12px}.demo-browser-toolbar{height:48px;display:flex;gap:20px;align-items:center;padding:0 16px;background:#f4f6fa;border-bottom:1px solid #d5d7da}.demo-browser-address{height:34px;display:flex;align-items:center;flex:1;gap:10px;border-radius:999px;background:#e9edf4;padding:0 12px}.demo-browser-address span{flex:1}.demo-pinned-icon{width:30px;height:32px;display:grid;place-items:center}.demo-browser-avatar{border-radius:50%;background:#bbc9e8;color:#24304a;display:grid;place-items:center;width:27px;height:27px;font-size:10px}.demo-chrome-extensions{width:20px;height:20px;background:currentColor;-webkit-mask:url(/images/feature-demos/chrome-extensions.svg) center/contain no-repeat;mask:url(/images/feature-demos/chrome-extensions.svg) center/contain no-repeat}[data-mode=dark] .demo-browser,[data-mode=dark] .demo-browser-tabs{background:#202124;color:#c4c7c5}[data-mode=dark] .demo-browser-tab,[data-mode=dark] .demo-browser-toolbar{background:#303134;color:#e3e3e3;border-color:#45464a}[data-mode=dark] .demo-browser-address{background:#202124}[data-mode=dark] .demo-browser-tab img{filter:invert(1)}.demo-chatgpt{--host-bg:#fff;--host-sidebar:#f9f9f9;--host-text:#0d0d0d;--host-muted:#6e6e80;--host-border:#e5e5e5;--host-composer:#fff;--host-active:#ececec;--host-heading:#0d0d0d;--host-header:#fff;display:flex;height:722px;background:var(--host-bg);color:var(--host-text);font-family:Demo OpenAI Sans,Arial,Helvetica,sans-serif}.demo-chatgpt[data-mode=dark]{--host-bg:#212121;--host-sidebar:#171717;--host-text:#ececec;--host-muted:#afafaf;--host-border:#424242;--host-composer:#303030;--host-active:#303030;--host-heading:#ececec;--host-header:#212121}.demo-host-sidebar{--demo-sidebar-section-gap:20px;--demo-sidebar-heading-inset:10px;width:260px;flex:0 0 260px;display:flex;flex-direction:column;padding:0 8px 8px;background:var(--host-sidebar);font-size:14px}.demo-host-brand{height:64px;display:flex;align-items:center;gap:13px;padding:0 8px;font-size:16px}.demo-host-brand>span{flex:1}[data-mode=dark] .demo-host-brand img{filter:invert(1)}.demo-host-nav>div{display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 10px;border-radius:10px}.demo-host-nav>div>span{flex:1}.demo-history-heading{display:flex;align-items:center;gap:5px;margin:var(--demo-sidebar-section-gap) var(--demo-sidebar-heading-inset) 7px;font-size:14px;line-height:20px;font-weight:500;color:var(--host-muted)}.demo-host-history>div{padding:8px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-bulk-actions{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:6px 10px;margin:var(--demo-sidebar-section-gap) 2px 0;border-radius:10px;font-size:14px;font-weight:500;background:color-mix(in srgb,var(--host-sidebar) 96%,var(--host-text) 4%)}[data-mode=dark] .demo-bulk-actions{background:color-mix(in srgb,var(--host-sidebar) 90%,var(--host-text) 10%)}.demo-bulk-toggle{width:36px;height:20px;border-radius:20px;position:relative;background:color-mix(in srgb,var(--host-sidebar) 82%,var(--host-text) 18%)}.demo-bulk-toggle:before{content:"";position:absolute;left:2px;bottom:2px;width:16px;height:16px;border-radius:50%;background:#fff}.demo-chatgpt .demo-host-sidebar>.stylergpt-chat-folders-block[data-stylergpt-section-expanded]{margin-top:var(--demo-sidebar-section-gap);margin-bottom:0}.demo-chatgpt .demo-host-sidebar .stylergpt-chat-folders-header{min-height:20px;padding:0 var(--demo-sidebar-heading-inset)}.demo-chatgpt .demo-host-sidebar>.stylergpt-history-toolbar{margin-top:var(--demo-sidebar-section-gap);margin-bottom:0;position:relative;top:auto}.demo-host-profile{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 8px}.demo-host-profile>span{width:32px;height:32px;border-radius:50%;background:#7a5270;color:#fff;display:grid;place-items:center;font:12px Arial,sans-serif}.demo-host-profile>div{flex:1}.demo-host-profile small{display:block;color:var(--host-muted);font-size:11px}.demo-host-page{position:relative;isolation:isolate;flex:1;min-width:0;display:flex;flex-direction:column}.demo-host-header{height:64px;padding:0 24px;display:flex;align-items:center;justify-content:center;background:var(--host-header)}.demo-host-header>svg{position:absolute;right:24px}.demo-host-switch{display:flex;border:1px solid var(--host-border);border-radius:999px;padding:3px;font-size:14px}.demo-host-switch>span{width:112px;height:36px;display:grid;place-items:center;border-radius:inherit}.demo-host-switch>span:first-child{background:var(--host-active)}.demo-host-wallpaper{position:absolute;inset:64px 0 0;z-index:-1;background-image:var(--theme-preview-backdrop,none);background-size:cover;background-position:50%}.demo-new-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 38px 150px}.demo-welcome{width:768px;max-width:100%;text-align:center}.demo-welcome h2{font:inherit;font-size:28px;font-weight:400;line-height:1.25;margin:0;color:var(--host-heading)}.demo-composer{display:flex;gap:16px;align-items:center;height:56px;width:768px;max-width:100%;padding:8px 10px 8px 16px;border:1px solid var(--host-border);border-radius:28px;background:var(--host-composer);box-shadow:0 2px 8px #0000000a}.demo-composer>span:not(.demo-voice){flex:1;font-size:16px}.feature-demo-stage .feature-demo-panel .demo-panel-tokens :is(.theme-chat-preview__prompt,.background-preview-composer__prompt){white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}.feature-demo-stage .feature-demo-panel .demo-panel-tokens .background-preview-composer{height:auto;min-height:30px}.demo-composer-powerup{display:block;flex:0 0 20px;height:20px;background:currentColor;-webkit-mask:var(--demo-icon) center /contain no-repeat;mask:var(--demo-icon) center /contain no-repeat}.demo-prompt-manager{--demo-icon:url(/images/feature-demos/prompt-manager.svg)}.demo-prompt-enhancer{--demo-icon:url(/images/feature-demos/prompt-enhancer.svg)}.demo-model{display:flex;align-items:center;gap:5px;font-size:13px}.demo-voice{display:grid;place-items:center;height:36px;width:36px;background:var(--host-active);border-radius:50%}.demo-chatgpt[data-applied=true] .demo-welcome{width:-moz-fit-content;width:fit-content;padding:12px 24px;border:1px solid var(--host-border);border-radius:16px;background:var(--host-composer)}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-actions{display:flex;justify-content:center;width:100%}.feature-demo-panel .stylergpt-modal-panel-stage[data-section=theme] .themes-actions .panel-button{flex:0 0 auto}.demo-chatgpt[data-applied=true] .demo-welcome h2{font-size:24px;line-height:28.8px}.feature-demo-panel{position:absolute;z-index:1;inset:88px 0 0;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;text-align:start}.feature-demo-panel[data-open=true]{opacity:1;visibility:visible}.feature-demo-panel .demo-panel-tokens{height:100%;font-family:var(--panel-font);color:var(--panel-text);font-size:14px;line-height:1.5}.feature-demo-panel .demo-panel-tokens[data-layout=modal] .stylergpt-inpage-panel-modal-frame{width:1000px;height:552px;max-width:none;max-height:none;flex-shrink:0;zoom:1.2}.feature-demo-panel .demo-panel-root{height:100%;display:flex;flex-direction:column;min-height:0;font-family:var(--panel-font);color:var(--panel-text)}.feature-demo-panel .stylergpt-modal-panel-layout{flex:1}.feature-demo-panel .stylergpt-inpage-panel-modal-scroll{overflow:hidden!important;clip-path:inset(0 round 17px 17px 17px 17px/15px 15px 17px 17px)}.feature-demo-panel .stylergpt-modal-panel-nav-button{line-height:19.5px}.feature-demo-panel .demo-panel-content{min-height:0}.feature-demo-panel .stylergpt-section-workspace__inspector,.feature-demo-panel .stylergpt-section-workspace__main{scrollbar-width:thin;scrollbar-color:var(--panel-border-strong) transparent}.demo-brand{display:flex;align-items:center;gap:8px}.demo-brand>svg{margin-left:0;color:var(--panel-accent)}.feature-demo-panel .demo-appearance{display:flex;flex-direction:column;gap:16px}.demo-palette-tile{position:relative;display:grid;place-items:center;width:70px;height:70px;border-radius:16px;border:1px solid;background:linear-gradient(135deg,#ffffffb0,#ffffff80),linear-gradient(135deg,var(--swatch-light),var(--swatch-dark))}.demo-palette-tile[data-selected=true]{border-width:2px;transform:scale(1.05);box-shadow:0 0 0 2px var(--panel-accent),var(--panel-shadow-sm)}.demo-palette-tile i{display:block;height:80%;width:80%;border-radius:50%;background:linear-gradient(90deg,var(--swatch-light) 50%,var(--swatch-dark) 50%);border:1px solid var(--swatch-border)}.demo-color-check{position:absolute;top:4px;right:4px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--swatch-border);background:var(--swatch-dark)}.demo-palette-tile>svg{position:absolute;bottom:5px;right:5px}.feature-demo-panel .demo-custom-color{border-color:var(--panel-border-strong);background-image:linear-gradient(135deg,var(--pipette-frame-overlay-start),var(--pipette-frame-overlay-end)),conic-gradient(from 120deg,#ff8a8a,#ffd166,#b6f36b,#6ee7b7,#5eead4,#7dd3fc,#a5b4fc,#f0abfc,#ff8a8a)}.demo-custom-color>span{display:grid;place-items:center;width:46px;height:46px;border:1px solid;border-radius:50%;color:var(--panel-pipette-placeholder)}.demo-vibrant{display:flex;align-items:center;justify-content:space-between}.demo-vibrant strong{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}.demo-vibrant p{margin-top:4px;font-size:12px;color:var(--panel-muted)}.demo-toggle{display:block;position:relative;width:36px;height:20px;border-radius:999px;background:var(--panel-accent)}.demo-toggle:after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;background:#fff;border-radius:50%}.feature-demo-panel .panel-select{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background-image:none;font-size:12px}.feature-demo-panel .fonts-panel-search-field{padding-right:10px;gap:8px}.feature-demo-panel .fonts-panel-search-field>span{flex:1;font-size:13px;line-height:1.4}.demo-search-value{color:var(--panel-text)}.feature-demo-panel [data-searching=true]{border-color:var(--panel-accent);box-shadow:var(--panel-focus-ring)}.feature-demo-panel .demo-theme-label{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;background:#00000073;color:#fff;font-size:11px;line-height:16.5px}.feature-demo-panel .demo-catalog-tile{position:relative;aspect-ratio:39/19;overflow:hidden}.feature-demo-panel .demo-catalog-tile>.demo-theme-label{position:absolute;bottom:0;left:0}.demo-catalog-scroll{position:relative}.demo-color-select{position:relative;min-width:0}.demo-color-select>.panel-select{width:100%}.demo-color-menu{position:absolute;top:100%;left:0;width:100%;max-height:228px;overflow-y:auto;z-index:5;border:1px solid #767676;background:#fff;color:#101010;box-shadow:0 2px 6px #0003;font:12px/24px Segoe UI,sans-serif;scrollbar-width:thin}.demo-color-menu>span{display:block;padding:0 8px}.demo-color-menu>span[data-highlighted=true]{background:#1967d2;color:#fff}.demo-panel-tokens.dark .demo-color-menu{background:#292a2d;color:#eee}.feature-demo-panel .demo-catalog-tile[data-selected=true]{box-shadow:0 0 0 2px var(--panel-accent)}.feature-demo-panel .demo-catalog-picture{width:100%;aspect-ratio:39/19;overflow:hidden;position:relative}.feature-demo-panel .demo-catalog-picture>div{width:780px;height:380px;position:absolute;transform:scale(.3);transform-origin:top left}.feature-demo-panel .demo-catalog-picture .theme-chat-preview{height:380px}.feature-demo-panel .demo-panel-tokens .theme-chat-preview{grid-template-columns:minmax(92px,20%) minmax(0,1fr)}.feature-demo-panel .demo-panel-tokens .theme-chat-preview__messages{width:80%;margin-inline:auto}.feature-demo-panel .theme-chat-preview__history{font-size:7px;gap:10px}.feature-demo-panel .theme-chat-preview__history>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-demo-panel .demo-tile-loading{position:absolute;inset:0;display:grid;place-items:center;background:#0003}.demo-tile-loading i{height:22px;width:22px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:demo-spin .75s linear infinite}.demo-pointer{position:absolute;left:0;top:0;z-index:10;transform:translate(var(--pointer-x),var(--pointer-y));opacity:0;transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .18s;filter:drop-shadow(0 2px 2px #0005)}.demo-pointer[data-visible=true]{opacity:1}.demo-pointer:before{content:"";position:absolute;top:-10px;left:-10px;width:28px;height:28px;border:2px solid #1fd5f9;border-radius:50%;opacity:0}.demo-pointer[data-click=true]:before{animation:demo-click .55s ease-out both}[data-reset=true] .demo-visuals{animation:demo-reset 1s ease-in-out both}[data-running=false] .demo-visuals,[data-running=false] .demo-visuals *,[data-running=false] .demo-visuals :before{animation-play-state:paused!important}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;min-height:40px;font-size:13px;color:hsl(var(--fg)/.75)}.demo-controls>div{display:flex;gap:10px;align-items:center}.demo-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:40px;min-height:40px;padding:8px;border-radius:8px}.demo-controls button:hover{background:hsl(var(--fg)/.06);color:hsl(var(--fg))}.demo-controls button:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:2px}.demo-status-dot{width:6px;height:6px;border-radius:50%;background:hsl(var(--accent));flex-shrink:0}.demo-auto-label{border-left:1px solid hsl(var(--fg)/.15);padding-left:10px;opacity:.65}@keyframes demo-spin{to{transform:rotate(1turn)}}@keyframes demo-click{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}@keyframes demo-reset{0%{opacity:1}to{opacity:0}}@media (max-width:639px){.demo-auto-label{display:none}.demo-controls{font-size:12px}}@media (prefers-reduced-motion:reduce){.demo-pointer,.feature-demo-panel,.feature-demo-stage{transition:none}.demo-visuals,.demo-visuals *,.demo-visuals :before{animation:none!important}}