.pj-play{cursor:pointer;background:color-mix(in srgb, var(--gb-bg0) 52%, transparent);color:var(--pj-ink);font-family:var(--pj-font-ui);transition:background var(--pj-base) var(--pj-ease);border:none;justify-content:center;align-items:center;padding:16px;font-size:13px;display:flex;position:absolute;inset:0}.pj-play:hover{background:color-mix(in srgb, var(--gb-bg0) 34%, transparent)}.pj-play-key{align-items:center;gap:10px;display:flex}.pj-play-icon{justify-content:center;align-items:center;display:flex}.pj-play-icon svg{width:15px;height:15px;margin-left:2px}.pj-play-round .pj-play-key{flex-direction:column;gap:12px}.pj-play-round .pj-play-icon{background:var(--pj-surface);width:46px;height:46px;color:var(--pj-link);border:1px solid color-mix(in srgb, var(--pj-link) 30%, transparent);transition:background var(--pj-base) var(--pj-ease), color var(--pj-base) var(--pj-ease);border-radius:50%}.pj-play-round:hover .pj-play-icon{background:var(--pj-link);color:var(--pj-surface)}.pj-play-button{background:#0000006b}.pj-play-button:hover{background:#0000004d}.pj-play-button .pj-play-key{border:2px solid var(--gb-fg);border-radius:var(--pj-r-md);background:var(--pj-link);color:var(--gb-bg0);box-shadow:4px 4px 0 var(--gb-fg);padding:13px 24px 13px 20px;font-size:17px;font-weight:700}.pj-play-button:hover .pj-play-key{background:color-mix(in srgb, var(--pj-link) 86%, #000)}.pj-play-title{color:#fff;background:#0000008f}.pj-play-title:hover{background:#00000070}.pj-play-title .pj-play-key{gap:16px;max-width:86%}.pj-play-title .pj-play-icon svg{width:22px;height:22px}.pj-play-title .pj-play-label{font-family:var(--pj-font-display);text-align:left;text-underline-offset:8px;transition:text-decoration-color var(--pj-base) var(--pj-ease);font-size:clamp(22px,4.2vw,40px);line-height:1.1;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;text-decoration-thickness:2px}.pj-play-title:hover .pj-play-label{text-decoration-color:currentColor}.pj-play-corner,.pj-play-corner:hover{background:0 0;justify-content:flex-start;align-items:flex-end}.pj-play-corner .pj-play-key{border:1.5px solid var(--gb-fg);border-radius:var(--pj-r-sm);background:var(--pj-surface);color:var(--pj-ink);gap:6px;padding:8px 14px 8px 11px;font-weight:600}.pj-play-corner .pj-play-icon{color:var(--pj-link)}.pj-play-corner:hover .pj-play-key,.pj-play-corner:hover .pj-play-icon{background:var(--pj-link);color:var(--gb-bg0)}.pj-loading{background:color-mix(in srgb, var(--gb-bg0) 80%, transparent);color:var(--pj-ink);font-family:var(--pj-font-ui);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;font-size:13.5px;display:flex;position:absolute;inset:0}.pj-loading[hidden]{display:none}.pj-loading-bar{border:1.5px solid var(--gb-fg);border-radius:var(--pj-r-sm);background:var(--pj-surface);width:min(220px,70%);height:10px;position:relative;overflow:hidden}.pj-loading-fill{width:var(--pj-progress,0%);background:var(--pj-link);transition:width .24s linear;position:absolute;top:0;bottom:0;left:0}.pj-loading-bar:not([aria-valuenow]) .pj-loading-fill{width:30%;animation:1.1s ease-in-out infinite alternate pj-loading-run}@keyframes pj-loading-run{to{transform:translate(233%)}}@media (prefers-reduced-motion:reduce){.pj-loading-bar:not([aria-valuenow]) .pj-loading-fill{width:0;animation:none}}.pj-viewer{background:var(--pj-bg-deep);border-bottom:1px solid var(--pj-line)}.pj-viewer-stage{width:100%;height:min(44vh,400px);position:relative;overflow:hidden}@media (width<=720px){.pj-viewer-stage{height:min(32vh,240px)}}.pj-slide{width:100%;height:100%}.pj-slide[hidden]{display:none}.pj-slide img,.pj-viewer-stage>img{object-fit:contain;width:100%;height:100%;display:block}.pj-viewer-nav{border-radius:var(--pj-r-md);background:color-mix(in srgb, var(--pj-surface) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--pj-line);width:34px;height:34px;color:var(--pj-ink);cursor:pointer;opacity:0;transition:opacity var(--pj-base) var(--pj-ease), border-color var(--pj-fast) var(--pj-ease), color var(--pj-fast) var(--pj-ease);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.pj-viewer-nav svg{width:14px;height:14px}.pj-viewer-prev{left:12px}.pj-viewer-next{right:12px}.pj-viewer-stage:hover .pj-viewer-nav,.pj-viewer-nav:focus-visible{opacity:1}.pj-viewer-nav:hover{border-color:var(--pj-link);color:var(--pj-link)}@media (hover:none){.pj-viewer-nav{opacity:1}}.pj-viewer-counter{background:color-mix(in srgb, var(--pj-surface) 92%, transparent);border:1px solid var(--pj-line);color:var(--pj-ink-2);font-family:var(--pj-font-mono);border-radius:var(--pj-r-sm);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:2px 7px;font-size:10.5px;position:absolute;bottom:11px;right:11px}.pj-viewer-caption{color:var(--pj-ink-3);font-size:12.5px;line-height:1.55;font-family:var(--pj-font-mono);background:var(--pj-bg-sunk);border-top:1px solid var(--pj-line-soft);padding:10px 30px}@media (width<=720px){.pj-viewer-caption{padding:9px 18px}}.pj-demo .pj-viewer-caption{text-align:center;background:0 0;border-top:none;max-width:62ch;margin:0 auto;padding:13px 16px 0}.pj-viewer-demo{background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pj-bg-sunk) 70%, transparent), transparent 70%), var(--pj-bg-deep);padding:34px 34px 30px}@media (width<=720px){.pj-viewer-demo{padding:16px 16px 14px}}.pj-demo{max-width:760px;margin:0 auto}.pj-demo[data-fit=fill]{max-width:none}.pj-demo-frame{width:calc(var(--demo-w,1440) * var(--demo-scale,.5) * 1px);border:1px solid var(--pj-line);border-radius:var(--pj-r-lg);background:var(--pj-surface);max-width:100%;box-shadow:0 1px 2px rgb(var(--gb-shadow) / .06), 0 18px 44px -22px rgb(var(--gb-shadow) / .38);margin:0 auto;overflow:hidden}.pj-demo-chrome{background:var(--pj-bg-sunk);border-bottom:1px solid var(--pj-line);height:30px;font-family:var(--pj-font-mono);color:var(--pj-ink-3);align-items:center;gap:10px;padding:0 8px 0 11px;font-size:10.5px;display:flex}.pj-demo-dots{flex-shrink:0;gap:5px;display:flex}.pj-demo-dots i{background:var(--pj-line);border-radius:50%;width:7px;height:7px}.pj-demo-url{white-space:nowrap;text-overflow:ellipsis;letter-spacing:.02em;flex:1;overflow:hidden}.pj-demo-live{color:var(--pj-ok);text-transform:uppercase;letter-spacing:.11em;border:1px solid color-mix(in srgb, var(--pj-ok) 40%, transparent);border-radius:999px;flex-shrink:0;padding:1px 6px;font-size:9px}.pj-demo-video{color:var(--pj-highlight);border-color:color-mix(in srgb, var(--pj-highlight) 40%, transparent)}.pj-demo-zoom{border-radius:var(--pj-r-sm);width:22px;height:22px;color:var(--pj-ink-3);cursor:pointer;transition:color var(--pj-fast) var(--pj-ease), border-color var(--pj-fast) var(--pj-ease), background var(--pj-fast) var(--pj-ease);background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;display:flex}.pj-demo-zoom svg{width:12px;height:12px}.pj-demo-zoom:hover{color:var(--pj-link);border-color:color-mix(in srgb, var(--pj-link) 40%, transparent);background:var(--pj-link-wash)}.pj-demo-stage{width:100%;height:calc(var(--demo-h,900) * var(--demo-scale,.5) * 1px);background:var(--pj-bg-deep);position:relative;overflow:hidden}.pj-demo-stage-video{aspect-ratio:16/9;height:auto}.pj-demo-surface{width:calc(var(--demo-w,1440) * 1px);height:calc(var(--demo-h,900) * 1px);transform:scale(var(--demo-scale,.45));transform-origin:0 0;position:absolute;top:0;left:0}.pj-demo-surface iframe{background:var(--pj-bg-deep);border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.pj-demo-poster{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.pj-video{object-fit:contain;background:#000;width:100%;height:100%;display:block}.pj-viewer-player{background:var(--pj-bg-deep);padding:30px 34px 26px}@media (width<=720px){.pj-viewer-player{padding:14px 0 12px}}.pj-player{margin:0 auto}.pj-player-stage{width:min(100%, calc(var(--demo-w,960) * 1px), calc(82vh * var(--demo-w,960) / var(--demo-h,600)));aspect-ratio:var(--demo-w,960) / var(--demo-h,600);background:#000;margin:0 auto;position:relative;overflow:hidden}.pj-player-surface{position:absolute;inset:0}.pj-player-surface iframe{background:#000;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.pj-player-bar{width:min(100%, calc(var(--demo-w,960) * 1px), calc(82vh * var(--demo-w,960) / var(--demo-h,600)));justify-content:flex-end;margin:0 auto;padding-top:8px;display:flex}.pj-player[data-fit=fill] .pj-player-stage,.pj-player[data-fit=fill] .pj-player-bar{width:min(100%, calc(82vh * var(--demo-w,960) / var(--demo-h,600)))}@media (width<=720px){.pj-player-bar{padding-right:12px}}.pj-player-full{border:1px solid var(--pj-line);border-radius:var(--pj-r-sm);background:var(--pj-surface);color:var(--pj-ink-2);font-family:var(--pj-font-ui);cursor:pointer;transition:color var(--pj-fast) var(--pj-ease), border-color var(--pj-fast) var(--pj-ease);align-items:center;gap:7px;padding:5px 9px;font-size:12.5px;display:inline-flex}.pj-player-full svg{width:12px;height:12px}.pj-player-full:hover{color:var(--pj-link);border-color:color-mix(in srgb, var(--pj-link) 45%, transparent)}.pj-player-stage:fullscreen{aspect-ratio:auto;width:100%;height:100%}.pj-player-stage:fullscreen{aspect-ratio:auto;width:100%;height:100%}.pj-player.pj-player-max .pj-player-stage{z-index:2;aspect-ratio:auto;width:100%;height:100%;position:fixed;inset:0}.pj-player.pj-player-max .pj-player-bar{z-index:3;width:auto;padding:0;position:fixed;bottom:12px;right:12px}.pj-modal-inner:has(.pj-player-max){clip-path:none!important;transform:none!important}.pj-modal-inner:has(.pj-player-max) .pj-modal-close{display:none}.pj-modal-inner:has(.pj-demo-full){clip-path:none!important;transform:none!important}.pj-demo-exit{z-index:2;border:1px solid var(--pj-line);background:color-mix(in srgb, var(--pj-surface) 94%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--pj-ink-2);cursor:pointer;font-family:var(--pj-font-mono);box-shadow:var(--pj-shadow-hover);transition:color var(--pj-fast) var(--pj-ease), border-color var(--pj-fast) var(--pj-ease);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:11.5px;display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.pj-demo-exit svg{width:11px;height:11px}.pj-demo-exit kbd{border:1px solid var(--pj-line);color:var(--pj-ink-3);border-radius:3px;padding:0 4px;font-family:inherit;font-size:10px}.pj-demo-exit:hover{color:var(--pj-danger);border-color:color-mix(in srgb, var(--pj-danger) 45%, transparent)}.pj-demo.pj-demo-full{z-index:1;background:color-mix(in srgb, var(--gb-bg0) 94%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-width:none;animation:pj-demo-in .32s var(--pj-ease-soft) both;flex-direction:column;justify-content:center;align-items:center;margin:0;padding:34px 34px 70px;display:flex;position:fixed;inset:0}@keyframes pj-demo-in{0%{opacity:0}to{opacity:1}}.pj-demo.pj-demo-full .pj-demo-frame{animation:pj-demo-frame-in .38s var(--pj-ease-soft) both}@keyframes pj-demo-frame-in{0%{opacity:.4;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.pj-demo.pj-demo-full .pj-viewer-caption{display:none}.pj-demo.pj-demo-full .pj-demo-exit{display:inline-flex}.pj-demo.pj-demo-closing{animation:pj-demo-in .2s var(--pj-ease) reverse both}@media (prefers-reduced-motion:reduce){.pj-demo.pj-demo-full,.pj-demo.pj-demo-full .pj-demo-frame,.pj-demo.pj-demo-closing{animation:none}}