.real-screen { display: block; background: #111; padding: 0; }
.real-screen img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: top left; transition: transform .55s ease; }
.real-screen video { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: top left; background: #101a18; }
.project-card:hover .real-screen img { transform: scale(1.025); }
.real-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(7,17,15,.42)); pointer-events: none; }
.screen-label { position: absolute; left: 18px; bottom: 18px; z-index: 2; background: var(--lime); color: var(--ink); padding: 8px 10px; font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.screen-label i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #e84634; box-shadow: 0 0 0 3px rgba(232,70,52,.18); }
.real-screen .project-index { z-index: 2; background: rgba(7,17,15,.75); color: white; padding: 7px 9px; }
.pet-screen { background: #f5eee7; overflow: hidden; }
.pet-screen iframe { position: absolute; border: 0; width: 1440px; height: 900px; left: 50%; top: 0; transform: translateX(-50%) scale(.38); transform-origin: top center; pointer-events: none; }
.pet-screen::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 60px rgba(7,17,15,.08); }
@media (max-width: 900px) { .pet-screen iframe { transform: translateX(-50%) scale(.32); } }