.wpg { --wpg-ink: #38332e; --wpg-paper: #faf7f2; color: var(--wpg-ink); width: 100%; margin: 24px auto; }
.wpg *, .wpg *::before, .wpg *::after { box-sizing: border-box; }
.wpg [hidden] { display: none !important; }
.wpg button, .wpg input { font: inherit; }
.wpg button { cursor: pointer; }
.wpg button:disabled { cursor: wait; opacity: .6; }
.wpg button:focus-visible, .wpg a:focus-visible, .wpg input:focus-visible { outline: 3px solid #986325; outline-offset: 3px; }
.wpg-status:empty { display: none; }
.wpg-login { max-width: 460px; margin: 40px auto; padding: 32px; border: 1px solid #d8cfc1; border-radius: 12px; background: var(--wpg-paper); }
.wpg-login h2 { margin-top: 0; }
.wpg-login label { display: block; }
.wpg-login input { width: 100%; display: block; margin: 8px 0 20px; padding: 10px; color: #222; background: white; border: 1px solid #857a6d; border-radius: 4px; }
.wpg-login button, .wpg-toolbar button, .wpg-retry { border: 0; border-radius: 5px; padding: 10px 18px; background: #514538; color: white; }
.wpg-toolbar { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.wpg-grid { display: grid; gap: 8px; grid-auto-rows: 8px; }
.wpg .wpg-tile { display: block; width: 100%; height: 100%; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 2px; overflow: hidden; background: #e8e1d7; }
.wpg-tile img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .2s ease; }
@media (hover: hover) { .wpg-tile:hover img { transform: scale(1.025); } }
.wpg-lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: #141310; color: #fff; }
.wpg-lightbox[open] { display: flex; flex-direction: column; }
.wpg-lightbox::backdrop { background: #141310; }
.wpg-lightbox-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; }
.wpg-lightbox button { min-width: 44px; min-height: 44px; padding: 8px 12px; background: #38352e; border: 1px solid #777; color: white; border-radius: 5px; }
.wpg-lightbox a { color: white; text-decoration: underline; }
.wpg-stage { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-height: 0; }
.wpg-stage .wpg-full { display: block; width: 0; flex: 1; height: 100%; min-width: 0; object-fit: contain; }
.wpg-stage button { font-size: 32px; flex: 0 0 44px; padding: 0; }
.wpg-view-status { min-height: 1.5em; margin: 8px 0 0; text-align: center; }
@media (max-width: 599px) { .wpg-lightbox { padding: 8px; } .wpg-stage { gap: 4px; } .wpg-login { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .wpg-tile img { transition: none; } }