/* The artwork is the entire surface; the only visible control is dismissal. */
.art-dialog{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;align-items:center;justify-items:center;color:#fff}
.art-dialog[open]{display:grid}
.art-dialog::backdrop{background:rgb(20 20 17 / .64);backdrop-filter:blur(12px) saturate(.75);opacity:0;transition:opacity .42s ease}
.art-dialog.is-visible::backdrop{opacity:1}
.art-surface{position:relative;width:min(1240px,calc(100vw - 64px),calc((100svh - 64px)*var(--art-ratio,1.5)));aspect-ratio:var(--art-ratio,1.5);border-radius:20px;background:#fff;box-shadow:0 28px 100px rgb(0 0 0 / .3);transform-origin:center;isolation:isolate}
.art-content{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#fff}
.art-content>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.art-dialog .art-content>.card-anchor{position:absolute;inset:0;width:100%;height:100%;max-width:none;translate:0;transform:none;aspect-ratio:auto}
.art-content .example-sheet{border-radius:20px;box-shadow:none;transform:none!important;opacity:1!important;visibility:visible;will-change:auto}
.art-close{position:absolute;right:16px;top:16px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#181815b8;color:#fff;cursor:pointer;transition:background .2s;z-index:2}
.art-close svg{width:20px;height:20px;display:block}.art-close:hover{background:#101010}.art-close:focus-visible{outline:2px solid #e0c8a8;outline-offset:4px}
@media(max-width:600px){.art-surface{width:min(calc(100vw - 24px),calc((100svh - 32px)*var(--art-ratio,1.5)));border-radius:12px}.art-content .example-sheet{border-radius:12px}.art-close{right:8px;top:8px}}
@media(prefers-reduced-motion:reduce){.art-dialog::backdrop,.art-close{transition:none}}