.zp{gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-1);margin:14px 0 18px;min-height:76px}.zp,.zp-play{display:flex;align-items:center}.zp-play{flex:none;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;justify-content:center;color:#fff;background:var(--accent-grad,var(--accent));box-shadow:0 6px 18px rgba(242,107,31,.32);transition:transform .15s ease,box-shadow .15s ease}.zp-play:hover{transform:scale(1.05);box-shadow:0 8px 22px rgba(242,107,31,.4)}.zp-play:focus-visible,.zp-speed:focus-visible,.zp-wave:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.zp-playing .zp-play{animation:zp-puls 1.6s ease-in-out infinite}@keyframes zp-puls{50%{box-shadow:0 0 0 8px rgba(242,107,31,.12),0 6px 18px rgba(242,107,31,.32)}}.zp-body{flex:1;flex-direction:column;gap:6px}.zp-body,.zp-head{min-width:0;display:flex}.zp-head{align-items:baseline;gap:10px;flex-wrap:nowrap;line-height:1.3}.zp-title{font-size:15px;color:var(--text-primary);flex:none;max-width:65%}.zp-sub,.zp-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zp-sub{font-size:13px;color:var(--text-muted);flex:1;min-width:0}.zp-wave{position:relative;height:44px;cursor:pointer;touch-action:none;border-radius:6px}.zp-wave canvas{position:absolute;inset:0;display:block}.zp-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}.zp-dur:before{content:"/ "}.zp-dur:empty:before{content:""}.zp-speed{margin-left:auto;border:1px solid var(--border);background:var(--surface-2);color:var(--text-secondary);border-radius:999px;padding:2px 10px;font:inherit;font-size:12px;cursor:pointer}.zp-speed:hover{color:var(--text-primary);border-color:var(--border-strong)}.zp.zp-big{padding:18px 20px}.zp.zp-big .zp-play{width:60px;height:60px}.zp.zp-big .zp-wave{height:56px}.zp.zp-big .zp-title{font-size:16px}.zp-eq{position:absolute;left:16px;bottom:14px;display:flex;align-items:flex-end;gap:4px;height:34px;padding:7px 9px;border-radius:10px;background:rgba(10,10,15,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease;pointer-events:none}.zp-eq i{display:block;width:5px;height:100%;border-radius:3px;background:#fff;transform-origin:bottom;transform:scaleY(.15);transition:transform .08s linear}.zp-ext-playing .zp-eq{opacity:1}@media (max-width:560px){.zp{padding:12px;gap:12px}.zp-play,.zp.zp-big .zp-play{width:46px;height:46px}.zp-wave,.zp.zp-big .zp-wave{height:40px}}@media (prefers-reduced-motion:reduce){.zp-playing .zp-play{animation:none}.zp-eq i{transition:none}}.zp.zp-float{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(720px,calc(100vw - 32px));margin:0;z-index:60;box-shadow:0 12px 36px rgba(10,10,15,.22);animation:zp-vsplyv .22s ease-out}@keyframes zp-vsplyv{0%{opacity:0;transform:translate(-50%,12px)}}.zp.zp-float .zp-head{display:none}@media (max-width:560px){.zp.zp-float{bottom:84px;width:calc(100vw - 20px)}}