.ph{position:absolute;inset:0;display:grid;place-items:center;padding:76px clamp(20px,5vw,72px);background:#141416;container-type:size}.ph .ph-frame{width:min(100cqw - 2 * clamp(20px,5vw,72px),(100cqh - 152px) * var(--ratio));aspect-ratio:var(--ratio);touch-action:none}.ph-frame{position:relative;overflow:hidden;-moz-user-select:none;user-select:none;-webkit-user-select:none}.ph-main{-o-object-fit:cover;object-fit:cover}.ph-hole{width:var(--open);height:auto;aspect-ratio:1;overflow:visible;transform:translate(-50%,-50%);pointer-events:none}.ph-hole,.ph-key{position:absolute}.ph-key{width:1px;height:1px;padding:0;border:0;background:none;opacity:0}.php,.php .ph-frame,.phs{position:absolute;inset:0}.phs{display:grid;grid-template-columns:1fr 56px;background:#141416;color:#fff}.phs-stage{position:relative;min-width:0;min-height:0}.phs .ph{padding:64px clamp(20px,4vw,56px)}.phs .ph .ph-frame{width:min(100cqw,100cqh * var(--ratio))}.phs[data-holes=off] .ph-hole,.phs[data-holes=off] .ph-key{display:none}.phs-rail{justify-content:center;gap:10px;padding:64px 0}.phs-rail,.phs-year{display:flex;flex-direction:column;min-height:0}.phs-dot{position:relative;flex:0 1 8px;min-height:4px;width:100%;display:grid;place-items:center}.phs-dot:before{content:"";width:4px;height:4px;border-radius:50%;background:rgb(255 255 255/.2);transition:transform .2s var(--spring),background-color .15s ease}.phs-dot[aria-current]:before{background:var(--accent);transform:scale(1.5)}.phs-dot:focus-visible:before,.phs-dot:hover:before{background:#fff;transform:scale(2.25)}.phs-dot[aria-current]:hover:before{background:var(--accent)}.phs-dot:focus-visible{outline:none}.phs-peek{position:absolute;right:calc(100% - 8px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:-moz-max-content;width:max-content;pointer-events:none;animation:phs-peek .18s ease-out both}.phs-peek img{display:block;max-width:none;background:rgb(255 255 255/.06);box-shadow:0 12px 32px -8px rgb(0 0 0/.6)}.phs-count,.phs-holes,.phs-peek-year{font-size:.625rem;font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:rgb(255 255 255/.45)}@keyframes phs-peek{0%{opacity:0}}.phs-count,.phs-holes{position:absolute;bottom:22px;text-transform:uppercase}.phs-holes{left:20px;padding:4px 0;transition:color .15s ease}.phs-holes:focus-visible,.phs-holes:hover{color:#fff;outline:none}.phs-state{color:#fff}.phs-holes[aria-checked=true] .phs-state{color:var(--accent)}.phs-count{right:clamp(20px,4vw,56px)}@media (max-width:767px){.phs{grid-template-columns:1fr;grid-template-rows:1fr auto}.phs .ph{padding:64px 16px 56px}.phs-holes{left:16px;bottom:14px}.phs-count{right:16px;bottom:18px}.phs-rail{flex-direction:row;justify-content:flex-start;overflow-x:auto;padding:4px 16px calc(12px + env(safe-area-inset-bottom));scrollbar-width:none}.phs-rail::-webkit-scrollbar{display:none}.phs-year{flex-direction:row;flex:none}.phs-dot{flex:none;width:11px;height:28px}}