.viewer {
  background: radial-gradient(ellipse at 50% 0%, #34241b 0%, #1d1511 42%, #17110e 80%);
  min-height: 100vh;
  color: #f6e7cd;
}
.viewer-shell { max-width: 1660px; padding: clamp(18px, 3vw, 52px); margin-inline: auto; }
.viewer-header { display: grid; justify-items: center; text-align: center; padding: clamp(8px, 1.2vw, 20px) 0 clamp(24px, 3.5vw, 52px); }
.viewer-logo { width: 98px; height: 54px; object-fit: contain; filter: brightness(0) invert(89%) sepia(25%) saturate(550%) hue-rotate(345deg); }
.viewer-label { margin-top: 8px; color: #dbac7a; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.viewer-header h1 { font: 580 clamp(2.25rem, 5vw, 5rem)/1.02 var(--serif); letter-spacing: -.058em; margin: 13px 0 8px; }
.viewer-header h1 em { font-weight: 450; color: #eac394; }
.viewer-intro { color: #ccb59c; font-size: clamp(.85rem, 1.25vw, 1.02rem); }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.viewer-status { display: flex; align-items: center; gap: 8px; color: #efd6b5; font-size: 12px; font-weight: 700; }
.viewer-status i { width: 7px; height: 7px; background: #c7a36b; border-radius: 50%; box-shadow: 0 0 0 3px #c7a36b22; }
.viewer-actions { display: flex; gap: 7px; }
.viewer-actions button,.viewer-expand { border: 1px solid #644933; padding: 5px 10px; border-radius: 5px; color: #f0d5b2; font-size: 12px; background: #2c2019; }
.viewer-actions button:hover,.viewer-expand:hover { background: #493225; }
.viewer-actions #play-wall { background: #e0b179; border-color: #e0b179; color: #261912; font-weight: 750; }
.viewer-actions #play-wall:hover:not(:disabled) { background: #f4cb9c; }
.viewer-actions #play-wall:disabled { opacity: .55; }
.viewer-progress { height: 2px; background: #513827; margin: 12px 0 15px; }
.viewer-progress span { display: block; width: 0; height: 100%; background: #e3b77e; }
.viewer-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 25px); align-items: start; }
.viewer-wall-expanded { grid-template-columns: minmax(0, 1fr); max-width: 1240px; margin-inline: auto; }
.viewer-tv[hidden] { display: none; }
.viewer-tv { min-width: 0; }
.viewer-tv header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 1px 8px; }
.viewer-screen-name { font-size: clamp(.77rem, 1.15vw, 1rem); font-weight: 700; }
.viewer-screen-name small { margin-right: 6px; color: #ce9e69; font-size: 9px; letter-spacing: .12em; }
.viewer-slot { border: clamp(3px, .46vw, 7px) solid #120d0a; border-radius: 8px; box-shadow: 0 0 0 1px #73543a, 0 12px 32px #0e08054f; overflow: hidden; }
.viewer-phase { min-height: 22px; margin: 9px 1px 0; font-size: 11px; color: #ba9d80; font-variant-numeric: tabular-nums; }
.viewer-tv[data-phase="promo"] .viewer-phase { color: #f1c892; }
.viewer-tv[data-phase="animation"] .viewer-phase { color: #f1c892; }
.viewer-animation-tile { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #120d0a; }
.viewer-wall-animated .viewer-tv header { min-height: 28px; }
.viewer-wall-animated .viewer-expand { visibility: hidden; }
.viewer-footer { border-top: 1px solid #513827; margin-top: 18px; padding-top: 12px; display: flex; justify-content: space-between; gap: 8px; color: #ab9075; font-size: 11px; }
.viewer-slot .show-campaign { display: grid; grid-template-columns: 47% 53%; align-items: stretch; color: var(--ad-ink); background: var(--ad-paper); }
.show-campaign { --ad-ink: #f9e8ce; --ad-paper: #4d211f; --ad-accent: #f7c17e; }
.show-campaign::before { z-index: 2; border-color: color-mix(in srgb,var(--ad-accent) 55%,transparent); pointer-events: none; inset: 2.5%; }
.show-campaign.campaign-drinks { --ad-paper: #282e21; --ad-accent: #d8d695; }
.show-campaign.campaign-cakes { --ad-paper: #f2d9b6; --ad-ink: #55291e; --ad-accent: #7a402a; }
.campaign-copy { z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 4cqw 1.8cqw 4cqw 5.2cqw; background: repeating-linear-gradient(132deg,#0000 0 12px,#00000008 13px 14px); }
.campaign-copy>img { width: 11cqw; height: 7cqw; object-fit: contain; object-position: left; margin-bottom: 2cqw; filter: brightness(0) invert(91%) sepia(25%) saturate(460%) hue-rotate(345deg); }
.campaign-cakes .campaign-copy>img { filter: brightness(0) saturate(100%) invert(17%) sepia(35%) saturate(1443%) hue-rotate(334deg); }
.campaign-eyebrow { color: var(--ad-accent); font-size: 2cqw; font-weight: 700; line-height: 1.2; letter-spacing: .13em; text-transform: uppercase; }
.show-campaign .campaign-title { font-size: 7.5cqw; font-weight: 640; margin: 1.05cqw 0 1.25cqw; line-height: .92; color: var(--ad-ink); }
.campaign-description { font-size: 2.28cqw; line-height: 1.28; }
.campaign-price { align-self: flex-start; display: inline-flex; gap: .6cqw; align-items: center; border-block: 1px solid currentColor; padding-block: .58cqw; margin-top: 1.8cqw; color: var(--ad-accent); font-weight: 750; font-size: 3.6cqw; }
.campaign-price small { font-size: 1.7cqw; letter-spacing: .08em; text-transform: uppercase; }
.campaign-image { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.campaign-image>img,.campaign-image>svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.campaign-cones .campaign-image>img { object-position: 36% 59%; }
.campaign-cakes .campaign-image>img { object-position: 50% 56%; }
.campaign-drinks .campaign-image { background: #8b1c19; display: grid; place-items: center; }
.campaign-drinks .campaign-image>svg { width: 76%; height: 90%; border-radius: 45% 45% 2% 2%; border: 1px solid #e8bd7e85; }
.viewer-tv[data-phase="promo"] .campaign-copy { animation: campaign-in .55s ease-out both; }
.viewer-tv[data-phase="promo"] .campaign-image>img { animation: campaign-image-in 7s ease-out both; }
.viewer-wall-paused .campaign-copy,.viewer-wall-paused .campaign-image>img { animation-play-state: paused; }
@keyframes campaign-in { from { opacity: 0; transform: translateY(1.5cqw); } to { opacity: 1; transform: translateY(0); } }
@keyframes campaign-image-in { from { transform: scale(1.05); } to { transform: scale(1); } }
@media (max-width: 870px) { .viewer-wall { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; gap: 18px; } }
@media (max-width: 870px) {
  .viewer-wall.viewer-wall-animated { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: clamp(4px, 1vw, 12px); }
  .viewer-wall-animated .viewer-expand { display: none; }
  .viewer-wall-animated .viewer-slot { border-width: 2px; border-radius: 4px; }
  .viewer-wall-animated .viewer-phase { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  .viewer-toolbar { flex-wrap: wrap; }
  .viewer-wall-animated .viewer-screen-name { font-size: 0; }
}
@media (prefers-reduced-motion: reduce) { .viewer-tv[data-phase="promo"] .campaign-copy,.viewer-tv[data-phase="promo"] .campaign-image>img { animation: none; } }