/* One composition per viewport, shared by the real scene and its decoded poster. */
.direction-v4 .hero-exhibit.hero-badge-exhibit{container:hero-badges / inline-size;min-height:0;max-width:none;display:flex;flex-direction:column;align-self:start;border-radius:24px;padding:22px 0 20px;overflow:hidden;background:#edf0e8;box-shadow:inset 0 0 0 1px #dbe2d5}
.hero-badge-exhibit .exhibit-meta{position:relative;inset:auto;padding:0 24px;margin-bottom:14px;color:#486052;font-size:13px;line-height:1.5;letter-spacing:.015em;text-transform:none;font-weight:550}
.hero-badge-exhibit .hero-badge-controls{position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;margin:0 24px;z-index:4}
.hero-badge-controls .badge-selection{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #d2dbce;background:#e3e9de;border-radius:99px}
.hero-badge-exhibit .hero-badge-controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border:1px solid transparent;border-radius:99px;padding:9px 18px;font:550 16px/1.25 var(--sans);white-space:nowrap;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.hero-badge-controls [data-badge-select]{background:transparent;color:#465c4a}
.hero-badge-controls [data-badge-select][aria-pressed="true"]{background:#fffdf6;color:#203d2e;border-color:#c5cfbf;box-shadow:0 2px 5px #152c1d0d}
.hero-badge-controls [data-badge-select]:hover{background:#f6f8f1}
.hero-badge-controls [data-badge-flip]{background:#294735;color:#fffdf5;border-color:#294735}
.hero-badge-controls [data-badge-flip]:hover{background:#36583f}
.hero-badge-controls [data-badge-flip] span{font-size:21px;font-weight:400;line-height:1}
.hero-badge-controls button:focus-visible{outline:3px solid #507652;outline-offset:4px}
.hero-badge-exhibit .hero-badge-stage{position:relative;inset:auto;flex:none;width:100%;height:auto;aspect-ratio:.82;max-height:none;margin:2px 0 0;isolation:isolate;touch-action:pan-y}
.hero-badge-exhibit .hero-badge-canvas,.hero-badge-exhibit [data-badge-poster]{mask-image:none;-webkit-mask-image:none}
.hero-badge-exhibit .hero-badge-standin picture{display:block;width:100%;height:100%}
@container hero-badges (min-width:540px){
 .hero-badge-exhibit .hero-badge-stage{aspect-ratio:1.45}
}
@media(max-width:573px){
 .direction-v4 .hero-exhibit.hero-badge-exhibit{padding-top:17px;border-radius:16px}
 .hero-badge-exhibit .exhibit-meta{padding-inline:18px;margin-bottom:10px}
 .hero-badge-exhibit .hero-badge-controls{margin-inline:14px;gap:8px}
 .hero-badge-exhibit .hero-badge-controls button{padding:9px 13px;font-size:16px}
}
@media(max-width:350px){
 .hero-badge-exhibit .hero-badge-controls{gap:5px;margin-inline:10px}
 .hero-badge-exhibit .hero-badge-controls button{padding-inline:9px}
 .hero-badge-controls .badge-selection{gap:1px;padding:3px}
}
@media(prefers-reduced-motion:reduce){.hero-badge-controls button{transition:none}}

/* Printed faces remain the focus; lighting belongs to the selected object. */
.hero-badge-exhibit .hero-exhibit-bg{background:radial-gradient(ellipse at 50% 42%,#fffefa 0,transparent 65%),#edf0e8}
.hero-badge-exhibit::before{display:none}
.hero-badge-controls [data-badge-flip]:active{box-shadow:inset 0 2px 5px #0b1b2140}
