#punch{--u: min(calc(100vw / 1100), calc(100svh / 620));--punch-h: 210svh;position:relative;margin-top:-34svh;height:var(--punch-h);color:var(--ink)}#punch .blue{color:var(--blue)}#punch .punch__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:transparent;perspective:1200px;perspective-origin:50% 50%}#punch .punch__world{position:absolute;inset:0;transform-style:preserve-3d;z-index:1}#punch .tile{position:absolute;left:50%;top:50%;width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h));margin-left:calc(var(--u) * var(--x));margin-top:calc(var(--u) * var(--y));opacity:0;visibility:hidden;will-change:transform,opacity}#punch .tin{will-change:filter;width:100%;height:100%;border-radius:calc(var(--u) * 14);overflow:hidden;background:var(--paper);transform:rotate(var(--r, 0deg));box-shadow:0 0 0 1px #c9c6bfe6,0 18px 30px -12px #34486857}#punch .tin img{width:100%;height:100%;object-fit:cover}#punch .tin img.crop{scale:1.16}#punch .punch__halo{position:absolute;left:50%;top:50%;width:calc(var(--u) * 980);height:calc(var(--u) * 440);transform:translate(-50%,-50%);z-index:6;pointer-events:none;background:radial-gradient(closest-side,#f5f3effa,#f5f3eff5 52%,#f5f3efd1 72%,#f5f3ef00)}#punch .punch__lock{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);z-index:10;margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--body);letter-spacing:normal;line-height:1.1}#punch .l1,#punch .l2,#punch .l3{will-change:transform,opacity,filter}#punch .l1{font-weight:500;font-size:calc(var(--u) * 28);letter-spacing:-.02em}#punch .l2{position:relative;display:inline-block;margin-top:calc(var(--u) * 6);font-family:var(--display);font-weight:800;font-size:calc(var(--u) * 164);line-height:.92;letter-spacing:var(--ls-xl);word-spacing:var(--ws);white-space:nowrap;text-shadow:0 0 .22em rgba(245,243,239,.9)}#punch .l3{margin-top:calc(var(--u) * 10);font-weight:600;font-size:calc(var(--u) * 31);letter-spacing:-.02em;color:#141416b8;text-shadow:0 0 .5em rgba(245,243,239,.95),0 0 .2em rgba(245,243,239,.9)}#punch .star{position:absolute;display:block}#punch .star.s1{left:calc(var(--u) * -48);top:calc(var(--u) * 8);width:calc(var(--u) * 30);height:calc(var(--u) * 30);animation:punch-spark 2.6s ease-in-out infinite}#punch .star.s2{right:calc(var(--u) * -40);bottom:calc(var(--u) * 28);width:calc(var(--u) * 22);height:calc(var(--u) * 22);animation:punch-spark 2.6s ease-in-out infinite 1.3s}@keyframes punch-spark{0%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.1) rotate(45deg);opacity:1}to{transform:scale(.7) rotate(90deg);opacity:.6}}#punch .punch__perch{position:absolute;z-index:12;right:clamp(16px,3.2vw,72px);bottom:calc(var(--u) * 6);width:calc(var(--u) * 172);aspect-ratio:1;pointer-events:none}#punch .punch__slot{position:absolute;inset:0}@media(max-width:700px){#punch{--u: calc(100vw / 620)}#punch .punch__perch{width:calc(var(--u) * 190);bottom:calc(var(--u) * 14)}}#punch.is-rm{height:100svh}#punch.is-rm .star{animation:none}#punch.is-rm .l1,#punch.is-rm .l2,#punch.is-rm .l3{opacity:1!important;filter:none!important;transform:none!important}html #punch{--punch-h: 210svh}#punch .frm{position:absolute;left:50%;top:50%;width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h));margin-left:calc(var(--u) * var(--w) / -2);margin-top:calc(var(--u) * var(--h) / -2);border:1.5px solid rgba(20,20,22,.1);border-radius:calc(var(--u) * 30);opacity:0;will-change:transform,opacity}#punch.is-rm .frm{display:none}#punch .punch__edge{position:absolute;inset:0;z-index:4;pointer-events:none}#punch .pe{position:absolute;left:50%;top:50%;width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h));margin-left:calc(var(--u) * var(--x));margin-top:calc(var(--u) * var(--y));border-radius:calc(var(--u) * 14);overflow:hidden;background:var(--paper);opacity:0;will-change:transform,opacity;box-shadow:0 0 0 1px #c9c6bfe6,0 22px 34px -14px #3448685c}#punch .pe img{display:block;width:100%;height:100%;object-fit:cover}#punch .pe img.crop{scale:1.16}#punch .pe1{--x: -540;--y: -262}#punch .pe2{--x: -436;--y: -34}#punch .pe3{--x: -552;--y: 30}#punch .pe4{--x: 398;--y: -262}#punch .pe5{--x: 372;--y: -62}#punch.is-rm .pe{opacity:.94;transform:rotate(var(--r, 0deg))}@media(max-width:700px){#punch .pe1{--x: -300;--y: -600}#punch .pe4{--x: 120;--y: -560}#punch .pe2{--x: -310;--y: 300}#punch .pe3{--x: -150;--y: 372}#punch .pe5{display:none}}