.pl-lock { display: block; width: 100%; height: auto; overflow: visible; }
.pl-lock .pl-unit { transform-box: fill-box; transform-origin: 50% 100%; }
.pl-lock .pl-mark { transform-box: fill-box; transform-origin: center; }
.pl-lock .pl-ring { stroke-dasharray: 104.3 104.3; stroke-dashoffset: 38.8; }
.pl-lock .pl-dot { transform-box: fill-box; transform-origin: center; }
.pl-lock .pl-stem { transform-box: fill-box; transform-origin: 50% 0; opacity: 0; }
.pl-lock .pl-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.pl-lock .pl-shackle { opacity: 0; transform: translateY(-16px); }
.pl-lock.is-playing .pl-mark { animation: pl-spin 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.pl-lock.is-playing .pl-shackle { animation: pl-shackle 1100ms cubic-bezier(0.5, 0, 0.3, 1) 150ms both; }
.pl-lock.is-playing .pl-ring { animation: pl-ring-close 320ms cubic-bezier(0.65, 0, 0.35, 1) 720ms both; }
.pl-lock.is-playing .pl-dot { animation: pl-dot-home 320ms cubic-bezier(0.65, 0, 0.35, 1) 720ms both; }
.pl-lock.is-playing .pl-stem { animation: pl-stem 220ms cubic-bezier(0.2, 0.8, 0.3, 1) 980ms both; }
.pl-lock.is-playing .pl-unit { animation: pl-click 240ms cubic-bezier(0.3, 0.7, 0.4, 1) 1090ms both; }
.pl-lock.is-playing .pl-pulse { animation: pl-pulse 700ms cubic-bezier(0.2, 0.7, 0.3, 1) 1100ms both; }
@keyframes pl-spin {
0% { opacity: 0; transform: rotate(-450deg) scale(0.55); }
18% { opacity: 1; }
100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes pl-shackle {
0% { opacity: 0; transform: translateY(-30px); }
35% { opacity: 1; transform: translateY(-16px); }
74% { opacity: 1; transform: translateY(-16px); }
86% { opacity: 1; transform: translateY(1.5px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes pl-ring-close { from { stroke-dashoffset: 38.8; } to { stroke-dashoffset: 0; } }
@keyframes pl-dot-home { from { transform: translate(0, 0); } to { transform: translate(14.2px, 11.9px); } }
@keyframes pl-stem { from { opacity: 0; transform: scaleY(0.2); } to { opacity: 1; transform: scaleY(1); } }
@keyframes pl-click {
0% { transform: scale(1, 1); }
40% { transform: scale(1.035, 0.955); }
100% { transform: scale(1, 1); }
}
@keyframes pl-pulse {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 0; transform: scale(1.65); }
}
.pl-splash { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 22%, #ffffff 0%, var(--bg) 48%, var(--bg-strong) 100%); cursor: pointer; }
.pl-splash-inner { display: grid; justify-items: center; gap: 18px; max-width: 100%; padding: 24px; text-align: center; animation: pl-rise 520ms cubic-bezier(0.22, 0.68, 0.36, 1) both; }
@keyframes pl-rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.pl-splash-art { width: min(150px, 38vw); }
.pl-splash-title { margin: 6px 0 0; font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); animation: pl-fade-up 420ms cubic-bezier(0.22, 0.68, 0.36, 1) 1150ms both; }
.pl-splash-sub { margin: -8px 0 0; font-size: 15px; font-weight: 600; color: var(--muted-strong); animation: pl-fade-up 420ms cubic-bezier(0.22, 0.68, 0.36, 1) 1250ms both; }
@keyframes pl-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pl-splash-rule { width: min(240px, 60vw); height: 2px; margin-top: 4px; border-radius: 2px; background: rgba(15, 23, 42, 0.08); overflow: hidden; }
.pl-splash-rule::after { content: ""; display: block; height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(90deg, #10b981, #0a84ff); transform-origin: left center; animation: pl-fill 1600ms cubic-bezier(0.3, 0.8, 0.35, 1) 200ms both; }
@keyframes pl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pl-splash-label { font-size: 11px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); animation: pl-label 480ms ease 260ms both; }
@keyframes pl-label { from { opacity: 0; letter-spacing: 0.42em; } to { opacity: 0.95; letter-spacing: 0.26em; } }
.pl-splash.is-leaving { animation: pl-open 540ms cubic-bezier(0.4, 0, 0.2, 1) forwards; pointer-events: none; }
@keyframes pl-open { from { opacity: 1; transform: scale(1); filter: blur(0); } to { opacity: 0; transform: scale(1.14); filter: blur(10px); } }
.pl-modal { position: fixed; inset: 0; z-index: 4600; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, 0.34); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); animation: pl-backdrop 260ms ease both; }
@keyframes pl-backdrop { from { opacity: 0; } to { opacity: 1; } }
.pl-modal.is-leaving { animation: pl-backdrop-out 220ms ease forwards; pointer-events: none; }
.pl-modal.is-leaving .pl-card { animation: pl-card-out 220ms ease forwards; }
@keyframes pl-backdrop-out { to { opacity: 0; } }
@keyframes pl-card-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.pl-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px 30px 24px; border-radius: var(--radius-lg); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 40px 100px rgba(15, 23, 42, 0.28), 0 2px 0 rgba(255, 255, 255, 0.9) inset; text-align: center; animation: pl-card-in 460ms cubic-bezier(0.22, 0.68, 0.36, 1) both; }
@keyframes pl-card-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.pl-card-art { width: 112px; margin: -4px auto 10px; }
.pl-card-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.pl-card-title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.pl-card-body { margin: 10px auto 0; max-width: 40ch; font-size: 15px; line-height: 1.55; color: var(--text); }
.pl-points { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; text-align: left; }
.pl-point { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(10, 132, 255, 0.04); border: 1px solid rgba(10, 132, 255, 0.10); }
.pl-point-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #10b981, #0a84ff); box-shadow: 0 8px 18px rgba(10, 132, 255, 0.22); }
.pl-point-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pl-point-copy strong { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.pl-point-copy span { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--muted-strong); }
.pl-card-actions { display: grid; justify-items: center; gap: 12px; margin-top: 22px; }
.pl-card-button { display: inline-flex; justify-content: center; align-items: center; min-width: 160px; padding: 12px 26px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #1f8fff, #0a6fe0); box-shadow: 0 14px 28px rgba(10, 132, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3); cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
@media (hover: hover) and (pointer: fine) {
.pl-card-button:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(10, 132, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}
.pl-card-button:focus-visible { outline: 3px solid rgba(10, 132, 255, 0.4); outline-offset: 3px; }
.pl-sound { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted-strong); background: rgba(255, 255, 255, 0.7); cursor: pointer; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
.pl-sound:hover { color: var(--text); background: #fff; border-color: rgba(15, 23, 42, 0.18); }
}
.pl-sound:focus-visible { outline: 3px solid rgba(10, 132, 255, 0.4); outline-offset: 2px; }
.pl-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-sound svg path:first-child { fill: currentColor; }
.pl-sound[aria-checked="false"] { color: var(--muted); }
.pl-splash .pl-sound { margin-top: 6px; animation: pl-fade-up 420ms cubic-bezier(0.22, 0.68, 0.36, 1) 600ms both; }
@media (max-width: 520px) {
.pl-card { padding: 24px 18px 20px; }
.pl-card-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
.pl-lock .pl-mark, .pl-lock .pl-shackle, .pl-lock .pl-ring, .pl-lock .pl-dot, .pl-lock .pl-stem, .pl-lock .pl-unit, .pl-lock .pl-pulse,
.pl-modal, .pl-card { animation: none !important; }
.pl-lock .pl-shackle { opacity: 1; transform: none; }
.pl-lock .pl-ring { stroke-dashoffset: 0; }
.pl-lock .pl-dot { transform: translate(14.2px, 11.9px); }
.pl-lock .pl-stem { opacity: 1; }
}