#ps1,#ps1 *{box-sizing:border-box}
#ps1{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
#ps1 .p{display:flex;align-items:center;justify-content:center;background:#000;border-radius:10px;margin:0 auto;cursor:pointer;position:relative;overflow:hidden;width:915px;height:435px;max-width:100%;will-change:transform;transition:transform .3s ease,box-shadow .3s ease}
#ps1 .p:focus{outline:3px solid #ff8c00;outline-offset:2px}
#ps1 .p svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));transition:filter .3s ease}
#ps1 .p:hover{transform:scale(1.01);box-shadow:0 8px 25px rgba(255,140,0,.3)}
#ps1 .p:hover svg{animation:ps1-glow .5s ease-in-out}
#ps1 .p:hover svg rect{fill:url(#ps1-bgh)}
#ps1 .p.clicked{background:#111;opacity:.8}
#ps1 .p.clicked svg{animation:ps1-flash .3s ease-out}
#ps1 .p.clicked svg rect{fill:url(#ps1-bgc)}
@keyframes ps1-glow{0%,100%{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}50%{filter:drop-shadow(0 0 20px rgba(255,140,0,.8)) brightness(1.1)}}
@keyframes ps1-flash{0%{filter:brightness(1.5) drop-shadow(0 0 30px #fff)}100%{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}}
@media(prefers-reduced-motion:reduce){#ps1 .p,#ps1 .p svg{transition:none}#ps1 .p:hover svg,#ps1 .p.clicked svg{animation:none}}