.identity-panel{container-type:inline-size;overflow:hidden}.identity-preview{display:flex;align-items:center;justify-content:space-between;gap:6px;flex:1;min-height:0;width:100%}.identity-preview strong{font-size:clamp(20px,9.4cqw,36px);flex:1;min-width:0;overflow-wrap:anywhere;font-weight:800;line-height:.98;letter-spacing:-.045em;z-index:1}.identity-preview svg{width:min(40cqw,90px);height:auto;max-height:none;aspect-ratio:1.1;flex-shrink:0;color:#065dfd}.identity-panel.printing .identity-preview svg{color:#ed622a}.identity-panel.logoUse .identity-preview svg{color:#065dfd}.identity-meta{font-size:12px;line-height:1.3;color:#565b60;max-height:32px;overflow:hidden}.identity-panel-dialog>section{display:grid;gap:12px}.identity-panel-dialog{display:grid;gap:20px}.identity-dimensions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.identity-dimensions input{width:100%;min-width:0}.identity-panel-dialog .brand-field textarea{min-height:96px}@container(max-width:190px){.identity-preview strong{font-size:22px}.identity-preview svg{width:40cqw}}@media(max-width:600px){.identity-dimensions{gap:8px}.identity-dimensions .brand-field>span{font-size:12px}}

/* The logo idea uses the same trait stack and fitted typography as Character. */
.identity-panel.logoDirection .brand-panel-content{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.logo-directions-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;flex-shrink:0;font-size:11px}
.logo-directions-meta .material-symbols-outlined{font-size:16px}
.identity-panel.logoUse .identity-preview svg{aspect-ratio:1;width:min(38cqw,105px)}
.logo-assembly-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html body dialog.brand-dialog .logo-assembly-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;aspect-ratio:1;padding:12px 4px;border-radius:14px;--assembly-paper:#fff}
html body dialog.brand-dialog .logo-assembly-choice svg{width:90%;height:auto;aspect-ratio:5/3;flex-shrink:0}
html body dialog.brand-dialog .logo-assembly-choice>span{font-size:12px;line-height:1.2;text-align:center;white-space:normal}
html body dialog.brand-dialog .logo-assembly-choice[aria-pressed=true]{--assembly-paper:#202124}
@media(hover:hover) and (pointer:fine){html body dialog.brand-dialog .logo-assembly-choice:hover{--assembly-paper:#065dfd}}
@media(max-width:480px){.logo-assembly-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:320px;width:100%;margin-inline:auto}}