.character-avatar-dialog{position:fixed;inset:0;margin:auto;height:fit-content;transition:display .18s allow-discrete,overlay .18s allow-discrete;width:min(1040px,calc(100vw - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line-hi);border-radius:var(--r-l);background:var(--panel);color:var(--fg);box-shadow:0 28px 100px #0009;overflow:hidden;animation:ca-enter .28s var(--pop)}
.character-avatar-dialog[open]{display:flex;flex-direction:column}.character-avatar-dialog::backdrop{background:#08090cc9;backdrop-filter:blur(16px)}
.ca-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 28px 18px}.ca-kicker{display:block;font-size:10px;font-weight:750;letter-spacing:.14em;color:var(--dim)}.ca-header h2{margin:7px 0 5px;font-size:clamp(24px,3vw,32px);letter-spacing:-.04em;line-height:1.15}.ca-header p{margin:0;color:var(--dim);font-size:13px}.ca-header .action-btn{flex:none;min-width:44px;min-height:44px}
.ca-steps{display:flex;gap:24px;padding:0 28px 18px;border-bottom:1px solid var(--line)}.ca-steps>span{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);white-space:nowrap}.ca-steps strong{font-weight:600}.ca-steps .is-current{color:var(--fg)}.ca-steps .is-current strong{font-weight:750}
.ca-body{padding:22px 28px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-gutter:stable}.ca-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 28px;border-top:1px solid var(--line);font-size:10px;color:var(--dim)}.ca-footer a{color:inherit;text-decoration:none}.ca-footer a:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.ca-search-row{display:flex;gap:12px;margin:8px 0 22px}.ca-search-field{position:relative;flex:1;min-width:0}.ca-search-field input{width:100%;padding-right:44px}.ca-clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:var(--utility-control-radius);background:transparent;color:var(--dim);cursor:pointer}.ca-clear[hidden]{display:none}.ca-search-field input::-webkit-search-cancel-button{display:none}.ca-search-row .qtok{min-height:48px;padding:0 16px;gap:12px;font-size:12px;justify-content:space-between}.ca-clear:focus-visible{outline:2px solid var(--fg)}
.ca-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.ca-section-heading h3{font-size:13px;letter-spacing:-.015em;margin:0}.ca-section-heading>span{font-size:10px;color:var(--dim)}
.ca-title-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));gap:10px}.ca-title{display:flex;align-items:center;gap:14px;min-width:0;border:1px solid var(--line);border-radius:var(--r-m);padding:10px;text-align:left;color:var(--fg);background:var(--elev);cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease)}.ca-title>span:nth-child(2){flex:1;min-width:0}.ca-title strong{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}.ca-title small{display:block;color:var(--dim);font-size:11px;margin-top:5px}.ca-title em{display:block;color:var(--dim);font-style:normal;font-size:10px;margin-top:5px}.ca-title-arrow{align-self:flex-start;color:var(--dim);font-size:14px}.ca-poster{width:58px;aspect-ratio:2/3;flex:none;overflow:hidden;border-radius:calc(var(--r-s) * .75);background:var(--bg2);display:grid;place-items:center;color:var(--dim);font-size:22px}.ca-poster img{display:block;width:100%;height:100%;object-fit:cover}@media(hover:hover) and (pointer:fine){.ca-title:hover,.ca-character:hover{background:var(--elev2);border-color:var(--line-hi)}}.ca-title:focus-visible,.ca-character:focus-visible,.ca-chip:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.ca-starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.ca-chip{min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--utility-control-radius);background:none;color:var(--dim);font:inherit;font-size:11px;cursor:pointer}.ca-chip:hover{color:var(--fg);border-color:var(--line-hi)}
.ca-state{padding:20px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--elev)}.ca-state>strong{font-size:15px}.ca-state p{font-size:12px;line-height:1.6;color:var(--dim);margin:7px 0 14px}.ca-state .action-btn{margin-right:8px}.ca-more{margin-top:16px}.ca-note{font-size:11px;line-height:1.5;color:var(--dim);margin:16px 0 0}
.ca-chosen-title{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}.ca-chosen-title>.ca-poster{width:36px;height:52px;border-radius:5px}.ca-chosen-title>div{flex:1;min-width:0}.ca-chosen-title strong{display:block;font-size:15px;overflow-wrap:anywhere}.ca-chosen-title small{display:block;font-size:11px;color:var(--dim);margin-top:4px}.ca-chosen-title .action-btn{flex:none;min-height:44px}
.ca-character-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}.ca-character-layout.has-selection{grid-template-columns:minmax(0,1fr) 220px}.ca-character-browser{min-width:0}.ca-character-browser>.ui-field{width:100%;margin:8px 0 20px}.ca-character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.ca-character{min-width:0;border:1px solid transparent;border-radius:var(--r-m);padding:7px;background:none;color:var(--fg);text-align:left;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease)}.ca-character strong{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}.ca-portrait{display:block;position:relative;aspect-ratio:1;margin-bottom:10px;overflow:hidden;-webkit-mask:var(--profile-picture-mask);mask:var(--profile-picture-mask);background:var(--bg2)}.ca-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}.ca-portrait>i{display:none;position:absolute;inset:0;place-items:center;font-size:26px;background:#0005;color:white;font-style:normal}.ca-character.is-selected{border-color:var(--fg);background:var(--elev)}.ca-character.is-selected .ca-portrait>i{display:grid}
.ca-selection{position:sticky;top:0;min-width:0;padding:16px;border:1px solid var(--line-hi);border-radius:var(--r-m);background:var(--elev)}.ca-selection[hidden]{display:none}.ca-selected-copy h3{font-size:17px;line-height:1.3;letter-spacing:-.025em;margin:7px 0 16px;overflow-wrap:anywhere}.ca-selection>.action-btn{width:100%;min-height:48px;margin-top:14px}.ca-crop-preview{aspect-ratio:1;width:100%;background:var(--bg2);-webkit-mask:var(--profile-picture-mask);mask:var(--profile-picture-mask);overflow:hidden}.ca-crop-preview canvas{display:block;width:100%;height:100%}.ca-ready{font-size:10px;color:var(--dim);text-align:center;margin:12px 0 0}.ca-photo-loading{position:relative}.ca-selection .ca-state{padding:12px}.ca-selection .ca-state>strong{font-size:13px}.ca-selection .ca-state p{font-size:11px}.ca-selection .ca-state .action-btn{width:100%;margin:0}
/* Match the final frames, sharing the app's visible-region loading material. */
.ca-skeleton-card{cursor:default;background:var(--elev)}.ca-skeleton-card.ca-character{background:none}.ca-skeleton-copy{flex:1;min-width:0}.ca-skeleton .ls-bars{gap:9px}.ca-skeleton .ls-bars i{width:76%;height:12px}.ca-skeleton .ls-bars i+i{width:42%;height:9px}.ca-character.ca-skeleton-card .ls-bars i{width:72%;height:12px}
.ca-poster,.ca-portrait,.ca-crop-preview{position:relative}.character-avatar-dialog .ca-art-placeholder{position:absolute;inset:0;border-radius:inherit}.ca-poster img,.ca-portrait img{opacity:0;transition:opacity .26s var(--ease)}.ca-poster.is-loaded img,.ca-portrait.is-loaded img{opacity:1}.ca-poster.is-missing{background:linear-gradient(145deg,var(--elev2),var(--bg2));color:var(--dimmer)}.ca-poster.is-missing::after{content:'';position:absolute;inset:9px;border:1px solid var(--line);border-radius:3px;pointer-events:none}
.ca-title-arrow{transition:transform .2s var(--ease),color .2s var(--ease)}.ca-title:active,.ca-character:active{transform:scale(.985)}.ca-portrait{transition:transform .22s var(--ease)}.ca-character.is-selected .ca-portrait>i{animation:ca-check .2s var(--pop)}.ca-steps>span{transition:color .2s var(--ease)}
.character-avatar-dialog::backdrop{animation:ca-backdrop .28s var(--ease)}.character-avatar-dialog.is-closing{animation:ca-exit .18s var(--ease) both;pointer-events:none}.character-avatar-dialog.is-closing::backdrop{animation:ca-backdrop-exit .18s var(--ease) both}
@keyframes ca-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@keyframes ca-exit{to{opacity:0;transform:translateY(6px) scale(.99)}}@keyframes ca-backdrop{from{opacity:0}to{opacity:1}}@keyframes ca-backdrop-exit{to{opacity:0}}@keyframes ca-check{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){.ca-title:hover .ca-title-arrow{transform:translateX(3px);color:var(--fg)}.ca-character:hover .ca-portrait{transform:scale(.985)}}
@media(max-width:640px){.character-avatar-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:20px}.ca-header{padding:20px 18px 16px}.ca-header h2{font-size:25px}.ca-header p{font-size:12px}.ca-steps{padding:0 18px 16px;gap:16px}.ca-body{padding:18px}.ca-footer{padding:12px 18px}.ca-footer>span{display:none}.ca-search-row{gap:8px;flex-wrap:wrap}.ca-search-field{flex-basis:100%}.ca-search-row .qtok{min-height:44px;width:100%}.ca-section-heading{align-items:flex-start}.ca-section-heading>span{text-align:right;max-width:45%}.ca-title-grid{grid-template-columns:minmax(0,1fr)}.ca-title{gap:12px}.ca-title strong{font-size:14px}.ca-character-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,88px),1fr));gap:5px}.ca-character{padding:5px}.ca-character strong{font-size:11px}.ca-character-layout.has-selection{grid-template-columns:minmax(0,1fr)}.ca-selection{position:static;grid-row:1;display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px 14px;align-items:center;padding:14px}.ca-selection .ca-crop-preview,.ca-photo-loading{grid-column:1;grid-row:1;width:76px}.ca-selected-copy{grid-column:2;grid-row:1}.ca-selected-copy h3{font-size:17px;margin-bottom:0}.ca-selected-copy .ca-kicker{font-size:9px}.ca-selection>.action-btn{grid-column:1/-1;margin:0}.ca-ready{display:none}.ca-selection>.ca-state{grid-column:1/-1}.ca-selected-copy:has(+.ca-state){grid-column:1/-1}.ca-starters{gap:6px}.ca-chip{padding:9px 11px;font-size:10px}.ca-chosen-title{gap:8px}.ca-chosen-title>.ca-poster{display:none}.ca-chosen-title strong{font-size:14px}.ca-chosen-title .action-btn{padding:0 8px}}
@media(max-height:540px) and (min-width:641px){.ca-header{padding:14px 24px 10px}.ca-header h2{font-size:24px}.ca-header p{display:none}.ca-steps{padding:0 24px 12px}.ca-body{padding:16px 24px}.ca-footer{padding:10px 24px}.ca-character-layout.has-selection{grid-template-columns:minmax(0,1fr) 180px}.ca-selection{padding:12px}.ca-selected-copy h3{font-size:15px}}
@media(prefers-reduced-motion:reduce){.character-avatar-dialog,.character-avatar-dialog::backdrop,.character-avatar-dialog.is-closing,.character-avatar-dialog.is-closing::backdrop,.ca-character.is-selected .ca-portrait>i{animation:none}.ca-title,.ca-character,.ca-title-arrow,.ca-portrait,.ca-poster img,.ca-portrait img,.ca-steps>span{transition:none}.ca-title:active,.ca-character:active,.ca-title:hover .ca-title-arrow,.ca-character:hover .ca-portrait{transform:none}}
@media(forced-colors:active){.ca-title,.ca-chip,.ca-state,.ca-selection,.ca-character.is-selected{border-color:CanvasText}.ca-character.is-selected .ca-portrait>i{background:Canvas;color:CanvasText}.ca-skeleton-card{border-color:CanvasText}}