*{box-sizing:border-box}body.viewer{margin:0;min-height:100dvh;background:#03060b;color:#fff;font-family:Segoe UI,Arial,sans-serif;overflow:hidden}header{height:64px;display:flex;align-items:center;gap:16px;padding:10px 18px;background:rgba(0,0,0,.45);position:relative;z-index:5}header h1{font-size:clamp(16px,3vw,28px);margin:0;flex:1}header a{text-decoration:none;color:#ffd36d;font-weight:800}select{border-radius:999px;padding:8px;background:#111;color:#fff;border:1px solid #555}main{height:calc(100dvh - 64px);display:grid;grid-template-columns:72px 1fr 72px;align-items:center}button{font-size:54px;color:#fff;background:transparent;border:0;cursor:pointer;height:100%}#stage{position:relative;width:100%;height:100%;margin:0;display:grid;place-items:center;overflow:hidden}#photo{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .55s ease,transform .55s ease,clip-path .6s ease;filter:drop-shadow(0 20px 50px rgba(0,0,0,.55))}figcaption{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 18px;backdrop-filter:blur(10px);max-width:min(92%,900px)}figcaption b{margin-right:10px}.fx-fade{opacity:0}.fx-slide{transform:translateX(60px);opacity:0}.fx-barn{clip-path:inset(0 50% 0 50%)}.fx-pixelate{filter:blur(12px) contrast(1.4)}.fx-infiniteloupe{transform:scale(.82);opacity:.3}@media(max-width:700px){main{grid-template-columns:44px 1fr 44px}button{font-size:36px}header{height:56px}main{height:calc(100dvh - 56px)}figcaption{border-radius:18px;width:90%;font-size:13px}}