/* Shared shapes stay the same across themes, breakpoints and card states. */
:root{
 --radius-card:16px;
 --radius-panel:24px;
 --radius-inset:12px;
 --radius-pill:999px;
 --control-radius:var(--radius-pill);
}

/* Every layer of a flipping card follows the same silhouette. */
#local.local-collection :is(.pattern-card,.card-inner,.card-front,.card-back,.card-toss){border-radius:var(--radius-card)}
.mechanism-details img,.local-film-wrap{border-radius:var(--radius-card)}

/* Larger surfaces share one curve on mobile and desktop. */
#local.local-collection .local-time-panel,
#site-header .mobile-menu-panel,
.mechanism-sticky .mechanism-visual,
.community-dialog,.references-dialog{border-radius:var(--radius-panel)}
#site-header .mobile-menu-panel nav :is(a,button){border-radius:var(--radius-inset)}

/* Navigation and actions retain the established pill and circular shapes. */
#site-header,#site-header.is-scrolled,
.pill,.pattern-reference-button,
.viewer-controls button,.time-controls button,
.language-switch,.language-switch button{border-radius:var(--radius-pill)}
.icon-button,.round-link,.back-top,.dialog-close,
.local-collection .card-back .card-close,
.local-collection .card-details,.local-collection .card-details:before{border-radius:50%}
.scene-control-row .time-controls{border-radius:var(--radius-pill)}
@media(max-width:700px) and (max-height:740px){
 .scene-control-row .time-controls{border-radius:var(--radius-panel)}
}