.actual-material .artwork-space{height:315px;background:#faf9f766;display:flex;align-items:center;justify-content:center;overflow:visible;transition:background .4s;perspective:1000px}
.actual-material .artwork-space>img{height:82%;width:auto;max-width:90%;object-fit:contain;box-shadow:7px 14px 20px -6px #3b332f33;transform:rotate(-2deg);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.actual-material:nth-child(even) .artwork-space>img{transform:rotate(2deg)}
.actual-material:hover .artwork-space>img,.actual-material:focus-visible .artwork-space>img{transform:translateY(-11px) scale(1.075) rotate(0);box-shadow:8px 24px 26px -9px #3b332f44}
.actual-material:hover .artwork-space{background:#faf9f7bb}.actual-material .card-meta{min-height:92px}.actual-material .card-meta h3{font-size:16px;line-height:1.4;max-width:27ch}
.deck-card{flex-basis:calc((100% - 30px)/2)}.deck-card .artwork-space>img{width:88%;height:auto;transform:rotate(-1deg)}
#material-reader .reader-header{flex-shrink:0}#material-reader .reader-header h2{font-size:24px;max-width:85vw}
.material-view{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:18px 32px 28px;overflow:hidden;touch-action:pan-y}
#material-image{height:100%;width:100%;object-fit:contain;user-select:none}#material-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;color:var(--muted);max-width:80%;text-align:center}#material-loading[hidden]{display:none}
.material-view.zoomed{display:block;overflow:auto;touch-action:auto}.material-view.zoomed #material-image{height:auto;width:1100px;max-width:none;margin:auto;object-fit:contain}
#material-reader[data-format=decks] .material-view.zoomed #material-image{width:1920px}
#material-status{font-size:14px;min-width:115px;text-align:center;font-variant-numeric:tabular-nums}#material-zoom{font-size:14px;min-width:90px}
.page-thumbnails{display:flex;flex-shrink:0;gap:10px;overflow-x:auto;max-width:calc(100% - 64px);margin:14px auto 0;padding:5px 3px 7px;scrollbar-width:thin}
.page-thumbnails button{flex:0 0 88px;padding:5px;border:1px solid transparent;border-radius:2px}.page-thumbnails button img{width:100%;height:43px;object-fit:contain;opacity:.6;transition:opacity .2s}.page-thumbnails button span{display:block;font-size:12px;margin-top:6px;color:var(--muted)}
.page-thumbnails button[aria-current=page]{border-color:var(--accent);background:#faf9f7}.page-thumbnails button[aria-current=page] img,.page-thumbnails button:hover img{opacity:1}
#material-reader[data-format=flyers] .page-thumbnails button{flex-basis:66px}.page-thumbnails button[aria-current=page] span{color:var(--ink)}
@media(max-width:700px){.actual-material{flex-basis:82%}.actual-material .artwork-space{height:310px}.deck-card{flex-basis:94%;max-width:none}.deck-card .artwork-space{height:220px}.material-view{padding:12px 15px 18px}#material-reader .reader-header h2{font-size:20px;max-width:78vw;line-height:1.3}.page-thumbnails{max-width:calc(100% - 28px)}.page-thumbnails button{flex-basis:66px}.page-thumbnails button img{height:34px}#material-reader .reader-header{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.actual-material .artwork-space>img,.actual-material .artwork-space{transition:none}}
#material-crop{display:contents}
.source-crop{display:block;position:relative;overflow:hidden;aspect-ratio:var(--crop-ratio);flex:none}
.source-crop>img{position:absolute;max-width:none;object-fit:fill;transform:none;pointer-events:none}
.cropped-card .artwork-space>.source-crop{width:min(86%,calc(258px * var(--crop-ratio)));box-shadow:7px 14px 20px -6px #3b332f33;transform:rotate(-2deg);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.cropped-card:nth-child(even) .artwork-space>.source-crop{transform:rotate(2deg)}
.cropped-card:hover .artwork-space>.source-crop,.cropped-card:focus-visible .artwork-space>.source-crop{transform:translateY(-11px) scale(1.075);box-shadow:8px 24px 26px -9px #3b332f44}
.cropped-view #material-crop{display:block;margin:auto}
.cropped-view #material-image{max-width:none;object-fit:fill;margin:0}
.cropped-view #material-loading{z-index:1}
.page-thumbnails .source-crop{height:43px;width:auto;max-width:100%;margin:auto}
.page-thumbnails .source-crop>img{object-fit:fill}
.page-thumbnails .source-crop+span{line-height:1.3}
@media(max-width:700px){.page-thumbnails .source-crop{height:34px}.cropped-card .artwork-space>.source-crop{width:min(86%,calc(254px * var(--crop-ratio)))}}
@media(prefers-reduced-motion:reduce){.cropped-card .artwork-space>.source-crop{transition:none}}