/* Preserve the existing compact reference/model pair in the character card. */
.clay-viewer{position:relative;min-width:0;align-self:start;color:#253e55;background:#e8eef4}
.clay-surface{position:relative;width:100%;aspect-ratio:1;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;background:radial-gradient(ellipse at 50% 38%,#fff,#edf2f7 65%,#dfe7ef)}
.clay-surface>img,.clay-surface>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.clay-surface>img{transform:translateY(46%) scale(2)}
.clay-surface>canvas{opacity:0}.clay-ready .clay-surface>canvas{opacity:1}.clay-ready .clay-surface>img{visibility:hidden}
.clay-viewer[data-clay-drag=rotate] .clay-surface{cursor:grabbing}.clay-viewer[data-clay-drag=pan] .clay-surface{cursor:move}
.clay-surface:focus-visible{outline:2px solid #658cbc;outline-offset:-3px}
.clay-badge{position:absolute;top:12px;right:12px;pointer-events:none;font:10px var(--mono,monospace);color:#4b6378}
.clay-help{position:absolute;inset:auto 0 0;margin:0!important;padding:22px 8px 8px;font:9px/1.5 var(--sans,sans-serif);text-align:center;color:#405a71;background:linear-gradient(transparent,#eef3f8ed 45%);pointer-events:none;opacity:0}
.clay-surface:hover .clay-help,.clay-surface:focus-visible .clay-help{opacity:1}.clay-viewer[data-clay-drag] .clay-help{opacity:0}
.clay-status{position:absolute;inset:auto 8px 8px;margin:0!important;border-radius:5px;padding:6px 8px;font:10px/1.5 var(--sans,sans-serif);color:#704631;background:#fff5e9f5;pointer-events:none}
.clay-status:empty{display:none}