/* Brand changes apply to website previews only. */
:root{--accent:#3b6bff;--accent-dim:#5b83ff;--accent-soft:rgba(59,107,255,.22);--panel-active:#3b6bff;--panel-active-hi:#3b6bff}
:focus-visible{outline-color:#3b6bff!important}
.logo [fill="#6A45F1"],.logo [fill="#005cc8"],.logo-mark [fill="#FF4B1F"]{fill:#3b6bff}
.brandCode{color:#3b6bff!important}.card{--pick-color:var(--insert-color,#3b6bff)!important}.preview-fav.active{color:#3b6bff}
body.is-narrow .brand{cursor:default}
body.is-narrow .rail-actions{display:flex;position:relative;flex-direction:column;align-items:center;gap:1px;height:92px;min-height:92px;flex:none;padding:2px 0;border-top:1px solid var(--border);background:var(--bg)}
body.is-narrow .rail-actions button:disabled{opacity:1;cursor:default;color:var(--text-dim)}
body.is-narrow .rail-actions button svg{width:15px;height:15px;flex:none}
body.is-narrow .rail-actions button:first-child svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body.is-narrow .rail-actions button:nth-child(2) svg{fill:currentColor}
body.is-narrow .shade:hover{height:var(--rail-cell);min-height:var(--rail-cell)}
.themeCheck{font-size:0!important}.themeCheck:after,.aeSelectOption.selected:before{content:''!important;width:9px;height:9px;background:currentColor;mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="black" stroke-width="3" fill="none" d="m4 12 5 5L20 6"/></svg>') center/contain no-repeat}
.aeSelectOption.selected:before{width:12px;height:12px}
/* Match the real logo footprint across previews, including differently scaled hero frames. */
:root{--preview-logo-size:30px}
.logo,.logo-mark{width:var(--preview-logo-size)!important;height:var(--preview-logo-size)!important;min-width:var(--preview-logo-size)!important;min-height:var(--preview-logo-size)!important;flex-shrink:0}
html[data-preview-context="hero"]{--preview-logo-size:41.37931px}
html[data-preview-context="hero"]:has(.wordmark){--preview-logo-size:27.27273px}
body.is-narrow .logo{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}
.wordmark,.brand-name,.headText h1{font-size:calc(var(--preview-logo-size)/2)!important;line-height:1.1;font-weight:700!important}
.brand:has(.logo),header:has(>.logo){gap:calc(var(--preview-logo-size)/4)}
.logo-mark{margin-right:calc(var(--preview-logo-size)/4)}
#colorSwatch{background:var(--insert-color,#3b6bff)!important}
#search,#search:focus,#search:focus-visible{outline:none!important;box-shadow:none!important;caret-color:#3b6bff}
.shade:focus,.shade:focus-visible{outline:none!important;box-shadow:none!important}
html[data-input-mode="keyboard"] .shade:focus-visible{outline:2px solid #dedee0!important;outline-offset:-3px!important}
*::selection{background:#3b6bff!important;color:#000!important}
